/* ================================================================
   BLUE YOTA — STYLESHEET
   Organized top-to-bottom by location on the page:

   1. DESIGN TOKENS          Custom properties (colors, fonts, spacing)
   2. FONT FACES              @font-face declarations
   3. RESET & BASE            Box model, html/body, base elements
   4. ACCESSIBILITY           Skip link, screen-reader, focus styles
   5. GLOBAL UI               Reading progress bar, back-to-top button
   6. HEADER                  Brand, logo, social links
   7. NAVIGATION & SEARCH     Nav links, dropdowns, hamburger, search overlay
   8. SITE BANNER             Tagline bar below header
   9. ANNOUNCEMENT            Toggle-able announcement bar
   10. MAIN CONTENT LAYOUT    Site main, sections, page headers, utilities
   11. HOMEPAGE               Hero columns, video card, carousel
   12. POST CARDS & GRIDS     Card base, featured card, coming soon, grids
   13. POST LIST              All-posts page list view
   14. TAGS, BADGES, BUTTONS  Topic tags, category badge, buttons
   15. FILTERS                Posts page category/topic filter controls
   16. SINGLE POST            Post header, meta, YouTube hero, footer
   17. PROSE                  Post body typography
   18. PROSE FIGURES           Figure layouts (single, duo, trio, grid, etc.)
   19. REPORT STATS            Structured stats grid for report posts
   20. TRIP PAGES             Trip landing page layout
   21. FOOTER                 Site footer and disclosures
   22. RESPONSIVE (≤768px)    All mobile overrides in one block
   23. ACCESSIBILITY QUERIES  Reduced motion, high contrast
   ================================================================ */

/* ================================================================
   1. DESIGN TOKENS
   ================================================================ */
:root {
  /* Colors — raw palette */
  --blue: #2563eb;
  --blue-light: #dbeafe;
  --blue-dark: #1e40af;
  --gray-950: #0f1117;
  --gray-800: #2d2f36;
  --gray-600: #52555e;
  --gray-400: #9194a0;
  --gray-200: #d5d7de;
  --gray-100: #ecedf0;
  --gray-50: #f7f7f9;
  --white: #ffffff;

  /* Colors — semantic */
  --color-text: var(--gray-950);
  --color-text-muted: var(--gray-600);
  --color-bg: var(--white);
  --color-surface: var(--gray-50);
  --color-border: var(--gray-200);
  --color-accent: var(--blue);
  --color-accent-bg: var(--blue-light);
  --color-focus: var(--blue);

  /* Colors — component-specific */
  --header-bg: #303748;
  --figcaption-bg: #f5f0e8;
  --post-card-bg: #f7f7f9;
  --announcement-bg: #fef3c7;

  /* Typography */
  --font-body: "DM Sans", system-ui, -apple-system, sans-serif;
  --font-heading:
    "Trailhead", "Source Serif 4", Georgia, "Times New Roman", serif;
  --font-button: "National Forest Print", system-ui, -apple-system, sans-serif;

  /* Spacing */
  --space-xs: 0.25rem;
  --space-sm: 0.5rem;
  --space-md: 1rem;
  --space-lg: 1.5rem;
  --space-xl: 2.5rem;
  --space-2xl: 4rem;

  /* Layout */
  --site-width: 1400px;
  --content-width: 1200px;
  --image-max-width: 1200px;
  --header-height: 7.5rem;

  /* Radius */
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 10px;
}

/* ================================================================
   2. FONT FACES
   ================================================================ */
@font-face {
  font-family: "National Forest Extras";
  src:
    url("/fonts/NationalForestExtras.woff2") format("woff2"),
    url("/fonts/NationalForestExtras.woff") format("woff");
  font-weight: normal;
  font-style: normal;
  font-display: fallback;
}

@font-face {
  font-family: "National Forest Print";
  src:
    url("/fonts/NationalForestPrintRegular.woff2") format("woff2"),
    url("/fonts/NationalForestPrintRegular.woff") format("woff");
  font-weight: normal;
  font-style: normal;
  font-display: fallback;
}

@font-face {
  font-family: "National Forest Print";
  src:
    url("/fonts/NationalForestPrintBold.woff2") format("woff2"),
    url("/fonts/NationalForestPrintBold.woff") format("woff");
  font-weight: bold;
  font-style: normal;
  font-display: fallback;
}

@font-face {
  font-family: "National Forest Print";
  src:
    url("/fonts/NationalForestPrintThin.woff2") format("woff2"),
    url("/fonts/NationalForestPrintThin.woff") format("woff");
  font-weight: 100;
  font-style: normal;
  font-display: fallback;
}

@font-face {
  font-family: "National Forest";
  src:
    url("/fonts/NationalForestRegular.woff2") format("woff2"),
    url("/fonts/NationalForestRegular.woff") format("woff");
  font-weight: normal;
  font-style: normal;
  font-display: fallback;
}

@font-face {
  font-family: "Trailhead";
  src:
    url("/fonts/Trailhead-Medium.woff2") format("woff2"),
    url("/fonts/Trailhead-Medium.woff") format("woff");
  font-weight: 500;
  font-style: normal;
  font-display: fallback;
}

/* ================================================================
   3. RESET & BASE
   ================================================================ */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 100%;
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  overflow-x: hidden;
}

