/* Project overrides. Keep style.css (generated UIkit build) untouched. */

/*
 * CTA row (partials/buttons.html): the buttons already span their grid column,
 * so UIkit's 30px side padding only eats inner width — it left ~180px for the
 * label, and "Реєстрація на навчання" needs 179.7px, so it wrapped to two lines.
 * Trim the padding and make the box a real block-level flex container.
 */
.tm-cta {
    display: flex;
    width: 100%;
    min-height: 52px;
    padding-left: 16px;
    padding-right: 16px;
    border-radius: 999px;
    line-height: 1.2;
    font-weight: 600;
    letter-spacing: .06em;
    transition: background-color .2s ease-in-out, border-color .2s ease-in-out,
                color .2s ease-in-out, box-shadow .2s ease-in-out, transform .2s ease-in-out;
}

.tm-cta .uk-icon {
    flex: none;
}

.tm-cta:hover {
    transform: translateY(-1px);
}

/* Primary action: filled, so it outranks the secondary registration button. */
.tm-cta--solid,
.tm-cta--solid:hover,
.tm-cta--solid:focus {
    background-color: #ef463e;
    border-color: #ef463e;
    color: #fff;
}

.tm-cta--solid:hover {
    background-color: #d93a32;
    border-color: #d93a32;
    box-shadow: 0 6px 18px rgba(239, 70, 62, .28);
}

/* Phone: one button, the numbers live in its dropdown. */
.tm-cta--call {
    cursor: pointer;
}

.tm-cta__caret {
    margin-left: 8px;
    opacity: .6;
}

/* Forced light: the row sits over a dark section, whose theme rules would
   otherwise repaint the dropdown dark-on-dark. */
.uk-dropdown.tm-call-drop {
    min-width: 240px;
    padding: 10px;
    border-radius: 14px;
    background-color: #fff;
    color: #181818;
    box-shadow: 0 12px 34px rgba(24, 24, 24, .18);
}

.uk-dropdown.tm-call-drop .uk-dropdown-nav > li > a {
    display: flex;
    align-items: center;
    padding: 10px 12px;
    border-radius: 10px;
    color: #181818;
    font-size: 15px;
    font-weight: 500;
    white-space: nowrap;
}

.uk-dropdown.tm-call-drop .uk-dropdown-nav > li > a:hover,
.uk-dropdown.tm-call-drop .uk-dropdown-nav > li > a:focus {
    background-color: rgba(239, 70, 62, .1);
    color: #ef463e;
}

/*
 * Nav highlight: the theme anchors its accent line at bottom:50%, i.e. straight
 * through the label, so the current page reads as struck out. Reuse the same
 * pseudo-element as a pill behind the item instead.
 */
.uk-navbar-nav > li > a::before {
    /* The theme's own hover/active rules recompute `right` from this variable,
       so set it here to keep both edges symmetric around the label. */
    --uk-navbar-nav-item-line-margin-horizontal: -14px;
    top: 50%;
    bottom: auto;
    left: var(--uk-navbar-nav-item-line-margin-horizontal);
    right: var(--uk-navbar-nav-item-line-margin-horizontal);
    height: 34px;
    transform: translateY(-50%);
    border-radius: 999px;
    background-color: transparent;
    transition: background-color .2s ease-in-out, color .2s ease-in-out;
}

.uk-navbar-nav > li:hover > a::before,
.uk-navbar-nav > li > a[aria-expanded="true"]::before {
    background-color: rgba(24, 24, 24, .06);
}

.uk-navbar-nav > li.uk-active > a::before,
.uk-navbar-nav > li.uk-active:hover > a::before {
    background-color: rgba(239, 70, 62, .12);
}

.uk-navbar-nav > li.uk-active > a {
    color: #ef463e;
    font-weight: 600;
}

/* Off-canvas: highlight the current item the same way, as a filled row. */
.uk-offcanvas-bar .uk-nav > li.uk-active > a {
    padding-left: 12px;
    border-radius: 8px;
    background-color: rgba(239, 70, 62, .12);
    color: #ef463e;
    font-weight: 600;
}

