/* ============================================================
   SNS Valley View — base resets and shared primitives.

   Global resets and the handful of classes used by more than one ported
   section: .btn (Header's Reserve, Hero's CTA, Booking's submit),
   .overline (Experience, Rooms, Booking) and .rule-short (Experience).
   Ported from design_handoff_sns_valley_view/styles.css lines 40-82,
   134-183. Splitting styles.css section-by-section left these without a
   single owning section — duplicating them per file risked the three
   .btn variants drifting apart, so they live here instead. See
   docs/DECISIONS.md.
   ============================================================ */

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

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--c-bg);
  color: var(--c-cream);
  font-family: var(--f-ui);
  font-weight: 300;
  text-wrap: pretty;
}

img { display: block; max-width: 100%; }

a {
  color: var(--c-gold);
  text-decoration: none;
  transition: color var(--dur) var(--ease);
}
a:hover { color: var(--c-cream); }

/* .site carries no width rule — the client directed the site to fill the
   viewport at any width; a hero photograph capped at 1280px on a wide
   monitor read as a framed picture rather than a view. --w-canvas
   (tokens.css) is kept as the design's authored reference width for
   image-sizing math elsewhere, but it no longer bounds layout. The class
   stays on the wrapper div (home.templ) as a structural hook. See
   docs/DECISIONS.md. */

/* Visible keyboard focus everywhere, in the one accent colour. Left at
   browser defaults, most platforms draw a blue focus ring — which breaks
   "One accent, no exceptions" — and booking.css previously suppressed
   the default outline on its inputs with no replacement at all (ported
   from the handoff, which has the same gap), measured as invisible
   keyboard focus. `.field__input` overrides outline-offset locally
   (booking.css) since the shared fields sit edge-to-edge with only a 2px
   gap — a positive offset here would visually collide with the next
   field. See docs/DECISIONS.md. */
a:focus-visible,
button:focus-visible,
input:focus-visible {
  outline: 2px solid var(--c-gold);
  outline-offset: 2px;
}

/* Small uppercase label used above every section heading */
.overline {
  display: block;
  font-size: 10px;
  font-weight: 400;
  letter-spacing: 0.4em;
  text-transform: uppercase;
  color: var(--c-gold);
}

.rule-short {
  width: 40px;
  height: 1px;
  background: rgba(200, 168, 124, 0.4);
  border: 0;
  margin: 32px 0 0;
}

/* ------------------------------------------------------------
   Buttons
   ------------------------------------------------------------ */
.btn {
  display: inline-block;
  font-family: var(--f-ui);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  border-radius: 0;
  cursor: pointer;
  transition: background-color var(--dur) var(--ease),
              color var(--dur) var(--ease),
              border-color var(--dur) var(--ease);
}

.btn--ghost {
  padding: 10px 28px;
  color: var(--c-gold);
  background: transparent;
  border: 1px solid rgba(200, 168, 124, 0.4);
}
.btn--ghost:hover {
  background: var(--c-gold);
  color: var(--c-bg);
  border-color: var(--c-gold);
}

.btn--hero {
  padding: 16px 44px;
  font-size: 10px;
  letter-spacing: 0.25em;
  color: var(--c-gold);
  background: transparent;
  border: 1px solid var(--c-gold-line);
}
.btn--hero:hover {
  background: var(--c-gold);
  color: var(--c-bg);
  border-color: var(--c-gold);
}

.btn--solid {
  padding: 16px 32px;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.15em;
  color: var(--c-bg);
  background: var(--c-gold);
  border: 1px solid var(--c-gold);
}
.btn--solid:hover { background: #D9BC93; }

/* ============================================================
   Responsive — shared breakpoints
   The handoff was composed at 1280px with untested mobile rules; this
   build's own responsive pass replaces those rules, but deliberately
   keeps the same two breakpoint EDGES (1024px, 680px) the handoff used
   for anything that changes column count (rooms grid, experience/gallery
   grid). Those two edges are baked into the `sizes` attribute phase 0d
   derived for the hero, gallery slide and room card images — changing
   them would silently make the browser fetch the wrong image width. See
   docs/DECISIONS.md.

   --pad-x narrows in two steps as the canvas narrows, same token
   everywhere it's used (header, rooms, booking, footer, experience copy).
   ============================================================ */
@media (max-width: 1024px) {
  :root { --pad-x: 32px; }
}
@media (max-width: 680px) {
  :root { --pad-x: 24px; }

  /* 44px is the tap-target floor at the mobile tier for every button
     variant (Reserve, the hero CTA, Check availability) — desktop's
     10-16px padding is fine for a mouse but not for a thumb. */
  .btn {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
}

/* Respect the OS reduced-motion setting globally. Each section's own
   stylesheet disables its own animations under this same media query;
   this is the one rule with no single owning section. */
@media (prefers-reduced-motion: reduce) {
  * { transition-duration: 0.01ms !important; }
}