/* =====================================================================
   Lactantia - Contest: The Ultimate Butter Churning Vest
   Landing page styles (template-churning-vest.php)

   Palette sampled from the approved mockup + brand logo:
     Section red (form / influencer) ... #B9271A
     Intro / video background ........... #EEE4E5
     Video placeholder grey ............. #BBB5B5
   All rules are scoped under .contest-cv to avoid touching other pages.
   Mobile-first, matching the theme's existing CSS approach.
   ===================================================================== */

.contest-cv {
    --cv-section-red: #B9271A;
    --cv-intro-bg: #EEE4E5;
    --cv-grey: #BBB5B5;
    width: 100%;
    overflow-x: hidden;
}

/* Full-bleed sections: neutralise any container padding the theme main
   wrapper may apply, so the hero and coloured bands run edge to edge. */
.contest-cv > section {
    width: 100%;
    margin-left: auto;
    margin-right: auto;
}

/* The theme adds `.contest-landing { padding-top: 150px }` (100px on mobile)
   to clear the absolute site header. This template uses a full-bleed hero that
   sits under the header (per the mockup), so that top padding is removed here
   and the logo is offset instead to clear the header. */
.contest-cv.contest-landing {
    padding-top: 0 !important;
}

/* ---------------------------------------------------------------------
   Hide the WordPress footer on this template only.
   The visible site footer is the top-level <footer> element rendered by
   footer.php; the body class is added in template-churning-vest.php.
   --------------------------------------------------------------------- */
body.contest-churning-vest footer {
    display: none !important;
}

/* ------ */
/* 1 Hero */
/* ------ */

.cv-hero {
    position: relative;
    line-height: 0;
}

.cv-hero__bg {
    display: block;
    width: 100%;
    height: auto;
    object-fit: cover;
}

/* Logo sits on the hero photo, below the site header. It is capped by BOTH
   width and height: the hero is much shorter on phones (the KV is a wide image),
   so max-height prevents the badge from overflowing the hero into the section
   below. */
.cv-hero__logo {
    position: absolute;
    top: 100px;
    left: 16px;
    width: auto;
    height: auto;
    max-width: 200px;
    max-height: 105px;
    z-index: 3;
}

@media (min-width: 768px) {
    .cv-hero__logo {
        top: 120px;
        left: 28px;
        max-width: 320px;
        max-height: 200px;
    }
}

@media (min-width: 1280px) {
    .cv-hero__logo {
        top: 150px;
        left: 56px;
        max-width: 440px;
        max-height: 330px;
    }
}

/* ------- */
/* 2 Intro */
/* ------- */

.cv-intro {
    background: var(--cv-intro-bg);
    padding: 36px 22px 28px;
}

.cv-intro__inner {
    max-width: 880px;
    margin: 0 auto;
    text-align: center;
}

.cv-intro p {
    margin: 0;
    color: var(--cv-section-red);
    font-weight: 700;
    font-size: 16px;
    line-height: 1.55;
}

@media (min-width: 768px) {
    .cv-intro {
        padding: 56px 22px 36px;
    }
    .cv-intro p {
        font-size: 19px;
        line-height: 1.6;
    }
}

/* ------- */
/* 3 Video */
/* ------- */

.cv-video {
    background: var(--cv-intro-bg);
    padding: 8px 22px 48px;
}

.cv-video__frame {
    max-width: 1040px;
    margin: 0 auto;
    background: var(--cv-grey);
    border-radius: 20px;
    overflow: hidden;
    aspect-ratio: 16 / 9;
}

.cv-video__player {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    background: var(--cv-grey);
}

@media (min-width: 768px) {
    .cv-video {
        padding: 12px 22px 64px;
    }
    .cv-video__frame {
        border-radius: 28px;
    }
}

/* ------ */
/* 4 Form */
/* ------ */

.cv-form {
    background: var(--cv-section-red);
    padding: 44px 22px 56px;
}

.cv-form__inner {
    max-width: 760px;
    margin: 0 auto;
    text-align: center;
}

.cv-form__title {
    margin: 0 0 26px;
    color: #fff;
    font-weight: 800;
    font-size: 26px;
    text-transform: none;
}

@media (min-width: 768px) {
    .cv-form {
        padding: 60px 22px 68px;
    }
    .cv-form__title {
        font-size: 32px;
        margin-bottom: 30px;
    }
}

/* --- Formidable form (ID 2) overrides ---------------------------------
   Field widths (First / Last name at 1/2) are best set in the Formidable
   form builder. The flex container below lets half-width fields sit side
   by side and keeps full-width fields (email) on their own row.
   --------------------------------------------------------------------- */

/* The form uses Formidable's own visual style (with_frm_style /
   frm_style_formidable-style), whose selectors outrank simple ones. The rules
   below carry the .frm_forms anchor plus !important on the visual properties
   so the campaign styling reliably wins over the plugin defaults. */

/* Strip the plugin's form chrome (background, border, padding, max-width). */
.cv-form__formidable .frm_forms,
.cv-form__formidable .frm_forms.with_frm_style,
.cv-form__formidable .frm_forms .frm_form_fields,
.cv-form__formidable .frm_forms fieldset {
    background: transparent !important;
    border: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    box-shadow: none !important;
    max-width: none !important;
}

