/* George W. Pirtle Scout Reservation — shared site styles
   East Texas Area Council

   Palette is drawn from the camp itself: the deep green of the East Texas
   pinewoods, the blue of Lake Murvaul, and the orange that has been the
   traditional Crew 777 staff color. Nehi purple is held in reserve for the
   history page, where it belongs. */

:root {
  --pine: #1f4d33;
  --pine-deep: #143222;
  --pine-soft: #2f6b48;
  --lake: #1d6f8f;
  --lake-soft: #cfe4ec;
  --orange: #d4711f;
  --orange-deep: #b25c14;
  --orange-soft: #f6dcc2;
  --nehi: #5b3a86;
  --nehi-soft: #e6dcf2;

  --tan: #f6f2e8;
  --tan-deep: #ece5d5;
  --ink: #1e2a24;
  --muted: #5d6b63;
  --line: #ddd5c4;
  --white: #ffffff;

  --radius: 14px;
  --radius-sm: 8px;
  --maxw: 1100px;
  --shadow: 0 10px 30px rgba(20, 50, 34, 0.12);
  --shadow-sm: 0 2px 8px rgba(20, 50, 34, 0.08);
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-display: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
}

* { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family: var(--font);
  color: var(--ink);
  background: var(--tan);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; }

a { color: var(--pine); text-decoration: underline; text-underline-offset: 2px; }
a:hover { color: var(--orange-deep); }

h1, h2, h3 {
  font-family: var(--font-display);
  line-height: 1.2;
  margin: 0 0 0.5em;
  font-weight: 700;
}
h1 { font-size: clamp(2rem, 5vw, 3.1rem); }
h2 { font-size: clamp(1.5rem, 3.2vw, 2.1rem); }
h3 { font-size: 1.2rem; }

p { margin: 0 0 1.1em; }

.container {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 24px;
}
.container--narrow { max-width: 780px; }

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

/* Keyboard users get a clearly visible focus ring everywhere. */
:focus-visible {
  outline: 3px solid var(--orange);
  outline-offset: 2px;
  border-radius: 3px;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--orange);
  color: var(--white);
  padding: 12px 20px;
  z-index: 200;
  text-decoration: none;
  font-weight: 700;
}
.skip-link:focus {
  left: 0;
  color: var(--white);
}

/* ---------- Header & navigation ----------
   Fifteen pages is too many for a flat nav, so the links are grouped into
   dropdowns built on native <details>/<summary>. That gives keyboard and
   screen-reader support for free, with no ARIA scaffolding and no JavaScript. */

.site-header {
  background: var(--pine);
  color: var(--white);
  position: sticky;
  top: 0;
  z-index: 100;
  box-shadow: var(--shadow-sm);
}
.site-header .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 68px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 11px;
  color: var(--white);
  text-decoration: none;
  font-weight: 800;
  flex-shrink: 0;
}
.brand:hover { color: var(--white); }

/* The camp logo is a black mark on an opaque white background, so it sits on a
   white badge rather than directly on the green header — otherwise it reads as
   a stray white rectangle. */
.brand-logo {
  height: 46px;
  width: auto;
  flex-shrink: 0;
  display: block;
  background: var(--white);
  border-radius: var(--radius-sm);
  padding: 3px 7px;
}
.brand-text { display: flex; flex-direction: column; line-height: 1.15; }
.brand-name {
  font-family: var(--font-display);
  font-size: 1.22rem;
  letter-spacing: 0.2px;
}
.brand-sub {
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  opacity: 0.78;
}

.nav { display: flex; align-items: center; gap: 2px; }

.nav a,
.nav summary {
  color: var(--white);
  text-decoration: none;
  font-size: 0.93rem;
  font-weight: 600;
  padding: 9px 13px;
  border-radius: var(--radius-sm);
  display: block;
}
.nav > a:hover,
.nav summary:hover {
  background: rgba(255, 255, 255, 0.14);
  color: var(--white);
}

.nav-group { position: relative; }
.nav-group summary {
  cursor: pointer;
  list-style: none;
  white-space: nowrap;
}
.nav-group summary::-webkit-details-marker { display: none; }
.nav-group summary::after {
  content: "";
  display: inline-block;
  width: 0; height: 0;
  margin-left: 7px;
  vertical-align: 2px;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 5px solid currentColor;
  opacity: 0.75;
}
.nav-group[open] summary { background: rgba(255, 255, 255, 0.14); }

.nav-menu {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  min-width: 232px;
  background: var(--white);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 8px;
  z-index: 110;
}
.nav-menu a {
  color: var(--ink);
  font-weight: 500;
  padding: 9px 12px;
  border-radius: var(--radius-sm);
  font-size: 0.93rem;
}
.nav-menu a:hover { background: var(--tan-deep); color: var(--pine); }
.nav-menu a small {
  display: block;
  color: var(--muted);
  font-size: 0.76rem;
  line-height: 1.35;
}