body {
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.65;
  color: var(--color-text);
  background-color: var(--header-bg);
  background-image: url("/img/background.png");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-attachment: fixed;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

img {
  display: block;
  max-width: 100%;
  height: auto;
  margin-left: auto;
  margin-right: auto;
}

a {
  color: var(--color-accent);
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
  transition: color 0.15s ease;
}

a:hover {
  color: var(--blue-dark);
}

/* ================================================================
   4. ACCESSIBILITY
   ================================================================ */
:focus-visible {
  outline: 3px solid var(--color-focus);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

.skip-link {
  position: absolute;
  top: -100%;
  left: var(--space-md);
  background: var(--color-accent);
  color: var(--white);
  padding: var(--space-sm) var(--space-md);
  border-radius: 0 0 var(--radius-md) var(--radius-md);
  font-weight: 600;
  font-size: 0.875rem;
  z-index: 1000;
  text-decoration: none;
}

.skip-link:focus {
  top: 0;
}

.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;
}

/* ================================================================
   5. GLOBAL UI
   Fixed/floating elements that appear over page content.
   ================================================================ */

/* Reading progress — thin bar at top of viewport on post pages */
.reading-progress {
  position: fixed;
  top: 0;
  left: 0;
  height: 3px;
  width: 0%;
  background: var(--color-accent);
  z-index: 1000;
  transition: width 0.1s linear;
  pointer-events: none;
}

/* Back-to-top — fixed button, visible after 400px scroll */
.back-to-top {
  position: fixed;
  top: 50%;
  transform: translateY(-50%);
  right: calc((100vw - var(--site-width)) / 2 + var(--space-md));
  width: 40px;
  height: 40px;
  background: var(--header-bg);
  color: white;
  border: none;
  border-radius: 50%;
  font-size: 1.1rem;
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
  z-index: 900;
}

.back-to-top.visible {
  opacity: 0.7;
  pointer-events: auto;
}

.back-to-top:hover {
  opacity: 1;
}

/* ================================================================
   6. HEADER
   ================================================================ */
.site-header {
  position: relative;
  top: 0;
  z-index: 100;
  background: var(--header-bg);
}

.header-inner {
  display: flex;
  align-items: center;
  gap: var(--space-lg);
  max-width: var(--site-width);
  margin: 0 auto;
  padding: 0 var(--space-lg);
  height: var(--header-height);
}

.header-left {
  display: flex;
  align-items: center;
}

/* Brand — logo + site name */
.site-brand {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  text-decoration: none;
  color: white;
  flex-shrink: 0;
}

.site-logo {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  object-fit: contain;
}

.site-name {
  font-family: var(--font-heading);
  font-size: 2rem;
  font-weight: 700;
  letter-spacing: -0.01em;
}

/* Social links — icons next to brand */
.social-links {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  margin-left: var(--space-md);
  padding-left: var(--space-md);
  border-left: 1px solid var(--color-border);
}

.social-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  color: white;
  border-radius: var(--radius-sm);
  transition: color 0.15s ease;
}

.social-link:hover {
  color: var(--color-accent);
}

/* ================================================================
   7. NAVIGATION & SEARCH
   Desktop nav, dropdown menus, mobile hamburger, and search overlay.
   All live within the site header.
   ================================================================ */

/* ── Desktop nav ── */
.site-nav {
  margin-left: auto;
}

.nav-list {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  list-style: none;
}

.nav-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: var(--space-sm) var(--space-md);
  font-size: 0.9rem;
  font-weight: 500;
  color: white;
  text-decoration: none;
  border-radius: var(--radius-md);
  border: none;
  background: none;
  cursor: pointer;
  font-family: inherit;
  transition:
    color 0.15s ease,
    background 0.15s ease;
}

.nav-link:hover,
.nav-link[aria-expanded="true"] {
  color: var(--color-text);
  background: var(--color-surface);
}

/* ── Dropdown menu ── */
.nav-dropdown {
  position: relative;
}

.dropdown-arrow {
  transition: transform 0.2s ease;
}

.nav-dropdown-toggle[aria-expanded="true"] .dropdown-arrow {
  transform: rotate(180deg);
}

.nav-dropdown-menu {
  display: none;
  position: absolute;
  top: 100%;
  right: 0;
  min-width: 180px;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
  padding: var(--space-xs) 0;
  list-style: none;
  z-index: 200;
}

.nav-dropdown-menu.is-open {
  display: block;
}

.dropdown-link {
  display: block;
  padding: var(--space-sm) var(--space-md);
  font-size: 0.875rem;
  color: var(--color-text);
  text-decoration: none;
  transition: background 0.1s ease;
}

.dropdown-link:hover {
  background: var(--color-surface);
  color: var(--color-accent);
}

.dropdown-divider {
  height: 1px;
  background: var(--color-border);
  margin: var(--space-xs) 0;
}

/* ── Mobile hamburger (hidden on desktop, shown via media query) ── */
.nav-toggle {
  display: none;
  flex-direction: column;
  gap: 4px;
  padding: var(--space-sm);
  background: none;
  border: none;
  cursor: pointer;
}

.nav-toggle-bar {
  display: block;
  width: 20px;
  height: 2px;
  background: white;
  border-radius: 2px;
  transition:
    transform 0.2s ease,
    opacity 0.2s ease;
}

