/* ============================================================
   site.css — Shared styles for every page
   Edit here to update the header, nav, footer, buttons etc.
   ============================================================ */

:root{
    --bg-0:#05070d;--ink:#e8edf7;--ink-dim:#a3acc2;
    --royal:#2554ff;--teal:#14e0c4;
    --stroke:rgba(255,255,255,0.14);--stroke-soft:rgba(255,255,255,0.08);
  }
  *{box-sizing:border-box;margin:0;padding:0}
  html,body{background:var(--bg-0);color:var(--ink);font-family:'Inter',sans-serif;-webkit-font-smoothing:antialiased;line-height:1.6;overflow-x:hidden}
  h1,h2,h3,h4{font-family:'Space Grotesk',sans-serif;letter-spacing:-0.02em;line-height:1.15}
  a{color:inherit;text-decoration:none}

  .ambient{position:fixed;inset:0;z-index:-2;overflow:hidden}
  .ambient::before,.ambient::after{content:"";position:absolute;width:60vw;height:60vw;border-radius:50%;filter:blur(120px);opacity:0.4}
  .ambient::before{background:radial-gradient(circle,var(--royal),transparent 60%);top:-20vw;left:-15vw;animation:drift 22s ease-in-out infinite alternate}
  .ambient::after{background:radial-gradient(circle,var(--teal),transparent 60%);bottom:-25vw;right:-15vw;animation:drift 26s ease-in-out infinite alternate-reverse}
  @keyframes drift{from{transform:translate(0,0) scale(1)}to{transform:translate(8vw,6vw) scale(1.15)}}
  .grid-overlay{position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:.14;background-image:linear-gradient(rgba(255,255,255,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.04) 1px,transparent 1px);background-size:60px 60px;mask-image:radial-gradient(ellipse at center,black 30%,transparent 75%)}

  .glass{background:linear-gradient(135deg,rgba(255,255,255,.10),rgba(255,255,255,.03));border:1px solid var(--stroke);border-radius:20px;backdrop-filter:blur(22px) saturate(160%);-webkit-backdrop-filter:blur(22px) saturate(160%);box-shadow:inset 0 1px 0 rgba(255,255,255,.18),0 10px 30px rgba(0,0,0,.35);position:relative;overflow:hidden}
  .glass::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;background:linear-gradient(135deg,rgba(255,255,255,.18),transparent 35%,transparent 65%,rgba(20,224,196,.10));mix-blend-mode:overlay}

  .btn{display:inline-flex;align-items:center;gap:.6rem;white-space:nowrap;padding:.85rem 1.4rem;font-weight:600;font-size:.95rem;border-radius:999px;cursor:pointer;border:1px solid var(--stroke);background:linear-gradient(135deg,rgba(255,255,255,.10),rgba(255,255,255,.02));color:var(--ink);transition:transform .25s,box-shadow .25s,border-color .25s;font-family:inherit}
  .btn-sm{padding:.55rem .95rem;font-size:.85rem}
  .btn:hover{transform:translateY(-2px);border-color:rgba(255,255,255,.28);box-shadow:0 12px 36px rgba(37,84,255,.35)}
  .btn-teal{background:linear-gradient(135deg,rgba(20,224,196,.85),rgba(11,179,157,.7));border-color:rgba(255,255,255,.25);color:#05070d;font-weight:700;box-shadow:inset 0 1px 0 rgba(255,255,255,.45),0 14px 40px -10px rgba(20,224,196,.6),0 0 0 1px rgba(20,224,196,.35)}
  .btn-teal:hover{box-shadow:inset 0 1px 0 rgba(255,255,255,.5),0 18px 48px -10px rgba(20,224,196,.75),0 0 0 1px rgba(20,224,196,.55)}
  .btn-arrow{display:inline-block;width:14px;height:14px;border-top:2px solid currentColor;border-right:2px solid currentColor;transform:rotate(45deg);margin-left:.1rem}
  .btn-arrow-left{display:inline-block;width:12px;height:12px;border-top:2px solid currentColor;border-left:2px solid currentColor;transform:rotate(-45deg);margin-right:.45rem}
  .back-btn{color:var(--teal)}
  .back-btn:hover{color:#7aa3ff;border-color:rgba(20,224,196,.4);box-shadow:0 12px 36px -12px rgba(20,224,196,.5)}

  .container{max-width:1240px;margin:0 auto;padding:0 28px}
  /* Narrow doc pages (news, privacy, hipaa, ct, mri, mammography, etc.) */
  body.page-narrow .container{max-width:880px}
  body.page-narrow footer .container{max-width:1240px}

  /* Header */
  header.glass{position:fixed;top:0;left:0;right:0;z-index:100;width:100%;max-width:none;transform:none;overflow:visible;padding:.55rem max(24px, calc((100% - 1240px) / 2));display:flex;align-items:center;justify-content:space-between;border-radius:0;background:linear-gradient(180deg, rgba(5,7,13,.83), rgba(8,11,22,.80));border:none;border-bottom:1px solid var(--stroke-soft);backdrop-filter:blur(20px) saturate(160%);-webkit-backdrop-filter:blur(20px) saturate(160%);box-shadow:0 4px 24px rgba(0,0,0,.45)}
  nav{display:flex;gap:1.4rem;font-size:.88rem;font-weight:500;color:var(--ink-dim)}
  nav a{position:relative;transition:color .2s;cursor:pointer}
  nav a:hover{color:var(--ink)}
  nav a::after{content:"";position:absolute;left:0;bottom:-6px;width:0;height:2px;background:linear-gradient(90deg,var(--royal),var(--teal));transition:width .3s}
  nav a:hover::after{width:100%}
  nav a.lnq-link{color:#5b8aff;font-weight:700;letter-spacing:.02em;text-shadow:0 0 18px rgba(37,84,255,.45)}
  nav a.lnq-link:hover{color:#7aa3ff}
  nav a.active{color:var(--ink)}
  nav a.active::after{width:100%}
  .brand{display:flex;align-items:center;gap:.6rem}
  .brand-logo{height:42px;display:flex;align-items:center}
  .brand-logo svg{height:100%;width:auto;display:block}

  /* Dropdown */
  .nav-dropdown{position:relative;display:inline-flex}
  .nav-dropdown::after{content:"";position:absolute;top:100%;left:-12px;right:-12px;height:14px}
  .nav-trigger{background:none;border:none;color:inherit;font:inherit;cursor:pointer;padding:0;display:inline-flex;align-items:center;gap:.3rem;font-weight:500;transition:color .2s}
  .nav-trigger:hover{color:var(--ink)}
  /* Gradient bar above Team trigger when dropdown is hovered/open */
  .nav-trigger::after{content:"";position:absolute;left:0;top:-6px;width:0;height:2px;background:linear-gradient(90deg,var(--royal),var(--teal));transition:width .3s;pointer-events:none}
  .nav-dropdown:hover .nav-trigger::after,.nav-dropdown.open .nav-trigger::after,.nav-dropdown:focus-within .nav-trigger::after,.nav-trigger.active::after{width:100%}
  .nav-trigger.active{color:var(--ink)}
  .nav-trigger .caret{font-size:.75em;transition:transform .25s}
  .nav-dropdown:hover .nav-trigger .caret,.nav-dropdown.open .nav-trigger .caret{transform:rotate(180deg)}
  .nav-panel{position:absolute;top:calc(100% + 8px);left:50%;transform:translateX(-50%) translateY(-4px);min-width:180px;background:linear-gradient(135deg,#0a0d18,#05080f);border:1px solid var(--stroke);border-radius:12px;padding:.3rem;box-shadow:0 16px 40px rgba(0,0,0,.65),0 0 0 1px rgba(37,84,255,.15);display:flex;flex-direction:column;opacity:0;pointer-events:none;visibility:hidden;transition:opacity .2s,transform .2s,visibility 0s .2s;z-index:200}
  .nav-dropdown:hover .nav-panel,.nav-dropdown.open .nav-panel,.nav-dropdown:focus-within .nav-panel{opacity:1;pointer-events:auto;visibility:visible;transform:translateX(-50%) translateY(0);transition:opacity .2s,transform .2s,visibility 0s 0s}
  .nav-panel a{padding:.4rem .7rem;border-radius:8px;font-size:.85rem;color:var(--ink-dim);white-space:nowrap;transition:background .2s,color .2s}
  .nav-panel a::after{display:none}
  .nav-panel a:hover,.nav-panel a.active{background:rgba(20,224,196,.10);color:var(--ink)}

  /* Right-side header cluster (portal button + hamburger) */
  .header-right{display:flex;align-items:center;gap:.5rem}

  /* Hamburger */
  .hamburger{display:none;background:none;border:1px solid var(--stroke);width:44px;height:44px;border-radius:10px;cursor:pointer;flex-direction:column;justify-content:center;align-items:center;gap:4px;padding:0;transition:border-color .2s;position:relative;z-index:101;-webkit-tap-highlight-color:rgba(37,84,255,.25);touch-action:manipulation;-webkit-user-select:none;user-select:none}
  .hamburger:hover{border-color:rgba(255,255,255,.32)}
  .hamburger span{display:block;width:18px;height:2px;background:var(--ink);transition:transform .25s,opacity .2s;pointer-events:none}
  .hamburger.open span:nth-child(1){transform:translateY(6px) rotate(45deg)}
  .hamburger.open span:nth-child(2){opacity:0}
  .hamburger.open span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}

  .mobile-backdrop{position:fixed;inset:0;z-index:90;background:rgba(0,0,0,.55);backdrop-filter:blur(4px);opacity:0;pointer-events:none;transition:opacity .25s}
  .mobile-backdrop.shown{opacity:1;pointer-events:auto}
  .mobile-menu{display:block;position:fixed;top:64px;left:0;right:0;z-index:95;background:linear-gradient(180deg,rgba(8,11,22,.97),rgba(5,7,13,.94));border-bottom:1px solid var(--stroke);backdrop-filter:blur(20px) saturate(160%);-webkit-backdrop-filter:blur(20px) saturate(160%);transform:translateY(-110%);transition:transform .3s;box-shadow:0 24px 50px rgba(0,0,0,.55)}
  .mobile-menu.open{transform:translateY(0)}
  .mobile-menu-inner{max-width:1240px;margin:0 auto;padding:1.4rem 24px 1.6rem;display:flex;flex-direction:column;gap:.2rem}
  .mobile-menu-inner a{padding:.85rem 0;font-size:1.05rem;font-weight:500;color:var(--ink-dim);border-bottom:1px solid var(--stroke-soft)}
  .mobile-menu-inner a:last-child{border-bottom:none}
  .mobile-menu-inner a:hover,.mobile-menu-inner a.active{color:var(--ink)}
  .mobile-menu-inner a.active{font-weight:600}
  .mobile-section{display:flex;flex-direction:column}
  .mobile-section-label{font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;color:var(--teal);font-weight:700;padding:.65rem 0 .25rem;opacity:.9}
  .mobile-section a{padding-left:1.7rem!important;position:relative}
  .mobile-section a::before{content:"";position:absolute;left:.5rem;top:.85rem;bottom:.85rem;width:2px;background:rgba(20,224,196,.45);border-radius:1px}
  /* Lock body scroll while the mobile menu is open. `overflow:hidden` alone is
     ignored by iOS Safari; `position:fixed` is the only thing that reliably
     stops the page underneath from scrolling. The companion script in base.njk
     saves window.scrollY before locking and restores it on close so toggling
     the menu doesn't jump the user to the top of the page. */
  body.menu-open{overflow:hidden;position:fixed;left:0;right:0;width:100%}

/* ===== Unified footer ===== */
  footer{padding:60px 0 30px;border-top:1px solid var(--stroke-soft);margin-top:60px}
  .foot{display:grid;grid-template-columns:1.4fr repeat(3,1fr);gap:40px;margin-bottom:30px}
  .foot h4{font-family:'Space Grotesk',sans-serif;font-size:.8rem;text-transform:uppercase;letter-spacing:.16em;color:var(--teal);margin-bottom:.9rem}
  .foot ul{list-style:none;display:flex;flex-direction:column;gap:.5rem;padding:0}
  .foot a{color:var(--ink-dim);font-size:.9rem;transition:color .2s}
  .foot a:hover{color:var(--ink)}
  .foot p{color:var(--ink-dim);font-size:.9rem;max-width:36ch;margin-top:.8rem}
  .foot-bottom{display:flex;justify-content:space-between;font-size:.8rem;color:var(--ink-dim);padding-top:20px;border-top:1px solid var(--stroke-soft);flex-wrap:wrap;gap:1rem}
  .foot-bottom .legal-links a{font-size:.8rem;color:var(--ink-dim)}
  .foot-bottom .legal-links a:hover{color:var(--teal)}
  .foot-bottom .social-icons{display:flex;align-items:center;gap:10px}
  .foot-bottom .social-icons a{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:8px;border:1px solid var(--stroke-soft);background:rgba(255,255,255,.02);color:var(--ink-dim);transition:all .2s ease}
  .foot-bottom .social-icons a:hover{border-color:rgba(20,224,196,.5);background:rgba(20,224,196,.08);color:var(--teal);box-shadow:0 0 18px rgba(20,224,196,.18)}
  .foot-bottom .social-icons svg{width:15px;height:15px}
  .contact-list a{line-height:1.45}
  .foot .brand-logo{height:42px;display:flex;align-items:center}
  .foot .brand-logo svg{height:100%;width:auto;display:block}

  /* Section heading + subtitle. Subtitle stacks below the h2 (was historically
     a side-by-side flex row in page CSS, which produced awkward 2-3 line
     wraps next to the heading; vertical stack reads better on every width). */
  .sec-head{display:flex;flex-direction:column;gap:.6rem;margin-bottom:36px}
  .sec-head h2{font-size:clamp(1.8rem,3.2vw,2.8rem);font-weight:700;margin-top:.6rem}
  .sec-head h2 .grad{background:linear-gradient(120deg,#fff 0%,var(--teal) 100%);-webkit-background-clip:text;color:transparent}
  .sec-head p{color:var(--ink-dim);font-size:1rem;max-width:60ch}
  @media (max-width:600px){
    .hero{padding:100px 0 20px}
    .hero h1{font-size:clamp(1.9rem,7vw,2.8rem)}
    .doc-body{padding:22px 18px}
    .doc-body h2{font-size:1.15rem}
    .draft-banner{padding:.7rem .9rem;font-size:.85rem}
  }
  /* ============================================================
     Mobile breakpoints — swap desktop nav for hamburger, tighten
     padding so the header + content fit on phone-class screens.
     ============================================================ */
  @media (max-width:980px){
    nav{display:none}
    .hamburger{display:flex}
    /* Whenever the hamburger is the way to reach nav, the Physician Portal
       pill leaves the header too — it lives at the bottom of the mobile menu
       (.menu-cta) instead. Keeps the header to logo + hamburger so they
       always fit, even on a tablet in portrait. */
    .btn.header-portal{display:none}
    .foot{grid-template-columns:1fr 1fr;gap:32px}
  }
  @media (max-width:600px){
    .container{padding:0 16px}
    header.glass{padding:.5rem 16px}
    .brand-logo{height:34px}
    .hamburger{width:42px;height:42px}
    header.glass .btn{padding:.45rem .75rem;font-size:.78rem}
    .mobile-menu-inner{padding:1.4rem 16px 1.6rem}
    .foot{grid-template-columns:1fr;gap:24px}
  }
  /* CTA pinned at the bottom of the mobile menu. Visible only when the menu is */
  /* open, so it doesn't need a viewport guard. */
  .mobile-menu-inner .menu-cta{
    display:flex;justify-content:center;align-items:center;gap:.4rem;
    margin-top:18px;padding:.85rem 1.2rem;
    font-size:.95rem;font-weight:700;
    border-bottom:none !important;
    color:#05070d;
  }
  .mobile-menu-inner .menu-cta:hover{color:#05070d}


  /* Skip-to-content link (WCAG 2.4.1) */
  .skip-link{position:absolute;left:-9999px;top:0;z-index:200;background:var(--teal);color:#000;padding:.65rem 1.1rem;border-radius:0 0 10px 10px;font-weight:700;text-decoration:none;font-size:.9rem}
  .skip-link:focus{left:50%;transform:translateX(-50%)}

  /* Respect prefers-reduced-motion (WCAG 2.3.3) */
  @media (prefers-reduced-motion: reduce){
    *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important;scroll-behavior:auto !important}
    .ambient,.ambient::before,.ambient::after{animation:none !important}
  }

  /* Scale layout for larger monitors (≥1500px / 4K) */
  @media (min-width: 1500px){
    .container{max-width:1500px}
    body.page-narrow .container{max-width:880px}
    body.page-narrow footer .container{max-width:1500px}
    header.glass{padding:.55rem max(24px, calc((100% - 1500px) / 2))}
    .brand-logo{height:46px}
  }
  @media (min-width: 1800px){
    html{font-size:17.5px}
    .container{max-width:1680px}
    body.page-narrow .container{max-width:920px}
    body.page-narrow footer .container{max-width:1680px}
    header.glass{padding:.55rem max(24px, calc((100% - 1680px) / 2))}
    .brand-logo{height:50px}
    nav{gap:1.6rem}
  }
  @media (min-width: 2400px){
    html{font-size:19px}
    .container{max-width:1920px}
    body.page-narrow .container{max-width:1040px}
    body.page-narrow footer .container{max-width:1920px}
    header.glass{padding:.6rem max(28px, calc((100% - 1920px) / 2))}
    .brand-logo{height:58px}
    nav{gap:1.8rem;font-size:.92rem}
  }
  @media (min-width: 3200px){
    html{font-size:22px}
    .container{max-width:2240px}
    body.page-narrow .container{max-width:1200px}
    body.page-narrow footer .container{max-width:2240px}
    header.glass{padding:.7rem max(32px, calc((100% - 2240px) / 2))}
    .brand-logo{height:68px}
    nav{gap:2rem;font-size:.94rem}
  }

  /* Align last Contact item (email) with last Patients item */
  footer .foot > div:nth-child(4){display:flex;flex-direction:column}
  footer .foot > div:nth-child(4) ul.contact-list{display:flex;flex-direction:column;gap:.5rem;flex:1}
  footer .foot > div:nth-child(4) ul.contact-list li:last-child{margin-top:auto}
    .container{max-width:2240px}
    body.page-narrow .container{max-width:1200px}
    body.page-narrow footer .container{max-width:2240px}
    header.glass{padding:.7rem max(32px, calc((100% - 2240px) / 2))}
    .brand-logo{height:68px}
    nav{gap:2rem;font-size:.94rem}
  }

  /* Align last Contact item (email) with last Patients item */
  footer .foot > div:nth-child(4){display:flex;flex-direction:column}
  footer .foot > div:nth-child(4) ul.contact-list{display:flex;flex-direction:column;gap:.5rem;flex:1}
  footer .foot > div:nth-child(4) ul.contact-list li:last-child{margin-top:auto}