/* TypeFlow v6.6.14 — Header responsive rebuild
   Goals:
   - 100% zoom must not squeeze nav when an account is logged in.
   - 1366px / laptop widths use a real menu instead of overlapping links.
   - Header width is independent from the narrower typing content canvas.
*/

/* ==========================================================
   WIDE DESKTOP — full one-line navigation
   ========================================================== */
@media (min-width:1400px){
  body:not(.admin-mode) .site-header{
    height:70px !important;
    padding:7px 12px 0 !important;
  }

  body:not(.admin-mode) .header-inner{
    width:calc(100% - 20px) !important;
    max-width:1380px !important;
    height:55px !important;
    padding:0 13px !important;
    display:grid !important;
    grid-template-columns:160px minmax(0,1fr) auto !important;
    align-items:center !important;
    gap:10px !important;
    border-radius:14px !important;
  }

  body:not(.admin-mode) .brand{
    min-width:0 !important;
    gap:8px !important;
    font-size:17px !important;
  }

  body:not(.admin-mode) .brand strong{
    white-space:nowrap !important;
  }

  body:not(.admin-mode) .brand-symbol{
    width:29px !important;
    height:29px !important;
    flex:0 0 29px !important;
  }

  body:not(.admin-mode) .mobile-menu{
    display:none !important;
  }

  body:not(.admin-mode) .main-nav{
    display:flex !important;
    min-width:0 !important;
    height:100% !important;
    align-items:center !important;
    justify-content:center !important;
    gap:11px !important;
    overflow:visible !important;
  }

  body:not(.admin-mode) .main-nav a{
    min-width:0 !important;
    height:100% !important;
    padding:0 !important;
    font-size:11.2px !important;
    font-weight:720 !important;
    white-space:nowrap !important;
  }

  body:not(.admin-mode) .header-actions{
    display:flex !important;
    align-items:center !important;
    justify-content:flex-end !important;
    gap:6px !important;
    min-width:max-content !important;
  }

  body:not(.admin-mode) .theme-quick-toggle{
    width:62px !important;
    height:34px !important;
    transform:none !important;
    border-radius:10px !important;
  }

  body:not(.admin-mode) .theme-quick-toggle .theme-switch-dot{
    top:4px !important;
    left:4px !important;
    width:26px !important;
    height:26px !important;
    border-radius:8px !important;
  }

  body:not(.admin-mode) .theme-quick-toggle .theme-sun,
  body:not(.admin-mode) .theme-quick-toggle .theme-moon{
    width:30px !important;
    height:34px !important;
    font-size:10px !important;
  }

  html[data-theme="dark"] body:not(.admin-mode) .theme-quick-toggle .theme-switch-dot{
    transform:translateX(28px) !important;
  }

  body:not(.admin-mode) .language-picker{
    height:34px !important;
    padding:0 5px !important;
    gap:3px !important;
    font-size:10.5px !important;
    white-space:nowrap !important;
  }

  body:not(.admin-mode) .language-picker select{
    font-size:10.5px !important;
  }

  body:not(.admin-mode) .account-trigger{
    height:36px !important;
    max-width:122px !important;
    padding:3px 7px 3px 4px !important;
    gap:6px !important;
    border-radius:10px !important;
  }

  body:not(.admin-mode) .account-avatar{
    width:28px !important;
    height:28px !important;
    flex:0 0 28px !important;
    border-radius:8px !important;
    font-size:11px !important;
  }

  body:not(.admin-mode) .account-trigger-copy strong{
    max-width:60px !important;
    font-size:10.7px !important;
  }

  body:not(.admin-mode) .account-trigger-copy small{
    display:none !important;
  }

  body:not(.admin-mode) .account-chevron{
    display:none !important;
  }
}

/* Extra breathing room on genuinely large desktop screens. */
@media (min-width:1600px){
  body:not(.admin-mode) .header-inner{
    max-width:1460px !important;
    grid-template-columns:175px minmax(0,1fr) auto !important;
    padding-inline:16px !important;
    gap:14px !important;
  }

  body:not(.admin-mode) .main-nav{
    gap:15px !important;
  }

  body:not(.admin-mode) .main-nav a{
    font-size:11.8px !important;
  }

  body:not(.admin-mode) .account-trigger{
    max-width:142px !important;
  }

  body:not(.admin-mode) .account-trigger-copy strong{
    max-width:77px !important;
  }
}

/* ==========================================================
   LAPTOP / SMALL DESKTOP — proper hamburger navigation
   1366px laptops land here at browser zoom 100%.
   ========================================================== */