/* ── Search overlay (drops below header) ── */
.search-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  background: none;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  cursor: pointer;
  color: white;
  transition:
    color 0.15s,
    border-color 0.15s;
}

.search-toggle:hover {
  color: var(--color-text);
  border-color: var(--color-text);
  background-color: white;
}

.search-overlay {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: var(--color-bg);
  border-bottom: 1px solid var(--color-border);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.06);
  padding: var(--space-md) 0;
}

.search-overlay[hidden] {
  display: none;
}

.search-overlay-inner {
  max-width: var(--site-width);
  margin: 0 auto;
  padding: 0 var(--space-lg);
  position: relative;
}

.search-input {
  width: 100%;
  padding: var(--space-sm) var(--space-md);
  padding-right: 40px;
  font-family: var(--font-body);
  font-size: 1rem;
  border: 2px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  color: var(--color-text);
  transition: border-color 0.15s;
}

.search-input:focus {
  outline: none;
  border-color: var(--color-accent);
}

.search-input::placeholder {
  color: var(--gray-400);
}

.search-close {
  position: absolute;
  right: calc(var(--space-lg) + var(--space-sm));
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  cursor: pointer;
  color: var(--color-text-muted);
  padding: var(--space-xs);
}

.search-results {
  margin-top: var(--space-sm);
  max-height: 320px;
  overflow-y: auto;
}

.search-result-item {
  display: block;
  padding: var(--space-sm) var(--space-md);
  text-decoration: none;
  border-radius: var(--radius-sm);
  transition: background 0.1s;
}

.search-result-item:hover,
.search-result-item:focus {
  background: var(--color-surface);
}

.search-result-title {
  font-weight: 600;
  color: var(--color-text);
  font-size: 0.95rem;
}

.search-result-meta {
  font-size: 0.8rem;
  color: var(--color-text-muted);
  margin-top: 2px;
}

.search-no-results {
  padding: var(--space-md);
  color: var(--color-text-muted);
  font-size: 0.9rem;
}

/* ================================================================
   8. SITE BANNER
   Tagline strip directly below the header.
   ================================================================ */
.site-banner {
  background: var(--gray-600);
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  padding: var(--space-sm) var(--space-lg);
  text-align: center;
}

.site-banner-text {
  font-family: var(--font-button);
  font-size: 1rem;
  color: var(--white);
  letter-spacing: 0.05em;
}

/* ================================================================
   9. ANNOUNCEMENT
   Optional banner toggled via announcement.json.
   ================================================================ */
.announcement {
  background: var(--announcement-bg);
  border-left: 4px solid var(--color-accent);
  width: 100%;
  max-width: var(--site-width);
  margin: 0 auto;
  padding: var(--space-md) var(--space-lg);
  text-align: left;
}

.announcement-title {
  display: block;
  font-family: var(--font-heading);
  font-weight: 700;
  margin-bottom: var(--space-xs);
}

.announcement-text {
  font-size: 0.9rem;
  color: var(--color-text);
  max-width: var(--content-width);
  margin: 0;
}

.announcement-link {
  color: var(--color-text);
  font-weight: 600;
  text-decoration: underline;
  margin-left: var(--space-xs);
}

.announcement-link:hover {
  color: var(--color-focus);
}

/* ================================================================
   10. MAIN CONTENT LAYOUT
   Site main container, section wrappers, page headers, and
   shared utility classes used across multiple pages.
   ================================================================ */
.site-main {
  flex: 1;
  width: 100%;
  max-width: var(--site-width);
  margin: 0 auto;
  padding: var(--space-2xl) var(--space-lg);
  background: var(--color-bg);
}

.section {
  margin-bottom: var(--space-2xl);
}

.section-heading {
  font-family: var(--font-heading);
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--color-text);
  margin-bottom: var(--space-lg);
  padding-bottom: var(--space-sm);
  border-bottom: 2px solid var(--color-border);
}

.page-title {
  font-family: var(--font-heading);
  font-size: 2rem;
  font-weight: 700;
  margin-bottom: var(--space-lg);
}

.page-header {
  margin-bottom: var(--space-xl);
}

.page-header .back-link {
  display: inline-block;
  margin-bottom: var(--space-sm);
  font-size: 0.875rem;
}

.back-link {
  font-size: 0.9rem;
  font-weight: 500;
  text-decoration: none;
}

.meta-separator {
  margin: 0 var(--space-xs);
}

.read-more {
  color: var(--color-accent);
  font-weight: 500;
}

.empty-state {
  color: var(--color-text-muted);
  font-style: italic;
  padding: var(--space-xl) 0;
}

/* Flex groups — used for browse-by buttons and tag clouds */
.button-group,
.tag-group {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
}

/* ================================================================
   11. HOMEPAGE
   Two-column hero layout and YouTube video carousel.
   ================================================================ */

/* ── Hero columns (video left, recent posts right) ── */
.hero-columns {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: var(--space-xl);
  align-items: start;
}

/* ── Browse columns (category left, topic right) ── */
.browse-columns {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
}

.browse-column {
  padding: 0 var(--space-xl);
}

.browse-column:first-child {
  padding-left: 0;
  border-right: 2px solid var(--color-border);
}

.browse-column:last-child {
  padding-right: 0;
}