/*
 * Buttons: the theme animates a 1px line at top:50% across the label on hover,
 * i.e. it strikes the text through. Kill the effect — the background/colour
 * change already carries the hover state.
 */
.uk-button:not(.uk-button-text):not(.uk-button-link)::before {
    display: none;
}

/* ==========================================================================
   Theme toggle control
   ========================================================================== */

.tm-theme-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    padding: 0;
    border: 1px solid rgba(24, 24, 24, .2);
    border-radius: 999px;
    background: none;
    color: inherit;
    cursor: pointer;
    transition: border-color .2s ease-in-out, color .2s ease-in-out, background-color .2s ease-in-out;
}

.tm-theme-toggle:hover {
    border-color: #ef463e;
    color: #ef463e;
}

.tm-theme-toggle__moon {
    display: block;
}

.tm-theme-toggle__sun {
    display: none;
}

:root[data-theme="dark"] .tm-theme-toggle__moon {
    display: none;
}

:root[data-theme="dark"] .tm-theme-toggle__sun {
    display: block;
}

/* ==========================================================================
   Dark theme
   Repaints the generated UIkit build, which hardcodes #fff / #181818 / #000 /
   #949494 / #e4e4e4. Tokens first, component overrides after.
   ========================================================================== */

:root[data-theme="dark"] {
    color-scheme: dark;
    --tm-bg: #121316;
    --tm-surface: #1b1d21;
    --tm-surface-hi: #24262b;
    --tm-text: #e9e9ec;
    --tm-text-strong: #fff;
    --tm-muted: #9b9ea6;
    --tm-border: #2e3138;
    --tm-accent: #ff6b63;
}

:root[data-theme="dark"],
:root[data-theme="dark"] body {
    background: var(--tm-bg);
    color: var(--tm-text);
}

:root[data-theme="dark"] h1,
:root[data-theme="dark"] h2,
:root[data-theme="dark"] h3,
:root[data-theme="dark"] h4,
:root[data-theme="dark"] h5,
:root[data-theme="dark"] h6,
:root[data-theme="dark"] .uk-h1,
:root[data-theme="dark"] .uk-h2,
:root[data-theme="dark"] .uk-h3,
:root[data-theme="dark"] .uk-h4,
:root[data-theme="dark"] .uk-h5,
:root[data-theme="dark"] .uk-h6,
:root[data-theme="dark"] .uk-heading-small,
:root[data-theme="dark"] .uk-heading-medium,
:root[data-theme="dark"] .uk-heading-large {
    color: var(--tm-text-strong);
}

/* Surfaces */
:root[data-theme="dark"] .uk-section-default,
:root[data-theme="dark"] .uk-background-default,
:root[data-theme="dark"] .uk-tile-default {
    background: var(--tm-bg);
}

:root[data-theme="dark"] .uk-card-default {
    background-color: var(--tm-surface);
    color: var(--tm-text);
}

:root[data-theme="dark"] .uk-card-default .uk-card-title,
:root[data-theme="dark"] .uk-card-default h1,
:root[data-theme="dark"] .uk-card-default h2,
:root[data-theme="dark"] .uk-card-default h3,
:root[data-theme="dark"] .uk-card-default h4 {
    color: var(--tm-text-strong);
}

:root[data-theme="dark"] .uk-card-default .uk-card-header,
:root[data-theme="dark"] .uk-card-default .uk-card-footer {
    border-color: var(--tm-border);
}

/* Chrome: navbar, off-canvas, dropdowns, modals */
:root[data-theme="dark"] .uk-navbar-container:not(.uk-navbar-transparent) {
    background: var(--tm-bg);
}

:root[data-theme="dark"] .uk-navbar-nav > li > a,
:root[data-theme="dark"] .uk-navbar-item,
:root[data-theme="dark"] .uk-navbar-toggle {
    color: var(--tm-text);
}

