/* ============================================================
   Serengeti Boat Rentals — shared design system
   Loaded by every page. Header + footer markup live in
   content/_header.html / content/_footer.html (Chosen preserved
   render injects them; shortcodes like [year] run inside).
   Fonts: Alfa Slab One (display, single weight) + Montserrat.
   ============================================================ */
:root{
  --navy:#081a2e; --navy-2:#0d2740; --lake:#0e7bc4; --sky:#46b8f0; --sky2:#7dd3fc;
  --gold:#f7bb2e; --gold-hi:#ffce55; --coral:#ff6b5c; --teal:#22d3a6;
  --paper:#f4f8fc; --ink:#0b1f33; --mute:#5b7690; --line:rgba(255,255,255,.12);
  --wrap:1160px;
  --disp:'Alfa Slab One',system-ui,serif;
  --body:'Montserrat',system-ui,sans-serif;
}
*{ margin:0; padding:0; box-sizing:border-box; }
html{ background:var(--navy); }
html, body{ overflow-x:clip; }
body{ font-family:var(--body); color:var(--ink); background:var(--paper);
  line-height:1.6; -webkit-font-smoothing:antialiased; }
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
h1,h2,h3{ font-family:var(--disp); font-weight:400; letter-spacing:0; line-height:1.12; }
.eyebrow{ font-family:var(--body); font-size:14.5px; font-weight:600; letter-spacing:.26em; text-transform:uppercase; }

/* slim styled scrollbar */
html{ scrollbar-width:thin; scrollbar-color:rgba(255,255,255,.38) transparent; }
html::-webkit-scrollbar{ width:10px; }
html::-webkit-scrollbar-track{ background:transparent; }
html::-webkit-scrollbar-thumb{ background:rgba(255,255,255,.3); border-radius:99px;
  border:2px solid transparent; background-clip:padding-box; }
html::-webkit-scrollbar-thumb:hover{ background:rgba(255,255,255,.5); }

/* ---------- buttons ---------- */
.btn{ display:inline-flex; align-items:center; gap:9px; font-family:var(--body); font-weight:700;
  font-size:15px; padding:14px 24px; border-radius:999px; border:1.5px solid transparent;
  cursor:pointer; transition:transform .16s ease, background .18s ease,
  color .18s ease, border-color .18s ease, box-shadow .2s ease; }
