/*
 * viewport-scale.css
 * ==================
 * Reads the --vp-scale variable set by viewport-scale.js and applies
 * proportional sizing to the navigation bar and surrounding layout so
 * everything stays on-screen from 1024px wide up to 4K.
 *
 * Rule of thumb: any property that uses a fixed px / rem value in the
 * nav gets multiplied by calc(var(--vp-scale, 1) * <original>).
 *
 * We rely on clamp() so values never collapse below a usable floor.
 * Mobile (≤900px) is handled by mobile-adaptive.css — this file only
 * activates on desktop (>900px).
 */

/* ── Default: scale variable defaults to 1 if JS hasn't run yet ── */
:root {
  --vp-scale: 1;
}

/* ================================================================
   NAV — proportional scaling on desktop
   ================================================================ */
@media (min-width: 901px) {

  nav {
    /* Padding shrinks with the viewport */
    padding-top:    calc(var(--vp-scale) * 0.85rem) !important;
    padding-bottom: calc(var(--vp-scale) * 0.85rem) !important;
    padding-left:   clamp(0.6rem, calc(var(--vp-scale) * 3rem), 3rem) !important;
    padding-right:  clamp(0.6rem, calc(var(--vp-scale) * 3rem), 3rem) !important;
    gap:            clamp(0.4rem, calc(var(--vp-scale) * 1.5rem), 1.5rem) !important;
    /* Prevent nav from overflowing */
    flex-wrap: nowrap !important;
    overflow: visible !important;
  }

  /* Logo */
  nav .logo,
  .logo {
    font-size: clamp(0.72rem, calc(var(--vp-scale) * 1.3rem), 1.3rem) !important;
    letter-spacing: clamp(1px, calc(var(--vp-scale) * 3px), 3px) !important;
  }

  .logo-tag,
  nav .logo-tag,
  .logo-sub {
    font-size: clamp(0.52rem, calc(var(--vp-scale) * 0.72rem), 0.72rem) !important;
  }

  /* Nav links list */
  nav .nav-links {
    gap: clamp(0.5rem, calc(var(--vp-scale) * 2.5rem), 2.5rem) !important;
    flex-wrap: nowrap !important;
    /* Ensure links can shrink */
    min-width: 0 !important;
    flex-shrink: 1 !important;
  }

  nav .nav-links a {
    font-size: clamp(0.52rem, calc(var(--vp-scale) * 0.72rem), 0.72rem) !important;
    letter-spacing: clamp(0.8px, calc(var(--vp-scale) * 2px), 2px) !important;
    white-space: nowrap !important;
  }

  /* Affiliate button — keep it visible */
  nav .nav-links a.affiliate-glow-link .affiliate-btn {
    font-size: clamp(0.52rem, calc(var(--vp-scale) * 0.72rem), 0.72rem) !important;
  }

  /* CTA button */
  nav .nav-cta {
    font-size: clamp(0.52rem, calc(var(--vp-scale) * 0.70rem), 0.70rem) !important;
    padding: clamp(0.3rem, calc(var(--vp-scale) * 0.5rem), 0.5rem)
             clamp(0.5rem, calc(var(--vp-scale) * 1.4rem), 1.4rem) !important;
    letter-spacing: clamp(0.8px, calc(var(--vp-scale) * 2px), 2px) !important;
    white-space: nowrap !important;
    flex-shrink: 0 !important;
  }

  /* Search bar */
  .nav-search {
    width: clamp(160px, calc(var(--vp-scale) * 360px), 360px) !important;
  }

  .nav-search-input {
    font-size: clamp(0.56rem, calc(var(--vp-scale) * 0.72rem), 0.72rem) !important;
    padding: clamp(0.4rem, calc(var(--vp-scale) * 0.72rem), 0.72rem)
             clamp(0.4rem, calc(var(--vp-scale) * 0.95rem), 0.95rem) !important;
  }

  .nav-search-btn {
    font-size: clamp(0.52rem, calc(var(--vp-scale) * 0.68rem), 0.68rem) !important;
    padding: clamp(0.4rem, calc(var(--vp-scale) * 0.72rem), 0.72rem)
             clamp(0.5rem, calc(var(--vp-scale) * 1rem), 1rem) !important;
    white-space: nowrap !important;
  }

  /* Cart icon */
  #cart-icon-wrap,
  nav .nav-cart-link {
    flex-shrink: 0 !important;
  }

  /* Dropdown */
  .dropdown-menu {
    min-width: clamp(140px, calc(var(--vp-scale) * 200px), 200px) !important;
  }

  .dropdown-menu a,
  .dropdown-menu .dropdown-item-btn {
    font-size: clamp(0.52rem, calc(var(--vp-scale) * 0.68rem), 0.68rem) !important;
    padding: clamp(0.4rem, calc(var(--vp-scale) * 0.75rem), 0.75rem)
             clamp(0.6rem, calc(var(--vp-scale) * 1.2rem), 1.2rem) !important;
    letter-spacing: clamp(0.8px, calc(var(--vp-scale) * 2px), 2px) !important;
  }

  /* Hero promo sidebar width adapts */
  .hero-shell {
    width:     clamp(240px, calc(var(--vp-scale) * 430px), 430px) !important;
    max-width: clamp(240px, calc(var(--vp-scale) * 430px), 430px) !important;
    min-width: clamp(200px, calc(var(--vp-scale) * 360px), 360px) !important;
  }

  body:not(.promo-panel-collapsed) {
    padding-left: clamp(240px, calc(var(--vp-scale) * 430px), 430px) !important;
  }

  /* Promo toggle tab */
  .promo-panel-toggle {
    right: clamp(-110px, calc(var(--vp-scale) * -138px), -82px) !important;
    width: clamp(82px,  calc(var(--vp-scale) * 138px), 138px) !important;
    font-size: clamp(0.52rem, calc(var(--vp-scale) * 0.72rem), 0.72rem) !important;
  }

  /* Hero slideshow width follows scale */
  .hero-slideshow {
    width: clamp(600px, calc(100vw - clamp(240px, calc(var(--vp-scale) * 500px), 640px)), 100%) !important;
  }
}

