/* ============================================
   GWF Guide — Design tokens
   A lodge-in-the-woods system for Beavers Bend/Broken Bow.
   Palette: deep pine, lantern amber, lake teal, birch paper.
   Type: Fraunces (display, woodsy character) + Public Sans (body) + JetBrains Mono (codes).
   Signature: topographic contour texture + trail-blaze section markers.
   ============================================ */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400;9..144,600;9..144,700&family=Public+Sans:wght@400;500;600;700&family=JetBrains+Mono:wght@500;600&display=swap');

:root {
  --pine: #1f3a2e;
  --pine-dark: #142a20;
  --birch: #f3ecdd;
  --paper: #fbf7ee;
  --amber: #c6811f;
  --amber-light: #e3a94a;
  --lake: #2e6e68;
  --bark: #2a241d;
  --bark-soft: #5b5346;
  --rust: #8c3b2e;
  --line: rgba(42, 36, 29, 0.12);

  --font-display: 'Fraunces', serif;
  --font-body: 'Public Sans', system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', monospace;

  --radius: 14px;
  --shadow: 0 8px 24px rgba(20, 42, 32, 0.12);
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--font-body);
  background: var(--paper);
  color: var(--bark);
  line-height: 1.55;
}

img, svg { max-width: 100%; display: block; }

a { color: var(--lake); text-decoration-color: rgba(46, 110, 104, 0.35); text-underline-offset: 3px; }
a:hover { text-decoration-color: var(--lake); }

h1, h2, h3 {
  font-family: var(--font-display);
  color: var(--pine-dark);
  margin: 0 0 0.4em;
  letter-spacing: -0.01em;
}

h1 { font-size: clamp(2rem, 5vw, 3.2rem); font-weight: 600; line-height: 1.05; }
h2 { font-size: clamp(1.4rem, 3vw, 1.9rem); font-weight: 600; }
h3 { font-size: 1.05rem; font-weight: 600; }

p { margin: 0 0 1em; color: var(--bark-soft); }

code, .mono { font-family: var(--font-mono); }

/* Topographic contour texture, used sparingly as a background signature */
.topo {
  position: relative;
  overflow: hidden;
}
.topo::before {
  content: '';
  position: absolute;
  inset: 0;
  opacity: 0.10;
  background-image:
    repeating-radial-gradient(ellipse at 20% 30%, transparent 0, transparent 26px, var(--paper) 27px, transparent 28px),
    repeating-radial-gradient(ellipse at 80% 70%, transparent 0, transparent 34px, var(--paper) 35px, transparent 36px);
  pointer-events: none;
}

/* Header */
.site-header {
  background: var(--pine);
  color: var(--birch);
  padding: 28px 24px;
  position: relative;
}
.site-header .eyebrow {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--amber-light);
  margin-bottom: 10px;
}
.site-header h1 { color: var(--paper); }
.site-header .tagline { color: rgba(243, 236, 221, 0.75); margin: 6px 0 0; }

.wrap {
  max-width: 880px;
  margin: 0 auto;
  padding: 0 24px;
}

.avatar-circle {
  width: 64px; height: 64px; margin: 0 auto 14px;
  border-radius: 50%; border: 2px solid rgba(243,236,221,0.5);
  display: flex; align-items: center; justify-content: center;
  color: var(--paper);
}
.avatar-circle svg { width: 28px; height: 28px; }
.hero-contacts { display: flex; justify-content: center; gap: 14px; margin: 20px 0 4px; }
.hero-contact-btn {
  width: 38px; height: 38px; border-radius: 50%;
  border: 1px solid rgba(243,236,221,0.4);
  display: flex; align-items: center; justify-content: center;
  color: var(--paper);
}
.hero-contact-btn svg { width: 16px; height: 16px; }
.checkbar {
  display: flex; justify-content: space-between;
  gap: 24px;
  max-width: 420px;
  margin: 30px auto 0;
  background: rgba(20,42,32,0.5); border-radius: 10px;
  padding: 12px 18px;
  font-size: 0.82rem; color: var(--paper);
  text-align: center;
}
.checkbar > div { flex: 1; }
.checkbar-label { display: block; color: rgba(243,236,221,0.65); font-size: 0.72rem; margin-bottom: 2px; }
.fab-chat {
  position: fixed; bottom: 24px; right: 24px;
  width: 52px; height: 52px; border-radius: 50%;
  background: var(--pine); color: var(--paper);
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 6px 16px rgba(20,42,32,0.3);
  z-index: 50;
}
.fab-chat svg { width: 22px; height: 22px; }

