/*
 * WePlay Foundation Styles
 * Shared: variables, base, layouts, core components
 *
 * @package WePlay
 */

/* =============================================
   VARIABLES
   ============================================= */

:root {
    /* Brand colors */
    --color-primary: var(--primary, #3b82f6);
    --color-primary-soft: var(--primary-ultra-light, #eff6ff);
    --color-primary-strong: var(--primary-dark, #1d4ed8);
    --color-secondary: var(--secondary, #64748b);
    --color-accent: var(--accent, #f59e0b);

    /* Backgrounds */
    --color-bg-body: var(--body-bg-color, #ffffff);
    --color-bg-soft: var(--bg-light, #f8fafc);

    /* Text */
    --color-text: var(--body-color, #334155);
    --color-text-strong: var(--heading-color, #0f172a);
    --color-text-muted: var(--text-dark-muted, #64748b);
    --color-text-inverted: var(--text-light, #ffffff);

    /* Shadows */
    --shadow-soft: 0 10px 25px rgba(0, 0, 0, 0.1);
    --shadow-strong: 0 20px 40px rgba(0, 0, 0, 0.15);

}

/* =============================================
   BASE
   ============================================= */

/* Lenis smooth scroll */
html.lenis, html.lenis body {
    height: auto;
}

.lenis.lenis-smooth {
    scroll-behavior: auto;
}

body {
    margin: 0;
}

/* =============================================
   SECTION (shared wrapper)
   ============================================= */

.bg--light {
    background-color: var(--bg-light);
}

.bg--primary {
    background-color: var(--primary);
    --relative-heading-color: var(--bg-dark-heading, #fff);
    --icon-scheme: var(--bg-dark-icon);
}

.bg--dark {
    background-color: var(--base);
}

.bg--black {
    background-color: #000;
    color: var(--bg-ultra-dark-text);
}

.section--full-screen {
    min-height: 100vh;
    align-content: center;
    padding-block: 0;
}

/* Full Screen Vertical Alignment Options */
.section--full-screen.section--valign-top {
    align-content: start;
}

.section--full-screen.section--valign-middle {
    align-content: center;
}

.section--full-screen.section--valign-bottom {
    align-content: end;
}

/* Background Type - Boxed (constrains background and adds border radius) */
.section--bg-boxed {
    background: transparent !important;
}

.section--bg-boxed .section__inner {
    background: var(--color-bg-body);
    border-radius: var(--radius-l);
    padding: var(--section-padding-block) var(--space-s);
}

/* Boxed with backgrounds */
.section--bg-boxed.bg--light .section__inner {
    background: var(--color-bg-soft);
}

.section--bg-boxed.bg--dark .section__inner {
    background: var(--base);
}

.section--bg-boxed.bg--primary .section__inner {
    background: var(--primary);
}

.section--bg-boxed.bg--black .section__inner {
    background: #000;
}

.section--bg-boxed.section--full-screen .section__inner {
    padding: var(--space-s);
    min-height: calc(100vh - (var(--gutter) * 2));
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* =============================================
   LAYOUTS
   ============================================= */

.stack {
    display: flex;
    flex-direction: column;
    gap: var(--space-s);
    width: 100%;
}

.content-gap { gap: var(--content-gap, var(--space-m)); }
.stack--center {
    align-items: center;
    text-align: center;
}

.cluster {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-xs);
    align-items: center;
}

.cluster--center { justify-content: center; }
.cluster--between { justify-content: space-between; }
.cluster--right { justify-content: flex-end; }

.grid {
    display: grid;
    gap: var(--space-m);
}

@media (min-width: 768px) {
    .grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (min-width: 1024px) {
    .grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.split {
    display: grid;
    gap: var(--space-m);
    z-index: 3;
}

@media (min-width: 768px) {
    .split {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        align-items: center;
    }
    .split--reverse {
        direction: rtl;
    }
    .split--reverse > * {
        direction: ltr;
    }

    .split--flex-reverse {
        display: flex;
        flex-direction: column-reverse;
        align-items: center;
    }

}

.content-narrow {
    max-width: 64rem;
}

.content--narrow {
    max-width: 100rem !important;
    margin-inline: auto;
}

/* =============================================
   SECTION BACKGROUND IMAGE (figure layer)
   ============================================= */

/* Needed for absolute bg layering */
.section {
    position: relative;
    overflow: hidden;
}

.section--no-pt {
    padding-top: 0 !important;
}

.section--no-pb {
    padding-bottom: 0 !important;
}

/* Background figure */
.section__bg {
    position: absolute;
    inset: 0;
    z-index: 1;
    margin: 0;
    pointer-events: none;
}

/* Background image fills section */
.section__bg-img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    object-position: center;
}

/* Optional readability overlay (default) */
.section--has-bg::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(
        to bottom,
        rgba(255,255,255,0.85),
        rgba(255,255,255,0.65)
    );
}

/* Background image overlays per background type */
.section--has-bg.bg--light::before {
    background: linear-gradient(
        to bottom,
        rgba(217, 217, 217, 0.85),
        rgba(217, 217, 217, 0.65)
    );
}

.section--has-bg.bg--dark::before {
    background: linear-gradient(
        to bottom,
        rgba(0,0,0,0.85),
        rgba(0,0,0,0.50)
    );
}

.section--has-bg.bg--primary::before {
    background: linear-gradient(
        to bottom,
        color-mix(in srgb, var(--primary) 85%, transparent),
        color-mix(in srgb, var(--primary) 50%, transparent)
    );
}

.section--has-bg.bg--black::before {
    background: linear-gradient(
        to bottom,
        rgba(0,0,0,0.90),
        rgba(0,0,0,0.60)
    );
}

/* =============================================
   HEADING GROUP (shared component)
   ============================================= */

.heading-group {
    display: flex;
    flex-direction: column;
    gap: var(--content-gap);
}

.heading-group__top {
    display: flex;
    flex-direction: column;
    gap: calc(var(--content-gap) * 0.25);
}

.heading-group:last-child {
    margin-bottom: 0;
}

.heading-group--center {
    text-align: center;
    max-width: 64rem;
    margin-inline: auto;
}


.heading-group__title:last-child {
    margin-bottom: 0;
}

.heading-group__subtitle {
    font-size: var(--text-m);
    font-weight: 600;
    color: var(--base-dark);
}

.heading-group__eyebrow {
    color: var(--text-dark);
    font-weight: 600;
    font-family: 'Kinetika';
    font-size: var(--h4);
    opacity: 0.5;
}

.bg--dark .heading-group__eyebrow {
    color: var(--text-light);
}

.bg--black .heading-group__eyebrow {
    color: var(--text-light);
}

/* =============================================
   BUTTON (shared component)
   ============================================= */

.btn--text {
    padding-inline: 0;
    color: var(--color-primary);
}

.btn--text:hover {
    text-decoration: underline;
}

.btn--sm {
    padding: 0.7rem 1.4rem;
    font-size: var(--text-xs);
}

.btn:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 2px;
}

/* Button overrides for dark/brand sections */
.bg--primary .btn--primary {
    background: var(--color-bg-body);
    color: var(--color-primary);
}

/* =============================================
   LIST (shared component)
   ============================================= */

.list {
    list-style: none;
    padding: 0;
    margin: 0;
}

/* =============================================
   RICH TEXT (shared component)
   ============================================= */


.rich-text ul,
.rich-text ol {
    margin: 0 0 var(--space-s);
    padding-left: var(--space-s);
}

.rich-text li {
    margin-bottom: 0.8rem;
}

.rich-text a {
    color: var(--color-primary);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.rich-text a:hover {
    color: var(--color-primary-strong);
}

/* =============================================
   MEDIA (shared component)
   ============================================= */

.media {
    position: relative;
    overflow: hidden;
    border-radius: 0;
    margin: 0;
}

.media img,
.media video {
    display: block;
    width: 100%;
    height: auto;
}

.media--rounded {
    border-radius: var(--radius-l);
}

.media--shadow {
    box-shadow: var(--shadow-strong);
}

.media--aspect-16-9 { aspect-ratio: 16 / 9; }
.media--aspect-4-3 { aspect-ratio: 4 / 3; }
.media--aspect-1-1 { aspect-ratio: 1 / 1; }

.media--aspect-16-9 img,
.media--aspect-4-3 img,
.media--aspect-1-1 img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* =============================================
   CARD (shared component)
   ============================================= */

.card {
    position: relative;
    background: var(--color-bg-body);
    border-radius: var(--radius-m);
    border: var(--border);
    padding: var(--space-s);
    text-decoration: none;
    color: inherit;
    transition: box-shadow var(--transition), transform var(--transition);
}

.card--hover:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-strong);
}

.card--elevated {
    box-shadow: var(--shadow-soft);
    border: none;
}

.card--outline {
    background: transparent;
    box-shadow: none;
    border: calc(var(--border-size) * 2) var(--border-style) var(--border-color-dark);
}

.card--highlight {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 1px var(--color-primary), var(--shadow-soft);
}

.card__badge {
    position: absolute;
    top: var(--space-xs);
    right: var(--space-xs);
    background: var(--color-accent);
    color: var(--color-text-inverted);
    font-size: var(--text-xs);
    font-weight: 600;
    padding: 0.4rem 0.8rem;
    border-radius: var(--radius-s);
}

.card__icon {
    font-size: var(--text-xxl);
    margin-bottom: var(--space-xs);
    color: var(--color-primary);
}

.card__number {
    font-size: calc(var(--text-xxl) * 1.2);
    font-weight: 700;
    color: var(--color-primary);
    margin-bottom: 0.8rem;
}

.card__image {
    margin: calc(var(--space-s) * -1);
    margin-bottom: var(--space-s);
}

.card__image img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: var(--radius-m) var(--radius-m) 0 0;
}

.card__title {
    font-size: var(--text-l);
    margin: 0 0 0.8rem;
    color: var(--base);
}

.card__subtitle {
    font-size: var(--text-s);
    color: var(--base-dark);
    margin: 0 0 0.8rem;
}

.card__content {
    font-size: var(--text-s);
}

/* =============================================
   FAQ (shared component)
   ============================================= */

.faq__item {
    border-radius: var(--radius-m);
    border: var(--border);
    background: var(--color-bg-body);
    margin-bottom: var(--space-xs);
}

.faq__item:last-child {
    margin-bottom: 0;
}

.faq__question {
    width: 100%;
    padding: var(--space-s);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-xs);
    background: none;
    border: none;
    cursor: pointer;
    text-align: left;
    font: inherit;
    font-weight: 500;
    color: var(--base);
}

.faq__icon {
    font-size: var(--text-l);
    transition: transform var(--transition);
    flex-shrink: 0;
}

.js-accordion.is-open .faq__icon {
    transform: rotate(45deg);
}

.js-accordion-panel {
    max-height: 0;
    overflow: hidden;
    transition: max-height var(--transition);
}

.faq__answer {
    padding: 0 var(--space-s) var(--space-s);
    color: var(--base-dark);
}

/* =============================================
   GRID OVERRIDES
   ============================================= */

.grid--1-2 {
    display: grid;
    grid-template-columns: var(--grid-1-2);
    grid-template-rows: 1fr;
}

@media (max-width: 992px) {
    .grid--1-2 {
        grid-template-columns: var(--grid-1);
    }
}

.grid--2-1 {
    display: grid;
    grid-template-columns: var(--grid-2-1);
    grid-template-rows: 1fr;
}

@media (max-width: 992px) {
    .grid--2-1 {
        grid-template-columns: var(--grid-1);
    }
}

.grid--2 {
    display: grid;
    grid-template-columns: var(--grid-2);
    grid-template-rows: 1fr;
}

@media (max-width: 768px) {
    .grid--2 {
        grid-template-columns: var(--grid-1);
    }
}

.grid--3 {
    display: grid;
    grid-template-columns: var(--grid-3);
    grid-template-rows: 1fr;
}

@media (max-width: 992px) {
    .grid--3 {
        grid-template-columns: var(--grid-2);
    }
}

@media (max-width: 768px) {
    .grid--3 {
        grid-template-columns: var(--grid-1);
    }
}

.grid--4 {
    display: grid;
    grid-template-columns: var(--grid-4);
    grid-template-rows: 1fr;
}

@media (max-width: 992px) {
    .grid--4 {
        grid-template-columns: var(--grid-2);
    }
}

@media (max-width: 768px) {
    .grid--4 {
        grid-template-columns: var(--grid-1);
    }
}

/* =============================================
   PLAY BUTTON
   ============================================= */

.play-btn {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    z-index: 3;
    transition: transform 0.3s ease, opacity 0.3s ease;
}

.play-btn:hover {
    transform: translate(-50%, -50%) scale(1.1);
}

.play-btn__icon {
    display: block;
    width: 78px;
    height: 78px;
}

@media (max-width: 768px) {
    .play-btn__icon {
        width: 64px;
        height: 64px;
    }
}

/* =============================================
   PAGE TRANSITION OVERLAY
   Slide-down reveal on page load, slide-up cover on navigate.
   ============================================= */

.page-transition {
    position: fixed;
    inset: 0;
    z-index: 99999;
    background: var(--page-transition-bg, var(--primary));
    transform: translateY(0);
    pointer-events: none;
}

/* After reveal, move fully off-screen so iOS can't intercept touches */
.page-transition--done {
    display: none !important;
}

/* On load: overlay slides down to reveal page */
.page-transition--reveal {
    animation: pageReveal 0.6s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

/* On navigate: overlay slides up to cover page */
.page-transition--cover {
    transform: translateY(100%);
    animation: pageCover 0.5s cubic-bezier(0.4, 0, 0.2, 1) forwards;
    pointer-events: all;
}

@keyframes pageReveal {
    from { transform: translateY(0); }
    to   { transform: translateY(-100%); }
}

@keyframes pageCover {
    from { transform: translateY(100%); }
    to   { transform: translateY(0); }
}

/* =============================================
   SECTION FADE-IN-UP
   Applied to direct children of the second section (above-the-fold).
   Stagger via --fade-in-delay custom property set by JS.
   ============================================= */

.section-child--fade-in-up {
    opacity: 0;
    transform: translateY(30px);
    animation: sectionFadeInUp 0.8s ease-out var(--fade-in-delay, 0.6s) forwards;
}

@keyframes sectionFadeInUp {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* =============================================
   REVEAL-UP ANIMATION
   Clip-path slide-up with stagger.
   Usage: add .reveal-up to elements. Stagger children
   with .reveal-up--stagger on the parent.
   ============================================= */

.reveal-up {
    clip-path: inset(100% 0 0 0);
    transition: clip-path 0.8s cubic-bezier(0.16, 1, 0.3, 1);
    transition-delay: var(--reveal-delay, 0s);
    will-change: clip-path;
}

.reveal-up.is-revealed {
    clip-path: inset(0 0 0 0);
}

/* Fast variant: shorter duration for text */
.reveal-up-fast {
    clip-path: inset(100% 0 0 0);
    transition: clip-path 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    transition-delay: var(--reveal-delay, 0s);
    will-change: clip-path;
}

.reveal-up-fast.is-revealed {
    clip-path: inset(0 0 0 0);
}

/* Stagger children: parent gets .reveal-up--stagger */
.reveal-up--stagger > .reveal-up:nth-child(1) { --reveal-delay: 0s; }
.reveal-up--stagger > .reveal-up:nth-child(2) { --reveal-delay: 0.1s; }
.reveal-up--stagger > .reveal-up:nth-child(3) { --reveal-delay: 0.2s; }
.reveal-up--stagger > .reveal-up:nth-child(4) { --reveal-delay: 0.3s; }
.reveal-up--stagger > .reveal-up:nth-child(5) { --reveal-delay: 0.4s; }
.reveal-up--stagger > .reveal-up:nth-child(6) { --reveal-delay: 0.5s; }
.reveal-up--stagger > .reveal-up:nth-child(7) { --reveal-delay: 0.6s; }
.reveal-up--stagger > .reveal-up:nth-child(8) { --reveal-delay: 0.7s; }

/* =============================================
   ACCESSIBILITY
   ============================================= */

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }

    .reveal-up,
    .reveal-up-fast {
        clip-path: none !important;
    }

    .section-child--fade-in-up {
        opacity: 1 !important;
        transform: none !important;
        animation: none !important;
    }

    .page-transition {
        display: none !important;
    }
}

/* =============================================
   INLINE UTILITIES
   ============================================= */

.primary-color {
    color: var(--primary);
}

/* =============================================
   WPFORMS OVERRIDES
   High specificity to override WPForms defaults.
   ============================================= */

div.wpforms-container .wpforms-form input[type="text"],
div.wpforms-container .wpforms-form input[type="email"],
div.wpforms-container .wpforms-form input[type="tel"],
div.wpforms-container .wpforms-form input[type="url"],
div.wpforms-container .wpforms-form input[type="number"],
div.wpforms-container .wpforms-form input[type="password"],
div.wpforms-container .wpforms-form input[type="date"],
div.wpforms-container .wpforms-form textarea,
div.wpforms-container .wpforms-form select {
    border: var(--border-light);
    border-radius: var(--radius-l);
    background: var(--bg-light);
    font-size: calc(var(--text-s) * 1.05);
    font-family: inherit;
    color: var(--base-dark);
    padding: calc(var(--space-xs) / 2) 1rem;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
    outline: none;
    box-shadow: none;
}

div.wpforms-container .wpforms-form select {
    appearance: none;
    -webkit-appearance: none;
    padding-right: 2.8rem;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%23333' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round' fill='none'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 1rem center;
    background-size: 12px;
}

div.wpforms-container .wpforms-form input:focus,
div.wpforms-container .wpforms-form textarea:focus,
div.wpforms-container .wpforms-form select:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--primary) 15%, transparent);
}

div.wpforms-container .wpforms-form textarea {
    min-height: 120px;
    resize: vertical;
}

div.wpforms-container .wpforms-form .wpforms-field-label {
    color: var(--text-dark);
    font-weight: 600;
    font-size: var(--text-s);
    padding-bottom: 0.6rem;
}

div.wpforms-container .wpforms-form .wpforms-field-label-inline {
    color: var(--base-dark);
    font-weight: 600;
    font-size: var(--text-xs);
}

div.wpforms-container .wpforms-form .wpforms-field-sublabel {
    font-size: var(--text-xs);
    color: var(--text-dark-muted);
}

div.wpforms-container .wpforms-form ul {
    padding-left: var(--space-xs);
    margin-top: 4px;
    display: flex;
    flex-direction: column;
    row-gap: 6px;
    list-style: none;
}

div.wpforms-container .wpforms-form .wpforms-submit-container button[type="submit"] {
    font-family: inherit;
    font-size: var(--text-s);
    font-weight: 600;
    padding: var(--space-xs) var(--space-m);
    border: 2px solid var(--primary);
    border-radius: var(--radius-l);
    background: var(--primary);
    color: var(--base);
    cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

div.wpforms-container .wpforms-form .wpforms-submit-container button[type="submit"]:hover {
    background: var(--base);
    color: var(--primary);
    border-color: var(--base);
}

div.wpforms-container .wpforms-form ::placeholder {
    color: var(--text-dark-muted);
    opacity: 0.8;
}

/* Checkboxes & radios */
div.wpforms-container .wpforms-form .wpforms-field-checkbox ul li,
div.wpforms-container .wpforms-form .wpforms-field-radio ul li {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

div.wpforms-container .wpforms-form .wpforms-field-checkbox input[type="checkbox"],
div.wpforms-container .wpforms-form .wpforms-field-radio input[type="radio"] {
    appearance: none;
    -webkit-appearance: none;
    width: 18px;
    height: 18px;
    min-width: 18px;
    border: var(--border-light);
    background: var(--bg-light);
    cursor: pointer;
    margin: 0;
    transition: background 0.15s ease, border-color 0.15s ease;
}

div.wpforms-container .wpforms-form .wpforms-field-checkbox input[type="checkbox"] {
    border-radius: 4px;
}

div.wpforms-container .wpforms-form .wpforms-field-radio input[type="radio"] {
    border-radius: 50%;
}

div.wpforms-container .wpforms-form .wpforms-field-checkbox input[type="checkbox"]:checked {
    background: var(--primary);
    border-color: var(--primary);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='10' viewBox='0 0 12 10'%3E%3Cpath d='M1 5L4.5 8.5L11 1.5' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' fill='none'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 12px;
}

div.wpforms-container .wpforms-form .wpforms-field-radio input[type="radio"]:checked {
    background: var(--primary);
    border-color: var(--primary);
    box-shadow: inset 0 0 0 3px var(--bg-light);
}