/*
Theme Name: Westgate Inn
Theme URI: https://thewestgateinn.co.ke
Description: Custom block theme for The Westgate Inn — refined hospitality presentation in forest green and golden yellow. Child of Twenty Twenty-Five.
Author: Mkufunzi ICT Solutions Ltd
Author URI: https://mkufunzi.com
Template: twentytwentyfive
Version: 0.4.0
Requires at least: 6.4
Text Domain: westgate-inn
License: Proprietary
*/

/* Fonts (Google Fonts: Inter + Fraunces) and Font Awesome 6.4.0 are NOT
   imported here anymore. Render-blocking @import serializes: the browser had
   to download + parse this file BEFORE it could even discover those two
   cross-origin requests, costing ~1,280ms on the critical path. They are now
   emitted as parallel, non-render-blocking <link>s (with preconnect hints)
   from SECTION 5a (wgp_web_fonts) in westgate-platform.php. */

/* @redesign-v1 — editorial restructure. Design system:
   Fraunces reserved for display h1/h2 + the testimonial pull-quote; Inter for
   everything else. Dark/light cadence; eyebrows cut to 2 (hero + featured).
   Motion layer follows in a later pass — no new JS this pass. */
:root {
  --wg-eyebrow-letter-spacing: 0.18em;

  /* @redesign-v1 easing tokens (used by existing transitions) */
  --ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1);
  --ease-out-expo:  cubic-bezier(0.16, 1, 0.3, 1);

  /* @redesign-v1 surface + ink tokens */
  --wg-dark-forest: #163614;   /* dark section surface */
  --wg-mid-forest:  #1C4A1A;   /* drenched mid dark-green band */
  --wg-light-near:  #FBFBF9;   /* near-white light surface */
  --wg-light-bone:  #EFEEE7;   /* warm bone light surface */
  --wg-ink:         #163614;   /* ink on light (display) */
  --wg-body-light:  #2E322B;   /* body on light (>=4.5:1) */
  --wg-bone:        #F5F4EF;   /* text on dark */
  --wg-muted-dark:  #CBD3C4;   /* muted text on dark */
  --wg-gold-dark:   #F6E018;   /* gold accent on dark */
  --wg-gold-light:  #8B6914;   /* gold text on light (AA) */
  --wg-green-band:  #236B23;   /* green band needing white text */

  --wg-font-display: var(--wp--preset--font-family--fraunces, 'Fraunces', Georgia, serif);
  --wg-font-body: var(--wp--preset--font-family--inter, 'Inter', system-ui, sans-serif);
}

/* Global type discipline: Inter is the default body face; Fraunces is applied
   ONLY on display h1/h2 + the testimonial pull-quote via explicit rules. */
body,
.wp-block-group p,
.wg-eyebrow,
.wp-block-button__link {
  font-family: var(--wg-font-body);
}

/* Display type — Fraunces, tightened. text-wrap:balance on h1/h2. */
.wg-hero-slider h1,
.wg-editorial-statement,
.wg-gallery-title,
.wg-offering-title,
.wg-featured-body h2,
.wg-voices-heading,
.wg-faq-heading,
.wg-cta-band h2 {
  font-family: var(--wg-font-display);
  letter-spacing: -0.02em;
  text-wrap: balance;
}

/* @redesign-v1 — INTERIOR PAGES: propagate the editorial display type to plain
   block-content headings. The homepage uses wg- classes; interior pages
   (Accommodation, Dining, Experiences, Events, Services, About, …) use generic
   .wp-block-heading inside .entry-content, which otherwise falls back to the
   theme default face and reads off-brand. Font identity only — colour is left to
   the theme/inline so headings on dark bands keep their white inline colour. */
.entry-content h1,
.entry-content h2,
.entry-content h3 {
  font-family: var(--wg-font-display);
  letter-spacing: -0.02em;
  text-wrap: balance;
}

