/**
 * Villa Addon — shared base for the home-page section widgets.
 *
 * Brand tokens, the container gutter, the pill button, the display type scale
 * and the scroll-reveal system, all reused by every home-section widget so the
 * per-section stylesheets stay thin. Tokens live on :where(.vo-sec) — a zero-
 * specificity host — so a section can override one without a fight, and nothing
 * leaks to the rest of the (Elementor-kit-driven) site.
 *
 * @package Villa_Addon
 */

:where(.vo-sec) {
  --cream:     #e9ece9;
  --dark:      #123536;
  --dark-2:    #1d4a4b;
  --body:      #5e5f5e;
  --teal:      #10bab5;
  --teal-ink:  #097370;
  --bg:        #f4f5f2;
  --line:      #dcdfdb;
  --display:   "Cormorant", Georgia, serif;
  --sans:      "Outfit", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --pad-x:     clamp(22px, 3.6vw, 100px);
  /* Unified vertical section rhythm: symmetric 50px (mobile) → 60px (desktop),
     applied top AND bottom on every section for a perfectly even cadence. */
  --sp-100:    clamp(50px, 4.5vw, 60px);
  --sp-160:    clamp(50px, 4.5vw, 60px);
  --line:      #dcdfdb;
  --ease:      cubic-bezier(.22, .61, .36, 1);
}

.vo-sec { font-family: var(--sans); color: var(--body); }
.vo-sec *, .vo-sec *::before, .vo-sec *::after { box-sizing: border-box; }

.vo-container { width: 100%; max-width: none; margin-inline: auto; padding-inline: var(--pad-x); }

/* Screen-reader-only utility (global, so home-page widgets can add hidden context
   e.g. the post title after a "Read more" link). */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }

/* ---- Display headings ---- */
.vo-h1 {
  font-family: var(--display);
  font-weight: 600;
  line-height: 1.1;
  color: var(--dark);
  font-size: clamp(2.5rem, 1.4rem + 3.9vw, 72px);
  margin: 0;
}

.vo-h2 {
  font-family: var(--display);
  font-weight: 600;
  line-height: 1.1;
  color: var(--dark);
  font-size: clamp(2.1rem, 1.2rem + 3.1vw, 60px);
  margin: 0;
}

.vo-eyebrow {
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--teal-ink);
  margin: 0;
}

/* Live shared classes reused across sections */
.vo-sec .eyebrow {
  display: block;
  font-family: var(--sans);
  font-size: .8rem;
  font-weight: 500;
  letter-spacing: .18em;
  text-transform: uppercase;
  margin-bottom: 1.25rem;
  color: var(--teal-ink);
}
.vo-sec .on-dark .eyebrow { color: var(--teal); }
.vo-sec .lede { font-size: 22px; line-height: 1.5; }

/* ---- Pill button ---- */
.vo-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .6rem;
  padding: 15px 50px;
  border-radius: 100px;
  border: 1px solid var(--dark);
  background: transparent;
  color: var(--dark);
  font-family: var(--sans);
  font-size: 18px;
  font-weight: 500;
  line-height: 1.2;
  white-space: nowrap;
  text-decoration: none;
  transition: all .3s ease;
}

.vo-btn:hover { background: var(--dark); color: #fff; border-color: var(--dark); }

.vo-btn--teal { border-color: var(--teal-ink); color: var(--teal-ink); }
.vo-btn--teal:hover { background: var(--teal-ink); color: #fff; border-color: var(--teal-ink); }

/* ---- Scroll reveal (progressive: visible unless .vo-js is present) ---- */
html.vo-js .vo-reveal { opacity: 0; transform: translateY(30px); }
html.vo-js .vo-reveal.in {
  opacity: 1;
  transform: none;
  transition: opacity .9s var(--ease), transform .9s var(--ease);
}
.vo-d1.in { transition-delay: .1s; }
.vo-d2.in { transition-delay: .2s; }
.vo-d3.in { transition-delay: .3s; }

@media (prefers-reduced-motion: reduce) {
  html.vo-js .vo-reveal { opacity: 1; transform: none; }
}

/* In the Elementor editor the scroll IntersectionObserver never fires (the
   preview iframe + Lenis don't scroll like a real page), so reveals would sit
   at opacity:0 and the canvas would look blank while editing. Force every
   reveal visible inside the editor only — the live front end is untouched. */
body.elementor-editor-active .vo-reveal,
.elementor-editor-active .vo-reveal { opacity: 1 !important; transform: none !important; }

/* Merge the Ready-to-Stay CTA with the reviews section directly below it (both are
   the same dark teal): drop Elementor's 20px inter-widget gap that otherwise showed
   a thin light band between the two dark sections. */
.elementor-widget-villa-cta { margin-bottom: 0 !important; }