/* =========================================================================
   Aster — shared primitives
   Global resets WordPress does not ship, plus the cross-section primitives
   (eyebrow, buttons, links, rules, container, reveal motion).
   Every value comes from a theme.json token. Nothing here is hardcoded.
   ========================================================================= */

/* -------------------------------------------------------------------------
   1. RESETS  (scoped to the aster- prefix — core and plugin CSS untouched)
   ------------------------------------------------------------------------- */
[class*="aster-"],
[class*="aster-"]::before,
[class*="aster-"]::after,
[class*="aster-"] * {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--wp--custom--header-height) + var(--wp--preset--spacing--60));
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

/* The hero photograph bleeds off the right edge of the page. */
body { overflow-x: hidden; }

/* Keyboard-only focus, on brand tokens. WordPress ships neither of these. */
:focus:not(:focus-visible) { outline: none; }
:focus-visible {
  outline: 2px solid var(--wp--preset--color--accent);
  outline-offset: var(--wp--custom--focus-offset);
  border-radius: var(--wp--custom--radius-sm);
}

::selection { background: var(--wp--preset--color--contrast); color: var(--wp--preset--color--on-ink); }

/* blockGap puts a top margin on every root sibling and every top-level
   section, which shows as a white stripe between full-bleed bands. Core
   applies it with zero-specificity :where() rules, so a plain class wins. */
.wp-site-blocks > * { margin-block-start: 0; }
.entry-content > [class*="aster-"] { margin-block-start: 0; }

/* Collapse motion tokens rather than scattering overrides. Doubled :root
   so this beats the global-styles declaration regardless of print order. */
@media (prefers-reduced-motion: reduce) {
  :root:root {
    --wp--custom--duration-fast: 1ms;
    --wp--custom--duration-base: 1ms;
    --wp--custom--duration-slow: 1ms;
    --wp--custom--duration-image: 1ms;
    --wp--custom--reveal-shift: 0rem;
    --wp--custom--stagger: 0ms;
  }
}


/* -------------------------------------------------------------------------
   2. UTILITIES
   ------------------------------------------------------------------------- */
.aster-container {
  width: 100%;
  max-width: var(--wp--custom--container);
  margin-inline: auto;
  padding-inline: var(--wp--custom--gutter);
}

.aster-visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.aster-skip-link {
  position: absolute;
  top: var(--wp--preset--spacing--40);
  left: var(--wp--preset--spacing--40);
  z-index: 200;
  padding: var(--wp--preset--spacing--30) var(--wp--preset--spacing--50);
  background: var(--wp--preset--color--contrast);
  color: var(--wp--preset--color--on-ink);
  font-family: var(--wp--preset--font-family--body);
  font-size: var(--wp--preset--font-size--sm);
  text-decoration: none;
  transform: translateY(-200%);
}
.aster-skip-link:focus { transform: translateY(0); }


/* -------------------------------------------------------------------------
   3. PRIMITIVES
   ------------------------------------------------------------------------- */

/* --- Eyebrow label ----------------------------------------------------- */
.aster-eyebrow {
  margin: 0 0 var(--wp--preset--spacing--50);
  font-family: var(--wp--preset--font-family--body);
  font-size: var(--wp--preset--font-size--xxs);
  font-weight: var(--wp--custom--weight-medium);
  line-height: var(--wp--custom--leading-relaxed);
  letter-spacing: var(--wp--custom--tracking-label);
  text-transform: uppercase;
  color: var(--wp--preset--color--ink-muted);
}
.aster-eyebrow--on-ink { color: var(--wp--preset--color--accent-on-ink); }