/* ── Video card (used for both featured and carousel items) ── */
.video-card {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--post-card-bg);
}

.video-card-image {
  display: block;
  text-decoration: none;
  position: relative;
}

.video-card-image img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

.video-play-icon {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  opacity: 0.8;
  transition:
    opacity 0.2s ease,
    transform 0.2s ease;
}

.video-card-image:hover .video-play-icon {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1.1);
}

.video-card-placeholder {
  width: 100%;
  aspect-ratio: 16 / 9;
  background: linear-gradient(135deg, var(--gray-100) 0%, var(--gray-200) 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--gray-400);
  font-size: 0.85rem;
}

.video-card-body {
  padding: var(--space-md) var(--space-lg) var(--space-lg);
}

.video-card-title {
  font-family: var(--font-heading);
  font-size: 1.1rem;
  font-weight: 600;
  line-height: 1.35;
  margin-bottom: var(--space-xs);
}

.video-card-title a {
  color: inherit;
  text-decoration: none;
}

.video-card-title a:hover {
  color: var(--color-accent);
}

.video-card-meta {
  font-size: 0.8rem;
  color: var(--color-text-muted);
}

/* ── Carousel controls (prev/next buttons, dot indicators) ── */
.carousel {
  position: relative;
}

.carousel-track {
  position: relative;
}

.carousel-slide {
  display: none;
}

.carousel-slide.active {
  display: block;
}

.carousel-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-md);
  padding: var(--space-sm) var(--space-md) var(--space-md);
}

.carousel-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  background: none;
  border: 1px solid var(--color-border);
  border-radius: 50%;
  cursor: pointer;
  color: var(--color-text-muted);
  transition:
    color 0.15s,
    border-color 0.15s,
    background 0.15s;
}

.carousel-btn:hover {
  color: var(--color-accent);
  border-color: var(--color-accent);
  background: var(--color-accent-bg);
}

.carousel-dots {
  display: flex;
  gap: var(--space-xs);
}

.carousel-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  border: none;
  background: var(--gray-200);
  cursor: pointer;
  padding: 0;
  transition: background 0.2s;
}

.carousel-dot:hover {
  background: var(--gray-400);
}

.carousel-dot.active,
.carousel-dot.active:hover {
  background: var(--color-accent);
}

/* ================================================================
   12. POST CARDS & GRIDS
   Card component used on homepage, listing pages, and series grids.
   Includes featured card variant and coming-soon state.
   ================================================================ */

/* ── Card grid layouts ── */
.post-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: var(--space-lg);
}

.post-grid--compact {
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
}

.post-grid--three {
  grid-template-columns: repeat(3, 1fr);
}

/* ── Card base ── */
.post-card {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition:
    box-shadow 0.2s ease,
    transform 0.15s ease;
  background: var(--post-card-bg);
  position: relative;
}

.post-card:hover {
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
  transform: translateY(-2px);
}

/* ── Card image (with hover zoom) ── */
.post-card-image {
  display: block;
  text-decoration: none;
  position: relative;
  overflow: hidden;
}

.post-card-image img {
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  transition: transform 0.4s ease;
}

.post-card:hover .post-card-image img {
  transform: scale(1.08);
}

.post-card-image-placeholder {
  width: 100%;
  aspect-ratio: 16 / 10;
  background: linear-gradient(135deg, var(--gray-100) 0%, var(--gray-200) 100%);
}

/* ── Card body ── */
.post-card-body {
  padding: var(--space-md) var(--space-lg) var(--space-lg);
}

.post-card-meta {
  font-size: 0.8rem;
  color: var(--color-text-muted);
  margin-bottom: var(--space-xs);
}

.post-card-category {
  color: var(--color-accent);
  font-weight: 600;
}

.post-card-title {
  font-family: var(--font-heading);
  font-size: 1.15rem;
  font-weight: 600;
  line-height: 1.35;
  margin-bottom: var(--space-sm);
}

.post-card-title a {
  color: inherit;
  text-decoration: none;
}

.post-card-title a:hover {
  color: var(--color-accent);
}

/* Full-card clickable overlay — the title link covers the entire card */
.post-card-title a::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
}

.post-card-excerpt {
  font-size: 0.9rem;
  color: var(--color-text-muted);
  line-height: 1.55;
}

/* Topic tags sit above the clickable overlay */
.post-card-topics {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
  list-style: none;
  margin-top: var(--space-sm);
  position: relative;
  z-index: 2;
}

/* ── Featured post card (homepage hero) ── */
.featured-post {
  margin-bottom: var(--space-xl);
}

.featured-post .post-card {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-xl);
  align-items: stretch;
  background: var(--post-card-bg);
}

.featured-post .post-card-image img {
  border-radius: var(--radius-lg);
  aspect-ratio: 16 / 10;
  object-fit: cover;
  height: 100%;
}

.featured-post .post-card-title {
  font-size: 1.6rem;
}

.featured-post .post-card-excerpt {
  font-size: 1rem;
}

/* ── Coming soon state ── */
.post-card__coming-soon-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.55);
  color: #fff;
  font-size: 1.4rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  pointer-events: none;
}

.post-card--soon {
  cursor: default;
  opacity: 0.85;
}

.post-card--soon:hover {
  transform: none;
  box-shadow: none;
}

