/* ============================================================
   W OUTDOOR LIVING — BASE STYLES
   Buttons, line-draw utility, Elementor animation overrides,
   reveal helpers, and small global helpers.
   ============================================================ */


/* ============================================================
   GLOBAL RESET
   ============================================================ */
html, body {
    overscroll-behavior: none !important;
}

.balance .elementor-heading-title { text-wrap: balance; }
.pretty .elementor-heading-title  { text-wrap: pretty; }

@media (max-width: 768px) {
    .balance .elementor-heading-title { text-wrap: pretty; }
    .balance.balance-mob .elementor-heading-title { text-wrap: balance; }
}


/* ============================================================
   ELEMENTOR ANIMATION OVERRIDES
   Replaces Elementor's defaults with longer, calmer animations
   using the brand's power3.out easing.
   ============================================================ */

@keyframes fade       { from { opacity: 0; } to { opacity: 1; } }
@keyframes fadeRight  { from { opacity: 0; transform: translate3d(var(--anim-distance), 0, 0); } to { opacity: 1; transform: none; } }
@keyframes fadeLeft   { from { opacity: 0; transform: translate3d(calc(var(--anim-distance) * -1), 0, 0); } to { opacity: 1; transform: none; } }
@keyframes fadeUp     { from { opacity: 0; transform: translate3d(0, var(--anim-distance), 0); } to { opacity: 1; transform: none; } }
@keyframes fadeDown   { from { opacity: 0; transform: translate3d(0, calc(var(--anim-distance) * -1), 0); } to { opacity: 1; transform: none; } }
@keyframes slideRight { from { transform: translate3d(var(--anim-distance), 0, 0); } to { transform: none; } }
@keyframes slideLeft  { from { transform: translate3d(calc(var(--anim-distance) * -1), 0, 0); } to { transform: none; } }
@keyframes slideUp    { from { transform: translate3d(0, var(--anim-distance), 0); } to { transform: none; } }
@keyframes slideDown  { from { transform: translate3d(0, calc(var(--anim-distance) * -1), 0); } to { transform: none; } }

.elementor-element.fadeIn       { animation-name: fade       !important; animation-duration: var(--anim-duration) !important; animation-timing-function: var(--anim-ease) !important; animation-fill-mode: both !important; }
.elementor-element.fadeInRight  { animation-name: fadeRight  !important; animation-duration: var(--anim-duration) !important; animation-timing-function: var(--anim-ease) !important; animation-fill-mode: both !important; }
.elementor-element.fadeInLeft   { animation-name: fadeLeft   !important; animation-duration: var(--anim-duration) !important; animation-timing-function: var(--anim-ease) !important; animation-fill-mode: both !important; }
.elementor-element.fadeInUp     { animation-name: fadeUp     !important; animation-duration: var(--anim-duration) !important; animation-timing-function: var(--anim-ease) !important; animation-fill-mode: both !important; }
.elementor-element.fadeInDown   { animation-name: fadeDown   !important; animation-duration: var(--anim-duration) !important; animation-timing-function: var(--anim-ease) !important; animation-fill-mode: both !important; }
.elementor-element.slideInRight { animation-name: slideRight !important; animation-duration: var(--anim-duration) !important; animation-timing-function: var(--anim-ease) !important; animation-fill-mode: both !important; }
.elementor-element.slideInLeft  { animation-name: slideLeft  !important; animation-duration: var(--anim-duration) !important; animation-timing-function: var(--anim-ease) !important; animation-fill-mode: both !important; }
.elementor-element.slideInUp    { animation-name: slideUp    !important; animation-duration: var(--anim-duration) !important; animation-timing-function: var(--anim-ease) !important; animation-fill-mode: both !important; }
.elementor-element.slideInDown  { animation-name: slideDown  !important; animation-duration: var(--anim-duration) !important; animation-timing-function: var(--anim-ease) !important; animation-fill-mode: both !important; }

