/* ============================================================
   STARISE DESKTOP HEADER (2026 mega-menu) — shared, single source
   ------------------------------------------------------------
   Pairs with js/desktop-header.js (nav data + interaction).
   DESKTOP ONLY: every rule except the .sdh base-hide lives inside
   @media (min-width: 769px). The mobile header (<=768px) is the
   MOBILE section of #starise-about-nav-match-style and is NOT
   touched by this file.

   Selectors are prefixed with `html` so they out-specify the
   legacy inline nav blocks (#starise-about-nav-match-style,
   #starise-nav-dark-2026) without removing them — those blocks
   still carry the mobile styles and must stay.
   ============================================================ */

/* Injected desktop nav is hidden by default (mobile keeps the
   existing header untouched). Shown only at desktop widths. */
.sdh { display: none; }

@media (min-width: 769px) {

    /* ---------- Bar shell (overrides legacy 54px docked bar) ---------- */
    html body nav[aria-label="Main navigation"][aria-label] {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
        height: 72px !important;
        padding: 0 clamp(1.25rem, 4vw, 3rem) !important;
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        border: 0 !important;
        border-bottom: 1px solid rgba(255,255,255,0.07) !important;
        border-radius: 0 !important;
        background: rgba(10,12,16,0.58) !important;
        box-shadow: none !important;
        -webkit-backdrop-filter: saturate(170%) blur(22px) !important;
        backdrop-filter: saturate(170%) blur(22px) !important;
        z-index: 99999 !important;
        overflow: visible !important;
        animation: none !important;
        transition: background 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease !important;
    }
    html body nav[aria-label="Main navigation"][aria-label].nav-scrolled,
    html body nav[aria-label="Main navigation"][aria-label].sdh-scrolled {
        top: 0 !important;
        height: 72px !important;
        background: rgba(10,12,16,0.86) !important;
        border-bottom-color: rgba(255,255,255,0.09) !important;
        box-shadow: 0 1px 0 rgba(255,255,255,0.04), 0 12px 34px rgba(0,0,0,0.45) !important;
    }
    html { scroll-padding-top: 88px; }

    /* Legacy desktop link row + mobile controls: hidden on desktop.
       (#navLinks markup stays in the HTML — it is the mobile menu
       and keeps the crawlable anchor list.) */
    html body nav[aria-label="Main navigation"][aria-label] #navLinks { display: none !important; }
    html body nav[aria-label="Main navigation"][aria-label] .mobile-nav-actions { display: none !important; }

    /* ---------- Logo (existing asset, resized for 72px bar) ---------- */
    html body nav[aria-label="Main navigation"][aria-label] .nav-logo {
        position: relative !important;
        z-index: 2 !important;
        display: flex !important;
        align-items: center !important;
        gap: 0.6rem !important;
        flex: 0 0 auto !important;
        font-size: 1rem !important;
        font-weight: 800 !important;
        letter-spacing: 0.12em !important;
        text-transform: uppercase !important;
        text-decoration: none !important;
        transition: opacity 0.2s ease !important;
    }
    html body nav[aria-label="Main navigation"][aria-label] .nav-logo:hover { opacity: 0.75 !important; transform: none !important; }
    html body nav[aria-label="Main navigation"][aria-label] .nav-logo,
    html body nav[aria-label="Main navigation"][aria-label] .nav-logo span {
        color: #ffffff !important;
        -webkit-text-fill-color: #ffffff !important;
    }
    html body nav[aria-label="Main navigation"][aria-label] .nav-logo img {
        width: 34px !important;
        height: 34px !important;
        object-fit: contain !important;
        filter: brightness(1.12) !important;
    }

    /* ---------- Injected desktop nav layout ---------- */
    html body .sdh {
        display: flex;
        flex: 1 1 auto;
        align-items: center;
        min-width: 0;
        height: 100%;
        font-family: "Space Grotesk", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    }
    html body .sdh-menu {
        position: relative;
        display: flex;
        align-items: center;
        gap: 0.1rem;
        margin: 0 auto;
        padding: 0;
        list-style: none;
    }
    html body .sdh-item { position: relative; display: flex; align-items: center; }

    /* Floating hover pill (shared background that glides between items) */
    html body .sdh-hoverbg {
        position: absolute;
        top: 50%;
        left: 0;
        height: 38px;
        width: 0;
        transform: translateY(-50%);
        border-radius: 999px;
        background: rgba(255,255,255,0.08);
        opacity: 0;
        pointer-events: none;
        transition: left 0.22s cubic-bezier(0.32, 0.72, 0, 1),
                    width 0.22s cubic-bezier(0.32, 0.72, 0, 1),
                    opacity 0.18s ease;
        z-index: 0;
    }
    html body .sdh-hoverbg.sdh-hoverbg-snap { transition: opacity 0.18s ease; }

    /* ---------- Triggers (menu buttons + direct links) ---------- */
    html body .sdh-trigger {
        position: relative;
        z-index: 1;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 0.32rem;
        height: 38px;
        padding: 0 0.95rem;
        margin: 0;
        border: 0;
        border-radius: 999px;
        background: transparent;
        color: rgba(240,243,248,0.72);
        -webkit-text-fill-color: rgba(240,243,248,0.72);
        font-family: inherit;
        font-size: 0.88rem;
        font-weight: 500;
        letter-spacing: 0;
        line-height: 1;
        white-space: nowrap;
        text-decoration: none;
        cursor: pointer;
        transition: color 0.18s ease;
    }
    html body .sdh-trigger:hover,
    html body .sdh-item.sdh-open > .sdh-trigger {
        color: #ffffff;
        -webkit-text-fill-color: #ffffff;
    }
    html body .sdh-item.sdh-current > .sdh-trigger {
        color: #ffffff;
        -webkit-text-fill-color: #ffffff;
        font-weight: 600;
    }
    html body .sdh-item.sdh-current > .sdh-trigger::after {
        content: "";
        position: absolute;
        left: 0.95rem;
        right: 0.95rem;
        bottom: 1px;
        height: 2px;
        border-radius: 2px;
        background: #FFB24D;
    }
    html body .sdh-chevron {
        width: 13px;
        height: 13px;
        flex: 0 0 auto;
        stroke: currentColor;
        transition: transform 0.25s cubic-bezier(0.32, 0.72, 0, 1);
    }
    html body .sdh-item.sdh-open .sdh-chevron { transform: rotate(180deg); }

    /* ---------- Mega panel ---------- */
    html body .sdh-panel {
        position: absolute;
        top: calc(100% + 14px);
        left: 50%;
        transform: translateX(calc(-50% + var(--sdh-shift, 0px)));
        z-index: 5;
        display: none;
    }
    html body .sdh-item.sdh-open > .sdh-panel { display: block; }
    /* Invisible bridge so the cursor can cross the gap without closing */
    html body .sdh-panel::before {
        content: "";
        position: absolute;
        top: -18px;
        left: -12px;
        right: -12px;
        height: 20px;
    }
    html body .sdh-panel-card {
        display: flex;
        gap: 2.3rem;
        width: max-content;
        max-width: min(92vw, 880px);
        padding: 1.15rem 1.3rem;
        border: 1px solid rgba(255,255,255,0.09);
        border-radius: 16px;
        background: rgba(13,16,22,0.96);
        -webkit-backdrop-filter: blur(24px) saturate(160%);
        backdrop-filter: blur(24px) saturate(160%);
        box-shadow: 0 30px 80px rgba(0,0,0,0.55), 0 2px 8px rgba(0,0,0,0.35),
                    inset 0 1px 0 rgba(255,255,255,0.05);
        opacity: 0;
        transform: translateY(8px) scale(0.985);
        transform-origin: top center;
        transition: opacity 0.22s cubic-bezier(0.32, 0.72, 0, 1),
                    transform 0.22s cubic-bezier(0.32, 0.72, 0, 1);
    }
    html body .sdh-item.sdh-open > .sdh-panel .sdh-panel-card {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
    /* When gliding between two open menus, swap fast without re-bouncing */
    html body .sdh.sdh-quick .sdh-panel-card {
        transition-duration: 0.1s;
        transform: translateY(0) scale(1);
    }

    /* Columns */
    html body .sdh-col { min-width: 150px; }
    html body .sdh-col-title {
        margin: 0 0 0.7rem;
        font-size: 0.68rem;
        font-weight: 600;
        letter-spacing: 0.14em;
        text-transform: uppercase;
        color: rgba(240,243,248,0.42);
    }
    html body .sdh-col ul {
        margin: 0;
        padding: 0;
        list-style: none;
        display: grid;
        gap: 0.1rem;
    }

    /* Rich item: icon + label + one-line description */
    html body a.sdh-link {
        display: flex;
        align-items: center;
        gap: 0.7rem;
        padding: 0.5rem 0.6rem;
        border-radius: 10px;
        text-decoration: none;
        transition: background 0.16s ease;
    }
    html body a.sdh-link:hover { background: rgba(255,255,255,0.06); }
    html body .sdh-ico {
        display: grid;
        place-items: center;
        width: 34px;
        height: 34px;
        flex: 0 0 auto;
        border: 1px solid rgba(255,255,255,0.16);
        border-radius: 9px;
        color: #E8ECF3;
        transition: border-color 0.2s ease, color 0.2s ease;
    }
    html body .sdh-ico svg { width: 17px; height: 17px; }
    html body a.sdh-link:hover .sdh-ico { border-color: rgba(255,178,77,0.65); color: #FFB24D; }
    html body .sdh-link-label {
        display: block;
        font-size: 0.875rem;
        font-weight: 600;
        line-height: 1.25;
        color: rgba(244,246,249,0.94);
        white-space: nowrap;
    }
    html body .sdh-link-desc {
        display: block;
        margin-top: 2px;
        font-size: 0.74rem;
        font-weight: 400;
        line-height: 1.35;
        color: rgba(240,243,248,0.5);
        white-space: nowrap;
        transition: color 0.2s ease;
    }
    html body a.sdh-link:hover .sdh-link-desc { color: rgba(240,243,248,0.72); }
    html body a.sdh-link[aria-current="page"] .sdh-link-label { color: #FFB24D; }

    /* Compact item: plain link (city / area lists) */
    html body a.sdh-mini {
        display: block;
        padding: 0.4rem 0.6rem;
        border-radius: 8px;
        font-size: 0.85rem;
        font-weight: 500;
        line-height: 1.3;
        color: rgba(240,243,248,0.68);
        text-decoration: none;
        white-space: nowrap;
        transition: color 0.16s ease, background 0.16s ease;
    }
    html body a.sdh-mini:hover { color: #ffffff; background: rgba(255,255,255,0.06); }
    html body a.sdh-mini[aria-current="page"] { color: #FFB24D; }
    html body a.sdh-mini.sdh-all { color: rgba(255,178,77,0.9); font-weight: 600; }
    html body a.sdh-mini.sdh-all:hover { color: #FFB24D; }

    /* ---------- Right cluster: phone + CTA ---------- */
    html body .sdh-actions {
        display: flex;
        align-items: center;
        gap: 0.55rem;
        margin-left: 0.9rem;
        flex: 0 0 auto;
    }
    html body a.sdh-phone {
        display: inline-flex;
        align-items: center;
        gap: 0.45rem;
        height: 38px;
        padding: 0 0.9rem;
        border: 1px solid rgba(255,255,255,0.14);
        border-radius: 999px;
        background: rgba(255,255,255,0.04);
        color: rgba(240,243,248,0.78);
        -webkit-text-fill-color: rgba(240,243,248,0.78);
        font-size: 0.85rem;
        font-weight: 500;
        line-height: 1;
        white-space: nowrap;
        text-decoration: none;
        transition: color 0.18s ease, border-color 0.18s ease, background 0.18s ease;
    }
    html body a.sdh-phone:hover {
        color: #ffffff;
        -webkit-text-fill-color: #ffffff;
        border-color: rgba(255,255,255,0.28);
        background: rgba(255,255,255,0.08);
    }
    html body a.sdh-phone svg { width: 14px; height: 14px; flex: 0 0 auto; }
    html body a.sdh-cta {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        height: 38px;
        padding: 0 1.2rem;
        border: 0;
        border-radius: 999px;
        background: linear-gradient(180deg, #FFB865, #F2922A);
        color: #1a1206;
        -webkit-text-fill-color: #1a1206;
        font-size: 0.875rem;
        font-weight: 650;
        line-height: 1;
        white-space: nowrap;
        text-decoration: none;
        transition: transform 0.2s ease, box-shadow 0.2s ease, filter 0.2s ease;
    }
    html body a.sdh-cta:hover {
        transform: translateY(-1px);
        box-shadow: 0 8px 24px rgba(255,178,77,0.32);
        filter: brightness(1.04);
    }

    /* ---------- Focus visibility (keyboard) ---------- */
    html body .sdh a:focus-visible,
    html body .sdh button:focus-visible {
        outline: 2px solid #FFB24D;
        outline-offset: 2px;
        border-radius: 999px;
    }
    html body .sdh-panel a:focus-visible { border-radius: 10px; }

    /* ---------- Narrow-desktop tiers (769px bar must never cram) ---------- */
    @media (max-width: 1120px) {
        html body a.sdh-phone { padding: 0 0.68rem; }
        html body a.sdh-phone span { display: none; }
        html body .sdh-trigger { padding: 0 0.72rem; font-size: 0.85rem; }
        html body .sdh-item.sdh-current > .sdh-trigger::after { left: 0.72rem; right: 0.72rem; }
    }
    @media (max-width: 980px) {
        html body nav[aria-label="Main navigation"][aria-label] .nav-logo span { display: none !important; }
        html body .sdh-trigger { padding: 0 0.55rem; font-size: 0.83rem; }
        html body .sdh-item.sdh-current > .sdh-trigger::after { left: 0.55rem; right: 0.55rem; }
        html body a.sdh-cta { padding: 0 0.95rem; }
        html body .sdh-actions { margin-left: 0.5rem; gap: 0.4rem; }
    }
    @media (max-width: 860px) {
        html body .sdh-trigger { padding: 0 0.42rem; font-size: 0.81rem; }
        html body .sdh-item.sdh-current > .sdh-trigger::after { left: 0.42rem; right: 0.42rem; }
    }

    /* ---------- Reduced motion ---------- */
    @media (prefers-reduced-motion: reduce) {
        html body .sdh-hoverbg,
        html body .sdh-chevron,
        html body .sdh-panel-card,
        html body .sdh-trigger,
        html body a.sdh-link,
        html body a.sdh-mini,
        html body a.sdh-phone,
        html body a.sdh-cta { transition: none !important; }
        html body .sdh-panel-card { opacity: 1; transform: none; }
        html body a.sdh-cta:hover { transform: none; }
    }
}