.coming-soon-message {
  font-size: 1.25rem;
  font-weight: 600;
  text-align: center;
  padding: 3rem 1rem;
}

/* ================================================================
   13. POST LIST
   Alternative list-view layout on the all-posts page.
   ================================================================ */
.post-list-item {
  display: flex;
  gap: var(--space-lg);
  padding: var(--space-lg) 0;
  border-bottom: 1px solid var(--color-border);
  max-width: var(--content-width);
}

.post-list-item.hidden {
  display: none;
}

.post-list-meta {
  flex-shrink: 0;
  width: 130px;
  font-size: 0.8rem;
  color: var(--color-text-muted);
  padding-top: 3px;
}

.post-list-title {
  font-family: var(--font-heading);
  font-size: 1.15rem;
  font-weight: 600;
  line-height: 1.3;
  margin-bottom: var(--space-xs);
}

.post-list-title a {
  color: inherit;
  text-decoration: none;
}

.post-list-title a:hover {
  color: var(--color-accent);
}

.post-list-excerpt {
  font-size: 0.9rem;
  color: var(--color-text-muted);
  margin-bottom: var(--space-sm);
}

.post-list-tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
}

/* ================================================================
   14. TAGS, BADGES, BUTTONS
   Reusable UI elements used across cards, posts, and listing pages.
   ================================================================ */

/* ── Topic tags — base ── */
.topic-tag {
  display: inline-block;
  padding: var(--space-xs) var(--space-sm);
  font-size: 0.8rem;
  font-weight: 500;
  font-family: var(--font-button);
  color: var(--color-accent);
  background: var(--color-accent-bg);
  border-radius: var(--radius-sm);
  text-decoration: none;
  transition: background 0.15s;
}

.topic-tag:hover {
  background: #bfdbfe;
  color: var(--blue-dark);
}

.topic-tag--small {
  font-size: 0.75rem;
  padding: 2px var(--space-sm);
}

/* ── Topic tags — color-coded variants ── */
.topic-tag--4x4 {
  background: #fef3c7;
  color: #92400e;
}
.topic-tag--4x4:hover {
  background: #fde68a;
}
.topic-tag--backpacking {
  background: #d1fae5;
  color: #065f46;
}
.topic-tag--backpacking:hover {
  background: #a7f3d0;
}
.topic-tag--fishing {
  background: #dbeafe;
  color: #1e40af;
}
.topic-tag--fishing:hover {
  background: #bfdbfe;
}
.topic-tag--mountain-biking {
  background: #fce7f3;
  color: #9d174d;
}
.topic-tag--mountain-biking:hover {
  background: #fbcfe8;
}
.topic-tag--hiking {
  background: #e0e7ff;
  color: #3730a3;
}
.topic-tag--hiking:hover {
  background: #c7d2fe;
}
.topic-tag--camping {
  background: #fee2e2;
  color: #991b1b;
}
.topic-tag--camping:hover {
  background: #fecaca;
}
.topic-tag--dual-sport {
  background: #fef9c3;
  color: #854d0e;
}
.topic-tag--dual-sport:hover {
  background: #fef08a;
}

/* ── Category badge ── */
.category-badge {
  display: inline-block;
  padding: 2px var(--space-sm);
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--white);
  background: var(--color-accent);
  border-radius: var(--radius-sm);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* ── Buttons ── */
.btn {
  display: inline-block;
  padding: var(--space-sm) var(--space-lg);
  font-family: var(--font-button);
  font-size: 0.9rem;
  font-weight: 600;
  text-decoration: none;
  border-radius: var(--radius-md);
  transition: all 0.15s ease;
  cursor: pointer;
  border: 2px solid transparent;
}

.btn--outline {
  color: var(--color-accent);
  border-color: var(--color-accent);
  background: transparent;
}

.btn--outline:hover {
  background: var(--color-accent);
  color: var(--white);
}

/* ================================================================
   15. FILTERS
   Category/topic filter controls on the /posts/ page.
   ================================================================ */
.filters {
  margin-bottom: var(--space-xl);
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.filter-group {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: var(--space-sm);
}

.filter-label {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--color-text-muted);
  min-width: 70px;
}

.filter-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
}

.filter-btn {
  padding: var(--space-xs) var(--space-sm);
  font-size: 0.8rem;
  font-weight: 500;
  font-family: var(--font-button);
  color: var(--color-text-muted);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: all 0.15s;
}

.filter-btn:hover {
  color: var(--color-accent);
  border-color: var(--color-accent);
}

.filter-btn.active {
  color: var(--white);
  background: var(--color-accent);
  border-color: var(--color-accent);
}

.filterable-card.hidden {
  display: none;
}

.filter-empty-state {
  grid-column: 1 / -1;
}

/* ================================================================
   16. SINGLE POST
   Post page header, meta, YouTube hero callout, and footer.
   ================================================================ */
.post-single {
  max-width: var(--content-width);
  margin: 0 auto;
}

.post-header {
  margin-bottom: var(--space-xl);
}

.post-meta {
  font-size: 0.85rem;
  color: var(--color-text-muted);
  margin-bottom: var(--space-sm);
}

.post-category-link {
  font-weight: 600;
}

.post-title {
  font-family: var(--font-heading);
  font-size: 2.2rem;
  font-weight: 700;
  line-height: 1.2;
  margin-bottom: var(--space-sm);
}

