/* Shared header, phone menu and footer for every public page.
   Loaded after each page's own styles, so these rules win. Uses each page's color tokens. */

/* ---------- header ---------- */
.site-top{position:sticky;top:0;z-index:50;background:var(--cream);padding:0}
.site-top .wrap{max-width:1248px;margin:0 auto;padding-left:max(24px,env(safe-area-inset-left,0px));padding-right:max(24px,env(safe-area-inset-right,0px))}
.site-top nav{display:flex;justify-content:space-between;align-items:center;gap:16px;padding-block:28px}
.site-top .logo{font-family:var(--display);font-stretch:75%;font-size:32px;font-weight:800;letter-spacing:1px;text-transform:lowercase;color:var(--plum);text-decoration:none;line-height:1}
.site-top .navlinks{display:flex;gap:32px;align-items:center;font-weight:500}
.site-top .navlinks a{color:var(--plum);text-decoration:none;white-space:nowrap;text-transform:lowercase}
.site-top .navlinks a:not(.btn):hover{color:var(--rose)}
.site-top .navlinks a[aria-current]{color:var(--rose);font-weight:700}
.site-top .navlinks .btn{display:inline-block;padding:12px 24px;font-size:16px;font-weight:700;border-radius:999px;background:var(--petal);border:1.5px solid var(--petal);color:var(--plum);text-transform:lowercase;line-height:1.3}
.site-top .navlinks .btn:hover{background:var(--plum);border-color:var(--plum);color:var(--paper)}
.site-top .nav-end{display:flex;align-items:center;gap:8px;min-width:0}
.menu-btn{display:none}

/* mid-size screens: keep the row on one line */
@media (min-width:881px) and (max-width:1100px){
  .site-top .navlinks{gap:20px}
  .site-top .navlinks a[data-nav="braids"]{display:none}
}

/* ---------- phones and small tablets ---------- */
@media (max-width:880px){
  .site-top nav{padding-block:10px;gap:8px}
  .site-top.scrolled nav{padding-block:10px}
  .site-top .logo{font-size:26px}
  .site-top .navlinks a:not(.btn){display:none}
  .site-top .navlinks .btn{padding:11px 14px;font-size:15px;min-height:44px}
  .menu-btn{display:grid;place-items:center;width:44px;height:44px;flex-shrink:0;border-radius:50%;border:1.5px solid var(--plum);background:transparent;color:var(--plum);cursor:pointer;padding:0}
  .menu-btn:hover{background:var(--blush,#F8E3DD)}
  .menu-btn svg{width:20px;height:20px}
  .menu-btn .i-close{display:none}
  .menu-btn[aria-expanded="true"],.menu-btn[aria-expanded="true"]:hover{background:var(--plum);color:var(--paper)}
  .menu-btn[aria-expanded="true"] .i-open{display:none}
  .menu-btn[aria-expanded="true"] .i-close{display:block}
  html{scroll-padding-top:76px}
}
@media (max-width:379px){.site-top .nav-month{display:none}.site-top .logo{font-size:25px}.site-top .nav-end{gap:6px}.site-top .navlinks .btn{padding:10px 13px;font-size:14px}}

/* the menu panel */
.menu-panel{position:absolute;left:0;right:0;top:100%;background:var(--cream);border-bottom:1.5px solid var(--plum);box-shadow:0 18px 30px rgba(74,29,63,.12);padding:6px max(24px,env(safe-area-inset-right,0px)) 22px max(24px,env(safe-area-inset-left,0px));max-height:calc(100svh - 64px);overflow-y:auto;transform-origin:top;animation:menu-in .18s ease-out}
.menu-panel[hidden]{display:none!important}
.menu-panel ul{list-style:none;margin:0 auto;padding:0;max-width:1200px;display:flex;flex-direction:column}
.menu-panel li + li{border-top:1px solid var(--line,#EBC6BD)}
.menu-panel a{display:flex;align-items:center;justify-content:space-between;min-height:56px;font-family:var(--display);font-stretch:75%;font-weight:800;font-size:28px;text-transform:lowercase;color:var(--plum);text-decoration:none;line-height:1}
.menu-panel a::after{content:"→";font-family:var(--sans,system-ui);font-weight:400;font-size:20px;color:var(--rose)}
.menu-panel a[aria-current]{color:var(--rose)}
.menu-panel a[aria-current]::after{content:"you're here";font-size:13px;font-weight:600;letter-spacing:.02em}
.menu-panel .menu-cta{margin-top:14px;justify-content:center;min-height:52px;border-radius:999px;background:var(--petal);font-family:var(--sans,system-ui);font-stretch:100%;font-size:17px;font-weight:700}
.menu-panel .menu-cta::after{content:none}
@keyframes menu-in{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
@media (min-width:881px){.menu-panel{display:none!important}}
@media (prefers-reduced-motion:reduce){.menu-panel{animation:none}}

/* ---------- footer ---------- */
.site-foot{display:flex;flex-direction:column;align-items:flex-start;gap:12px;padding-block:48px;color:var(--muted);font-size:15px}
.site-foot .logo{font-family:var(--display);font-stretch:75%;font-size:26px;font-weight:800;letter-spacing:1px;text-transform:lowercase;color:var(--plum);text-decoration:none}
.site-foot .socials{display:flex;gap:12px}
.site-foot .social{width:48px;height:48px;border-radius:50%;background:var(--petal);color:var(--plum);display:grid;place-items:center;transition:background .2s,color .2s,transform .2s}
.site-foot .social:hover{background:var(--plum);color:var(--paper);transform:translateY(-2px)}
.site-foot .foot-links{display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-start;column-gap:4px;padding:0;margin:-6px 0}
.foot-wrap{max-width:1248px;margin:0 auto;padding-left:max(24px,env(safe-area-inset-left,0px));padding-right:max(24px,env(safe-area-inset-right,0px))}
.site-foot .foot-links a{display:inline-flex;align-items:center;min-height:44px;padding-inline:6px;color:var(--plum);font-weight:500;text-decoration:underline;text-decoration-color:var(--rose);text-underline-offset:3px}
.site-foot .foot-links a:first-child{padding-left:0}
.site-foot .foot-links a:hover{color:var(--rose)}
.site-foot .foot-links span{color:var(--muted)}
.site-foot .foot-place{color:var(--muted)}
@media (hover:none){.site-foot .social:hover{background:var(--petal);color:var(--plum);transform:none}}

/* ---------- dark mode: text on bubblegum pink stays dark plum ---------- */
@media (prefers-color-scheme:dark){
  .site-top .navlinks .btn,.menu-panel .menu-cta,.site-foot .social{color:#4A1D3F}
  .site-top .navlinks .btn:hover{color:#2B1426}
  .menu-panel{box-shadow:0 18px 30px rgba(0,0,0,.45)}
  .menu-btn:hover{background:var(--blush,#4A2441)}
  .menu-btn[aria-expanded="true"],.menu-btn[aria-expanded="true"]:hover{background:var(--plum);color:#2B1426}
}

.site-top a:focus-visible,.menu-btn:focus-visible,.menu-panel a:focus-visible,.site-foot a:focus-visible{outline:3px solid var(--rose);outline-offset:3px;border-radius:999px}
@media (prefers-color-scheme:dark){.site-top .btn:focus-visible,.menu-panel .menu-cta:focus-visible,.site-foot .social:focus-visible{outline-color:#F8EDF2}}