/* --- Buttons ----------------------------------------------------------- */
/* Base is an outline button — flat, hairline, no fill. */
.aster-button {
  --aster-btn-bg: transparent;
  --aster-btn-fg: var(--wp--preset--color--contrast);
  --aster-btn-line: var(--wp--preset--color--line-strong);
  display: inline-flex;
  align-items: center;
  gap: var(--wp--preset--spacing--20);
  padding: var(--wp--preset--spacing--40) var(--wp--preset--spacing--60);
  background: var(--aster-btn-bg);
  color: var(--aster-btn-fg);
  border: var(--wp--custom--line-hairline) solid var(--aster-btn-line);
  border-radius: var(--wp--custom--radius-sm);
  font-family: var(--wp--preset--font-family--body);
  font-size: var(--wp--preset--font-size--sm);
  font-weight: var(--wp--custom--weight-medium);
  line-height: var(--wp--custom--leading-relaxed);
  letter-spacing: 0.02em;
  text-decoration: none;
  cursor: pointer;
  transition: background var(--wp--custom--duration-fast) var(--wp--custom--ease-out),
              border-color var(--wp--custom--duration-fast) var(--wp--custom--ease-out),
              color var(--wp--custom--duration-fast) var(--wp--custom--ease-out);
}
.aster-button:hover { --aster-btn-line: var(--wp--preset--color--contrast); }

/* The one filled element on the page: the booking action. */
.aster-button--solid {
  --aster-btn-bg: var(--wp--preset--color--accent);
  --aster-btn-fg: var(--wp--preset--color--on-ink);
  --aster-btn-line: var(--wp--preset--color--accent);
}
.aster-button--solid:hover {
  --aster-btn-bg: var(--wp--preset--color--accent-deep);
  --aster-btn-line: var(--wp--preset--color--accent-deep);
}

.aster-button--sm {
  padding: var(--wp--preset--spacing--20) var(--wp--preset--spacing--50);
  font-size: var(--wp--preset--font-size--xs);
}
.aster-button--lg {
  padding: var(--wp--preset--spacing--50) var(--wp--preset--spacing--70);
  font-size: var(--wp--preset--font-size--base);
}

.aster-icon { width: 1.15em; height: 1.15em; flex: none; display: block; }
.aster-icon--arrow { width: 1.1em; height: 1.1em; }

/* --- Links ------------------------------------------------------------- */
.aster-link-arrow {
  display: inline-flex;
  align-items: center;
  gap: var(--wp--preset--spacing--20);
  color: var(--wp--preset--color--accent);
  font-size: var(--wp--preset--font-size--sm);
  font-weight: var(--wp--custom--weight-medium);
  line-height: var(--wp--custom--leading-relaxed);
  text-decoration: none;
  padding-bottom: 2px;
  border-bottom: var(--wp--custom--line-hairline) solid transparent;
  transition: border-color var(--wp--custom--duration-fast) var(--wp--custom--ease-out),
              color var(--wp--custom--duration-fast) var(--wp--custom--ease-out);
}
.aster-link-arrow .aster-icon {
  transition: transform var(--wp--custom--duration-base) var(--wp--custom--ease-out);
}
.aster-link-arrow:hover { border-bottom-color: currentColor; }
.aster-link-arrow:hover .aster-icon { transform: translateX(4px); }

.aster-text-link {
  color: var(--wp--preset--color--accent);
  text-decoration: none;
  border-bottom: var(--wp--custom--line-hairline) solid var(--wp--preset--color--line-strong);
  padding-bottom: 1px;
  transition: border-color var(--wp--custom--duration-fast) var(--wp--custom--ease-out);
}
.aster-text-link:hover { border-bottom-color: currentColor; }

/* --- Section shell and headings ---------------------------------------- */
/* Every section block is alignfull and manages its own container, exactly as
   the design's `.section > .container` did.

   Wrapped in :where() deliberately. FluentSnippets enqueues its stylesheets
   in filename order, which is alphabetical — "2-aster-shared-styles.css"
   sorts after "11-…", "13-…", "17-…" — so this file lands in the middle of
   the section stylesheets rather than before them. At zero specificity these
   are defaults every section can override whatever the order turns out to be.
   (Without it the ink band rendered white on white.) */
:where(.aster-section) {
  padding-block: var(--wp--custom--section-space);
  background: var(--wp--preset--color--base);
}

.aster-section-title {
  margin: 0 0 var(--wp--preset--spacing--50);
  font-family: var(--wp--preset--font-family--display);
  font-size: var(--wp--preset--font-size--xxl);
  font-weight: var(--wp--custom--weight-medium);
  line-height: var(--wp--custom--leading-snug);
  letter-spacing: var(--wp--custom--tracking-display);
  color: var(--wp--preset--color--contrast);
  text-wrap: balance;
}