/* CSS stagger inside .stagger-group (no JS needed) */
.stagger-group > .elementor-element.animated[class*="fadeIn"]:nth-child(1),
.stagger-group > .e-con-inner > .elementor-element.animated[class*="fadeIn"]:nth-child(1) { animation-delay: 0s !important; }
.stagger-group > .elementor-element.animated[class*="fadeIn"]:nth-child(2),
.stagger-group > .e-con-inner > .elementor-element.animated[class*="fadeIn"]:nth-child(2) { animation-delay: 0.1s !important; }
.stagger-group > .elementor-element.animated[class*="fadeIn"]:nth-child(3),
.stagger-group > .e-con-inner > .elementor-element.animated[class*="fadeIn"]:nth-child(3) { animation-delay: 0.2s !important; }
.stagger-group > .elementor-element.animated[class*="fadeIn"]:nth-child(4),
.stagger-group > .e-con-inner > .elementor-element.animated[class*="fadeIn"]:nth-child(4) { animation-delay: 0.3s !important; }
.stagger-group > .elementor-element.animated[class*="fadeIn"]:nth-child(5),
.stagger-group > .e-con-inner > .elementor-element.animated[class*="fadeIn"]:nth-child(5) { animation-delay: 0.4s !important; }
.stagger-group > .elementor-element.animated[class*="fadeIn"]:nth-child(6),
.stagger-group > .e-con-inner > .elementor-element.animated[class*="fadeIn"]:nth-child(6) { animation-delay: 0.5s !important; }

@media (prefers-reduced-motion: reduce) {
    .elementor-element[class*="fadeIn"],
    .elementor-element[class*="slideIn"] {
        animation: none !important;
    }
}


/* ============================================================
   BLOCK REVEAL ANIMATION
   ============================================================ */
.block-reveal.fadeIn::before {
    position: absolute;
    content: '';
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background-color: var(--color-sage);
    z-index: 9;
    animation: blockRevealText 1s ease 0.2s forwards;
    transform-origin: 0% 100%;
    border: 0 !important;
}
@keyframes blockRevealText {
    0%   { transform: scaleY(1); }
    100% { transform: scaleY(0); }
}


/* ============================================================
   LINE DRAW UTILITY — <div class="wol-line"></div>
   1px sage line that draws left-to-right on viewport enter
   ============================================================ */
.wol-line {
    display: block;
    width: 100%;
    height: 1px;
    background-color: var(--color-sage);
    transform: scaleX(0);
    transform-origin: 0 0;
    transition: transform 1.2s var(--ease-out);
}
.wol-line.is-visible {
    transform: scaleX(1);
}
@media (prefers-reduced-motion: reduce) {
    .wol-line {
        transform: scaleX(1);
        transition: none;
    }
}


/* ============================================================
   BUTTONS — Base styles
   Applied to:
     .btn .elementor-button  (Elementor button widget with .btn on widget)
     .has-arrow .elementor-button (Elementor button with arrow)
     a.btn, button.btn (standalone)
     .btn-heading .elementor-heading-title (heading styled as button)
     span.btn-heading (raw span styled as button)
   ============================================================ */

body .btn .elementor-button,
body .has-arrow .elementor-button,
body a.btn,
body button.btn,
body .btn-heading .elementor-heading-title,
body span.btn-heading {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: var(--space-3xs) !important;
    padding: var(--btn-py) var(--btn-px) !important;
    margin: 0 !important;
    min-width: 0 !important;
    min-height: 0 !important;
    background-image: none !important;
    border-radius: var(--radius-xl) !important;
    box-shadow: none !important;
    font-family: var(--font-sans) !important;
    font-size: var(--font-pm) !important;
    font-weight: 700 !important;
    line-height: 1 !important;
    letter-spacing: var(--ls-tight) !important;
    text-decoration: none !important;
    cursor: pointer;
    transition:
        background-color var(--dur-fast) var(--ease-snap),
        color var(--dur-fast) var(--ease-snap);
    overflow: hidden;
    position: relative;
}

/* Size modifier — large */
body .btn-large .elementor-button,
body .has-arrow.btn-large .elementor-button,
body a.btn.btn-large,
body button.btn.btn-large,
body .btn-heading.btn-large .elementor-heading-title,
body span.btn-heading.btn-large {
    padding: var(--btn-py-l) var(--btn-px-l) !important;
    font-size: var(--font-pl) !important;
}


/* ============================================
   LETTER STAGGER
   Wraps text in .wol-btn-text with two stacked
   layers: original + duplicate revealing from below
   ============================================ */
.wol-btn-text {
    display: inline-flex;
    overflow: hidden;
    line-height: 1.1;
    vertical-align: middle;
}
.wol-btn-text__char {
    display: inline-block;
    position: relative;
    transition: transform var(--dur-normal) var(--ease-out);
    will-change: transform;
}
.wol-btn-text__char::before {
    content: attr(data-char);
    position: absolute;
    top: 100%;
    left: 0;
    transition: transform var(--dur-normal) var(--ease-out);
}
.wol-btn-text__char--space {
    width: 0.28em;
}

