/*
 * Site-wide fixes from the October 2026 design audit.
 * Loaded last in <head> on every page, so these rules win over the
 * per-page <style> blocks. Rules that must also beat <style> blocks placed
 * inside <body> are prefixed with `html body`.
 */

/* 1. Text green. #7a9e2e was 3.1:1 on white; #557020 is 5.6:1. */
:root { --lime-dark: #557020; }
/* The lime button's hover used --lime-dark as a background behind dark
   text, so it gets its own, lighter green that keeps 4.5:1+. */
html body .btn-lime:hover { background: #8fb833; box-shadow: none; }

/* 2. The desktop header keeps its original sizes: the type scale-up made
   the button wrap and crowded the phone number. */
html body .desktop-nav-cta { font-size: 13px !important; white-space: nowrap; }
html body .nav-phone { font-size: 14px; margin-left: 10px; }

/* 5. Skip link and visible keyboard focus. */
.skip-link {
  position: absolute; left: 12px; top: -60px; z-index: 1000;
  background: var(--dark, #2a2d2c); color: #fff; font-weight: 700; font-size: 15px;
  padding: 12px 18px; border-radius: 8px; text-decoration: none;
}
.skip-link:focus { top: 12px; }
html body a:focus-visible,
html body button:focus-visible,
html body input:focus-visible,
html body select:focus-visible,
html body textarea:focus-visible,
html body summary:focus-visible,
html body [tabindex]:focus-visible {
  outline: 2px solid var(--lime-dark) !important;
  outline-offset: 2px !important;
}
html body input:focus-visible,
html body select:focus-visible,
html body textarea:focus-visible { outline-offset: 0 !important; }

/* 8. Itinerary accordion buttons asked for a font the site never loads. */
html body .accordion-btn { font-family: inherit; }

/* 7. Tap targets of at least 44px on phones. */
@media (max-width: 767px) {
  html body footer a:not(.skip-link) { display: inline-flex; align-items: center; min-height: 44px; }
  html body footer li { margin-bottom: 0 !important; }
  html body [aria-label="Search trips"],
  html body button[aria-label*="earch"],
  html body button[aria-label*="lose"],
  html body button[aria-label*="enu"] { min-width: 44px; min-height: 44px; }
  html body main a[href^="tel:"],
  html body main a[href^="mailto:"] { display: inline-flex; align-items: center; min-height: 44px; }
}

/* 17. Template tells: lime glow rings, mouse-following spotlight,
   endlessly nudging arrow and zoom-on-hover images. */
html body .nav-cta,
html body .btn-lime.nav-cta:hover { box-shadow: 0 1px 3px rgba(42,45,44,0.12); border-color: rgba(255,255,255,0.12); }
html body .nav-cta::before { display: none; }
html body .nav-cta:hover svg { animation: none; }
html body .trip-card:hover .trip-img,
html body .trip-card:hover img.trip-img,
html body .feat-card:hover .feat-img img { transform: none; }
html body .trip-card:hover { box-shadow: 0 6px 18px rgba(42,45,44,0.10); }

/* 9. Motion: the logo strip pauses on hover or focus, and everything
   decorative stops for visitors who ask their device to reduce motion. */
html body .marquee-track:hover,
html body .marquee-track:focus-within { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) {
  /* Stop movement, keep colour feedback: hover and focus still change
     colour, they just no longer slide, lift or loop. */
  html { scroll-behavior: auto !important; }
  html body *, html body *::before, html body *::after {
    animation-duration: 0.01ms !important; animation-iteration-count: 1 !important;
    transition-property: color, background-color, border-color, opacity, box-shadow !important;
  }
  html body *:hover { transform: none !important; }
  html body .marquee-track { animation: none !important; transform: none !important; flex-wrap: wrap; justify-content: center; }
  html body .reveal { opacity: 1 !important; transform: none !important; }
}

/* 16. Listing pages on phones: compact cards, image beside the text. */
@media (max-width: 639px) {
  html body #trips-grid { gap: 12px !important; }
  html body #trips-grid .trip-card { display: grid !important; grid-template-columns: 116px minmax(0, 1fr); align-items: stretch; }
  html body #trips-grid .trip-card[hidden] { display: none !important; }
  html body #trips-grid .trip-card > div:first-child { height: 100%; }
  html body #trips-grid .trip-card .trip-img { height: 100% !important; min-height: 116px; }
  html body #trips-grid .trip-card > div:last-child { padding: 12px 14px !important; }
  html body #trips-grid .trip-card > div:first-child > span { top: 6px !important; right: 6px !important; padding: 2px 6px !important; }
  .trips-more { display: block; width: 100%; margin: 20px 0 0; padding: 14px 18px; min-height: 48px; border-radius: 8px;
    border: 1px solid var(--border); background: #fff; font: inherit; font-size: 15px; font-weight: 700; color: var(--text-dark); cursor: pointer; }
}
@media (min-width: 640px) { .trips-more { display: none !important; } }

/* 12. Replacements for the numbered cards and icon tiles. */
.ac-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px; margin-top: 36px; }
.ac-stat { border-top: 2px solid var(--lime); padding-top: 18px; }
.ac-stat b { display: block; font-family: 'Sora', sans-serif; font-size: 40px; font-weight: 800; line-height: 1; color: var(--text-dark); letter-spacing: -0.02em; }
.ac-stat span { display: block; margin-top: 10px; font-size: 15px; line-height: 1.55; color: var(--text-muted); }
.ac-steps { display: grid; grid-template-columns: repeat(var(--steps, 4), minmax(0, 1fr)); gap: 32px; margin: 36px 0 0; padding: 0; list-style: none; counter-reset: step; }
.ac-steps li { border-top: 2px solid var(--lime); padding-top: 18px; counter-increment: step; }
.ac-steps li::before { content: "Step " counter(step); display: block; font-size: 13px; font-weight: 700; color: var(--lime-dark); margin-bottom: 8px; }
.ac-steps h3, .ac-points h3 { font-size: 18px; font-weight: 700; color: var(--text-dark); margin: 0 0 8px; letter-spacing: -0.01em; }
.ac-steps p, .ac-points p { font-size: 15px; line-height: 1.65; color: var(--text-muted); margin: 0; }
.ac-points { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 56px; margin-top: 28px; }
.ac-points > div { border-top: 1px solid var(--border); padding: 22px 0 24px; }
@media (max-width: 860px) {
  .ac-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 20px; }
  .ac-stat b { font-size: 34px; }
  .ac-steps { grid-template-columns: 1fr; gap: 24px; }
  .ac-points { grid-template-columns: 1fr; }
}