.btn:focus-visible{ outline:3px solid var(--sky); outline-offset:2px; }
/* hover grows, click shrinks */
.btn:hover{ transform:scale(1.06); }
.btn:active{ transform:scale(.94); }
.btn--gold{ background:var(--gold); color:var(--navy); box-shadow:0 10px 30px rgba(247,187,46,.28); }
.btn--gold:hover{ background:var(--gold-hi); }
.btn--line{ background:transparent; color:#fff; border-color:rgba(255,255,255,.5); }
.btn--line:hover{ border-color:#fff; background:rgba(255,255,255,.1); }
.btn--lake{ background:var(--lake); color:#fff; box-shadow:0 10px 30px rgba(14,123,196,.3); }
.btn--lake:hover{ background:#1189d6; }

/* ============ SHARED HEADER ============ */
header.site{ z-index:50; transition:background .3s ease, box-shadow .3s ease, padding .3s ease;
  padding:12px clamp(16px,4vw,40px); }
header.site .bar{ max-width:var(--wrap); margin:0 auto; display:flex; align-items:center;
  justify-content:space-between; gap:16px; }
header.site .brand{ display:flex; align-items:center; gap:12px; }
header.site .brand img{ height:60px; width:auto; filter:drop-shadow(0 3px 8px rgba(0,0,0,.5));
  transition:height .3s ease; }
header.site .brand .wm{ display:flex; flex-direction:column; align-items:center; line-height:1;
  color:#fff; text-shadow:0 2px 12px rgba(0,0,0,.5); }
header.site .brand .wm b{ font-family:var(--disp); font-weight:400; font-size:27px; letter-spacing:.005em; line-height:.92; }
header.site .brand .wm span{ font-family:var(--body); font-size:10px; font-weight:400; letter-spacing:.1em;
  text-transform:uppercase; color:var(--gold-hi); margin-top:5px; opacity:.95; white-space:nowrap; }
header.site nav.links{ display:flex; align-items:center; gap:26px; }
header.site nav.links a.nl{ color:#fff; font-weight:500; font-size:15px;
  text-shadow:0 2px 10px rgba(0,0,0,.45); opacity:.92; transition:opacity .15s ease, color .15s ease; }
header.site nav.links a.nl:hover{ opacity:1; color:var(--gold-hi); }
header.site nav.links a.nl.active{ opacity:1; color:var(--gold-hi); box-shadow:inset 0 -2px 0 var(--gold); padding-bottom:2px; }
header.site .burger{ display:none; }

/* subpage default: sticky solid navy bar, brand always visible */
body:not(.home-cinema) header.site{ position:sticky; top:0; background:var(--navy);
  box-shadow:0 6px 30px rgba(0,0,0,.35); }

/* home: same solid navy bar as every other page, fixed over the scroll rail */
body.home-cinema header.site{ position:fixed; top:0; left:0; right:0;
  background:var(--navy); box-shadow:0 6px 30px rgba(0,0,0,.35); }
/* home: brand always visible in the header (centered hero lockup still fades on scroll) */

@media (max-width:860px){
  header.site nav.links{ position:fixed; inset:0 0 0 auto; width:min(78vw,320px); flex-direction:column;
    align-items:flex-start; justify-content:center; gap:8px; padding:40px 32px; background:var(--navy);
    transform:translateX(100%); transition:transform .3s ease, box-shadow .3s ease; z-index:70; }
  /* shadow only while open: closed drawer sits just off-screen and its shadow
     would otherwise bleed back into the viewport as a right-edge dark strip */
  header.site nav.links.open{ transform:translateX(0); box-shadow:-20px 0 60px rgba(0,0,0,.5); }
  header.site nav.links a.nl{ font-size:22px; padding:8px 0; }
  header.site nav.links .btn{ margin-top:14px; }
  header.site .burger{ display:flex; flex-direction:column; gap:5px; width:44px; height:44px;
    align-items:center; justify-content:center; background:rgba(6,17,30,.4);
    border:1px solid rgba(255,255,255,.25); border-radius:12px; cursor:pointer; z-index:80; }
  header.site .burger span{ width:22px; height:2px; background:#fff; border-radius:2px;
    transition:transform .25s ease, opacity .2s ease; }
  header.site .burger.x span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
  header.site .burger.x span:nth-child(2){ opacity:0; }
  header.site .burger.x span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }
}

/* ============ SHARED FOOTER ============ */
footer.site-foot{ position:relative; z-index:15; background:var(--navy); color:#b9cbdb;
  padding:56px 24px 34px; }
footer.site-foot .foot-grid{ max-width:var(--wrap); margin:0 auto; display:grid;
  grid-template-columns:1.1fr 1fr 0.9fr; gap:40px; align-items:start; }
footer.site-foot .fcol h4{ font-family:var(--body); font-size:12px; font-weight:700;
  letter-spacing:.22em; text-transform:uppercase; color:#7b93a8; margin:0 0 14px; }
footer.site-foot .fcol--brand{ text-align:center; }
footer.site-foot .fcol--brand img{ width:110px; margin:0 auto 10px; }
footer.site-foot .wm{ display:flex; flex-direction:column; align-items:center; line-height:1; }
footer.site-foot .wm b{ font-family:var(--disp); font-weight:400; font-size:28px; color:#fff; letter-spacing:.005em; }
footer.site-foot .wm span{ font-family:var(--body); font-size:11px; font-weight:600; letter-spacing:.3em;
  text-indent:.3em; text-transform:uppercase; color:var(--gold-hi); margin-top:6px; }
footer.site-foot .phone, footer.site-foot .phone a{ font-family:var(--disp); font-weight:400;
  font-size:24px; color:#fff; display:inline-block; }
footer.site-foot .pickup{ margin-top:10px; font-size:14px; color:#9fb4c6; line-height:1.6; }
footer.site-foot .pickup.hours{ margin-top:6px; }
footer.site-foot .fl{ display:flex; flex-direction:column; gap:9px; }
footer.site-foot .fl a{ color:#cadae8; font-size:14.5px; }
footer.site-foot .fl a:hover{ color:var(--gold-hi); }
footer.site-foot .sr-trust{ max-width:var(--wrap); margin:36px auto 0; padding-top:26px;
  border-top:1px solid rgba(255,255,255,.1); }
footer.site-foot .foot-base{ max-width:var(--wrap); margin:18px auto 0; display:flex;
  justify-content:center; gap:8px 26px; flex-wrap:wrap; align-items:baseline; }
footer.site-foot .copy{ font-size:13px; color:#7b93a8; }
footer.site-foot .credit{ font-size:12px; color:#5b7690; }
footer.site-foot .credit a{ color:#8fa9c0; text-decoration:underline; }
footer.site-foot .credit a:hover{ color:var(--gold-hi); }
@media (max-width:820px){
  footer.site-foot .foot-grid{ grid-template-columns:1fr; gap:30px; text-align:center; }
  footer.site-foot .fcol h4{ margin-bottom:10px; }
  footer.site-foot .fl{ align-items:center; }
}

/* ============ SUBPAGE KIT ============ */
/* page hero band */
.band{ background:linear-gradient(135deg, var(--navy) 0%, var(--navy-2) 55%, #123a5e 100%);
  color:var(--paper); text-align:center; padding:64px 24px 58px; }
/* mini hero: photo layer behind any hero block (.band, book's .hero, waivers' .top).
   Markup: first child <div class="bg"><img src="..." alt=""></div> */
.has-img{ position:relative; overflow:hidden; }
/* section-qualified so it also beats page-inline .hero/.top padding (those style
   blocks come after this stylesheet in the document) */
section.has-img{ padding-top:96px; padding-bottom:88px; }
.has-img .bg{ position:absolute; inset:0; z-index:0; }
.has-img .bg img{ width:100%; height:100%; object-fit:cover; }
.has-img .bg::after{ content:''; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(8,26,46,.78) 0%, rgba(8,26,46,.52) 48%, rgba(8,26,46,.84) 100%); }
.has-img > :not(.bg){ position:relative; z-index:1; }
/* wave hand-off from the hero photo into the page background */
.has-img .hero-wave{ position:absolute; left:0; right:0; bottom:-1px; width:100%; height:44px;
  z-index:2; display:block; pointer-events:none; }

/* ---------- subpage section pattern (mirrors the home sec-head) ---------- */
.sr-sec{ text-align:center; margin-bottom:34px; }
.sr-sec .eyebrow{ display:inline-block; color:var(--lake); font-size:12.5px; }
.sr-sec h2{ color:var(--navy); font-size:clamp(1.6rem,3.6vw,2.3rem); margin:10px 0 8px; }
.sr-sec p{ max-width:640px; margin:0 auto; font-size:15.5px; color:var(--mute); }
.band h1{ font-family:var(--disp); font-weight:400; font-size:clamp(2rem,5vw,3.1rem);
  color:#fff; margin-bottom:10px; }
.band p{ max-width:640px; margin:0 auto; color:#c6d7e6; font-size:clamp(1rem,1.8vw,1.15rem); }
.band .eyebrow{ display:block; color:var(--gold-hi); margin-bottom:12px; }
/* squiggle underline for eyebrows */
.squig::after{ content:""; display:block; width:56px; height:8px; margin:9px auto 0;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='8' viewBox='0 0 56 8'%3E%3Cpath d='M1 4 Q8 1 15 4 T29 4 T43 4 T57 4' fill='none' stroke='%23f7bb2e' stroke-width='2.2' stroke-linecap='round'/%3E%3C/svg%3E") left center repeat-x;
  background-size:56px 8px; animation:sr-squig 2.4s linear infinite; }
@keyframes sr-squig{ from{ background-position-x:0; } to{ background-position-x:-56px; } }
/* generic light card */
.sr-card{ background:#fff; border:1px solid #e3ecf4; border-radius:20px;
  box-shadow:0 8px 30px rgba(12,40,64,.05);
  transition:transform .28s cubic-bezier(.2,.7,.2,1), box-shadow .28s ease; }
.sr-card:hover{ transform:translateY(-4px); box-shadow:0 18px 44px rgba(12,40,64,.12); }