/* ============================================================
   Angry Mummy — SHARED NAVIGATION (nav.css)
   Self-contained: does NOT depend on per-page CSS variables.
   Colours are hardcoded to the canonical brand values so the
   nav looks identical on every page (light or dark).
   Loaded by every page; HTML is injected by nav.js.
   One consistent light theme on every page (no dark variant).
   ============================================================ */

/* ---- Canonical colours (scoped, self-contained) ---- */
:root{
  --amnav-rose:#FF2E7E;
  --amnav-ink:#3C2330;
  --amnav-paper:#FFF4EC;
  --amnav-lilac:#7B5EA7;
  --amnav-line:#F0E1E7;
}

/* ---- Sticky header ---- */
header.am-sitehead,.am-sitehead{position:sticky;top:0;z-index:50;
  width:100vw;max-width:100vw;margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw);
  text-align:left;
  background:rgba(255,255,255,.96);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  border-bottom:1px solid rgba(120,50,80,.10);}
.am-topbar{display:flex;align-items:center;gap:6px;padding:11px 16px 7px;}
.am-subnav{display:flex;gap:20px;overflow-x:auto;white-space:nowrap;padding:0 16px 9px;
  -webkit-overflow-scrolling:touch;scrollbar-width:none;
  -webkit-mask-image:linear-gradient(to right,#000 85%,transparent);
  mask-image:linear-gradient(to right,#000 85%,transparent);}
.am-subnav::-webkit-scrollbar{display:none;}
.am-subnav a{flex:0 0 auto;font-family:'Nunito',sans-serif;font-weight:800;font-size:.8rem;
  letter-spacing:.04em;text-transform:uppercase;color:var(--amnav-ink);text-decoration:none;padding:1px 0;}
.am-subnav a:hover,.am-subnav a:active{color:var(--amnav-rose);}
body.am-nav-open .am-subnav{display:none;}

/* ---- Hamburger button ---- */
.am-navbtn{display:inline-flex;flex-direction:column;justify-content:center;gap:5px;
  width:44px;height:44px;padding:11px;border:none;background:none;cursor:pointer;border-radius:12px;}
.am-navbtn span{display:block;height:2.6px;width:100%;background:var(--amnav-ink);border-radius:3px;
  transition:transform .28s,opacity .2s;}
.am-brandname{font-family:'Oswald','Nunito',sans-serif;font-weight:700;font-size:1.3rem;line-height:1;
  color:var(--amnav-rose);letter-spacing:.02em;text-transform:uppercase;text-decoration:none;}
body.am-nav-open .am-navbtn span:nth-child(1){transform:translateY(7.6px) rotate(45deg);}
body.am-nav-open .am-navbtn span:nth-child(2){opacity:0;}
body.am-nav-open .am-navbtn span:nth-child(3){transform:translateY(-7.6px) rotate(-45deg);}

/* ---- Full menu overlay ---- */
.am-navmenu{position:fixed;inset:0;z-index:45;background:var(--amnav-paper);padding:76px 26px 44px;
  overflow-y:auto;transform:translateY(-12px);opacity:0;visibility:hidden;
  transition:opacity .26s,transform .3s cubic-bezier(.22,1,.36,1),visibility .26s;}
body.am-nav-open .am-navmenu{opacity:1;visibility:visible;transform:none;}
body.am-nav-open{overflow:hidden;}
.am-navmenu .am-nwrap{max-width:560px;margin:0 auto;}
@media(min-width:641px){
  /* align menu items under the logo: match topbar's 1100px centered container + padding */
  .am-navmenu{padding-left:0;padding-right:0;}
  .am-navmenu .am-nwrap{max-width:1100px;margin:0 auto;padding:0 24px;}
}
.am-navmenu a.am-nlink{display:flex;align-items:center;gap:16px;font-family:'Fraunces',serif;
  font-weight:500;font-size:1.7rem;line-height:normal;letter-spacing:-.01em;color:var(--amnav-ink);text-decoration:none;
  padding:14px 2px;border-bottom:1px solid var(--amnav-line);transition:color .2s;}
.am-navmenu a.am-nlink svg.am-ic{width:23px;height:23px;stroke:var(--amnav-rose);stroke-width:1.6;
  fill:none;stroke-linecap:round;stroke-linejoin:round;flex:0 0 auto;transition:.2s;}
.am-navmenu a.am-nlink::after{content:"\2192";font-family:'Nunito',sans-serif;font-size:1.05rem;
  font-weight:800;color:var(--amnav-rose);opacity:0;transform:translateX(-10px);
  transition:opacity .22s,transform .22s;margin-left:auto;}
.am-navmenu a.am-nlink:hover,.am-navmenu a.am-nlink:active{color:var(--amnav-rose);}
.am-navmenu a.am-nlink:hover::after,.am-navmenu a.am-nlink:active::after{opacity:1;transform:translateX(0);}

/* ---- Desktop (>=641px): hamburger stays LEFT (next to logo), tabs scroll ---- */
@media(min-width:641px){
  .am-sitehead{margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw);margin-bottom:22px;
    width:100vw;border-radius:0;box-shadow:0 1px 0 rgba(120,50,80,.08);
    border-bottom:1px solid rgba(120,50,80,.12);}
  .am-topbar,.am-subnav{max-width:1100px;margin-left:auto;margin-right:auto;}
  /* hamburger LEFT of brandname, same as mobile (no reordering) */
  .am-topbar{justify-content:flex-start;padding:14px 24px;border-bottom:1px solid rgba(120,50,80,.08);}
  .am-brandname{font-size:1.5rem;}
  /* tabs: single row, horizontal scroll with right-edge fade (same behaviour as mobile) */
  .am-subnav{gap:30px;padding:12px 24px;}
  .am-subnav a{font-size:.82rem;letter-spacing:.08em;padding:2px 0;position:relative;}
  .am-subnav a::after{content:"";position:absolute;left:0;right:0;bottom:-3px;height:2px;
    background:var(--amnav-rose);transform:scaleX(0);transform-origin:left;transition:transform .22s ease;}
  .am-subnav a:hover::after{transform:scaleX(1);}
}

@media(prefers-reduced-motion:reduce){.am-navmenu{transition:none;}.am-navbtn span{transition:none;}}

/* ---- Flex-centered pages (quizzes, 404): nav must break out of centering ---- */
body.am-nav-fixed .am-sitehead{position:fixed;top:0;left:0;right:0;width:100%;margin:0;}
body.am-nav-fixed{padding-top:96px!important;}
@media(min-width:641px){
  body.am-nav-fixed .am-sitehead{margin:0;}
  body.am-nav-fixed{padding-top:104px!important;}
}