/* ==========================================================================
   base.css — Hunter Huon Valley
   Reset, typography, layout primitives, utilities. No colours or sizes are
   hard-coded here; everything references tokens.css.
   ========================================================================== */

/* --- Reset --------------------------------------------------------------- */

*,
*::before,
*::after { box-sizing: border-box; }

* { margin: 0; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: var(--header-h);
}

body {
  font-family: var(--font-primary);
  font-size: var(--fs-body);
  font-weight: var(--fw-regular);
  line-height: var(--lh-body);
  color: var(--color-text);
  background-color: var(--color-page-bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  min-height: 100vh;
}

img,
picture,
video {
  display: block;
  max-width: 100%;
  height: auto;
}

button,
input,
select,
textarea { font: inherit; color: inherit; }

button { cursor: pointer; background: none; border: none; }

a { color: inherit; text-decoration: none; }

ul, ol { list-style: none; padding: 0; }

/* --- Typography ---------------------------------------------------------- */

/* Headings are Montserrat, sentence case, Medium 500 at every level.
   Bold 700 was tried first (to match the weight of the logo mark) and read too
   heavy against the fine, letter-spaced wordmark; at 500 the type turns airy and
   editorial, which is the look this site wants. Hierarchy is carried entirely by
   SIZE, not weight — the steps are wide (88 / 52 / 24px), so it reads clearly
   without a weight change, and H3 can never end up heavier than its own H2.
   Labels, nav, eyebrows and buttons keep SemiBold 600: they are small and
   uppercase, and need the extra weight to hold at 11-14px.
   All-caps is reserved for eyebrows/nav/buttons/labels only. */
h1, h2, h3 {
  font-family: var(--font-primary);
  font-weight: var(--fw-medium);
  color: var(--color-text);
  text-wrap: balance;
}

h1 {
  font-size: var(--fs-h1);
  line-height: var(--lh-h1);
  letter-spacing: var(--ls-h1);
}

h2 {
  font-size: var(--fs-h2);
  line-height: var(--lh-h2);
  letter-spacing: var(--ls-h2);
}

h3 {
  font-size: var(--fs-h3);
  line-height: var(--lh-h3);
}

p { max-width: var(--measure); }

strong { font-weight: var(--fw-semibold); }

/* We ship Montserrat roman only, so a UA italic on <em> renders as a faux
   oblique (a synthesised slant), which is exactly the fake-italic the type
   direction rules out. Emphasis carries on weight instead. Reverse: delete
   this rule and ship a Montserrat italic file. */
em { font-style: normal; font-weight: var(--fw-medium); }

/* --- Utilities ----------------------------------------------------------- */

.eyebrow {
  display: inline-block;
  font-size: var(--fs-eyebrow);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--color-text-secondary);
}

.small { font-size: var(--fs-small); line-height: var(--lh-small); }

.meta { color: var(--color-text-secondary); }

/* Layout primitives */

