/* ==========================================================================
   Wayfarer — rugged outdoor theme + CMS
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Ibarra+Real+Nova:ital,wght@0,400;0,500;0,600;1,400&display=swap');

:root {
  /* Cinematic dark palette — near-black with a forest undertone, warm
     off-white text, rust kept as the sole accent pop. */
  --bg: #10140f;
  --bg-alt: #191f18;
  --bg-dark: #0a0d09;
  --bg-dark-alt: #1c231c;
  --border: rgba(244, 239, 227, 0.14);
  --text: #f4efe3;
  --text-dim: rgba(244, 239, 227, 0.68);
  --text-dimmer: rgba(244, 239, 227, 0.42);
  --accent: #d97a3f;
  --accent-bright: #e89257;
  --accent-2: #3f5f4f;
  --accent-text: #fff8ec;
  /* Slightly darker than --accent specifically for text-bearing surfaces
     (buttons, the demo banner) — --accent-text on --accent measures 4.2:1,
     just under the 4.5:1 WCAG AA minimum for this button's font size; this
     value clears 4.5:1 while staying visually close to the brand rust. */
  --accent-btn: #b8552f;

  /* Admin-customizable (Appearance page) — these all just default to the
     existing look, so a site that's never touched Appearance renders
     identically to before any of this became overridable. */
  --btn-primary-bg: var(--text);
  --btn-primary-bg-hover: var(--accent-bright);
  --btn-primary-text: var(--bg-dark);
  --btn-primary-radius: var(--radius-pill);
  --nav-underline-color: var(--accent-bright);

  --container-width: 1160px;
  --radius: 6px;
  --radius-lg: 4px;
  --radius-pill: 999px;
  --font-heading: 'Ibarra Real Nova', Georgia, 'Iowan Old Style', 'Times New Roman', serif;
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

/* Ghost button style (Appearance → Primary Buttons → Button style) swaps the
   default text-color fallback before any admin override is applied, purely
   via the cascade — see the .btn-primary rules below and the injected
   per-page <style> override in index.php, which uses !important specifically
   so a custom text color still wins over this body-level default. */
body.btn-style-ghost { --btn-primary-text: var(--text); }

/* Tells the browser this whole site is dark-themed, so native form controls
   (date pickers, number spinners, the buttontext/Canvas system colors a
   <button> or <input> falls back to when no color is set) render with
   light-on-dark defaults instead of guessing light-mode — without this,
   several elements below rendered illegibly dark-on-dark despite their CSS
   looking correct, because they were quietly relying on a browser default
   that assumes a light page. */
:root { color-scheme: dark; }

* { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; }
h1, h2, h3 { font-family: var(--font-heading); line-height: 1.15; font-weight: 500; }
em { font-style: italic; color: var(--accent); }

.container { width: 100%; max-width: var(--container-width); margin: 0 auto; padding: 0 24px; }

.section {
  min-height: 100vh;
  padding: 64px 0;
  display: flex;
  align-items: center;
}
.section > .container { width: 100%; }
.section-dark { background: var(--bg-dark); color: var(--accent-text); background-size: cover; background-position: center; }
.section-dark .eyebrow { color: var(--accent-bright); }
.section-dark .lead { color: rgba(255, 248, 236, 0.75); }
.section-dark p { color: rgba(255, 248, 236, 0.75); }

.section-head { text-align: center; max-width: 620px; margin: 0 auto 56px; }
.section-head h2 { font-size: clamp(28px, 4vw, 38px); margin-top: 8px; }

.eyebrow {
  display: inline-block;
  color: var(--accent);
  font-family: var(--font);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.lead { font-size: 18px; color: var(--text-dim); }

/* Buttons
   ========================================================================== */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 14px 28px;
  border-radius: var(--radius-pill);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.03em;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease, transform 0.15s ease;
}

.btn-primary {
  background: var(--btn-primary-bg);
  color: var(--btn-primary-text);
  border-color: var(--btn-primary-bg);
  border-radius: var(--btn-primary-radius);
}
.btn-primary:hover { background: var(--btn-primary-bg-hover); border-color: var(--btn-primary-bg-hover); color: var(--btn-primary-text); transform: translateY(-1px); }

/* Ghost style (Appearance → Button style: Ghost) — outline only, no fill,
   swapping to a fill only on hover so the button still reads as clickable. */
body.btn-style-ghost .btn-primary { background: transparent; }
body.btn-style-ghost .btn-primary:hover { background: var(--btn-primary-bg-hover); border-color: var(--btn-primary-bg-hover); }

/* Transparent-background checkbox — independent of style, always wins. */
body.btn-bg-transparent .btn-primary,
body.btn-bg-transparent .btn-primary:hover { background: transparent; }

.btn-sm { padding: 8px 16px; font-size: 12px; }
.btn-danger { border-color: #b3554a; color: #b3554a; }
.btn-danger:hover { background: #b3554a; color: #fff; }
.btn-compact { padding: 10px 18px; font-size: 12px; }

.btn-ghost { background: transparent; color: var(--text); border-color: rgba(244, 239, 227, 0.35); }
.btn-ghost:hover { background: rgba(244, 239, 227, 0.12); border-color: var(--text); }

.section-dark .btn-ghost, .hero .btn-ghost { color: var(--accent-text); border-color: rgba(255, 248, 236, 0.35); }
.section-dark .btn-ghost:hover, .hero .btn-ghost:hover { background: rgba(255, 248, 236, 0.12); border-color: var(--accent-text); }

.btn-lg { padding: 13px 26px; font-size: 13px; }

/* Header
   ========================================================================== */

.site-header {
  /* Absolute (not sticky) so it truly floats on top of the hero photo with
     nothing behind it but the image — sticky would still reserve its own
     box in normal document flow above the hero, which is exactly the solid
     seam this replaces. It scrolls away naturally with the page until
     main.js adds .is-scrolled, which swaps it to a pinned, solid-backed bar
     once the hero is out of view and there's plain content behind it. */
  position: absolute;
  left: 0; right: 0;
  z-index: 100;
  padding: 26px 0;
  background: transparent;
  transition: background 0.25s ease, backdrop-filter 0.25s ease, box-shadow 0.25s ease;
}
.site-header.is-scrolled {
  position: fixed;
  background: rgba(10, 13, 9, 0.8);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 1px 0 rgba(255, 248, 236, 0.08);
}

.header-inner { display: flex; align-items: center; justify-content: space-between; gap: 24px; }

.logo { font-family: var(--font-heading); font-size: 19px; font-weight: 700; letter-spacing: 0.06em; color: var(--accent-text); text-shadow: 0 2px 8px rgba(0, 0, 0, 0.6); }
.logo span { color: var(--accent-bright); }

.main-nav ul { display: flex; gap: 34px; }
.main-nav a {
  position: relative;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(255, 248, 236, 0.75);
  padding-bottom: 4px;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.6);
}
.main-nav a::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  height: 2px;
  width: 100%;
  background: var(--nav-underline-color);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.25s ease;
}
.main-nav a:hover { color: var(--accent-text); }
.main-nav a:hover::after { transform: scaleX(1); }

