/* assets/css/pages/contact.css
   Contact page (page-contact.php): interactive map, department cards, directions.
   Composes with the bundle's .gtm-section / .gtm-btn / typography classes. */

/* ---------- Essentials column ---------- */
.gtm-contact-info-wrapper { border-left: 4px solid #FFC424; padding-left: 32px; }

.gtm-contact-cta-row { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; }
/* Primary "call us" CTA in the brand accent so it leads the hierarchy over the dark
   enquire buttons. Selector out-specifies the theme's .gtm-btn.primary (0,2,0). */
.gtm-contact-cta-row .gtm-contact-phone-btn { background-color: #FFC424; color: #1a1a1a; border: none; }
.gtm-contact-cta-row .gtm-contact-phone-btn:hover { background-color: #ffcf3d; color: #1a1a1a; filter: none; }
.gtm-contact-directions {
    display: inline-flex; align-items: center; gap: 6px;
    font-weight: 800; font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.04em;
    color: var(--c-primary, #342E37); text-decoration: none;
    transition: gap 0.15s, color 0.15s;
}
.gtm-contact-directions:hover { gap: 10px; color: #b8901a; }

/* ---------- Interactive map ---------- */
.gtm-contact-map {
    position: relative;
    aspect-ratio: 16 / 11;
    border-radius: 16px;
    overflow: hidden;
    border: 1px solid #e3e0e6;
    box-shadow: 0 8px 26px rgba(52, 46, 55, 0.08);
}
.gtm-contact-map iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; }

/* ---------- Departments ---------- */
.gtm-contact-dept-head { max-width: 720px; margin: 0 0 36px; }
.gtm-contact-dept-head .gtm-body-text { color: #6a646f; }
.gtm-contact-dept-head a { color: var(--c-primary, #342E37); font-weight: 700; text-decoration: underline; text-underline-offset: 2px; }

.gtm-contact-depts { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 24px; }

.gtm-dept-card {
    background: #fff;
    border: 1px solid #eceaef;
    border-radius: 16px;
    padding: 30px 26px;
    box-shadow: 0 6px 22px rgba(52, 46, 55, 0.05);
    display: flex;
    flex-direction: column;
}
.gtm-dept-card__icon {
    display: inline-flex; align-items: center; justify-content: center;
    width: 52px; height: 52px; border-radius: 12px;
    background: #fff7db; color: var(--c-primary, #342E37);
    margin-bottom: 18px;
}
.gtm-dept-card__title { font-size: 1.15rem; font-weight: 900; color: var(--c-primary, #342E37); margin: 0 0 10px; }
.gtm-dept-card__text { color: #6a646f; font-size: 0.95rem; line-height: 1.55; margin: 0 0 18px; flex: 1 1 auto; }
.gtm-dept-card__phone { display: block; font-size: 1.15rem; font-weight: 900; color: var(--c-primary, #342E37); text-decoration: none; margin-bottom: 16px; }
.gtm-dept-card__phone:hover { color: #b8901a; }
.gtm-dept-card .gtm-btn { align-self: flex-start; }

/* ---------- Finding us + parking ----------
   The g-5 row picks up Bootstrap's gutter-y negative top margin, which is not
   compensated here, so it ate ~48px of the section's 64px top padding and left the
   content cramped against the section above. Neutralise it, and give the two columns
   a gap once they stack on mobile. */
.gtm-contact-visit .row { margin-top: 0; }
@media (max-width: 991px) {
    .gtm-contact-visit .col-lg-6 + .col-lg-6 { margin-top: 40px; }
}

/* ---------- Contact form ----------
   Full content width on the page, presented as its own tinted panel so it clearly reads as
   the focus on the white band (the form section sits between two grey sections, so a grey
   *band* would merge with "Other Services" above — tinting the card instead keeps it self-
   contained). The white input fields then read as distinct wells on the tint. The wizard's
   own head/foot are white for the white pop-up, so on this tint let the panel show through
   them (only the FIELDS stay white). 16px radius + soft shadow keep the pop-up's card feel.
   Scoped to .gtm-contact-form-card, so the pop-up and the other inline forms are untouched. */
.gtm-contact-form-card .gtmc {
    background: #e5e5e8;
    border: 1px solid #d5d5da;
    border-radius: 16px;
    box-shadow: 0 12px 36px rgba(52, 46, 55, 0.10);
    overflow: hidden;
}
.gtm-contact-form-card .gtm-wiz__head,
.gtm-contact-form-card .gtm-wiz__foot { background: transparent; }

/* On the tint, the wizard's default #e3e1e4 control borders and head/foot dividers are the
   SAME colour as the panel (contrast ~1.03) and disappear. The white field fills still
   separate the inputs, but nothing should match the panel — darken every edge so each
   control and divider reads on the tint. Scoped to the contact card, so the pop-up (on a
   white background, where #e3e1e4 is correct) keeps its lighter borders. */
.gtm-contact-form-card .gtm-wiz__input,
.gtm-contact-form-card .gtm-wiz__textarea,
.gtm-contact-form-card .gtm-wiz__select,
.gtm-contact-form-card .gtm-wiz__consent-box { border-color: #c5c5cd; }
.gtm-contact-form-card .gtm-wiz__head { border-bottom-color: #d0d0d7; }
.gtm-contact-form-card .gtm-wiz__foot { border-top-color: #d0d0d7; }
/* Reassure microcopy read 4.49 on the tint (just under AA) — nudge darker to clear 4.5. */
.gtm-contact-form-card .gtm-wiz__reassure { color: #5c5763; }

/* The shared foot rule stretches the submit button full-width — right for the 560px pop-up,
   but a ~1150px bar on the full-width card. Give it a natural width, centred under the
   (centred) reassurance line. */
.gtm-contact-form-card .gtm-wiz__foot { text-align: center; }
.gtm-contact-form-card .gtm-wiz__foot .gtm-btn { width: auto; min-width: 240px; }

/* Larger message area (was min-height 88px / 3 rows) — the message is the point of the form. */
.gtm-contact-form-card .gtm-wiz__textarea { min-height: 160px; }

/* Two-column grid for the short detail fields so a full-width card reads as a deliberate
   layout, not single-line inputs stretched across ~1200px. Message (Step 1) and the consent
   span the full width; the details step (Step 2) splits into two columns from 700px up. */
@media (min-width: 700px) {
    .gtm-contact-form-card .gtm-wiz__step[data-gtm-step="2"] .gtm-wiz__step-body {
        display: grid;
        grid-template-columns: 1fr 1fr;
        column-gap: 26px;
        align-items: start;
    }
    .gtm-contact-form-card .gtm-wiz__step[data-gtm-step="2"] .gtm-wiz__step-heading,
    .gtm-contact-form-card .gtm-wiz__step[data-gtm-step="2"] .gtm-wiz__consent {
        grid-column: 1 / -1;
    }
}

/* ---------- Responsive ---------- */
@media (max-width: 575px) {
    .gtm-contact-info-wrapper { padding-left: 22px; }
    .gtm-dept-card { padding: 26px 22px; }
    /* The form card's padding comes from the wizard head/body/foot (see enquiry-wizard.css
       @600px), matching the pop-up; no card padding to override here. */
}