/* =============================================================
 * Hear Flow — HEADER / NAV
 * SINGLE SOURCE OF TRUTH. Every page (index.html included) links this file.
 *
 * Rules were extracted from the landing (index.html), which stays the
 * visual reference. Do NOT copy these rules back into a page's <style>:
 * that is exactly the duplication this file replaces.
 *
 * LOAD ORDER: this file must be linked LAST in <head>, after site.css and
 * after index.html's inline <style>. It intentionally relies on being last
 * to win over page-level base rules of equal specificity (e.g. .btn).
 *
 * FOOTER NOTE: on the landing the footer reuses .brand/.logo
 * (<a class="brand foot-logo">). Rules that would otherwise clobber the
 * footer are scoped under .nav — see the marked lines below.
 * ============================================================= */

.nav{
  position:fixed;top:0;left:0;right:0;z-index:60;
  display:flex;align-items:center;justify-content:space-between;
  padding:14px 24px;gap:16px;margin:0;border-radius:0;
  transition:padding .4s var(--ease), margin .4s var(--ease), border-radius .4s var(--ease), background-color .4s var(--ease), box-shadow .4s var(--ease), border-color .4s var(--ease);
  border:1px solid transparent;
  /* pinned: the landing sets body{line-height:1.5}, site.css sets 1.6.
     The header must render identically on both, so it inherits neither. */
  line-height:1.5;
}
.nav.scrolled{
  padding:9px 20px;margin:10px 18px;border-radius:18px;
  background:color-mix(in srgb, var(--cream-1) 60%, transparent);
  -webkit-backdrop-filter:blur(16px) saturate(1.3);backdrop-filter:blur(16px) saturate(1.3);
  border:1px solid var(--hair);
  box-shadow:0 10px 34px -18px rgba(20,21,22,.4);
}
.brand{display:flex;align-items:center;gap:11px;font-weight:600;letter-spacing:-.02em;font-size:16px}
.logo{width:34px;height:34px;flex:0 0 34px;display:grid;place-items:center;overflow:visible;transition:transform .5s var(--ease)}
.brand:hover .logo{transform:rotate(-6deg) scale(1.05)}
.logo svg{width:26px;height:26px}

/* the nav CTA is smaller than a body .btn — beats .btn{padding} on every page */
.nav .btn{padding:9px 16px}

.nav{justify-content:space-between}
.nav .brand{gap:0}                    /* scoped: keeps footer .foot-logo{gap:11px} on the landing */
/* nowrap + will-change: the landing's .btn declares both, site.css's declares neither.
   nowrap  — without it the CTA collapses on narrow viewports and the header shifts.
   will-change:transform — promotes the CTA to its own layer, which switches text to
   grayscale antialiasing. Without it the label rasterises differently than the landing
   (identical geometry, visibly different pixels). Pinned here so every page matches. */
.nav-cta{--bg:var(--ink);--fg:var(--cream-1);border-radius:100px;padding:11px 22px;font-size:14px;font-weight:560;letter-spacing:-.01em;box-shadow:none;white-space:nowrap;will-change:transform}
.nav-cta:hover{box-shadow:var(--shadow-1)}
.nav .roll{position:relative;display:block;overflow:hidden;height:1.3em;line-height:1.3em}
.nav .roll>span{display:block;will-change:transform;transition:transform .44s cubic-bezier(.16,1,.3,1)}
.nav .roll .r2{position:absolute;left:0;right:0;top:0;transform:translateY(115%)}
.nav-cta:hover .roll .r1{transform:translateY(-115%)}
.nav-cta:hover .roll .r2{transform:translateY(0)}

.nav .brand .logo svg{width:24px;height:24px}   /* scoped: keeps footer .foot-logo .logo svg{30px} */

