@charset "utf-8";

/* =========================================================
   HEADER BLOCK
   ========================================================= */
.header {
    position: relative;
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: var(--ip-content-max);
    margin-inline: auto;
    padding: 14px var(--ip-side-padding) 0;
    background: var(--ip-bg);
    color: var(--ip-text);
    box-shadow: var(--ip-header-shadow);
    min-height: 100px;
    /* Smooth dark -> light cross-fade when the home header becomes "stuck"
       (see .header--dark.is-stuck below). */
    transition: background-color 0.3s ease, color 0.3s ease, box-shadow 0.3s ease;
}

/* Band layout shared by the light header (inner pages) AND the dark header
   (home page). Both are full-width, sticky-from-top bands whose inner rows
   carry the content-width constraint. They differ ONLY in colour — the dark
   header overrides the palette tokens below, and flips back to this light
   palette once scrolled (.header--dark.is-stuck). Keeping the structure
   identical means the dark -> light switch at 200px is a pure colour change
   with no layout shift. */
.header--light,
.header--dark {
    background: var(--ip-bg);
    color: var(--ip-text);
    /* base .header sets bottom padding to 0; light theme gets a 12px bottom gap.
       Vertical padding kept (14px top from base, 12px bottom set here).
       Horizontal padding zeroed so the inner rows (below) own the side padding —
       rows carry max-width + margin-inline: auto + padding-inline so they align
       exactly with .content (base.css). No double padding on the outer band. */
    padding: 14px 0 12px;
    /* Light theme spans the full page width: override the base
       max-width: var(--ip-content-max) constraint so the header band goes
       edge-to-edge. Inner rows (below) carry the content-width constraint instead.
       Dark/home header keeps the centered max-width. */
    max-width: none;
    /* Light theme: stick to top of viewport on scroll (dark/home header stays relative).
       z-index 200 keeps it above content-level dropdowns (breadcrumbs filter = 100)
       and below the mobile menu overlay (1000). */
    position: sticky;
    top: 0;
    z-index: 200;
}

/* Light theme only: keep the band full-width (above) but constrain the inner
   content rows to the page content max-width and center them, matching
   .content (base.css). Outer band horizontal padding is zeroed above, so the
   rows own the side padding here — no double padding, edges align with .content. */
.header--light .header__row,
.header--dark .header__row {
    width: 100%;
    max-width: var(--ip-content-max);
    margin-inline: auto;
    padding-inline: var(--ip-side-padding);
}

/* Dark variant — override palette tokens scoped to the component.
   Used on the home page; sits as a solid dark band pinned to the top while
   the hero scrolls underneath (shadow off so it reads cleanly over the hero). */
.header--dark {
    --ip-text:          #ffffff;
    --ip-bg:            #1b1b1b;
    --ip-divider:       #ffffff;
    --ip-header-shadow: none;
    background: var(--ip-bg);
    color: var(--ip-text);
}

/* Scrolled (stuck) state — toggled by JS once the page is scrolled past 200px
   (see inc/scripts.blade.php). Flips the dark header back to the light root
   palette so it matches the inner-page light header exactly. Layout is
   unchanged (band structure shared above), so only colours/shadow animate. */
.header--dark.is-stuck {
    --ip-text:          #1b1b1b;
    --ip-bg:            #ffffff;
    --ip-divider:       #1b1b1b;
    --ip-header-shadow: 0 8px 20px rgba(27, 27, 27, 0.06);
}

/* =========================================================
   HEADER ROWS
   ========================================================= */
.header__row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--ip-row-gap);
}

.header__row--top {
    padding-bottom: 2px;
    position: relative; /* anchor for .header__center absolute position and .header__divider */
    min-height: 60px;   /* ensure the absolutely-positioned 60px logo never bleeds into the bottom row */
}

.header__row--bottom {
    padding-top: 0;
    position: relative; /* anchor for .header__site-name absolute centering */
}

/* =========================================================
   NAVIGATION
   ========================================================= */
.header__nav {
    flex: 0 0 auto;
}

/* Inset nav groups so the divider line + end diamond show beyond the first/last items */
.header__nav--left  { padding-left:  var(--ip-header-nav-inset, 35px); }
.header__nav--right { padding-right: var(--ip-header-nav-inset, 35px); }

.header__nav-list {
    display: flex;
    align-items: center;
    gap: var(--ip-row-gap);
    margin: 0;
    padding: 0;
    list-style: none;
}

.header__nav-item {
    line-height: 1.2;
    margin-bottom: 23px;
}

