/* ==========================================================================
   Contact Us (/contact-us)
   The page's own parts on top of the shared Toybox Calm look (assets/css/toybox-calm.css, loaded first by
   _ToyboxCalmHead): the General Enquiries form (the family's big card and form controls, with the reCAPTCHA box and the
   button side by side), the map in an ink frame and the addresses card. Every class starts with cnt-.
   Views/Public/Contact.cshtml links it in its FinalHeader section with a ?v= cache buster from StaticAssetVersion, after
   Leaflet's own stylesheet; Scripts/contact-us/contact-us.js draws the map and runs the form.
   ========================================================================== */

/* ---------- Layout: the form, with the map and the addresses beside it (under it below 992px) ---------- */
.cnt-layout { display: grid; gap: 36px; }
@media (min-width: 992px) { .cnt-layout { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 40px; align-items: start; } }
.cnt-main, .cnt-aside { min-width: 0; }
.cnt-aside { display: grid; gap: 22px; }
/* Map and addresses side by side between the phone and desktop layouts */
@media (min-width: 640px) and (max-width: 991.98px) { .cnt-aside { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: stretch; } }

/* ---------- General Enquiries ---------- */
.cnt-form__head { display: flex; align-items: center; gap: 14px; }
.cnt-form__icon { flex: none; display: grid; place-items: center; width: 48px; height: 48px; border: 3px solid var(--tc-ink); border-radius: 15px; background: var(--tc-yellow); background-image: linear-gradient(180deg, rgba(255, 255, 255, .5), rgba(255, 255, 255, 0) 55%); box-shadow: 0 3px 0 var(--tc-ink); font-size: 1.5rem; color: var(--tc-ink); }
.tc-root .cnt-form .tc-card__title { margin: 0; }
.cnt-fields { display: grid; gap: 4px 18px; }
@media (min-width: 640px) { .cnt-fields { grid-template-columns: repeat(2, minmax(0, 1fr)); } .cnt-field--wide { grid-column: 1 / -1; } }
.cnt-error { color: #B3261E; font-weight: 600; }
.cnt-root .tc-textarea[aria-invalid="true"] { border-color: #B3261E; box-shadow: 0 3px 0 #B3261E; }
/* The terms: the label is the whole row (44px tall), so all of it ticks the box */
.cnt-terms { margin: 2px 0 16px; }
.cnt-terms > .tc-check { min-height: 44px; padding: 11px 0; }
.cnt-terms > .cnt-error { margin-top: -4px; }
/* The reCAPTCHA box (304 x 78) and the button: side by side when they fit, else stacked with a full-width button */
.cnt-send { display: flex; flex-wrap: wrap; align-items: center; gap: 18px 24px; padding-top: 18px; border-top: 2px solid var(--tc-line); }
.cnt-captcha { flex: none; min-height: 78px; }
.cnt-captcha .text-danger { display: block; margin-top: 6px; font-weight: 600; color: #B3261E; }
.cnt-submit { flex: 1 1 200px; }
/* The reCAPTCHA box is 304px wide: scaled to fit the narrowest cards */
@media (max-width: 379.98px) {
  .cnt-captcha { min-height: 63px; }
  .cnt-captcha .g-recaptcha { height: 63px; transform: scale(.8); transform-origin: 0 0; }
}
/* A message that went through */
.tc-root .cnt-form .tc-btn--green[disabled] { opacity: 1; }
.cnt-reply { margin: 24px 0 0; font: 600 1rem/1.4 var(--tc-display); color: var(--tc-ink-2); text-align: center; }
.cnt-reply i { margin-right: 7px; font-size: 1.3rem; vertical-align: -4px; color: var(--tc-ink); }

/* ---------- The map: Leaflet in an ink frame ---------- */
/* isolation keeps Leaflet's panes and controls (z-index 400 to 1000) under the site's fixed header */
.cnt-map-frame { isolation: isolate; }
.cnt-root .cnt-map { width: 100%; height: 300px; background: var(--tc-sky-0); }
/* Beside the addresses card, the map fills its frame, which grows to the card's height */
@media (min-width: 640px) and (max-width: 991.98px) { .cnt-map-frame { min-height: 306px; } .cnt-root .cnt-map { position: absolute; inset: 0; height: auto; } }
/* The frame clips the map, so a keyboard user's ring goes round the frame instead */
.cnt-root .cnt-map:focus-visible { outline: none; box-shadow: none; }
.cnt-map-frame:has(.cnt-map:focus-visible) { outline: 3px solid var(--tc-ink); outline-offset: 3px; box-shadow: var(--tc-drop), 0 0 0 9px var(--tc-yellow); }
/* Leaflet's attribution and zoom buttons clear of the frame's rounded corners */
.cnt-root .cnt-map .leaflet-bottom.leaflet-right { right: 10px; bottom: 4px; }
.cnt-root .cnt-map .leaflet-control-attribution { border-radius: 6px; }
.cnt-root .cnt-map .leaflet-popup-content { font: 600 .9375rem/1.4 var(--tc-display); color: var(--tc-ink); }

/* ---------- The addresses ---------- */
.cnt-details__list { display: grid; gap: 20px; margin: 0; }
.cnt-detail { position: relative; min-height: 48px; padding-left: 62px; }
.cnt-detail__icon { position: absolute; left: 0; top: 0; display: grid; place-items: center; width: 46px; height: 46px; border: 2px solid var(--tc-ink); border-radius: 14px; background: var(--a, var(--tc-sky)); background-image: linear-gradient(180deg, rgba(255, 255, 255, .5), rgba(255, 255, 255, 0) 55%); box-shadow: 0 3px 0 var(--tc-ink); font-size: 1.35rem; color: var(--tc-ink); }
.tc-root .cnt-detail dt { margin: 0 0 3px; font: 700 1.1875rem/1.3 var(--tc-display); color: var(--tc-ink); }
.tc-root .cnt-detail dd { margin: 0; line-height: 1.5; color: var(--tc-ink-2); overflow-wrap: anywhere; }

/* Phones: a narrower card edge and smaller tiles, so the email address keeps to one line down to 320px */
@media (max-width: 479.98px) {
  .tc-root .cnt-details { padding: 20px 16px; }
  .cnt-detail { padding-left: 56px; }
  .cnt-detail__icon { width: 42px; height: 42px; font-size: 1.25rem; }
}

/* Keyboard focus on the map: Leaflet writes an inline outline:none on the zoom buttons, attribution link and marker it
   focuses (its preventOutline), which left only the faint yellow halo. An ink ring wins with !important; inside the
   controls' edge, so the map's rounded corner can't clip it */
/* The map itself takes focus too (arrow keys pan it): its ring goes inside, as the frame clips anything outside */
.cnt-root .cnt-map.leaflet-container:focus-visible { outline: 3px solid var(--tc-ink) !important; outline-offset: -3px; box-shadow: none; }
.cnt-root .cnt-map .leaflet-control a:focus-visible { outline: 3px solid var(--tc-ink) !important; outline-offset: -3px; box-shadow: none; }
.cnt-root .cnt-map .leaflet-marker-icon:focus-visible { outline: 3px solid var(--tc-ink) !important; outline-offset: 2px; box-shadow: 0 0 0 7px var(--tc-yellow); }