/* =====================================================================
   Off Trail Adventures — Global styles (design tokens + motion system)
   CANONICAL SOURCE. Preview loads this directly (index.html).
   To deploy: paste this file's contents into header-injection.html's
   <style> block (see global/header-injection.html).
   ===================================================================== */

/* ---- Design tokens -------------------------------------------------- */
:root {
  /* Brand palette (placeholder — tune to the brand) */
  --ota-color-bg: #f7f5f1;
  --ota-color-surface: #ffffff;
  --ota-color-ink: #1c1b19;
  --ota-color-muted: #6b665e;
  --ota-color-accent: #7a5c3e;
  --ota-color-accent-light: #d8c3a8;
  --ota-color-line: rgba(28, 27, 25, 0.12);

  /* Type */
  --ota-font-sans: "Helvetica Neue", Arial, sans-serif;
  --ota-font-display: Georgia, "Times New Roman", serif;

  /* Spacing scale */
  --ota-space-1: 0.5rem;
  --ota-space-2: 1rem;
  --ota-space-3: 1.5rem;
  --ota-space-4: 2.5rem;
  --ota-space-5: 4rem;
  --ota-space-6: 6rem;

  /* Motion */
  --ota-reveal-distance: 24px;
  /* Squarespace compiles Custom CSS with LESS, which rejects math on var(), so the negative is spelled out. */
  --ota-reveal-distance-back: -24px;
  --ota-reveal-duration: 0.9s;
  --ota-reveal-ease: cubic-bezier(0.16, 1, 0.3, 1);
  --ota-stagger-step: 90ms;

  /* Matches .ota-header height. Destinations uses this so cards clear the fixed nav. */
  --ota-header-h: 74px;
}

/* ---- Scroll-reveal system ------------------------------------------
   CSS-first: elements start hidden and transition in once the global JS
   adds `.is-visible` (via IntersectionObserver). No JS = graceful
   fallback because of the reduced-motion / no-js rules below.
   -------------------------------------------------------------------- */

/* Only hide reveal elements when JS is active AND motion is allowed.
   The `.ota-motion` class is added to <html> by ota-global.js. */
.ota-motion [data-ota-reveal] {
  opacity: 0;
  transition:
    opacity var(--ota-reveal-duration) var(--ota-reveal-ease),
    transform var(--ota-reveal-duration) var(--ota-reveal-ease);
  will-change: opacity, transform;
}

.ota-motion [data-ota-reveal="up"] {
  transform: translateY(var(--ota-reveal-distance));
}

.ota-motion [data-ota-reveal="left"] {
  transform: translateX(var(--ota-reveal-distance-back));
}

.ota-motion [data-ota-reveal="right"] {
  transform: translateX(var(--ota-reveal-distance));
}

.ota-motion [data-ota-reveal="scale"] {
  transform: scale(0.96);
}

.ota-motion [data-ota-reveal="fade"] {
  transform: none;
}

/* Revealed state */
.ota-motion [data-ota-reveal].is-visible {
  opacity: 1;
  transform: none;
}

/* Stagger: children of a [data-ota-stagger] container reveal in sequence.
   The JS sets --ota-stagger-delay on each one; the math lives in that inline style because LESS rejects it here. */
.ota-motion [data-ota-stagger] [data-ota-reveal] {
  transition-delay: var(--ota-stagger-delay, 0s);
}

.ota-motion .ota-tripd[data-ota-layout="editorial"] [data-ota-reveal],
.ota-motion .ota-tripd[data-ota-layout="editorial"] [data-ota-reveal].is-visible {
  opacity: 1;
  transform: none;
  transition: none;
  will-change: auto;
}

/* Compiled page wrapper: one Code Block per Squarespace page. */
.ota-page {
  display: block;
  width: 100%;
  margin: 0;
  padding: 0;
}

.ota-page[data-ota-page="destinations"] {
  padding-top: var(--ota-header-h, 74px);
}

/* Squarespace colors bare headings (h2 { color: var(--headingLargeColor) }) and leaves box-sizing at content-box.
   OTA pages expect headings to take their band's color and border-box sizing, as the local preview gives them. */
.ota-page :where(h1, h2, h3, h4, h5, h6) {
  color: inherit;
}

.ota-page,
.ota-page :where(*, *::before, *::after) {
  box-sizing: border-box;
}

