/**
 * Single ave_event template styles.
 *
 * Matches the existing Achieve Vitality event-page brand identity exactly:
 *   - Hero background:   #094E9B   (kit "BRAND - Main - Dark", navy)
 *   - Text / icons:      #FFFFFF   (white)
 *   - Image border + CTA: #FF5A3C  (the brand orange used across post-1300, post-1318,
 *                                    post-3187 — the site's vibrant accent for image
 *                                    borders and primary CTAs)
 *   - Form input bg:     #E7E7E7   (matches the old Elementor template's input styling)
 *   - Form input border: rgba(0,0,0,0.38)
 *   - Font family:       Montserrat (already loaded sitewide by the Elementor kit)
 *   - Title:             UPPERCASE, 600 weight, fluid sizing via clamp()
 *
 * Loaded only on is_singular('ave_event') by AVE_Template_Loader.
 * Scoped under .ave-event so it never leaks into other pages.
 *
 * @package CUSTOM_AV_Events
 */

/* ====================================================================
   Design tokens — scoped to .ave-event so they can't collide with
   Elementor's own --e-* vars. One place to restyle later.
   ==================================================================== */
.ave-event {
    --ave-bg-navy:        #094E9B;
    --ave-bg-navy-deep:   #07407F;       /* gradient edge — darker navy for vignette */
    --ave-text:           #FFFFFF;
    --ave-text-muted:     rgba(255, 255, 255, 0.82);
    --ave-accent:         #cc4830;       /* exact match to OLD page CTA + image border (puppeteer-measured) */
    --ave-accent-hover:   #b13e29;
    --ave-input-bg:       #E7E7E7;
    --ave-input-border:   rgba(0, 0, 0, 0.38);
    --ave-input-text:     #000000;
    --ave-radius:         10px;
    --ave-radius-input:   5px;

    color: var(--ave-text);
    font-family: 'Montserrat', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    line-height: 1.4;
    /* Background is now owned by body.single-ave_event (in ave-chrome.css) so
       the header + main + footer all sit on one continuous navy. .ave-event
       stays transparent and just claims vertical real estate. */
    background: transparent;
    min-height: auto;
}

.ave-event *,
.ave-event *::before,
.ave-event *::after {
    box-sizing: border-box;
}

/* ====================================================================
   Page shell — centered column, padded
   ==================================================================== */
.ave-event-shell {
    max-width: 1240px;
    margin: 0 auto;
    padding: 7.5dvh 5% 10dvh;
    display: flex;
    flex-direction: column;
    gap: 2.5dvh;
    text-align: center;
}

/* ====================================================================
   Type label ("Online Seminar") — PIXEL-MATCHED to the OLD page.
   At 1440px viewport the OLD page renders this at 42.07px (puppeteer-measured),
   which equals the kit's h2 clamp: clamp(1.802rem, 1.3619rem + 1.4085vw, 3.052rem).
   We replicate that exact clamp.
   ==================================================================== */
.ave-event-type {
    font-size: clamp(1.802rem, 1.3619rem + 1.4085vw, 3.052rem);
    font-weight: 400;
    color: var(--ave-text);
    margin: 0;
    letter-spacing: 0;
    line-height: 1;
}

/* ====================================================================
   Title — PIXEL-MATCHED. OLD page uses `font-size: 4vw` exactly
   (puppeteer measured 57.6px at 1440 = 4vw). We use vw (not dvw) for
   parity, with clamp min/max for sub-tablet and ultra-wide displays.
   Selector includes `h1` to outrank Elementor kit's `.elementor-kit-32 h1`
   (specificity 0,1,1) which would otherwise force the kit's default h1 size.
   ==================================================================== */
.ave-event h1.ave-event-title {
    font-family: 'Montserrat', sans-serif;
    font-size: clamp(2rem, 4vw, 5rem);
    font-weight: 600;
    text-transform: uppercase;
    line-height: 1;
    color: var(--ave-text);
    margin: 0 auto;
    max-width: 95%;
    text-wrap: balance;     /* even line lengths so the title flows nicely */
}

/* ====================================================================
   Meta row — date + timezone STACKED (vertical), each on its own row,
   centered as a group. Sizing matches OLD page's 1.5vw.
   ==================================================================== */
.ave-event-meta {
    display: flex;
    flex-direction: column;        /* stack vertically */
    justify-content: center;
    align-items: center;
    gap: 8px;
    margin: 0 auto;
    max-width: 100%;
}

.ave-event-meta-cell {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    font-size: clamp(0.95rem, 1.5vw, 1.5rem);   /* matches OLD page's 1.5vw = 21.6px @ 1440 */
    font-weight: 400;
    color: var(--ave-text);
    white-space: nowrap;
}

.ave-event-meta-icon {
    display: inline-flex;
    width: 1.4em;
    height: 1.4em;
    flex-shrink: 0;
    color: var(--ave-text);
}

.ave-event-meta-icon svg {
    width: 100%;
    height: 100%;
    stroke: currentColor;
}

.ave-event-meta-text {
    text-align: left;
}

/* ====================================================================
   Grid — image LEFT, form RIGHT on desktop. Stacked on mobile.
   ==================================================================== */
.ave-event-grid {
    display: grid;
    grid-template-columns: 60% 40%;
    gap: 0 2.5dvw;
    align-items: start;
    width: 100%;
    margin-top: 1.5dvh;
}

.ave-event-image-col,
.ave-event-form-col {
    min-width: 0;   /* prevent grid blowout */
}

/* ====================================================================
   Image — orange border, 10px radius, 16:9 aspect
   ==================================================================== */
