/* glamp.eco shared design tokens + primitives.
   Extracted from the (previously duplicated-per-page) inline <style> blocks.
   Load this before any page-specific <style> block so page rules can still
   override these defaults (e.g. .wrap max-width, body background). */

:root{
  --forest:#1F4A2C;
  --forest-deep:#143520;
  --leaf:#7FB069;
  --leaf-pale:#DCE8D2;
  --cream:#F4F1E6;
  --paper:#FFFFFF;
  --amber:#E2A13C;
  --river:#4E9B8F;
  --ink:#22301F;
  --ink-soft:#5A6B54;
  --radius:14px;
  --shadow:0 10px 30px rgba(20,53,32,.10);
}

*{box-sizing:border-box;margin:0;padding:0}

body{font-family:'Karla',system-ui,sans-serif;color:var(--ink);background:var(--paper);line-height:1.6}
h1,h2,h3{font-family:'Fraunces',Georgia,serif;color:var(--forest);font-weight:600}
img,video,iframe{max-width:100%}
a{color:inherit;text-decoration:none}

.wrap{max-width:1080px;margin:0 auto;padding:0 30px}
.eyebrow{letter-spacing:.22em;text-transform:uppercase;font-size:.72rem;font-weight:700;color:var(--leaf)}

.btn{display:inline-block;background:var(--forest);color:#fff;padding:.85rem 1.7rem;border-radius:999px;font-weight:700;font-size:.95rem;border:none;cursor:pointer;transition:background .2s ease, transform .15s ease, box-shadow .2s ease}
.btn:hover{background:var(--forest-deep);transform:translateY(-1px)}
.btn:active{transform:translateY(0)}
.btn.amber{background:var(--amber);color:#3D2B08}
.btn.amber:hover{background:#d19230}
.btn.ghost{background:transparent;color:var(--forest);border:2px solid var(--forest)}
.btn.ghost:hover{background:var(--leaf-pale)}

.field label{display:block;font-size:.72rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-soft);margin-bottom:.35rem}
.field input,.field select{width:100%;padding:.7rem .75rem;border:1.5px solid #DDD8C8;border-radius:8px;font-family:inherit;font-size:.95rem;background:#FCFBF7;transition:outline-offset .15s ease}
.field input:focus,.field select:focus{outline:2px solid var(--leaf)}

/* Shared hover/transition polish for card-like and tag-like elements defined
   per-page (.card, .pod, .tag, .amenity-badge) -- supplemental only, doesn't
   redefine their existing colors/layout, just adds smooth motion. */
.card,.pod,.amenity-badge,.highlight-item{transition:transform .2s ease, box-shadow .2s ease}
.tag,.amenity-row-item,.chip,.mh-chip{transition:background .15s ease, color .15s ease, border-color .15s ease}

/* Subtle page-load fade-in. */
body{animation:pageFadeIn .35s ease}
@keyframes pageFadeIn{from{opacity:0}to{opacity:1}}

@media (prefers-reduced-motion: reduce){*{transition:none!important;animation:none!important}}

/* Inline status messages (admin + guest auth pages) */
.msg{font-size:.85rem;border-radius:8px;padding:.65rem .85rem;margin-bottom:1rem;display:none}
.msg.error{background:#F6DCD7;color:#7A2E20;display:block}
.msg.ok{background:#EAF2E3;color:var(--forest);display:block}

/* Auth widget -- was duplicated per-page, consolidated here since the guest
   sign-in modal (js/auth-widget.js) is shared across booking, pod detail and
   the dashboard's "sign in to view your bookings" gate. Dashboard also reuses
   .aw-overlay/.aw-modal/.aw-close for its unrelated cancellation-confirm modal. */
.aw-trigger-row{margin-bottom:1rem;font-size:.88rem}
.aw-trigger{color:var(--forest);font-weight:700;text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.aw-trigger-btn{width:100%}
.aw-signed-in{color:var(--ink-soft)}
.aw-signout{color:var(--forest);font-weight:700;text-decoration:underline;cursor:pointer}
.aw-overlay{position:fixed;inset:0;background:rgba(16,42,25,.55);z-index:1000;display:flex;align-items:center;justify-content:center;padding:1rem}
.aw-overlay[hidden]{display:none}
.aw-modal{background:#fff;border-radius:var(--radius);box-shadow:var(--shadow);padding:2rem 2.2rem;max-width:26rem;width:100%;position:relative}
.aw-close{position:absolute;top:1rem;right:1rem;background:none;border:none;font-size:1.4rem;cursor:pointer;color:var(--ink-soft);line-height:1}
.aw-sub{color:var(--ink-soft);font-size:.9rem;margin:.3rem 0 1.1rem}
.aw-sent{background:#EAF2E3;color:var(--forest);border-radius:8px;padding:.7rem .9rem;font-size:.85rem;margin-top:.8rem}
.aw-error{background:#F6DCD7;color:#7A2E20;border-radius:8px;padding:.7rem .9rem;font-size:.85rem;margin-top:.8rem}
.aw-divider{text-align:center;color:var(--ink-soft);font-size:.75rem;text-transform:uppercase;letter-spacing:.1em;margin:1.1rem 0}
.aw-disabled{width:100%;margin-top:.5rem;display:flex;justify-content:space-between;align-items:center;opacity:.6;cursor:not-allowed}
.aw-soon{font-size:.68rem;background:var(--leaf-pale);color:var(--forest);padding:.15rem .5rem;border-radius:999px}

/* Auth widget -- sign in / create account / enter code / forgot password views */
.aw-modal h3{font-size:1.25rem;margin-bottom:.2rem}
.aw-view[hidden]{display:none}
.aw-modal .field{margin-bottom:.9rem}
.aw-modal .btn{width:100%;margin-top:.2rem}
.aw-link{display:block;text-align:center;font-size:.85rem;color:var(--forest);font-weight:700;text-decoration:underline;text-underline-offset:3px;cursor:pointer;margin-top:.9rem;background:none;border:none;font-family:inherit;width:100%}
.aw-link[aria-disabled="true"]{opacity:.55;cursor:default;text-decoration:none}
.aw-code-input{text-align:center;font-size:1.5rem;font-weight:700;letter-spacing:.5em;text-indent:.5em}

/* Mobile nav burger -- shared by every marketing page (home, pods, river,
   universal, sustainability, vouchers, notify). Each page's own <style>
   still hides .navlinks at max-width:860px; this is what replaces it. */
.nav-burger{display:none;background:none;border:none;cursor:pointer;padding:.5rem;margin:-.5rem;color:var(--forest);flex:none;align-items:center;justify-content:center}
@media(max-width:860px){
  .nav-burger{display:flex}
  header .wrap.nav>a.btn.amber{display:none}
}
/* position:fixed, not static -- .nav-mobile-panel is a sibling of <header>
   in the DOM (not nested inside it), so it doesn't inherit the header's
   sticky positioning. Left static, it sat in normal document flow near the
   top of the page and scrolled out of view entirely once you'd scrolled
   any distance down -- opening it from further down the page appeared to
   do nothing. mobile-nav.js sets `top` on open to the header's actual
   rendered bottom edge (varies per page/header height), and z-index is
   above every other in-page overlay (gs-pop, sticky headers, back-to-top)
   so it's never hidden behind page content while scrolled. */
.nav-mobile-panel{display:none;flex-direction:column;position:fixed;left:0;right:0;background:#fff;border-top:1px solid #E7E3D6;padding:.5rem 0 .9rem;z-index:500;max-height:calc(100vh - 60px);overflow-y:auto;box-shadow:0 14px 32px rgba(20,53,32,.18)}
.nav-mobile-panel.open{display:flex}
.nav-mobile-panel a{padding:.8rem 1.6rem;font-weight:600;font-size:.95rem;color:var(--ink-soft)}
.nav-mobile-panel a:hover,.nav-mobile-panel a.here{color:var(--forest);background:var(--cream)}
.nav-mobile-panel a.btn{margin:.6rem 1.6rem 0;text-align:center}
/* Backdrop behind the mobile panel -- created by mobile-nav.js, not markup,
   since the panel/burger markup is duplicated per-page and this shouldn't
   need repeating in each one. Sits one z-index below the panel (500) so it
   dims/blocks everything under the panel without covering the panel itself;
   top is set dynamically to the header's rendered bottom edge (same as the
   panel) so it doesn't also cover the header and swallow burger clicks. */
.nav-mobile-overlay{display:none;position:fixed;left:0;right:0;bottom:0;background:rgba(20,53,32,.45);z-index:499}
.nav-mobile-overlay.open{display:block}

/* Signed-in header account chip (js/header-account.js mounts this on every
   user-facing page; hidden entirely while signed out) */
.header-account{display:flex;align-items:center;gap:.5rem;font-weight:700;font-size:.9rem;color:var(--ink)}
.header-account[hidden]{display:none}
.header-account:hover{color:var(--forest)}
.header-account-avatar{width:30px;height:30px;border-radius:50%;background:var(--leaf-pale);color:var(--forest);display:flex;align-items:center;justify-content:center;font-size:.85rem;overflow:hidden;flex:none}
.header-account-avatar img{width:100%;height:100%;object-fit:cover}
/* Name text only risks overflow in the in-header chip (reduced headers have
   no burger/mobile-panel fallback to catch narrow widths); the mobile-panel
   clone lives outside header .wrap.nav so this doesn't touch it and it keeps
   showing the full name in its block-list layout. */
@media(max-width:480px){header .wrap.nav .header-account-name{display:none}}

/* Groups the reduced header's backlinks (booking, pod-detail, dashboard --
   no .navlinks there) so header-account.js has an existing flex context to
   join instead of adding a 4th top-level child under .wrap.nav's
   justify-content:space-between, which would reflow the logo/backlink
   spacing on those pages. */
.backlink-group{display:flex;align-items:center;gap:1.2rem}
.backlink-group a{white-space:nowrap}
/* Below ~480px the backlink-group no longer fits beside the logo on one
   line -- .nav's fixed height:66px doesn't grow, so the squeezed <a> text
   used to wrap mid-phrase and the overflow sat on top of the logo. Drop the
   group to its own full-width row instead of letting it shrink below its
   content width; header stays position:sticky so this just makes it two
   lines tall on narrow phones. Threshold picked with margin above the ~480px
   point where wrapping actually starts. */
@media(max-width:560px){
  header .wrap.nav{flex-wrap:wrap;height:auto;row-gap:.5rem;padding-top:.7rem;padding-bottom:.7rem}
  .backlink-group{flex-basis:100%;justify-content:flex-start}
}

/* Back to top (js/back-to-top.js mounts this on every user-facing page) */
.back-to-top{position:fixed;right:1.4rem;bottom:1.4rem;width:46px;height:46px;border-radius:50%;background:var(--forest);color:#fff;border:none;display:flex;align-items:center;justify-content:center;cursor:pointer;box-shadow:0 8px 22px rgba(20,53,32,.28);z-index:400;opacity:0;transform:translateY(10px);pointer-events:none;transition:opacity .2s ease, transform .2s ease, background .2s ease}
.back-to-top.show{opacity:1;transform:translateY(0);pointer-events:auto}
.back-to-top:hover{background:var(--forest-deep)}
.back-to-top:focus-visible{outline:2px solid var(--amber);outline-offset:2px}
@media(max-width:600px){.back-to-top{right:1rem;bottom:1rem;width:42px;height:42px}}
@media(prefers-reduced-motion:reduce){.back-to-top{transition:opacity .01s linear}}

/* Manual availability overrides -- admin-set on the Pods & Pricing tab,
   surfaced identically on every card/detail view so the two never drift. */
.fully-booked-ribbon{position:absolute;top:14px;left:-38px;width:170px;transform:rotate(-40deg);background:#B3402E;color:#fff;text-align:center;padding:.4rem 0;font-size:.72rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;box-shadow:0 6px 16px rgba(0,0,0,.25);z-index:5;pointer-events:none}
.limited-slots-badge{display:inline-flex;align-items:center;gap:.35rem;background:#F7E7C8;color:#8A5B12;font-size:.72rem;font-weight:700;padding:.3rem .7rem;border-radius:999px;white-space:nowrap}
.limited-slots-badge::before{content:"";width:7px;height:7px;border-radius:50%;background:#E2A13C;flex:none}

/* Universal footer -- same 4-column grid + legal bar on every page (was
   previously the homepage's own layout, duplicated per-page as a much
   shorter single-line variant everywhere else). Centralised here so all
   pages share one footer instead of drifting out of sync. */
footer{background:var(--forest-deep);color:#B8CCAF;padding:3.5rem 0 2rem;font-size:.9rem}
.foot-grid{display:grid;grid-template-columns:2fr 1fr 1fr;gap:2rem;margin-bottom:2.5rem}
@media(max-width:820px){.foot-grid{grid-template-columns:1fr 1fr}}
footer h4{color:#fff;font-size:.85rem;letter-spacing:.12em;text-transform:uppercase;margin-bottom:.9rem}
footer li{list-style:none;padding:.25rem 0}
footer a:hover{color:#fff}
.foot-base{border-top:1px solid rgba(255,255,255,.12);padding-top:1.4rem;display:flex;justify-content:space-between;flex-wrap:wrap;gap:1rem;font-size:.8rem;color:#7E9A73}