.header__nav-link {
    display: inline-block;
    font: 400 14px/1.2 var(--ip-font-body);
    letter-spacing: 0.02em;
    color: inherit;
    transition: opacity 0.2s ease, color 0.3s ease;
}

.header__nav-link:hover,
.header__nav-link:focus-visible {
    opacity: 0.65;
}

.header__nav-link:focus-visible {
    outline: 2px solid var(--ip-text);
    outline-offset: 2px;
}

/* =========================================================
   CENTRE LOGO + SITE NAME
   ========================================================= */
.header__center {
    position: absolute;
    left: 50%;
    top: 0;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    pointer-events: none; /* let clicks pass through to nav links beneath */
}

.header__logo {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    color: inherit;
    pointer-events: auto;
    text-decoration: none;
}

.header__logo-icon {
    width: 60px;
    height: 60px;
    color: var(--ip-text);
    flex-shrink: 0;
    display: block;
    transition: filter 0.3s ease;
}

/* Dark header: invert the black-on-white PNG logo to white-on-transparent */
.header--dark .header__logo-icon {
    filter: invert(1);
}

/* Stuck (light) state: restore the original black-on-white logo */
.header--dark.is-stuck .header__logo-icon {
    filter: none;
}

.header__site-name {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    font: 700 22px/1.17 var(--ip-font-title);
    color: var(--ip-text);
    font-feature-settings: 'lnum', 'pnum';
    white-space: nowrap;
    text-decoration: none;
    pointer-events: auto;
    transition: color 0.3s ease;
}

.header__site-name:hover,
.header__site-name:focus-visible {
    opacity: 0.85;
}

.header__site-name:focus-visible {
    outline: 2px solid var(--ip-text);
    outline-offset: 2px;
}

/* =========================================================
   PHONE
   ========================================================= */
.header__phone {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--ip-text);
    transition: color 0.3s ease;
    /* Align the phone's left edge with the left nav group above it
       (.header__nav--left carries the same inset). */
    padding-left: var(--ip-header-nav-inset, 35px);
}

.header__phone-icon {
    width: 30px;
    height: 30px;
    color: inherit;
    flex-shrink: 0;
}

.header__phone-link {
    font: 400 14px/1.2 var(--ip-font-body);
    letter-spacing: 0.02em;
    color: inherit;
    transition: opacity 0.2s ease, color 0.3s ease;
}

.header__phone-link:hover,
.header__phone-link:focus-visible {
    opacity: 0.65;
}

/* =========================================================
   SOCIALS
   ========================================================= */
.header__socials {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    /* Align the socials' right edge with the right nav group above it
       (.header__nav--right carries the same inset). */
    padding-right: var(--ip-header-nav-inset, 35px);
}

.header__social {
    display: inline-flex;
    width: 30px;
    height: 30px;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    color: var(--ip-text);
    transition: opacity 0.2s ease, color 0.3s ease;
    text-decoration: none;
}

.header__social svg {
    width: 30px;
    height: 30px;
}

.header__social:hover,
.header__social:focus-visible {
    opacity: 0.65;
}

/* Platform-specific modifier classes (brand colours applied here if needed in future) */
.header__social--vk {}
.header__social--telegram {}
.header__social--youtube {}
.header__social--max {}

/* =========================================================
   DROPDOWN SUBMENUS (desktop only)
   NOTE: mobile/hamburger menu styling is intentionally out of
   scope here — a later task will add the responsive pass.
   NOTE: the popup itself stays on a white background in both
   .header--light and .header--dark themes — only the header
   chrome flips (matches Figma 1:1252 light, 1:1405 dark).
   One canonical popup style is implemented — the full-row
   variant from Figma 1:1405 (white bg, #cecece dividers,
   16px row padding, shadow). The compact no-divider variant
   from 1:1252 is a future follow-up task if required.
   ========================================================= */
.header__nav-item {
    position: relative;
}

/* CSS-only chevron caret (replaces border-triangle) */
.header__nav-caret {
    display: inline-block;
    width: 8px;
    height: 8px;
    margin-left: 6px;
    border-right: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
    transform: rotate(45deg) translateY(-2px);
    transition: transform .2s ease;
    vertical-align: middle;
}

/* Rotate caret when submenu is open */
.header__nav-item--has-dropdown:hover > .header__nav-link .header__nav-caret,
.header__nav-item--has-dropdown:focus-within > .header__nav-link .header__nav-caret,
.header__nav-item--has-dropdown:hover > .header__nav-link--label .header__nav-caret,
.header__nav-item--has-dropdown:focus-within > .header__nav-link--label .header__nav-caret {
    transform: rotate(-135deg) translateY(2px);
}