/* Collapse Squarespace Code Block padding around our widgets. */
.sqs-block-code:has(.ota-page),
.sqs-block-code:has(.ota-footer),
.sqs-block:has(.ota-page),
.sqs-block:has(.ota-footer) {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

/*
  Squarespace chrome we do not own. Keep !important here only.
  The custom header is fixed, so the first image should start at y = 0.
  The native footer pocket and empty page sections are hidden on the live
  site; a section that contains .ota-footer stays visible and is collapsed
  so Squarespace's default section height cannot leave a white band.
*/
html.ota-has-custom-header {
  --header-height: 0px !important;
  --headerHeight: 0px !important;
  --sqs-site-header-height: 0px !important;
  --website-header-height: 0px !important;
}

body:not(.sqs-edit-mode) #header:not(.ota-header),
body:not(.sqs-edit-mode) .header-announcement-bar-wrapper:not(:has(.ota-header)) {
  display: none !important;
  height: 0 !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  pointer-events: none !important;
}

body:not(.sqs-edit-mode) #footer-sections:not(:has(.ota-footer)),
body:not(.sqs-edit-mode) #footer:not(.ota-footer):not(:has(.ota-footer)) {
  display: none !important;
  height: 0 !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
}

body:not(.sqs-edit-mode) #page,
body:not(.sqs-edit-mode) #page-sections,
body:not(.sqs-edit-mode) #sections,
body:not(.sqs-edit-mode) #siteWrapper {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

body:not(.sqs-edit-mode) #sections > .page-section:first-child,
body:not(.sqs-edit-mode) #page-sections > .page-section:first-child {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

body:not(.sqs-edit-mode) .page-section:has(.ota-page),
body:not(.sqs-edit-mode) .page-section:has(.ota-hero),
body:not(.sqs-edit-mode) .page-section:has(.ota-about),
body:not(.sqs-edit-mode) .page-section:has(.ota-tripd),
body:not(.sqs-edit-mode) .page-section:has(.ota-footer),
body:not(.sqs-edit-mode) .page-section:has(.ota-page) .content-wrapper,
body:not(.sqs-edit-mode) .page-section:has(.ota-hero) .content-wrapper,
body:not(.sqs-edit-mode) .page-section:has(.ota-about) .content-wrapper,
body:not(.sqs-edit-mode) .page-section:has(.ota-tripd) .content-wrapper,
body:not(.sqs-edit-mode) .page-section:has(.ota-footer) .content-wrapper,
body:not(.sqs-edit-mode) .page-section:has(.ota-page) .fluid-engine,
body:not(.sqs-edit-mode) .page-section:has(.ota-hero) .fluid-engine,
body:not(.sqs-edit-mode) .page-section:has(.ota-about) .fluid-engine,
body:not(.sqs-edit-mode) .page-section:has(.ota-tripd) .fluid-engine,
body:not(.sqs-edit-mode) .page-section:has(.ota-footer) .fluid-engine {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  min-height: 0 !important;
  height: auto !important;
}

/* A Code Block lands as a small tile in Squarespace's Fluid Engine grid. Outside the editor, drop the grid and the
   side gutters so an OTA page takes the full width and its own height. */
body:not(.sqs-edit-mode) .page-section:has(.ota-page) .content-wrapper {
  padding-left: 0 !important;
  padding-right: 0 !important;
  max-width: none !important;
}

body:not(.sqs-edit-mode) .fluid-engine:has(.ota-page) {
  display: block !important;
}

body:not(.sqs-edit-mode) .fluid-engine:has(.ota-page) > .fe-block:has(.ota-page) {
  width: 100% !important;
}

body:not(.sqs-edit-mode) .page-section.ota-chrome-hidden {
  display: none !important;
  height: 0 !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
}

/*
  Confirmed on the live Squarespace site. Medium-height, middle-aligned
  sections add extra .content-wrapper padding that shows as an empty band.
*/
.page-section.vertical-alignment--middle:not(.content-collection):not(.gallery-section):not(.user-items-list-section):not(.editmode-changing-rowcount).section-height--medium > .content-wrapper {
  padding-bottom: 0px !important;
}

/* Respect user preference: never hide/animate if reduced motion. */
@media (prefers-reduced-motion: reduce) {
  .ota-motion [data-ota-reveal] {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}