.header-actions { display: flex; align-items: center; gap: 12px; }

.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 36px;
  height: 36px;
  background: transparent;
  border: 1px solid rgba(255, 248, 236, 0.3);
  border-radius: var(--radius);
  cursor: pointer;
}
.nav-toggle span { display: block; width: 16px; height: 2px; margin: 0 auto; background: var(--accent-text); }
.nav-toggle.is-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle.is-open span:nth-child(2) { opacity: 0; }
.nav-toggle.is-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Hero
   ========================================================================== */

.hero {
  position: relative;
  /* Full-viewport hero — the whole photo (including the campers/tent near
     its bottom) shows on load without scrolling, instead of a
     content-driven height that only ever revealed a thin cover-cropped
     slice of a square source image. */
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  /* Plain fallback gradient when no hero photo has been uploaded — index.php adds
     an inline background-image (this same gradient layered with the photo URL)
     once one is set, so background-blend-mode below applies either way. */
  /* Clear through the content area, then a gradual multi-stop ease into the
     Trips section's own background color — no separate divider shape needed,
     the image just fades directly into the next section like a photograph,
     not a hard-edged graphic transition. */
  background-image: linear-gradient(180deg,
    rgba(10, 13, 9, 0) 0%,
    rgba(10, 13, 9, 0) 55%,
    rgba(10, 13, 9, 0.45) 75%,
    rgba(10, 13, 9, 0.8) 90%,
    var(--bg) 100%
  );
  background-size: cover;
  /* Biased toward the bottom of the source photo, not its center — that's
     where the campers and tent are, the actual focal point of the image. */
  background-position: center 80%;
  background-repeat: no-repeat;
  background-color: var(--bg-dark);
  color: var(--accent-text);
  overflow: hidden;
}

.hero-inner { max-width: 640px; margin: 0 auto; padding: 100px 0 60px; position: relative; z-index: 1; }
.hero .eyebrow { font-size: 11px; color: var(--accent-bright); margin-bottom: 14px; display: inline-block; text-shadow: 0 2px 8px rgba(0, 0, 0, 0.6); }
.hero h1 { font-weight: 400; font-size: clamp(24px, 3.2vw, 36px); margin-bottom: 14px; color: var(--accent-text); text-shadow: 0 2px 14px rgba(0, 0, 0, 0.6); }
.hero p.lead { font-size: 15px; color: rgba(255, 248, 236, 0.85); max-width: 460px; margin: 0 auto 28px; text-shadow: 0 2px 8px rgba(0, 0, 0, 0.6); }
.hero-actions { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }

/* Scroll trail backdrop
   ========================================================================== */
/* A fixed canvas painted by trail-scroll.js, advancing through the trail
   footage frame-by-frame as the page scrolls — so scrolling reads as walking
   the trail rather than scrolling a page. Pure progressive enhancement: the
   canvas and overlay sit z-index: -1, entirely behind normal document flow,
   and trail-scroll.js only adds .trail-active to <body> once it has actually
   started drawing. Every section keeps its original opaque background (photo
   or solid color) until that class shows up, so JS-disabled visitors, small
   screens, and prefers-reduced-motion all see the exact same page this
   template always rendered — nothing here is required for the page to work. */
.trail-canvas {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: -2;
  display: block;
}
.trail-overlay {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(10, 13, 9, 0.32) 0%, rgba(10, 13, 9, 0.5) 100%);
}

/* Once trail-scroll.js is actively painting the canvas, each section's own
   opaque background steps aside to a translucent tint of the same color so
   the trail footage reads through behind it — same text-shadow and glass
   card treatment already used everywhere still carries the contrast.
   Every stop below is capped well short of fully opaque (max ~0.6, matching
   the plain .section tint) — the original gradient ran to a solid var(--bg)
   at its bottom edge, and since that edge is a real block of pixels that
   scrolls through the viewport like anything else on the page, an opaque
   stop there reads as a solid black bar wiping across the screen right at
   the Hero/Trips seam. Nothing here may ever fully hide the canvas. */
body.trail-active .hero {
  background-color: transparent;
  background-image: linear-gradient(180deg,
    rgba(10, 13, 9, 0) 0%,
    rgba(10, 13, 9, 0) 55%,
    rgba(10, 13, 9, 0.35) 75%,
    rgba(10, 13, 9, 0.6) 100%
  ) !important;
}
body.trail-active .section:not(.section-dark) { background: rgba(16, 20, 15, 0.6); }
/* The original .section-dark gradient was tuned to sit over an opaque
   photo (solid at both edges, only a thin translucent band in the middle)
   — kept as-is here, those solid edges would nearly blot out the already-
   dark trail footage entirely. A flat, moderate tint lets it read through
   while still keeping the text legible; the added text-shadow below is the
   same safety margin the hero text already relies on. */
body.trail-active .section-dark {
  background-color: rgba(10, 13, 9, 0.5);
  background-image: none !important;
}
body.trail-active .section-dark h2,
body.trail-active .section-dark h3,
body.trail-active .section-dark p,
body.trail-active .section-dark .eyebrow,
body.trail-active .section-dark .approach-number {
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.7);
}
body.trail-active .site-footer { background: rgba(10, 13, 9, 0.8); }

/* Scroll reveal — text/cards/buttons fade and slide up into place as they
   enter the viewport, instead of just appearing via plain scroll
   translation. Gated behind .reveal-ready, which main.js adds only once it
   has actually wired up the IntersectionObserver: a [data-reveal] element is
   never hidden by CSS alone, so JS-disabled and prefers-reduced-motion
   visitors simply see every section already in place, same as always. */
body.reveal-ready [data-reveal] {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 0.7s cubic-bezier(0.2, 0.7, 0.2, 1), transform 0.7s cubic-bezier(0.2, 0.7, 0.2, 1);
}
body.reveal-ready [data-reveal].is-revealed {
  opacity: 1;
  transform: translateY(0);
}

/* Trip cards
   ========================================================================== */

.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }

/* Glass card: translucent + blurred rather than a flat solid fill, so
   whatever sits behind the trips section (gradients, other cards through the
   gaps) shows through softly. backdrop-filter needs the -webkit- prefix for
   Safari; the plain rgba() background is what shows if a browser supports
   neither, so the card is still fully legible without the blur. */