.post-excerpt {
  font-size: 1.1rem;
  color: var(--color-text-muted);
  line-height: 1.55;
  margin-bottom: var(--space-md);
}

.post-topics {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
  list-style: none;
}

.post-featured-image {
  margin-bottom: var(--space-xl);
  max-width: var(--image-max-width);
}

.post-featured-image img {
  border-radius: var(--radius-lg);
  width: 100%;
}

.post-featured-image figcaption {
  font-size: 0.8rem;
  color: var(--color-text-muted);
  margin-top: var(--space-sm);
  text-align: center;
}

.post-footer {
  margin-top: var(--space-2xl);
  padding-top: var(--space-lg);
  border-top: 1px solid var(--color-border);
}

/* ── YouTube hero callout banner ── */
.youtube-hero {
  margin-bottom: var(--space-xl);
  max-width: var(--image-max-width);
}

.youtube-hero-inner {
  display: flex;
  align-items: center;
  gap: var(--space-lg);
  padding: var(--space-lg);
  background: var(--figcaption-bg);
  border-left: 4px solid #ff0000;
  border-radius: var(--radius-lg);
}

.youtube-hero-icon {
  flex-shrink: 0;
}

.youtube-hero-text {
  flex: 1;
  min-width: 0;
}

.youtube-hero-title {
  font-family: var(--font-heading);
  font-size: 1rem;
  font-weight: 600;
  color: var(--color-text);
  margin-bottom: 0.1rem;
}

.youtube-hero-subtitle {
  font-size: 0.85rem;
  color: var(--color-text-muted);
}

.youtube-hero-btn {
  flex-shrink: 0;
  display: inline-block;
  padding: var(--space-sm) var(--space-lg);
  font-family: var(--font-button);
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--white);
  background: #ff0000;
  border-radius: var(--radius-md);
  text-decoration: none;
  transition: background 0.15s;
}

.youtube-hero-btn:hover {
  background: #cc0000;
  color: var(--white);
}

/* ── Child posts / series grid ── */
.child-posts {
  margin-top: var(--space-2xl);
}

/* ================================================================
   17. PROSE
   Typography for post body content (.post-content.prose wrapper).
   ================================================================ */
.prose {
  max-width: var(--content-width);
}

/* Prose headings — all levels use the heading font family.
   Size and spacing scale down with each level. h1 is rarely used
   in post bodies (the post title handles that role) but is styled
   here for completeness. */

.prose h1 {
  font-family: var(--font-heading);
  font-size: 1.8rem;
  font-weight: 700;
  margin-top: var(--space-2xl);
  margin-bottom: var(--space-lg);
}

.prose h2 {
  font-family: var(--font-heading);
  font-size: 1.5rem;
  font-weight: 600;
  margin-top: var(--space-2xl);
  margin-bottom: var(--space-md);
}

.prose h3 {
  font-family: var(--font-heading);
  font-size: 1.2rem;
  font-weight: 600;
  margin-top: var(--space-xl);
  margin-bottom: var(--space-sm);
}

.prose h4 {
  font-family: var(--font-heading);
  font-size: 1.05rem;
  font-weight: 600;
  margin-top: var(--space-lg);
  margin-bottom: var(--space-sm);
}

.prose h5 {
  font-family: var(--font-heading);
  font-size: 0.95rem;
  font-weight: 600;
  margin-top: var(--space-lg);
  margin-bottom: var(--space-xs);
}

.prose h6 {
  font-family: var(--font-heading);
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--color-text-muted);
  margin-top: var(--space-md);
  margin-bottom: var(--space-xs);
}

.prose p {
  margin-bottom: var(--space-md);
}

.prose a {
  text-decoration: underline;
}

.prose img {
  border-radius: var(--radius-md);
  margin: var(--space-lg) 0;
  max-width: var(--image-max-width);
}

.prose blockquote {
  border-left: 3px solid var(--color-accent);
  padding-left: var(--space-md);
  color: var(--color-text-muted);
  font-style: italic;
  margin: var(--space-lg) 0;
}

.prose ul,
.prose ol {
  padding-left: var(--space-lg);
  margin-bottom: var(--space-md);
}

.prose li {
  margin-bottom: var(--space-xs);
}

.prose code {
  font-size: 0.9em;
  background: var(--color-surface);
  padding: 2px 6px;
  border-radius: var(--radius-sm);
}

.prose pre {
  background: var(--gray-950);
  color: var(--gray-100);
  padding: var(--space-md);
  border-radius: var(--radius-md);
  overflow-x: auto;
  margin: var(--space-lg) 0;
}

.prose pre code {
  background: none;
  padding: 0;
}

/* ================================================================
   18. PROSE FIGURES
   Multi-image and video layout variants used in post content.
   All inherit margin/max-width from .prose figure base styles.
   ================================================================ */

/* ── Base figure (single image or video, 16:9) ── */
.prose figure {
  margin: var(--space-xl) 0;
  max-width: var(--image-max-width);
}

.prose figure img,
.prose figure video {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  margin: 0;
}

.prose figure video {
  display: block;
}

.prose figure figcaption {
  background: var(--figcaption-bg);
  padding: var(--space-sm) var(--space-md);
  font-size: 0.85rem;
  color: var(--color-text-muted);
  border-radius: 0 0 var(--radius-lg) var(--radius-lg);
}

