/* ============================================================
   HEADER V2 — editorial mega menu, scoped under .hv2
   Loaded sitewide via partials/header-v2.blade.php @push('styles')
   ============================================================ */

/* Dedicated Inter face for the brand wordmark.
   The site-wide inline @font-face uses font-display:optional (CLS optimization),
   which means on slow loads Inter is permanently skipped and the system fallback
   sticks for the page. That makes the brand "Digital Tally" wordmark render in
   SF Pro on most pages but actual Inter on /preview/home (which loads Google
   Fonts with font-display:swap). Aliasing as 'InterBrand' here lets us guarantee
   swap behavior for the wordmark without touching the body's optional strategy. */
@font-face{
    font-family:'InterBrand';
    font-style:normal;
    font-weight:800;
    font-display:swap;
    src:url(https://fonts.gstatic.com/s/inter/v18/UcCO3FwrK3iLTeHuS_nVMrMxCp50SjIw2boKoduKmMEVuLyfAZ9hiA.woff2) format('woff2');
    unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

/* ---- LIGHT (default) palette ---------------------------------- */
.hv2{
    --hv2-ink:#0a0a0a;
    --hv2-ink-soft:#1a1a1a;
    --hv2-paper:#fdfbf7;
    --hv2-paper-warm:#f5f1ea;
    --hv2-rule:rgba(10,10,10,.10);
    --hv2-rule-strong:rgba(10,10,10,.20);
    --hv2-muted:#52524f;
    --hv2-accent:#2ba8ff;
    --hv2-accent-deep:#0066cc;
    --hv2-soft-blue:rgba(43,168,255,.08);
    --hv2-mega-bg:#fff;
    --hv2-mega-item-hover:var(--hv2-soft-blue);
    --hv2-bar-bg:rgba(253,251,247,.94);

    /* position:fixed (not sticky) — html,body have overflow-x:hidden in critical CSS,
       which clips sticky positioning. Critical CSS already reserves padding-top:64px
       on <main> for a fixed header, so this is the layout the rest of the app expects. */
    position:fixed;top:0;left:0;right:0;z-index:1100;
    background:var(--hv2-bar-bg);
    backdrop-filter:saturate(180%) blur(12px);
    -webkit-backdrop-filter:saturate(180%) blur(12px);
    border-bottom:1px solid var(--hv2-rule);
    font-family:'Inter',system-ui,-apple-system,sans-serif;
    color:var(--hv2-ink);
}

/* ---- DARK palette overrides ----------------------------------- */
[data-theme="dark"] .hv2,
[data-theme="dark"] .hv2-drawer,
[data-theme="dark"] .hv2-mega{
    --hv2-ink:#f1f1f1;
    --hv2-ink-soft:#d4d4d4;
    --hv2-paper:#16161e;
    --hv2-paper-warm:#1f1f28;
    --hv2-rule:rgba(255,255,255,.10);
    --hv2-rule-strong:rgba(255,255,255,.20);
    --hv2-muted:#a3a3a3;
    --hv2-accent:#2ba8ff;
    --hv2-accent-deep:#3aa5ff;
    --hv2-soft-blue:rgba(43,168,255,.16);
    --hv2-mega-bg:#1c1c26;
    --hv2-mega-item-hover:rgba(43,168,255,.18);
    --hv2-bar-bg:rgba(20,20,28,.92);
}
[data-theme="dark"] .hv2 .hv2-mark{background:var(--hv2-accent);color:#0a0a0a}
[data-theme="dark"] .hv2 .hv2-link:hover,
[data-theme="dark"] .hv2 .hv2-link[aria-expanded="true"]{background:rgba(255,255,255,.06)}
[data-theme="dark"] .hv2-icon-btn:hover,
[data-theme="dark"] .hv2-burger:hover,
[data-theme="dark"] .hv2-btn-ghost:hover{background:rgba(255,255,255,.06)}
[data-theme="dark"] .hv2-mega-item:hover .hv2-mi-icon{background:var(--hv2-accent);color:#0a0a0a}
[data-theme="dark"] .hv2-mega-item .hv2-mi-icon{background:rgba(255,255,255,.06)}
[data-theme="dark"] .hv2-mega-item.hv2-mi-locked:hover{background:rgba(255,255,255,.04)}
[data-theme="dark"] .hv2-mega-item.hv2-mi-locked .hv2-mi-icon{background:rgba(255,255,255,.06)}
[data-theme="dark"] .hv2-mi-soon .hv2-mi-pill{background:rgba(255,255,255,.18);color:#0a0a0a}
[data-theme="dark"] .hv2-drawer-link:hover,
[data-theme="dark"] .hv2-drawer-link:active{background:rgba(255,255,255,.06)}

.hv2 *{box-sizing:border-box}
.hv2 a{text-decoration:none;color:inherit}

.hv2-inner{
    max-width:1280px;margin:0 auto;
    height:64px;padding:0 1.5rem;
    display:flex;align-items:center;gap:1.5rem;
}

/* Brand */
/* InterBrand alias (declared at top of file) uses font-display:swap so the wordmark
   always lands on Inter, regardless of whether the body's optional Inter swapped in. */
.hv2-brand{
    display:inline-flex;align-items:center;gap:.5rem;
    font-family:'InterBrand','Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
    font-weight:800;letter-spacing:-.01em;flex-shrink:0;
}
.hv2-mark{
    display:inline-flex;align-items:center;justify-content:center;
    width:28px;height:28px;border-radius:7px;
    background:var(--hv2-ink);color:var(--hv2-paper);
    font-family:'Fraunces','Source Serif Pro',Georgia,serif;
    font-weight:900;font-size:.875rem;line-height:1;
}
.hv2-wordmark{font-family:inherit;font-weight:800;font-size:1rem;letter-spacing:-.015em}
.hv2-wordmark em{font-family:inherit;font-weight:800;font-style:normal;color:var(--hv2-accent)}

/* Primary nav */
.hv2-nav{display:flex;align-items:center;gap:.125rem;flex:1}
.hv2-link{
    display:inline-flex;align-items:center;gap:.375rem;
    padding:.5rem .75rem;border-radius:8px;
    font-size:.9375rem;font-weight:500;color:var(--hv2-ink);
    transition:background-color .15s ease;
    border:0;background:transparent;cursor:pointer;
    font-family:inherit;
}
.hv2-link:hover{background:rgba(10,10,10,.05)}
.hv2-link[aria-expanded="true"]{background:rgba(10,10,10,.06)}
.hv2-chevron{width:10px;height:10px;opacity:.55;transition:transform .15s ease}
.hv2-link[aria-expanded="true"] .hv2-chevron{transform:rotate(180deg)}

/* Right-side actions */
.hv2-actions{display:flex;align-items:center;gap:.5rem;flex-shrink:0}
.hv2-btn{
    display:inline-flex;align-items:center;justify-content:center;
    padding:.5rem 1rem;border-radius:9px;
    font-size:.9375rem;font-weight:600;letter-spacing:-.005em;
    border:1px solid transparent;cursor:pointer;
    transition:transform .12s ease, background-color .15s ease, color .15s ease;
    font-family:inherit;
}
.hv2-btn-ghost{color:var(--hv2-ink);background:transparent}
.hv2-btn-ghost:hover{background:rgba(10,10,10,.06)}
.hv2-btn-solid{
    background:linear-gradient(135deg, var(--hv2-accent) 0%, var(--hv2-accent-deep) 100%);
    color:#fff !important;
    box-shadow:0 1px 2px rgba(0,102,204,.18), 0 4px 12px -4px rgba(43,168,255,.4);
}
.hv2-btn-solid:hover{filter:brightness(1.06)}
.hv2-btn:active{transform:translateY(1px)}

/* Icon-only action buttons (reviews, share, theme) */
.hv2-icon-btn{
    width:38px;height:38px;border-radius:9px;
    display:inline-flex;align-items:center;justify-content:center;
    border:0;background:transparent;cursor:pointer;color:var(--hv2-ink);
    transition:background-color .15s ease;
    font-family:inherit;
}
.hv2-icon-btn:hover{background:rgba(10,10,10,.06)}
.hv2-icon-btn svg{width:18px;height:18px;display:block}
.hv2-icon-btn .hv2-rating{
    display:inline-flex;align-items:center;gap:.25rem;
    padding:0 .5rem;font-size:.8125rem;font-weight:600;
    color:var(--hv2-ink);width:auto;height:38px;border-radius:9px;
}
.hv2-icon-btn .hv2-rating-star{color:#f59e0b}

/* Theme-toggle icon swap. data-theme can live on <html> or <body>; the
   selector below matches an ancestor on either, since app.js syncs both. */
.hv2-theme-toggle .hv2-theme-icon-light{display:none}
[data-theme="light"] .hv2-theme-toggle .hv2-theme-icon-dark{display:none}
[data-theme="light"] .hv2-theme-toggle .hv2-theme-icon-light{display:block}

/* Trigger leading icons */
.hv2-link .hv2-leading{
    width:14px;height:14px;flex-shrink:0;opacity:.7;
}

/* Avatar (auth) */
.hv2-avatar{
    width:34px;height:34px;border-radius:50%;
    display:inline-flex;align-items:center;justify-content:center;
    background:var(--hv2-ink);color:var(--hv2-paper);
    font-weight:700;font-size:.8125rem;letter-spacing:.02em;
    border:0;cursor:pointer;font-family:inherit;
}

/* ============================================================
   MEGA MENU PANELS
   ============================================================ */
.hv2-dropdown{position:relative}
.hv2-mega{
    position:absolute;top:calc(100% + 8px);left:0;
    background:var(--hv2-mega-bg);border:1px solid var(--hv2-rule);
    border-radius:14px;
    box-shadow:0 16px 40px -10px rgba(0,0,0,.18), 0 4px 8px -4px rgba(0,0,0,.08);
    padding:1rem;
    opacity:0;visibility:hidden;transform:translateY(-4px);
    transition:opacity .15s ease, transform .15s ease, visibility .15s ease;
}
.hv2-dropdown[data-open="true"] .hv2-mega{opacity:1;visibility:visible;transform:translateY(0)}

.hv2-mega-sm{min-width:300px;max-width:340px}
.hv2-mega-md{min-width:560px;width:560px}
.hv2-mega-lg{min-width:760px;width:760px}
.hv2-mega-right{left:auto;right:0}

.hv2-mega-grid{display:grid;gap:1.25rem 1.5rem}
.hv2-mega-grid-2{grid-template-columns:1fr 1fr}
.hv2-mega-grid-3{grid-template-columns:1fr 1fr 1fr}

.hv2-mega-section{min-width:0}
.hv2-mega-title{
    font-size:.6875rem;font-weight:700;letter-spacing:.16em;
    text-transform:uppercase;color:var(--hv2-muted);
    margin:0 .5rem .375rem;padding:0;
}
.hv2-mega-list{display:flex;flex-direction:column;gap:1px}

.hv2-mega-item{
    display:flex;align-items:flex-start;gap:.625rem;
    padding:.5rem;border-radius:8px;
    transition:background-color .12s ease;
}
.hv2-mega-item:hover{background:var(--hv2-mega-item-hover)}
.hv2-mega-item .hv2-mi-icon{
    flex-shrink:0;
    width:26px;height:26px;border-radius:6px;
    display:inline-flex;align-items:center;justify-content:center;
    background:rgba(10,10,10,.04);color:var(--hv2-ink);
    font-size:.75rem;
}
.hv2-mega-item:hover .hv2-mi-icon{background:var(--hv2-accent);color:#fff}
.hv2-mega-item .hv2-mi-body{display:flex;flex-direction:column;min-width:0;line-height:1.25}
.hv2-mega-item .hv2-mi-name{font-weight:600;font-size:.875rem;color:var(--hv2-ink)}
.hv2-mega-item .hv2-mi-desc{font-size:.75rem;color:var(--hv2-muted);margin-top:1px}

/* Locked upsell row */
.hv2-mega-item.hv2-mi-locked{cursor:default;opacity:.78}
.hv2-mega-item.hv2-mi-locked:hover{background:rgba(10,10,10,.03)}
.hv2-mega-item.hv2-mi-locked .hv2-mi-icon{background:rgba(10,10,10,.06);color:var(--hv2-muted)}
.hv2-mega-item.hv2-mi-locked .hv2-mi-name{color:var(--hv2-muted);font-weight:500}
.hv2-mi-pill{
    margin-left:auto;flex-shrink:0;align-self:center;
    font-size:.625rem;font-weight:700;letter-spacing:.08em;
    text-transform:uppercase;
    padding:.125rem .5rem;border-radius:999px;
    background:var(--hv2-accent);color:#fff;
}
.hv2-mi-pill-team{background:#7c3aed}

/* Coming-soon footer */
.hv2-mega-foot{
    margin-top:1rem;padding-top:1rem;
    border-top:1px solid var(--hv2-rule);
}
.hv2-mega-foot-label{
    font-size:.6875rem;font-weight:700;letter-spacing:.16em;
    text-transform:uppercase;color:var(--hv2-muted);
    margin:0 .5rem .375rem;
    display:flex;align-items:center;gap:.5rem;
}
.hv2-mega-foot-label .hv2-mfl-icon{font-size:.75rem;opacity:.7}
.hv2-mi-soon{cursor:default;opacity:.6}
.hv2-mi-soon:hover{background:transparent}
.hv2-mi-soon .hv2-mi-pill{background:rgba(10,10,10,.6)}

/* Small mega bottom CTA */
.hv2-mega-cta{
    display:flex;align-items:center;justify-content:space-between;
    margin-top:.75rem;padding:.5rem .75rem;
    border-radius:8px;
    background:var(--hv2-soft-blue);
    font-size:.8125rem;font-weight:600;color:var(--hv2-accent-deep);
}
.hv2-mega-cta:hover{background:rgba(43,168,255,.14)}

/* Burger — always visible */
.hv2-burger{
    display:inline-flex;
    width:40px;height:40px;border-radius:9px;
    border:0;background:transparent;cursor:pointer;
    align-items:center;justify-content:center;
    color:var(--hv2-ink);
}
.hv2-burger:hover{background:rgba(10,10,10,.06)}
.hv2-burger svg{width:22px;height:22px}

/* Drawer — right-aligned flyout */
.hv2-drawer{
    position:fixed;top:64px;right:0;bottom:0;z-index:1000;
    width:380px;max-width:90vw;
    background:var(--hv2-paper);
    border-left:1px solid var(--hv2-rule);
    box-shadow:-12px 0 32px -12px rgba(0,0,0,.18);
    overflow-y:auto;
    padding:1.25rem;
    transform:translateX(100%);
    transition:transform .24s cubic-bezier(.32,.72,0,1);
    visibility:hidden;
    color:var(--hv2-ink);
}
.hv2-drawer[data-open="true"]{transform:translateX(0);visibility:visible}
.hv2-drawer[hidden]{display:block}
.hv2-drawer-backdrop{
    position:fixed;top:64px;right:0;bottom:0;left:0;z-index:999;
    background:rgba(10,10,10,.4);
    opacity:0;visibility:hidden;
    transition:opacity .2s ease, visibility .2s ease;
}
.hv2-drawer-backdrop[data-open="true"]{opacity:1;visibility:visible}
.hv2-drawer-backdrop[hidden]{display:block}
.hv2-drawer-section{margin-bottom:1.5rem}
.hv2-drawer-label{
    font-size:.6875rem;font-weight:700;letter-spacing:.18em;
    text-transform:uppercase;color:var(--hv2-muted);
    margin:0 0 .5rem;padding:0 .5rem;
}
.hv2-drawer-link{
    display:flex;align-items:center;gap:.625rem;
    padding:.75rem .5rem;border-radius:8px;
    font-size:.9375rem;font-weight:500;color:var(--hv2-ink);
}
.hv2-drawer-link:hover,.hv2-drawer-link:active{background:rgba(10,10,10,.05)}
.hv2-drawer-link i{width:1.25rem;text-align:center;opacity:.7}
.hv2-drawer-cta{margin-top:1rem;display:grid;gap:.5rem}
.hv2-drawer-cta .hv2-btn{justify-content:center;padding:.875rem 1rem}

/* Responsive */
@media (max-width:980px){
    .hv2-nav{display:none}
    .hv2-actions .hv2-link,.hv2-actions .hv2-btn-ghost{display:none}
    .hv2-inner{gap:.5rem;justify-content:space-between}
}
@media (max-width:640px){
    .hv2-actions .hv2-icon-btn:not(.hv2-theme-toggle){display:none}
}
@media (max-width:520px){
    .hv2-brand{gap:.4rem}
    .hv2-mark{width:26px;height:26px;font-size:.8125rem}
    .hv2-wordmark{font-size:.8125rem;letter-spacing:-.02em;white-space:nowrap}
    .hv2-actions{gap:.25rem}
    .hv2-actions .hv2-btn-solid{padding:.5rem .65rem;font-size:.8125rem}
}
@media (max-width:340px){
    .hv2-wordmark{display:none}
}
body.hv2-drawer-open{overflow:hidden}