@media (min-width:981px) and (max-width:1399px){
  body:not(.admin-mode) .site-header{
    height:66px !important;
    padding:6px 12px 0 !important;
    overflow:visible !important;
  }

  body:not(.admin-mode) .header-inner{
    position:relative !important;
    width:100% !important;
    max-width:1180px !important;
    height:54px !important;
    padding:0 10px 0 12px !important;
    display:grid !important;
    grid-template-columns:minmax(150px,1fr) 38px auto !important;
    align-items:center !important;
    gap:7px !important;
    border-radius:13px !important;
    overflow:visible !important;
  }

  body:not(.admin-mode) .brand{
    min-width:0 !important;
    gap:8px !important;
    font-size:16.5px !important;
  }

  body:not(.admin-mode) .brand-symbol{
    width:28px !important;
    height:28px !important;
    flex:0 0 28px !important;
  }

  body:not(.admin-mode) .mobile-menu{
    display:grid !important;
    position:static !important;
    grid-column:2 !important;
    width:36px !important;
    height:36px !important;
    border-radius:9px !important;
    font-size:15px !important;
    z-index:82 !important;
  }

  body:not(.admin-mode) .main-nav{
    display:none !important;
    position:absolute !important;
    z-index:81 !important;
    top:61px !important;
    left:0 !important;
    right:0 !important;
    height:auto !important;
    padding:9px !important;
    border:1px solid var(--line) !important;
    border-radius:13px !important;
    background:color-mix(in srgb,var(--surface) 98%,transparent) !important;
    box-shadow:0 18px 45px rgba(8,10,24,.24) !important;
    backdrop-filter:blur(20px) !important;
    grid-template-columns:repeat(3,minmax(0,1fr)) !important;
    align-items:stretch !important;
    gap:5px !important;
    overflow:visible !important;
  }

  body:not(.admin-mode) .main-nav.open{
    display:grid !important;
  }

  body:not(.admin-mode) .main-nav a{
    width:100% !important;
    min-width:0 !important;
    height:39px !important;
    padding:0 11px !important;
    display:flex !important;
    align-items:center !important;
    justify-content:flex-start !important;
    border-radius:8px !important;
    font-size:11px !important;
    font-weight:720 !important;
    white-space:nowrap !important;
  }

  body:not(.admin-mode) .main-nav a:hover,
  body:not(.admin-mode) .main-nav a.active{
    background:var(--primary-soft) !important;
    color:var(--primary) !important;
  }

  body:not(.admin-mode) .main-nav a.active::after{
    display:none !important;
  }

  body:not(.admin-mode) .header-actions{
    grid-column:3 !important;
    display:flex !important;
    align-items:center !important;
    justify-content:flex-end !important;
    gap:5px !important;
    min-width:max-content !important;
  }

  body:not(.admin-mode) .theme-quick-toggle{
    width:58px !important;
    height:34px !important;
    transform:none !important;
    border-radius:9px !important;
  }

  body:not(.admin-mode) .theme-quick-toggle .theme-switch-dot{
    width:26px !important;
    height:26px !important;
    top:4px !important;
    left:4px !important;
    border-radius:8px !important;
  }

  body:not(.admin-mode) .theme-quick-toggle .theme-sun,
  body:not(.admin-mode) .theme-quick-toggle .theme-moon{
    width:28px !important;
    height:34px !important;
    font-size:9px !important;
  }

  html[data-theme="dark"] body:not(.admin-mode) .theme-quick-toggle .theme-switch-dot{
    transform:translateX(24px) !important;
  }

  body:not(.admin-mode) .language-picker{
    height:34px !important;
    padding:0 4px !important;
    gap:2px !important;
    font-size:10px !important;
    white-space:nowrap !important;
  }

  body:not(.admin-mode) .language-picker select{
    font-size:10px !important;
    max-width:42px !important;
  }

  /* Account stays available, but only the avatar is needed at laptop width. */
  body:not(.admin-mode) .account-trigger{
    width:36px !important;
    min-width:36px !important;
    max-width:36px !important;
    height:36px !important;
    padding:3px !important;
    gap:0 !important;
    border-radius:9px !important;
  }

  body:not(.admin-mode) .account-avatar{
    width:28px !important;
    height:28px !important;
    flex:0 0 28px !important;
    border-radius:8px !important;
  }

  body:not(.admin-mode) .account-trigger-copy,
  body:not(.admin-mode) .account-chevron{
    display:none !important;
  }

  body:not(.admin-mode) .user-menu{
    position:relative !important;
  }

  body:not(.admin-mode) .account-dropdown{
    right:0 !important;
    left:auto !important;
    width:min(318px,calc(100vw - 24px)) !important;
    max-width:calc(100vw - 24px) !important;
  }
}

/* ==========================================================
   VERY NARROW LAPTOP / TABLET-LANDSCAPE
   Keep actions usable without crushing the brand.
   ========================================================== */
@media (min-width:981px) and (max-width:1120px){
  body:not(.admin-mode) .header-inner{
    grid-template-columns:minmax(135px,1fr) 36px auto !important;
    gap:5px !important;
  }

  body:not(.admin-mode) .theme-quick-toggle{
    display:none !important;
  }

  body:not(.admin-mode) .language-picker{
    padding-inline:2px !important;
  }
}

/* ==========================================================
   MOBILE SAFETY
   ========================================================== */
@media (max-width:980px){
  body:not(.admin-mode) .account-dropdown{
    width:min(318px,calc(100vw - 20px)) !important;
    max-width:calc(100vw - 20px) !important;
  }
}