/*
 * SOL Trails — cinematic editorial flow v6
 *
 * Design direction:
 *   The SOL watermark/texture is the permanent canvas behind the entire site.
 *   Sections are normal-flow editorial chapters that pass over that canvas.
 *   They do NOT pin to the viewport and do NOT stack over one another.
 *
 * This matches the Replit reference more closely:
 *   - one continuous SOL background
 *   - clean chapter boundaries
 *   - no previous-section content showing through
 *   - no sticky/card-stack effect
 *   - natural scrolling with the existing reveal animations preserved
 */

html {
  scroll-behavior: smooth;
}

body {
  background: #66705d;
}

.site-shell {
  position: relative;
  isolation: isolate;
  overflow-x: clip;
  overflow-y: visible;
  /* The compiled app already supplies --texture-image. Keep it fixed for the
     entire page so the SOL mark behaves as a permanent visual canvas. */
  background-color: #66705d !important;
  background-image:
    linear-gradient(180deg, rgba(11, 23, 14, .12), rgba(11, 23, 14, .34)),
    var(--texture-image) !important;
  background-position: center top;
  background-size: cover;
  background-attachment: fixed;
}

/* ---------- The important change: normal editorial flow ---------- */
.hero,
.manifesto,
.destinations,
.ritual,
.feature,
.routes,
.journal,
.enquiry {
  position: relative !important;
  top: auto !important;
  z-index: auto !important;
  box-sizing: border-box;
  width: 100%;
  min-height: 100svh;
  isolation: isolate;
  scroll-margin-top: 0;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

/* The hero keeps the strong photographic opening from Replit. */
.hero {
  min-height: max(760px, 100svh);
}

/*
 * Semi-opaque chapter washes allow the permanent SOL canvas to remain subtly
 * visible, while the active chapter remains visually clean. Because chapters
 * are no longer sticky, there is no underlying section content to interfere
 * with the active chapter.
 */
.manifesto {
  background: rgba(22, 38, 25, .90) !important;
  box-shadow: none !important;
}

.destinations {
  background: rgba(14, 27, 17, .91) !important;
  box-shadow: none !important;
}

.ritual {
  background: rgba(45, 59, 39, .82) !important;
  box-shadow: none !important;
}

.feature {
  background: rgba(11, 23, 14, .86) !important;
  box-shadow: none !important;
}

.routes {
  background: rgba(22, 38, 25, .90) !important;
  box-shadow: none !important;
}

.journal {
  background: rgba(14, 27, 17, .91) !important;
  box-shadow: none !important;
}

.enquiry {
  background: rgba(45, 59, 39, .84) !important;
  box-shadow: none !important;
}

/* A restrained boundary between chapters; no card/shadow effect. */
.manifesto::after,
.destinations::after,
.ritual::after,
.feature::after,
.routes::after,
.journal::after {
  content: "";
  position: absolute;
  left: 5%;
  right: 5%;
  bottom: 0;
  height: 1px;
  background: rgba(232, 226, 202, .16);
  pointer-events: none;
}

/* ---------- Desktop editorial spacing ---------- */
@media (min-width: 801px) {
  .manifesto {
    padding-top: clamp(105px, 13vh, 150px);
    padding-bottom: clamp(105px, 13vh, 145px);
  }

  .destinations {
    padding-top: clamp(80px, 10vh, 110px);
    padding-bottom: clamp(80px, 10vh, 110px);
  }

  .destinations .section-head {
    margin-bottom: clamp(34px, 4.5vh, 52px);
  }

  .destination-card {
    min-height: clamp(350px, 49vh, 470px);
  }

  .destination-card:nth-child(2),
  .destination-card:nth-child(3) {
    min-height: clamp(285px, 38vh, 390px);
    margin-top: clamp(28px, 5vh, 52px);
  }

  .ritual {
    padding-top: clamp(105px, 13vh, 140px);
    padding-bottom: clamp(100px, 12vh, 130px);
  }

  .ritual-intro {
    margin-bottom: clamp(44px, 6vh, 64px);
  }

  .feature {
    min-height: 100svh;
    padding-top: clamp(90px, 11vh, 120px);
    padding-bottom: clamp(85px, 10vh, 110px);
  }

  .feature-note {
    margin-top: clamp(50px, 7vh, 75px);
  }

  .routes {
    padding-top: clamp(82px, 10vh, 108px);
    padding-bottom: clamp(78px, 9vh, 100px);
  }

  .routes-head {
    margin-bottom: clamp(30px, 4vh, 44px);
  }

  .route-item {
    padding-top: clamp(20px, 2.8vh, 28px);
    padding-bottom: clamp(20px, 2.8vh, 28px);
  }

  .route-name {
    font-size: clamp(28px, 2.25vw, 34px);
  }

  .route-detail {
    padding-top: 18px !important;
  }

  .journal {
    padding-top: clamp(85px, 10vh, 110px);
    padding-bottom: clamp(80px, 9vh, 100px);
  }

  .journal-image {
    height: clamp(390px, 58vh, 520px);
  }

  .enquiry {
    padding-top: clamp(95px, 11vh, 120px);
    padding-bottom: clamp(90px, 10vh, 110px);
  }
}

/* ---------- Short desktop/laptop viewport ---------- */
@media (min-width: 801px) and (max-height: 850px) {
  .hero {
    min-height: 100svh;
  }

  .hero-content {
    padding-bottom: 42px;
  }

  .hero h1 {
    margin-bottom: 28px;
  }

  .hero-footer {
    margin-top: 60px;
  }

  .manifesto h2,
  .section-head h2,
  .ritual h2,
  .routes h2,
  .journal h2 {
    font-size: clamp(52px, 6.6vw, 92px);
  }

  .manifesto-copy p {
    margin-bottom: 20px;
  }

  .destination-info h3 {
    font-size: clamp(30px, 3vw, 40px);
  }

  .destination-info {
    inset: auto 20px 20px;
  }

  .ritual-point p {
    margin-top: 12px;
  }

  .feature h2 {
    font-size: clamp(52px, 7vw, 100px);
    margin-top: 15px;
    margin-bottom: 22px;
  }

  .feature p {
    margin-bottom: 24px;
  }

  .route-name {
    font-size: clamp(27px, 2.1vw, 32px);
  }
}

/* ---------- Mobile: natural flow, same permanent SOL canvas ---------- */
@media (max-width: 800px) {
  .site-shell {
    background-attachment: scroll;
    background-size: auto 100%;
    background-position: center top;
  }

  .hero,
  .manifesto,
  .destinations,
  .ritual,
  .feature,
  .routes,
  .journal,
  .enquiry {
    position: relative !important;
    top: auto !important;
    z-index: auto !important;
    min-height: 0;
  }

  .manifesto,
  .destinations,
  .ritual,
  .feature,
  .routes,
  .journal,
  .enquiry {
    background-attachment: scroll;
  }
}


/* ---------- v9 refinements ---------- */
/* Keep the persistent SOL canvas as the only SOL watermark. */
.manifesto .sol-watermark {
  display: none !important;
}

/* Keep the header/logo completely clear of the hero typography.
   The header remains fixed in its original visual position; the hero copy
   starts below the 92px header zone rather than underneath the logo. */
@media (min-width: 801px) {
  .hero-copy {
    transform: translateY(112px);
  }
}

@media (max-width: 800px) {
  .hero-copy {
    transform: translateY(38px);
  }
}

/* v14: lock hero geometry so editable copy cannot reflow the hero.
   The eyebrow is removed from normal flow, so changing its text/length no
   longer pushes the headline, intro or CTAs around. The header/logo and the
   hero typography keep the v10 separation. */
.hero-copy {
  position: relative !important;
  padding-top: 34px !important;
}
.hero-copy .eyebrow {
  position: absolute !important;
  left: 0 !important;
  top: 0 !important;
  margin: 0 !important;
  white-space: nowrap !important;
  max-width: min(90vw, 760px) !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

@media (min-width: 801px) {
  .hero-copy.reveal .eyebrow,
  .hero-copy.reveal.is-visible .eyebrow { top: 0 !important; }
  .hero-copy.reveal h1,
  .hero-copy.reveal.is-visible h1,
  .hero-copy.reveal .hero-intro,
  .hero-copy.reveal.is-visible .hero-intro,
  .hero-copy.reveal .hero-actions,
  .hero-copy.reveal.is-visible .hero-actions {
    position: relative !important;
    top: 105px !important;
  }
  .hero-copy.reveal .hero-footer,
  .hero-copy.reveal.is-visible .hero-footer { margin-top: 0 !important; }
}

@media (max-width: 800px) {
  .hero-copy { padding-top: 28px !important; }
  .hero-copy .eyebrow { max-width: 100% !important; }
  .hero-copy.reveal .eyebrow,
  .hero-copy.reveal.is-visible .eyebrow { top: 0 !important; }
  .hero-copy.reveal h1,
  .hero-copy.reveal.is-visible h1,
  .hero-copy.reveal .hero-intro,
  .hero-copy.reveal.is-visible .hero-intro,
  .hero-copy.reveal .hero-actions,
  .hero-copy.reveal.is-visible .hero-actions {
    position: relative !important;
    top: 45px !important;
  }
  .hero-copy.reveal .hero-footer,
  .hero-copy.reveal.is-visible .hero-footer { margin-top: 35px !important; }
}


/* v16 — surgical Hero eyebrow placement.
 * The eyebrow is deliberately independent of the logo/header and of the
 * headline geometry. Keep its position fixed within the hero copy so editing
 * the eyebrow text cannot move the title, intro, buttons or footer.
 */
@media (min-width: 801px) {
  .hero-copy.reveal .eyebrow,
  .hero-copy.reveal.is-visible .eyebrow {
    top: 48px !important;
    margin-bottom: 25px !important;
  }
}

@media (max-width: 800px) {
  .hero-copy.reveal .eyebrow,
  .hero-copy.reveal.is-visible .eyebrow {
    top: 24px !important;
    margin-bottom: 20px !important;
  }
}

/* ================================================================
 * SOL Trails v18 — final editorial alignment pass
 *
 * Goal: align the Hero typography with the header grid and give the
 * manifesto/second chapter a more deliberate editorial column. This is
 * intentionally layout-only; content, imagery, testimonials, routes,
 * enquiry and the permanent SOL canvas are untouched.
 * ================================================================ */

@media (min-width: 801px) {
  /* Establish one explicit desktop grid for the Hero. The logo/header and
     Hero copy now share the exact same left edge. */
  .hero > .hero-content,
  .hero .container.hero-content {
    width: min(1280px, calc(100% - 96px)) !important;
    max-width: 1280px !important;
    margin-inline: auto !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  .hero-copy {
    width: min(760px, 100%) !important;
    max-width: 760px !important;
    margin-left: 0 !important;
  }

  .hero-copy .eyebrow {
    left: 0 !important;
  }

  .hero-copy h1,
  .hero-copy .hero-intro,
  .hero-copy .hero-actions {
    margin-left: 0 !important;
  }

  /* Keep the headline readable and visually anchored to the same editorial
     column rather than allowing it to dominate the extreme left edge. */
  .hero h1 {
    max-width: 720px !important;
  }

  /* ---------- Second section / Point of View ---------- */
  .manifesto > .container.manifesto-grid {
    width: min(1280px, calc(100% - 96px)) !important;
    max-width: 1280px !important;
    margin-inline: auto !important;
    grid-template-columns: minmax(0, .68fr) minmax(0, 1.32fr) !important;
    gap: 9% !important;
  }

  .manifesto-copy {
    width: min(500px, 100%) !important;
    max-width: 500px !important;
    padding-top: 0 !important;
  }

  .manifesto-copy h2 {
    max-width: 500px !important;
    margin-top: 0 !important;
  }

  .manifesto-copy p {
    max-width: 470px !important;
  }

  .manifesto-grid > .eyebrow {
    align-self: start !important;
    padding-top: 6px !important;
  }
}

@media (max-width: 800px) {
  /* Preserve the existing mobile flow; simply ensure both chapters use the
     same horizontal grid as the rest of the site. */
  .hero > .hero-content,
  .hero .container.hero-content,
  .manifesto > .container.manifesto-grid {
    width: min(calc(100% - 38px), 600px) !important;
    max-width: 600px !important;
    margin-inline: auto !important;
  }

  .hero-copy {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
  }

  .manifesto-copy {
    width: 100% !important;
    max-width: 100% !important;
  }
}

/* ================================================================
 * SOL Trails v18 — responsive Hero eyebrow
 * Mobile/tablet: keep the eyebrow below the header, allow it to wrap,
 * and prevent it from colliding with the logo or headline.
 * Desktop remains unchanged from v17.
 * ================================================================ */
@media (max-width: 800px) {
  .hero-copy {
    transform: translateY(38px) !important;
    padding-top: 28px !important;
  }

  .hero-copy .eyebrow,
  .hero-copy.reveal .eyebrow,
  .hero-copy.reveal.is-visible .eyebrow {
    top: 82px !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
    line-height: 1.45 !important;
    margin: 0 !important;
    padding-right: 8px !important;
    box-sizing: border-box !important;
  }

  .hero-copy.reveal h1,
  .hero-copy.reveal.is-visible h1,
  .hero-copy.reveal .hero-intro,
  .hero-copy.reveal.is-visible .hero-intro,
  .hero-copy.reveal .hero-actions,
  .hero-copy.reveal.is-visible .hero-actions {
    top: 52px !important;
  }
}

@media (min-width: 801px) and (max-width: 1100px) {
  .hero-copy .eyebrow {
    white-space: normal !important;
    max-width: 70vw !important;
    line-height: 1.45 !important;
  }
}

/* ================================================================
 * SOL Trails v19 — mobile Hero flow correction
 * Phone-only correction. Tablet/desktop geometry from v18 remains unchanged.
 * The eyebrow, headline, intro, actions and footer return to normal flow on
 * narrow screens so the CTA cannot overlap the coordinates/footer.
 * ================================================================ */
@media (max-width: 600px) {
  .hero-copy {
    transform: translateY(38px) !important;
    padding-top: 96px !important;
  }

  .hero-copy .eyebrow,
  .hero-copy.reveal .eyebrow,
  .hero-copy.reveal.is-visible .eyebrow {
    /* Keep the eyebrow visually below the mobile header/logo. It is
       intentionally out of normal flow so changing its text cannot push
       the headline/CTA into the hero footer. */
    top: 108px !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
    line-height: 1.45 !important;
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
  }

  .hero-copy.reveal h1,
  .hero-copy.reveal.is-visible h1,
  .hero-copy.reveal .hero-intro,
  .hero-copy.reveal.is-visible .hero-intro,
  .hero-copy.reveal .hero-actions,
  .hero-copy.reveal.is-visible .hero-actions {
    position: relative !important;
    top: 0 !important;
  }

  .hero-copy h1 {
    margin-top: 0 !important;
  }

  .hero-copy .hero-intro {
    margin-top: 26px !important;
  }

  .hero-copy .hero-actions {
    margin-top: 34px !important;
  }

  .hero-copy .hero-footer,
  .hero-copy.reveal .hero-footer,
  .hero-copy.reveal.is-visible .hero-footer {
    position: relative !important;
    top: 0 !important;
    margin-top: 48px !important;
    padding-top: 18px !important;
    display: flex !important;
    align-items: flex-end !important;
    gap: 18px !important;
  }

  .hero-copy .hero-actions .btn-primary {
    min-height: 112px !important;
  }
}


/* ================================================================
 * SOL Trails v21 — mobile Hero eyebrow balanced placement
 * Surgical adjustment only: place the editable eyebrow between the
 * mobile header/logo and the Hero headline. The headline, intro, CTA
 * and footer geometry remain unchanged from V20.
 * ================================================================ */
@media (max-width: 600px) {
  .hero-copy {
    position: relative !important;
  }

  .hero-copy .eyebrow,
  .hero-copy.reveal .eyebrow,
  .hero-copy.reveal.is-visible .eyebrow {
    position: absolute !important;
    top: 28px !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    white-space: normal !important;
    overflow: visible !important;
    overflow-wrap: anywhere !important;
    line-height: 1.45 !important;
    z-index: 2 !important;
  }
}

/* ================================================================
 * SOL Trails v22 — enquiry heading mobile wrap correction
 * Surgical typography-only fix. Keeps the enquiry layout, form and all
 * previous hero/section geometry unchanged. The heading is slightly
 * reduced on narrow phones and uses balanced wrapping so the final word
 * does not become an isolated line.
 * ================================================================ */
@media (max-width: 600px) {
  .enquiry h2 {
    font-size: clamp(54px, 15.2vw, 72px) !important;
    line-height: .82 !important;
    letter-spacing: -.052em !important;
    max-width: 100% !important;
    text-wrap: balance !important;
    overflow-wrap: normal !important;
    word-break: normal !important;
  }
}

/* ================================================================
 * SOL Trails V23 — universal content wrapping
 * Apply predictable, responsive wrapping to editable textual content
 * throughout the site, not only the enquiry heading. This is a wrapping
 * safeguard only; it does not change positioning, spacing or typography.
 * ================================================================ */
.hero h1,
.hero-intro,
.manifesto-copy h2,
.manifesto-copy p,
.section-head h2,
.section-head p,
.ritual h2,
.ritual-intro,
.ritual-point h3,
.ritual-point p,
.feature h2,
.feature p,
.routes h2,
.routes-copy,
.route-name,
.route-meta,
.route-detail,
.journal h2,
.journal p,
.enquiry h2,
.enquiry-copy,
.enquiry-aside,
.destination-info h3,
.destination-info p,
.testimonial-quote,
.testimonial-name,
.testimonial-meta,
.footer-small {
  white-space: normal !important;
  overflow-wrap: break-word !important;
  word-break: normal !important;
}

/* Editorial headings should wrap at sensible word boundaries rather than
   producing isolated words when editable copy is changed. */
.hero h1,
.manifesto-copy h2,
.section-head h2,
.ritual h2,
.feature h2,
.routes h2,
.journal h2,
.enquiry h2 {
  text-wrap: balance;
}

/* Keep navigation/CTA labels compact and intentionally single-line. */
.nav-links a,
.nav-cta,
.btn,
.hero-footer,
.route-arrow,
.submit-row {
  white-space: nowrap !important;
}

/* ================================================================
 * SOL Trails V24 — editorial heading punctuation protection
 * V23's universal break-word rule is useful for body copy, but it can allow
 * a punctuation mark to be pushed onto a line by itself when a heading is
 * close to its column width. Keep editorial headings at normal word
 * boundaries so words such as "mind!" remain intact.
 * ================================================================ */
.hero h1,
.manifesto-copy h2,
.section-head h2,
.ritual h2,
.feature h2,
.routes h2,
.journal h2,
.enquiry h2,
.sol-testimonials-head h2 {
  overflow-wrap: normal !important;
  word-break: normal !important;
  hyphens: none !important;
}

/* Protect the final punctuation in the enquiry heading specifically. */
.enquiry h2 em {
  overflow-wrap: normal !important;
  word-break: normal !important;
  hyphens: none !important;
}

/* V24: balanced editorial heading wrapping. Keep short emphasized phrases together where possible. */
.sol-trails-root h1,
.sol-trails-root h2,
.sol-trails-root h3,
.sol-trails-root .serif {
  text-wrap: balance;
  overflow-wrap: normal !important;
  word-break: normal !important;
  hyphens: none !important;
}

@media (max-width: 767px) {
  .sol-trails-root .enquiry h2 em {
    display: inline-block;
    white-space: nowrap;
  }
}

/* ================================================================
 * SOL Trails v25 — desktop Hero surgical alignment
 *
 * V24 correctly fixed the enquiry heading, but its accumulated desktop
 * overrides left the Hero eyebrow too close to the logo and pushed the
 * Hero footer/coordinates below the visible desktop fold. Mobile/tablet
 * phone behaviour is deliberately left untouched because V21 is correct.
 * ================================================================ */
@media (min-width: 801px) {
  /* Put the eyebrow in the clear band between the header and headline. */
  .hero-copy .eyebrow,
  .hero-copy.reveal .eyebrow,
  .hero-copy.reveal.is-visible .eyebrow {
    top: 78px !important;
  }

  /* Bring the coordinates/footer into the desktop Hero viewport without
     moving the headline, intro or CTA. */
  .hero-copy .hero-footer,
  .hero-copy.reveal .hero-footer,
  .hero-copy.reveal.is-visible .hero-footer {
    margin-top: 24px !important;
    position: relative !important;
    top: -10px !important;
  }
}

/* ================================================================
 * SOL Trails V26 — desktop Hero coordinates visibility
 *
 * V25 fixed the desktop Hero eyebrow. The remaining desktop issue is the
 * latitude/longitude footer sitting too low in shorter desktop viewports.
 * Move ONLY the Hero footer upward into the clear lower band of the Hero.
 * Mobile/tablet geometry is intentionally untouched.
 * ================================================================ */
@media (min-width: 801px) {
  .hero .hero-footer,
  .hero .hero-content .hero-footer {
    position: relative !important;
    z-index: 5 !important;
    margin-top: 32px !important;
    top: auto !important;
    transform: none !important;
  }
}

/* ================================================================
 * SOL Trails V28 — final desktop Hero footer order correction
 * V27 made the coordinates visible but visually pulled the Hero footer
 * upward past the CTA because it used a negative top offset. Restore the
 * intended editorial order: CTA first, then the divider + latitude/longitude
 * and Scroll to Wander. The footer is given a controlled gap and remains
 * inside the Hero viewport. Mobile/tablet geometry is untouched.
 * ================================================================ */
@media (min-width: 801px) {
  .hero .hero-footer,
  .hero .hero-content .hero-footer,
  .hero-copy .hero-footer,
  .hero-copy.reveal .hero-footer,
  .hero-copy.reveal.is-visible .hero-footer {
    position: relative !important;
    z-index: 20 !important;
    top: 0 !important;
    transform: none !important;
    margin-top: 64px !important;
  }
}