.nav [aria-current="page"],
.nav .is-current {
  box-shadow: inset 0 -3px 0 var(--orange);
}
.nav-menu [aria-current="page"] {
  background: var(--orange-soft);
  box-shadow: none;
  color: var(--pine-deep);
}

/* Mobile nav toggle — a hidden checkbox drives the panel, so still no JS. */
.nav-toggle { display: none; }
.nav-toggle-label { display: none; }

@media (max-width: 900px) {
  .nav-toggle-label {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 44px; height: 44px;
    padding: 10px;
    cursor: pointer;
    border-radius: var(--radius-sm);
  }
  .nav-toggle-label span {
    display: block;
    height: 2px;
    background: var(--white);
    border-radius: 2px;
  }
  .nav-toggle:focus-visible + .nav-toggle-label {
    outline: 3px solid var(--orange);
    outline-offset: 2px;
  }

  .nav {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: var(--pine-deep);
    padding: 10px 14px 20px;
    max-height: calc(100vh - 68px);
    overflow-y: auto;
  }
  .nav-toggle:checked ~ .nav { display: flex; }

  .nav > a, .nav summary { padding: 12px 10px; font-size: 1rem; }

  /* Dropdowns become inline accordions rather than floating panels. */
  .nav-menu {
    position: static;
    box-shadow: none;
    background: rgba(255, 255, 255, 0.07);
    margin: 2px 0 8px;
  }
  .nav-menu a { color: var(--white); }
  .nav-menu a:hover { background: rgba(255, 255, 255, 0.12); color: var(--white); }
  .nav-menu a small { color: rgba(255, 255, 255, 0.65); }
  .nav-menu [aria-current="page"] { background: var(--orange); color: var(--white); }
}

/* ---------- Buttons ---------- */

.btn {
  display: inline-block;
  padding: 13px 26px;
  border-radius: 999px;
  font-weight: 700;
  text-decoration: none;
  font-size: 0.98rem;
  border: 2px solid transparent;
  transition: transform 0.12s ease, background 0.12s ease;
}
.btn:hover { transform: translateY(-1px); }
.btn-primary { background: var(--orange); color: var(--white); }
.btn-primary:hover { background: var(--orange-deep); color: var(--white); }
.btn-secondary { background: var(--pine); color: var(--white); }
.btn-secondary:hover { background: var(--pine-deep); color: var(--white); }
.btn-ghost {
  background: transparent;
  color: var(--white);
  border-color: rgba(255, 255, 255, 0.55);
}
.btn-ghost:hover { background: rgba(255, 255, 255, 0.15); color: var(--white); }
.btn-outline { background: transparent; color: var(--pine); border-color: var(--pine); }
.btn-outline:hover { background: var(--pine); color: var(--white); }

.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin: 22px 0 0;
}

/* ---------- Photo slots ----------
   Real photographs are being supplied later. Until then every photo area is a
   div with a background-image layered over a gradient, never an <img>. A file
   that is not there yet shows a clean tinted block instead of a broken-image
   icon, and aspect-ratio keeps the layout from shifting when it lands. */

.photo {
  background-color: var(--pine-soft);
  background-image: linear-gradient(135deg, var(--pine-soft), var(--lake));
  background-size: cover;
  background-position: center;
  border-radius: var(--radius);
  aspect-ratio: 4 / 3;
  position: relative;
  overflow: hidden;
}
.photo--wide { aspect-ratio: 16 / 9; }
.photo--tall { aspect-ratio: 3 / 4; }

/* Remove the photo--todo class once the real image is in place. */
.photo--todo::after {
  content: "Photo needed: " attr(aria-label);
  position: absolute;
  inset: auto 0 0 0;
  padding: 10px 14px;
  background: rgba(20, 50, 34, 0.82);
  color: var(--white);
  font-size: 0.76rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  line-height: 1.4;
}

/* ---------- Hero ---------- */

.hero {
  position: relative;
  background-color: var(--pine-deep);
  background-image: linear-gradient(160deg, var(--pine-deep), var(--lake));
  background-size: cover;
  background-position: center;
  color: var(--white);
  padding: 84px 0 76px;
  text-align: center;
}
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(20, 50, 34, 0.55), rgba(20, 50, 34, 0.75));
}
.hero .container { position: relative; z-index: 1; }
.hero h1 { color: var(--white); margin-bottom: 0.3em; }
.hero p { font-size: 1.13rem; max-width: 660px; margin-inline: auto; opacity: 0.95; }
.hero .btn-row { justify-content: center; }

