/* ============================================================
   ACTIV8 — Global Elements
   Shared structural styles used across multiple widgets.
   Always uses tokens from variables.css.
   ============================================================ */

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


/* ── Container ───────────────────────────────────────────────
   Elementor controls page-level containers.
   Use .activ8-container inside widgets that need an inner bound.
   ─────────────────────────────────────────────────────────── */

.activ8-container {
    max-width: var(--container-max);
    padding-left: var(--container-pad-x);
    padding-right: var(--container-pad-x);
    margin-left: auto;
    margin-right: auto;
    width: 100%;
}


/* ── Buttons ─────────────────────────────────────────────────
   Base:     .activ8-btn               solid primary (orange bg, white text)
   Variants: .activ8-btn--outline      transparent bg, primary-coloured border + text
             .activ8-btn--white        white bg, primary-coloured text (for coloured backgrounds)
             .activ8-btn--dark         dark bg, white text
   Size:     .activ8-btn--sm           smaller padding
             .activ8-btn--full         full width (opt-in — not applied globally on mobile)
   ─────────────────────────────────────────────────────────── */

.activ8-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 14px 36px;
    border-radius: var(--radius-md);
    border: 2px solid transparent;
    background: var(--btn-bg);
    color: var(--btn-color);
    font-family: var(--font-body);
    font-size: var(--text-base);
    font-weight: 600;
    line-height: 1;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    transition: opacity var(--transition), background var(--transition), color var(--transition), border-color var(--transition);
}

.activ8-btn:hover {
    opacity: 0.88;
    text-decoration: none;
    color: var(--btn-color);
}

/* Outline — transparent background, border + text in theme colour */
.activ8-btn--outline {
    background: transparent;
    border-color: var(--btn-bg);
    color: var(--btn-bg);
}

.activ8-btn--outline:hover {
    background: var(--btn-bg);
    color: var(--btn-color);
    opacity: 1;
}

/* White — for use on orange / coloured backgrounds */
.activ8-btn--white {
    background: var(--color-white);
    border-color: var(--color-white);
    color: var(--btn-bg);
}

.activ8-btn--white:hover {
    opacity: 0.88;
    color: var(--btn-bg);
}

/* Dark — dark background, white text */
.activ8-btn--dark {
    background: var(--color-black);
    border-color: var(--color-black);
    color: var(--color-white);
}

.activ8-btn--dark:hover {
    opacity: 0.82;
    color: var(--color-white);
}

/* Size modifier */
.activ8-btn--sm {
    padding: 10px 24px;
    font-size: var(--text-sm);
    border-radius: var(--radius-sm);
}

/* Full width — opt-in, not forced on mobile */
.activ8-btn--full {
    width: 100%;
}


/* ── Section heading ─────────────────────────────────────────
   Shared heading pattern used by most widget sections.
   ─────────────────────────────────────────────────────────── */

.activ8-section-heading {
    font-size: clamp(var(--text-2xl), 3.5vw, var(--text-3xl));
    font-weight: 700;
    line-height: var(--leading-tight);
    color: var(--color-black);
    margin: 0 0 var(--space-md);
}

.activ8-section-subheading {
    font-size: var(--text-md);
    line-height: var(--leading-normal);
    color: var(--color-grey-dark);
    margin: 0 0 var(--space-lg);
}


/* ── Utility ─────────────────────────────────────────────────*/

.activ8-sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}


/* ── Responsive ──────────────────────────────────────────────*/

@media (max-width: 1024px) {
    .activ8-container {
        padding-left: 40px;
        padding-right: 40px;
    }
}

@media (max-width: 767px) {
    .activ8-container {
        padding-left: var(--container-pad-x-sm);
        padding-right: var(--container-pad-x-sm);
    }
}

.gform_confirmation_message {
    text-align: center;
}