body .btn .elementor-button:hover .wol-btn-text__char,
body .has-arrow .elementor-button:hover .wol-btn-text__char,
body a.btn:hover .wol-btn-text__char,
body button.btn:hover .wol-btn-text__char {
    transform: translateY(-100%);
}
body .btn .elementor-button:hover .wol-btn-text__char::before,
body .has-arrow .elementor-button:hover .wol-btn-text__char::before,
body a.btn:hover .wol-btn-text__char::before,
body button.btn:hover .wol-btn-text__char::before {
    transform: translateY(0);
}


/* ============================================
   ARROW (injected by JS into .has-arrow buttons)
   ============================================ */
.wol-btn-arrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.3em;
    height: 1.3em;
    margin-left: var(--space-4xs);
    transition: transform var(--dur-fast) var(--ease-snap);
    flex-shrink: 0;
}
.wol-btn-arrow svg {
    width: 100%;
    height: 100%;
    display: block;
    stroke: currentColor;
    fill: none;
    stroke-width: 1.5;
}
body .has-arrow .elementor-button:hover .wol-btn-arrow,
body a.btn.has-arrow:hover .wol-btn-arrow,
body button.btn.has-arrow:hover .wol-btn-arrow {
    transform: translateX(4px);
}
body a.btn.has-arrow .elementor-button-content-wrapper {
    gap: 0 !important;
}


/* ============================================
   HEADING / DUMMY BUTTON — static
   ============================================ */
body .btn-heading .elementor-heading-title,
body span.btn-heading {
    cursor: default;
    pointer-events: none;
}
body .btn-heading .elementor-heading-title:hover,
body span.btn-heading:hover {
    background-color: var(--color-granite) !important;
    color: var(--color-white) !important;
}


/* ============================================
   FOCUS — suppress browser default ring on all buttons/links
   ============================================ */
button:focus-visible,
a:focus-visible,
[role="button"]:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
    outline: none !important;
    box-shadow: none !important;
}


/* ============================================
   REDUCED MOTION
   ============================================ */
@media (prefers-reduced-motion: reduce) {
    .wol-btn-text__char,
    .wol-btn-text__char::before,
    .wol-btn-arrow {
        transition: none !important;
    }
    body .btn .elementor-button:hover .wol-btn-text__char,
    body .has-arrow .elementor-button:hover .wol-btn-text__char,
    body a.btn:hover .wol-btn-text__char,
    body button.btn:hover .wol-btn-text__char {
        transform: none;
    }
}


/* ============================================================
   LENIS — recommended baseline
   ============================================================ */
html.lenis,
html.lenis body {
    height: auto;
}
.lenis.lenis-smooth {
    scroll-behavior: auto !important;
}
.lenis.lenis-smooth [data-lenis-prevent] {
    overscroll-behavior: contain;
}
.lenis.lenis-stopped {
    overflow: clip;
}
.lenis.lenis-smooth iframe {
    pointer-events: none;
}


/* ============================================================
   HERO H1 — initial state for word-stagger animation
   ============================================================ */
body .wol-hero-h1 .elementor-heading-title .wol-word {
    display: inline-block;
    opacity: 0;
    filter: blur(12px);
    will-change: opacity, filter;
    transform: translateZ(0);
}
@media (max-width: 1024px) {
    body .wol-hero-h1 .elementor-heading-title .wol-word {
        filter: blur(6px);
    }
}
@media (prefers-reduced-motion: reduce) {
    body .wol-hero-h1 .elementor-heading-title .wol-word {
        opacity: 1 !important;
        filter: none !important;
        transform: none !important;
    }
}


/* ============================================================
   SELECT DROPDOWNS — readable option list on Windows

   Form selects are styled light-on-dark to sit on the dark sections
   (Elementor sets color:#F2EFEC, background:#1E242021). macOS and iOS
   draw the open dropdown natively and ignore that CSS, so it looks
   right. Windows Chrome instead renders the popup with the system's
   white background while still inheriting the control's colour —
   near-white text on white, i.e. unreadable.

   Options therefore need their own opaque colour pairing. Also pin
   color-scheme so a machine in OS dark mode does not re-tint the
   popup underneath us.
   ============================================================ */
body select {
    color-scheme: light;
}
body select option,
body select optgroup {
    color: var(--color-carbon-black);
    background-color: var(--color-white);
}