/* Nav pills, used on the hub page */
.nav-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px;
  margin-top: 28px;
}
.nav-card {
  background: var(--birch);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 22px;
  text-decoration: none;
  color: var(--bark);
  display: block;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.nav-card:hover { transform: translateY(-2px); box-shadow: var(--shadow); }
.nav-card h3 { color: var(--pine-dark); margin-bottom: 6px; }
.nav-card p { margin: 0; font-size: 0.92rem; }
.nav-card .blaze { margin-bottom: 12px; }

/* Trail blaze markers — real trail markers in Beavers Bend use painted shapes on trees,
   so each guidebook category gets a shape+color instead of a number (these are categories, not steps) */
.blaze {
  width: 26px;
  height: 26px;
  display: inline-flex;
}
.blaze svg { width: 100%; height: 100%; }

/* Section cards */
.section-card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 26px;
  margin-bottom: 20px;
  scroll-margin-top: 20px;
}
.section-card .section-head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 6px;
}
.section-card .summary { font-size: 0.95rem; margin-bottom: 18px; color: var(--bark-soft); }

.group-title {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--lake);
  margin: 22px 0 4px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
}
.group-title:first-of-type { margin-top: 4px; padding-top: 0; border-top: none; }
.group-title + .item { border-top: none; padding-top: 4px; }

.item {
  padding: 14px 0;
  border-top: 1px solid var(--line);
}
.item a { font-weight: 600; }
.item:first-child { border-top: none; }
.item h4 {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--pine-dark);
  margin: 0 0 4px;
}
.item p { margin: 0; font-size: 0.93rem; }
.item .code-value {
  display: inline-block;
  background: var(--birch);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 2px 8px;
  font-family: var(--font-mono);
  font-size: 0.85rem;
  color: var(--pine-dark);
}

/* Top icon bar — simple mirrored header: home icon left, title centered,
   share icon right. Kept to one icon per side on purpose: a lopsided
   icon count (previously 3 left / 1 right) is what read as "off-center",
   not the title placement. */
.top-bar {
  background: var(--pine);
}
.top-bar-inner {
  max-width: 880px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  column-gap: 10px;
  padding: 12px 24px;
  box-sizing: border-box;
}
.top-bar-left { justify-self: start; }
.top-bar-right { justify-self: end; }
.top-bar-title {
  justify-self: center;
  max-width: 100%;
  font-family: var(--font-display);
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--paper);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: center;
}
.top-bar-icon {
  background: none; border: none; padding: 0;
  color: rgba(243,236,221,0.85);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
}
.top-bar-icon svg { width: 27px; height: 27px; }
.top-bar-spacer { flex: 1; }

/* Bottom tab bar */
body { padding-bottom: 0; }
body.has-bottom-nav { padding-bottom: 88px; }
body.home-page { background: var(--pine); }
.bottom-nav {
  position: fixed; bottom: 0; left: 0; right: 0;
  background: var(--pine-dark);
  border-top: 1px solid rgba(243,236,221,0.12);
  z-index: 60;
}
.bottom-nav-inner {
  display: flex;
}
@media (min-width: 900px) {
  .bottom-nav-inner {
    max-width: 480px;
    margin: 0 auto;
  }
}
.bottom-nav-tab {
  flex: 1;
  display: flex; flex-direction: column; align-items: center; gap: 4.5px;
  padding: 15px 6px 18px;
  color: rgba(243,236,221,0.55);
  text-decoration: none;
  font-size: 1.02rem;
  font-family: var(--font-body);
  letter-spacing: 0.02em;
}
.bottom-nav-tab.active { color: var(--paper); }
.bottom-nav-icon { width: 30px; height: 30px; }
.bottom-nav-icon svg { width: 100%; height: 100%; }
.has-bottom-nav .fab-chat { bottom: 96px; }

/* Hero photo background (Home page) */
.hero-photo {
  position: relative;
  background-image: linear-gradient(180deg, rgba(20,42,32,0.55) 0%, rgba(20,42,32,0.75) 60%, var(--pine) 100%), url('images/gwf-exterior.jpg');
  background-size: cover;
  background-position: center;
  /* Fill the actual screen (minus the bottom nav) instead of a fixed pixel
     height. A fixed height only looks right on the one screen size it was
     tuned for -- taller phones and desktop windows were both leaving an
     empty gap of solid background between the hero and the nav bar. 100dvh
     (not 100vh) avoids the gap mobile Safari's address bar would otherwise
     cause. */
  min-height: 380px;
  min-height: calc(100dvh - 88px);
  display: flex;
  align-items: center;
}
.hero-photo::before { display: none; }
.hero-photo .wrap { padding-top: 40px; padding-bottom: 28px; width: 100%; }

