/* =============================================================
   CONTACT US PAGE
   Template: page-templates/page-contact.php
   Scoped selectors used by the template:
     .vb-contact-us-wrap   -> outer wrapper around each block
     ul.contact-details    -> phone/email/address list
     .time-label           -> hours wrapper
   ============================================================= */

/* --- Base typography (Inter, aligned with the site-wide redesign) ---
   Scope to the contact content + form. Form controls (input/select/
   textarea/button) don't inherit font-family, so they're set explicitly
   in the Gravity Forms section below. */
.vb-contact-us-wrap,
.vb-contact-us-wrap *,
ul.contact-details,
.gform_wrapper,
.gform_wrapper * {
    font-family: 'Inter', sans-serif;
}

/* Font Awesome icons (fa fa-phone, fa-envelope, fa-map-marker, fa-clock-o)
   must keep the icon font — the Inter rule above also matches the icon
   <span>s and would blank them out (square/empty glyph). Re-assert the FA4
   font-family here with higher specificity + !important so it wins
   regardless of stylesheet load order. */
.vb-contact-us-wrap .fa,
.vb-contact-us-wrap [class^="fa-"],
.vb-contact-us-wrap [class*=" fa-"],
ul.contact-details .fa,
ul.contact-details [class^="fa-"],
ul.contact-details [class*=" fa-"] {
    font-family: 'FontAwesome' !important;
}

/* --- Section headers (MAIL & ONLINE WEB ORDERS, ALEXANDRIA, etc.) --- */
.vb-contact-us-wrap p strong {
    font-family: 'Inter', sans-serif;
    font-size: 22px;
    font-weight: 600;
    letter-spacing: -0.45px;
    line-height: 1.3;
    display: inline-block;
    margin-bottom: 0.5rem;
    color: #1a1a1a;
}

@media (min-width: 768px) {
    .vb-contact-us-wrap p strong {
        font-size: 24px;
    }
}

/* --- Contact details list --- */
ul.contact-details {
    list-style: none;
    padding-left: 0;
    font-size: 16px;
    line-height: 1.7;
}

@media (min-width: 768px) {
    ul.contact-details {
        font-size: 17px;
    }
}

ul.contact-details li {
    margin-bottom: 10px;
    display: flex;
    align-items: flex-start;
}

/* Icon column — fixed width so text aligns in a clean column */
ul.contact-details li > span {
    width: 22px;
    min-width: 22px;
    margin-right: 12px;
    margin-top: 4px;
    text-align: center;
    display: inline-block;
    flex-shrink: 0;
}

ul.contact-details li span.fa-map-marker {
    float: none;
    margin-top: 4px;
}

ul.contact-details li span.fa-clock-o {
    margin-top: 4px;
}

ul.contact-details li a {
    text-decoration: none;
    color: #1a1a1a;
}
ul.contact-details li a:hover {
    text-decoration: underline;
    color: #c8102e;
}
ul.contact-details li span.fa-map-marker + a {
    text-decoration: none !important;
}

/* Force address onto a single line on desktop; allow wrap on mobile.
   Target the text node following the map-marker span. */
ul.contact-details li:has(> span.fa-map-marker) {
    white-space: nowrap;
}
@media (max-width: 575px) {
    ul.contact-details li:has(> span.fa-map-marker) {
        white-space: normal;
    }
}

/* --- Hours label --- */
.time-label {
    display: inline-block;
}
.time-label p {
    margin-bottom: 6px;
}

/* --- Google Map iframe (rendered by $addr['google_map']) ---
   The ACF field is a TEXTAREA — users paste Google's raw embed code:
   <iframe src="..." width="600" height="450" ...></iframe>
   Those inline width/height HTML ATTRIBUTES are what cause overflow.
   We use attribute selectors [width] / [height] to lift specificity above
   plain `iframe` rules and force fluid sizing. */

/* Scope tightly to the main contact content (site-main), NOT the whole page.
   Otherwise the header's search-bar column gets overflow-x: hidden too,
   which forces overflow-y: auto and creates phantom scrollbar arrows. */
.page-template-page-contact .site-main .col-md-6,
.page-template-page-contact .site-main .row > [class*="col-"] {
    min-width: 0;          /* Bootstrap flex columns need this to allow shrinking */
    max-width: 100%;
    overflow-x: hidden;    /* clip any oversized child as a safety net */
}

/* Catch-all: any iframe inside the contact template's columns is fluid */
.page-template-page-contact iframe,
.page-template-page-contact iframe[width],
.page-template-page-contact iframe[height],
.page-template-page-contact .col-md-6 iframe,
.page-template-page-contact .col-md-6 p > iframe,
.page-template-page-contact .col-md-6 div > iframe {
    width: 100% !important;
    max-width: 100% !important;
    height: 360px !important;
    min-height: 0 !important;
    display: block !important;
    border: 0 !important;
    margin: 15px 0 25px !important;
    box-sizing: border-box;
}

/* If wpautop wraps the iframe in <p>, kill the p's margin so it doesn't add gap */
.page-template-page-contact .col-md-6 p:has(> iframe) {
    margin: 0;
    max-width: 100%;
}

/* --- Responsive heights --- */

/* Tablet, side-by-side (768–991px) — narrow column, shorter map */
@media (min-width: 768px) and (max-width: 991px) {
    .page-template-page-contact iframe,
    .page-template-page-contact .col-md-6 iframe {
        height: 280px !important;
    }
}