:root[data-theme="dark"] .uk-navbar-nav > li:hover > a,
:root[data-theme="dark"] .uk-navbar-nav > li > a[aria-expanded="true"] {
    color: var(--tm-text-strong);
}

:root[data-theme="dark"] .uk-navbar-nav > li:hover > a::before,
:root[data-theme="dark"] .uk-navbar-nav > li > a[aria-expanded="true"]::before {
    background-color: rgba(255, 255, 255, .1);
}

:root[data-theme="dark"] .uk-navbar-nav > li.uk-active > a {
    color: var(--tm-accent);
}

:root[data-theme="dark"] .uk-navbar-nav > li.uk-active > a::before,
:root[data-theme="dark"] .uk-navbar-nav > li.uk-active:hover > a::before {
    background-color: rgba(255, 107, 99, .18);
}

:root[data-theme="dark"] .uk-offcanvas-bar {
    background: var(--tm-surface);
    color: var(--tm-text);
}

:root[data-theme="dark"] .uk-offcanvas-bar .uk-nav > li > a,
:root[data-theme="dark"] .uk-offcanvas-bar .uk-nav-sub a {
    color: var(--tm-text);
}

:root[data-theme="dark"] .uk-offcanvas-bar .uk-nav > li.uk-active > a {
    background-color: rgba(255, 107, 99, .18);
    color: var(--tm-accent);
}

:root[data-theme="dark"] .uk-dropdown,
:root[data-theme="dark"] .uk-navbar-dropdown,
:root[data-theme="dark"] .uk-modal-dialog,
:root[data-theme="dark"] .uk-modal-body {
    background: var(--tm-surface);
    color: var(--tm-text);
}

:root[data-theme="dark"] .uk-dropdown.tm-call-drop {
    background-color: var(--tm-surface);
    box-shadow: 0 12px 34px rgba(0, 0, 0, .55);
}

:root[data-theme="dark"] .uk-dropdown.tm-call-drop .uk-dropdown-nav > li > a {
    color: var(--tm-text);
}

:root[data-theme="dark"] .uk-dropdown.tm-call-drop .uk-dropdown-nav > li > a:hover {
    background-color: rgba(255, 107, 99, .14);
    color: var(--tm-accent);
}

/* Muted text and rules */
:root[data-theme="dark"] .uk-text-muted,
:root[data-theme="dark"] .uk-text-meta,
:root[data-theme="dark"] .uk-table th,
:root[data-theme="dark"] .uk-totop,
:root[data-theme="dark"] .uk-article-meta {
    color: var(--tm-muted) !important;
}

:root[data-theme="dark"] hr,
:root[data-theme="dark"] .uk-hr,
:root[data-theme="dark"] .uk-heading-divider,
:root[data-theme="dark"] .uk-divider-icon,
:root[data-theme="dark"] .uk-divider-small::after,
:root[data-theme="dark"] .uk-table > tr,
:root[data-theme="dark"] .uk-table tbody tr,
:root[data-theme="dark"] .uk-table-divider > :not(:first-child) > tr,
:root[data-theme="dark"] .uk-table-divider > tr:not(:first-child) {
    border-color: var(--tm-border);
}

/* Forms */
:root[data-theme="dark"] .uk-input,
:root[data-theme="dark"] .uk-select,
:root[data-theme="dark"] .uk-textarea {
    background-color: var(--tm-surface);
    border-color: var(--tm-border);
    color: var(--tm-text);
}

:root[data-theme="dark"] .uk-input:focus,
:root[data-theme="dark"] .uk-select:focus,
:root[data-theme="dark"] .uk-textarea:focus {
    background-color: var(--tm-surface-hi);
    border-color: var(--tm-accent) !important;
    color: var(--tm-text-strong);
}

:root[data-theme="dark"] .uk-input::placeholder,
:root[data-theme="dark"] .uk-textarea::placeholder {
    color: var(--tm-muted);
}

