/*
 * Route tour overview page styles. Loaded only on /routes/* pages via
 * extra_head. Wraps the audio-tour body in `.hg-route-tour`; legacy
 * `.hg-myna-*` element classes (segments, nav, voice toggle, etc.) are
 * preserved inside that wrapper so existing JS keeps working.
 */

/* The site's default `.wrapper-sides` on a nosidebar page ships with 4%
   padding per side AND a 1404px max-width cap — at a 1920px viewport
   that puts 258px of empty space on each side, which reads as a deeply
   inset content column coming off a full-bleed hero. !important is
   required on max-width because the base rule `.nosidebar .wrapper-sides
   { max-width: 1404px }` has equal specificity (two classes) and source
   order doesn't consistently win. Pull the route content close to the
   viewport edges: slim padding, let it grow to 1700px on wide monitors
   so reading lines don't get unreadably long. */
.hg-route-tour .wrapper-sides {
  padding-left: 14px !important;
  padding-right: 14px !important;
  max-width: 1700px !important;
  margin-left: auto;
  margin-right: auto;
}
@media only screen and (min-width: 768px) {
  .hg-route-tour .wrapper-sides {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }
}
@media only screen and (min-width: 1280px) {
  .hg-route-tour .wrapper-sides {
    padding-left: 28px !important;
    padding-right: 28px !important;
  }
}

/* ── Trip-level stats banner ───────────────────────────────────────── */
/* Sits below the hero wave SVG and above the affiliate disclosure. Four
   stat cells in a flex row: driving time, total distance, stop count,
   suggested day length. Cream background ties it to the warm content
   tone the rest of the page leans into; mobile wraps to 2x2. */
.hg-route-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
  align-items: stretch;
  background: #faf7f0;
  border: 1px solid #ece6d6;
  border-radius: 12px;
  padding: 18px 14px;
  margin: 16px auto 0;
  max-width: 1100px;
  box-sizing: border-box;
}
.hg-route-stat {
  flex: 1 1 140px;
  min-width: 140px;
  padding: 6px 10px;
  text-align: center;
}
.hg-route-stat + .hg-route-stat {
  border-left: 1px solid #ece6d6;
}
.hg-route-stat-num {
  font-size: 28px;
  font-weight: 800;
  line-height: 1.1;
  color: #1d2330;
  letter-spacing: -0.5px;
}
.hg-route-stat-label {
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: #6b7180;
  margin-top: 4px;
}
@media only screen and (min-width: 768px) {
  .hg-route-stats {
    gap: 16px;
    padding: 22px 18px;
  }
  .hg-route-stat-num {
    font-size: 32px;
  }
  .hg-route-stat-label {
    font-size: 13px;
  }
}
/* On narrow screens, drop the dividers — they look ugly when cells stack
   into 2x2. Re-introduce the spacing through padding instead. */
@media only screen and (max-width: 600px) {
  .hg-route-stat + .hg-route-stat {
    border-left: 0;
  }
  .hg-route-stat {
    flex: 1 1 45%;
    border-bottom: 1px solid #ece6d6;
    padding-bottom: 12px;
  }
  .hg-route-stat:nth-last-child(-n+2) {
    border-bottom: 0;
  }
}

/* ── Hero ─────────────────────────────────────────────────────────── */
.hg-myna-hero {
  padding: 30px 0 16px;
  border-bottom: 1px solid #eee;
  margin-bottom: 24px;
}
.hg-myna-hero-eyebrow {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: #1D9771;
  margin-bottom: 8px;
}
.hg-myna-hero .entry-title {
  font-size: 38px;
  line-height: 1.15;
  margin: 0 0 10px;
  color: #222;
}
.hg-myna-hero-meta {
  font-size: 15px;
  color: #666;
  margin: 0 0 14px;
  line-height: 1.4;
}
.hg-myna-hero-desc {
  font-size: 18px;
  line-height: 1.55;
  color: #333;
  margin: 0;
  max-width: 780px;
}

/* ── Toolbar: voice toggle + Dry Run button ───────────────────────── */
.hg-myna-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  align-items: center;
  justify-content: space-between;
  padding: 18px 20px;
  background: #f6f5fb;
  border-radius: 12px;
  margin-bottom: 10px;
}
.hg-myna-voice-toggle {
  display: flex;
  align-items: center;
  gap: 8px;
}
.hg-myna-toggle-label {
  font-size: 16px;
  font-weight: 700;
  color: #333;
  margin-right: 4px;
}
.hg-myna-voice-btn {
  background: transparent;
  border: 1px solid #cfcfd9;
  border-radius: 999px;
  padding: 8px 16px;
  font: inherit;
  font-size: 15px;
  font-weight: 600;
  color: #555;
  cursor: pointer;
  line-height: 1;
}
.hg-myna-voice-btn:hover { color: #1D9771; border-color: #1D9771; }
.hg-myna-voice-btn.is-active {
  background: #1D9771;
  color: #fff;
  border-color: #1D9771;
}
/* ── Mile marker navigator ─────────────────────────────────────────
   Primary Dry Run surface. Large inline SVG highway shield + mile sign
   flanked by prev/next arrows. Roadside-sign aesthetic — big, tactile,
   feels like standing at a real pullout. */
.hg-myna-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 24px;
  padding: 24px 16px 12px;
}
.hg-myna-nav-arrow {
  flex-shrink: 0;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  border: 2px solid #d8d8e0;
  background: #fff;
  color: #555;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  transition: transform .12s ease, border-color .12s, color .12s, background .12s;
}
.hg-myna-nav-arrow:hover {
  border-color: #1D9771;
  color: #1D9771;
  transform: scale(1.05);
}
.hg-myna-nav-arrow:disabled {
  opacity: 0.35;
  cursor: default;
}
.hg-myna-nav-arrow:disabled:hover {
  border-color: #d8d8e0;
  color: #555;
  transform: none;
}
.hg-myna-nav-arrow svg {
  width: 28px;
  height: 28px;
}