/* Popup-scoped colour tokens
   (intentionally not promoted to :root — popup only) */
.header__submenu {
    --ip-popup-bg:        #ffffff;
    --ip-popup-text:      #1b1b1b;
    --ip-popup-border:    #cecece;
    --ip-popup-shadow:    0 0 30px rgba(51, 51, 51, 0.06);
    --ip-popup-row-hover: #f5f5f5;

    position: absolute;
    top: 100%;
    left: 0;
    min-width: 200px;
    margin: 0;
    padding: 0;
    list-style: none;
    background: var(--ip-popup-bg);
    color: var(--ip-popup-text);
    box-shadow: var(--ip-popup-shadow);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(-4px);
    transition: opacity .15s ease, transform .15s ease, visibility .15s;
    z-index: 50;
}

/* Open state — triggered by hover or keyboard focus-within */
.header__nav-item--has-dropdown:hover > .header__submenu,
.header__nav-item--has-dropdown:focus-within > .header__submenu {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0);
}

/* Right-nav anchoring: popup aligns to right edge to avoid off-canvas clipping */
.header__nav--right .header__submenu {
    left: auto;
    right: 0;
}

/* Row dividers between submenu items */
.header__submenu-item + .header__submenu-item {
    border-top: 1px solid var(--ip-popup-border);
}

/* Submenu link rows */
.header__submenu-link {
    display: block;
    padding: 16px;
    font: 400 14px/1.05 var(--ip-font-body);
    color: var(--ip-popup-text);
    white-space: nowrap;
    transition: background .15s ease;
}

.header__submenu-link:hover,
.header__submenu-link:focus-visible {
    background: var(--ip-popup-row-hover);
}

.header__submenu-link:focus-visible {
    outline: 2px solid var(--ip-popup-text);
    outline-offset: -2px;
}

/* Parent nav item with no own URL — not a link, acts as label */
.header__nav-link--label {
    cursor: default;
}

/* =========================================================
   HEADER DECORATIVE DIVIDER  (Figma node 1:1272)
   Replaces the plain border-bottom with a decorative line that
   breaks around the centred logo + four rotated-square diamonds:
     • 2 outer ornaments at the far-left and far-right ends
     • 2 inner ornaments flanking the logo gap
   Colours via var(--ip-divider): auto-flips on .header--dark.
   Implementation: ::before/::after = line segments; four <i>
   children inside .header__divider = the four diamonds.
   gap = 88px total (~44px each side from centre) so the 60px
   logo icon plus the inner diamond ornaments clear the gap.
   ========================================================= */

/* Container: absolutely positioned, inset by one side gutter on each
   end so the line segments + outer diamonds line up with the nav/phone/
   socials (which carry the same var(--ip-side-padding) on .header__row)
   instead of bleeding to the screen edges.
   top/bottom:0 so it fills the row; pointer-events:none so it
   never blocks nav clicks; z-index:0 so it sits behind the logo. */
.header__divider {
    position: absolute;
    top: 0;
    bottom: 0;
    left:  var(--ip-side-padding);
    right: var(--ip-side-padding);
    pointer-events: none;
    z-index: 0;
}

/* Left and right line segments.
   Each is anchored to its outer edge, width = 50% - half-gap (44px).
   The 1px line sits at top:42px = logo-icon half-height (30px) + 12px so the divider sits lower. */
.header__divider::before,
.header__divider::after {
    content: '';
    position: absolute;
    top: 42px;
    height: 1px;
    width: calc(50% - 44px);
    background: var(--ip-divider);
    transition: background-color 0.3s ease;
}
.header__divider::before { left:  0; }
.header__divider::after  { right: 0; }

/* Diamond ornaments: 6×6px squares rotated 45deg.
   Shared base class; positioning set per modifier. */
.header__divider-gem {
    position: absolute;
    top: 42px;
    width:  6px;
    height: 6px;
    background: var(--ip-divider);
    transform: translateY(-50%) rotate(45deg);
    pointer-events: none;
    transition: background-color 0.3s ease;
}
/* Outer edge ornaments */
.header__divider-gem--left-outer  { left:   0; }
.header__divider-gem--right-outer { right:  0; }
/* Inner (logo-flanking) ornaments — inset by (50% - half-gap + 3px offset) */
.header__divider-gem--left-inner  { left:  calc(50% - 47px); }
.header__divider-gem--right-inner { right: calc(50% - 47px); }

