/* Fresh Baked — shared marketing site styles.
   Page-specific layout lives inline on each page (that markup is the design
   as it came out of the brand kit). Everything here is shared chrome:
   the reset, brand tokens, the reveal/hover motion vocabulary, the header,
   the mobile menu and the footer. */

/* ---------- Brand tokens ---------- */
:root {
  --fb-navy: #0E2530;
  --fb-navy-deep: #091C26;
  --fb-navy-hero: #0E2233;
  --fb-blue-800: #1C4C66;
  --fb-blue-700: #235B79;
  --fb-blue-500: #2E86C0;
  --fb-blue-400: #4C9BD4;
  --fb-amber: #FCB040;
  --fb-cream: #EFE9DF;
  --fb-ink: #22303A;
  --fb-page: #FFFCF6;

  /* Plan colours — shared with the in-app subscription modal. */
  --fb-tracking: #8FBF2E;
  --fb-tracking-dark: #6E9B1F;
  --fb-science: #3BB8EF;

  --fb-display: "Gabarito", system-ui, sans-serif;
  --fb-body: "Instrument Sans", system-ui, sans-serif;
}

/* ---------- Reset / base ---------- */
* { box-sizing: border-box; }

/* scroll-padding-top: anchors (/subscribe#tracking from the short links, the FAQ links) land
   below the sticky #fb-head instead of under it. */
html { scroll-behavior: smooth; scroll-padding-top: 88px; }

body {
  margin: 0;
  background: var(--fb-page);
  color: var(--fb-ink);
  font-family: var(--fb-body);
  -webkit-font-smoothing: antialiased;
}

p, li, dd, figcaption { text-wrap: pretty; }

a { color: var(--fb-blue-500); text-decoration: none; }
a:hover { color: var(--fb-blue-700); }

img, video { max-width: 100%; }

