/* assets/header.css - extracted from 12Port Top Nav v2 mockup */


  :root{
    /* brand tokens */
    --teal-dark:#287A77;--teal-hover:#48A9A6;--teal-active:#1F6663;
    --teal-soft:#F0F9F9;--teal-chip:#E6F3F3;
    --charcoal:#1A2A35;--gray:#566673;--gray-soft:#7A92AA;
    --bg:#F7F8FA;--border:#E2E8F0;--white:#FFFFFF;--dark:#0F1A22;--red:#FF0000;
    --shadow-md:0 6px 18px rgba(26,42,53,0.10);
    --shadow-lg:0 12px 32px rgba(26,42,53,0.14);
    --r:6px;--r-md:8px;--r-lg:12px;--r-xl:16px;--r-pill:999px;
    --font-sans:'Poppins',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
    --font-mono:'JetBrains Mono','Fira Code',Consolas,monospace;
    --max:1280px;--inset:clamp(20px,4vw,40px);
    --h-tall:72px;--h-short:56px;

    /* themeable header tokens (override in dark mode) */
    --header-bg:rgba(255,255,255,0.85);
    --header-bg-shrunk:rgba(255,255,255,0.92);
    --header-border:var(--border);
    --link-color:var(--charcoal);
    --link-color-hover:var(--teal-dark);
    --underline-color:var(--teal-dark);
    --cta-bg:var(--teal-dark);
    --cta-bg-hover:var(--teal-hover);
    --cta-fg:#fff;
    --drawer-bg:#fff;
    --drawer-fg:var(--charcoal);
    --overlay-scrim:rgba(15,26,34,0.6);
    --submenu-bg:#fff;
    --submenu-border:var(--border);
    --submenu-hover:var(--teal-soft);
    --featured-bg:var(--teal-soft);
    --kbd-bg:var(--bg);
    --kbd-border:var(--border);
    --kbd-fg:var(--gray);
    --focus-ring:var(--teal-dark);
  }

  /* Dark-mode-ready: tokens swap, no markup change. Currently disabled
     (commented) so we don't ship dark mode yet. Uncomment later.
  @media (prefers-color-scheme: dark) {
    :root {
      --header-bg:rgba(15,26,34,0.85);
      --header-bg-shrunk:rgba(15,26,34,0.92);
      --header-border:rgba(255,255,255,0.08);
      --link-color:#E6EAEE;
      --link-color-hover:#48A9A6;
      --underline-color:#48A9A6;
      --drawer-bg:#0F1A22;
      --drawer-fg:#E6EAEE;
      --submenu-bg:#152330;
      --submenu-border:rgba(255,255,255,0.08);
      --submenu-hover:rgba(72,169,166,0.12);
      --featured-bg:rgba(72,169,166,0.1);
      --kbd-bg:rgba(255,255,255,0.06);
      --kbd-border:rgba(255,255,255,0.12);
      --kbd-fg:#A8B5C2;
    }
  }
  */

  *{box-sizing:border-box;}
  body{margin:0;background:var(--white);color:var(--charcoal);font-family:var(--font-sans);font-size:16px;line-height:1.55;-webkit-font-smoothing:antialiased;}
  h1,h2,h3,h4{color:var(--charcoal);font-weight:700;letter-spacing:-0.015em;line-height:1.15;margin:0;text-wrap:pretty;}
  p{margin:0;text-wrap:pretty;}
  a{color:var(--teal-dark);text-decoration:none;}
  a:hover{color:var(--teal-active);}
  :focus{outline:none;}
  :focus-visible{outline:3px solid var(--focus-ring);outline-offset:2px;border-radius:2px;}
  .wrap{max-width:var(--max);margin:0 auto;padding:0 var(--inset);}

  /* SKIP LINK */
  .skip-link{position:absolute;top:8px;left:8px;z-index:200;background:var(--teal-dark);color:#fff;padding:10px 16px;border-radius:var(--r-md);font-size:14px;font-weight:600;text-decoration:none;clip-path:inset(50%);clip:rect(0 0 0 0);overflow:hidden;width:1px;height:1px;}
  .skip-link:focus,.skip-link:focus-visible{clip-path:none;clip:auto;width:auto;height:auto;color:#fff;outline:3px solid #fff;outline-offset:2px;}

  /* ============ HEADER ============ */
  .site-header{position:fixed;top:0;left:0;right:0;z-index:60;background:transparent;border-bottom:1px solid transparent;transition:height .2s ease,background-color .2s ease,border-color .2s ease,box-shadow .2s ease;height:var(--h-tall);}
  .site-header.is-shrunk{height:var(--h-short);background:var(--header-bg-shrunk);backdrop-filter:blur(10px);border-bottom-color:var(--header-border);}
  .site-header:not(.is-shrunk){background:var(--header-bg);backdrop-filter:blur(8px);}
  .header-inner{height:100%;display:flex;align-items:center;justify-content:space-between;gap:24px;}

  .brand{display:inline-flex;align-items:center;gap:0;color:var(--link-color);text-decoration:none;}
  .brand-logo{height:24px;width:auto;display:block;}
  @media(max-width:760px){.brand-logo{height:22px;}}

  .nav-primary{display:flex;align-items:center;gap:4px;list-style:none;padding:0;margin:0;}
  .nav-item{position:relative;}
  .nav-link{display:inline-flex;align-items:center;gap:5px;padding:10px 14px;font-size:13.5px;font-weight:500;letter-spacing:-0.005em;color:var(--link-color);background:transparent;border:none;cursor:pointer;font-family:inherit;border-radius:var(--r);transition:color .15s ease;text-decoration:none;position:relative;}
  .nav-link:hover{color:var(--link-color-hover);}
  .nav-link .caret{width:10px;height:10px;transition:transform .18s ease;color:var(--gray-soft);}
  .nav-item:hover .nav-link .caret,.nav-item.is-open .nav-link .caret{transform:rotate(180deg);color:var(--link-color-hover);}

  /* center-out underline */
  .nav-link::after{content:"";position:absolute;left:10px;right:10px;bottom:6px;height:2px;background:var(--underline-color);transform:scaleX(0);transform-origin:center center;transition:transform .2s ease;border-radius:2px;}
  .nav-link:hover::after,.nav-item.is-open .nav-link::after{transform:scaleX(1);}
  .nav-item.is-active .nav-link{color:var(--link-color-hover);}
  .nav-item.is-active .nav-link::after{transform:scaleX(1);}

  /* connector strip below an open submenu trigger . catches cursor on the way down */
  .nav-item > .nav-link::before{content:"";position:absolute;left:0;right:0;top:100%;height:12px;background:transparent;display:none;}
  .nav-item:hover > .nav-link::before,.nav-item.is-open > .nav-link::before{display:block;}

  .nav-right{display:flex;align-items:center;gap:8px;}
  .icon-btn{width:36px;height:36px;display:inline-flex;align-items:center;justify-content:center;border-radius:var(--r);border:none;background:transparent;color:var(--gray);cursor:pointer;transition:color .15s ease,background-color .15s ease;}
  .icon-btn:hover{color:var(--link-color-hover);background:var(--submenu-hover);}
  .icon-btn svg{width:18px;height:18px;}
  .icon-btn .kbd{display:inline-flex;align-items:center;height:18px;padding:0 5px;border-radius:4px;background:var(--kbd-bg);border:1px solid var(--kbd-border);font-family:var(--font-mono);font-size:10px;color:var(--kbd-fg);margin-left:6px;letter-spacing:0;}
  .search-trigger{width:auto;padding:0 10px 0 8px;}
  .demo-btn{display:inline-flex;align-items:center;height:36px;padding:0 16px;background:var(--cta-bg);color:var(--cta-fg);border-radius:var(--r-md);font-size:14px;font-weight:500;letter-spacing:0;transition:background-color .15s ease;border:none;cursor:pointer;text-decoration:none;}
  .demo-btn:hover{background:var(--cta-bg-hover);color:var(--cta-fg);}

  .hamburger{display:none;}
  @media(max-width:760px){
    .nav-primary,.search-trigger{display:none;}
    .hamburger{display:inline-flex;}
    .demo-btn{height:34px;padding:0 12px;font-size:13px;}
  }

  /* ============ MEGA MENU ============ */
  .submenu{position:absolute;top:calc(100% + 6px);left:50%;transform:translate(-50%,-4px);background:var(--submenu-bg);border-radius:var(--r-lg);box-shadow:var(--shadow-lg);border:1px solid var(--submenu-border);padding:24px;opacity:0;pointer-events:none;transition:opacity .18s ease,transform .18s ease;z-index:5;}
  .nav-item.is-open > .submenu{opacity:1;transform:translate(-50%,0);pointer-events:auto;}
  .submenu.regular{padding:14px;min-width:280px;}
  .submenu.mega{width:920px;max-width:calc(100vw - 40px);}
  .submenu.mega.two{width:680px;}

  .mega-grid{display:grid;gap:32px;}
  .mega-grid.three{grid-template-columns:1fr 1fr 280px;}
  .mega-grid.two{grid-template-columns:1fr 1fr;}
  .mega-col-h{font-family:var(--font-mono);font-size:11px;letter-spacing:0.14em;text-transform:uppercase;color:var(--teal-dark);font-weight:600;margin:0 0 14px 0;padding-bottom:10px;border-bottom:1px solid var(--submenu-border);}

  .mega-list{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:2px;}
  .mega-link{display:block;padding:10px 12px;border-radius:var(--r);text-decoration:none;color:var(--link-color);transition:background-color .12s ease;}
  .mega-link:hover{background:var(--submenu-hover);}
  .mega-link strong{display:block;font-weight:600;font-size:14px;letter-spacing:-0.005em;color:var(--link-color);margin-bottom:2px;}
  .mega-link span{display:block;font-size:12.5px;color:var(--gray);line-height:1.45;}
  .ext-icon{display:inline-block;vertical-align:-2px;width:12px;height:12px;color:var(--gray-soft);margin-left:4px;}

  .featured-tile{background:var(--featured-bg);border-radius:var(--r-md);padding:16px;display:flex;flex-direction:column;gap:10px;text-decoration:none;color:var(--link-color);transition:transform .15s ease,box-shadow .15s ease;max-width:280px;}
  .featured-tile:hover{transform:translateY(-2px);box-shadow:var(--shadow-md);color:var(--link-color);}
  .featured-thumb{aspect-ratio:16/9;background:linear-gradient(135deg,#287A77 0%,#1F6663 100%);border-radius:var(--r);position:relative;overflow:hidden;display:flex;align-items:center;justify-content:center;}
  .featured-thumb::before{content:"";position:absolute;inset:0;background:repeating-linear-gradient(135deg,transparent 0 14px,rgba(255,255,255,0.05) 14px 15px);}
  .featured-thumb svg{width:36px;opacity:0.32;position:relative;z-index:1;}
  .featured-thumb .ph-cap{position:absolute;bottom:8px;left:0;right:0;text-align:center;font-family:var(--font-mono);font-size:10px;color:rgba(255,255,255,0.5);letter-spacing:0.04em;z-index:1;}
  .featured-tile h4{font-size:14px;font-weight:600;line-height:1.35;letter-spacing:-0.005em;margin:0;}
  .featured-tile p{font-size:12.5px;color:var(--gray);line-height:1.5;margin:0;}
  .featured-tile .arrow-cta{display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:600;color:var(--teal-dark);margin-top:auto;}

  .mega-utility{display:flex;justify-content:space-between;gap:12px;margin-top:20px;padding-top:18px;border-top:1px solid var(--submenu-border);}
  .mega-utility a{font-size:13px;font-weight:600;color:var(--teal-dark);display:inline-flex;align-items:center;gap:6px;}

  /* ============ MOBILE DRAWER ============ */
  .drawer-mask{position:fixed;inset:0;background:rgba(15,26,34,0.55);opacity:0;pointer-events:none;transition:opacity .25s ease;z-index:80;}
  .drawer-mask.is-open{opacity:1;pointer-events:auto;}
  .drawer{position:fixed;top:0;right:0;bottom:0;width:min(420px,92vw);background:var(--drawer-bg);color:var(--drawer-fg);z-index:90;display:flex;flex-direction:column;transform:translateX(100%);transition:transform .25s ease;}
  .drawer.is-open{transform:translateX(0);}
  .drawer-head{height:80px;display:flex;align-items:center;justify-content:space-between;padding:0 24px;border-bottom:1px solid var(--header-border);}
  .drawer-tools{display:flex;align-items:center;gap:8px;padding:12px 16px;border-bottom:1px solid var(--header-border);}
  .drawer-body{flex:1;overflow-y:auto;padding:16px 8px;}
  .drawer-link,.drawer-acc summary{display:flex;align-items:center;justify-content:space-between;height:56px;padding:0 16px;border-radius:var(--r);font-size:16px;font-weight:500;color:var(--drawer-fg);text-decoration:none;cursor:pointer;list-style:none;}
  .drawer-acc summary::-webkit-details-marker{display:none;}
  .drawer-link:hover,.drawer-acc summary:hover{background:var(--submenu-hover);color:var(--link-color-hover);}
  .drawer-acc summary .caret{width:14px;height:14px;color:var(--gray-soft);transition:transform .18s ease;}
  .drawer-acc[open] summary .caret{transform:rotate(180deg);}
  .drawer-acc-body{padding:4px 8px 12px 24px;display:flex;flex-direction:column;gap:0;}
  .drawer-acc-body a{display:block;padding:10px 12px;border-radius:var(--r);font-size:14.5px;font-weight:500;color:var(--gray);text-decoration:none;}
  .drawer-acc-body a:hover{background:var(--submenu-hover);color:var(--link-color-hover);}
  .drawer-foot{padding:20px 24px 28px;border-top:1px solid var(--header-border);}
  .drawer-foot .demo-btn{width:100%;height:48px;font-size:15px;justify-content:center;}

  /* ============ SEARCH OVERLAY ============ */
  .search-mask{position:fixed;inset:0;background:var(--overlay-scrim);opacity:0;pointer-events:none;transition:opacity .18s ease;z-index:100;display:flex;align-items:flex-start;justify-content:center;padding-top:14vh;}
  .search-mask.is-open{opacity:1;pointer-events:auto;}
  .search-modal{width:600px;max-width:calc(100vw - 32px);background:#fff;border-radius:var(--r-xl);box-shadow:var(--shadow-lg);overflow:hidden;transform:translateY(-8px);transition:transform .18s ease;}
  .search-mask.is-open .search-modal{transform:translateY(0);}
  .search-input-row{display:flex;align-items:center;gap:12px;padding:16px 20px;border-bottom:1px solid var(--border);}
  .search-input-row svg{width:18px;height:18px;color:var(--gray);flex-shrink:0;}
  .search-input{flex:1;border:none;outline:none;background:transparent;font-family:inherit;font-size:16px;color:var(--charcoal);padding:6px 0;}
  .search-input::placeholder{color:var(--gray-soft);}
  .esc-kbd{font-family:var(--font-mono);font-size:11px;color:var(--gray);padding:4px 8px;border:1px solid var(--border);border-radius:4px;letter-spacing:0;}
  .search-submit{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;border:none;background:#287A77;color:#fff;border-radius:8px;cursor:pointer;flex-shrink:0;transition:background-color .15s ease, transform .15s ease;}
  .search-submit:hover{background:#1F6663;transform:translateX(1px);}
  .search-submit:focus-visible{outline:3px solid #48A9A6;outline-offset:2px;}
  .search-submit svg{width:18px;height:18px;color:#fff;}
  form.search-input-row{margin:0;}
  /* Hide the static "Suggested" placeholder list once the user starts typing.
     The form-with-results variant takes over via .has-query class added by JS. */
  .search-modal.has-query .search-results .results-h::after{content:" \2014 press Enter to search";color:var(--gray);font-weight:400;text-transform:none;letter-spacing:0;}
  .search-results{max-height:60vh;overflow-y:auto;padding:8px;}
  .results-h{font-family:var(--font-mono);font-size:10.5px;letter-spacing:0.12em;text-transform:uppercase;color:var(--gray-soft);font-weight:600;padding:10px 12px 6px;}
  .result-row{display:flex;align-items:center;gap:14px;padding:12px 12px;border-radius:var(--r);text-decoration:none;color:var(--charcoal);}
  .result-row:hover,.result-row:focus-visible{background:var(--teal-soft);}
  .result-icon{width:32px;height:32px;border-radius:var(--r);background:var(--bg);display:flex;align-items:center;justify-content:center;color:var(--teal-dark);flex-shrink:0;}
  .result-icon svg{width:16px;height:16px;}
  .result-text{flex:1;min-width:0;}
  .result-title{font-size:14px;font-weight:600;color:var(--charcoal);margin:0;letter-spacing:-0.005em;}
  .result-path{font-family:var(--font-mono);font-size:11.5px;color:var(--gray);margin:2px 0 0 0;letter-spacing:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
  .result-pill{font-family:var(--font-mono);font-size:10px;font-weight:600;letter-spacing:0.06em;text-transform:uppercase;padding:3px 8px;border-radius:var(--r-pill);background:#fff;color:var(--gray);border:1px solid var(--border);flex-shrink:0;}

  /* ============ DEMO BODY ============ */
  main.demo-body{padding-top:calc(var(--h-tall) + 48px);padding-bottom:120px;}
  .demo-hero{padding:64px 0 80px;border-bottom:1px solid var(--border);}
  .demo-hero .eyebrow{font-size:12px;font-weight:600;letter-spacing:0.14em;text-transform:uppercase;color:var(--teal-dark);margin:0 0 18px 0;}
  .demo-hero h1{font-size:clamp(36px,5vw,56px);line-height:1.05;letter-spacing:-0.02em;margin:0 0 18px 0;max-width:18ch;}
  .demo-hero p{font-size:18px;color:var(--gray);max-width:60ch;margin:0;}
  .demo-section{padding:64px 0;}
  .demo-section + .demo-section{border-top:1px solid var(--border);}
  .demo-section h2{font-size:28px;letter-spacing:-0.015em;margin:0 0 18px 0;}
  .demo-section p{font-size:16.5px;color:var(--gray);max-width:62ch;line-height:1.7;margin:0 0 16px 0;}
  .scroll-marker{position:fixed;bottom:24px;right:24px;font-family:var(--font-mono);font-size:11px;color:var(--gray);background:#fff;border:1px solid var(--border);border-radius:var(--r-pill);padding:6px 12px;letter-spacing:0.04em;box-shadow:var(--shadow-md);z-index:50;}

  @media(prefers-reduced-motion:reduce){
    *,*::before,*::after{transition-duration:.001ms !important;animation-duration:.001ms !important;transition-delay:0ms !important;}
    .nav-link::after{transition:none !important;}
    .submenu,.drawer,.search-mask,.search-modal{transition:none !important;}
  }
/* Mobile (< 761px): keep all submenus hidden (drawer takes over). Make sure they're not visible accidentally. */
@media (max-width: 760px) {
  .submenu { display: none !important; }
}