/* Shared main nav: layout switch, menu panel and floating buttons (Design Review pass 2, 11 Nov 2026).
   Loaded by every main-site page after site.css and search.css. Not loaded by the Flask templates, so a change here
   does not need a unity-api restart. Brand palette only: #1B4332 dark, #D4A373 gold, #F7F3EE cream.
   ONE layout switch (DR-20261111-31): the Menu layout below 1024px, and on touch-only screens (no hover, coarse pointer)
   up to 1279px. NAV_MQ in /js/site.js must stay identical to the menu-mode media query used below. */
nav[aria-label="Main"] .nav-links{display:flex;align-items:center;gap:1.5rem}
nav[aria-label="Main"] .nav-menu-btn{display:none}
nav[aria-label="Main"] .nav-panel{display:none}
nav[aria-label="Main"] > div:first-child > a[href="/"]{flex-shrink:0}
nav[aria-label="Main"] > div:first-child > a[href="/"] span{white-space:nowrap}
/* Narrow phones (<420px): the wordmark may wrap to two lines so Join, search and Menu keep their 44px targets on one row */
@media (max-width:419px){nav[aria-label="Main"] > div:first-child > a[href="/"]{flex-shrink:1;min-width:0}nav[aria-label="Main"] > div:first-child > a[href="/"] span{white-space:normal;line-height:1.15}}
@media (max-width:1023px),(hover:none) and (pointer:coarse) and (max-width:1279px){
  nav[aria-label="Main"] .nav-links{display:none}
  nav[aria-label="Main"] .nav-menu-btn{display:inline-flex;align-items:center;justify-content:center;padding:.5rem .75rem;margin-right:-.75rem}
  nav[aria-label="Main"] .nav-panel:not(.hidden){display:block}
}
/* Header row (Pass 2 verdict "Desktop header bar"; DR-20261111-24 and -23). One filled action only: Join as a creator.
   Contact is a plain link like the others. Links get a 44px row from padding (12px 6px), not from gaps.
   The bar is opaque (no see-through text behind the labels; same cream as the page) with a 1px rule. */
