/*
Theme Name: fgMatchBox Child — Haven Dental
Template: fgmatchbox
Author: Firegang Dental Marketing
Description: Haven Dental (haven.dental) child of fgMatchBox.
Version: 0.1
*/

/* Metric-matched Arial fallbacks (mmff.py) so the Google Fonts swap doesn't shift layout. */
@font-face {
    font-family: 'Zalando Sans Fallback';
    src: local('Arial');
    size-adjust: 105.44%;
    ascent-override: 91.42%;
    descent-override: 23.71%;
    line-gap-override: 0%;
}
@font-face {
    font-family: 'Tosh A Fallback';
    src: local('Arial');
    size-adjust: 115.82%;
    ascent-override: 119.32%;
    descent-override: 51.63%;
    line-gap-override: 0%;
}

/* Headings: tosh-a from the Adobe Fonts kit (Theme Settings adobe_fonts_url); body: Zalando Sans from Google Fonts. */
:root {
    /* --- Brand colors --- */
    --primaryColor: #6F866B;
    --primaryHover: #272626;
    --secondaryColor: #BCB9B5;
    --secondaryHover: #272626;
    --ltBlue: var(--primaryColor);
    /* --- Fonts (also set web_font_url in ACF Theme Settings to load them) --- */
    --headingFont: 'tosh-a', 'Tosh A Fallback', sans-serif;
    --bodyFont: 'Zalando Sans', 'Zalando Sans Fallback', sans-serif;
    --overlineFont: var(--bodyFont);
    /* Full token list: see parent docs/superpowers/specs/2026-06-26-matchbox-child-theme-design.md §4 */
}

/* Header: no street addresses (two offices crowd the bar). The white-over-hero idle rules are .scrolled-keyed,
   so they live in no-rucss-child.css. */
#header .conBlock .headAdd {
    display: none;
}
/* Trunk kindling colors the current nav item --secondaryColor (Haven grey, unreadable on the white bar); Contact Us is a
   home anchor, so it's always "current". */
#header #nav > li.current_page_item > a {
    color: var(--black);
}

/* Contact section (#haven-contact). */
#haven-contact {
    padding-block: clamp(48px, 5.208vw, 100px);
}
#haven-contact .container {
    width: min(90vw, 1100px);
}
#haven-contact h2 {
    margin: 0 0 clamp(24px, 2.083vw, 40px);
    text-align: center;
}
#haven-contact .wpcf7 label.hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}
#haven-contact .wpcf7 br {
    display: none;
}
#haven-contact .wpcf7 p {
    margin: 0 0 clamp(12px, 1.042vw, 20px);
}
#haven-contact .wpcf7 legend {
    margin-bottom: 8px;
    font-size: 18px;
    color: #272626;
}
#haven-contact .wpcf7 input[type="radio"] {
    accent-color: var(--primaryColor);
}
#haven-contact .wpcf7 input[type="text"],
#haven-contact .wpcf7 input[type="email"],
#haven-contact .wpcf7 input[type="tel"],
#haven-contact .wpcf7 textarea {
    padding: clamp(12px, 0.833vw, 16px) clamp(14px, 0.938vw, 18px);
    border: 1px solid var(--secondaryColor);
    border-radius: 6px;
    background-color: #fff;
    font-family: inherit;
    font-size: 16px;
    color: #272626;
    transition: border-color 0.2s ease;
}
#haven-contact .wpcf7 textarea {
    height: auto;
    min-height: 160px;
    resize: vertical;
}
#haven-contact .wpcf7 input::placeholder,
#haven-contact .wpcf7 textarea::placeholder {
    color: #767676;
    opacity: 1;
}
#haven-contact .wpcf7 input[type="text"]:focus-visible,
#haven-contact .wpcf7 input[type="email"]:focus-visible,
#haven-contact .wpcf7 input[type="tel"]:focus-visible,
#haven-contact .wpcf7 textarea:focus-visible {
    border-color: var(--primaryColor);
    outline: 2px solid var(--primaryColor);
    outline-offset: 2px;
}
#main #haven-contact .wpcf7 .wpcf7-submit.btn {
    display: block;
    margin-inline: auto;
    border-radius: 100px;
}

/* Banner stills are top-anchored crops of the video's first frame; anchor the video the same way so the swap doesn't jump. */
body .promo #vidBanner {
    object-position: 50% 0;
}

/* CF7 fields in page sections fill their column (CF7 size=40 sets an intrinsic width that
   overflows on mobile); kindling only does this inside #formPop. */
.fullContent .wpcf7 input[type="text"],
.fullContent .wpcf7 input[type="email"],
.fullContent .wpcf7 input[type="tel"],
.fullContent .wpcf7 textarea {
    width: 100%;
    box-sizing: border-box;
}

/* Trunk static_promo_banner.scss hides the .promo::before dark overlay at ≤1024px; Haven's banner photo is
   bright white, so keep the overlay on tablet/mobile or the white "Coming Soon" heading washes out. */
@media (max-width: 1024px) {
    body .promo::before {
        display: block;
    }
}

/* The Contact Page Form's two-column row (.row.flex > .col-lg-6) doesn't wrap, so stack it on tablet/mobile. */
@media (max-width: 991px) {
    .fullContent .wpcf7 .row.flex {
        flex-wrap: wrap;
    }
    .fullContent .wpcf7 .row.flex > .col-lg-6 {
        width: 100%;
    }
}