/* HEADER — sticky bar at top of viewport
   - Sibling of <main> (per claude-html §S so position:fixed works without being trapped by scaled parent)
   - Stage = 1920px wide, scaled via transform like .site-main
   - Transparent default → dark on scroll (is-scrolled class added by JS) */

.site-header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    max-width: 100%;
    height: 110px;
    z-index: 100;
    pointer-events: none;
    overflow: hidden;                /* Clip stage at viewport edge — fixed elements escape body overflow */
    transition: background 0.3s var(--ease), backdrop-filter 0.3s var(--ease);
    /* Identical text metrics on every page (pages WITHOUT base.css — e.g. the
       service archive — were rendering wider text, pushing the nav over the
       phone). Force the same font + smoothing the about/homepage pages get. */
    font-family: var(--ff-he);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.site-header.is-scrolled {
    background: rgba(0, 0, 0, 0.92);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

/* ===== Light variant (internal pages over a light bg) —
   BLACK text by default, switches back to WHITE once scrolled (dark bg). ===== */
.site-header--light:not(.is-scrolled) .site-header__cta,
.site-header--light:not(.is-scrolled) .site-header__nav-link,
.site-header--light:not(.is-scrolled) .site-header__phone-tag,
.site-header--light:not(.is-scrolled) .site-header__phone-num {
    color: #151515;
    text-shadow: none;
}
.site-header--light:not(.is-scrolled) .site-header__phone-icon img {
    filter: none;                    /* dark phone icon on light bg */
}
.site-header--light:not(.is-scrolled) .site-header__chevron {
    filter: none;
}
.site-header--light:not(.is-scrolled) .site-header__chevron svg path {
    stroke: #151515;
}
.site-header--light:not(.is-scrolled) .site-header__nav-link:hover,
.site-header--light:not(.is-scrolled) .site-header__nav-link:focus-visible {
    color: var(--c-gold-flat);
}

/* Same scaling pattern as .hero__stage: transform-origin top LEFT prevents overflow. */
.site-header__stage {
    position: absolute;
    top: 0;
    left: 0;
    width: 1920px;
    height: 110px;
    transform-origin: top left;
    pointer-events: auto;
}

/* ===== Logo (right edge of stage) ===== */
.site-header__logo {
    position: absolute;
    top: 15px;
    right: 12px;
    width: 134px;
    height: 72px;
    display: block;
}
.site-header__logo img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* ===== Nav (center-right) ===== */
.site-header__nav {
    position: absolute;
    top: 30px;
    right: 160px;
    display: flex;
    align-items: center;
    gap: 42px;
    direction: rtl;
}
.site-header__nav-link {
    font-family: var(--ff-he);
    font-weight: 500;
    font-size: 18px;
    line-height: 40px;
    color: var(--c-wht);
    text-decoration: none;
    text-shadow: 0 2.671px 36.15px rgba(0, 0, 0, 0.52);
    white-space: nowrap;
    transition: color 0.2s var(--ease);
}
.site-header__nav-link:hover,
.site-header__nav-link:focus-visible {
    color: var(--c-gold-flat);
}

.site-header__dropdown {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 0;
}
.site-header__chevron {
    width: 14px;
    height: 14px;
    margin-top: 2px;
    transition: transform 0.2s var(--ease);
    filter: invert(1);
}
.site-header__dropdown[aria-expanded="true"] .site-header__chevron {
    transform: rotate(180deg);
}

/* ===== Phone (mid-left, after nav) — VERTICAL stack:
       Row 1: "לשיחה טלפונית" small label (top)
       Row 2: phone number + icon (bottom, icon on RIGHT side per Figma) */
.site-header__phone {
    position: absolute;
    top: 30px;
    left: 348px;
    display: flex;
    flex-direction: column;
    align-items: flex-end;            /* right-align in RTL (label right edge aligns with icon) */
    gap: 4px;
}
.site-header__phone-tag {
    font-family: var(--ff-he);
    font-weight: 400;
    font-size: 16px;
    line-height: 1;
    color: var(--c-wht);
    text-shadow: 0 2.671px 36.15px rgba(0, 0, 0, 0.52);
    margin: 0;
}
.site-header__phone-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    text-decoration: none;
    direction: ltr;                   /* phone num reads LTR (0-3-3-...) */
}
.site-header__phone-num {
    font-family: var(--ff-he);
    font-weight: 700;
    font-size: 22px;
    line-height: 1.1;
    color: var(--c-wht);
    text-shadow: 0 2.671px 36.15px rgba(0, 0, 0, 0.52);
    letter-spacing: 0;
}
.site-header__phone-icon {
    display: inline-flex;
    width: 22px;
    height: 22px;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
}
.site-header__phone-icon img {
    width: 100%;
    height: 100%;
    filter: invert(1);
}