:root[data-theme="dark"] .uk-form-label,
:root[data-theme="dark"] .uk-form-controls label {
    color: var(--tm-text);
}

:root[data-theme="dark"] .uk-checkbox,
:root[data-theme="dark"] .uk-radio {
    background-color: var(--tm-surface);
    border-color: var(--tm-border);
}

:root[data-theme="dark"] .uk-checkbox:checked,
:root[data-theme="dark"] .uk-radio:checked {
    background-color: var(--tm-accent);
    border-color: var(--tm-accent);
}

/* Buttons */
:root[data-theme="dark"] .uk-button-secondary {
    color: var(--tm-text);
    border-color: var(--tm-border);
}

:root[data-theme="dark"] .uk-button-secondary:hover {
    background-color: var(--tm-text);
    border-color: var(--tm-text);
    color: var(--tm-bg);
}

:root[data-theme="dark"] .uk-button-default {
    background-color: var(--tm-surface-hi);
    color: var(--tm-text);
}

:root[data-theme="dark"] .uk-button-primary {
    color: var(--tm-accent);
    border-color: var(--tm-accent);
}

:root[data-theme="dark"] .uk-button-primary:hover {
    background-color: var(--tm-accent);
    border-color: var(--tm-accent);
    color: #17181b;
}

:root[data-theme="dark"] .tm-cta--solid,
:root[data-theme="dark"] .tm-cta--solid:hover,
:root[data-theme="dark"] .tm-cta--solid:focus {
    background-color: var(--tm-accent);
    border-color: var(--tm-accent);
    color: #17181b;
}

:root[data-theme="dark"] .tm-cta--solid:hover {
    box-shadow: 0 6px 18px rgba(255, 107, 99, .3);
}

:root[data-theme="dark"] .tm-theme-toggle {
    border-color: var(--tm-border);
}

:root[data-theme="dark"] .tm-theme-toggle:hover {
    border-color: var(--tm-accent);
    color: var(--tm-accent);
}

/* Badges and labels keep the accent readable on dark */
:root[data-theme="dark"] .uk-badge {
    background: var(--tm-accent);
    color: #17181b !important;
}

:root[data-theme="dark"] .uk-label {
    background-color: var(--tm-surface-hi);
    color: var(--tm-text);
}

/* --------------------------------------------------------------------------
   Dark theme: raster/vector assets that CSS colours cannot reach
   -------------------------------------------------------------------------- */

/* Decorative wave sheet (/images/home-about-bg.svg) is near-white (#e1f0fb).
   Blend it into the dark canvas instead of leaving a bright slab behind the
   text — filtering the element itself would invert its content too. */
/* Swap in a dark-toned copy of the wave sheet rather than dimming the light
   one — blending it into the background left the decoration invisible.
   uk-img sets background-image inline, hence !important. */
:root[data-theme="dark"] .uk-background-norepeat {
    background-image: url("/images/home-about-bg-dark.svg") !important;
}

/* Service line-art icons ship with no fill, so they render black. Flip them to
   light; the deliberately red one keeps its brand colour. */
:root[data-theme="dark"] img[src*="/services/images/"]:not([src*="red"]) {
    filter: invert(1) brightness(.92);
}

/* Photographic content (documents, people) stays untouched, but take the glare
   off pure-white scans. */
:root[data-theme="dark"] .uk-border-rounded img,
:root[data-theme="dark"] img[src$=".png"] {
    filter: brightness(.92) contrast(1.02);
}

/* <hr class="uk-divider-icon"> keeps the plain <hr> top border on top of the
   line its ::before/::after already draw — two parallel rules. Drop the
   element's own border in both themes. */
hr.uk-divider-icon,
:root[data-theme="dark"] hr.uk-divider-icon {
    border: 0;
}

/* --------------------------------------------------------------------------
   Class cards
   -------------------------------------------------------------------------- */

/* uk-grid-match equalises the columns, but the card's own sections still stack
   at their natural height, so the footer sat wherever the body ended. Make the
   card a flex column and let the body absorb the slack — footers line up. */