/* =========================================================
   MOBILE HEADER ELEMENTS (hidden by default on desktop)
   ========================================================= */
.header__burger { display: none; }
.header__title--mobile { display: none; }

/* Visually-hidden label for the burger (screen-reader accessible) */
.header__burger-label.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* =========================================================
   RESPONSIVE SAFETY — prevent overlap below 1200px
   ========================================================= */
@media (max-width: 1199.99px) {
    .header__center {
        position: static;
        transform: none;
        margin: 8px 0;
        order: -1; /* hoist the logo above the nav rows on small screens */
    }

    .header__row--top {
        flex-wrap: wrap;
        gap: 16px;
        justify-content: center;
    }

    .header__nav-list {
        flex-wrap: wrap;
        justify-content: center;
    }

    /* Hide the decorative split-line divider on small screens where the
       logo is no longer inline with the nav; fall back to a plain border. */
    .header__divider,
    .header__divider-gem {
        display: none;
    }

    .header__row--top {
        border-bottom: 1px solid var(--ip-divider);
    }

    /* On small screens the absolutely-centered title would overlap phone/socials
       when they wrap. Reset to in-flow block so everything stacks cleanly. */
    .header__row--bottom {
        position: static;
        flex-wrap: wrap;
        justify-content: center;
    }

    .header__site-name {
        position: static;
        transform: none;
        order: -1; /* show the site name above phone/socials */
        width: 100%;
        text-align: center;
        white-space: normal; /* allow the long Cyrillic name to wrap */
    }
}

/* =========================================================
   MOBILE COMPACT HEADER BAR — single row at <=767.99px
   logo left · site title center · burger right
   ========================================================= */
@media (max-width: 767.99px) {
    /* Hide desktop nav rows */
    .header__nav { display: none; }
    .header__row--bottom { display: none; }
    .header__divider,
    .header__divider-gem { display: none; }

    /* Remove the header band's bottom padding on mobile (both themes).
       Also drop the base .header min-height: 100px — on mobile the compact bar
       is only ~70px tall, so the leftover height showed as white space below
       .header__row--top on inner (light) pages. The home page already nulls
       min-height (.body--home .header), which is why only inner pages were
       affected; letting the band size to its content fixes them too. */
    .header--light,
    .header--dark {
        padding-bottom: 0;
        min-height: 0;
    }

    /* Single compact bar */
    .header__row--top {
        flex-wrap: nowrap;
        justify-content: space-between;
        align-items: center;
        gap: 12px;
        min-height: 56px;
    }

    /* Logo: left-aligned, smaller icon */
    .header__center {
        position: static;
        transform: none;
        order: 0;
        margin: 0;
        flex: 0 0 auto;
    }

    .header__logo-icon {
        width: 40px;
        height: 40px;
    }

    /* Mobile site title: centered between logo and burger */
    .header__title--mobile {
        display: inline-block;
        flex: 1 1 auto;
        min-width: 0;
        text-align: center;
        font: 700 18px/1.17 var(--ip-font-title);
        color: var(--ip-text);
        white-space: normal;
        text-decoration: none;
        overflow: hidden;
    }

    .header__title--mobile:hover,
    .header__title--mobile:focus-visible {
        opacity: 0.85;
    }

    .header__title--mobile:focus-visible {
        outline: 2px solid var(--ip-text);
        outline-offset: 2px;
    }

    /* Burger button */
    .header__burger {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        flex: 0 0 auto;
        width: 40px;
        height: 40px;
        padding: 0;
        background: none;
        border: 0;
        cursor: pointer;
        color: var(--ip-text);
    }

    /* CSS-only 3-stripe hamburger icon */
    .header__burger-bars {
        position: relative;
        display: block;
        width: 24px;
        height: 2px;
        background: currentColor;
        border-radius: 1px;
    }

    .header__burger-bars::before,
    .header__burger-bars::after {
        content: '';
        position: absolute;
        display: block;
        width: 24px;
        height: 2px;
        background: currentColor;
        border-radius: 1px;
        left: 0;
    }

    .header__burger-bars::before { top: -7px; }
    .header__burger-bars::after  { top:  7px; }

    .header__burger:focus-visible {
        outline: 2px solid var(--ip-text);
        outline-offset: 2px;
    }
}

/* =========================================================
   BODY SCROLL LOCK (applied by JS on burger open)
   ========================================================= */
