/* Balustyle — site layer over the Classical design system.
   Holds only what inline styles cannot express: breakpoints, the mobile
   navigation, motion preferences and the WhatsApp mark. Load after styles.css.

   Vertical rhythm and page gutters are driven by two custom properties so the
   page templates can keep their exact desktop values inline —
   `padding: calc(104px * var(--sp)) var(--pad) 0` — and still scale down. */

:root {
  --sp: 1;        /* vertical rhythm multiplier */
  --pad: 24px;    /* page gutter */

  /* Logo blue — a secondary accent, distinct from the Classical gold.
     Gold stays the "act" color (buttons, CTAs); blue marks "you are here /
     this is selected" (current nav item, active gallery filter, the stat
     figures under the new pool-and-staircase hero). */
  --color-blue: #30578c;
}
@media (max-width: 760px) { :root { --sp: 0.64; --pad: 18px } }
@media (max-width: 420px) { :root { --sp: 0.54; --pad: 16px } }

html { scroll-behavior: smooth; }
body { margin: 0; }
a { color: var(--color-accent-700); }
a:hover { color: var(--color-accent-600); }
img, svg { max-width: 100%; }

/* — skip link — */
.skip {
  position: absolute; left: -9999px; top: 0; z-index: 80;
  background: var(--color-bg); color: var(--color-text);
  padding: 12px 18px; border: 1px solid var(--color-accent);
  font-family: var(--font-heading); font-size: 13px;
  letter-spacing: 0.09em; text-transform: uppercase; text-decoration: none;
}
.skip:focus { left: 12px; top: 12px; }

/* ── navigation ─────────────────────────────────────────────────────────── */

.nav-bar {
  max-width: 1280px; margin: 0 auto; padding: 16px var(--pad);
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 18px 32px;
}
.nav-logo { display: block; text-decoration: none; flex: none; }
.nav-logo img { height: 36px; width: auto; }
.nav-toggle { display: none; }
.nav-menu {
  display: flex; align-items: center; flex-wrap: wrap; gap: 14px 28px;
  font-family: var(--font-heading); font-size: 13.5px;
  letter-spacing: 0.07em; text-transform: uppercase;
}
.nav-link {
  /* --nav-c/--nav-r come from the inline style set per-link (current-page
     state); reading them through a custom property — rather than the JS
     writing `color`/`border-bottom-color` directly — keeps the actual
     properties owned by this stylesheet, so :hover below can still win. */
  color: var(--nav-c, var(--color-text));
  text-decoration: none; padding-bottom: 4px;
  border-bottom: 1px solid var(--nav-r, transparent);
  transition: color 520ms cubic-bezier(0.32,0.72,0,1), border-color 520ms cubic-bezier(0.32,0.72,0,1);
}
.nav-link:hover { border-bottom-color: var(--color-accent); color: var(--color-accent-700); }

@media (max-width: 900px) {
  .nav-toggle {
    display: inline-flex; align-items: center; gap: 10px;
    background: none; border: 0; cursor: pointer;
    padding: 10px 0; min-height: 44px; color: var(--color-text);
    font-family: var(--font-heading); font-size: 13px;
    letter-spacing: 0.09em; text-transform: uppercase;
  }
  .nav-menu { display: none; width: 100%; flex-direction: column; align-items: stretch; gap: 0; }
  .nav-menu.is-open { display: flex; }
  /* border-top rather than border-bottom: border-bottom carries the
     current-page rule via --nav-r and shouldn't double up with a divider. */
  .nav-menu .nav-link {
    border-top: 1px solid var(--color-divider);
    padding: 16px 0 15px; min-height: 44px; display: flex; align-items: center;
  }
  .nav-menu .btn { margin-top: 16px; justify-content: center; min-height: 48px; }
}

/* ── horizontal chip strips (product anchors, gallery filters) ──────────── */