.uk-grid-match .uk-card {
    display: flex;
    flex-direction: column;
    border: 1px solid rgba(24, 24, 24, .08);
    border-radius: 16px;
    box-shadow: 0 1px 2px rgba(24, 24, 24, .04);
    overflow: hidden;
    transition: transform .2s ease-in-out, box-shadow .2s ease-in-out, border-color .2s ease-in-out;
}

/* The header holds the variable-length text, so it takes the slack: that puts
   the capacity meter and the footer on the same line across all cards. */
.uk-grid-match .uk-card > .uk-card-header {
    display: flex;
    flex: 1 1 auto;
    align-items: center;
}

.uk-grid-match .uk-card > .uk-card-header > * {
    width: 100%;
}

.uk-grid-match .uk-card > .uk-card-body,
.uk-grid-match .uk-card > .uk-card-footer {
    flex: 0 0 auto;
}

.uk-grid-match .uk-card-header,
.uk-grid-match .uk-card-footer {
    border-color: rgba(24, 24, 24, .07);
}

.uk-grid-match .uk-card-hover:hover {
    transform: translateY(-3px);
    border-color: rgba(239, 70, 62, .45);
    box-shadow: 0 16px 34px rgba(24, 24, 24, .13);
}

/* Avatar gets a thin brand ring so the header reads as one unit. */
.uk-grid-match .uk-card-header .uk-border-circle {
    box-shadow: 0 0 0 2px rgba(239, 70, 62, .3);
}

.uk-grid-match .uk-card-title {
    font-size: 20px;
    line-height: 1.25;
}

/* "Подробнее" sits on the baseline of the card; nudge its rule on hover. */
.uk-grid-match .uk-card-footer .uk-button-text {
    letter-spacing: .08em;
    text-decoration: none;
}

/* Date badge: sits on uk-position-top-right (top:0/right:0), so it was glued
   into the corner and clipped by the card's rounded overflow. Inset it. */
.uk-grid-match .uk-card-badge.uk-position-top-right {
    top: 12px;
    right: 12px;
    z-index: 1;
}

/* Date badge: a pill in the brand colour instead of a black rectangle. */
.uk-card-badge.uk-label {
    border-radius: 999px;
    padding: 4px 12px;
    background-color: #ef463e;
    color: #fff;
    font-weight: 600;
    letter-spacing: .03em;
    box-shadow: 0 2px 10px rgba(24, 24, 24, .18);
}

/* Group-capacity meter */
.uk-progress {
    height: 8px;
    border-radius: 999px;
    overflow: hidden;
}

.uk-progress::-webkit-progress-value {
    border-radius: 999px;
}

:root[data-theme="dark"] .uk-grid-match .uk-card {
    border-color: rgba(255, 255, 255, .09);
    box-shadow: none;
}

:root[data-theme="dark"] .uk-grid-match .uk-card-header,
:root[data-theme="dark"] .uk-grid-match .uk-card-footer {
    border-color: rgba(255, 255, 255, .08);
}

:root[data-theme="dark"] .uk-grid-match .uk-card-hover:hover {
    border-color: rgba(255, 107, 99, .5);
    box-shadow: 0 16px 34px rgba(0, 0, 0, .5);
}

:root[data-theme="dark"] .uk-grid-match .uk-card-header .uk-border-circle {
    box-shadow: 0 0 0 2px rgba(255, 107, 99, .35);
}

:root[data-theme="dark"] .uk-progress,
:root[data-theme="dark"] .uk-progress::-webkit-progress-bar {
    background-color: var(--tm-surface-hi);
}

:root[data-theme="dark"] .uk-progress::-webkit-progress-value {
    background-color: var(--tm-accent);
}

:root[data-theme="dark"] .uk-progress::-moz-progress-bar {
    background-color: var(--tm-accent);
}

:root[data-theme="dark"] .uk-card-badge.uk-label {
    background-color: var(--tm-accent);
    color: #17181b;
}