.hero--home { padding: 120px 0 110px; }
.hero--page { padding: 60px 0 54px; text-align: left; }
.hero--page p { margin-inline: 0; }
.hero--page .btn-row { justify-content: flex-start; }

.eyebrow {
  display: inline-block;
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 6px 15px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.18);
  border: 1px solid rgba(255, 255, 255, 0.3);
  margin-bottom: 18px;
}
.eyebrow--dark {
  background: var(--orange-soft);
  border-color: var(--orange);
  color: var(--orange-deep);
}

/* ---------- Scout Law band ----------
   The elements of the Scout Law greet everyone who drives through the camp
   gate, so they recur here as a divider between major sections. */

.scout-law {
  background: var(--pine-deep);
  color: var(--white);
  padding: 20px 0;
}
/* The twelve points sit on a single line. They need more room than the standard
   1100px container allows, and the size scales with the viewport so the line
   holds without wrapping. */
.scout-law .container { max-width: 1400px; }
.scout-law ol {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: nowrap;
  justify-content: center;
}
.scout-law li {
  font-family: var(--font-display);
  font-size: clamp(0.68rem, 1.2vw, 1.05rem);
  padding: 0 clamp(4px, 0.62vw, 14px);
  white-space: nowrap;
}
.scout-law li + li { border-left: 1px solid rgba(255, 255, 255, 0.28); }

/* Below roughly 720px a single line would be too small to read, so it wraps
   instead. The separator on a wrapped line's first item is hidden, which is
   what made the old wrapped layout look broken. */
@media (max-width: 720px) {
  .scout-law ol { flex-wrap: wrap; gap: 6px 0; }
  .scout-law li { font-size: 0.86rem; padding: 0 11px; }
}

/* ---------- Sections ---------- */

.section { padding: 68px 0; }
.section--tight { padding: 44px 0; }
.section--alt { background: var(--tan-deep); }
.section--pine { background: var(--pine); color: var(--white); }
.section--pine h2, .section--pine h3 { color: var(--white); }
.section--pine a { color: var(--orange-soft); }

.section-head { max-width: 700px; margin-bottom: 34px; }
.section-head--center { margin-inline: auto; text-align: center; }
.section-head p { color: var(--muted); font-size: 1.05rem; margin-bottom: 0; }
.section--pine .section-head p { color: rgba(255, 255, 255, 0.85); }

.lede { font-size: 1.15rem; color: var(--muted); }

/* ---------- Cards & grids ---------- */

.grid { display: grid; gap: 24px; }
.grid-2 { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.grid-3 { grid-template-columns: repeat(auto-fit, minmax(268px, 1fr)); }
.grid-4 { grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }

.card {
  background: var(--white);
  border-radius: var(--radius);
  border: 1px solid var(--line);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.card .photo { border-radius: 0; }
.card-body { padding: 22px; flex: 1; display: flex; flex-direction: column; }
.card-body h3 { margin-bottom: 8px; }
.card-body p { color: var(--muted); font-size: 0.96rem; }
.card-body p:last-of-type { margin-bottom: 0; }
.card-link {
  margin-top: auto;
  padding-top: 14px;
  font-weight: 700;
  text-decoration: none;
  color: var(--orange-deep);
}
.card-link::after { content: " →"; }
.card-link:hover { text-decoration: underline; }

.card-tag {
  display: inline-block;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--lake);
  margin-bottom: 8px;
}

/* Whole-card link target, so the card reads as one control. */
.card--link { position: relative; transition: transform 0.14s ease, box-shadow 0.14s ease; }
.card--link:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
.card--link .stretched::after {
  content: "";
  position: absolute;
  inset: 0;
}

/* ---------- Stats ---------- */

.stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 20px;
  text-align: center;
}
.stat-num {
  font-family: var(--font-display);
  font-size: 2.4rem;
  font-weight: 700;
  color: var(--orange);
  line-height: 1.1;
}
.section--pine .stat-num { color: var(--orange-soft); }
.stat-label {
  font-size: 0.88rem;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.07em;
  font-weight: 600;
}
.section--pine .stat-label { color: rgba(255, 255, 255, 0.82); }

/* ---------- Event blocks (rendered from js/events.js) ---------- */

.event-bar {
  background: var(--white);
  border: 1px solid var(--line);
  border-left: 5px solid var(--orange);
  border-radius: var(--radius);
  padding: 22px 26px;
  margin: 0 0 30px;
}
.event-bar .event-date {
  font-family: var(--font-display);
  font-size: 1.45rem;
  font-weight: 700;
  color: var(--pine);
  margin: 0 0 4px;
}
.event-bar .event-where { color: var(--muted); font-size: 0.95rem; margin: 0; }
.event-bar .btn-row { margin-top: 16px; }

