/* ==========================================================================
   subpage.css — shared styles for the placeholder subpages
   (/stay/, /stay/hunter-one|two|three/, /eat-drink/, /guides/,
    /gift-vouchers/, /about/)

   These pages are structural placeholders: global header, the flat subpage
   hero, one empty light band, global footer. Everything else — header, footer,
   nav, hero shell, bands, buttons — comes from base.css + home.css. Every
   value here references tokens.css — no hex, ever.

   One file serves all eight pages so the hero stays identical across them and
   there is a single place to change it. When a page gets real content it can
   keep linking this file and add its own alongside, the way contact.css /
   reviews.css / relax.css sit on top of the shared chrome.
   ========================================================================== */

/* --- Active nav state ----------------------------------------------------
   Identical to the rule contact.css, reviews.css and relax.css carry. A
   persistent Copper hairline underline marks the current page (Copper as an
   accent/underline only — never a fill, never body text). The Stay dropdown
   links get the same treatment so the three cabin pages and the Stay overview
   can mark themselves inside the menu. */
.nav__link[aria-current="page"] {
  color: var(--color-text-on-dark);
  border-bottom-color: var(--color-accent);
}
.nav__dropdown a[aria-current="page"] { color: var(--color-accent); }
.mobile-menu__list a[aria-current="page"] { color: var(--color-accent); }
.footer-col a[aria-current="page"] { color: var(--color-text-on-dark); }

/* --- 1 · Hero (photo-free, flat) -----------------------------------------
   The same hero as /contact, /reviews/ and /relax/, not the homepage hero: it
   reuses the shared .hero shell but drops the photo, the gradient scrim, the
   eyebrow and the button, leaving the signature Forest band with the off-white
   heading and sub sitting straight on it. min-height:0 lets the content set
   the height, which is what gives all these pages the same compact
   proportions. Same declarations as .hero.contact-hero. */
.hero.subpage-hero {
  min-height: 0;
  background: var(--c-forest);
}
.hero.subpage-hero .hero__content {
  padding-block-end: var(--space-2xl);
}
.subpage-hero__sub {
  color: var(--color-text-on-dark-alt);
  max-width: 52ch;
  margin-block-start: var(--space-sm);
}

/* A single soft entrance, mirroring contact.css. Guarded so no-JS /
   reduced-motion users get the final state immediately. */
@media (prefers-reduced-motion: no-preference) {
  .subpage-hero .hero__content > * {
    opacity: 0;
    transform: translateY(var(--reveal-shift));
    animation: subpage-hero-rise var(--dur-reveal) var(--ease-out) forwards;
  }
  .subpage-hero .hero__content h1 { animation-delay: 60ms; }
  .subpage-hero__sub              { animation-delay: 180ms; }
}
@keyframes subpage-hero-rise {
  to { opacity: 1; transform: none; }
}

/* --- 2 · Empty placeholder band ------------------------------------------
   Deliberately empty: the light band the page content will be built into.
   .section supplies the standard vertical rhythm (80px mobile / 140px desktop)
   and .band--light the standard light section colour, so the block reads as a
   real section even with nothing in it. No extra rules needed — this comment
   is the marker. Delete the class when the section takes real content. */