/* ── Portrait: single image (9:16, max 500px centered) ── */
.prose .figure-portrait {
  max-width: 500px;
  margin-left: auto;
  margin-right: auto;
}

.prose .figure-portrait img {
  aspect-ratio: 9 / 16;
}

/* ── Trio: three portrait images flush, no gap ── */
.prose .figure-trio .figure-trio-images {
  display: flex;
  gap: 0;
}

.prose .figure-trio .figure-trio-images img {
  flex: 1;
  min-width: 0;
  aspect-ratio: 9 / 16;
  border-radius: 0;
}

.prose .figure-trio .figure-trio-images img:first-child {
  border-radius: var(--radius-lg) 0 0 0;
}

.prose .figure-trio .figure-trio-images img:last-child {
  border-radius: 0 var(--radius-lg) 0 0;
}

/* ── Duo: two portrait images with gap, individual captions ── */
.prose .figure-duo .figure-duo-images {
  display: flex;
  gap: var(--space-md);
}

.prose .figure-duo .figure-duo-item {
  flex: 1;
  min-width: 0;
  margin: 0;
}

.prose .figure-duo .figure-duo-item img {
  width: 100%;
  aspect-ratio: 9 / 16;
  object-fit: cover;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  margin: 0;
}

/* ── Duo Video: two portrait videos with gap ── */
.prose .figure-duo-video .figure-duo-video-inner {
  display: flex;
  gap: var(--space-md);
}

.prose .figure-duo-video .figure-duo-video-item {
  flex: 1;
  min-width: 0;
  margin: 0;
}

.prose .figure-duo-video .figure-duo-video-item video {
  width: 100%;
  aspect-ratio: 9 / 16;
  object-fit: cover;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  display: block;
}

/* ── Mixed Row: one landscape (16:9) + one portrait (9:16) ── */
.prose .figure-mixed-row .figure-mixed-row-inner {
  display: flex;
  gap: var(--space-md);
  align-items: flex-end;
}

.prose .figure-mixed-row .figure-mixed-row-item {
  margin: 0;
  min-width: 0;
}

.prose .figure-mixed-row .figure-mixed-row-item--landscape {
  flex: 16;
}

.prose .figure-mixed-row .figure-mixed-row-item--portrait {
  flex: 9;
}

.prose .figure-mixed-row .figure-mixed-row-item--landscape img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  margin: 0;
}

.prose .figure-mixed-row .figure-mixed-row-item--portrait img {
  width: 100%;
  aspect-ratio: 9 / 16;
  object-fit: cover;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  margin: 0;
}

/* ── Grid: three-column image grid (16:9) ── */
.prose .figure-grid .figure-grid-images {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-sm);
}

.prose .figure-grid .figure-grid-images img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: var(--radius-md);
  margin: 0;
}

.prose .figure-grid figcaption {
  margin-top: var(--space-sm);
}

/* ================================================================
   19. REPORT STATS
   Structured data grid for report-type posts (distance,
   elevation, temperature) with auto-converted units.
   ================================================================ */
.report-stats {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  margin-bottom: var(--space-xl);
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--color-border);
}

.report-stat {
  padding: var(--space-lg) var(--space-md);
  text-align: center;
  background: var(--figcaption-bg);
  border-right: 1px solid var(--color-border);
}

.report-stat:last-child {
  border-right: none;
}

.report-stat-label {
  font-weight: 700;
  font-family: var(--font-heading);
  margin-bottom: var(--space-sm);
}

.report-stat-inline {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 0.25rem;
  flex-wrap: wrap;
}

.report-stat-value {
  color: var(--color-text);
  line-height: 1.2;
}

.report-stat-conversion {
  color: var(--color-accent);
  font-weight: 500;
}

.gear-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  margin-bottom: var(--space-xl);
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--color-border);
}

.gear-stats .report-stat {
  /* inherits all .report-stat styles as-is */
}

/* ================================================================
   20. TRIP PAGES
   Trip landing page with hero image, description, and post grid.
   ================================================================ */
.trip-page {
  max-width: var(--content-width);
  margin: 0 auto;
}

.trip-hero {
  margin-bottom: var(--space-xl);
}