/* ================================================================
   MEDIUM DESKTOP — 1200px–1500px: tighter gaps, smaller fonts
   ================================================================ */
@media (min-width: 901px) and (max-width: 1500px) {

  /* Ensure the nav-links don't wrap and push items off-screen */
  nav .nav-links {
    flex-wrap: wrap !important;   /* allow one extra row if needed */
    gap: 0.4rem 0.75rem !important;
  }

  nav .nav-links a {
    font-size: clamp(0.5rem, 0.9vw, 0.68rem) !important;
    letter-spacing: 1px !important;
  }

  nav .nav-cta {
    font-size: clamp(0.5rem, 0.85vw, 0.65rem) !important;
    padding: 0.38rem 0.8rem !important;
  }

  .nav-search {
    width: clamp(140px, 18vw, 320px) !important;
  }
}

/* ================================================================
   SMALL DESKTOP — 1024px–1200px
   ================================================================ */
@media (min-width: 901px) and (max-width: 1200px) {

  nav {
    padding-left:  0.75rem !important;
    padding-right: 0.75rem !important;
    gap: 0.5rem !important;
  }

  nav .logo {
    font-size: 0.82rem !important;
    letter-spacing: 1.5px !important;
  }

  .logo-tag { display: none !important; }

  nav .nav-links {
    gap: 0.3rem 0.55rem !important;
  }

  nav .nav-links a {
    font-size: 0.52rem !important;
    letter-spacing: 0.7px !important;
    padding: 0.24rem 0.36rem !important;
  }

  nav .nav-cta {
    font-size: 0.5rem !important;
    padding: 0.36rem 0.62rem !important;
  }

  .nav-search {
    width: clamp(110px, 14vw, 240px) !important;
  }

  .nav-search-input {
    font-size: 0.58rem !important;
    padding: 0.5rem 0.62rem !important;
  }

  .nav-search-btn {
    font-size: 0.5rem !important;
    padding: 0.5rem 0.62rem !important;
  }
}

/* ================================================================
   PREVENT NAV OVERFLOW — always keep items in view on desktop
   ================================================================ */