::selection { background: #FCE0AE; }

:focus-visible {
  outline: 3px solid var(--fb-amber);
  outline-offset: 2px;
  border-radius: 4px;
}

.fb-sr {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* Skip link — visible only once focused. */
.fb-skip {
  position: absolute;
  left: 12px; top: -60px;
  z-index: 200;
  padding: 12px 20px;
  border-radius: 0 0 12px 12px;
  background: var(--fb-blue-700);
  color: #fff;
  font-weight: 700;
  transition: top .18s ease;
}
.fb-skip:focus { top: 0; color: #fff; }

/* ---------- Motion vocabulary ---------- */
@keyframes fb-rise { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
@keyframes fb-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes fb-bob  { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
@keyframes fb-drift { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } }
@keyframes fb-popin {
  0%   { opacity: 0; transform: translateY(20px) scale(.7); }
  60%  { opacity: 1; transform: translateY(-6px) scale(1.06); }
  100% { opacity: 1; transform: none; }
}
@keyframes fb-ping {
  0%   { transform: scale(.5); opacity: .85; }
  70%  { transform: scale(2); opacity: 0; }
  100% { transform: scale(2); opacity: 0; }
}

/* Scroll reveal */
.fb-rev {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .8s cubic-bezier(.2,.75,.3,1), transform .8s cubic-bezier(.2,.75,.3,1);
}
.fb-rev.fb-in { opacity: 1; transform: none; }

/* Lift on hover */
.fb-card { transition: transform .3s, box-shadow .3s; }
.fb-card:hover { transform: translateY(-7px); box-shadow: 0 34px 60px -34px rgba(35,91,121,.5); }

/* Merch image zoom inside a lifting card */
.fb-mimg { transition: transform .55s cubic-bezier(.2,.75,.3,1); }
.fb-card:hover .fb-mimg { transform: scale(1.07); }

/* Pill buttons */
.fb-badge { transition: transform .2s, box-shadow .2s; }
.fb-badge:hover { transform: translateY(-3px); box-shadow: 0 16px 30px -16px rgba(0,0,0,.5); }

/* Reaction emoji stagger-pop */
.fb-react { transition: transform .25s; }
.fb-react:hover { transform: translateY(-8px) scale(1.08); }
.fb-pop { opacity: 0; transform: translateY(20px) scale(.7); }
.fb-pop.fb-popin { animation: fb-popin .62s cubic-bezier(.34,1.56,.44,1) forwards; }

/* Phone bezel.
   height:auto is load-bearing — the screenshots carry width/height attributes
   for aspect-ratio/CLS, and without this the height attribute wins and the
   phone renders full-resolution tall. */
.fb-phone {
  border-radius: 34px;
  border: 7px solid #05131F;
  box-shadow: 0 40px 80px -34px rgba(0,0,0,.55);
  overflow: hidden;
  background: #fff;
  display: block;
  width: 100%;
  height: auto;
}

/* Headlines on set lines (Erin's fix list 2.1, 3.1, 5.1): each child <span> is one line and never wraps, at any
   width. The page sets a font size small enough for its longest line on a 320px phone. */
.fb-h1-lines > span { display: block; white-space: nowrap; }

/* App promo card (Pages/Shared/_PromoVideo.cshtml). The promos are 9:16 and bring their own
   backdrop and phone, so no bezel: a rounded card the width of its container. */
.fb-promo {
  position: relative;
  width: 100%;
  max-width: 100%;
  aspect-ratio: 9 / 16;
  border-radius: 26px;
  overflow: hidden;
  background: #0E2233;
  box-shadow: 0 40px 80px -34px rgba(0,0,0,.55);
}
.fb-promo video { display: block; width: 100%; height: 100%; object-fit: cover; }

/* The homepage app section's moving map (Erin round 4, 1.1; site.js data-fb-video="lazy"). The still and the video
   share one layer at 55%, the same tint the section's still always had. Both get the same cover crop and 1.35x zoom,
   which also crops the recording's black bars, so the video lands exactly on its poster frame. */
.fb-mapreel { position: absolute; inset: 0; z-index: 0; overflow: hidden; opacity: .55; pointer-events: none; }
.fb-mapreel > img,
.fb-mapreel > video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transform: scale(1.35); }

/* Street Team pulse pin */
.fb-pin {
  position: absolute;
  width: 13px; height: 13px;
  border-radius: 50%;
}
.fb-pin-ping { animation: fb-ping 2.6s ease-out infinite; }

/* FAQ accordion */
.fb-q { list-style: none; cursor: pointer; }
.fb-q::-webkit-details-marker { display: none; }
details[open] .fb-plus { transform: rotate(45deg); }

/* ---------- Header ---------- */
.fb-topbar {
  height: 5px;
  width: 100%;
  background: linear-gradient(90deg, #235B79 0%, #2E86C0 32%, #4C9BD4 55%, #FCB040 100%);
  position: relative;
  z-index: 70;
}

#fb-head {
  position: sticky;
  top: 0;
  z-index: 60;
  backdrop-filter: blur(10px);
  background: rgba(255,252,246,.72);
  border-bottom: 1px solid rgba(35,91,121,.1);
  transition: background .3s, box-shadow .3s;
}

.fb-head-in {
  max-width: 1240px;
  margin: 0 auto;
  padding: 11px 30px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.fb-logo { display: flex; align-items: center; flex: none; }
.fb-logo img { height: 50px; width: auto; object-fit: contain; display: block; }

#fb-nav {
  display: flex;
  align-items: center;
  gap: 2px;
  font-size: 14.5px;
  font-weight: 600;
  color: #3B4C57;
}
#fb-nav a { padding: 8px 13px; border-radius: 9px; color: #3B4C57; }
#fb-nav a:hover { background: rgba(35,91,121,.07); color: var(--fb-blue-700); }
#fb-nav a[aria-current="page"] { color: var(--fb-blue-700); background: rgba(35,91,121,.08); }

/* The App menu: Overview, Park Science, Park Tracking (JP 2026-10-19). The button reads like the links beside it, with
   a caret that turns when it opens. A mouse opens it on hover; a tap, click or Enter toggles .is-open (site.js). */
.fb-drop { position: relative; }
.fb-drop-btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 13px; border: 0; border-radius: 9px; background: none;
  font: inherit; color: #3B4C57; cursor: pointer;
}
.fb-drop-btn:hover,
.fb-drop.is-open .fb-drop-btn { background: rgba(35,91,121,.07); color: var(--fb-blue-700); }
.fb-drop-btn.is-current { color: var(--fb-blue-700); background: rgba(35,91,121,.08); }
.fb-drop-caret { flex: none; transition: transform .2s ease; }
.fb-drop.is-open .fb-drop-caret { transform: rotate(180deg); }
.fb-drop-menu {
  position: absolute; top: calc(100% + 10px); left: -6px; z-index: 65;
  min-width: 248px; padding: 6px;
  display: none; flex-direction: column; gap: 2px;
  background: #fff; border-radius: 14px;
  box-shadow: 0 22px 44px -20px rgba(14,34,51,.38), 0 0 0 1px rgba(35,91,121,.1);
}
/* Bridges the gap under the button, so moving the mouse down to the menu doesn't close it. */
.fb-drop-menu::before { content: ""; position: absolute; left: 0; right: 0; top: -12px; height: 12px; }
.fb-drop.is-open .fb-drop-menu { display: flex; animation: fb-fade .15s both; }
@media (hover: hover) {
  .fb-drop:hover .fb-drop-menu { display: flex; }
  .fb-drop:hover .fb-drop-caret { transform: rotate(180deg); }
}
#fb-nav .fb-drop-menu a { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; border-radius: 10px; }
#fb-nav .fb-drop-menu a strong { font-weight: 700; color: #0E2233; }
#fb-nav .fb-drop-menu a span { font-size: 12.5px; font-weight: 500; color: #6B7C87; }
#fb-nav .fb-drop-menu a:hover strong,
#fb-nav .fb-drop-menu a[aria-current="page"] strong { color: var(--fb-blue-700); }

.fb-cta-sub {
  padding: 10px 20px;
  border-radius: 999px;
  background: var(--fb-amber);
  color: #0E2233 !important;
  font-weight: 800;
  margin-left: 14px;
  box-shadow: 0 10px 22px -12px rgba(252,176,64,.95);
}
.fb-cta-sub:hover,
#fb-nav a.fb-cta-sub:hover { background: #FFC062; }
.fb-cta-sub:active,
#fb-nav a.fb-cta-sub:active { background: #F2A12C; }
/* On /subscribe the button is the current page: it stays amber, not the nav's pale "current" tint. */
#fb-nav a.fb-cta-sub[aria-current="page"] { background: var(--fb-amber); }

.fb-cta-in {
  padding: 10px 20px;
  border-radius: 999px;
  background: var(--fb-blue-700);
  color: #fff !important;
  font-weight: 700;
  margin-left: 8px;
}
/* Hover, keyboard focus and press stay dark blue under the white text (Erin 1.4). */
.fb-cta-in:hover,
.fb-cta-in:focus-visible,
#fb-nav a.fb-cta-in:hover,
#fb-nav a.fb-cta-in:focus-visible { background: #1C4C66; }
.fb-cta-in:active,
#fb-nav a.fb-cta-in:active { background: #143A50; }

/* Mobile: compact CTAs + a hamburger that opens the full menu.
   The desktop nav is the only path to About / The App / Merch, so the
   burger has to exist — without it those pages are footer-only on a phone. */
#fb-mobcta { display: none; align-items: center; gap: 8px; }
#fb-mobcta .fb-cta-sub,
#fb-mobcta .fb-cta-in { margin-left: 0; padding: 10px 16px; font-size: 14px; }

.fb-burger {
  display: none;
  width: 44px; height: 44px;
  flex: none;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  border: 1.5px solid rgba(35,91,121,.22);
  background: rgba(255,255,255,.6);
  color: var(--fb-blue-700);
  cursor: pointer;
  padding: 0;
}
.fb-burger:hover { background: #fff; }
.fb-burger span {
  display: block;
  position: relative;
  width: 19px; height: 2px;
  border-radius: 2px;
  background: currentColor;
  transition: transform .25s ease, background .1s ease;
}
.fb-burger span::before,
.fb-burger span::after {
  content: "";
  position: absolute;
  left: 0;
  width: 19px; height: 2px;
  border-radius: 2px;
  background: currentColor;
  transition: transform .25s ease, top .25s ease;
}
.fb-burger span::before { top: -6px; }
.fb-burger span::after { top: 6px; }
body.fb-menu-open .fb-burger span { background: transparent; }
body.fb-menu-open .fb-burger span::before { top: 0; transform: rotate(45deg); }
body.fb-menu-open .fb-burger span::after { top: 0; transform: rotate(-45deg); }

#fb-menu {
  position: fixed;
  inset: 0;
  z-index: 90;
  background: rgba(14,34,51,.97);
  backdrop-filter: blur(6px);
  display: none;
  flex-direction: column;
  padding: 92px 30px 40px;
  overflow-y: auto;
  overscroll-behavior: contain;
}
body.fb-menu-open #fb-menu { display: flex; animation: fb-fade .2s both; }
body.fb-menu-open { overflow: hidden; }

#fb-menu a {
  display: block;
  padding: 17px 4px;
  font-family: var(--fb-display);
  font-weight: 800;
  font-size: 26px;
  letter-spacing: -.01em;
  color: #fff;
  border-bottom: 1px solid rgba(255,255,255,.12);
}
#fb-menu a:hover { color: var(--fb-amber); }
/* The App's three pages in the phone menu: a fold that reads like the links around it, its pages indented under it. */
#fb-menu .fb-menu-group summary {
  display: flex; align-items: center; justify-content: space-between;
  padding: 17px 4px; list-style: none; cursor: pointer;
  font-family: var(--fb-display); font-weight: 800; font-size: 26px; letter-spacing: -.01em;
  color: #fff; border-bottom: 1px solid rgba(255,255,255,.12);
}
#fb-menu .fb-menu-group summary::-webkit-details-marker { display: none; }
#fb-menu .fb-menu-group summary::after {
  content: ""; width: 10px; height: 10px; margin-right: 6px;
  border-right: 2.5px solid currentColor; border-bottom: 2.5px solid currentColor;
  transform: translateY(-3px) rotate(45deg); transition: transform .2s ease;
}
#fb-menu .fb-menu-group[open] summary::after { transform: translateY(2px) rotate(-135deg); }
#fb-menu .fb-menu-group summary:hover { color: var(--fb-amber); }
#fb-menu .fb-menu-group a { padding: 13px 4px 13px 20px; font-size: 20px; color: rgba(255,255,255,.86); }
#fb-menu .fb-menu-group a:hover { color: var(--fb-amber); }
#fb-menu .fb-menu-cta {
  margin-top: 28px;
  border-bottom: 0;
  border-radius: 999px;
  text-align: center;
  font-size: 17px;
  padding: 16px 24px;
  background: var(--fb-amber);
  color: #0E2233;
}
#fb-menu .fb-menu-cta.alt {
  margin-top: 12px;
  background: transparent;
  border: 1.5px solid rgba(255,255,255,.4);
  color: #fff;
}
#fb-menu a.fb-menu-cta:hover { color: #0E2233; background: #FFC062; }
#fb-menu a.fb-menu-cta.alt:hover { color: #fff; background: rgba(255,255,255,.1); }

