/* ── tandoco canonical floating-pill nav ──────────────────────────
   Single source of truth — mirrors home.css / store.css so every
   page (bakery, about, blog, training, catering, events, support…)
   gets the exact same nav across desktop, tablet and mobile.

   Pages that link this file should NOT redeclare .nav* / .btn-nav* /
   .btn-cart / .cart-badge / .hamburger / .acct-* / .nav-drawer rules
   inline — keep this file as the authoritative copy.
   ──────────────────────────────────────────────────────────────── */

/* Desktop pill */
.nav{position:fixed;top:14px;left:50%;transform:translateX(-50%);width:calc(100% - 28px);max-width:1060px;z-index:300;height:56px;padding:0 18px;display:flex;align-items:center;justify-content:space-between;border-radius:99px;background:rgba(248,249,255,.92);backdrop-filter:blur(28px) saturate(200%);-webkit-backdrop-filter:blur(28px) saturate(200%);border:1px solid rgba(255,255,255,.65);box-shadow:0 2px 24px rgba(27,26,107,.1),inset 0 1px 0 rgba(255,255,255,.92);transition:transform .4s cubic-bezier(.22,1,.36,1),box-shadow .4s cubic-bezier(.22,1,.36,1);}
.nav.shrink{transform:translateX(-50%) scale(.93);box-shadow:0 4px 32px rgba(27,26,107,.14),inset 0 1px 0 rgba(255,255,255,.92);}
.nav-brand{display:flex;align-items:center;flex-shrink:0;text-decoration:none;}
.nav-brand img{height:26px;width:auto;display:block;}
.nav-brand-text{font-family:'Plus Jakarta Sans',sans-serif;font-size:18px;font-weight:900;color:var(--navy,#1B1A6B);letter-spacing:-.03em;}

/* Links — hidden until ≥960px (matches home.css). */
.nav-links{display:none;align-items:center;gap:16px;}
.nav-links a{font-size:12.5px;font-weight:600;color:var(--muted,#6B6B7B);transition:color .15s;white-space:nowrap;text-decoration:none;}
.nav-links a:hover,.nav-links a.active{color:var(--navy,#1B1A6B);}
.nav-links a.active{font-weight:700;}

/* Bakery shimmer */
.nav-bakery,.nav-bakery-mobile{color:#be185d!important;font-weight:800!important;background:linear-gradient(90deg,#be185d,#f472b6,#e11d48,#f472b6,#be185d);background-size:200% auto;-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;animation:bakeryShimmer 6s linear infinite;will-change:background-position;transform:translateZ(0);-webkit-transform:translateZ(0);backface-visibility:hidden;-webkit-backface-visibility:hidden;}
.nav-bakery:hover,.nav-bakery-mobile:hover{-webkit-text-fill-color:#be185d!important;}
.nav-bakery-mobile{background:linear-gradient(90deg,#be185d,#f472b6,#e11d48,#f472b6,#be185d)!important;background-size:200% auto!important;-webkit-background-clip:text!important;-webkit-text-fill-color:transparent!important;background-clip:text!important;animation:bakeryShimmer 6s linear infinite!important;}
@keyframes bakeryShimmer{0%{background-position:0% center;}100%{background-position:200% center;}}

/* Right cluster */
.nav-right{display:flex;align-items:center;gap:8px;}
.btn-nav-auth{background:var(--navy,#1B1A6B);color:#fff;border:none;padding:6px 20px;border-radius:99px;font-size:12.5px;font-weight:700;cursor:pointer;transition:all .2s;white-space:nowrap;box-shadow:0 2px 10px rgba(27,26,107,.2);display:none;align-items:center;justify-content:center;line-height:1;min-height:32px;font-family:'Plus Jakarta Sans',sans-serif;}
.btn-nav-auth:hover{background:var(--accent,#2D2FA8);}
.btn-nav-account{width:32px;height:32px;border-radius:50%;background:var(--navy,#1B1A6B);color:#fff;border:none;cursor:pointer;font-family:'Plus Jakarta Sans',sans-serif;font-size:13px;font-weight:900;display:flex;align-items:center;justify-content:center;transition:all .3s;}
.btn-nav-account.founder,
html[data-tdco-founder="1"] .btn-nav-account{background:linear-gradient(135deg,#8B6914 0%,#C8A96E 45%,#E8C87A 100%);color:#1A1508;animation:founderShine 2.5s ease-in-out infinite;border:1.5px solid rgba(232,200,122,.6);}
@keyframes founderShine{0%,100%{box-shadow:0 0 8px rgba(200,169,110,.5),0 0 16px rgba(200,169,110,.2);}50%{box-shadow:0 0 14px rgba(232,200,122,.7),0 0 28px rgba(200,169,110,.35);}}

/* Synchronous auth pre-paint (paired with /scripts/nav-auth-prepaint.js
   and the cache writer in /scripts/nav-drawer.js). When the previous
   page wrote tdcoSignedIn=1 into localStorage, the prepaint script
   stamps html[data-tdco-auth="in"] before first paint and these rules
   show the account avatar / drawer-acct + hide the auth button so the
   nav doesn't flash "sign up / log in" → user-icon on every page load. */
html[data-tdco-auth="in"] .btn-nav-auth,
html[data-tdco-auth="in"] .drawer-auth{display:none !important;}
html[data-tdco-auth="in"] .acct-wrap{display:flex !important;}
html[data-tdco-auth="in"] .drawer-acct{display:flex !important;}
.btn-cart{position:relative;width:36px;height:36px;border-radius:50%;background:rgba(27,26,107,.08);border:1.5px solid rgba(27,26,107,.12);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .2s;line-height:1;color:var(--navy,#1B1A6B);padding:0;}
.btn-cart .cart-svg{width:18px;height:18px;display:block;stroke:currentColor;transition:transform .15s;}
.btn-cart:hover{background:rgba(27,26,107,.14);border-color:rgba(27,26,107,.22);}
.btn-cart:hover .cart-svg{transform:scale(1.08);}
.cart-badge{position:absolute;top:-4px;right:-4px;width:16px;height:16px;border-radius:50%;background:var(--coral,#C87555);color:#fff;font-size:9px;font-weight:900;display:none;align-items:center;justify-content:center;font-family:'Plus Jakarta Sans',sans-serif;}

/* Hamburger */
.hamburger{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;background:none;border:none;cursor:pointer;padding:6px;}
.hamburger span{display:block;width:20px;height:2px;background:var(--navy,#1B1A6B);border-radius:99px;transition:all .25s;}
.hamburger.open span:nth-child(1){transform:translateY(6px) rotate(45deg);}
.hamburger.open span:nth-child(2){opacity:0;}
.hamburger.open span:nth-child(3){transform:translateY(-6px) rotate(-45deg);}

/* Account dropdown */
.acct-wrap{position:relative;}
.acct-dropdown{position:absolute;top:calc(100% + 10px);right:0;background:rgba(248,249,255,.97);backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);border:1px solid rgba(255,255,255,.6);border-radius:18px;box-shadow:0 8px 36px rgba(27,26,107,.14),inset 0 1px 0 rgba(255,255,255,.8);width:210px;padding:7px;display:none;z-index:400;}
.acct-dropdown.open{display:block;}
.acct-info{padding:10px;border-bottom:1px solid var(--border,#EDE8DC);margin-bottom:5px;}
.acct-name{font-family:'Plus Jakarta Sans',sans-serif;font-size:13px;font-weight:800;color:var(--navy,#1B1A6B);}
.acct-email{font-size:11.5px;color:var(--muted,#6B6B7B);}
.acct-link{display:block;padding:8px 10px;border-radius:10px;font-size:13px;font-weight:600;color:var(--text,#2C2C3A);cursor:pointer;transition:all .15s;background:none;border:none;width:100%;text-align:left;text-decoration:none;font-family:inherit;}
.acct-link:hover{background:rgba(45,47,168,.08);color:var(--navy,#1B1A6B);}
.acct-link.danger{color:#DC2626;}
.acct-link.danger:hover{background:#FEF2F2;}

/* Mobile drawer */
.nav-drawer{position:fixed;top:0;left:0;right:0;bottom:0;z-index:250;background:rgba(248,249,255,.97);backdrop-filter:blur(32px);-webkit-backdrop-filter:blur(32px);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;padding:80px 20px 40px;overflow-y:auto;transform:translateY(-100%);visibility:hidden;transition:transform .3s cubic-bezier(.4,0,.2,1),visibility .3s;will-change:transform;}
.nav-drawer.open{transform:translateY(0);visibility:visible;}
.nav-drawer a{font-family:'Plus Jakarta Sans',sans-serif;font-size:22px;font-weight:800;color:var(--navy,#1B1A6B);letter-spacing:-.03em;text-decoration:none;}
.nav-drawer a:hover{color:var(--accent,#2D2FA8);}

/* Drawer auth buttons — sign up (primary navy gradient) + log in (ghost
   outline). Scoped to .drawer-auth so they don't collide with page-level
   .btn-primary / .btn-ghost rules (e.g. bakery.html overrides .btn-ghost
   with a different look). */
.drawer-auth{display:flex;gap:10px;margin-top:8px;flex-wrap:wrap;justify-content:center;}
.drawer-auth .btn-primary{background:linear-gradient(135deg,var(--navy,#1B1A6B) 0%,var(--accent,#2D2FA8) 100%);color:#fff;padding:13px 26px;border-radius:99px;font-family:'Plus Jakarta Sans',sans-serif;font-size:14px;font-weight:800;box-shadow:0 6px 24px rgba(27,26,107,.4);transition:all .2s;display:inline-flex;align-items:center;justify-content:center;border:none;cursor:pointer;text-transform:lowercase;}
.drawer-auth .btn-primary:hover{transform:translateY(-2px);box-shadow:0 10px 32px rgba(27,26,107,.5);}
.drawer-auth .btn-ghost{background:#fff;color:var(--navy,#1B1A6B) !important;font-family:'Plus Jakarta Sans',sans-serif;font-size:14px;font-weight:700;display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:13px 20px;border:1.5px solid rgba(27,26,107,.2) !important;border-radius:99px;transition:all .2s;cursor:pointer;text-transform:lowercase;}
.drawer-auth .btn-ghost:hover{border-color:var(--navy,#1B1A6B) !important;background:rgba(27,26,107,.04);}
@media(max-height:600px){.nav-drawer{gap:12px;padding-top:70px;}.nav-drawer a{font-size:18px;}}

/* Desktop breakpoint — show links + auth pill, hide hamburger. */
@media(min-width:960px){
  .nav-links{display:flex;}
  .btn-nav-auth{display:inline-flex;}
  .hamburger{display:none;}
}
@media(max-width:959px){.btn-nav-auth{display:none;}}

/* Wider desktop nav (≥1200px) — used to live in scripts/desktop-polish.css
   but that stylesheet wasn't loaded on bakery/about/blog so those three
   pages rendered with the smaller default pill while every other page
   showed the larger one. Lives here now so every page that links
   nav.css gets the same desktop dimensions. */
@media(min-width:1200px){
  .nav{max-width:1280px !important;height:62px !important;padding:0 22px !important;}
  .nav-brand img{height:30px;}
  .nav-links{gap:22px !important;}
  .nav-links a{font-size:14px !important;}
  .btn-nav-auth{padding:9px 22px !important;font-size:13px !important;}
}

/* Mobile pill — full-bleed soft-corner liquid glass with shrink-on-scroll. */
@media(max-width:720px){
  .nav{
    left:8px;right:8px;width:auto;max-width:none;transform:none !important;
    border-radius:22px;height:52px;padding:0 8px 0 14px;
    background:rgba(248,249,255,.62);
    backdrop-filter:blur(28px) saturate(200%);
    -webkit-backdrop-filter:blur(28px) saturate(200%);
    border:1px solid rgba(255,255,255,.45);
    box-shadow:0 8px 28px rgba(27,26,107,.08),inset 0 1px 0 rgba(255,255,255,.55);
    transition:height .3s cubic-bezier(.22,1,.36,1),padding .3s cubic-bezier(.22,1,.36,1),background .3s ease,box-shadow .3s ease;
  }
  .nav.shrink{
    height:42px;padding:0 6px 0 12px;
    transform:none !important;
    background:rgba(248,249,255,.82);
    box-shadow:0 6px 22px rgba(27,26,107,.14),inset 0 1px 0 rgba(255,255,255,.7);
  }
  .nav img{max-height:26px;width:auto;transition:max-height .3s ease;}
  .nav.shrink img{max-height:22px;}
  .btn-nav-account,#cartBtn{width:34px !important;height:34px !important;min-height:34px !important;min-width:34px !important;flex-shrink:0;aspect-ratio:1/1;border-radius:50%;transition:width .3s,height .3s;}
  .nav.shrink .btn-nav-account,.nav.shrink #cartBtn{width:30px !important;height:30px !important;min-height:30px !important;min-width:30px !important;}
  .btn-nav-auth{padding:6px 18px !important;font-size:12px !important;min-height:32px !important;transition:padding .3s,font-size .3s;}
  .nav.shrink .btn-nav-auth{padding:5px 16px !important;font-size:11.5px !important;min-height:30px !important;}
  .hamburger{transition:width .3s,height .3s;}
  .nav.shrink .hamburger{width:34px;height:34px;}
  .nav-right{gap:6px !important;}

  @media(max-width:400px){
    .nav{padding:0 6px 0 10px;}
    .nav img{max-height:22px;}
    .nav.shrink img{max-height:20px;}
    .btn-nav-auth{padding:5px 14px !important;font-size:11.5px !important;min-height:30px !important;}
  }
}