/* Desktop: the hero photo was cropping to a short strip at 380px on wide
   screens (fine for a phone, awkward on a monitor), and the bottom tab bar
   looked like a mobile app bar stretched full-width. Neither needed a
   separate "desktop site" — just wider-viewport rules for these two spots. */



/* Get Started CTA */
.btn-get-started {
  display: block;
  width: 100%;
  max-width: 320px;
  margin: 28px auto 0;
  text-align: center;
  background: var(--amber);
  color: var(--pine-dark);
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 1.15rem;
  letter-spacing: 0.03em;
  text-decoration: none;
  padding: 16px 20px;
  border-radius: 999px;
}
.btn-get-started:hover { background: var(--amber-light); }

.hero-help-link {
  display: table;
  margin: 18px auto 0;
  padding: 9px 20px;
  background: rgba(251,247,238,0.16);
  border: 1px solid rgba(243,236,221,0.4);
  border-radius: 999px;
  color: var(--paper);
  font-size: 0.85rem;
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
}
.hero-help-link:hover { background: rgba(251,247,238,0.28); }


/* Header icon button (chat shortcut) */
.head-row { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.icon-btn {
  width: 40px; height: 40px; border-radius: 50%;
  background: rgba(243,236,221,0.12); border: 1px solid rgba(243,236,221,0.3);
  display: flex; align-items: center; justify-content: center;
  color: var(--paper); flex-shrink: 0; margin-top: 4px;
}
.icon-btn svg { width: 18px; height: 18px; }

/* Info grid — Touch Stay-style category cards */
.info-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.info-card {
  background: var(--birch);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 26px 14px;
  text-align: center;
  font-family: var(--font-body);
  font-size: 1rem;
  color: var(--bark);
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}
.info-card:hover { border-color: var(--amber); }
.info-card-icon { width: 42px; height: 42px; color: var(--pine); }
.info-card-icon svg { width: 100%; height: 100%; }
@media (min-width: 900px) {
  .info-card { padding: 32px 16px; font-size: 1.1rem; gap: 14px; }
  .info-card-icon { width: 50px; height: 50px; }
}

/* Modal drill-down */
.modal-backdrop {
  display: none;
  position: fixed; inset: 0;
  background: rgba(20, 42, 32, 0.55);
  align-items: center; justify-content: center;
  padding: 20px; z-index: 100;
}
.modal-backdrop.open { display: flex; }
.modal {
  display: none;
  background: var(--paper);
  border-radius: 16px;
  max-width: 420px; width: 100%;
  max-height: 80vh;
  overflow-y: auto;
  padding: 32px 24px 24px;
  position: relative;
}
.modal.open { display: block; }
.modal-close, .modal-back {
  position: absolute; top: 16px;
  width: 32px; height: 32px; border-radius: 50%;
  background: var(--birch); border: 1px solid var(--line);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; color: var(--bark);
}
.modal-close { right: 16px; }
.modal-back { left: 16px; }
.modal-close svg, .modal-back svg { width: 16px; height: 16px; }
.modal-icon {
  width: 44px; height: 44px; margin: 0 auto 14px;
  border-radius: 50%; background: var(--birch);
  display: flex; align-items: center; justify-content: center;
  color: var(--pine);
}
.modal-icon svg { width: 22px; height: 22px; }
.modal-title {
  text-align: center;
  font-size: 1.15rem;
  margin-bottom: 18px;
}
.list-row {
  width: 100%;
  display: flex; justify-content: space-between; align-items: center;
  background: none; border: none; border-top: 1px solid var(--line);
  padding: 14px 4px;
  font-family: var(--font-body); font-size: 0.94rem; color: var(--bark);
  cursor: pointer; text-align: left;
}
.list-row:first-child { border-top: none; }
.list-row svg { width: 16px; height: 16px; color: var(--bark-soft); flex-shrink: 0; }
.list-row:hover { color: var(--pine-dark); }
.content-item { padding: 12px 0; border-top: 1px solid var(--line); }
.content-item:first-child { border-top: none; padding-top: 0; }
.content-item h4 { font-size: 0.95rem; font-weight: 600; color: var(--pine-dark); margin: 0 0 6px; }
.content-item .body { font-size: 0.9rem; color: var(--bark-soft); line-height: 1.6; }
.content-item .body ul { margin: 6px 0; padding-left: 20px; }
.content-item .body li { margin-bottom: 4px; }
.content-item .body a { color: var(--lake); }

/* Jump nav */
.jump-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 22px 0 28px;
}
.jump-nav a {
  font-family: var(--font-mono);
  font-size: 0.76rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  background: var(--birch);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 7px 14px;
  color: var(--bark);
  text-decoration: none;
}
.jump-nav a:hover { border-color: var(--amber); color: var(--pine-dark); }