@media (min-width: 901px) {
  /* Hard rule: nav must never exceed the viewport */
  nav {
    max-width: 100vw !important;
    box-sizing: border-box !important;
  }

  nav .nav-links,
  nav ul {
    min-width: 0 !important;
    overflow: visible !important;
  }

  /* Items that must not clip */
  nav .nav-links li,
  nav .nav-links > div,
  nav .nav-links > a {
    flex-shrink: 1 !important;
    min-width: 0 !important;
  }

  /* Affiliate link — always show fully */
  .affiliate-btn {
    white-space: nowrap !important;
    overflow: visible !important;
  }
}

/* ================================================================
   PACK CARDS — fix broken layout at 1920px and below
   The card uses grid-template-columns: 124px minmax(0,1fr)
   At narrower viewports the 124px thumb leaves no room for text.
   ================================================================ */
@media (min-width: 901px) {

  /* Make the thumb shrink proportionally with the viewport */
  .homepage-pack-card {
    grid-template-columns:
      clamp(72px, calc(var(--vp-scale) * 124px), 124px)
      minmax(0, 1fr) !important;
    gap: clamp(0.5rem, calc(var(--vp-scale) * 1rem), 1rem) !important;
    padding: clamp(0.65rem, calc(var(--vp-scale) * 1.05rem), 1.05rem) !important;
    min-height: clamp(140px, calc(var(--vp-scale) * 196px), 196px) !important;
  }

  .homepage-pack-thumb {
    width:  clamp(72px, calc(var(--vp-scale) * 124px), 124px) !important;
    height: clamp(72px, calc(var(--vp-scale) * 124px), 124px) !important;
  }

  .homepage-pack-name {
    font-size: clamp(0.72rem, calc(var(--vp-scale) * 1.18rem), 1.18rem) !important;
    /* Allow wrapping so names don't get clipped */
    white-space: normal !important;
    word-break: break-word !important;
    overflow-wrap: anywhere !important;
    overflow: visible !important;
    text-overflow: unset !important;
  }

  .homepage-pack-meta {
    font-size: clamp(0.6rem, calc(var(--vp-scale) * 0.78rem), 0.78rem) !important;
  }

  .homepage-pack-new {
    font-size: clamp(0.9rem, calc(var(--vp-scale) * 1.34rem), 1.34rem) !important;
  }

  .homepage-pack-old,
  .homepage-pack-save,
  .homepage-pack-cta {
    font-size: clamp(0.6rem, calc(var(--vp-scale) * 0.78rem), 0.78rem) !important;
  }

  .homepage-pack-desc {
    font-size: clamp(0.72rem, calc(var(--vp-scale) * 0.88rem), 0.88rem) !important;
  }

  /* Strip container width adjusts to available space */
  .homepage-pack-strip {
    width: min(
      1620px,
      calc(100vw - clamp(260px, calc(var(--vp-scale) * 460px), 460px))
    ) !important;
  }

  /* Grid: show fewer columns when space is tight */
  .homepage-pack-strip-grid {
    grid-template-columns: repeat(
      auto-fit,
      minmax(clamp(200px, calc(var(--vp-scale) * 280px), 320px), 1fr)
    ) !important;
    gap: clamp(0.6rem, calc(var(--vp-scale) * 1.35rem), 1.35rem) !important;
  }

  /* Arrow buttons scale down too */
  .homepage-pack-arrow {
    width:  clamp(36px, calc(var(--vp-scale) * 58px), 58px) !important;
    height: clamp(36px, calc(var(--vp-scale) * 58px), 58px) !important;
    font-size: clamp(1rem, calc(var(--vp-scale) * 1.8rem), 1.8rem) !important;
  }

  .homepage-pack-strip-stage {
    grid-template-columns:
      clamp(36px, calc(var(--vp-scale) * 58px), 58px)
      minmax(0, 1fr)
      clamp(36px, calc(var(--vp-scale) * 58px), 58px) !important;
    gap: clamp(0.4rem, calc(var(--vp-scale) * 1rem), 1rem) !important;
  }

  /* Pack strip heading text */
  .homepage-pack-strip-title {
    font-size: clamp(1rem, calc(var(--vp-scale) * 1.72rem), 1.72rem) !important;
  }

  .homepage-pack-strip-kicker {
    font-size: clamp(0.58rem, calc(var(--vp-scale) * 0.78rem), 0.78rem) !important;
  }

  /* ── Hero slideshow ── */
  .hero-slideshow {
    min-height: clamp(300px, calc(var(--vp-scale) * 560px), 560px) !important;
  }

  .hero-slide-main {
    min-height: clamp(260px, calc(var(--vp-scale) * 520px), 520px) !important;
  }

  .hero-slide-side {
    min-height: clamp(120px, calc(var(--vp-scale) * 255px), 255px) !important;
  }

  .hero-slide-title {
    font-size: clamp(1.2rem, calc(var(--vp-scale) * 2.4rem), 2.8rem) !important;
  }

  .hero-slide-side .hero-slide-title {
    font-size: clamp(0.85rem, calc(var(--vp-scale) * 1.4rem), 1.6rem) !important;
  }

  .hero-slide-copy {
    font-size: clamp(0.78rem, calc(var(--vp-scale) * 1rem), 1rem) !important;
  }

  .hero-slide-content {
    padding: clamp(0.7rem, calc(var(--vp-scale) * 1.3rem), 1.3rem) !important;
  }

  /* ── Left promo sidebar items ── */
  .hero-promo-name {
    font-size: clamp(0.8rem, calc(var(--vp-scale) * 1.18rem), 1.18rem) !important;
  }

  .hero-promo-new {
    font-size: clamp(0.85rem, calc(var(--vp-scale) * 1.36rem), 1.36rem) !important;
  }

  .hero-promo-meta {
    font-size: clamp(0.7rem, calc(var(--vp-scale) * 0.92rem), 0.92rem) !important;
  }
}