/* ===== header nav: pages / sections ===== */
.nav-main{display:flex;align-items:center;gap:2px;position:absolute;left:50%;transform:translateX(-50%)}
.nlink{position:relative;display:inline-flex;align-items:center;gap:5px;background:none;border:0;cursor:pointer;font-family:inherit;font-size:14px;font-weight:600;letter-spacing:-.01em;color:var(--ink-soft);padding:9px 12px;border-radius:10px;transition:color .25s var(--ease),background-color .25s var(--ease)}
.nlink:hover{color:var(--ink)}
.nlink .caret{width:13px;height:13px;stroke:currentColor;fill:none;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;transition:transform .3s var(--ease);opacity:.7}
.nav-item{position:relative}
.nav-item.has-menu:hover .caret{transform:rotate(180deg)}
.nav .roll{position:relative;display:block;overflow:hidden;height:1.35em;line-height:1.35em}
.nav .roll>span{display:block;will-change:transform;transition:transform .46s cubic-bezier(.16,1,.3,1)}
.nav .roll .r2{position:absolute;left:0;right:0;top:0;transform:translateY(122%)}
.nlink:hover .roll .r1,.nav-cta:hover .roll .r1{transform:translateY(-122%)}
.nlink:hover .roll .r2,.nav-cta:hover .roll .r2{transform:translateY(0)}
.mega{position:absolute;top:calc(100% + 12px);left:0;transform:translateY(8px);width:544px;max-width:80vw;background:color-mix(in srgb,var(--cream-1) 94%,#fff);border:1px solid var(--hair);border-radius:20px;box-shadow:var(--shadow-2);padding:12px;display:grid;grid-template-columns:1fr 1fr;gap:2px;opacity:0;visibility:hidden;transition:opacity .28s var(--ease),transform .28s var(--ease);z-index:70}
.mega::before{content:"";position:absolute;top:-14px;left:0;right:0;height:16px}
.nav-item.has-menu:hover .mega,.nav-item.has-menu:focus-within .mega{opacity:1;visibility:visible;transform:translateY(0)}
.mega a{display:flex;flex-direction:column;gap:3px;padding:11px 13px;border-radius:13px;transition:background-color .2s}
.mega a:hover{background:var(--stroke-soft)}
.mega a b{font-size:14px;font-weight:560;color:var(--ink);letter-spacing:-.01em}
.mega a span{font-size:12px;line-height:1.35;color:var(--ink-faint)}
.nav-right{display:flex;align-items:center;gap:6px}
.nlink.login{font-family:var(--font-mono);font-size:12.5px;letter-spacing:.02em}
/* the `hidden` attribute must win over author display rules (e.g. .nlink{display:inline-flex}) — otherwise the logged-out "Accedi" link never hides */
[hidden]{display:none!important}
.nav-burger{display:none;width:40px;height:40px;border-radius:11px;align-items:center;justify-content:center;border:1px solid var(--hair);background:none;cursor:pointer}
.nav-burger span{position:relative;display:block;width:17px;height:1.7px;border-radius:2px;background:var(--ink);transition:transform .3s var(--ease),background-color .2s}
.nav-burger span::before,.nav-burger span::after{content:"";position:absolute;left:0;width:17px;height:1.7px;border-radius:2px;background:var(--ink);transition:transform .3s var(--ease)}
.nav-burger span::before{top:-5.5px}.nav-burger span::after{top:5.5px}
.nav.open .nav-burger span{background:transparent}
.nav.open .nav-burger span::before{transform:translateY(5.5px) rotate(45deg)}
.nav.open .nav-burger span::after{transform:translateY(-5.5px) rotate(-45deg)}
@media(max-width:900px){
  .nav-burger{display:flex}
  .nav-right .nlink.login{padding:7px 8px;font-size:11.5px}
  .nav-main{position:absolute;top:100%;left:0;right:0;transform:none;flex-direction:column;align-items:stretch;gap:0;background:var(--cream-1);border-bottom:1px solid var(--hair);box-shadow:var(--shadow-1);padding:8px 18px 18px;display:none}
  .nav.open .nav-main{display:flex}
  .nlink{width:100%;justify-content:space-between;padding:14px 6px;font-size:16px;border-radius:8px;border-bottom:1px solid var(--stroke-soft)}
  .nav .roll{height:1.4em;line-height:1.4em}
  .mega{position:static;transform:none;width:auto;max-width:none;grid-template-columns:1fr;opacity:1;visibility:visible;box-shadow:none;border:0;background:none;padding:2px 0 6px 10px;display:none}
  .mega::before{display:none}
  .nav-item.has-menu.open-sub .mega{display:grid}
  .nav-item.has-menu.open-sub .caret{transform:rotate(180deg)}
  .mega a{padding:9px 8px}
}

/* ===== globe / language popover ===== */
.globe-btn{width:38px;height:38px;border-radius:10px;display:grid;place-items:center;color:var(--ink-soft);transition:background-color .2s,color .2s;position:relative}
.globe-btn:hover{background:var(--stroke-soft);color:var(--ink)}
.globe-btn svg{width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:1.7}
.lang-pop{position:absolute;top:52px;right:0;min-width:190px;background:var(--card);border:1px solid var(--hair);border-radius:16px;box-shadow:var(--shadow-2);padding:8px;z-index:80;opacity:0;transform:translateY(-8px) scale(.97);pointer-events:none;transition:opacity .2s var(--ease),transform .2s var(--ease)}
.lang-pop.open{opacity:1;transform:none;pointer-events:auto}
.lang-pop h6{margin:6px 10px 8px;font-family:var(--font-mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-ghost)}
.lang-opt{display:flex;align-items:center;gap:10px;width:100%;text-align:left;padding:9px 10px;border-radius:10px;font-size:14px;color:var(--ink);transition:background-color .15s}
.lang-opt:hover{background:var(--stroke-soft)}
.lang-opt .flag{font-size:16px;line-height:1}
.lang-opt .ck{margin-left:auto;color:var(--accent);opacity:0}
.lang-opt.sel .ck{opacity:1}
.lang-opt.sel{background:var(--accent-soft)}

/* ===== logged-in state: user chip + dropdown ===== */
.user-menu{position:relative}
.user-btn{display:flex;align-items:center;gap:8px;padding:5px 10px 5px 5px;border-radius:999px;border:1px solid var(--stroke);background:var(--card);transition:background-color .2s,border-color .2s}
.user-btn:hover{background:var(--stroke-soft)}
.user-avatar{width:26px;height:26px;flex:0 0 26px;border-radius:50%;display:grid;place-items:center;background:var(--accent);color:#fff;font-size:12px;font-weight:700;text-transform:uppercase;font-family:var(--font-sans)}
.user-name{font-size:13.5px;font-weight:600;color:var(--ink);max-width:130px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.user-caret{width:11px;height:8px;color:var(--ink-faint);transition:transform .2s var(--ease)}
.user-btn[aria-expanded="true"] .user-caret{transform:rotate(180deg)}
.user-pop{position:absolute;top:48px;right:0;min-width:210px;background:var(--card);border:1px solid var(--hair);border-radius:16px;box-shadow:var(--shadow-2);padding:8px;z-index:80;opacity:0;transform:translateY(-8px) scale(.97);pointer-events:none;transition:opacity .2s var(--ease),transform .2s var(--ease)}
.user-pop.open{opacity:1;transform:none;pointer-events:auto}
.user-pop-email{font-family:var(--font-mono);font-size:11px;color:var(--ink-faint);padding:6px 10px 8px;border-bottom:1px solid var(--hair);margin-bottom:6px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* line-height pinned: these items are <button> on the landing but <a> on the secondary
   pages (the anchor would inherit body line-height and render 4px taller than its
   <button> sibling). `normal` is what a <button> already computes to — so both match. */
.user-pop-item{display:block;width:100%;text-align:left;padding:9px 10px;border-radius:9px;font-size:13.5px;font-weight:500;line-height:normal;color:var(--ink);transition:background-color .15s}
.user-pop-item:hover{background:var(--stroke-soft)}
.user-pop-item.danger{color:var(--rec)}
@media(max-width:900px){.user-name{max-width:96px}}
