/*
 * Carpet Giant theme overrides.
 * The frozen build lives in /dist/css/style.min.css — never edit that.
 * Only additive tweaks (admin bar, form styling) belong here.
 */

/* Keep the fixed nav clear of the WP admin bar when logged in. */
.admin-bar header .navbar {
    /* Bootstrap navbar is not fixed in this theme, so nothing needed; kept as a hook. */
}

/* Contact Form 7 fields, reusing the site's form look. */
.wpcf7 input[type="text"],
.wpcf7 input[type="email"],
.wpcf7 input[type="tel"],
.wpcf7 textarea,
.wpcf7 select {
    width: 100%;
    padding: 0.5rem 0.75rem;
    margin-bottom: 1rem;
    border: 1px solid #ccc;
    border-radius: 0;
    font-family: inherit;
}

.wpcf7 label {
    display: block;
    font-weight: 700;
    margin-bottom: 0.25rem;
}

.wpcf7 .wpcf7-submit {
    cursor: pointer;
}

.wpcf7-response-output {
    margin: 1rem 0 0;
}

/*
 * Decal wave base colour. The frozen style.min.css only defines the modifier
 * colours (.decal__wave .decal__wave--secondary/white/primary) as descendant
 * rules; it has no rule for a bare <path>, because the static markup carried an
 * inline `.cls-1{stroke:#ed1c24}` <style> in every SVG. cg_wave() emits a clean
 * SVG instead, so the red fallback lives here. The two-class modifier selectors
 * out-specify this one, so secondary/white/primary still win.
 */
.decal__wave svg path {
    fill: none;
    stroke: #ed1c24;
    stroke-miterlimit: 10;
}

/*
 * FAQ answers are a wysiwyg field, so the template wraps them in a <div> (a <p>
 * can't legally contain the answer's own <p> tags). The source used a single
 * <p class="accordion__text mb-0">, i.e. no trailing margin — mirror that by
 * dropping the last child's bottom margin so the accordion height matches.
 */
.accordion__text > :last-child {
    margin-bottom: 0;
}

/*
 * Header search: magnifier toggle in the navbar + a Bootstrap-collapse
 * slide-down bar under it. New functionality — the static site had no search
 * UI, but WordPress answers /?s= and search.php renders styled results.
 * The toggle sits right of the burger on mobile (ml-auto) and right of the
 * menu on desktop (order-lg-3, after the expanded collapse).
 */
.cg-search-toggle {
    background: none;
    border: 0;
    padding: .25rem .5rem;
    color: #fff; /* on the primary-blue navbar */
    line-height: 1;
    cursor: pointer;
    align-self: center;
}
.cg-search-toggle:hover,
.cg-search-toggle:focus {
    color: #ffa800; /* matches the nav-link hover yellow */
}
.cg-search-bar__form {
    display: flex;
    gap: .5rem;
    max-width: 640px;
    margin: 0 auto;
    padding: .75rem 1rem;
}
.cg-search-bar__form input[type="search"] {
    flex: 1;
    min-width: 0;
    /* Drop .form-control's fixed height so the input stretches to match the
       (taller, brand-padded) Search button in the flex row. */
    height: auto;
}
.cg-search-bar__form .btn {
    /* The frozen CSS makes .btn full-width on small screens; keep the search
       button content-sized so the input gets the row. */
    width: auto;
    flex: 0 0 auto;
}

/*
 * Reserve the homepage hero's box before its image arrives (CLS fix — the
 * banner imgs carry no width/height in the imported markup, so the content
 * below jumped ~0.44 CLS). Ratios are the source images' intrinsic sizes:
 * desktop banner 1920x927, mobile banner 640x880.
 */
.hero-container--homepage .hero-img {
    aspect-ratio: 1920 / 927;
    height: auto;
}
@media (max-width: 767.98px) {
    .hero-container--homepage .hero-img {
        aspect-ratio: 640 / 880;
    }
}