/* ================================================================
   NAV RIGHT SIDE — cart + auth block always visible
   The auth wrap (#auth-nav-wrap) is injected by auth.js with inline
   styles. We override with !important to beat those inline values.
   ================================================================ */
@media (min-width: 901px) {

  /* Nav must never overflow — hard constraint */
  nav {
    flex-wrap: nowrap !important;
    overflow: visible !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  /* Nav links shrink first so the right-side items stay visible */
  nav .nav-links {
    flex-shrink: 1 !important;
    flex-grow: 0 !important;
    min-width: 0 !important;
    overflow: visible !important;
  }

  /* Cart icon — fixed size, never pushed off */
  #cart-icon-wrap,
  nav .nav-cart-link {
    flex-shrink: 0 !important;
    flex-grow: 0 !important;
    width:  clamp(30px, calc(var(--vp-scale) * 44px), 44px) !important;
    height: clamp(30px, calc(var(--vp-scale) * 44px), 44px) !important;
    min-width: clamp(30px, calc(var(--vp-scale) * 44px), 44px) !important;
    font-size: clamp(0.9rem, calc(var(--vp-scale) * 1.2rem), 1.2rem) !important;
    margin-left: clamp(0.25rem, calc(var(--vp-scale) * 0.5rem), 0.5rem) !important;
    margin-right: 0 !important;
    padding: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    position: relative !important;
  }

  /* Enter Stash / Login button */
  nav .nav-cta {
    flex-shrink: 0 !important;
    flex-grow: 0 !important;
    white-space: nowrap !important;
    margin-left: clamp(0.25rem, calc(var(--vp-scale) * 0.75rem), 0.75rem) !important;
    margin-right: 0 !important;
    font-size: clamp(0.48rem, calc(var(--vp-scale) * 0.70rem), 0.70rem) !important;
    padding:
      clamp(0.28rem, calc(var(--vp-scale) * 0.5rem), 0.5rem)
      clamp(0.5rem,  calc(var(--vp-scale) * 1.4rem), 1.4rem) !important;
    letter-spacing: clamp(0.6px, calc(var(--vp-scale) * 2px), 2px) !important;
  }

  /* ── Auth wrap (injected by auth.js when logged in) ── */
  #auth-nav-wrap {
    display: inline-flex !important;
    align-items: center !important;
    gap: clamp(0.3rem, calc(var(--vp-scale) * 0.7rem), 0.7rem) !important;
    flex-shrink: 0 !important;
    flex-grow: 0 !important;
    min-width: 0 !important;
    max-width: clamp(180px, calc(var(--vp-scale) * 320px), 320px) !important;
    margin-left: clamp(0.25rem, calc(var(--vp-scale) * 0.5rem), 0.5rem) !important;
  }

  /* Identity block (username + HS keys) */
  #auth-nav-wrap > div:first-child {
    min-width: 0 !important;
    max-width: clamp(100px, calc(var(--vp-scale) * 200px), 200px) !important;
    padding:
      clamp(0.28rem, calc(var(--vp-scale) * 0.45rem), 0.45rem)
      clamp(0.4rem,  calc(var(--vp-scale) * 0.70rem), 0.70rem) !important;
    font-size: clamp(0.54rem, calc(var(--vp-scale) * 0.74rem), 0.74rem) !important;
    overflow: hidden !important;
  }

  /* Profile link inside auth wrap */
  #auth-nav-wrap a[href="profile.html"]:first-of-type,
  #auth-nav-wrap .profile-link {
    font-size: clamp(0.54rem, calc(var(--vp-scale) * 0.74rem), 0.74rem) !important;
    max-width: clamp(80px, calc(var(--vp-scale) * 160px), 160px) !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  /* HS Keys text */
  #auth-nav-wrap span,
  #auth-nav-wrap .hs-balance {
    font-size: clamp(0.48rem, calc(var(--vp-scale) * 0.65rem), 0.65rem) !important;
  }

  /* Logout button */
  #auth-nav-wrap button {
    flex-shrink: 0 !important;
    white-space: nowrap !important;
    font-size: clamp(0.48rem, calc(var(--vp-scale) * 0.62rem), 0.62rem) !important;
    padding:
      clamp(0.3rem,  calc(var(--vp-scale) * 0.52rem), 0.52rem)
      clamp(0.4rem,  calc(var(--vp-scale) * 0.85rem), 0.85rem) !important;
    letter-spacing: clamp(0.8px, calc(var(--vp-scale) * 1.6px), 1.6px) !important;
  }

  /* Nav user state pill (shown before login on some pages) */
  .nav-user-state {
    flex-shrink: 0 !important;
    white-space: nowrap !important;
    font-size: clamp(0.48rem, calc(var(--vp-scale) * 0.62rem), 0.62rem) !important;
    padding:
      clamp(0.25rem, calc(var(--vp-scale) * 0.42rem), 0.42rem)
      clamp(0.4rem,  calc(var(--vp-scale) * 0.72rem), 0.72rem) !important;
    margin-right: clamp(0.2rem, calc(var(--vp-scale) * 0.7rem), 0.7rem) !important;
  }
}

/* ── 1500px and below: tighter right side ── */
@media (min-width: 901px) and (max-width: 1500px) {
  #auth-nav-wrap {
    max-width: clamp(160px, 20vw, 260px) !important;
  }

  #auth-nav-wrap > div:first-child {
    max-width: clamp(90px, 13vw, 170px) !important;
  }

  #auth-nav-wrap button {
    padding: 0.3rem 0.5rem !important;
    font-size: 0.54rem !important;
  }
}

/* ── 1200px and below: compact everything ── */
@media (min-width: 901px) and (max-width: 1200px) {
  #auth-nav-wrap {
    gap: 0.25rem !important;
    max-width: clamp(130px, 16vw, 200px) !important;
  }

  #auth-nav-wrap > div:first-child {
    max-width: clamp(80px, 11vw, 140px) !important;
    padding: 0.26rem 0.42rem !important;
  }

  #auth-nav-wrap button {
    padding: 0.26rem 0.38rem !important;
    font-size: 0.5rem !important;
    letter-spacing: 0.8px !important;
  }

  #cart-icon-wrap,
  nav .nav-cart-link {
    width: 30px !important;
    height: 30px !important;
    min-width: 30px !important;
  }
}