/**
 * /v2 & /v3 landing-page header tweaks to match Figma: consistent padding, a
 * vertically-centered row, and a flush-left logo at its natural size. Scoped to
 * the two landing templates.
 *
 * The pages have slightly different header markup (v2 is sticky with inline
 * padding; v3 relies on has-global-padding), so the rules target the first
 * has-global-padding group inside .wp-site-blocks — the header on both — and
 * use !important to beat the inline / global padding.
 */

/* Header: consistent, Figma-like padding on both versions. */
.page-template-free-evaluation-v2 .wp-site-blocks > .has-global-padding:first-child,
.page-template-free-evaluation-v3 .wp-site-blocks > .has-global-padding:first-child {
    padding-top: 16px !important;
    padding-bottom: 16px !important;
    padding-left: 16px !important;
    padding-right: 16px !important;
}

/* Vertically center the header row (logo + phone). */
.page-template-free-evaluation-v2 .wp-site-blocks > .has-global-padding:first-child > .is-layout-flex,
.page-template-free-evaluation-v3 .wp-site-blocks > .has-global-padding:first-child > .is-layout-flex {
    align-items: center;
}

/* The logo figure reserves a wide flex-basis (300px on v2 / 340px on v3) and
   centers the logo inside it, leaving dead space on the left. Keep the figure's
   flex sizing (shrinking it collapses the width-less SVG to zero) and instead
   just left-align the logo inside it — the spare space falls to the right,
   which the space-between layout already absorbs. */
.page-template-free-evaluation-v2 .wp-site-blocks > .has-global-padding:first-child figure:has(> img[src*="Logo"]),
.page-template-free-evaluation-v3 .wp-site-blocks > .has-global-padding:first-child figure:has(> img[src*="Logo"]) {
    margin: 0 !important;
    text-align: left;
}

.page-template-free-evaluation-v2 .wp-site-blocks > .has-global-padding:first-child img[src*="Logo"],
.page-template-free-evaluation-v3 .wp-site-blocks > .has-global-padding:first-child img[src*="Logo"] {
    display: block;
    max-width: 100%;
    height: auto;
    margin-left: 0 !important;
    margin-right: auto !important;
}

/* Submit button styled like the main free-evaluation form. The theme only
   styles input[type=submit] (see style.css), but on v2/v3 the button is a
   <button> (so the label + arrow can be separate elements), which doesn't match
   that selector — replicate the styling here. Flex lays the label out centred
   with the arrow pinned to the right edge. */
.page-template-free-evaluation-v2 #gform_submit_button_6,
.page-template-free-evaluation-v3 #gform_submit_button_6 {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;

    box-sizing: border-box;
    width: 320px;
    max-width: 100%;
    padding: 16px 20px;

    border: none;
    border-radius: 10px;
    background: #122F5E;
    box-shadow: 12px 12px 24px 0px #00000040;
    cursor: pointer;

    font-family: var(--wp--preset--font-family--noto-sans);
    font-weight: 700;
    font-size: 24px;
    line-height: 1;
    color: #fff;
    text-align: center;
}

.page-template-free-evaluation-v2 #gform_submit_button_6 .gform-cta-text,
.page-template-free-evaluation-v3 #gform_submit_button_6 .gform-cta-text {
    flex: 1;
    text-align: center;
}

.page-template-free-evaluation-v2 #gform_submit_button_6 .gform-cta-arrow,
.page-template-free-evaluation-v3 #gform_submit_button_6 .gform-cta-arrow {
    flex: 0 0 auto;
    font-size: 24px;
    line-height: 1;
}

/* Issue #4 (mobile only): the hero's gradient is a truncated one that ends in
   brown (rgb(150,89,83)). Figma is a clean diagonal — deep blue in the
   bottom-left fading to purple in the top-right, no brown. The hero block sets
   the gradient inline, so target it by that unique brown end-stop and override. */
@media (max-width: 767px) {
    .page-template-free-evaluation-v2 [style*="rgb(150,89,83) 100%"],
    .page-template-free-evaluation-v3 [style*="rgb(150,89,83) 100%"] {
        background: linear-gradient(45deg, rgb(26, 75, 153) 0%, rgb(121, 98, 141) 100%) !important;
    }

    /* Heading: match Figma's 3-line wrap ("Discover How So Many" on line one).
       Drop the hard <br> so the copy flows naturally, and size it down so it
       wraps into three lines. */
    .page-template-free-evaluation-v2 [style*="rgb(150,89,83) 100%"] h2 br,
    .page-template-free-evaluation-v3 [style*="rgb(150,89,83) 100%"] h2 br {
        display: none;
    }

    .page-template-free-evaluation-v2 [style*="rgb(150,89,83) 100%"] h2,
    .page-template-free-evaluation-v3 [style*="rgb(150,89,83) 100%"] h2 {
        font-size: 26px !important;
    }

    /* Form section background (the accent-5 block wrapping the form). */
    .page-template-free-evaluation-v2 .has-accent-5-background-color:has(> #premier-free-evaluation),
    .page-template-free-evaluation-v3 .has-accent-5-background-color:has(> #premier-free-evaluation) {
        background-color: #EBF3FC !important;
    }

    /* Logo: cap at 75% so it reads as separate from the phone icon. */
    .page-template-free-evaluation-v2 .wp-site-blocks > .has-global-padding:first-child img[src*="Logo"],
    .page-template-free-evaluation-v3 .wp-site-blocks > .has-global-padding:first-child img[src*="Logo"] {
        max-width: 75%;
    }

    /* Footer: back button + wide submit on one row, the fine-print wraps below. */
    .page-template-free-evaluation-v2 .gform_page_footer,
    .page-template-free-evaluation-v3 .gform_page_footer {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 10px;
    }

    /* Fine print (TOS + continue note) drops onto its own line below the buttons. */
    .page-template-free-evaluation-v2 .gform_page_footer .gform_premier_tos,
    .page-template-free-evaluation-v3 .gform_page_footer .gform_premier_tos,
    .page-template-free-evaluation-v2 .gform_page_footer .gform_continue_note,
    .page-template-free-evaluation-v3 .gform_page_footer .gform_continue_note {
        flex: 0 0 100%;
    }

    .page-template-free-evaluation-v2 #gform_previous_button_6,
    .page-template-free-evaluation-v3 #gform_previous_button_6 {
        flex: 0 0 auto;
    }

    /* On mobile the submit fills the rest of the footer row (next to the back
       button); base styling above still applies. */
    .page-template-free-evaluation-v2 #gform_submit_button_6,
    .page-template-free-evaluation-v3 #gform_submit_button_6 {
        flex: 1;
    }
}