.trip-card {
  background: rgba(25, 31, 24, 0.55);
  border: 1px solid var(--border);
  border-radius: 20px;
  overflow: hidden;
  cursor: pointer;
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.trip-card:hover { transform: translateY(-5px); box-shadow: 0 18px 32px -18px rgba(0, 0, 0, 0.5); }
.trip-card:focus-visible { outline: 2px solid var(--accent-bright); outline-offset: 2px; }

.trip-thumb { height: 170px; position: relative; }
.trip-thumb-1 { background: linear-gradient(135deg, #3f5f4f, var(--bg-dark)); }
.trip-thumb-2 { background: linear-gradient(135deg, #c1592c, #4a1d0d); }
.trip-thumb-3 { background: linear-gradient(135deg, #8b8873, var(--bg-dark)); }

.trip-thumb-photo { padding: 0; }
.trip-thumb-photo img { width: 100%; height: 100%; object-fit: cover; }

.trip-tag {
  position: absolute;
  bottom: 12px;
  left: 14px;
  background: rgba(0, 0, 0, 0.35);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 5px 12px;
  border-radius: 999px;
}

.trip-body { padding: 22px 22px 26px; }
.trip-body h3 { font-size: 19px; margin-bottom: 8px; }
.trip-body p { font-size: 14px; color: var(--text-dim); margin-bottom: 14px; }
.trip-meta { font-size: 12px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--accent); }

.trip-dates { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--border); }
.trip-date-list { display: flex; flex-wrap: wrap; gap: 8px; }
.trip-date-pill {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  padding: 8px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg);
  cursor: pointer;
  font-family: inherit;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.trip-date-pill:hover:not(:disabled) { border-color: var(--accent); background: var(--bg-alt); }
.trip-date-pill:disabled { opacity: 0.55; cursor: not-allowed; }
.trip-date-label { font-size: 13px; font-weight: 700; color: var(--text); }
.trip-date-spots { font-size: 11px; color: var(--text-dim); text-transform: uppercase; letter-spacing: 0.03em; }
.trip-date-pill:disabled .trip-date-spots { color: #a33; }
.trip-dates-empty { font-size: 13px; color: var(--text-dim); }
.trip-dates-empty a { text-decoration: underline; color: var(--accent); }

/* Approach
   ========================================================================== */

.approach-grid { display: grid; grid-template-columns: 1fr 1.2fr; gap: 56px; align-items: start; }

.approach-points { display: flex; flex-direction: column; gap: 28px; }
.approach-point { display: flex; gap: 18px; }
.approach-number { font-family: var(--font-heading); font-size: 26px; color: var(--accent-bright); flex-shrink: 0; }
.approach-point h3 { font-size: 18px; margin-bottom: 6px; color: var(--accent-text); }
.approach-point p { font-size: 14px; }

/* Guides
   ========================================================================== */

.guide-card { text-align: center; padding: 20px; }

.guide-avatar-wrap { position: relative; display: inline-block; margin: 0 auto 18px; }
.guide-avatar-wrap:focus { outline: none; }

.guide-avatar {
  width: 84px;
  height: 84px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--accent-2), var(--bg-dark));
  color: var(--accent-text);
  font-family: var(--font-heading);
  font-size: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  position: relative;
  z-index: 2;
  transition: transform 0.35s ease;
}
.guide-avatar-wrap:hover .guide-avatar,
.guide-avatar-wrap:focus-within .guide-avatar { transform: scale(1.06); }
.guide-avatar-photo { background: none; }
.guide-avatar-photo img { width: 100%; height: 100%; object-fit: cover; }
.guide-card h3 { font-size: 18px; margin-bottom: 6px; }
.guide-role { font-size: 13px; color: var(--text-dim); text-transform: uppercase; letter-spacing: 0.04em; }

/* Bio card that grows out from beneath the avatar on hover/focus. Stays at
   its natural content height at all times (never animates height/max-height
   /padding — a 0fr->1fr grid-template-rows transition was tried first, but
   this engine doesn't actually collapse a 0fr auto-sized row to zero, which
   left the "collapsed" card visibly sitting at ~32px instead of hidden).
   opacity + scaleY alone reads as the same "grow out of the photo" effect
   and only touches compositor-friendly properties — no layout recalculation
   on every frame. pointer-events: none while collapsed keeps the
   fully-sized-but-invisible card from intercepting clicks/hover on
   whatever it happens to sit over. */
.guide-bio-card {
  position: absolute;
  top: calc(100% + 14px);
  left: 50%;
  width: 240px;
  opacity: 0;
  background: var(--bg-alt);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg, 8px);
  box-shadow: 0 20px 40px -20px rgba(0, 0, 0, 0.7);
  transform: translateX(-50%) scaleY(0.85);
  transform-origin: top center;
  transition: opacity 0.3s ease, transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
  pointer-events: none;
  z-index: 30;
  text-align: left;
}
.guide-bio-card p { font-size: 13px; line-height: 1.7; color: var(--text-dim); padding: 16px 18px; }

.guide-avatar-wrap:hover .guide-bio-card,
.guide-avatar-wrap:focus-within .guide-bio-card {
  opacity: 1;
  transform: translateX(-50%) scaleY(1);
  pointer-events: auto;
}

/* Guides carousel — kicks in only when there are more than 3 guides
   ========================================================================== */

.guides-carousel { position: relative; }

.guides-track {
  display: flex;
  gap: 28px;
  overflow-x: auto;
  overflow-y: visible;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  /* The bio-card hover popup below each avatar needs room to expand into
     without the horizontal scrollport clipping it — overflow-x:auto forces
     overflow-y to behave as auto too, so extra bottom padding (compensated
     by an equal negative margin, a standard trick) reserves that space
     without leaving a visible gap in the page's own layout. */
  padding: 4px 56px 300px;
  margin-bottom: -300px;
  /* Without this, scroll-snap-align:start on the cards below ignores the
     56px side padding above and rests (or snaps back to) a scroll position
     where the first/last card's own edge touches the scrollport edge —
     visually erasing that padding gutter and putting the arrow buttons
     right on top of the card. scroll-padding tells the snap algorithm to
     treat this padding as reserved space, keeping the gutter intact at
     every snap position, not just on initial load. */
  scroll-padding-inline: 56px;
}
.guides-track::-webkit-scrollbar { display: none; }

.guides-track .guide-card { flex: 0 0 auto; width: 220px; scroll-snap-align: start; }

.guides-carousel-arrow {
  position: absolute;
  top: 62px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: var(--bg-alt);
  color: var(--text);
  font-size: 16px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s ease, border-color 0.2s ease;
  z-index: 5;
}
.guides-carousel-prev { left: 0; }
.guides-carousel-next { right: 0; }
.guides-carousel-arrow:hover { background: var(--accent); border-color: var(--accent); color: var(--bg-dark); }
.guides-carousel-arrow:disabled { opacity: 0.3; cursor: default; pointer-events: none; }

/* Trips carousel — kicks in only when there are more than 3 trips. No hover
   popup on a trip card (unlike guides), so this needs none of the
   overflow-clipping workaround guides-track uses above. */
.trips-carousel { position: relative; }

.trips-track {
  display: flex;
  gap: 28px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding: 4px 56px 24px;
  /* See the identical scroll-padding-inline comment on .guides-track above
     — same scroll-snap-vs-padding fix, needed here too. */
  scroll-padding-inline: 56px;
}
.trips-track::-webkit-scrollbar { display: none; }

.trips-track .trip-card { flex: 0 0 auto; width: 320px; scroll-snap-align: start; }

.trips-carousel-arrow {
  position: absolute;
  top: 85px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: var(--bg-alt);
  color: var(--text);
  font-size: 16px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s ease, border-color 0.2s ease;
  z-index: 5;
}
.trips-carousel-prev { left: 0; }
.trips-carousel-next { right: 0; }
.trips-carousel-arrow:hover { background: var(--accent); border-color: var(--accent); color: var(--bg-dark); }
.trips-carousel-arrow:disabled { opacity: 0.3; cursor: default; pointer-events: none; }

/* Trip highlight video
   ========================================================================== */

.trip-video { margin-top: 56px; border-radius: var(--radius-lg); overflow: hidden; border: 1px solid var(--border); }

/* CTA
   ========================================================================== */

.cta-banner { text-align: center; max-width: 560px; margin: 0 auto; }
.cta-banner h2 { font-size: clamp(28px, 4vw, 38px); margin: 10px 0 14px; }
.cta-banner p { margin-bottom: 30px; }
/* When the circle badge is present it occupies the right side of the
   section at every viewport where it's shown (>640px) — centering the copy
   still let its right edge run under the badge's text ring (confirmed by
   measuring both boxes: the heading reached x~888 while the badge's left
   edge sat at x~795). Left-aligning a narrower column clear of the badge
   fixes that instead of relying on eyeballed spacing. */
.cta-banner-with-badge { max-width: 480px; margin: 0 auto 0 22%; text-align: left; }

#contact { position: relative; }

/* Circle badge, top-right of Contact — a real circular photo (plain CSS
   border-radius, no border/shadow/ring around it) with genuinely
   admin-editable curved text around it (SVG textPath), not text baked into
   an image. The path below is a fixed, hand-computed 240°-arc circle
   (radius 180, centered in a 430×430 box) whose start point sits at
   exactly the 9 o'clock position, sweeping clockwise over the top to
   roughly 5 o'clock — text is anchored to the start of that path (not
   centered on it), so it always begins at 9 o'clock regardless of length.
   Sized to be noticeably bigger than the original badge without the box
   reaching far enough left to cover .cta-banner's centered text — a literal
   2x from a 300px box did (confirmed by screenshot: it visibly overlapped
   "email us directly"), so this settles for a smaller-than-2x increase in
   exchange for not covering the page's own copy. */
.contact-badge {
  position: absolute;
  top: 150px;
  right: 40px;
  width: 430px;
  height: 430px;
  pointer-events: none;
}
/* z-index above the photo — where the photo's soft-fade edge reaches far
   enough to pass under the text arc, the text needs to stay legible on top,
   not get covered by the image. */
.contact-badge-ring { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; z-index: 2; }
.contact-badge-ring-text {
  font-family: var(--font);
  font-size: 10px;
  font-weight: 400;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  fill: var(--contact-badge-text-color, var(--accent-bright));
}
.contact-badge-photo {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 340px;
  height: 340px;
  transform: translate(-50%, -50%);
  z-index: 1;
}
/* object-fit: contain (not cover/cropped) so nothing of the photo — antler
   tips included — gets cut off; the mask below fades it to fully transparent
   well before its own edge, which is also what hides the circular caption
   baked into this particular source image (see the badge feature's earlier
   history) without needing to crop into the subject to do it. No
   border-radius/overflow:hidden here on purpose — a hard circular clip
   would just recreate a crisp edge underneath the soft fade. */
.contact-badge-photo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  -webkit-mask-image: radial-gradient(circle, black 0%, black 55%, transparent 82%);
  mask-image: radial-gradient(circle, black 0%, black 55%, transparent 82%);
}

/* Below desktop widths the badge is a fixed 430px box that no longer has
   room beside the copy — side-by-side collided badly (measured the heading
   running to x~629 while the badge's own left edge sat at x~315 on an
   800px-wide screen, text rendering right under the photo). Stack instead:
   badge in normal flow above the copy, copy nudged right of center rather
   than centered under it. */
@media (max-width: 1024px) {
  #contact { flex-direction: column; padding-top: 24px; }
  .contact-badge {
    /* Stays a positioned box (not static) — its ring/photo children are
       absolutely positioned *relative to this box*; making it static would
       make them fall back to #contact (the nearest positioned ancestor)
       instead and land far down the page, detached from this badge. top/right
       are reset because the base rule's 150px/40px offsets still apply as
       *relative* offsets here, otherwise shoving the box down into the copy
       below it. */
    position: relative;
    top: auto;
    right: auto;
    width: 300px;
    height: 300px;
    margin: 0 auto 28px;
    pointer-events: auto;
  }
  .contact-badge-photo { width: 230px; height: 230px; }
  .contact-badge-ring-text { font-size: 13px; letter-spacing: 0.09em; }
  .cta-banner-with-badge { max-width: 420px; margin: 0 auto 0 14%; text-align: left; }
}

@media (max-width: 640px) {
  .contact-badge { width: 220px; height: 220px; margin-bottom: 20px; }
  .contact-badge-photo { width: 170px; height: 170px; }
  /* The SVG's viewBox stays fixed while its container shrinks, so text and
     path scale down together — a larger raw font-size here compensates for
     that smaller container, landing back around the same ~7-8px on screen. */
  .contact-badge-ring-text { font-size: 16px; letter-spacing: 0.08em; }
  .cta-banner-with-badge { max-width: 300px; margin: 0 auto 0 8%; text-align: left; }
}

/* Booking inquiry modal
   ========================================================================== */

.inquiry-modal { position: fixed; inset: 0; z-index: 300; display: flex; align-items: center; justify-content: center; padding: 20px; }
/* A same-specificity class rule above wins the cascade over the browser's own
   [hidden]{display:none}, since it's declared later in this stylesheet — so
   the modal (and its full-viewport backdrop) stayed visible and swallowed
   every click on the page even while `hidden` was set. This rule's higher
   specificity restores the expected behavior regardless of source order. */
.inquiry-modal[hidden] { display: none; }
.inquiry-modal-backdrop { position: absolute; inset: 0; background: rgba(30, 43, 35, 0.55); }
.inquiry-modal-panel {
  position: relative;
  width: 100%;
  max-width: 440px;
  max-height: calc(100dvh - 40px);
  overflow-y: auto;
  background: var(--bg);
  border-radius: var(--radius-lg, 8px);
  padding: 32px 28px;
  text-align: left;
}
.inquiry-modal-panel h2 { font-size: 21px; margin-bottom: 8px; padding-right: 24px; }
.inquiry-modal-subtext { font-size: 13px; color: var(--text-dim); margin-bottom: 18px; }
.inquiry-modal-subtext:empty { display: none; }
.inquiry-modal-close {
  position: absolute;
  top: 16px; right: 16px;
  width: 28px; height: 28px;
  border: none;
  background: transparent;
  font-size: 22px;
  line-height: 1;
  color: var(--text-dim);
  cursor: pointer;
}
.inquiry-modal-close:hover { color: var(--text); }
.inquiry-form .btn { width: 100%; }

/* Trip detail overlay — click a trip card to expand it
   ========================================================================== */

.trip-detail-overlay { position: fixed; inset: 0; z-index: 320; display: flex; align-items: center; justify-content: center; padding: 16px; }
.trip-detail-overlay[hidden] { display: none; }
.trip-detail-backdrop { position: absolute; inset: 0; background: rgba(8, 10, 7, 0.75); }
.trip-detail-panel {
  position: relative;
  width: 100%;
  max-width: min(1440px, 96vw);
  max-height: calc(100dvh - 32px);
  overflow-y: auto;
  background: var(--bg-dark);
  border: 1px solid var(--border);
  border-radius: 22px;
  /* Starts slightly shrunk + transparent, transitions up to full size and
     opacity when .is-open is added — the "fade-in, not a jump-cut" feel the
     overlay approach still asked for, short of a true grow-from-the-card
     animation. */
  opacity: 0;
  transform: scale(0.96);
  transition: opacity 0.35s ease, transform 0.35s ease;
}
.trip-detail-overlay.is-open .trip-detail-panel { opacity: 1; transform: scale(1); }
.trip-detail-close {
  position: absolute;
  top: 18px; right: 18px;
  z-index: 5;
  width: 34px; height: 34px;
  border: none;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.35);
  font-size: 22px;
  line-height: 1;
  color: var(--text);
  cursor: pointer;
}
.trip-detail-close:hover { background: rgba(0, 0, 0, 0.55); }

.trip-detail-content { position: relative; display: grid; grid-template-columns: 1.1fr 1fr; min-height: 600px; }
.trip-detail-content[hidden] { display: none; }

.trip-detail-map { position: relative; background: radial-gradient(circle at 30% 20%, #171d15 0%, var(--bg-dark) 65%); border-right: 1px solid var(--border); }
.trail-map { position: relative; width: 100%; height: 100%; min-height: 560px; padding: 32px; }
.trail-map-counter { font-size: 13px; letter-spacing: 0.06em; color: var(--text-dim); }
.trail-map-counter span:first-child { color: var(--text); font-weight: 700; }
.trail-map-name { font-size: 22px; margin: 6px 0 2px; }
.trail-map-subtitle { font-size: 13px; color: var(--text-dim); }
.trail-map-nav { display: flex; gap: 10px; margin-top: 14px; }
.trail-map-arrow {
  width: 32px; height: 32px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: transparent;
  color: var(--text-dim);
  cursor: pointer;
  transition: color 0.15s ease, border-color 0.15s ease;
}
.trail-map-arrow:hover { color: var(--text); border-color: var(--text-dim); }
.trail-map-svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.trail-map-path { fill: none; stroke: rgba(244, 239, 227, 0.22); stroke-width: 1.5; }
.trail-marker-dot { fill: rgba(244, 239, 227, 0.35); stroke: rgba(10, 13, 9, 0.6); stroke-width: 2; cursor: pointer; transition: fill 0.2s ease, r 0.2s ease; }
.trail-marker-ring { fill: none; stroke: var(--accent-bright); stroke-width: 1.5; opacity: 0; transition: opacity 0.2s ease; }
.trail-marker.is-active .trail-marker-dot { fill: var(--text); }
.trail-marker.is-active .trail-marker-ring { opacity: 1; }
.trail-marker-label { font-family: var(--font); font-size: 11px; fill: var(--text-dim); pointer-events: none; }
.trail-marker.is-active .trail-marker-label { fill: var(--text); font-weight: 600; }

.trip-detail-info { position: relative; padding: 48px 64px 72px 48px; }
.trip-detail-icon { width: 34px; height: 34px; margin-bottom: 16px; }
.trip-detail-info h3 { font-size: 26px; margin-bottom: 14px; }
.trip-detail-text p { font-size: 15px; line-height: 1.7; color: var(--text-dim); margin-bottom: 14px; }
.trip-detail-gallery { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin-top: 18px; max-width: min(380px, 100%); }
.trip-detail-gallery-item { border-radius: 10px; overflow: hidden; aspect-ratio: 1; }
.trip-detail-gallery-item img { width: 100%; height: 100%; object-fit: cover; }

.trip-detail-side-label {
  position: absolute;
  top: 40px;
  right: 16px;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  font-size: 11px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--text-dimmer);
}

.trail-map-treeline {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  width: 100%;
  height: 70px;
  pointer-events: none;
}
.trail-map-treeline path { fill: rgba(0, 0, 0, 0.4); }

@media (max-width: 860px) {
  .trip-detail-overlay { padding: 0; }
  .trip-detail-panel { max-width: 100%; max-height: 100dvh; height: 100dvh; border-radius: 0; }
  .trip-detail-content { grid-template-columns: 1fr; min-height: 0; }
  .trip-detail-map { border-right: none; border-bottom: 1px solid var(--border); }
  .trail-map, .trip-detail-map { min-height: 320px; }
  .trip-detail-info { padding: 32px 28px 56px; }
  .trip-detail-side-label { display: none; }
}

/* Footer
   ========================================================================== */

.site-footer { background: var(--bg-dark); padding: 32px 0; text-align: center; }
.footer-bottom p { color: rgba(255, 248, 236, 0.5); font-size: 13px; }
.footer-admin-link { margin-top: 4px; }
.footer-admin-link a { text-decoration: underline; opacity: 0.7; }
.footer-admin-link a:hover { opacity: 1; }

/* Responsive video/embed utility — used anywhere a cms_video() field renders */

.media-embed-16x9 { position: relative; padding-top: 56.25%; background: #000; }
.media-embed-16x9 iframe,
.media-embed-16x9 video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  object-fit: cover;
}

/* Responsive
   ========================================================================== */

@media (max-width: 900px) {
  .grid-3 { grid-template-columns: 1fr; }
  .approach-grid { grid-template-columns: 1fr; gap: 36px; }
}

@media (max-width: 768px) {
  .main-nav {
    position: absolute;
    top: 100%;
    left: 0; right: 0;
    background: var(--bg-dark);
    border-bottom: 1px solid rgba(255, 248, 236, 0.1);
    /* grid-template-rows (0fr -> 1fr) instead of animating max-height: same
       open/close effect without animating a layout property directly. */
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 0.25s ease;
  }
  .main-nav.is-open { grid-template-rows: 1fr; }
  /* The clip target must itself carry zero padding/border — overflow:hidden
     only clips an element's CONTENT, not its own padding box, so if this
     wrapper were the padded <ul> itself, the collapsed track would still show
     a sliver equal to the ul's own top+bottom padding no matter how small the
     grid row shrinks. */
  .main-nav-clip { min-height: 0; overflow: hidden; }
  .main-nav ul { flex-direction: column; padding: 8px 24px 20px; gap: 4px; }
  .main-nav a { display: block; padding: 12px 0; border-bottom: 1px solid rgba(255, 248, 236, 0.1); }
  /* A distracted mobile visitor is the audience least able to spare a full
     scroll to find the only conversion point — keep a compact CTA in the
     header instead of hiding it, the hamburger just needs the room. */
  .header-actions .btn { padding: 9px 14px; font-size: 11px; }
  .nav-toggle { display: flex; }
}

/* ==========================================================================
   Admin / install / auth — shared across every Deadmojo CMS-driven template.
   Uses var() fallbacks so it works whether or not the theme above defines
   --bg-card / --radius-lg.
   ========================================================================== */

/* Fixed overlay, not part of normal flow — the admin sidebar/main content
   sits at its usual position underneath, so a banner appearing (or a flash
   message coming and going after an action) never shifts the nav or page
   content down. Each banner inside carries its own background/shadow so it
   still reads clearly over whatever content it's sitting on top of. */
.admin-notices {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  display: flex;
  flex-direction: column;
}

.flash {
  margin: 16px auto 0;
  padding: 12px 18px;
  border-radius: var(--radius, 8px);
  font-size: 14px;
  background: var(--bg-card, var(--bg-alt));
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35);
}
.flash-success { background: rgba(80, 200, 120, 0.12); border: 1px solid rgba(80, 200, 120, 0.35); color: #4fbd7a; backdrop-filter: blur(8px); }
.flash-error { background: rgba(220, 80, 70, 0.12); border: 1px solid rgba(220, 80, 70, 0.35); color: #e2685c; backdrop-filter: blur(8px); }

.demo-banner {
  background: var(--accent-btn, var(--accent));
  color: var(--accent-text, #fff);
  text-align: center;
  font-size: 14px;
  font-weight: 700;
  padding: 10px 16px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35);
}
.demo-banner a { text-decoration: underline; }

.auth-section { padding: 64px 0 80px; display: flex; justify-content: center; }

.auth-card {
  width: 100%;
  max-width: 380px;
  background: var(--bg-card, var(--bg-alt));
  border: 1px solid var(--border);
  border-radius: var(--radius-lg, var(--radius, 12px));
  padding: 36px 32px;
}

.auth-card h1 { font-size: 24px; margin-bottom: 6px; text-align: center; }
.auth-subtext { color: var(--text-dim); font-size: 13px; text-align: center; margin-bottom: 24px; }
.demo-login-hint { font-size: 13px; color: var(--text-dim); background: var(--bg-alt); border: 1px solid var(--border); border-radius: var(--radius, 8px); padding: 10px 14px; margin-bottom: 20px; }

.form-errors { background: rgba(220, 80, 70, 0.1); border: 1px solid rgba(220, 80, 70, 0.3); border-radius: var(--radius, 8px); padding: 14px 18px; margin-bottom: 20px; font-size: 14px; color: #e2685c; }
.form-errors ul { list-style: disc; padding-left: 18px; }

.form-group { margin-bottom: 18px; }
.form-group label { display: block; font-size: 13px; font-weight: 700; margin-bottom: 6px; color: var(--text-dim); }
.field-help { font-size: 12px; color: var(--text-dimmer); margin: -2px 0 8px; }

.form-group input[type="text"],
.form-group input[type="email"],
.form-group input[type="password"],
.form-group input[type="url"],
.form-group input[type="date"],
.form-group input[type="number"],
.form-group input[type="file"],
.form-group textarea,
.form-group select {
  width: 100%;
  padding: 11px 14px;
  border-radius: var(--radius, 8px);
  border: 1px solid var(--border);
  background: var(--bg);
  color: var(--text);
  font-family: inherit;
  font-size: 14px;
}
.form-group textarea { resize: vertical; }
.form-group input:focus,
.form-group textarea:focus,
.form-group select:focus { outline: none; border-color: var(--accent); }

.admin-video-url { margin-top: 8px; }

.admin-checkbox { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--text-dim); margin: 8px 0; }
.admin-checkbox input { width: auto; }

.admin-media-preview { margin-bottom: 10px; }
.admin-media-preview img { max-width: 220px; max-height: 140px; object-fit: cover; border-radius: var(--radius, 8px); border: 1px solid var(--border); }
.admin-media-preview video { max-width: 320px; border-radius: var(--radius, 8px); border: 1px solid var(--border); }
.admin-media-preview-favicon img { max-width: 64px; max-height: 64px; object-fit: contain; background: var(--bg); padding: 8px; }

.admin-body { background: var(--bg); }
.admin-shell { display: flex; min-height: 100vh; align-items: flex-start; }

.admin-sidebar {
  width: 220px;
  flex-shrink: 0;
  min-height: 100vh;
  background: var(--bg-card, var(--bg-alt));
  border-right: 1px solid var(--border);
  padding: 28px 20px;
  display: flex;
  flex-direction: column;
  position: sticky;
  top: 0;
}
.admin-sidebar .logo { margin-bottom: 28px; font-size: 18px; display: block; }

.admin-nav { display: flex; flex-direction: column; gap: 4px; flex: 1; }
.admin-nav a {
  padding: 10px 12px;
  border-radius: var(--radius, 8px);
  font-size: 14px;
  color: var(--text-dim);
}
.admin-nav a:hover { background: var(--bg-alt); text-decoration: none; }
.admin-nav a.is-active { background: rgba(255, 255, 255, 0.06); color: var(--accent); }

.admin-sidebar-footer {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-top: 16px;
  border-top: 1px solid var(--border);
  font-size: 13px;
}
.admin-sidebar-footer a { color: var(--text-dim); }
.admin-sidebar-footer a:hover { color: var(--accent); }

.admin-main { flex: 1; padding: 40px; max-width: 900px; }
.admin-main h1 { font-size: 26px; margin-bottom: 6px; }
.admin-subtext { color: var(--text-dim); margin-bottom: 28px; }

.admin-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-bottom: 32px; }
.admin-stat { background: var(--bg-card, var(--bg-alt)); border: 1px solid var(--border); border-radius: var(--radius-lg, var(--radius, 12px)); padding: 20px; }
.admin-stat-value { display: block; font-size: 28px; font-weight: 800; margin-bottom: 4px; color: var(--accent); }
.admin-stat-label { font-size: 12px; color: var(--text-dim); }

.admin-quicklinks { display: flex; gap: 10px; flex-wrap: wrap; }

.admin-dashboard-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 32px; }
.admin-dashboard-panel { background: var(--bg-card, var(--bg-alt)); border: 1px solid var(--border); border-radius: var(--radius-lg, var(--radius, 12px)); padding: 20px; }
.admin-dashboard-panel-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.admin-dashboard-panel-head h2 { font-size: 15px; margin: 0; }
.admin-dashboard-panel-head a { font-size: 12px; color: var(--accent); white-space: nowrap; }
.admin-dashboard-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.admin-dashboard-list li { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; padding-bottom: 12px; border-bottom: 1px solid var(--border); }
.admin-dashboard-list li:last-child { padding-bottom: 0; border-bottom: none; }
.admin-dashboard-list-meta { display: block; font-size: 12px; color: var(--text-dim); margin-top: 2px; }
.inquiry-badge-full { background: rgba(200, 80, 80, 0.15); color: #c25b5b; }
.inquiry-badge-low { background: rgba(200, 150, 60, 0.15); color: #c1912c; }

@media (max-width: 720px) {
  .admin-dashboard-grid { grid-template-columns: 1fr; }
}

.admin-form { max-width: 640px; }
.admin-form-wide { max-width: 720px; }

.admin-fieldset { border: 1px solid var(--border); border-radius: var(--radius-lg, var(--radius, 12px)); padding: 24px; margin-bottom: 24px; }
.admin-fieldset legend { padding: 0 8px; font-size: 15px; font-weight: 700; color: var(--accent); }

.trip-detail-editor { margin-top: 18px; border-top: 1px solid var(--border); padding-top: 16px; }
.trip-detail-editor-heading { font-weight: 700; margin-bottom: 4px; }
.trip-detail-editor .form-group { margin-top: 16px; }
.trip-gallery-admin-grid { display: flex; flex-wrap: wrap; gap: 14px; margin-bottom: 12px; }
.trip-gallery-admin-item { width: 140px; text-align: center; }
.trip-gallery-admin-item img { width: 100%; height: 100px; object-fit: cover; border-radius: var(--radius, 8px); border: 1px solid var(--border); margin-bottom: 6px; }
.trip-waypoint-admin-list { display: flex; flex-direction: column; gap: 8px; margin-bottom: 12px; }
.trip-waypoint-admin-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.trip-waypoint-admin-row input { margin: 0; }
.waypoint-miles-label { font-size: 12px; color: var(--text-dimmer); white-space: nowrap; }

.trail-picker-section {
  margin: 16px 0 20px;
  padding: 16px 18px;
  background: var(--bg-alt);
  border: 1px solid var(--border);
  border-radius: var(--radius, 8px);
}
.trail-picker-loaded-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 10px; }
.trail-picker-loaded-actions form { margin: 0; }
.trail-picker-search { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; }
.trail-picker-search select,
.trail-picker-search input[type="text"] { margin: 0; max-width: 220px; }
.trail-picker-toggle { display: flex; align-items: flex-start; gap: 6px; margin: 0 0 6px; }
.trail-picker-toggle input[type="checkbox"] { margin: 3px 0 0; flex-shrink: 0; }
.trail-picker-results { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; font-size: 13px; color: var(--text-dim); }
.trail-result-btn { text-align: left; }
.trail-result-btn.is-selected { background: var(--accent-btn, var(--accent)); border-color: var(--accent-btn, var(--accent)); color: var(--accent-text, #fff); }
.trail-picker-map { width: 100%; height: 320px; border-radius: var(--radius, 8px); border: 1px solid var(--border); margin-bottom: 10px; background: var(--bg-alt); }
/* Leaflet ships its own default marker/control styling, which is enough
   here — this just keeps its own z-index scheme from ever climbing above
   the rest of the admin UI (e.g. a modal or the sticky sidebar). */
.trail-picker-map .leaflet-pane,
.trail-picker-map .leaflet-control { z-index: 5; }

.upload-progress { margin: 14px 0 0; }
.upload-progress-track { height: 8px; background: var(--bg-alt); border-radius: 999px; overflow: hidden; }
.upload-progress-bar { height: 100%; width: 0%; background: var(--accent-btn, var(--accent)); transition: width 0.15s ease; }
.upload-progress-label { display: block; font-size: 12px; color: var(--text-dim); margin-top: 6px; }

.install-body { display: flex; align-items: flex-start; justify-content: center; padding: 60px 20px; background: var(--bg); }
.install-card {
  width: 100%;
  max-width: 480px;
  background: var(--bg-card, var(--bg-alt));
  border: 1px solid var(--border);
  border-radius: var(--radius-lg, var(--radius, 12px));
  padding: 36px 32px;
}
.install-card h1 { font-size: 24px; margin-bottom: 24px; }
.install-card h2 { font-size: 16px; margin: 24px 0 12px; }
.install-card p { margin-bottom: 12px; font-size: 14px; color: var(--text-dim); }

.install-checklist { list-style: none; font-size: 14px; }
.install-checklist li { padding: 6px 0; }
.install-checklist .is-ok { color: #4fbd7a; }
.install-checklist .is-fail { color: #e2685c; font-weight: 600; }

.install-error { background: rgba(220, 80, 70, 0.1); border: 1px solid rgba(220, 80, 70, 0.3); border-radius: var(--radius, 8px); padding: 14px 18px; margin: 14px 0; font-size: 14px; }
.install-error ul { list-style: disc; padding-left: 18px; margin: 0; }
.install-success { color: #4fbd7a; font-weight: 600; font-size: 15px; }
.install-hint { font-size: 12px; color: var(--text-dimmer); }

@media (max-width: 768px) {
  .admin-shell { flex-direction: column; }
  .admin-sidebar { width: 100%; min-height: auto; position: static; flex-direction: row; align-items: center; flex-wrap: wrap; gap: 16px; }
  .admin-nav { flex-direction: row; flex-wrap: wrap; }
  .admin-sidebar-footer { flex-direction: row; border-top: none; padding-top: 0; margin-left: auto; }
  .admin-main { padding: 24px; }
  .admin-stats { grid-template-columns: repeat(2, 1fr); }
}

/* Admin: content editor section nav + inline field errors
   ========================================================================== */

.admin-section-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  position: sticky;
  top: 0;
  z-index: 10;
  background: var(--bg);
  padding: 10px 0;
  margin-bottom: 8px;
  border-bottom: 1px solid var(--border);
}
.admin-section-nav a {
  font-size: 12px;
  font-weight: 700;
  color: var(--text-dim);
  padding: 6px 10px;
  border-radius: var(--radius, 8px);
  background: var(--bg-alt);
}
.admin-section-nav a:hover { color: var(--accent); }
.admin-section-nav a.is-active { background: var(--accent); color: var(--bg-dark); }

.form-group.has-error input,
.form-group.has-error textarea { border-color: #d9584a; }
.field-error { font-size: 12px; color: #d9584a; margin: -2px 0 8px; font-weight: 600; }

/* Admin: appearance color pickers
   ========================================================================== */

.appearance-color-row { display: flex; align-items: center; gap: 10px; }
.appearance-color-row input[type="color"] { width: 44px; height: 40px; padding: 2px; border-radius: var(--radius, 6px); border: 1px solid var(--border); background: var(--bg); cursor: pointer; flex-shrink: 0; }
.appearance-color-row input[type="text"] { width: auto; flex: 1; max-width: 160px; }
.appearance-preview { display: inline-flex; margin-top: 10px; }

/* Admin: trip-dates table
   ========================================================================== */

.admin-table { width: 100%; border-collapse: collapse; margin-bottom: 16px; }
.admin-table th { text-align: left; font-size: 12px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-dim); padding: 8px 8px; border-bottom: 1px solid var(--border); }
.admin-table td { padding: 6px 8px; border-bottom: 1px solid var(--border); }
.admin-table input[type="date"],
.admin-table-number { width: 100%; padding: 8px 10px; border-radius: var(--radius, 6px); border: 1px solid var(--border); background: var(--bg); color: var(--text); font-size: 13px; }
.admin-table-actions { text-align: right; white-space: nowrap; }

.admin-inline-form { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 14px; }
.admin-inline-form .form-group { margin-bottom: 0; }
.admin-inline-form input { width: auto; }

/* Admin: inquiries list
   ========================================================================== */

.inquiry-list { display: flex; flex-direction: column; gap: 14px; }
.inquiry-card { background: var(--bg-card, var(--bg-alt)); border: 1px solid var(--border); border-radius: var(--radius-lg, 8px); padding: 18px 20px; }
.inquiry-status-read { opacity: 0.75; }
.inquiry-status-archived { opacity: 0.5; }
.inquiry-card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 6px; }
.inquiry-email { font-size: 13px; color: var(--text-dim); margin-left: 6px; }
.inquiry-badge { font-size: 11px; text-transform: uppercase; letter-spacing: 0.03em; padding: 3px 10px; border-radius: 999px; background: var(--bg-alt); color: var(--text-dim); flex-shrink: 0; }
.inquiry-badge-new { background: rgba(80, 200, 120, 0.15); color: #3f9463; }
.inquiry-trip { font-size: 13px; font-weight: 700; color: var(--accent); margin-bottom: 8px; }
.inquiry-message { font-size: 14px; color: var(--text-dim); margin-bottom: 12px; }
.inquiry-card-footer { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; padding-top: 10px; border-top: 1px solid var(--border); }
.inquiry-date { font-size: 12px; color: var(--text-dimmer); }
.inquiry-actions { display: flex; gap: 8px; flex-wrap: wrap; }

/* Admin: media gallery
   ========================================================================== */

.media-upload-form { margin-bottom: 28px; padding-bottom: 24px; border-bottom: 1px solid var(--border); }

.media-gallery-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 20px; }

.media-gallery-item { background: var(--bg-card, var(--bg-alt)); border: 1px solid var(--border); border-radius: var(--radius-lg, 8px); overflow: hidden; display: flex; flex-direction: column; }
.media-gallery-thumb { height: 130px; background: var(--bg); }
.media-gallery-thumb img { width: 100%; height: 100%; object-fit: cover; }

.media-gallery-meta { padding: 10px 12px 0; display: flex; flex-direction: column; gap: 4px; flex: 1; }
.media-gallery-name { font-size: 12px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.media-gallery-size { font-size: 11px; color: var(--text-dimmer); }
.media-gallery-used { font-size: 11px; color: var(--accent); }
.media-gallery-unused { font-size: 11px; color: var(--text-dimmer); }

.media-gallery-actions { display: flex; gap: 8px; padding: 10px 12px 12px; }
.media-gallery-actions form { flex: 1; }
.media-gallery-actions .btn { width: 100%; }

.upload-progress { margin-top: 10px; max-width: 320px; }
.upload-progress-track { height: 6px; border-radius: 999px; background: var(--border); overflow: hidden; }
.upload-progress-fill { height: 100%; width: 0; border-radius: 999px; background: var(--accent-btn, var(--accent)); transition: width 0.15s ease; }
.upload-progress-fill.is-error { background: #e2685c; }
.upload-progress-label { display: block; margin-top: 4px; font-size: 12px; color: var(--text-dim); }

/* Admin: image picker (Choose Image / Add from Gallery)
   ========================================================================== */

/* Visually hidden, not display:none — a <label for> still opens a display:none
   input's file dialog in every current browser, but keeping it in this
   "clipped" state rather than none is the safer long-term bet for assistive
   tech, and costs nothing here. Selector is deliberately as specific as
   `.form-group input[type="file"]` above (which would otherwise win and
   render this as a full-width bordered box again) plus one more class, so
   it wins regardless of source order rather than relying on a tiebreak. */
input[type="file"].image-picker-file,
.form-group input[type="file"].image-picker-file { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.image-picker-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 4px; }
.image-picker-row label.btn { margin: 0; }
.image-picker-filename { font-size: 12px; color: var(--text-dimmer); }

.gallery-picker-modal { position: fixed; inset: 0; z-index: 300; display: flex; align-items: center; justify-content: center; padding: 20px; }
/* Same higher-specificity-over-[hidden] reasoning as .inquiry-modal above. */
.gallery-picker-modal[hidden] { display: none; }
.gallery-picker-backdrop { position: absolute; inset: 0; background: rgba(30, 43, 35, 0.55); }
.gallery-picker-panel {
  position: relative;
  width: 100%;
  max-width: 720px;
  max-height: calc(100dvh - 40px);
  overflow-y: auto;
  background: var(--bg);
  border-radius: var(--radius-lg, 8px);
  padding: 32px 28px;
  text-align: left;
}
.gallery-picker-panel h2 { font-size: 20px; margin-bottom: 16px; padding-right: 24px; }
.gallery-picker-close {
  position: absolute;
  top: 16px; right: 16px;
  width: 28px; height: 28px;
  border: none;
  background: transparent;
  font-size: 22px;
  line-height: 1;
  color: var(--text-dim);
  cursor: pointer;
}
.gallery-picker-close:hover { color: var(--text); }

.gallery-picker-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 12px; }
.gallery-picker-item { display: block; width: 100%; background: var(--bg-card, var(--bg-alt)); border: 1px solid var(--border); border-radius: var(--radius, 8px); overflow: hidden; cursor: pointer; padding: 0; text-align: left; font: inherit; color: inherit; }
.gallery-picker-item:hover { border-color: var(--accent); }
/* .gallery-picker-thumb/-name are <span>s (kept to phrasing content, since
   this item is a <button>), so `display: block` here isn't optional — an
   inline span ignores `height` entirely, which let each thumbnail render at
   its raw image height instead of the intended fixed-height crop. */
.gallery-picker-thumb { display: block; height: 90px; background: var(--bg); }
.gallery-picker-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.gallery-picker-name { display: block; font-size: 11px; padding: 6px 8px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gallery-picker-status { font-size: 13px; color: var(--text-dim); }