/* Below md (<768px) — Bootstrap stacks col-md-6 to full width */
@media (max-width: 767px) {
    .page-template-page-contact iframe,
    .page-template-page-contact .col-md-6 iframe {
        height: 300px !important;
        margin-bottom: 30px !important;
    }
    .page-template-page-contact .col-md-6 + .col-md-6 {
        margin-top: 30px;
    }
}

@media (max-width: 575px) {
    .page-template-page-contact iframe,
    .page-template-page-contact .col-md-6 iframe {
        height: 240px !important;
    }
}

@media (max-width: 400px) {
    .page-template-page-contact iframe,
    .page-template-page-contact .col-md-6 iframe {
        height: 200px !important;
    }
}

/* --- Global fallback (in case body class differs) ---
   Targets the iframe via its sibling .vb-contact-us-wrap structure */
.vb-contact-us-wrap ~ iframe,
.vb-contact-us-wrap + ul.contact-details ~ iframe {
    width: 100% !important;
    max-width: 100% !important;
}

/* Separator spacing */
.wp-block-separator {
    margin: 20px 0;
}

/* =============================================================
   GRAVITY FORMS — Contact form styling
   ============================================================= */

.gform_wrapper {
    font-family: 'Inter', sans-serif;
}

/* Form heading ("Contact") */
.gform_wrapper .gform_title,
.gform_heading h3,
.gform_heading h2 {
    font-family: 'Inter', sans-serif;
    font-size: 22px;
    font-weight: 600;
    letter-spacing: -0.45px;
    margin-bottom: 1.25rem;
    color: #1a1a1a;
}

/* Field wrapper spacing */
.gform_wrapper .gfield {
    margin-bottom: 1.25rem;
}

/* Labels */
.gform_wrapper .gfield_label {
    font-size: 14px;
    font-weight: 600;
    color: #333;
    margin-bottom: 6px;
    display: block;
    letter-spacing: 0.2px;
}

.gform_wrapper .gfield_required {
    color: #c8102e;
    margin-left: 3px;
}

/* Inputs, selects, textareas */
.gform_wrapper input[type="text"],
.gform_wrapper input[type="email"],
.gform_wrapper input[type="tel"],
.gform_wrapper input[type="url"],
.gform_wrapper input[type="number"],
.gform_wrapper select,
.gform_wrapper textarea {
    width: 100%;
    padding: 10px 14px;
    font-family: 'Inter', sans-serif;
    font-size: 15px;
    line-height: 1.5;
    color: #1a1a1a;
    background-color: #fff;
    border: 1px solid #e5e5e5;
    border-radius: 6px;
    box-shadow: none;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
    box-sizing: border-box;
}

.gform_wrapper textarea {
    height: 130px !important;
    min-height: 130px !important;
    max-height: 220px;
    resize: vertical;
}

/* Focus state */
.gform_wrapper input[type="text"]:focus,
.gform_wrapper input[type="email"]:focus,
.gform_wrapper input[type="tel"]:focus,
.gform_wrapper input[type="url"]:focus,
.gform_wrapper input[type="number"]:focus,
.gform_wrapper select:focus,
.gform_wrapper textarea:focus {
    border-color: #c8102e;
    box-shadow: 0 0 0 3px rgba(200, 16, 46, 0.12);
    outline: none;
}

/* Select arrow consistency */
.gform_wrapper select {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2210%22%20height%3D%226%22%20viewBox%3D%220%200%2010%206%22%3E%3Cpath%20fill%3D%22%23666%22%20d%3D%22M0%200l5%206%205-6z%22/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
    padding-right: 36px;
}

/* Placeholders */
.gform_wrapper ::placeholder { color: #999; opacity: 1; }

/* Submit button */
.gform_wrapper .gform_footer {
    margin-top: 1rem !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    margin-bottom: 0 !important;
    clear: both;
}

/* Remove the large default Gravity Forms spacer that pushes the button down */
.gform_wrapper .gform_body + .gform_footer,
.gform_wrapper .gform_fields + .gform_footer {
    margin-top: 1rem !important;
}

/* Some Gravity Forms versions add a hidden honeypot/spacer field with big height */
.gform_wrapper .gform_validation_container,
.gform_wrapper .gfield_visibility_hidden {
    display: none !important;
    height: 0 !important;
    margin: 0 !important;
}

.gform_wrapper .gform_button,
.gform_wrapper input[type="submit"] {
    background-color: #c8102e;
    color: #fff;
    border: 1px solid #c8102e;
    border-radius: 6px;
    padding: 12px 28px;
    font-family: 'Inter', sans-serif;
    font-size: 15px;
    font-weight: 500;
    letter-spacing: -0.15px;
    cursor: pointer;
    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.gform_wrapper .gform_button:hover,
.gform_wrapper input[type="submit"]:hover {
    background-color: #a50d26;
    border-color: #a50d26;
    color: #fff;
}

.gform_wrapper .gform_button:active,
.gform_wrapper input[type="submit"]:active {
    transform: translateY(1px);
}

/* Validation states */
.gform_wrapper .gfield_error input,
.gform_wrapper .gfield_error select,
.gform_wrapper .gfield_error textarea {
    border-color: #c8102e;
    background-color: #fff8f9;
}

.gform_wrapper .validation_message {
    color: #c8102e;
    font-size: 13px;
    margin-top: 4px;
}

/* Confirmation message */
.gform_confirmation_message {
    padding: 16px 20px;
    background-color: #eef9f1;
    border: 1px solid #b5e0c2;
    border-radius: 6px;
    color: #1f6b3a;
    font-size: 15px;
}