/* ==== FRC MENU (collision-safe) ========================================== */
/* Variables */
:root{
    --frc-bg:#fff; --frc-paper:#f6fbfc; --frc-ink:#0f1a24; --frc-muted:#5a6a78;
    --frc-brand:#0ea5a5; --frc-brand-strong:#0b8c8c; --frc-ring:rgba(14,165,165,.28);
    --frc-shadow:0 8px 24px rgba(15,26,36,.08);
}


/* Safety: isolate our header from theme rules */
.site-header, .site-header * { box-sizing:border-box; }

/* Sticky bar */
.site-header{position:sticky; top:0; z-index:1000; background:var(--frc-bg); box-shadow:0 1px 0 rgba(0,0,0,.06)}
.container{max-width:1200px; margin:0 auto; padding:0 20px}
.header-bar{display:flex; align-items:center; justify-content:space-between; min-height:68px; gap:16px}
.brand img{display:block; height:36px; width:auto}

/* Desktop nav */
.nav-desktop{display:none}
@media (min-width:981px){
    .nav-desktop{display:block}
    .nav-root{display:flex; align-items:center; gap:22px; list-style:none; margin:0; padding:0}
    .nav-root > li > a{display:block; padding:10px 6px; color:var(--frc-ink); text-decoration:none; font-weight:600}
    .nav-root > li > a:hover{color:var(--frc-brand)}
    .nav-root .btn{background:var(--frc-brand); color:#fff; padding:10px 14px; border-radius:10px}
    .nav-root .btn:hover{background:var(--frc-brand-strong)}
    .has-dd{position:relative}
    .dd{position:absolute; top:100%; left:0; min-width:240px; padding:8px; margin-top:10px;
        background:var(--frc-bg); border:1px solid #e8eef1; border-radius:12px; box-shadow:var(--frc-shadow);
        list-style:none; opacity:0; visibility:hidden; transform:translateY(6px); transition:.18s ease}
    .has-dd:where(:hover,:focus-within) .dd{opacity:1; visibility:visible; transform:none}
    .dd li a{display:block; padding:10px 10px; border-radius:8px; color:var(--frc-ink); text-decoration:none; white-space:nowrap}
    .dd li a:hover{background:var(--frc-paper); color:var(--frc-brand-strong)}
}

/* Burger button */
.burger{display:inline-flex; align-items:center; justify-content:center; width:40px; height:40px;
    border:1px solid #e2ecee; border-radius:12px; background:var(--frc-bg); color:var(--frc-ink); cursor:pointer}
.burger:focus-visible{outline:2px solid transparent; box-shadow:0 0 0 4px var(--frc-ring)}
@media (min-width:981px){ .burger{display:none} }

/* Prevent background scroll while open */
body.no-scroll{overflow:hidden; touch-action:none}

/* ===== MOBILE OVERLAY (hardened) ===== */
.mobile-overlay{
    position:fixed; inset:0; width:100vw; height:100dvh; z-index:9999;
    background:rgba(6,12,17,.32); -webkit-backdrop-filter:saturate(1.1) blur(8px);
    backdrop-filter:saturate(1.1) blur(8px);
    display:grid; place-items:start; overflow:auto;
}
.mobile-overlay[hidden]{display:none !important}
.mobile-overlay.open{animation:frcFade .15s ease}
@keyframes frcFade{from{opacity:0}to{opacity:1}}

.mobile-sheet{
    width:clamp(320px, 92vw, 560px);
    min-height:100dvh;
    background:var(--frc-bg);
    box-shadow:var(--frc-shadow);
    border-right:1px solid #e8eef1;
    transform:translateX(-12px); opacity:0;
    animation:frcSlide .18s ease forwards;
}
@keyframes frcSlide{to{transform:none; opacity:1}}
@media (min-width:560px){ .mobile-sheet{border-radius:0 16px 16px 0; overflow:hidden} }

.mobile-header-bar{
    display:flex; align-items:center; justify-content:space-between;
    padding:14px 20px; border-bottom:1px solid #e8eef1; background:var(--frc-bg)
}
.mobile-header-bar .brand img{height:32px}

.nav-close{
    display:inline-flex; align-items:center; justify-content:center; width:40px; height:40px;
    border:1px solid #e2ecee; border-radius:12px; background:var(--frc-bg); color:var(--frc-ink); cursor:pointer
}
.nav-close:hover{background:var(--frc-paper)}
.nav-close:focus-visible{outline:2px solid transparent; box-shadow:0 0 0 4px var(--frc-ring)}

/* Accordion */
.mobile-nav{padding:16px 20px 28px}
.acc-item{background:var(--frc-bg); border:1px solid #e8eef1; border-radius:16px; margin:10px 0 12px; overflow:hidden}
.acc-toggle{display:flex; align-items:center; justify-content:space-between; width:100%;
    background:#f5fbfb; border:0; border-radius:14px; padding:14px 16px; color:var(--frc-ink); font-weight:700; cursor:pointer}
.acc-item.open .acc-toggle{background:#eef8f8}
.acc-toggle .chev{transition:transform .2s ease}
.acc-item.open .chev{transform:rotate(180deg)}

.acc-panel{background:var(--frc-bg); border-top:1px solid #eef3f5; max-height:0; overflow:hidden;
    transition:max-height .25s ease, padding .25s ease; padding:0 12px}
.acc-item.open .acc-panel{max-height:900px; padding:10px 12px 14px}

.acc-links{list-style:none; margin:0; padding:0}
.acc-links li + li{margin-top:4px}
.acc-links a{display:block; padding:10px 12px; border-radius:10px; color:var(--frc-ink); text-decoration:none}
.acc-links a:hover{background:#f5fbfb}

/* Leaf rows */
.mobile-leaf{display:block; background:#f2fbfb; border:1px solid #e2f1f1; border-radius:14px;
    padding:14px 16px; margin:10px 0 12px; font-weight:700; color:var(--frc-ink); text-decoration:none}
.mobile-leaf:active{transform:translateY(1px)}
/* Make header always visible at top */
header,
.site-header,   /* if you use these classes */
.navbar {
    position: sticky;   /* modern, respects parent container */
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;      /* make sure it stays above content */
    background: #fff;   /* same bg as header to avoid transparency issues */
    box-shadow: 0 2px 6px rgba(0,0,0,.05); /* optional subtle shadow */
}

/* If you want it ALWAYS pinned, independent of layout, use fixed: */
.mobile-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    background: #fff;
}