.aster-section-lede {
  max-width: var(--wp--custom--measure);
  margin: 0;
  color: var(--wp--preset--color--ink-secondary);
}

/* --- Figures ----------------------------------------------------------- */
/* Zero specificity for the same reason as .aster-section above: sections set
   their own figure margins and must win regardless of stylesheet order. */
:where(.aster-figure) { margin: 0; }

.aster-figure-caption {
  margin-top: var(--wp--preset--spacing--40);
  font-size: var(--wp--preset--font-size--xs);
  line-height: var(--wp--custom--leading-normal);
  letter-spacing: 0.01em;
  color: var(--wp--preset--color--ink-muted);
}

/* --- Quotes ------------------------------------------------------------ */
.aster-inline-quote {
  margin: var(--wp--preset--spacing--50) 0 0;
  padding-left: var(--wp--preset--spacing--50);
  border-left: var(--wp--custom--line-rule) solid var(--wp--preset--color--line-strong);
}
.aster-inline-quote p {
  margin: 0 0 var(--wp--preset--spacing--20);
  font-family: var(--wp--preset--font-family--display);
  font-size: var(--wp--preset--font-size--base);
  line-height: var(--wp--custom--leading-normal);
  color: var(--wp--preset--color--contrast);
}
.aster-inline-quote cite {
  font-style: normal;
  font-size: var(--wp--preset--font-size--xs);
  letter-spacing: 0.02em;
  color: var(--wp--preset--color--ink-muted);
}

.aster-pull-quote {
  margin: var(--wp--preset--spacing--70) 0;
  padding: var(--wp--preset--spacing--60) 0;
  border-top: var(--wp--custom--line-hairline) solid var(--wp--preset--color--line);
  border-bottom: var(--wp--custom--line-hairline) solid var(--wp--preset--color--line);
}
.aster-pull-quote p {
  margin: 0 0 var(--wp--preset--spacing--30);
  font-family: var(--wp--preset--font-family--display);
  font-size: var(--wp--preset--font-size--lg);
  line-height: var(--wp--custom--leading-normal);
  letter-spacing: var(--wp--custom--tracking-tight);
  color: var(--wp--preset--color--contrast);
  text-wrap: balance;
}
.aster-pull-quote cite {
  font-style: normal;
  font-size: var(--wp--preset--font-size--xs);
  letter-spacing: var(--wp--custom--tracking-label);
  text-transform: uppercase;
  color: var(--wp--preset--color--ink-muted);
}

/* --- Rules ------------------------------------------------------------- */
.aster-rule {
  border: 0;
  border-top: var(--wp--custom--line-hairline) solid var(--wp--preset--color--line);
  margin: var(--wp--preset--spacing--90) 0;
  opacity: 1;
}


/* -------------------------------------------------------------------------
   4. MOTION — one quiet reveal, used everywhere.
   Gated on .js (set by aster-frame.js) so that if the script never runs,
   nothing is left permanently invisible.
   ------------------------------------------------------------------------- */
.js .aster-reveal {
  opacity: 0;
  transform: translateY(var(--wp--custom--reveal-shift));
  transition: opacity var(--wp--custom--duration-slow) var(--wp--custom--ease-out),
              transform var(--wp--custom--duration-slow) var(--wp--custom--ease-out);
  transition-delay: var(--aster-reveal-delay, 0ms);
}
.js .aster-reveal.is-visible { opacity: 1; transform: none; }


/* -------------------------------------------------------------------------
   5. PRINT — drop the furniture, open everything, and stop spending ink
      on the two dark bands.
   ------------------------------------------------------------------------- */
@media print {
  .aster-header,
  .aster-slider-controls,
  .aster-hero__media,
  .aster-visit__media { display: none; }

  .aster-reveal {
    opacity: 1;
    transform: none;
  }

  .aster-accordion__panel { grid-template-rows: 1fr; }

  .aster-close,
  .aster-footer {
    background: none;
    color: var(--wp--preset--color--ink-secondary);
  }
  .aster-close__title,
  .aster-footer__brand { color: var(--wp--preset--color--contrast); }
}