.ave-event-image {
    aspect-ratio: 16 / 9;
    overflow: hidden;
    border-radius: var(--ave-radius);
    border: 2px solid var(--ave-accent);
    background: #000;
    line-height: 0;       /* eliminate the descender gap under <img> */
}

.ave-event-image-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* ====================================================================
   Type-specific blocks (in-person address, phone call-in)
   Live BELOW the image so the cover stays the focal point.
   ==================================================================== */
.ave-event-block {
    margin-top: 20px;
    padding: 20px 24px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: var(--ave-radius);
    text-align: left;
    color: var(--ave-text);
}

.ave-event-block h3 {
    color: var(--ave-text);
    margin: 0 0 10px;
    font-size: 1.25rem;
    font-weight: 600;
}

.ave-event-block address {
    font-style: normal;
    line-height: 1.6;
}

.ave-event-block p {
    margin: 0 0 8px;
}

.ave-event-block p:last-child {
    margin-bottom: 0;
}

.ave-event-block a {
    color: var(--ave-accent);
    text-decoration: none;
    font-weight: 600;
}

.ave-event-block a:hover {
    text-decoration: underline;
}

/* ====================================================================
   Registration form — heading + Fluent Form + privacy notice
   ==================================================================== */
/* Selector includes `h2` to outrank Elementor kit's `.elementor-kit-32 h2`
   (specificity 0,1,1) which would otherwise force ~42px on this heading. */
.ave-event h2.ave-event-register-heading {
    font-family: 'Montserrat', sans-serif;
    font-size: clamp(0.9rem, 1.25vw, 1.25rem);   /* matches OLD page exactly = 18px @ 1440 */
    font-weight: 300;
    color: var(--ave-text);
    margin: 0 0 1.5dvh;
    text-align: center;
    line-height: 1.25;
    text-wrap: balance;     /* even line lengths so it doesn't break awkwardly */
}

.ave-event-form-wrap {
    margin: 0;
}

.ave-event-privacy {
    font-size: clamp(0.75rem, 1vw, 1rem);    /* matches OLD page's 1vw exactly = 14.4px @ 1440 */
    font-weight: 300;
    color: var(--ave-text);
    margin: 1dvh 0 0;
    text-align: center;
    line-height: 1.4;
}

/* Registration closed / passed / full block */
.ave-event-closed,
.ave-event-ondemand {
    text-align: center;
    padding: 32px 24px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: var(--ave-radius);
    color: var(--ave-text);
}

.ave-event-closed h2,
.ave-event-ondemand h2 {
    color: var(--ave-text);
    margin: 0 0 12px;
    font-size: clamp(1.25rem, 1rem + 0.6vw, 1.75rem);
    text-transform: uppercase;
}

.ave-event-closed p,
.ave-event-ondemand p {
    color: var(--ave-text-muted);
    margin: 0;
}

/* ====================================================================
   Buttons — matches site brand orange CTA
   ==================================================================== */
.ave-btn {
    display: inline-block;
    padding: 16px 32px;
    font-family: 'Montserrat', sans-serif;
    font-size: clamp(0.95rem, 0.85rem + 0.3vw, 1.125rem);
    font-weight: 600;
    line-height: 1.2;
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    border-radius: var(--ave-radius-input);
    border: 0;
    cursor: pointer;
    transition: background-color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}

.ave-btn-primary {
    background: var(--ave-accent);
    color: #fff;
}

.ave-btn-primary:hover,
.ave-btn-primary:focus {
    background: var(--ave-accent-hover);
    transform: translateY(-1px);
    box-shadow: 0 6px 20px rgba(255, 90, 60, 0.35);
    color: #fff;
    text-decoration: none;
}

/* ====================================================================
   Fluent Forms — DELIBERATELY UN-STYLED.
   Earlier versions had ~80 lines of overrides here trying to match the
   old Elementor template's form styling (gray inputs, orange submit, etc.).
   The user's feedback: "the natural form embed is better than what is
   there now — something is making it bad."
   So we now defer 100% to Fluent Forms' built-in `fluentform-public-default.css`.
   If/when we want to restyle, add scoped rules under `.ave-event .fluentform`
   one at a time and test each one against the form's natural layout.
   ==================================================================== */

/* ====================================================================
   Responsive — mobile + tablet
   ==================================================================== */
@media (max-width: 1024px) {
    .ave-event-shell {
        padding: 6dvh 5% 8dvh;
    }
    .ave-event-grid {
        grid-template-columns: 55% 45%;
        gap: 0 2vw;
    }
    /* At tablet width the timezone strip won't fit on one row with the date —
       let them stack vertically and shrink slightly so they don't overflow. */
    .ave-event-meta {
        flex-wrap: wrap;
        flex-direction: column;
        gap: 6px;
    }
    .ave-event-meta-cell {
        font-size: clamp(0.85rem, 1.6vw, 1.125rem);
    }
}

@media (max-width: 767px) {
    .ave-event-shell {
        padding: 6dvh 6% 8dvh;
        gap: 2dvh;
    }
    .ave-event-title {
        max-width: 100%;
        /* font-size handled by clamp() — no override needed */
    }
    .ave-event-meta {
        flex-direction: column;
        gap: 8px;
    }
    .ave-event-meta-cell {
        font-size: 0.95rem;
    }
    .ave-event-grid {
        grid-template-columns: 1fr;   /* stack vertically */
        gap: 3dvh 0;
    }
    .ave-event-block {
        padding: 16px;
    }
    .ave-event-register-heading {
        padding-top: 1dvh;
    }
}

@media (max-width: 480px) {
    .ave-event-shell {
        padding: 10dvh 6% 6dvh;
    }
    .ave-event-meta-cell {
        font-size: 0.85rem;
        gap: 8px;
    }
}