/* ============================================================
   Mind Theory — CANONICAL PUBLIC SITE HEADER
   ============================================================

   WHY THIS FILE EXISTS
   --------------------
   Before this file, the public site had TWO unrelated header
   implementations:

     1. home.css  -> .mt-nav / .mt-logo / .mt-nav-links /
                     .mt-nav-mb (green pill) / .mt-nav-cart
        Used by: index.html, explore.html, quotes.html,
        resources.html, ebooks.html, about.html, and every PHP
        template (legal-page, category-page, contact, mind-builders).

     2. styles.css -> .site-nav / .brand / .nav-links / .nav-cta
        Used by: blog.html, quizzes.html ONLY.

   System 2 predates Mind Builders and the cart. It has no rule at
   all for the Mind Builders pill or the cart button, so when those
   two items were later added to blog.html/quizzes.html markup they
   fell back to unstyled inline-flex links: wrong brand text
   ("Real talk on the mind." instead of the real tagline), wrong
   logo size, wrong nav spacing, no green pill, no cart badge.
   That is the whole reason those two pages looked different -- not
   a per-page bug, a second header system.

   This file is now the single source of truth for the header. It is
   deliberately SELF-CONTAINED (literal values, no var() dependency)
   so it renders identically whether the page it is loaded on uses
   home.css's design tokens, styles.css's tokens, or neither.

   Load it AFTER any other stylesheet on the page. On pages that also
   load home.css it intentionally overrides home.css's older .mt-nav
   block; once every page is confirmed on this file, that block can be
   deleted from home.css.

   WHAT IT FIXES BEYOND UNIFYING THE TWO SYSTEMS
   ---------------------------------------------
   home.css set `.mt-nav-links { flex-wrap: wrap; gap: 34px; }`.
   At the 1240px container the row needs roughly:
     logo ~200px + gap 20px + 9 links ~626px + 10 gaps x 34px = 340px
     => ~1186px of content in ~1160px of usable width.
   It overflowed by a few pixels, so the LAST item -- the cart --
   wrapped onto a second line under the nav, which is exactly the
   reported symptom. Fixed here by never wrapping the row and letting
   the gap shrink responsively instead, down to the 960px breakpoint
   where the mobile drawer takes over anyway.
   ============================================================ */

/* ---------- shell ---------- */
.mt-nav{
  position:sticky; top:0; z-index:100;
  background:rgba(255,255,255,.86);
  -webkit-backdrop-filter:saturate(180%) blur(14px);
  backdrop-filter:saturate(180%) blur(14px);
  border-bottom:1px solid #E8EAF4;
  transition:box-shadow .25s cubic-bezier(.16,1,.3,1);
}
.mt-nav-inner{
  max-width:1240px; margin:0 auto;
  padding:14px clamp(22px, 3.4vw, 40px);
  display:flex; align-items:center; justify-content:space-between;
  gap:clamp(12px, 1.6vw, 20px);
}

/* ---------- brand ---------- */
.mt-logo{
  display:flex; align-items:center; gap:11px;
  flex-shrink:0; text-decoration:none; color:inherit;
  transition:opacity .2s ease;
}
.mt-logo:hover{ opacity:.82; }
.mt-logo img{
  width:36px; height:36px; flex-shrink:0; border-radius:50%; object-fit:cover;
  box-shadow:0 0 0 3px #fff, 0 2px 8px rgba(16,24,54,.12);
}
.mt-logo-text{ line-height:1.2; }
.mt-logo-text .mt-brand{
  display:block;
  font-family:'Fraunces', Georgia, serif; font-weight:700; font-size:1.2rem;
  color:#131B3B; letter-spacing:.2px; white-space:nowrap;
}
.mt-logo-text .mt-tagline{
  display:block;
  font-family:'Nunito','Segoe UI',sans-serif;
  font-size:.74rem; color:#6B7593; font-weight:600; white-space:nowrap;
}

/* ---------- links row ----------
   flex-wrap:nowrap is the actual wrap fix. The gap collapses with the
   viewport instead of pushing the cart onto a second line. min-width:0
   lets the row shrink inside the flex parent rather than overflowing. */