.event-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.event-list li {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 16px 20px;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 18px;
}
.event-list .when {
  font-weight: 700;
  color: var(--orange-deep);
  min-width: 155px;
  font-size: 0.95rem;
}
.event-list .what { font-weight: 600; font-size: 1.04rem; }
.event-list .what a { text-decoration: none; }
.event-list .what a:hover { text-decoration: underline; }

.doc-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.doc-list a {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 14px 18px;
  text-decoration: none;
  font-weight: 600;
  color: var(--pine);
}
.doc-list a:hover { border-color: var(--orange); color: var(--orange-deep); }
.doc-list a::before {
  content: "PDF";
  flex-shrink: 0;
  font-size: 0.64rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  background: var(--orange-soft);
  color: var(--orange-deep);
  padding: 4px 7px;
  border-radius: 4px;
}

/* Shown when JavaScript has not replaced a data-driven slot. */
.event-fallback {
  background: var(--white);
  border: 1px dashed var(--line);
  border-radius: var(--radius);
  padding: 20px 24px;
  margin-bottom: 30px;
}
.event-fallback p:last-child { margin-bottom: 0; }

.notice {
  background: var(--lake-soft);
  border-left: 4px solid var(--lake);
  border-radius: var(--radius-sm);
  padding: 16px 20px;
  margin: 0 0 24px;
}
.notice p:last-child { margin-bottom: 0; }
.notice strong { color: var(--pine-deep); }

/* ---------- Prose lists ---------- */

.checklist { list-style: none; margin: 0 0 1.2em; padding: 0; }
.checklist li {
  position: relative;
  padding-left: 30px;
  margin-bottom: 9px;
}
.checklist li::before {
  content: "";
  position: absolute;
  left: 6px;
  top: 0.55em;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--orange);
}

/* A photograph shown in the flow of a page, where the subject actually needs
   to be seen — unlike a hero, which is a backdrop behind text. */
.figure { margin: 30px 0; }
.figure .photo { border-radius: var(--radius); }
.figure figcaption {
  font-size: 0.88rem;
  color: var(--muted);
  margin-top: 10px;
  line-height: 1.5;
}

.split {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 40px;
  align-items: center;
}

/* ---------- Timeline (history) ---------- */

.timeline { list-style: none; margin: 0; padding: 0 0 0 28px; border-left: 3px solid var(--nehi-soft); }
.timeline li { position: relative; padding-bottom: 34px; }
.timeline li:last-child { padding-bottom: 0; }
.timeline li::before {
  content: "";
  position: absolute;
  left: -37px;
  top: 8px;
  width: 15px; height: 15px;
  border-radius: 50%;
  background: var(--nehi);
  border: 3px solid var(--tan);
}
.timeline .year {
  font-family: var(--font-display);
  font-size: 1.35rem;
  font-weight: 700;
  color: var(--nehi);
  display: block;
  margin-bottom: 4px;
}

/* ---------- Footer ---------- */

.site-footer {
  background: var(--pine-deep);
  color: rgba(255, 255, 255, 0.82);
  padding: 56px 0 28px;
  font-size: 0.93rem;
}
.site-footer h3 {
  color: var(--white);
  font-family: var(--font);
  font-size: 0.78rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-bottom: 14px;
}
.site-footer a { color: rgba(255, 255, 255, 0.82); text-decoration: none; }
.site-footer a:hover { color: var(--orange-soft); text-decoration: underline; }
.footer-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 34px;
  padding-bottom: 34px;
}
.footer-grid ul { list-style: none; margin: 0; padding: 0; }
.footer-grid li { margin-bottom: 8px; }
/* Independence notice. This site is not run by the council, so the disclaimer
   is deliberately legible rather than buried in small print. */
.disclaimer {
  background: rgba(0, 0, 0, 0.28);
  border-left: 4px solid var(--orange);
  border-radius: var(--radius-sm);
  padding: 18px 22px;
  margin-bottom: 28px;
  font-size: 0.88rem;
  line-height: 1.6;
}
.disclaimer p { margin: 0 0 8px; }
.disclaimer p:last-child { margin-bottom: 0; }
.disclaimer strong { color: var(--white); }

.footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.16);
  padding-top: 22px;
  display: flex;
  flex-wrap: wrap;
  gap: 12px 24px;
  justify-content: space-between;
  font-size: 0.86rem;
  opacity: 0.8;
}
.social { display: flex; gap: 10px; }
.social a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px; height: 40px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.12);
}
.social a:hover { background: var(--orange); }
.social svg { width: 19px; height: 19px; fill: currentColor; }

@media (max-width: 640px) {
  .hero--home { padding: 76px 0 68px; }
  .section { padding: 50px 0; }
  .event-list .when { min-width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition: none !important; }
  .btn:hover, .card--link:hover { transform: none; }
}