.container {
  width: 100%;
  max-width: var(--content-max);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.section {
  padding-block: var(--section-py-mobile);
}

@media (min-width: 900px) {
  .section { padding-block: var(--section-py); }
}

/* Section band treatments (Revision 4, dark-dominant). Forest is the page
   default, so `.band--olive` (the dominant band, its name kept for markup
   stability though it now paints Forest not Olive) and `.band--forest` inherit
   off-white text and need no override. Light linen bands flip the text,
   headings and eyebrows to Forest. Reused across the sibling pages. */
.band--olive {
  background-color: var(--color-page-bg);
  color: var(--color-text-on-dark);
}
.band--forest {
  background-color: var(--color-band-deep);
  color: var(--color-text-on-dark);
}
.band--light {
  background-color: var(--color-band-light);
  color: var(--color-text-on-light);
}
.band--light-alt {
  background-color: var(--color-band-light-alt);
  color: var(--color-text-on-light);
}
.band--light h1, .band--light h2, .band--light h3,
.band--light-alt h1, .band--light-alt h2, .band--light-alt h3 {
  color: var(--color-text-on-light);
}
.band--light .eyebrow,
.band--light-alt .eyebrow { color: var(--color-text-on-light-2); }

/* Legacy band aliases, kept pointing at the current roles so older markup and
   the sibling pages keep working. */
.band--base { background-color: var(--color-page-bg); color: var(--color-text-on-dark); }
.band--alt  { background-color: var(--color-band-light-alt); color: var(--color-text-on-light); }
.band--dark {
  background-color: var(--color-band-deep);
  color: var(--color-text-on-dark);
}
.band--dark h1,
.band--dark h2,
.band--dark h3 { color: var(--color-text-on-dark); }
.band--dark .eyebrow { color: var(--color-text-on-dark-alt); }

/* Centred, measure-capped text block */
.prose {
  max-width: var(--measure);
  margin-inline: auto;
}
.prose > * + * { margin-top: var(--space-md); }
.prose--center { text-align: center; }

/* Full-bleed helper — breaks an element out of a centred container */
.full-bleed {
  width: 100vw;
  margin-inline: calc(50% - 50vw);
}

/* Buttons ---------------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2xs);
  padding: var(--space-xs) var(--space-md);
  font-size: var(--fs-small);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  border-radius: var(--radius);
  transition: background-color var(--dur-fast) var(--ease),
              color var(--dur-fast) var(--ease),
              border-color var(--dur-fast) var(--ease);
}

/* Primary button.
   Revision 2: Copper on Olive is only 1.6:1, so the primary button is now an
   off-white fill with Forest text (11.4:1) — it sits on the dark Olive/Forest
   bands and over photography. On LIGHT bands, use `.btn--on-light` to flip to a
   Forest fill with off-white text.
   To bring copper buttons back, this is the one place: set background-color to
   var(--color-accent) and color to var(--color-accent-text). */
.btn--primary {
  background-color: var(--c-base);
  color: var(--c-forest);
}
/* Hover is a tonal shift to Sandstone, keeping Forest text (11:1). Copper is
   NOT used as a button fill: off-white on Copper is only ~3.9:1 and fails
   behind the 11px uppercase label. Copper stays on inline links/underlines. */
.btn--primary:hover,
.btn--primary:focus-visible {
  background-color: var(--c-sandstone);
  color: var(--c-forest);
}

/* Primary button variant for light sections */
.btn--on-light,
.band--light .btn--primary,
.band--light-alt .btn--primary {
  background-color: var(--c-forest);
  color: var(--c-base);
}
.btn--on-light:hover,
.btn--on-light:focus-visible,
.band--light .btn--primary:hover,
.band--light .btn--primary:focus-visible,
.band--light-alt .btn--primary:hover,
.band--light-alt .btn--primary:focus-visible {
  background-color: var(--c-earth);
  color: var(--c-base);
}

/* Ghost button.
   Revision 2: takes its colour from context via currentColor, so it is visible
   over the dark hero (off-white) and on light bands (Forest) alike, and always
   carries a 1px border. Copper appears only on hover. */
.btn--ghost {
  background-color: transparent;
  color: currentColor;
  border: var(--divider-w) solid currentColor;
}
.btn--ghost:hover,
.btn--ghost:focus-visible {
  color: var(--color-accent);
  border-color: var(--color-accent);
}

/* Text / ghost inline link with arrow */
.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2xs);
  font-size: var(--fs-small);
  font-weight: var(--fw-medium);
  letter-spacing: 0.02em;
  color: var(--color-text);
  border-bottom: var(--divider-w) solid transparent;
  padding-bottom: 2px;
  transition: color var(--dur-fast) var(--ease),
              border-color var(--dur-fast) var(--ease);
}
.band--dark .link-arrow { color: var(--color-text-on-dark); }
.band--light .link-arrow,
.band--light-alt .link-arrow { color: var(--color-text-on-light); }
.link-arrow:hover,
.link-arrow:focus-visible {
  color: var(--color-accent);
  border-bottom-color: var(--color-accent);
}

/* Inline text link */
.text-link {
  color: var(--color-text);
  border-bottom: var(--divider-w) solid var(--color-accent);
  transition: color var(--dur-fast) var(--ease);
}
.band--light .text-link,
.band--light-alt .text-link { color: var(--color-text-on-light); }
.text-link:hover,
.text-link:focus-visible { color: var(--color-accent); }

/* --- Accessibility ------------------------------------------------------- */

.skip-link {
  position: absolute;
  left: var(--space-sm);
  top: -100px;
  z-index: var(--z-header);
  padding: var(--space-2xs) var(--space-sm);
  background-color: var(--color-band-dark);
  color: var(--color-text-on-dark);
  border-radius: var(--radius);
  transition: top var(--dur-fast) var(--ease);
}
.skip-link:focus { top: var(--space-sm); }

:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 2px;
}

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* --- Scroll reveal ------------------------------------------------------
   Hiding is gated behind the `.js` flag (set on <html> before paint). With
   JavaScript disabled there is no `.js` class, so `.reveal` has no effect and
   all content is fully visible. */

.js .reveal {
  opacity: 0;
  transform: translateY(var(--reveal-shift));
  transition: opacity var(--dur-reveal) var(--ease-out),
              transform var(--dur-reveal) var(--ease-out);
  will-change: opacity, transform;
}
.js .reveal.is-visible {
  opacity: 1;
  transform: none;
}

/* --- Reduced motion ------------------------------------------------------
   No !important (site rule). These rules sit last in the cascade and match
   the same or higher specificity as the animated rules above, so they win. */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  .js .reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .btn,
  .link-arrow,
  .text-link,
  .skip-link,
  .site-header,
  .site-header__inner,
  .cabin-card__media img,
  .nav__dropdown,
  .mobile-menu { transition: none; }

  .cabin-card:hover .cabin-card__media img { transform: none; }
}