.hg-myna-nav-marker {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  width: 150px;
}

/* Save-this-route toggle in the breadcrumb action row. Inherits the
   .btn .btn-green colors when unsaved; flips to a green-fill "saved"
   state with a check mark when the reader has saved this route. */
.hg-myna-save {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #fff;
  color: #1D9771;
  border: 1px solid #1D9771 !important;
  border-radius: 4px;
  transition: background .15s, color .15s;
}
.hg-myna-save:hover {
  background: #f0f9f5;
}
.hg-myna-save.hg-myna-save--saved {
  background: #1D9771;
  color: #fff;
}
.hg-myna-save.hg-myna-save--saved:hover {
  background: #167a5b;
}

/* Highway shield — uses the same SVG path as the attraction-page mile-
   marker badge (files/js/mile-marker-badge.js). viewBox is 100x105 so the
   width/height ratio matches the canonical shape. */
.hg-myna-shield {
  width: 110px;
  height: 116px;
  display: block;
  filter: drop-shadow(0 2px 6px rgba(0,0,0,0.25));
}
.hg-myna-shield-num {
  font-family: 'Arial Black', Arial, Helvetica, sans-serif;
  font-size: 42px;
  font-weight: 900;
  fill: #222;
  letter-spacing: -1px;
}
/* Auto-shrink longer / letter-based shield content like 'HAVO' so it stays
   inside the egg-shaped Hawaii state-route shield. JS sets data-len to the
   current character count whenever it swaps the shield text. */
.hg-myna-shield-num[data-len="4"] { font-size: 22px; letter-spacing: -2px; }
.hg-myna-shield-num[data-len="5"] { font-size: 18px; letter-spacing: -2px; }
.hg-myna-shield-num[data-len="6"] { font-size: 16px; letter-spacing: -2px; }

/* Green rectangular mile sign below the shield. Dynamically updates. */
.hg-myna-milesign {
  width: 110px;
  background: #1a6b44;
  color: #fff;
  border-radius: 6px;
  border: 2px solid #fff;
  box-shadow: 0 0 0 2px #1a6b44, 0 3px 6px rgba(0,0,0,0.15);
  padding: 6px 4px 8px;
  text-align: center;
  line-height: 1;
  font-family: 'Arial Black', Arial, Helvetica, sans-serif;
}
.hg-myna-milesign-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.4px;
  opacity: 0.92;
  margin-bottom: 2px;
}
.hg-myna-milesign-num {
  font-size: 30px;
  font-weight: 900;
}
/* Smaller number when it's a range like "12–14" or text like "START" */
.hg-myna-milesign.hg-myna-milesign--long .hg-myna-milesign-num {
  font-size: 20px;
}