/* ===== CTA pill (left edge) ===== */
.site-header__cta {
    position: absolute;
    top: 22px;
    left: 77px;
    width: 226px;
    height: 54px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 3.615px solid var(--c-gold-flat);
    font-family: var(--ff-he);
    font-weight: 700;
    font-size: 20px;
    line-height: 32.946px;
    color: var(--c-wht);
    text-decoration: none;
    background: transparent;
    transition: background 0.2s var(--ease), color 0.2s var(--ease);
    text-shadow: 0 2.671px 36.15px rgba(0, 0, 0, 0.52);
}
.site-header__cta:hover,
.site-header__cta:focus-visible {
    background: var(--c-gold-flat);
    color: var(--c-blk);
    text-shadow: none;
}

/* ===== Hamburger (mobile only — hidden on desktop) ===== */
.site-header__hamburger {
    display: none;          /* hidden on desktop, shown on mobile */
}


/* ============================================================
   DESKTOP HEADER — fluid full-width bar (shared by all new templates).
   The base above builds a fixed 1920px stage scaled by transform, which
   SHRINKS the whole header on <1920 screens and pins-left with a void on
   >1920. Here (≥1401px) we make it a fluid full-width flex bar at full
   size. Mobile (≤1400px) keeps the mobile.css flex/hamburger layout.
   Also: phone + chevron forced WHITE; "תחומי התמחות" dropdown.
   ============================================================ */