/* ---------- Signed-in state ----------
   Both CTAs are always in the markup; which one shows is decided by a class the
   inline head script stamps on <html> from the fb_signedin cookie. Rendering both
   and hiding one (rather than rewriting the link in JS) is what keeps it from
   flashing "Sign In" on every load for a member. Signed out is the default, so a
   browser with no cookie — and any crawler — sees the sign-in link. */
.fb-when-in { display: none !important; }
:root.fb-signed-in .fb-when-in { display: inline-flex !important; }
:root.fb-signed-in .fb-when-out { display: none !important; }
/* The footer column stacks its links, so that one has to stay block. */
:root.fb-signed-in .fb-foot-col .fb-when-in { display: block !important; }
:root.fb-signed-in #fb-menu .fb-when-in { display: block !important; }

/* ---------- Footer ---------- */
.fb-footer { background: var(--fb-navy-hero); color: #fff; }
.fb-foot {
  max-width: 1240px;
  margin: 0 auto;
  padding: 58px 30px 22px;
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1fr;
  gap: 36px;
}
.fb-foot-brand img { height: 40px; width: auto; object-fit: contain; margin-bottom: 18px; display: block; }
.fb-foot-blurb { margin: 0 0 16px; font-size: 14.5px; line-height: 1.6; color: rgba(255,255,255,.7); max-width: 34ch; }
.fb-foot h2 {
  margin: 0 0 16px;
  font-family: var(--fb-display);
  font-size: 11px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: rgba(255,255,255,.5);
  font-weight: 800;
}
.fb-foot-col a {
  display: block;
  font-size: 14.5px;
  color: rgba(255,255,255,.82);
  margin-bottom: 11px;
}
.fb-foot-col a:last-child { margin-bottom: 0; }
.fb-foot-col a:hover { color: var(--fb-amber); }

.fb-foot-email {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  font-size: 14.5px;
  color: rgba(255,255,255,.82);
  margin-bottom: 18px;
}
.fb-foot-email > span:first-child { word-break: break-word; user-select: all; }
.fb-copy {
  padding: 4px 12px;
  border-radius: 999px;
  border: 1.5px solid rgba(255,255,255,.35);
  background: transparent;
  color: #fff;
  font-family: var(--fb-body);
  font-size: 12.5px;
  font-weight: 700;
  cursor: pointer;
  min-width: 72px;
}
.fb-copy:hover { background: rgba(255,255,255,.12); }
.fb-copy:active { background: rgba(255,255,255,.2); }
/* Read by screen readers, not shown: "Email address copied". */
.fb-sr {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.fb-social { display: flex; gap: 11px; }
.fb-social a {
  width: 38px; height: 38px;
  border-radius: 50%;
  border: 1.5px solid rgba(255,255,255,.2);
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255,255,255,.85);
  transition: border-color .2s, color .2s, background .2s;
}
.fb-social a:hover { border-color: var(--fb-amber); color: var(--fb-amber); background: rgba(252,176,64,.1); }

.fb-foot-legal {
  max-width: 1240px;
  margin: 0 auto;
  padding: 20px 30px 30px;
  border-top: 1px solid rgba(255,255,255,.1);
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  justify-content: space-between;
  font-size: 12.5px;
  color: rgba(255,255,255,.5);
}

/* ---------- Breakpoints (shared chrome only) ---------- */
@media (max-width: 960px) {
  #fb-nav { display: none !important; }
  #fb-mobcta { display: flex !important; }
  .fb-burger { display: inline-flex; }
  .fb-logo img { height: 42px; }
  .fb-head-in { padding: 9px 18px; gap: 12px; }
}

@media (max-width: 640px) {
  .fb-foot { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important; }
  /* The brand block carries the email address, whose min-content width was
     dragging column one wide and squeezing the three link columns. Full width
     on mobile keeps the address on one line AND the links evenly split. */
  .fb-foot-brand { grid-column: 1 / -1; }
  .fb-head-in { padding: 9px 14px; }
}

@media (max-width: 560px) {
  #fb-mobcta .fb-cta-in { display: none; }
}

/* ---------- Reduced motion ----------
   The design leans hard on drift, bob, ping and pop. Honour the OS setting:
   keep everything visible, stop everything moving. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  .fb-rev { opacity: 1 !important; transform: none !important; }
  .fb-pop { opacity: 1 !important; transform: none !important; }
}

/* ---------- Print ---------- */
@media print {
  #fb-head, #fb-menu, .fb-topbar { display: none !important; }
  .fb-rev { opacity: 1 !important; transform: none !important; }
  body { background: #fff; }
}