body.ip-menu-open {
    overflow: hidden;
}

/* =========================================================
   MOBILE MENU OVERLAY — hidden on desktop
   ========================================================= */
.header__mobile-menu {
    display: none;
}

.header__mobile-menu[hidden] {
    display: none;
}

@media (max-width: 767.99px) {
    /* Overlay container — full screen fixed layer */
    .header__mobile-menu {
        position: fixed;
        inset: 0;
        z-index: 1000;
        display: block;
    }

    .header__mobile-menu[hidden] {
        display: none;
    }

    /* Semi-transparent backdrop */
    .header__mobile-backdrop {
        position: absolute;
        inset: 0;
        background: rgba(0, 0, 0, 0.5);
    }

    /* Slide-in panel — pinned to the right */
    .header__mobile-panel {
        position: absolute;
        top: 0;
        right: 0;
        height: 100%;
        width: min(86vw, 360px);
        background: #ffffff;
        color: #1b1b1b;
        --ip-text: #1b1b1b;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        padding: 16px var(--ip-side-padding, 20px) 24px;
        box-sizing: border-box;
        display: flex;
        flex-direction: column;
    }

    /* Close (×) button — aligned to end of flex column */
    .header__mobile-close {
        align-self: flex-end;
        width: 40px;
        height: 40px;
        background: none;
        border: 0;
        cursor: pointer;
        font-size: 28px;
        line-height: 1;
        color: inherit;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 0;
        margin-bottom: 8px;
    }

    .header__mobile-close:focus-visible {
        outline: 2px solid #1b1b1b;
        outline-offset: 2px;
    }

    /* Level-1 list */
    .header__mobile-list {
        list-style: none;
        margin: 0;
        padding: 0;
        flex: 1 0 auto;
    }

    .header__mobile-item {
        border-bottom: 1px solid rgba(0, 0, 0, 0.08);
    }

    /* Level-1 leaf link */
    .header__mobile-link {
        display: block;
        width: 100%;
        box-sizing: border-box;
        text-align: left;
        font: 400 16px/1.3 var(--ip-font-body, inherit);
        color: inherit;
        text-decoration: none;
        padding: 12px 0;
        overflow-wrap: break-word;
    }

    .header__mobile-link:focus-visible {
        outline: 2px solid #1b1b1b;
        outline-offset: 2px;
    }

    /* Level-1 collapsible toggle button */
    .header__mobile-toggle {
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 100%;
        box-sizing: border-box;
        text-align: left;
        font: 400 16px/1.3 var(--ip-font-body, inherit);
        color: inherit;
        padding: 12px 0;
        background: none;
        border: 0;
        cursor: pointer;
        overflow-wrap: break-word;
    }

    .header__mobile-toggle:focus-visible {
        outline: 2px solid #1b1b1b;
        outline-offset: 2px;
    }

    /* Caret indicator */
    .header__mobile-caret {
        display: inline-block;
        width: 8px;
        height: 8px;
        border-right: 2px solid currentColor;
        border-bottom: 2px solid currentColor;
        transform: rotate(45deg);
        transition: transform 0.2s ease;
        flex-shrink: 0;
        margin-left: 8px;
    }

    .header__mobile-toggle[aria-expanded="true"] .header__mobile-caret {
        transform: rotate(-135deg);
    }

    /* Level-2 sublist */
    .header__mobile-sublist {
        list-style: none;
        margin: 0;
        padding: 0 0 4px 0;
    }

    .header__mobile-sublist[hidden] {
        display: none;
    }

    .header__mobile-subitem {
        /* slight indentation for level-2 */
    }

    .header__mobile-sublink {
        display: block;
        width: 100%;
        box-sizing: border-box;
        text-align: left;
        font: 400 15px/1.3 var(--ip-font-body, inherit);
        color: inherit;
        text-decoration: none;
        padding: 10px 0 10px 16px;
        overflow-wrap: break-word;
    }

    .header__mobile-sublink:focus-visible {
        outline: 2px solid #1b1b1b;
        outline-offset: 2px;
    }

    /* Bottom footer row — phone + socials */
    .header__mobile-footer {
        margin-top: auto;
        padding-top: 16px;
        border-top: 1px solid rgba(0, 0, 0, 0.12);
        display: flex;
        flex-direction: column;
        gap: 12px;
    }

    /* Drop the desktop nav-inset left padding on the phone inside the menu */
    .header__mobile-footer .header__phone {
        padding-left: 0;
    }
}