/* Checklist */
.room-block {
  margin-bottom: 22px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--paper);
}
.room-block summary {
  cursor: pointer;
  list-style: none;
  padding: 16px 20px;
  background: var(--birch);
  font-family: var(--font-display);
  font-weight: 600;
  color: var(--pine-dark);
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.room-block summary::-webkit-details-marker { display: none; }
.room-block .progress-tag {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--bark-soft);
  font-weight: 500;
}
.task-list { padding: 6px 20px 18px; }
.task-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 9px 0;
  border-top: 1px solid var(--line);
}
.task-row:first-child { border-top: none; }
.task-row input[type="checkbox"] {
  margin-top: 3px;
  width: 18px;
  height: 18px;
  accent-color: var(--pine);
  flex-shrink: 0;
}
.task-row label { font-size: 0.93rem; }
.task-row.done label { color: var(--bark-soft); text-decoration: line-through; text-decoration-color: rgba(91,83,70,0.4); }

.reset-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin: 22px 0;
  padding: 16px 18px;
  background: var(--pine);
  border-radius: var(--radius);
  color: var(--paper);
  flex-wrap: wrap;
}
.reset-bar .overall { font-family: var(--font-mono); font-size: 0.85rem; }
button.btn {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.85rem;
  background: var(--amber);
  color: var(--pine-dark);
  border: none;
  border-radius: 999px;
  padding: 9px 18px;
  cursor: pointer;
}
button.btn:hover { background: var(--amber-light); }
button.btn.secondary {
  background: transparent;
  color: var(--paper);
  border: 1px solid rgba(243,236,221,0.4);
}
button.btn.secondary:hover { border-color: var(--paper); }

/* Chat */
.chat-shell {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--paper);
  display: flex;
  flex-direction: column;
  height: 62vh;
  min-height: 420px;
  overflow: hidden;
}
.chat-log {
  flex: 1;
  overflow-y: auto;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.msg { max-width: 80%; padding: 10px 14px; border-radius: 14px; font-size: 0.93rem; }
.msg.bot { background: var(--birch); align-self: flex-start; border-bottom-left-radius: 4px; }
.msg.user { background: var(--pine); color: var(--paper); align-self: flex-end; border-bottom-right-radius: 4px; }
.msg.pending { color: var(--bark-soft); font-style: italic; }
.chat-input-row {
  display: flex;
  gap: 10px;
  padding: 14px;
  border-top: 1px solid var(--line);
  background: var(--birch);
}
.chat-input-row input {
  flex: 1;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 10px 16px;
  font-family: var(--font-body);
  font-size: 0.93rem;
  background: var(--paper);
}
.chat-input-row input:focus { outline: 2px solid var(--amber); outline-offset: 1px; }
.chat-suggest {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 0 20px 16px;
}
.chat-suggest button {
  font-family: var(--font-body);
  font-size: 0.82rem;
  background: var(--birch);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 6px 14px;
  cursor: pointer;
  color: var(--bark);
}
.chat-suggest button:hover { border-color: var(--amber); }

/* QR */
.qr-block {
  background: var(--birch);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 24px;
  text-align: center;
  margin-top: 24px;
}
.print-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 20px;
  background: var(--pine);
  color: var(--paper);
  border: none;
  border-radius: 999px;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.88rem;
  cursor: pointer;
}
.print-btn:hover { background: var(--pine-dark); }
.print-btn svg { width: 18px; height: 18px; }

/* Full linear guide content, built for printing only -- see buildPrintView()
   in guide.html. Hidden on screen; @media print below flips this on and
   hides everything else on the page. */
#print-view { display: none; }
#print-view h1 { font-size: 1.6rem; margin-bottom: 4px; }
#print-view h2 { font-size: 1.2rem; margin: 22px 0 6px; border-bottom: 1px solid var(--line); padding-bottom: 4px; }
#print-view h3 { font-size: 1rem; margin: 12px 0 4px; }
#print-view .print-item { margin-bottom: 8px; font-size: 0.92rem; }

@media print {
  body > *:not(#print-view) { display: none !important; }
  #print-view { display: block !important; }
}

/* Footer / status note */
.status-note {
  background: rgba(198, 129, 31, 0.12);
  border: 1px dashed var(--amber);
  border-radius: 10px;
  padding: 14px 18px;
  font-size: 0.87rem;
  color: var(--bark);
  margin-bottom: 22px;
}

footer {
  text-align: center;
  padding: 40px 24px 60px;
  font-size: 0.82rem;
  color: var(--bark-soft);
}

.back-link {
  display: inline-block;
  margin: 24px 0 4px;
  font-family: var(--font-mono);
  font-size: 0.82rem;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .nav-card { transition: none; }
}