.mt-nav-links{
  display:flex; align-items:center;
  flex-wrap:nowrap;
  gap:clamp(14px, 1.9vw, 34px);
  min-width:0;
  list-style:none; margin:0; padding:0;
  font-family:'Nunito','Segoe UI',sans-serif;
}
.mt-nav-links a{
  font-size:.97rem; font-weight:700; color:#131B3B;
  padding:8px 1px; position:relative; white-space:nowrap;
  flex-shrink:0; text-decoration:none;
  transition:color .2s cubic-bezier(.16,1,.3,1);
}
.mt-nav-links a::after{
  content:''; position:absolute; left:0; right:100%; bottom:2px; height:2px;
  background:#0C4FC7; border-radius:2px;
  transition:right .25s cubic-bezier(.16,1,.3,1);
}
.mt-nav-links a:hover{ color:#0C4FC7; }
.mt-nav-links a:hover::after{ right:0; }
.mt-nav-links a.is-active{ color:#0C4FC7; }
.mt-nav-links a.is-active::after{ right:0; }

/* ---------- Mind Builders pill ----------
   The branded green pill, defined here so it looks the same on every
   page instead of only on the pages that happened to load home.css. */
.mt-nav-links a.mt-nav-mb{
  display:inline-flex; align-items:center; gap:6px;
  background:#1F9C79; color:#fff;
  padding:8px 16px 8px 14px;
  border-radius:999px; font-weight:800;
  white-space:nowrap; flex-shrink:0;
  transition:transform .2s cubic-bezier(.16,1,.3,1), box-shadow .2s cubic-bezier(.16,1,.3,1);
}
.mt-nav-links a.mt-nav-mb::after{ content:none; }
.mt-nav-links a.mt-nav-mb:hover{
  color:#fff; transform:translateY(-2px);
  box-shadow:0 2px 6px rgba(16,24,54,.05), 0 12px 26px -10px rgba(16,24,54,.16);
}
.mt-nav-links a.mt-nav-mb.is-active{ color:#fff; }
.mt-nav-links a.mt-nav-mb svg{ flex-shrink:0; }

/* ---------- cart ---------- */
.mt-nav-links a.mt-nav-cart{
  position:relative;
  display:inline-flex; align-items:center; justify-content:center;
  padding:6px; color:#131B3B; flex-shrink:0;
}
.mt-nav-links a.mt-nav-cart::after{ content:none; }
.mt-nav-links a.mt-nav-cart:hover{ color:#0C4FC7; }
.mt-nav-cart-badge{
  position:absolute; top:-2px; right:-4px;
  min-width:16px; height:16px; padding:0 4px;
  background:#FD236A; color:#fff; border-radius:999px;
  font-size:.64rem; font-weight:800; line-height:16px; text-align:center;
}

/* ---------- optional nav search slot ----------
   Only quizzes.html has ever had a nav search box. It is kept -- and
   kept working (its JS is null-guarded and still bound) -- rather than
   dropped in the name of uniformity, but it now lives as a defined,
   optional slot inside the canonical header instead of being part of a
   second header implementation. Hidden below 1100px so it can never be
   the thing that pushes the nav row out of space; the page's category
   filters remain fully usable without it. */
.mt-nav-search{ position:relative; flex-shrink:0; display:flex; align-items:center; }
.mt-nav-search input{
  width:170px; padding:8px 34px 8px 14px;
  border:1.5px solid #DEE2F0; border-radius:999px;
  background:#fff; font-family:'Nunito','Segoe UI',sans-serif;
  font-size:.82rem; font-weight:600; color:#131B3B;
  transition:border-color .2s ease, box-shadow .2s ease;
}
.mt-nav-search input::placeholder{ color:#8A93AB; }
.mt-nav-search input:focus{
  outline:none; border-color:#0C4FC7; box-shadow:0 0 0 4px rgba(12,79,199,.1);
}
.mt-nav-search svg{
  position:absolute; right:12px; top:50%; transform:translateY(-50%);
  color:#6B748F; pointer-events:none;
}
@media (max-width:1100px){ .mt-nav-search{ display:none; } }

/* ---------- mobile toggle ---------- */
.mt-nav-toggle{
  display:none; background:none; border:0; cursor:pointer; padding:8px;
}
.mt-nav-toggle span{
  display:block; width:24px; height:2px; background:#131B3B;
  margin:5px 0; border-radius:2px;
  transition:transform .25s cubic-bezier(.16,1,.3,1), opacity .2s ease;
}
.mt-nav-toggle:hover span{ background:#0C4FC7; }

/* ---------- mobile ----------
   Below 960px the row becomes a drawer, so nowrap no longer applies
   and the items stack normally -- same breakpoint home.css already
   used, so mobile behaviour is unchanged for pages already on it. */
@media (max-width:960px){
  .mt-nav-links{
    position:absolute; top:100%; left:0; right:0;
    background:#fff;
    flex-direction:column; flex-wrap:wrap; align-items:flex-start;
    padding:18px 24px 26px;
    border-bottom:1px solid #E8EAF4;
    display:none; gap:16px;
    box-shadow:0 6px 14px -6px rgba(14,22,54,.12), 0 26px 48px -20px rgba(14,22,54,.24);
  }
  .mt-nav-links.is-open{ display:flex; }
  .mt-nav-toggle{ display:block; }
  .mt-nav{ position:sticky; }
}

/* Very small screens: keep the brand from crowding the toggle. */
@media (max-width:380px){
  .mt-logo img{ width:32px; height:32px; }
  .mt-logo-text .mt-brand{ font-size:1.06rem; }
  .mt-logo-text .mt-tagline{ display:none; }
}

@media (prefers-reduced-motion: reduce){
  .mt-nav, .mt-nav-links a, .mt-nav-links a.mt-nav-mb, .mt-nav-toggle span{
    transition:none;
  }
}