/**
 * Subscribe Section Styles
 * Handles newsletter signup form styling and A/B test visibility
 */

/* Wrapper overrides */
.wp-block-group:has(#section--subscribe),
#subscribe-section-wrapper {
    padding: 0 !important;
    margin: 0 !important;
    max-width: none !important;
    width: 100% !important;
}

/* A/B Test visibility control */
html[data-test-variant="control"] #section--subscribe {
    display: none !important;
}

html[data-test-variant="challenger"] #section--subscribe {
    display: block !important;
}

/* Hide Hustle popup for challenger variant */
html[data-test-variant="challenger"] #hustle-popup-id-1,
html[data-test-variant="challenger"] .hustle-popup,
html[data-test-variant="challenger"] .hustle-popup-mask,
html[data-test-variant="challenger"] .hustle-ui {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
}

/* Note: Scroll functionality is handled by JavaScript in functions.php
   which uses MutationObserver to actively prevent Hustle from blocking scroll */

/* Hide Gravity Forms AJAX iframe */
#gform_ajax_frame_5,
iframe[name^="gform_ajax_frame"] {
    display: none !important;
    visibility: hidden !important;
    position: absolute !important;
    left: -9999px !important;
}

/* Layout utilities */
.wrap--base {
    max-width: 1320px;
}

.push--center {
    margin-left: auto;
    margin-right: auto;
}

/* Section container */
#section--subscribe {
    background-color: #004b4e;
    background-image: url('../assets/images/asset__bg--pixels.png');
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    color: white;
    display: none !important;
    margin-top: 0;
    padding: 48px 4vw;
}

#section--subscribe .container--grid {
    display: grid;
    row-gap: 32px;
}

#section--subscribe .section__subheading {
    color: white;
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 1.6px;
    margin: 0 0 16px;
    text-transform: uppercase;
}

#section--subscribe .section__heading {
    color: white;
    font-size: 28px;
    font-weight: 500;
    margin: 0 0 12px;
}

#section--subscribe .section__content {
    color: white;
    margin: 0;
}

/* Form styles */
#section--subscribe .form--subscribe .gform_wrapper {
    margin: 0 !important;
}

#section--subscribe .form--subscribe .gform_body .gform_fields {
    display: grid !important;
    column-gap: 16px;
    row-gap: 16px;
    grid-template-columns: repeat( 2, 1fr );
    grid-template-areas:
        "first-name last-name"
        "email email";
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
}

#section--subscribe .form--subscribe .gform_body .gform_fields .gfield {
    margin: 0 !important;
    padding: 0 !important;
}

#section--subscribe .form--subscribe .gform_body .gform_fields .gfield:nth-child(1) {
    grid-area: first-name;
}

#section--subscribe .form--subscribe .gform_body .gform_fields .gfield:nth-child(2) {
    grid-area: last-name;
}

#section--subscribe .form--subscribe .gform_body .gform_fields .gfield:nth-child(3) {
    grid-area: email;
}

#section--subscribe .form--subscribe .gform_body .gform_fields .gfield input[type="text"],
#section--subscribe .form--subscribe .gform_body .gform_fields .gfield input[type="email"] {
    border: 0 none !important;
    border-radius: 6px !important;
    font-size: 17px !important;
    font-weight: 400 !important;
    line-height: 1.6 !important;
    padding: 12px 16px !important;
    transition: box-shadow 0.16s ease-out !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

/* Error states */
#section--subscribe .form--subscribe .gform_body .gform_fields .gfield.gfield_error input:placeholder-shown {
    box-shadow: 0 0 0 2px #FFBF3B inset !important;
}

#section--subscribe .form--subscribe .gform_body .gform_fields .gfield.gfield_error input:not(:placeholder-shown):not(:focus) {
    box-shadow: none !important;
}

#section--subscribe .form--subscribe .gfield.gfield_error input:not(:placeholder-shown) ~ .validation_message {
    display: none !important;
}

#section--subscribe .form--subscribe .gform_body .gform_fields .gfield input:focus {
    box-shadow: 0 0 0 2px #00CECD inset !important;
    background-color: #FFF !important;
    opacity: 1 !important;
    outline: none !important;
} 

#section--subscribe .form--subscribe label {
    display: block !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    margin: 0 0 6px !important;
    color: white !important;
}

#section--subscribe .form--subscribe .gfield_required_asterisk {
    color: #FFBF3B !important;
    font-weight: 500 !important;
    margin-left: 1px !important;
}

#section--subscribe .form--subscribe .gfield_description.validation_message {
    color: #FFBF3B !important;
}

#section--subscribe .form--subscribe .gform_footer {
    display: grid !important;
    margin-top: 24px !important;
    row-gap: 16px;
    padding: 0 !important;
}

#section--subscribe .form--subscribe .gform_footer .form__note--privacy {
    margin: 0 !important;
    font-size: 14px !important;
    color: white !important;
    line-height: 1.6 !important;
    opacity: 0.64;
}

#section--subscribe .form--subscribe .gform_footer .form__note--privacy a {
    color: white !important;
    text-decoration: underline !important;
}

#section--subscribe .form--subscribe .gform_footer .gform_button,
#section--subscribe .form--subscribe .gform_footer input[type="submit"] {
    background-color: #FFBF3B !important;
    border: none !important;
    border-radius: 6px !important;
    color: #002C2E !important;
    cursor: pointer !important;
    font-size: 17px !important;
    font-weight: bold !important;
    line-height: 2 !important;
    text-transform: none !important;
    padding: 12px 24px !important;
    transition: all 0.2s ease !important;
}

#section--subscribe .form--subscribe .gform_footer .gform_button:hover,
#section--subscribe .form--subscribe .gform_footer input[type="submit"]:hover {
    opacity: 0.9;
}

#section--subscribe .gform_required_legend {
    display: none !important;
}

#section--subscribe .gform_validation_errors {
    display: none !important;
}

/* Responsive styles */
@media (min-width: 768px) {
    #section--subscribe {
        padding: 56px 4vw;
    }

    #section--subscribe .container--grid {
        grid-template-columns: repeat(2, 1fr);
        column-gap: 64px;
    }

    #section--subscribe .container--content > * {
        max-width: 576px;
    }

    #section--subscribe .section__heading {
        font-size: 40px;
        margin-bottom: 20px;
    }

    #section--subscribe .section__content {
        font-size: 17px;
        line-height: 1.6;
    }

    .form--subscribe .gform_footer {
        column-gap: 24px;
        grid-template-columns: 1fr max-content;
    }
}