.wg-eyebrow {
  text-transform: uppercase;
  letter-spacing: var(--wg-eyebrow-letter-spacing);
  font-size: 0.78rem;
  font-weight: 600;
  font-family: var(--wg-font-body);
  /* WCAG AA: #8B6914 is 4.67:1 on light section bg. Hero eyebrows overridden bright below. */
  color: var(--wg-gold-light);
  margin-bottom: 0.75rem;
}
/* Hero eyebrow sits on a dark photo overlay — keep it bright gold. */
.wg-hero-slider .wg-eyebrow {
  color: var(--wp--preset--color--golden-yellow, #F6E018);
}
.wg-lede { max-width: 520px; margin-left: auto; margin-right: auto; }
.wp-block-button.is-style-fill .wp-block-button__link { border-radius: 999px; }
.wp-block-image img, .wp-block-cover { border-radius: 4px; }

/* ============ Hero slider — FIXED positioning ============ */
/* @redesign-v1: min-height ~88vh so headline + CTAs sit above the fold. */
.wg-hero-slider {
  position: relative;
  min-height: 88vh;
  overflow: hidden;
  width: 100%;
}
.wg-hero-slider .wg-slide {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  width: 100%;
  height: 100%;
  min-height: 88vh;
  opacity: 0;
  transition: opacity 900ms ease-in-out;
  pointer-events: none;
  z-index: 1;
}
.wg-hero-slider .wg-slide.is-active {
  opacity: 1;
  pointer-events: auto;
  z-index: 2;
}
.wg-hero-slider .wg-slide .wp-block-cover {
  height: 100%;
  min-height: 88vh;
  margin: 0;
  border-radius: 0;
}
/* @redesign-v1: constrain the hero headline to <=2 lines at all widths and
   reserve Fraunces. clamp keeps it above the fold on short viewports. */
.wg-hero-slider h1 {
  font-size: clamp(2.4rem, 5vw, 4.5rem);
  line-height: 1.05;
  letter-spacing: -0.02em;
  max-width: 16ch;
  margin-left: auto;
  margin-right: auto;
}
.wg-hero-dots {
  position: absolute;
  left: 50%; transform: translateX(-50%);
  bottom: 24px;
  display: flex; gap: 10px;
  z-index: 10;
}
.wg-hero-dots button {
  width: 10px; height: 10px;
  border-radius: 50%;
  border: none;
  background: rgba(255,255,255,0.45);
  cursor: pointer; padding: 0;
  transition: background 200ms, width 200ms;
}
.wg-hero-dots button.is-active {
  background: var(--wp--preset--color--golden-yellow, #F6E018);
  width: 28px;
  border-radius: 5px;
}

/* Feature card icons (FA-based) — legacy pattern, kept for any residual use */
.wg-feature-icon {
  font-size: 2.5rem;
  color: var(--wp--preset--color--forest-green, #2D8B2D);
  margin-bottom: 1rem;
  display: block;
}

/* Stat tiles — legacy (stats-row / snapshot no longer on front page) */
.wg-stat-num {
  font-family: var(--wg-font-display);
  font-size: 3rem;
  font-weight: 600;
  color: var(--wp--preset--color--forest-green, #2D8B2D);
  line-height: 1;
}
.wg-stat-label {
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--wg-dark-forest);
  margin-top: 0.5rem;
}

/* WhatsApp float */
.wg-whatsapp-float {
  position: fixed;
  right: 22px; bottom: 22px;
  width: 56px; height: 56px;
  border-radius: 50%;
  background: #25D366;
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.8rem;
  box-shadow: 0 6px 24px rgba(37,211,102,0.45);
  z-index: 1000;
  text-decoration: none;
  animation: wg-pulse 2.5s ease-in-out infinite;
}
.wg-whatsapp-float:hover { transform: scale(1.08); transition: transform 200ms ease; }
@keyframes wg-pulse {
  0%,100% { box-shadow: 0 6px 24px rgba(37,211,102,0.45); }
  50%     { box-shadow: 0 6px 36px rgba(37,211,102,0.85); }
}

/* Scroll reveal */
.wg-reveal { opacity: 0; transform: translateY(16px); transition: opacity 600ms ease-out, transform 600ms ease-out; }
.wg-reveal.is-revealed { opacity: 1; transform: translateY(0); }

/* Menu page table styling */
.wg-menu-table table { border: none; }
.wg-menu-table td { border: none !important; }

/* v0.4: Hero polish (Task 5) */
.wg-hero-slider .wg-slide .wp-block-cover::before {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(22,54,20,0.7) 0%, rgba(22,54,20,0.1) 50%, transparent 100%);
  z-index: 1;
  pointer-events: none;
}
.wg-hero-slider .wg-slide .wp-block-cover__inner-container { position: relative; z-index: 2; }
.wg-hero-slider .wg-slide.is-active .wp-block-cover__image-background {
  animation: wg-ken-burns 20s ease-in-out infinite alternate;
}
@keyframes wg-ken-burns {
  from { transform: scale(1); }
  to   { transform: scale(1.08); }
}
.wg-hero-slider .wg-eyebrow::after {
  content: ""; display: block;
  width: 40px; height: 2px;
  background: var(--wp--preset--color--olive-gold, #B68A1D);
  margin: 0.5rem auto 0;
}

/* @task-5-hero-polish-v1: reduced-motion guard (post-review) */
@media (prefers-reduced-motion: reduce) {
  .wg-hero-slider .wg-slide.is-active .wp-block-cover__image-background { animation: none; }
  .wg-whatsapp-float { animation: none; }
}

/* =========================================================================
 * @redesign-v1 — SECTION 2 · Editorial intro (LIGHT bone)
 * Replaces the stats bar. Centered Fraunces statement weaving the numbers
 * into prose; a small Inter place-line with a thin gold hairline. NO eyebrow.
 * ========================================================================= */
.wg-editorial {
  background: var(--wg-light-bone);
  padding: clamp(5rem, 10vw, 7rem) 1.25rem;
}
.wg-editorial-inner {
  max-width: 760px;
  margin: 0 auto;
  text-align: center;
}
.wg-editorial-statement {
  font-size: clamp(1.6rem, 3.4vw, 2.6rem);
  line-height: 1.25;
  color: var(--wg-ink);
  font-weight: 500;
  margin: 0;
}
.wg-editorial-hairline {
  width: 40px;
  height: 1px;
  background: var(--wg-gold-light);
  border: 0;
  margin: 2rem auto 1.25rem;
}
.wg-editorial-place {
  font-family: var(--wg-font-body);
  font-size: 0.9rem;
  letter-spacing: 0.06em;
  color: color-mix(in srgb, var(--wg-body-light) 78%, transparent);
  margin: 0;
}

/* =========================================================================
 * @redesign-v1 — SECTION 3 · Property gallery (LIGHT near-white) · BENTO
 * Asymmetric 12-col bento on desktop (real size variation), 2-col feature
 * on tablet, horizontal scroll-snap on mobile. Keeps hover captions + a11y.
 * ========================================================================= */
.wg-gallery {
  background: var(--wg-light-near);
  padding: clamp(4rem, 8vw, 6rem) 1.25rem;
}
.wg-gallery-heading {
  max-width: 1200px;
  margin: 0 auto 2rem;
  text-align: center;
}
.wg-gallery-title {
  font-size: clamp(1.8rem, 3.6vw, 2.75rem);
  color: var(--wg-ink);
  margin: 0;
  line-height: 1.1;
}
.wg-photo-strip {
  display: grid;
  gap: 0.75rem;
  max-width: 1200px;
  margin: 0 auto;
  /* mobile default: bold 2-col mosaic led by a full-bleed feature tile
     (shows ~5 photos at once instead of a single scrolled card). */
  grid-template-columns: repeat(2, 1fr);
}
/* Phone only: first tile spans both columns as a wide feature. Scoped to
   <600px so it never overrides the tablet (21/9) or desktop bento aspect. */
@media (max-width: 599px) {
  .wg-photo-strip figure:first-child {
    grid-column: 1 / -1;
    aspect-ratio: 16 / 10;
  }
}
.wg-photo-strip figure {
  position: relative;
  margin: 0;
  scroll-snap-align: start;
  overflow: hidden;
  border-radius: 6px;
  aspect-ratio: 3 / 2;
  background: var(--wg-dark-forest);
}
.wg-photo-strip figure a {
  display: block;
  width: 100%;
  height: 100%;
  color: inherit;
  text-decoration: none;
}
.wg-photo-strip figure a:focus { outline: 2px solid var(--wp--preset--color--golden-yellow, #F6E018); outline-offset: 2px; }
.wg-photo-strip figure img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 600ms var(--ease-out-expo);
}
.wg-photo-strip figure:hover img,
.wg-photo-strip figure:focus-within img { transform: scale(1.05); }
.wg-photo-strip figcaption {
  position: absolute;
  inset: auto 0 0 0;
  padding: 1.75rem 1.1rem 1.1rem;
  color: #fff;
  font-family: var(--wg-font-body);
  font-size: 0.95rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  opacity: 0;
  transition: opacity 300ms ease;
  background: linear-gradient(to top, color-mix(in srgb, var(--wg-dark-forest) 90%, transparent), transparent);
  pointer-events: none;
}
.wg-photo-strip figure:hover figcaption,
.wg-photo-strip figure:focus-within figcaption { opacity: 1; }
@media (hover: none) {
  /* Touch devices don't hover — show caption permanently */
  .wg-photo-strip figcaption { opacity: 1; }
}
/* Tablet: 2-col with a full-width feature at the top. */
@media (min-width: 600px) and (max-width: 899px) {
  .wg-photo-strip {
    grid-auto-flow: row;
    grid-template-columns: repeat(2, 1fr);
    grid-auto-columns: auto;
    overflow-x: visible;
    scroll-snap-type: none;
  }
  .wg-photo-strip figure:first-child {
    grid-column: 1 / -1;
    aspect-ratio: 21 / 9;
  }
}
/* Desktop: asymmetric 12-col bento with real size variation.
   Row A: item1 (gazebo) 7 cols x tall; items 2 (garden) + 3 (bedroom) stack in
   the remaining 5 cols. Row B: item4 (bathroom) 4 cols, item5 (restaurant) 5
   cols, item6 (conference) 3 cols. Fixed row height so tiles differ in size. */
@media (min-width: 900px) {
  .wg-photo-strip {
    grid-auto-flow: row;
    grid-template-columns: repeat(12, 1fr);
    grid-template-rows: 260px 260px 300px;
    grid-auto-columns: auto;
    overflow-x: visible;
    scroll-snap-type: none;
    gap: 1rem;
  }
  .wg-photo-strip figure { aspect-ratio: auto; }
  /* Row A */
  .wg-photo-strip figure:nth-child(1) { grid-column: 1 / 8;  grid-row: 1 / 3; } /* gazebo — tall feature */
  .wg-photo-strip figure:nth-child(2) { grid-column: 8 / 13; grid-row: 1 / 2; } /* garden */
  .wg-photo-strip figure:nth-child(3) { grid-column: 8 / 13; grid-row: 2 / 3; } /* bedroom */
  /* Row B — varied widths */
  .wg-photo-strip figure:nth-child(4) { grid-column: 1 / 5;  grid-row: 3 / 4; } /* bathroom 4 col */
  .wg-photo-strip figure:nth-child(5) { grid-column: 5 / 10; grid-row: 3 / 4; } /* restaurant 5 col */
  .wg-photo-strip figure:nth-child(6) { grid-column: 10 / 13; grid-row: 3 / 4; } /* conference 3 col */
}
@media (prefers-reduced-motion: reduce) {
  .wg-photo-strip figure img { transition: none; }
  .wg-photo-strip figure:hover img,
  .wg-photo-strip figure:focus-within img { transform: none; }
}

/* =========================================================================
 * @redesign-v1 — SECTION 4 · Stay · Dine · Gather (DARK GREEN drenched)
 * Real-photo cards with varied sizes on a mid dark-green band, bone text.
 * 12-col bento: "Stay" is a tall feature; the other three are smaller.
 * ========================================================================= */
.wg-offering {
  background: var(--wg-mid-forest);
  padding: clamp(4.5rem, 9vw, 7rem) 1.25rem;
}
.wg-offering-heading {
  max-width: 1200px;
  margin: 0 auto 2.5rem;
  text-align: center;
}
.wg-offering-title {
  font-size: clamp(1.9rem, 3.8vw, 2.9rem);
  color: var(--wg-bone);
  margin: 0;
  line-height: 1.08;
}
.wg-offering-grid {
  display: grid;
  gap: 1rem;
  max-width: 1200px;
  margin: 0 auto;
  grid-template-columns: 1fr;
}
.wg-offering-card {
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: 8px;
  text-decoration: none;
  min-height: 300px;
  background: var(--wg-dark-forest);
}
.wg-offering-card img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 700ms var(--ease-out-expo);
}
.wg-offering-card::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(
    to top,
    color-mix(in srgb, var(--wg-dark-forest) 92%, transparent) 0%,
    color-mix(in srgb, var(--wg-dark-forest) 55%, transparent) 42%,
    transparent 78%
  );
  z-index: 1;
}
.wg-offering-card:hover img,
.wg-offering-card:focus-visible img { transform: scale(1.05); }
.wg-offering-body {
  position: absolute;
  inset: auto 0 0 0;
  z-index: 2;
  padding: 1.6rem 1.5rem;
}
.wg-offering-card-title {
  font-family: var(--wg-font-body);
  font-weight: 600;
  font-size: 1.25rem;
  color: var(--wg-bone);
  margin: 0 0 0.35rem;
  letter-spacing: -0.01em;
}
.wg-offering-card-line {
  font-family: var(--wg-font-body);
  font-size: 0.92rem;
  line-height: 1.45;
  color: var(--wg-muted-dark);
  margin: 0;
}
.wg-offering-arrow {
  display: inline-block;
  margin-top: 0.75rem;
  color: var(--wg-gold-dark);
  font-size: 1.1rem;
  font-weight: 600;
  transition: transform 350ms var(--ease-out-quart);
}
.wg-offering-card:hover .wg-offering-arrow,
.wg-offering-card:focus-visible .wg-offering-arrow { transform: translateX(6px); }
.wg-offering-card:focus-visible {
  outline: 2px solid var(--wg-gold-dark);
  outline-offset: 3px;
}
/* Desktop bento: Stay tall on the left, the other three vary on the right. */
@media (min-width: 720px) {
  .wg-offering-grid {
    grid-template-columns: repeat(12, 1fr);
    grid-auto-rows: 232px;
  }
  .wg-offering-card { min-height: 0; }
  .wg-offering-card:nth-child(1) { grid-column: 1 / 6;  grid-row: 1 / 3; } /* Stay — tall feature */
  .wg-offering-card:nth-child(2) { grid-column: 6 / 13; grid-row: 1 / 2; } /* Dine — wide */
  .wg-offering-card:nth-child(3) { grid-column: 6 / 10; grid-row: 2 / 3; } /* Weddings */
  .wg-offering-card:nth-child(4) { grid-column: 10 / 13; grid-row: 2 / 3; } /* Conferences — narrow */
}
@media (prefers-reduced-motion: reduce) {
  .wg-offering-card img,
  .wg-offering-arrow { transition: none; }
  .wg-offering-card:hover img,
  .wg-offering-card:focus-visible img { transform: none; }
}

/* =========================================================================
 * @redesign-v1 — SECTION 5 · This month · featured experience (LIGHT bone)
 * Editorial offset: large image with the text in a card that overlaps the
 * image (pulled left by a negative margin on desktop); stacked on mobile.
 * "This month" label is the 2nd allowed eyebrow.
 * ========================================================================= */
.wg-featured-section {
  background: var(--wg-light-bone);
  padding: clamp(4.5rem, 9vw, 7rem) 1.25rem;
}
.wg-featured {
  display: block;
  max-width: 1200px;
  margin: 0 auto;
  position: relative;
}
.wg-featured-media {
  position: relative;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 14px 40px color-mix(in srgb, var(--wg-dark-forest) 14%, transparent);
}
.wg-featured img {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  display: block;
}
.wg-featured-body {
  background: var(--wg-light-near);
  border-radius: 8px;
  padding: 2rem 1.75rem;
  margin: -3rem 1rem 0;
  position: relative;
  z-index: 2;
  box-shadow: 0 14px 40px color-mix(in srgb, var(--wg-dark-forest) 12%, transparent);
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.wg-featured-eyebrow {
  font-family: var(--wg-font-body);
  font-size: 0.78rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--wg-gold-light);
  font-weight: 600;
}
.wg-featured-body h2 {
  font-size: clamp(1.6rem, 3vw, 2.4rem);
  color: var(--wg-ink);
  line-height: 1.15;
  margin: 0;
}
.wg-featured-excerpt {
  color: var(--wg-body-light);
  font-family: var(--wg-font-body);
  font-size: 1rem;
  line-height: 1.55;
}
.wg-featured-price {
  color: var(--wg-ink);
  font-family: var(--wg-font-body);
  font-weight: 600;
  font-size: 0.95rem;
}
.wg-reserve-pill {
  display: inline-block;
  padding: 0.8rem 1.6rem;
  background: var(--wg-gold-dark);
  color: var(--wg-dark-forest);
  text-decoration: none;
  border-radius: 999px;
  font-family: var(--wg-font-body);
  font-weight: 600;
  font-size: 0.95rem;
  align-self: flex-start;
  transition: filter 200ms ease, transform 200ms var(--ease-out-quart);
}
.wg-reserve-pill:hover,
.wg-reserve-pill:focus-visible {
  filter: brightness(0.94);
  transform: translateY(-2px);
  outline-offset: 2px;
}
.wg-reserve-pill:focus-visible {
  outline: 2px solid var(--wg-dark-forest);
}
/* Desktop editorial offset: image ~62% width, body card overlaps to the left. */
@media (min-width: 900px) {
  .wg-featured {
    display: grid;
    grid-template-columns: 62% 38%;
    align-items: center;
  }
  .wg-featured-media { grid-column: 1 / 2; }
  .wg-featured img { aspect-ratio: 4 / 3; }
  .wg-featured-body {
    grid-column: 2 / 3;
    margin: 0 0 0 -8%;
    padding: 2.75rem 2.25rem;
    max-width: 460px;
    justify-self: start;
  }
}
@media (prefers-reduced-motion: reduce) {
  .wg-reserve-pill { transition: none; }
  .wg-reserve-pill:hover,
  .wg-reserve-pill:focus-visible { filter: none; transform: none; }
}

/* =========================================================================
 * @redesign-v1 — SECTION 6 · Guest voices (DARK GREEN drenched)
 * Varied layout: the long RobinC303 quote is a large featured pull-quote
 * (Fraunces italic, bone); the two shorter quotes sit smaller beside/below it.
 * ========================================================================= */
/* Namespaced to avoid collision with WP core / plugin .visually-hidden */
.wg-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;
}
.wg-voices {
  background: var(--wg-mid-forest);
  padding: clamp(4.5rem, 9vw, 7rem) 1.25rem;
}
.wg-voices-heading {
  font-size: clamp(1.9rem, 3.8vw, 2.9rem);
  color: var(--wg-bone);
  text-align: center;
  margin: 0 auto 2.5rem;
  padding: 0;
  line-height: 1.08;
  max-width: 1200px;
}
.wg-voices-grid {
  display: grid;
  gap: 1.5rem;
  max-width: 1200px;
  margin: 0 auto;
  grid-template-columns: 1fr;
}
.wg-voice {
  margin: 0;
  display: flex;
  flex-direction: column;
}
.wg-voice-stars {
  color: var(--wg-gold-dark);
  font-size: 1.05rem;
  letter-spacing: 0.15em;
  margin-bottom: 0.9rem;
}
.wg-voice-quote {
  font-family: var(--wg-font-body);
  font-size: 1rem;
  line-height: 1.55;
  color: var(--wg-bone);
  margin: 0 0 1.1rem;
}
.wg-voice-name {
  font-family: var(--wg-font-body);
  font-size: 0.85rem;
  color: var(--wg-muted-dark);
  letter-spacing: 0.05em;
  font-style: normal;
  margin-top: auto;
}
/* Featured pull-quote — the long RobinC303 review, large Fraunces italic. */
.wg-voice--feature {
  border-left: 2px solid color-mix(in srgb, var(--wg-gold-dark) 60%, transparent);
  padding-left: clamp(1.25rem, 3vw, 2.25rem);
}
.wg-voice--feature .wg-voice-quote {
  font-family: var(--wg-font-display);
  font-style: italic;
  font-size: clamp(1.5rem, 2.6vw, 2.1rem);
  line-height: 1.3;
  letter-spacing: -0.01em;
  color: var(--wg-bone);
}
@media (min-width: 900px) {
  .wg-voices-grid {
    grid-template-columns: 1.5fr 1fr;
    align-items: start;
  }
  /* Feature spans the tall left column across both rows. */
  .wg-voice--feature { grid-column: 1 / 2; grid-row: 1 / 3; }
  .wg-voice:nth-child(2) { grid-column: 2 / 3; grid-row: 1 / 2; }
  .wg-voice:nth-child(3) { grid-column: 2 / 3; grid-row: 2 / 3; }
  .wg-voices-grid .wg-voice:not(.wg-voice--feature) {
    border-top: 1px solid color-mix(in srgb, var(--wg-bone) 20%, transparent);
    padding-top: 1.5rem;
  }
}

/* =========================================================================
 * @redesign-v1 — SECTION 7 · FAQ (LIGHT near-white)
 * Question text moved to Inter 600 (off Fraunces). Heading stays Fraunces.
 * Lighter borders, comfortable spacing, max-width ~760px.
 * ========================================================================= */
.wg-faq-section {
  background: var(--wg-light-near);
  padding: clamp(4.5rem, 9vw, 7rem) 1.25rem;
}
.wg-faq {
  max-width: 760px;
  margin: 0 auto;
}
.wg-faq-heading {
  font-size: clamp(1.8rem, 3.6vw, 2.75rem);
  color: var(--wg-ink);
  text-align: center;
  margin: 0 0 2.25rem;
  line-height: 1.1;
}
.wg-faq details {
  border-bottom: 1px solid color-mix(in srgb, var(--wg-ink) 12%, transparent);
  padding: 1.35rem 0;
}
.wg-faq summary {
  font-family: var(--wg-font-body);
  font-weight: 600;
  font-size: 1.08rem;
  cursor: pointer;
  color: var(--wg-ink);
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1rem;
}
.wg-faq-q { min-width: 0; flex: 1 1 auto; }
.wg-faq summary::-webkit-details-marker { display: none; }
.wg-faq summary::after {
  content: "+";
  font-size: 1.5rem;
  color: var(--wg-gold-light);
  transition: transform 200ms ease;
  line-height: 1;
  flex-shrink: 0;
}
.wg-faq details[open] summary::after { content: "\2212"; }
.wg-faq details p {
  margin-top: 0.85rem;
  color: var(--wg-body-light);
  font-family: var(--wg-font-body);
  line-height: 1.6;
}
.wg-faq summary:focus-visible {
  outline: 2px solid var(--wg-gold-light);
  outline-offset: 4px;
  border-radius: 2px;
}
@media (prefers-reduced-motion: reduce) {
  .wg-faq summary::after { transition: none; }
}

/* =========================================================================
 * @redesign-v1 — SECTION 8 · Closing CTA (DARK)
 * ========================================================================= */
.wg-cta-band h2 {
  color: #fff;
  font-size: clamp(1.9rem, 3.8vw, 2.9rem);
  line-height: 1.1;
}

/* @task-11-mobile-action-bar-v1: fixed bottom bar, mobile only */
.wg-mobile-action-bar {
  display: none;  /* hidden by default; shown only <=768px via media query */
  position: fixed; left: 0; right: 0; bottom: 0;
  z-index: 999;
  background: #fff;
  border-top: 1px solid #E0E0E0;
  box-shadow: 0 -2px 12px rgba(0,0,0,0.08);
  padding: 0.5rem;
  padding-bottom: calc(0.5rem + env(safe-area-inset-bottom));
}
.wg-mobile-action-bar-inner { display: flex; gap: 0.5rem; }
.wg-mobile-action-bar a {
  flex: 1;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  min-height: 48px;  /* keeps each button above the 44px WCAG tap-target floor */
  padding: 0.5rem;
  border-radius: 6px;
  text-decoration: none;
  font-size: 0.75rem;
  color: var(--wg-dark-forest);
}
/* Book primary: dark-forest (#163614) not forest-green — white on forest-green
   is only ~4.34:1 and fails WCAG AA 4.5:1 for the 0.75rem label. */
.wg-mobile-action-bar a.primary {
  background: var(--wg-dark-forest);
  color: #fff;
}
.wg-mobile-action-bar a i { font-size: 1.2rem; margin-bottom: 0.15rem; }
.wg-mobile-action-bar a:focus-visible {
  /* inset box-shadow, not outline: an inset outline is clipped by the 6px
     border-radius in Chromium, hiding parts of the focus ring. */
  box-shadow: inset 0 0 0 2px var(--wp--preset--color--forest-green, #2D8B2D);
}
@media (max-width: 768px) {
  .wg-mobile-action-bar { display: block; }
  /* Reserve exactly the bar's rendered height so it never covers page-bottom
     content. Bar height = 48px (min-height) + 2×0.5rem padding = 64px, plus its
     own padding-bottom safe-area inset. Add the inset ONCE here (the bar already
     adds it internally) so notched phones aren't double-padded. */
  body { padding-bottom: calc(64px + env(safe-area-inset-bottom)); }
  /* Hide the floating WhatsApp bubble on mobile: the action bar's WhatsApp
     button already covers that function, so showing both is a duplicate
     affordance. Suppressing it also avoids any float/bar overlap. */
  .wg-whatsapp-float { display: none; }
}

/* =========================================================================
 * @redesign-motion-v1 — MOTION LAYER (Emil Kowalski: restrained, purposeful)
 * Only transform/opacity (+ shadow/filter) animate. No bounce/elastic — all
 * transitions use --ease-out-quart / --ease-out-expo. Every pre-animation
 * hidden state is gated on a `.js-motion` class (added by wg-home.js) so no-JS
 * and headless renders always show content. UI timings 100–300ms; hero
 * crossfade ≤900ms. A full prefers-reduced-motion neutralizer sits at the end.
 * ========================================================================= */

/* ---- 1 · Signature hero text entrance -----------------------------------
 * On each slide activation, its inner text staggers in (translateY(12px)->0 +
 * opacity 0->1, ~50ms steps, ~500ms). Gated on .wg-hero-slider.js-motion so
 * that if JS never runs the text is fully visible (never hidden by CSS alone). */
.wg-hero-slider.js-motion .wg-slide.is-active .wg-eyebrow,
.wg-hero-slider.js-motion .wg-slide.is-active h1,
.wg-hero-slider.js-motion .wg-slide.is-active .wg-lede,
.wg-hero-slider.js-motion .wg-slide.is-active .wp-block-buttons {
  animation: wg-hero-in 500ms var(--ease-out-quart) both;
}
.wg-hero-slider.js-motion .wg-slide.is-active .wg-eyebrow      { animation-delay: 40ms; }
.wg-hero-slider.js-motion .wg-slide.is-active h1               { animation-delay: 90ms; }
.wg-hero-slider.js-motion .wg-slide.is-active .wg-lede         { animation-delay: 140ms; }
.wg-hero-slider.js-motion .wg-slide.is-active .wp-block-buttons{ animation-delay: 190ms; }
/* Non-active slides: keep inner text neutral so a fade-back never flashes it. */
.wg-hero-slider.js-motion .wg-slide:not(.is-active) .wg-eyebrow,
.wg-hero-slider.js-motion .wg-slide:not(.is-active) h1,
.wg-hero-slider.js-motion .wg-slide:not(.is-active) .wg-lede,
.wg-hero-slider.js-motion .wg-slide:not(.is-active) .wp-block-buttons {
  opacity: 0;
}
@keyframes wg-hero-in {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ---- 2 · Selective scroll reveals ---------------------------------------
 * gallery figures · offering cards · guest-voices · editorial statement only.
 * Hidden state gated on .wg-motion-reveal (added by JS) so content is visible
 * by default. Sibling stagger via --i (capped ~6 in JS). */
.js-motion .wg-motion-reveal {
  opacity: 0;
  transform: translateY(18px);
  transition:
    opacity 600ms var(--ease-out-expo),
    transform 600ms var(--ease-out-expo);
  transition-delay: calc(var(--i, 0) * 45ms);
  will-change: opacity, transform;
}
.js-motion .wg-motion-reveal.is-revealed {
  opacity: 1;
  transform: translateY(0);
}

/* ---- 4 · Micro-interactions ---------------------------------------------- */

/* All buttons / pills: press feedback. */
.wp-block-button__link,
.wg-reserve-pill,
.wg-hero-dots button,
.wg-mobile-action-bar a {
  transition: transform 120ms var(--ease-out-quart), filter 160ms var(--ease-out-quart);
}
.wp-block-button__link:active,
.wg-reserve-pill:active,
.wg-mobile-action-bar a:active { transform: scale(0.97); }

/* Reserve pill / CTA buttons: hover brightness + subtle lift.
 * (.wg-reserve-pill already lifts -2px + brightness in its own rule; here we
 * cover the block buttons — hero CTAs + the closing CTA-band button.) */
.wp-block-button__link:hover,
.wp-block-button__link:focus-visible {
  filter: brightness(0.94);
  transform: translateY(-1px);
}

/* Nav links: an underline that slides in on hover (scaleX from the left). */
.wp-block-navigation-item__content {
  position: relative;
}
.wp-block-navigation-item__content::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -2px;
  height: 1.5px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 200ms var(--ease-out-quart);
}
.wp-block-navigation-item__content:hover::after,
.wp-block-navigation-item__content:focus-visible::after {
  transform: scaleX(1);
}

/* Offering cards + gallery figures: hover lift + shadow ramp (retimed).
 * The inner-image scale + arrow nudge already live in the @redesign-v1 rules;
 * here we add the container lift with the easing tokens. */
.wg-offering-card,
.wg-photo-strip figure {
  transition:
    transform 300ms var(--ease-out-quart),
    box-shadow 300ms var(--ease-out-quart);
}
.wg-offering-card:hover,
.wg-offering-card:focus-visible {
  transform: translateY(-3px);
  box-shadow: 0 16px 34px color-mix(in srgb, var(--wg-dark-forest) 42%, transparent);
}
.wg-photo-strip figure:hover,
.wg-photo-strip figure:focus-within {
  transform: translateY(-3px);
  box-shadow: 0 14px 30px color-mix(in srgb, var(--wg-dark-forest) 22%, transparent);
}

/* ---- 5 · Accessibility — reduced-motion neutralizers --------------------- */
@media (prefers-reduced-motion: reduce) {
  /* Hero entrance: show instantly, no transform/opacity animation. */
  .wg-hero-slider.js-motion .wg-slide.is-active .wg-eyebrow,
  .wg-hero-slider.js-motion .wg-slide.is-active h1,
  .wg-hero-slider.js-motion .wg-slide.is-active .wg-lede,
  .wg-hero-slider.js-motion .wg-slide.is-active .wp-block-buttons {
    animation: none;
  }
  .wg-hero-slider.js-motion .wg-slide:not(.is-active) .wg-eyebrow,
  .wg-hero-slider.js-motion .wg-slide:not(.is-active) h1,
  .wg-hero-slider.js-motion .wg-slide:not(.is-active) .wg-lede,
  .wg-hero-slider.js-motion .wg-slide:not(.is-active) .wp-block-buttons {
    opacity: 1;
  }
  /* Crossfade -> instant. */
  .wg-hero-slider .wg-slide { transition: none; }
  /* Reveals: visible immediately, no transform/opacity animation. */
  .js-motion .wg-motion-reveal {
    opacity: 1;
    transform: none;
    transition: none;
    will-change: auto;
  }
  /* Micro-interactions: no transform/filter animation. */
  .wp-block-button__link,
  .wg-reserve-pill,
  .wg-hero-dots button,
  .wg-mobile-action-bar a,
  .wg-offering-card,
  .wg-photo-strip figure { transition: none; }
  .wp-block-button__link:active,
  .wg-reserve-pill:active,
  .wg-mobile-action-bar a:active,
  .wp-block-button__link:hover,
  .wp-block-button__link:focus-visible {
    transform: none;
    filter: none;
  }
  .wg-offering-card:hover,
  .wg-offering-card:focus-visible,
  .wg-photo-strip figure:hover,
  .wg-photo-strip figure:focus-within {
    transform: none;
    box-shadow: none;
  }
  .wp-block-navigation-item__content::after { transition: none; }
}


/* ── Sticky site header (logo + navigation) on every page ──────────────────
 * Target the header TEMPLATE-PART wrapper — the <header class="wp-block-template-part">
 * that is a DIRECT child of .wp-site-blocks (which spans the full page height) —
 * NOT the inner header.wp-block-group. A position:sticky element can only stick
 * within its parent's box; the inner group's parent is only ~72px tall (the
 * template part itself), so sticking it there let the header scroll away after a
 * few pixels. The template-part wrapper's parent is the whole page, so it sticks
 * site-wide. The inner header keeps its solid white background, so content
 * scrolls cleanly beneath it. */
.wp-site-blocks > header {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 1000;
  box-shadow: 0 2px 10px rgba(22, 54, 20, .07);
}
/* Keep it below the WordPress admin bar for logged-in users (visitors unaffected). */
.admin-bar .wp-site-blocks > header { top: 32px; }
@media screen and (max-width: 782px) {
  .admin-bar .wp-site-blocks > header { top: 46px; }
}