.trip-hero img {
  width: 100%;
  max-width: var(--image-max-width);
  border-radius: var(--radius-lg);
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

.trip-header {
  margin-bottom: var(--space-lg);
}

.trip-title {
  font-family: var(--font-heading);
  font-size: 2.2rem;
  font-weight: 700;
  line-height: 1.2;
  margin-bottom: var(--space-xs);
}

.trip-meta {
  font-size: 0.9rem;
  color: var(--color-text-muted);
}

.trip-body {
  max-width: var(--content-width);
  margin-bottom: var(--space-2xl);
}

.trip-body p {
  font-size: 1.05rem;
  line-height: 1.65;
  color: var(--color-text);
}

.trip-posts {
  margin-top: var(--space-xl);
}

/* ================================================================
   21. FOOTER
   ================================================================ */
.site-footer {
  padding: var(--space-xl) 0;
  margin-top: auto;
  background: var(--header-bg);
}

.footer-inner {
  max-width: var(--site-width);
  margin: 0 auto;
  padding: 0 var(--space-lg);
  text-align: left;
  font-size: 0.8rem;
  color: white;
  line-height: 1.6;
}

.footer-copyright {
  color: white;
  font-weight: 500;
  margin-bottom: var(--space-lg);
}

.footer-disclosures {
  display: flex;
  gap: var(--space-xl);
}

.footer-disclosure {
  flex: 1;
}

.footer-disclosure-title {
  color: white;
  font-family: var(--font-heading);
  font-size: 0.85rem;
  font-weight: 600;
  margin-bottom: var(--space-xs);
}

/* ============================================================
   POST ALERTS
   Callout boxes for important info within post prose.
   ============================================================ */

.post-alert {
  background: var(--figcaption-bg);
  border-left: 4px solid var(--color-accent);
  padding: var(--space-md) var(--space-lg);
  margin-bottom: var(--space-xl);
  line-height: 1.6;
  border-radius: var(--radius-lg);
}

.post-alert--warning {
  background: var(--announcement-bg);
  border-left-color: #b45309;
}

.post-alert strong {
  display: block;
  font-family: var(--font-heading);
  margin-bottom: var(--space-xs);
}

/* ================================================================
   22. RESPONSIVE (≤768px)
   All mobile overrides in one block, commented by component.
   ================================================================ */
@media (max-width: 768px) {
  :root {
    --header-height: 3.5rem;
  }

  /* Header */
  .site-logo {
    width: 40px;
    height: 40px;
  }

  .site-name {
    font-size: 1.2rem;
  }

  .social-links {
    display: none;
  }

  /* Navigation — switch to hamburger menu */
  .nav-toggle {
    display: flex;
  }

  .nav-list {
    display: none;
    position: absolute;
    top: var(--header-height);
    left: 0;
    right: 0;
    flex-direction: column;
    background: var(--header-bg);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.15);
    padding: var(--space-sm) 0;
    gap: 0;
    z-index: 200;
  }

  .nav-list.is-open {
    display: flex;
  }

  .nav-link {
    padding: var(--space-md) var(--space-lg);
    width: 100%;
    justify-content: space-between;
  }

  .nav-dropdown-menu {
    position: static;
    box-shadow: none;
    border: none;
    padding-left: var(--space-lg);
    background: var(--header-bg);
  }

  .nav-dropdown-menu .dropdown-link {
    color: white;
  }

  .nav-dropdown-menu .dropdown-link:hover {
    background: rgba(255, 255, 255, 0.1);
  }

  .nav-search-item {
    padding: var(--space-sm) var(--space-lg) var(--space-md);
  }

  .nav-search-item .search-toggle {
    width: 100%;
    justify-content: center;
    gap: var(--space-sm);
  }

  /* Main layout */
  .site-main {
    padding: var(--space-xl) var(--space-md);
  }

  .hero-columns {
    grid-template-columns: 1fr;
  }

  .browse-columns {
    grid-template-columns: 1fr;
  }

  .browse-column {
    padding: 0;
  }

  .browse-column:first-child {
    border-right: none;
    padding-bottom: var(--space-lg);
    margin-bottom: var(--space-lg);
    border-bottom: 2px solid var(--color-border);
  }

  .post-title {
    font-size: 1.6rem;
  }

  /* Cards & grids */
  .featured-post .post-card {
    grid-template-columns: 1fr;
    gap: var(--space-md);
  }

  .post-grid--three {
    grid-template-columns: 1fr;
  }

  /* Post list */
  .post-list-item {
    flex-direction: column;
    gap: var(--space-xs);
  }

  .post-list-meta {
    width: auto;
  }

  /* Figures — stack all multi-column layouts */
  .prose .figure-duo .figure-duo-images,
  .prose .figure-duo-video .figure-duo-video-inner,
  .prose .figure-mixed-row .figure-mixed-row-inner {
    flex-direction: column;
  }

  .prose .figure-grid .figure-grid-images {
    grid-template-columns: 1fr;
  }

  /* Report stats — reflow from 5 cols to 3 */
  .report-stats {
    grid-template-columns: repeat(3, 1fr);
  }

  .report-stat {
    border-bottom: 1px solid var(--color-border);
  }

  .report-stat:nth-child(3) {
    border-right: none;
  }

  .report-stat:nth-last-child(-n + 2) {
    border-bottom: none;
  }

  .gear-stats {
    grid-template-columns: 1fr;
  }

  .gear-stats .report-stat {
    border-right: none;
    border-bottom: 1px solid var(--color-border);
  }

  .gear-stats .report-stat:last-child {
    border-bottom: none;
  }

  /* YouTube hero — stack vertically */
  .youtube-hero-inner {
    flex-direction: column;
    align-items: flex-start;
  }

  /* Hide back-to-top on mobile */
  .back-to-top {
    display: none;
  }

  /* Footer */
  .footer-disclosures {
    flex-direction: column;
  }
}

/* ================================================================
   23. ACCESSIBILITY QUERIES
   ================================================================ */

/* Reduced motion — disable all animations and transitions */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }

  html {
    scroll-behavior: auto;
  }
}

/* High contrast — add visible borders to color-dependent elements */
@media (forced-colors: active) {
  .filter-btn.active {
    border: 2px solid ButtonText;
  }

  .category-badge {
    border: 1px solid;
  }
}