.chip-row { display: flex; flex-wrap: wrap; gap: 0; border-bottom: 1px solid var(--color-divider); }
@media (max-width: 760px) {
  .chip-row {
    flex-wrap: nowrap; overflow-x: auto; overscroll-behavior-x: contain;
    scrollbar-width: none; -ms-overflow-style: none;
  }
  .chip-row::-webkit-scrollbar { display: none; }
  .chip-row > * { flex: none; white-space: nowrap; }
}

/* ── contrast fixes ───────────────────────────────────────────────────────
   The Classical hairline (--color-divider, ~16% ink) is right for a quiet
   content separator, but two places lean on it — or on the plain, not the
   darker, accent step — for something a reader actually has to make out:
   a button's label, or where a form field's box ends. Both measured well
   under WCAG AA (2.0:1–3.0:1 against a ~2:1/4.5:1 bar); this raises just
   those, decorative dividers and table rules elsewhere are untouched. */

.btn-ghost { color: var(--color-accent-700); }

.input, .btn-secondary { border-color: var(--color-neutral-600); }
.input::placeholder { color: var(--color-neutral-600); opacity: 1; }

/* ── prose ──────────────────────────────────────────────────────────────── */

.justify { text-align: justify; hyphens: auto; }
@media (max-width: 760px) { .justify { text-align: left; hyphens: manual; } }

.cols {
  columns: 20em; column-gap: 40px;
  column-rule: 1px solid var(--color-divider);
}
@media (max-width: 760px) { .cols { columns: auto; } }

/* ── product rows: image leads on odd rows, trails on even ─────────────── */

.fig-lead { order: 0; }
.fig-trail { order: 2; }
@media (max-width: 900px) { .fig-lead, .fig-trail { order: 0; } }

/* ── WhatsApp mark ──────────────────────────────────────────────────────── */

.wa {
  position: fixed; right: 22px; bottom: 22px; z-index: 40;
  display: inline-flex; align-items: center; gap: 10px;
  padding: 12px 18px 12px 14px;
  background: var(--color-neutral-900); color: var(--color-neutral-100);
  text-decoration: none;
  border: 1px solid color-mix(in srgb, var(--color-accent) 55%, transparent);
  transition: transform 560ms cubic-bezier(0.32,0.72,0,1);
}
.wa:hover { transform: translateY(-2px); color: var(--color-neutral-100); }
.wa:active { transform: scale(0.98); }
.wa-mark { width: 20px; height: 20px; flex: none; display: block; }
.wa-label {
  font-family: var(--font-heading); font-size: 13px;
  letter-spacing: 0.09em; text-transform: uppercase;
}
/* Small screens: the mark alone, clear of the home indicator. */
@media (max-width: 560px) {
  .wa {
    right: calc(14px + env(safe-area-inset-right, 0px));
    bottom: calc(14px + env(safe-area-inset-bottom, 0px));
    padding: 14px; gap: 0;
  }
  .wa-mark { width: 22px; height: 22px; }
  .wa-label {
    position: absolute; width: 1px; height: 1px;
    overflow: hidden; clip-path: inset(50%); white-space: nowrap;
  }
}

/* Keep the closing line clear of the fixed WhatsApp mark on small screens. */
.footer-end { padding-block: 22px calc(40px * var(--sp)); }
@media (max-width: 560px) { .footer-end { padding-bottom: calc(40px * var(--sp) + 62px); } }

/* ── lightbox ───────────────────────────────────────────────────────────── */

.lightbox {
  position: fixed; inset: 0; z-index: 60;
  background: color-mix(in srgb, var(--color-neutral-900) 93%, transparent);
  display: flex; align-items: center; justify-content: center;
  padding: 5vh 5vw; cursor: zoom-out; border: 0;
}
.lightbox img {
  max-width: 100%; max-height: 90vh;
  object-fit: contain; border: 8px solid var(--color-bg);
}
@media (max-width: 560px) { .lightbox { padding: 3vh 3vw; } .lightbox img { border-width: 5px; } }

/* ── motion ─────────────────────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  /* reveal.js opts out entirely, but never let a mid-flight reveal stick. */
  [data-reveal] { opacity: 1 !important; transform: none !important; }
}