@media (min-width: 1025px) {

    /* allow the dropdown panel to extend below the bar */
    .site-header { overflow: visible; }

    /* Full-width flex bar — kill the 1920 scaled stage. Everything below uses
       clamp() so the 8-item nav + CTA + phone + logo shrink to fit 1025–1900
       without ever clipping the logo on the right. */
    .site-header__stage {
        position: relative;
        width: 100%;
        height: 110px;
        transform: none;
        display: flex;
        align-items: center;
        direction: ltr;                 /* explicit L/R via order (claude-html §Z) */
        padding: 0 clamp(14px, 1.6vw, 56px);
        gap: 0;
    }

    /* CTA pill — far left */
    .site-header__cta {
        position: static;
        order: 1;
        top: auto; left: auto;
        margin: 0;
        flex: 0 0 auto;
    }

    /* Phone — left cluster (after CTA), forced WHITE */
    .site-header__phone {
        position: static;
        order: 2;
        top: auto; left: auto;
        margin: 0 0 0 clamp(10px, 1.4vw, 32px);   /* gap from CTA (ltr: margin-left) */
        flex: 0 0 auto;
    }
    /* shrink CTA + phone + nav-link on tighter desktops so the bar always fits */
    .site-header__cta {
        width: auto;
        min-width: 0;
        padding: 0 clamp(14px, 1.3vw, 26px);
        height: clamp(44px, 3.4vw, 54px);
        font-size: clamp(14px, 1.05vw, 20px);
        white-space: nowrap;
    }
    .site-header__phone .site-header__phone-num { font-size: clamp(15px, 1.25vw, 22px); }
    .site-header__phone .site-header__phone-tag { font-size: clamp(12px, 0.85vw, 16px); }
    .site-header__nav-link { font-size: clamp(13px, 1.05vw, 18px); }
    .site-header__phone .site-header__phone-tag,
    .site-header__phone .site-header__phone-num { color: #fff; }
    .site-header__phone .site-header__phone-icon img { filter: brightness(0) invert(1); }

    /* Nav — pushed to the right cluster, tight against the logo.
       nav is direction:rtl, so margin-inline-start flips to the right;
       use physical margin-left:auto to absorb free space on the LEFT. */
    .site-header__nav {
        position: static;
        order: 3;
        top: auto; right: auto;
        margin-left: auto;               /* free space goes left → nav+logo hug the right */
        margin-inline-start: 0;
        padding-right: clamp(8px, 1.2vw, 30px);
        gap: clamp(8px, 0.95vw, 42px);
        min-width: 0;                    /* allow the nav to shrink instead of pushing the logo off */
    }
    .site-header__menu { gap: clamp(8px, 0.95vw, 24px); flex-wrap: nowrap; }

    /* Logo — far right; menu sits tight against it */
    .site-header__logo {
        position: static;
        order: 4;
        top: auto; right: auto;
        margin: 0 0 0 16px;
        flex: 0 0 auto;
    }

    /* chevron forced WHITE (base used invert(1) which isn't pure white) */
    .site-header__chevron {
        filter: brightness(0) invert(1);
    }

    /* ---- "תחומי התמחות" dropdown (flat-nav templates: wrapper + ul) ---- */
    .site-header__has-dropdown {
        position: relative;
        display: inline-flex;
        align-items: center;
    }
    .site-header__dropdown-menu {
        position: absolute;
        top: calc(100% + 12px);
        right: 0;
        margin: 0;
        padding: 8px 0;
        list-style: none;
        min-width: 240px;
        background: rgba(0, 0, 0, 0.92);
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
        border: 1px solid rgba(255, 255, 255, 0.08);
        border-top: 3px solid var(--c-gold-flat);
        border-radius: 6px;
        box-shadow: 0 16px 40px rgba(0, 0, 0, 0.45);
        opacity: 0;
        visibility: hidden;
        transform: translateY(8px);
        transition: opacity 0.2s var(--ease), transform 0.2s var(--ease), visibility 0.2s;
        z-index: 200;
        direction: rtl;
    }
    .site-header__dropdown-menu::before {   /* hover-bridge over the 12px gap */
        content: "";
        position: absolute;
        top: -12px; left: 0; right: 0;
        height: 12px;
    }
    .site-header__has-dropdown:hover  .site-header__dropdown-menu,
    .site-header__has-dropdown:focus-within .site-header__dropdown-menu,
    .site-header__dropdown[aria-expanded="true"] + .site-header__dropdown-menu {
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
    }
    .site-header__has-dropdown:hover .site-header__chevron {
        transform: rotate(180deg);
    }
    .site-header__dropdown-link {
        display: block;
        padding: 10px 22px;
        font-family: var(--ff-he);
        font-size: 16px;
        font-weight: 500;
        line-height: 1.4;
        color: #fff;
        text-decoration: none;
        white-space: nowrap;
        text-align: right;
        transition: color 0.15s var(--ease), background 0.15s var(--ease);
    }
    .site-header__dropdown-link:hover,
    .site-header__dropdown-link:focus-visible {
        color: var(--c-gold-flat);
        background: rgba(255, 255, 255, 0.05);
    }
}


/* ============================================================
   HEADER main-menu structure (#header-menu via wp_nav_menu walker) —
   shared by ALL new templates so the nav reflects Appearance → Menus.
   ============================================================ */
.site-header__menu {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 24px;
    list-style: none;
    margin: 0;
    padding: 0;
}
.site-header__menu-item { position: relative; list-style: none; }
.site-header__menu-item--has-children > .site-header__nav-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
}
.site-header__menu-item--has-children .site-header__chevron {
    display: inline-flex;
    width: 14px;
    height: 14px;
    transition: transform 0.2s ease;
}
.site-header__menu-item--has-children .site-header__chevron svg { width: 100%; height: 100%; display: block; }
.site-header__menu-item--has-children .site-header__chevron path { stroke: #fff; }
.site-header__menu-item--has-children:hover .site-header__chevron,
.site-header__menu-item--has-children:focus-within .site-header__chevron { transform: rotate(180deg); }

/* allow the absolute submenu to escape the header box */
.site-header,
.site-header__stage,
.site-header__nav,
.site-header__menu,
.site-header__menu-item { overflow: visible; }

/* submenu flyout — dark, matches the dropdown panel */
.site-header__submenu {
    position: absolute;
    top: calc(100% + 12px);
    right: 0;
    min-width: 260px;
    max-height: 80vh;
    overflow-y: auto;
    margin: 0;
    padding: 8px 0;
    list-style: none;
    background: rgba(0, 0, 0, 0.92);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-top: 3px solid var(--c-gold-flat);
    border-radius: 6px;
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.45);
    opacity: 0;
    visibility: hidden;
    transform: translateY(8px);
    transition: opacity 0.2s var(--ease), transform 0.2s var(--ease), visibility 0.2s;
    z-index: 200;
    direction: rtl;
}
.site-header__submenu::before {   /* hover-bridge over the 12px gap */
    content: "";
    position: absolute;
    top: -12px; left: 0; right: 0;
    height: 12px;
}
.site-header__menu-item--has-children:hover .site-header__submenu,
.site-header__menu-item--has-children:focus-within .site-header__submenu,
.site-header__menu-item--has-children.is-open .site-header__submenu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}
/* Force vertical stacking — old astlp theme CSS (loaded on non-homepage templates)
   pushes these li's into a flex/inline-block row. Lock them to full-width blocks. */
.site-header__submenu { display: block !important; }
.site-header__submenu li,
.site-header__submenu .site-header__menu-item {
    list-style: none;
    display: block !important;
    width: 100% !important;
    float: none !important;
    margin: 0 !important;
}
.site-header__submenu li::after,
.site-header__submenu li::before { content: none !important; background: none !important; }
.site-header__submenu a {
    display: block;
    padding: 10px 22px;
    color: #fff;
    text-align: right;
    font: 500 16px/1.4 var(--ff-he, "Heebo", sans-serif);
    white-space: nowrap;
    transition: background 0.15s ease, color 0.15s ease;
}
.site-header__submenu a:hover,
.site-header__submenu a:focus {
    background: rgba(255, 255, 255, 0.05);
    color: var(--c-gold-flat);
}