/* Nav status row — shows current segment name + playback controls. */
.hg-myna-nav-status {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  padding: 0 16px 12px;
  flex-wrap: wrap;
}
.hg-myna-nav-segname {
  font-size: 20px;
  font-weight: 700;
  color: #222;
  text-align: center;
  min-width: 200px;
}
.hg-myna-nav-controls {
  display: flex;
  gap: 8px;
}
.hg-myna-nav-playbtn,
.hg-myna-nav-stopbtn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 20px;
  background: #1D9771;
  color: #fff;
  border: none;
  border-radius: 999px;
  font: inherit;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  line-height: 1;
  transition: background .12s;
}
.hg-myna-nav-playbtn:hover,
.hg-myna-nav-stopbtn:hover { background: #167a5b; }
.hg-myna-nav-playbtn:disabled {
  background: #c9d9d2;
  cursor: default;
}
.hg-myna-nav-playbtn svg,
.hg-myna-nav-stopbtn svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}
.hg-myna-nav-stopbtn {
  background: #888;
  padding: 10px 14px;
}
.hg-myna-nav-stopbtn:hover { background: #555; }

/* Highlight the currently-active segment card in the list below. */
.hg-myna-segment.is-active {
  outline: 3px solid #1D9771;
  outline-offset: 2px;
  box-shadow: 0 6px 20px rgba(29, 151, 113, 0.15);
}

/* Mobile: stack marker + arrows compactly, shrink controls. */
@media (max-width: 640px) {
  .hg-myna-nav { gap: 14px; padding: 18px 8px 8px; }
  .hg-myna-nav-arrow { width: 48px; height: 48px; }
  .hg-myna-nav-marker { width: 120px; }
  .hg-myna-shield { width: 90px; height: 95px; }
  .hg-myna-shield-num[data-len="4"] { font-size: 20px; }
  .hg-myna-shield-num[data-len="5"] { font-size: 16px; }
  .hg-myna-shield-num[data-len="6"] { font-size: 14px; }
  .hg-myna-milesign { width: 90px; padding: 4px 4px 6px; }
  .hg-myna-milesign-num { font-size: 24px; }
  .hg-myna-nav-segname { font-size: 17px; min-width: 0; width: 100%; }
}

.hg-myna-dryrun-btn {
  background: #1D9771;
  color: #fff;
  border: none;
  border-radius: 999px;
  padding: 10px 22px;
  font: inherit;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  line-height: 1;
}
.hg-myna-dryrun-btn:hover { background: #167a5b; }
.hg-myna-dryrun-btn:disabled { background: #9cc9bb; cursor: default; }
.hg-myna-toolbar-help {
  font-size: 17px;
  color: #555;
  line-height: 1.55;
  margin: 10px 4px 28px;
}

/* ── Segment list ─────────────────────────────────────────────────── */
/* The legacy 04-08-25-v1.css rule `.main.nopad ul, .main.nopad ol
   { padding-left: 6% !important }` forces ~60-86px of left padding on
   the segment list at desktop widths — that's the residual indent the
   Myna route page was showing even after the .wrapper-sides padding fix.
   Override with matching specificity + !important so the segments sit
   flush with the narrator toolbar and hero above. */
.main.nopad .hg-myna-segments,
.hg-myna-segments {
  list-style: none;
  padding-left: 0 !important;
  padding-right: 0;
  margin: 0;
  /* `stop-counter` (renamed from segment-counter) only increments on actual
     stop cards, so the numbered ribbon reads 1, 2, 3, ... N where N is the
     stop count — matching the overview map, the trust band, and the BYO
     panel. Connectors and bookends still get a colored ribbon node, just
     without a misleading number. */
  counter-reset: stop-counter;
}
.hg-myna-segment {
  background: #fff;
  border: 1px solid #e6e6e6;
  border-radius: 12px;
  padding: 18px 22px;
  margin-bottom: 14px;
  /* counter-increment moved off the generic .hg-myna-segment and onto the
     -stop variant only — see below. */
  /* flow-root contains the right-floated thumbnail inside the segment box
     so it doesn't bleed into neighbors. The subplayers also `clear: right`
     below, which pushes audio + transcript BELOW the thumb image so they
     get the full container width and don't flow around the photo.
     position: relative anchors the route-ribbon pseudo-elements (numbered
     circle + connecting line) to the card. */
  display: flow-root;
  position: relative;
}
.hg-myna-segment-bookend { border-left: 6px solid #1D9771; background: #f4faf6; }
.hg-myna-segment-connector { border-left: 6px solid #b9a96c; background: #fbf9f0; }
.hg-myna-segment-stop {
  border-left: 6px solid #1866B4;
  counter-increment: stop-counter;
}

/* ── Visual route ribbon ───────────────────────────────────────────── */
/* Each segment's existing border-left is the colored "node" in the ribbon.
   Stops get a numbered circle (::after with the stop-counter); bookends
   and connectors get a smaller dot-style node so they still anchor the
   ribbon visually but don't claim a stop number. The vertical connecting
   line (::before) lives in the negative top margin between cards, painted
   in the segment's own color so a transition from a tan connector to a
   blue stop visibly shifts color along the ribbon. */
.hg-myna-segment::after {
  content: '';  /* connectors + bookends default to no number */
  position: absolute;
  top: 14px;
  left: -22px;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: #fff;
  border: 3px solid currentColor;
  color: inherit;
  font-size: 16px;
  font-weight: 800;
  line-height: 32px;
  text-align: center;
  z-index: 2;
  box-sizing: border-box;
  box-shadow: 0 0 0 3px #fff;
}
/* Stops get the running number — the only segments that count toward the
   route's "X stops" headline. */
.hg-myna-segment-stop::after {
  content: counter(stop-counter);
  color: #1866B4;
}
/* Bookends — small dot in their own color, no number. ★ / ⚑ glyphs are
   reserved for the overview map pins where the icon size makes them
   readable; at ribbon scale a clean colored dot reads better. */
.hg-myna-segment-bookend::after {
  color: #1D9771;
  width: 22px;
  height: 22px;
  top: 22px;
  left: -14px;
  border-width: 2px;
  background: #1D9771;
  box-shadow: 0 0 0 2px #fff;
}
/* Connectors — same shrunken-dot treatment, in their own color. */
.hg-myna-segment-connector::after {
  color: #b9a96c;
  width: 22px;
  height: 22px;
  top: 22px;
  left: -14px;
  border-width: 2px;
  background: #b9a96c;
  box-shadow: 0 0 0 2px #fff;
}
/* Connecting line — sits in the 14px gap above each card, aligned over
   the border-left edge. Skip the very first segment (no card above). */
.hg-myna-segment + .hg-myna-segment::before {
  content: "";
  position: absolute;
  top: -14px;
  left: -3px;
  width: 4px;
  height: 14px;
  background: currentColor;
  z-index: 1;
}
.hg-myna-segment-bookend + .hg-myna-segment::before { color: inherit; }
/* Mobile: collapse to a thin 4px stripe — drop the numbered circle to a
   smaller badge inset INSIDE the card so it doesn't get clipped by the
   site's narrow viewport padding. */
@media only screen and (max-width: 600px) {
  .hg-myna-segment::after {
    top: 10px;
    left: 6px;
    width: 28px;
    height: 28px;
    font-size: 13px;
    line-height: 22px;
    border-width: 2px;
    box-shadow: 0 0 0 2px #fff;
  }
  .hg-myna-segment-head {
    padding-left: 38px;
  }
  .hg-myna-segment + .hg-myna-segment::before {
    left: -1px;
    width: 4px;
  }
}

/* ── Bookend cards: full-width, bigger heading, brand-tinted ─────── */
.hg-myna-segment-bookend {
  padding: 28px 26px;
}
.hg-myna-segment-bookend .hg-myna-segment-name {
  font-size: 28px;
  line-height: 1.15;
}
@media only screen and (min-width: 768px) {
  .hg-myna-segment-bookend {
    padding: 34px 30px;
  }
  .hg-myna-segment-bookend .hg-myna-segment-name {
    font-size: 32px;
  }
}

/* ── Connector cards: slim, transit-flavored ─────────────────────── */
/* Drop padding so connectors read as transitions between stops, not as
   destinations themselves. Keep the audio player visible (don't hide
   inside <details> — that breaks the Dry Run auto-advance logic in
   route-tour-v1.js). The drive-time pill in the head is the headline
   fact; everything else is supporting context. */
.hg-myna-segment-connector {
  padding: 12px 18px;
}
.hg-myna-segment-connector .hg-myna-segment-name {
  font-size: 18px;
  line-height: 1.25;
}
.hg-myna-segment-connector .hg-myna-segment-notes {
  font-size: 14px;
  color: #5f5945;
  margin: 4px 0 8px;
}
.hg-myna-segment-connector .hg-myna-subplayer-label {
  font-size: 12px;
}
@media only screen and (min-width: 768px) {
  .hg-myna-segment-connector {
    padding: 14px 22px;
  }
}

/* ── Drive-time facts ──────────────────────────────────────────────── */
/* Stops get a green "→ N min from previous stop" pill at the top of the
   card — small, scannable, sits above the mile-marker row. Connectors
   surface the same number inside their head badge as the headline fact,
   styled bigger and bolder since the connector card is otherwise sparse. */
.hg-route-drive-from {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #1D9771;
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  padding: 5px 12px;
  border-radius: 999px;
  margin: 0 0 12px;
  letter-spacing: 0.2px;
}
.hg-route-drive-from .hg-route-drive-arrow,
.hg-route-connector-drive .hg-route-drive-arrow {
  font-weight: 900;
  font-size: 15px;
  line-height: 1;
}
.hg-route-connector-drive {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #b9a96c;
  color: #fff;
  font-size: 16px;
  font-weight: 800;
  padding: 6px 14px;
  border-radius: 999px;
  letter-spacing: 0.2px;
}
@media only screen and (min-width: 768px) {
  .hg-route-connector-drive {
    font-size: 17px;
    padding: 8px 16px;
  }
}

.hg-myna-segment-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}

/* Per-segment mile marker — matches the top-nav milesign visually (same
   green, same double-border signpost) but sized small enough to live
   above the Stop pill without dominating the card. Row is a flex
   container so an optional "Start of Hana Highway" callout can sit to
   the right of the sign on wider screens, wrapping below on mobile. */
.hg-myna-segment-milesign-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin: 0 0 12px;
}
.hg-myna-segment-milesign {
  flex-shrink: 0;
  width: 72px;
  background: #1a6b44;
  color: #fff;
  border-radius: 5px;
  border: 2px solid #fff;
  box-shadow: 0 0 0 2px #1a6b44, 0 2px 4px rgba(0,0,0,0.18);
  padding: 4px 4px 6px;
  text-align: center;
  line-height: 1;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
}
.hg-myna-segment-milesign-hwy {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 1.2px;
  opacity: 0.95;
  padding: 1px 0 2px;
}
.hg-myna-segment-milesign-divider {
  height: 1px;
  background: rgba(255,255,255,0.35);
  margin: 1px 6px 3px;
}
.hg-myna-segment-milesign-label {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 1.2px;
  opacity: 0.9;
  margin-bottom: 1px;
}
.hg-myna-segment-milesign-num {
  font-size: 22px;
  font-weight: 900;
}
/* Smaller number for long mileposts like "12.3" so they still fit. */
.hg-myna-segment-milesign-num:not(:empty) {
  word-break: break-all;
}
.hg-myna-segment-highway-start {
  font-size: 12px;
  font-weight: 700;
  color: #1a6b44;
  background: #e8f3ec;
  border: 1px dashed #1a6b44;
  border-radius: 6px;
  padding: 6px 10px;
  letter-spacing: 0.3px;
}
@media (max-width: 560px) {
  .hg-myna-segment-milesign { width: 62px; padding: 3px 3px 5px; }
  .hg-myna-segment-milesign-num { font-size: 18px; }
  .hg-myna-segment-milesign-hwy { font-size: 9px; }
  .hg-myna-segment-highway-start { font-size: 11px; padding: 5px 8px; }
}
.hg-myna-segment-badge {
  display: inline-block;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  padding: 5px 12px;
  border-radius: 999px;
  color: #fff;
}
.hg-myna-badge-bookend { background: #1D9771; }
.hg-myna-badge-connector { background: #b9a96c; }
.hg-myna-badge-stop { background: #1866B4; }
.hg-myna-segment-side {
  font-size: 14px;
  font-weight: 600;
  color: #555;
  text-transform: uppercase;
  letter-spacing: 0.6px;
}
.hg-myna-segment-name {
  font-size: 26px;
  line-height: 1.3;
  margin: 0;
  flex: 1 1 auto;
  color: #222;
}
/* Stops with a canonical attraction page get a clickable title. The anchor
   inherits the h2's size/weight so the card still reads as a single unit;
   hover shifts to Maui brand blue and underlines to signal tappability. */
.hg-myna-segment-name-link {
  color: inherit;
  text-decoration: none;
  border-bottom: 2px solid transparent;
  transition: color 120ms ease, border-color 120ms ease;
}
.hg-myna-segment-name-link:hover,
.hg-myna-segment-name-link:focus {
  color: #1866B4;
  border-bottom-color: #1866B4;
  text-decoration: none;
}
/* Hero thumbnail — floats right, sized to fill the vertical room the
   mile marker + head labels leave on the left. Organic blob shape
   matches the site's tile aesthetic. */
.hg-myna-segment-thumb {
  float: right;
  margin: 0 0 14px 20px;
  width: 300px;
  height: 240px;
  border-radius: 80px 80px 80px 16px;
  overflow: hidden;
  background: #eee;
}
@media (max-width: 900px) {
  .hg-myna-segment-thumb { width: 240px; height: 200px; }
}
.hg-myna-segment-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
/* Tappable thumbnail — same blob shape, but wrapped in a link. Subtle zoom +
   overlay on hover signals "this goes somewhere" without being noisy. */
.hg-myna-segment-thumb-link {
  display: block;
  width: 100%;
  height: 100%;
  position: relative;
  overflow: hidden;
  cursor: pointer;
}
.hg-myna-segment-thumb-link img {
  transition: transform 220ms ease, filter 220ms ease;
}
.hg-myna-segment-thumb-link:hover img,
.hg-myna-segment-thumb-link:focus img {
  transform: scale(1.06);
  filter: brightness(0.92);
}
.hg-myna-segment-thumb-link::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0) 55%, rgba(0,0,0,0.35) 100%);
  opacity: 0;
  transition: opacity 220ms ease;
  pointer-events: none;
}
.hg-myna-segment-thumb-link:hover::after,
.hg-myna-segment-thumb-link:focus::after {
  opacity: 1;
}
@media (max-width: 640px) {
  .hg-myna-segment-thumb {
    float: none;
    width: 100%;
    height: 260px;
    margin: 0 0 12px;
    border-radius: 80px 80px 80px 20px;
  }
}

.hg-myna-segment-notes {
  font-size: 18px;
  color: #555;
  line-height: 1.55;
  margin: 0 0 14px;
  font-style: italic;
}

/* ── Audio sub-players ─────────────────────────────────────────────── */
.hg-myna-subplayers {
  display: flex;
  flex-direction: column;
  gap: 10px;
  /* Float-clear the right-side thumbnail so audio rows sit BELOW it and
     always get the full container width — the transcript especially needs
     this or it wraps into a narrow column next to the photo. */
  clear: right;
}
.hg-myna-subplayer {
  background: #f9f9fb;
  border-radius: 8px;
  padding: 12px 16px;
}
.hg-myna-subplayer-label {
  font-size: 15px;
  font-weight: 700;
  color: #333;
  margin-bottom: 8px;
}
.hg-myna-hint {
  font-weight: 400;
  font-size: 13px;
  color: #888;
  margin-left: 6px;
}
.hg-myna-audio {
  width: 100%;
  height: 40px;
}
.hg-myna-audio-pending {
  font-size: 15px;
  color: #999;
  font-style: italic;
  padding: 10px 0;
}

/* ── Transcript toggle ─────────────────────────────────────────────
   Uses native <details>/<summary> so the toggle works without JS and
   is keyboard + screen-reader accessible out of the box. Transcript
   text is the author-written source from _data/route_tours/*.yml —
   same factual content as the narration, lightly tuned for voice by
   the 3-model editorial pipeline before TTS. */
.hg-myna-transcript {
  margin: 10px 0 0;
  border-top: 1px dashed #e0e0e0;
  padding-top: 10px;
}
.hg-myna-transcript summary {
  cursor: pointer;
  color: #1866B4;
  font-weight: 600;
  font-size: 15px;
  padding: 6px 0;
  list-style: none;
  user-select: none;
  display: inline-flex;
  align-items: center;
  gap: 7px;
}
.hg-myna-transcript summary::-webkit-details-marker { display: none; }
.hg-myna-transcript summary::before {
  content: "▸";
  display: inline-block;
  font-size: 12px;
  color: #1866B4;
  transition: transform 150ms ease;
}
.hg-myna-transcript[open] summary::before {
  transform: rotate(90deg);
}
.hg-myna-transcript summary:hover { color: #124e8a; }
.hg-myna-transcript[open] summary { margin-bottom: 8px; }
.hg-myna-transcript-body {
  font-size: 18px;
  line-height: 1.65;
  color: #2a2a2a;
  padding: 14px 18px;
  background: #fafafa;
  border-radius: 8px;
  border-left: 3px solid #1866B4;
}

/* ── Page link (bridge to canonical Whippoorwill attraction page) ─── */
.hg-myna-segment-pagelink {
  margin: 12px 0 0;
  font-size: 16px;
}
.hg-myna-segment-pagelink a {
  color: #1866B4;
  font-weight: 600;
  text-decoration: none;
  border-bottom: 1px dotted #1866B4;
}
.hg-myna-segment-pagelink a:hover { color: #124e8a; }

/* ── Disclaimer ───────────────────────────────────────────────────── */
.hg-myna-disclaimer {
  font-size: 13px;
  line-height: 1.6;
  color: #888;
  padding-top: 16px;
  border-top: 1px solid #eee;
  margin: 0;
}
.hg-myna-disclaimer a { color: #888; text-decoration: underline; }

/* ── Responsive ───────────────────────────────────────────────────── */
@media (max-width: 640px) {
  .hg-myna-hero .entry-title { font-size: 28px; }
  .hg-myna-hero-desc { font-size: 16px; }
  .hg-myna-segment-name { font-size: 21px; }
  .hg-myna-segment-notes { font-size: 16px; }
  .hg-myna-transcript-body { font-size: 17px; }
  .hg-myna-toolbar { flex-direction: column; align-items: stretch; }
  .hg-myna-dryrun-btn { width: 100%; }
}

/* ── Form-control reset (defense-in-depth) ───────────────────────────
   Per CLAUDE.md, the site's global `main input[type='text']` and
   `textarea, select` rules in 04-08-25-v1.css ship with attribute-
   specific selectors that beat any class-based override at (0,1,1) or
   lower. Checkboxes are NOT in the global rule today, but adding a
   scoped reset here prevents future global rule expansions from
   breaking the BYO Include chip. We use type-specific selectors so
   each lands at (0,1,2) — same specificity as the global, plus later
   source order. */
.hg-route-tour input[type='checkbox'],
.hg-route-tour input[type='radio'],
.hg-route-tour input[type='text'],
.hg-route-tour select,
.hg-route-tour textarea {
  height: auto;
  margin: 0;
  background: none;
  background-color: transparent;
  border: none;
  border-radius: 0;
  padding: 0;
  font-size: inherit;
  font-family: inherit;
  color: inherit;
  line-height: 1.4;
  box-shadow: none;
  width: auto;
}

/* ── Build-Your-Own toolbar ──────────────────────────────────────── */
/* Sits between the mile-marker nav and the segment list. Lets the reader
   pick a preset (must-stops only / beach day / etc.) or build their own
   selection by tapping the per-stop Include chip. The toolbar itself is a
   warm-cream card matching the trip-stats banner so the page reads as a
   cohesive control surface above the segment list. */
.hg-route-byo {
  background: #f4f2eb;
  border: 1px solid #ddd6c0;
  border-radius: 12px;
  padding: 16px 18px;
  margin: 22px auto 12px;
  max-width: 1100px;
  box-sizing: border-box;
}
.hg-route-byo-head {
  margin-bottom: 12px;
}
.hg-route-byo-title {
  margin: 0 0 4px;
  font-size: 18px;
  font-weight: 800;
  color: #1d2330;
  letter-spacing: -0.2px;
}
.hg-route-byo-sub {
  margin: 0;
  font-size: 14px;
  color: #6b6450;
  line-height: 1.5;
}
.hg-route-byo-inline-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: #1D9771;
  color: #fff;
  padding: 1px 8px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  vertical-align: 1px;
}
.hg-route-byo-presets {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 10px;
}
.hg-route-byo-preset {
  background: #fff;
  border: 1.5px solid #d6cfba;
  border-radius: 999px;
  padding: 7px 14px;
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  color: #5a5340;
  cursor: pointer;
  line-height: 1;
  transition: background .12s, color .12s, border-color .12s, transform .08s;
}
.hg-route-byo-preset:hover {
  border-color: #1D9771;
  color: #1D9771;
}
.hg-route-byo-preset:active { transform: scale(0.97); }
.hg-route-byo-preset.is-active {
  background: #1D9771;
  color: #fff;
  border-color: #1D9771;
}
.hg-route-byo-counter {
  font-size: 13px;
  color: #6b6450;
  font-weight: 600;
  letter-spacing: 0.2px;
}
.hg-route-byo-counter-num {
  color: #1d2330;
  font-weight: 800;
  font-size: 15px;
}
@media (min-width: 768px) {
  .hg-route-byo {
    padding: 18px 22px;
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-rows: auto auto;
    column-gap: 24px;
    align-items: center;
  }
  .hg-route-byo-head { grid-column: 1 / -1; margin-bottom: 0; }
  .hg-route-byo-title { font-size: 19px; }
  .hg-route-byo-presets { margin-bottom: 0; }
  .hg-route-byo-counter {
    text-align: right;
    white-space: nowrap;
  }
}

/* ── Per-segment Include chip ──────────────────────────────────────── */
/* Floats top-right of each STOP card. The underlying <input type="checkbox">
   is visually hidden but kept in the DOM for keyboard + screen-reader
   access. The chip is the visible affordance — green-checked when included,
   muted-outline when excluded. Position: top-right via absolute to avoid
   disturbing the existing flex layout in .hg-myna-segment-head. The
   container's display:flow-root + position:relative anchors this. */
.hg-route-include {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 3;
  cursor: pointer;
  user-select: none;
  display: inline-block;
}
.hg-route-include-input {
  /* Visually hidden but accessible — same pattern as common a11y "sr-only"
     except we keep pointer-events for keyboard focus to land. */
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.hg-route-include-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #1D9771;
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.4px;
  padding: 6px 12px;
  border-radius: 999px;
  border: 2px solid #1D9771;
  line-height: 1;
  transition: background .12s, color .12s, border-color .12s;
  box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}
.hg-route-include-icon {
  display: inline-block;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #fff;
  position: relative;
  flex-shrink: 0;
}
/* Checkmark in the icon circle when included */
.hg-route-include-icon::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 4px;
  width: 4px;
  height: 8px;
  border: solid #1D9771;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
/* Excluded state: muted outline chip with empty circle */
.hg-myna-segment.is-byo-excluded .hg-route-include-chip {
  background: #fff;
  color: #8a8676;
  border-color: #c9c3ad;
  box-shadow: none;
}
.hg-myna-segment.is-byo-excluded .hg-route-include-icon {
  background: transparent;
  border: 1.5px solid #c9c3ad;
}
.hg-myna-segment.is-byo-excluded .hg-route-include-icon::after {
  display: none;
}
.hg-route-include:hover .hg-route-include-chip {
  border-color: #167a5b;
  background: #167a5b;
}
.hg-myna-segment.is-byo-excluded .hg-route-include:hover .hg-route-include-chip {
  background: #fff;
  color: #1D9771;
  border-color: #1D9771;
}
/* Keyboard focus ring on the visible chip (not the hidden input) */
.hg-route-include-input:focus-visible + .hg-route-include-chip {
  outline: 2px solid #1866B4;
  outline-offset: 2px;
}

/* Make sure the segment head doesn't run into the chip on narrow cards */
.hg-myna-segment .hg-myna-segment-head {
  padding-right: 110px;
}
@media (max-width: 600px) {
  .hg-route-include { top: 10px; right: 10px; }
  .hg-route-include-chip { font-size: 11px; padding: 5px 10px; }
  .hg-myna-segment .hg-myna-segment-head { padding-right: 100px; }
  /* On mobile, the .hg-myna-segment::after numbered ribbon badge sits at
     top:10px left:6px. The Include chip is at top:10px right:10px. The
     head's per-row badges (Stop + mile) need extra left padding to clear
     the ribbon badge AND extra right padding for the include chip. */
}

/* ── Excluded segment treatment ──────────────────────────────────────
   Dim and grayscale the card (but keep readable). Drop the audio
   players entirely — playing audio for a stop you've removed from your
   plan is confusing UX. The transcript is also hidden because the
   reader signaled "I don't want this stop." The Include chip stays full
   color so the reader can re-include with one tap. The thumbnail is
   slightly grayed but still visible — it's a useful preview if the
   reader is reconsidering. */
.hg-myna-segment.is-byo-excluded {
  opacity: 0.55;
  background: #fafaf6;
  filter: saturate(0.7);
}
.hg-myna-segment.is-byo-excluded .hg-myna-segment-thumb img {
  filter: grayscale(0.55) brightness(0.96);
}
.hg-myna-segment.is-byo-excluded .hg-myna-subplayers,
.hg-myna-segment.is-byo-excluded .hg-myna-segment-pagelink,
.hg-myna-segment.is-byo-excluded .hg-route-drive-from,
.hg-myna-segment.is-byo-excluded .hg-myna-segment-milesign-row,
.hg-myna-segment.is-byo-excluded .hg-route-connector-drive {
  display: none;
}
/* But the Include chip stays at full opacity so re-including is easy */
.hg-myna-segment.is-byo-excluded .hg-route-include {
  opacity: 1;
  filter: saturate(1);
}
/* Connectors that are auto-dimmed (because their next stop is excluded)
   collapse aggressively — they're transitions to nowhere when the next
   stop is gone. */
.hg-myna-segment-connector.is-byo-excluded {
  padding: 6px 12px;
  opacity: 0.4;
}

/* ── Print-only cover block ──────────────────────────────────────────
   Hidden on screen, shown when the reader prints / saves as PDF. Renders
   above the first segment as the printout's title page. */
.hg-route-print-cover {
  display: none;
}

/* ── Save-a-copy floating action button ──────────────────────────────
   Bottom-right of viewport. Mirrors the guidebook .hg2026-print-fab
   pattern so readers recognize it. Stays out of the way of the
   feedback FAB (also bottom-right) by sitting slightly higher. The
   feedback FAB's bottom value is 16px; this sits at 80px so they
   stack rather than overlap. */
.hg-route-print-fab {
  position: fixed;
  right: 16px;
  bottom: 80px;
  z-index: 100;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #1d2330;
  color: #fff;
  border: 2px solid #fff;
  border-radius: 999px;
  padding: 12px 18px;
  font: inherit;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  line-height: 1;
  letter-spacing: 0.3px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.22);
  transition: transform .12s ease, background .12s ease;
}
.hg-route-print-fab:hover {
  background: #2d3548;
  transform: translateY(-1px);
}
.hg-route-print-fab:active { transform: translateY(0); }
.hg-route-print-fab:focus-visible {
  outline: 2px solid #1D9771;
  outline-offset: 3px;
}
.hg-route-print-fab svg {
  flex-shrink: 0;
}
@media (max-width: 480px) {
  .hg-route-print-fab {
    /* Tighter on phones, drop the label to keep it from crowding the
       feedback FAB and the page content */
    padding: 11px 12px;
    bottom: 76px;
    right: 12px;
  }
  .hg-route-print-fab-label { display: none; }
  .hg-route-print-fab svg { width: 22px; height: 22px; }
}

/* ── @media print ────────────────────────────────────────────────────
   Produce a clean, scannable trip-plan PDF when the reader hits "Save
   my plan." Hides site chrome, audio players, mile-marker nav, ads,
   FAB, modals, sticky elements; shows the cover block; auto-expands
   transcripts; manages page breaks per stop.

   IMPORTANT: this block uses !important on display/visibility because
   the site stylesheet has aggressive on-screen rules and we can't
   guarantee specificity wins for print without it. */
@media print {
  /* Page setup — letter, modest margins. */
  @page {
    size: letter;
    margin: 0.5in 0.55in;
  }
  body {
    background: #fff !important;
    color: #1a1a1a !important;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

  /* Hide all site chrome that doesn't belong in the printed plan. */
  header, nav, .global-nav, .nav-drill, .nav-drill-modal,
  .footer, footer, .footer-callout, .pre-footer,
  .ph-hero, .ph-wave, .ph-hero-img, .ph-hero-content, .ph-quick-start,
  .hg-route-stats,
  .hg-aff-wrap,
  .hg-myna-toolbar, .hg-myna-nav, .hg-myna-nav-status, .hg-myna-toolbar-help,
  .hg-myna-audio, .hg-myna-audio-pending, .hg-myna-subplayer-label, .hg-myna-hint,
  .hg-myna-disclaimer,
  .hg-route-byo, .hg-route-include,
  .hg-route-print-fab,
  .hg-feedback-fab, #hg-feedback-fab,
  .hg-myna-segment-pagelink,
  .ad-injected, .adsbygoogle, .raptive-ad, .hgads, .hgads-light, .hgads-dark,
  ins[class*="adsbygoogle"],
  .site-alert-banner, .alert-bar,
  .gw-cw-modal, .gw-cw-fab, .corrections-link-row,
  /* Section-level hides for site nav above the route content */
  .has-sidebar-grid > .aside,
  .breadcrumb,
  /* Inline buttons added by the route page header */
  .btn,
  /* Generic site nav containers */
  .wrapper > .row-fluid > .breadcrumbs {
    display: none !important;
  }

  /* Show the print-only cover block. */
  .hg-route-print-cover {
    display: block !important;
    text-align: center;
    padding: 0 0 24pt;
    margin: 0 0 24pt;
    border-bottom: 1.5pt solid #1d2330;
    page-break-after: avoid;
  }
  .hg-route-print-cover-eyebrow {
    font-size: 10pt;
    letter-spacing: 1.5pt;
    text-transform: uppercase;
    color: #1D9771;
    font-weight: 700;
    margin: 0 0 6pt;
  }
  .hg-route-print-cover-title {
    font-size: 28pt;
    line-height: 1.1;
    color: #1d2330;
    margin: 0 0 8pt;
    font-weight: 800;
  }
  .hg-route-print-cover-desc {
    font-size: 11pt;
    line-height: 1.45;
    color: #444;
    margin: 0 auto 16pt;
    max-width: 6in;
  }
  .hg-route-print-cover-stats {
    display: flex;
    justify-content: center;
    gap: 28pt;
    margin: 0 0 12pt;
    flex-wrap: wrap;
  }
  .hg-route-print-cover-stats > div {
    text-align: center;
  }
  .hg-route-print-cover-stats strong {
    display: block;
    font-size: 16pt;
    color: #1d2330;
    font-weight: 800;
    line-height: 1.1;
  }
  .hg-route-print-cover-stats span {
    display: block;
    font-size: 8.5pt;
    text-transform: uppercase;
    letter-spacing: 1pt;
    color: #777;
    margin-top: 3pt;
  }
  .hg-route-print-cover-meta {
    font-size: 8pt;
    color: #999;
    margin: 12pt 0 0;
    letter-spacing: 0.3pt;
  }

  /* Hide excluded segments entirely from the printout — the saved PDF
     reflects the reader's actual chosen plan. */
  .hg-myna-segment.is-byo-excluded {
    display: none !important;
  }

  /* Segment cards — flat, page-break-aware, compact. */
  .hg-route-tour {
    display: block;
  }
  .hg-route-tour .wrapper-sides {
    padding: 0 !important;
    max-width: none !important;
  }
  .hg-myna-segments {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
  }
  .hg-myna-segment {
    background: #fff !important;
    border: 1pt solid #ddd !important;
    border-left-width: 4pt !important;
    border-radius: 4pt !important;
    padding: 10pt 12pt !important;
    margin-bottom: 10pt !important;
    box-shadow: none !important;
    page-break-inside: avoid;
    break-inside: avoid;
    display: block !important;
    position: static !important;
    outline: none !important;
  }
  .hg-myna-segment::after,
  .hg-myna-segment::before {
    /* Hide the screen-only ribbon badges/lines — they're decorative
       and add visual noise to a print layout. The colored border-left
       still distinguishes stops vs. connectors vs. bookends. */
    display: none !important;
  }
  .hg-myna-segment-bookend { border-left-color: #1D9771 !important; background: #f7fbf8 !important; }
  .hg-myna-segment-connector { border-left-color: #b9a96c !important; background: #fbf9f0 !important; }
  .hg-myna-segment-stop { border-left-color: #1866B4 !important; }

  .hg-myna-segment-head {
    padding-right: 0 !important;
    gap: 6pt !important;
    margin-bottom: 6pt !important;
  }
  .hg-myna-segment-name {
    font-size: 14pt !important;
    line-height: 1.2 !important;
    color: #1d2330 !important;
    margin: 0 !important;
  }
  .hg-myna-segment-name-link {
    color: inherit !important;
    border-bottom: none !important;
  }
  .hg-myna-segment-badge {
    font-size: 8pt !important;
    padding: 2pt 8pt !important;
    color: #fff !important;
  }
  .hg-myna-segment-side {
    font-size: 9pt !important;
  }

  /* Drive-time pills — keep, smaller */
  .hg-route-drive-from,
  .hg-route-connector-drive {
    font-size: 9pt !important;
    padding: 2pt 8pt !important;
    margin-bottom: 6pt !important;
    border-radius: 4pt !important;
  }
  .hg-route-drive-from .hg-route-drive-arrow,
  .hg-route-connector-drive .hg-route-drive-arrow {
    font-size: 11pt !important;
  }

  /* Per-segment mile sign — keep, smaller */
  .hg-myna-segment-milesign {
    width: 56pt !important;
    padding: 2pt 2pt 4pt !important;
  }
  .hg-myna-segment-milesign-num {
    font-size: 14pt !important;
  }
  .hg-myna-segment-milesign-hwy {
    font-size: 7pt !important;
  }
  .hg-myna-segment-milesign-label {
    font-size: 7pt !important;
  }
  .hg-myna-segment-highway-start {
    font-size: 8pt !important;
    padding: 3pt 6pt !important;
  }

  /* Thumbnail — keep small + organic shape, reader asked to keep visual */
  .hg-myna-segment-thumb {
    width: 1.4in !important;
    height: 1.05in !important;
    margin: 0 0 6pt 10pt !important;
    border-radius: 32pt 32pt 32pt 8pt !important;
  }
  .hg-myna-segment-thumb img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
  }

  /* Source notes (the italic editorial blurb) — keep, smaller */
  .hg-myna-segment-notes {
    font-size: 9.5pt !important;
    line-height: 1.4 !important;
    color: #333 !important;
    margin: 0 0 6pt !important;
    font-style: italic;
  }

  /* Transcripts — auto-expand inline, keep both approach + arrival.
     The native <details> stays closed by default; force display:block
     on the body so it's always visible in print. The summary itself
     is hidden — the transcript text speaks for itself. */
  .hg-myna-subplayers {
    display: block !important;
    clear: right !important;
    margin-top: 4pt !important;
  }
  .hg-myna-subplayer {
    background: transparent !important;
    padding: 0 !important;
    margin-bottom: 6pt !important;
    page-break-inside: avoid;
    break-inside: avoid;
  }
  .hg-myna-transcript {
    border-top: 0.5pt dashed #ccc !important;
    padding-top: 4pt !important;
    margin-top: 0 !important;
  }
  .hg-myna-transcript summary {
    display: none !important;
  }
  .hg-myna-transcript-body {
    display: block !important;
    font-size: 9.5pt !important;
    line-height: 1.45 !important;
    color: #1a1a1a !important;
    background: transparent !important;
    border-left: 2pt solid #1866B4 !important;
    padding: 4pt 8pt !important;
    border-radius: 0 !important;
    margin: 0 !important;
  }
  /* Force the body to render even when <details> is closed. The
     [open] selector on details normally gates body visibility, but
     setting display:block on .hg-myna-transcript-body wins. */
  .hg-myna-transcript:not([open]) .hg-myna-transcript-body {
    display: block !important;
  }

  /* Print URLs in parentheses for any remaining external links */
  .hg-myna-segment a[href^="http"]:not(.hg-myna-segment-name-link)::after,
  .hg-myna-segment a[href^="https"]:not(.hg-myna-segment-name-link)::after {
    content: " (" attr(href) ")";
    font-size: 8pt;
    color: #888;
    word-break: break-all;
  }

  /* Bookend cards — keep but compact */
  .hg-myna-segment-bookend {
    padding: 12pt 14pt !important;
  }
  .hg-myna-segment-bookend .hg-myna-segment-name {
    font-size: 16pt !important;
  }

  /* Route-page nav buttons (back to /routes, full guide) — hide */
  .wrapper-sides .btn {
    display: none !important;
  }
}