nav[aria-label="Main"].nav-blur{background:#F7F3EE;-webkit-backdrop-filter:none;backdrop-filter:none;border-bottom:1px solid rgba(20,20,20,.08)}
nav[aria-label="Main"] .nav-links{gap:0;margin-left:1rem}
nav[aria-label="Main"] .nav-links + .join-cta{margin-left:.5rem}
nav[aria-label="Main"] .nav-links > a{display:inline-block;line-height:20px;min-height:44px;padding:12px 6px;white-space:nowrap}
nav[aria-label="Main"] .join-cta{min-height:40px;padding:.6rem 1.1rem;font-size:.875rem;font-weight:600}
@media (max-width:1023px),(hover:none) and (pointer:coarse) and (max-width:1279px){
  /* Phones/tablets: 44px hit area, 32px visual pill (transparent padding around it) */
  nav[aria-label="Main"] .join-cta{position:relative;z-index:0;min-height:44px;padding:0 .9rem;background:transparent}
  nav[aria-label="Main"] .join-cta::before{content:"";position:absolute;z-index:-1;left:0;right:0;top:6px;bottom:6px;border-radius:9999px;background:#1B4332}
  nav[aria-label="Main"] .join-cta:hover{background:transparent}
  nav[aria-label="Main"] .join-cta:hover::before{background:#2D6A4F}
  nav[aria-label="Main"] .site-search-btn{width:44px;height:44px}
}
/* Fixed labels (DR-20261111-35): one label set at every width, no width-specific hide or shorten rules.
   Bar (>=1024px): Work · Sustainability · Events · Shop · Blog · Creators · Playground · Partner · Contact, then Join as a creator.
   Full names stay in aria-label/title ("Meet the Creators", "Creative Playground") and in the Menu.
   The Join pill reads "Join as a creator" in the bar layout and "Join" in the Menu layout (one switch, the same query). */
nav[aria-label="Main"] .join-cta .jc-long{display:inline}
nav[aria-label="Main"] .join-cta .jc-short{display:none}
@media (max-width:1023px),(hover:none) and (pointer:coarse) and (max-width:1279px){
  nav[aria-label="Main"] .join-cta .jc-long{display:none}
  nav[aria-label="Main"] .join-cta .jc-short{display:inline}
}
/* Menu button, panel and items (DR-20261111-29). Solid panel under the bar over a 40% dark scrim, 48px rows with dividers,
   one filled action (Join as a creator, full width) at the bottom, Instagram as an icon in the panel footer.
   The button says "Menu" (bars icon) when closed and "Close" (x icon) when open. */
nav[aria-label="Main"] .nav-menu-btn{gap:6px;min-height:44px;min-width:44px;padding:0 12px;border-radius:9999px;color:#141414;background:transparent;cursor:pointer}
nav[aria-label="Main"] .nav-menu-btn:focus-visible{outline:3px solid #D4A373;outline-offset:2px}
nav[aria-label="Main"] .nav-menu-ico{width:20px;height:20px;flex:0 0 auto}
nav[aria-label="Main"] .nav-menu-btn[aria-expanded="true"] .nav-ico-bars,nav[aria-label="Main"] .nav-menu-btn[aria-expanded="false"] .nav-ico-x{display:none}
@media (max-width:1023px),(hover:none) and (pointer:coarse) and (max-width:1279px){
  nav[aria-label="Main"] .nav-menu-btn{margin-right:-12px}
  nav[aria-label="Main"] .nav-panel:not(.hidden){position:absolute;top:100%;left:0;right:0;z-index:1;max-height:calc(100vh - 65px);max-height:calc(100dvh - 65px);overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;background:#F8F4ED;box-shadow:0 8px 24px rgba(0,0,0,.12);padding:.25rem 1rem 1rem}
  nav[aria-label="Main"] .nav-scrim:not([hidden]){display:block}
}
nav[aria-label="Main"] .nav-scrim{display:none;position:absolute;top:100%;left:0;right:0;height:100vh;height:100dvh;background:rgba(0,0,0,.4)}
nav[aria-label="Main"] .nav-item{display:flex;align-items:center;min-height:48px;border-bottom:1px solid rgba(27,67,50,.08);font-size:1rem;color:#141414;text-decoration:none}
nav[aria-label="Main"] .nav-item:hover,nav[aria-label="Main"] .nav-item[aria-current="page"]{color:#1B4332}
nav[aria-label="Main"] .nav-item[aria-current="page"]{font-weight:600}
nav[aria-label="Main"] .nav-panel-join{display:flex;align-items:center;justify-content:center;min-height:48px;margin-top:1rem;border-radius:9999px;background:#1B4332;color:#D4A373;font-size:1rem;font-weight:600;text-decoration:none}
nav[aria-label="Main"] .nav-panel-join:hover{background:#2D6A4F}
nav[aria-label="Main"] .nav-panel-foot{display:flex;gap:.5rem;margin-top:.75rem}
nav[aria-label="Main"] .nav-panel-ig{display:inline-flex;align-items:center;justify-content:center;width:48px;height:48px;border-radius:9999px;border:1px solid rgba(27,67,50,.25);color:#1B4332}
nav[aria-label="Main"] .nav-panel-ig svg{width:22px;height:22px}
nav[aria-label="Main"] .nav-item:focus-visible,nav[aria-label="Main"] .nav-panel-join:focus-visible,nav[aria-label="Main"] .nav-panel-ig:focus-visible{outline:3px solid #D4A373;outline-offset:2px}
html.nav-open #uc-tg-fab,html.nav-open #uc-cart-fab{visibility:hidden}
nav[aria-label="Main"] .join-cta,nav[aria-label="Main"] .site-search-btn,nav[aria-label="Main"] .nav-menu-btn{flex-shrink:0}
/* Menu behaviour (DR-20261111-30): the page behind an open menu does not scroll (same pattern as search's .ss-open). */
html.nav-open,html.nav-open body{overflow:hidden}
/* Telegram floating button (DR-20261111-34): icon-only 48x48, safe-area offsets, above the sticky cta18 bar while that
   bar is on screen (cta18.js sets body.cta18-shown and --cta18-h), faded out while #contact or the footer is on screen.
   The analytics-consent lift in site.css (body:has(#uac-consent)) still wins while the consent bar is open. */
#uc-tg-fab{left:calc(16px + env(safe-area-inset-left));bottom:calc(16px + env(safe-area-inset-bottom));width:48px;height:48px;min-width:48px;min-height:48px;padding:0;transition:bottom .2s ease,opacity .15s ease,visibility .15s ease}
#uc-tg-fab svg{width:22px;height:22px;margin-left:-2px}
body.cta18-shown #uc-tg-fab{bottom:calc(var(--cta18-h,56px) + 16px)}
body.uc-tg-away #uc-tg-fab{opacity:0;visibility:hidden;pointer-events:none}
@media (prefers-reduced-motion:reduce){#uc-tg-fab{transition:none}}