.cv-form__formidable .frm_forms .frm_fields_container {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    justify-content: center;
}

/* Keep Formidable's screen-reader-only legend hidden (defensive; the plugin
   normally hides .frm_screen_reader itself). */
.cv-form__formidable .frm_screen_reader {
    position: absolute !important;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.cv-form__formidable .frm_forms .frm_form_field {
    margin: 0 !important;
    padding: 0 !important;
    flex: 1 1 100%;
}

/* First and Last name side by side (the first two field blocks). Also honours
   half-width fields if you set them in the Formidable builder. */
@media (min-width: 600px) {
    .cv-form__formidable .frm_fields_container > .frm_form_field:nth-of-type(1),
    .cv-form__formidable .frm_fields_container > .frm_form_field:nth-of-type(2),
    .cv-form__formidable .frm_form_field.frm_half,
    .cv-form__formidable .frm_form_field.frm6 {
        flex: 1 1 calc(50% - 7px);
    }
}

/* Hide labels (placeholder-only design, per the mockup). The labels stay in
   the DOM for screen readers. Placeholders are supplied from the label text by
   a small script in the template, or set them directly in the form builder. */
.cv-form__formidable .frm_forms .frm_primary_label {
    position: absolute !important;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.cv-form__formidable .frm_forms input[type="text"],
.cv-form__formidable .frm_forms input[type="email"] {
    width: 100% !important;
    box-sizing: border-box;
    background: rgba(255, 255, 255, 0.18) !important;
    border: 1px solid rgba(255, 255, 255, 0.30) !important;
    border-radius: 999px !important;
    padding: 15px 22px !important;
    color: #fff !important;
    font-size: 16px;
    line-height: 1.2;
    box-shadow: none !important;
}

.cv-form__formidable .frm_forms input[type="text"]::placeholder,
.cv-form__formidable .frm_forms input[type="email"]::placeholder {
    color: rgba(255, 255, 255, 0.82);
    opacity: 1;
}

.cv-form__formidable .frm_forms input[type="text"]:focus,
.cv-form__formidable .frm_forms input[type="email"]:focus {
    outline: none;
    background: rgba(255, 255, 255, 0.28) !important;
    border-color: #fff !important;
}

/* Submit row */
.cv-form__formidable .frm_forms .frm_submit {
    flex: 1 1 100%;
    margin-top: 22px !important;
    text-align: center;
    display: flex;
    justify-content: center;
    clear: both;
}

.cv-form__formidable .frm_forms .frm_button_submit,
.cv-form__formidable .frm_forms input[type="submit"],
.cv-form__formidable .frm_forms button[type="submit"] {
    -webkit-appearance: none;
    appearance: none;
    background: #fff !important;
    color: var(--cv-section-red) !important;
    border: 0 !important;
    border-radius: 999px !important;
    padding: 14px 50px !important;
    font-weight: 800 !important;
    font-size: 18px !important;
    width: auto !important;
    text-transform: none !important;
    cursor: pointer;
    transition: opacity 0.15s ease;
}

.cv-form__formidable .frm_forms .frm_button_submit:hover,
.cv-form__formidable .frm_forms input[type="submit"]:hover,
.cv-form__formidable .frm_forms button[type="submit"]:hover {
    opacity: 0.92;
    background: #fff !important;
}

/* On-submit confirmation message: strip Formidable's green success box so the
   message reads as plain white text on the red section. */
.cv-form__formidable .frm_forms .frm_message,
.cv-form__formidable .frm_message {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    color: #fff !important;
    padding: 0 !important;
    margin: 0 auto !important;
    font-size: 18px;
    font-weight: 700;
    text-align: center;
}

.cv-form__formidable .frm_message p {
    color: #fff !important;
    margin: 0;
}

/* ----------- */
/* 5 Influencer */
/* ----------- */

.cv-form__influencer {
    max-width: 680px;
    margin: 36px auto 0;
    color: #fff;
    font-weight: 800;
    font-size: 19px;
    line-height: 1.35;
}

.cv-form__influencer a {
    color: #fff;
    text-decoration: underline;
}

@media (min-width: 768px) {
    .cv-form__influencer {
        font-size: 23px;
        margin-top: 44px;
    }
}

/* ---------------------------------------------------------------------
   6 Sanitary guidelines (pending approval; markup commented in the
   template). Styles are provided so the section is ready when enabled.
   --------------------------------------------------------------------- */

.cv-sanitary {
    background: var(--cv-intro-bg);
    padding: 40px 22px 52px;
}

.cv-sanitary__inner {
    max-width: 820px;
    margin: 0 auto;
    color: var(--cv-section-red);
}

.cv-sanitary__title {
    text-align: center;
    font-weight: 800;
    font-size: 22px;
    margin: 0 0 20px;
}

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

.cv-sanitary__list li {
    margin: 0 0 12px;
    line-height: 1.5;
    font-size: 15px;
}

@media (min-width: 768px) {
    .cv-sanitary__title {
        font-size: 26px;
    }
    .cv-sanitary__list li {
        font-size: 16px;
    }
}

.frm_style_formidable-style.with_frm_style .frm_error, .frm_style_formidable-style.with_frm_style .frm_limit_error {color:#ffffff !important;}