/* =============================================================================
   contact.css — the Contact page (/contact). Semantic HTML on tokens, mirroring
   the original Elementor design:
     • "Contact us" eyebrow — Montserrat 55/700 uppercase #44ACAF, centred.
     • "get in touch" — Montserrat 29/700 uppercase #0F0F0F, left teal rule.
       Address block + Google map side by side on desktop, stacked on mobile.
     • "OUR SCHOOLS" — Montserrat 35/700 #44ACAF, #B98E7F divider, then a grid
       of school cards (image + address + map link), 2-up desktop / 1-up mobile.
   Fixed pixel heights are replaced with clamp()/min-height so desktop matches the
   live site while phones scale. No horizontal overflow; visible :focus-visible.
   ============================================================================= */
.kk-contact {
    --kk-contact-teal: #44ACAF;
    --kk-contact-divider: #B98E7F;
    --kk-contact-ink: #0F0F0F;
    --kk-contact-font: "Montserrat", var(--kk-font-heading);
    --kk-contact-radius: 15px;
    color: #333;
    overflow-wrap: break-word;
}
.kk-contact * { box-sizing: border-box; }
.kk-contact img { max-width: 100%; }
.kk-contact section { max-width: var(--kk-content-max); margin: 0 auto; padding: 40px var(--kk-space-sm); }

.kk-contact a:focus-visible,
.kk-contact button:focus-visible {
    outline: 2px solid var(--kk-contact-teal);
    outline-offset: 2px;
    border-radius: 3px;
}

/* -- Intro ----------------------------------------------------------------- */
.kk-contact__intro { text-align: center; padding-bottom: 8px; }
.kk-contact__eyebrow {
    font-family: var(--kk-contact-font);
    font-size: clamp(30px, 6vw, 55px);
    font-weight: 700; text-transform: uppercase; line-height: 1.05;
    color: var(--kk-contact-teal); margin: 0;
}
/* Real page <h1> — present for SEO/a11y, visually suppressed like the original. */
.kk-contact__h1 {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* -- Get in touch (address + map) ------------------------------------------ */
.kk-contact__heading {
    font-family: var(--kk-contact-font);
    font-size: clamp(22px, 4vw, 29px);
    font-weight: 700; text-transform: uppercase; color: var(--kk-contact-ink);
    padding: 5px 0 5px 10px; border-left: 3px solid var(--kk-contact-teal);
    margin: 0 0 24px;
}
.kk-contact__touch-grid {
    display: grid; grid-template-columns: 1fr; gap: var(--kk-space-lg);
    align-items: center;
}
@media (min-width: 768px) {
    .kk-contact__touch-grid { grid-template-columns: 1fr 1fr; gap: 40px; }
}

.kk-contact__ho {
    display: flex; align-items: flex-start; gap: 18px;
    font-style: normal;
    font-family: var(--kk-contact-font);
    font-size: 16px; font-weight: 500; line-height: 1.6; color: #373737;
}
.kk-contact__ho-icon { flex: 0 0 auto; color: var(--kk-contact-teal); }
.kk-contact__ho-icon svg { width: 25px; height: 25px; fill: currentColor; display: block; }
.kk-contact__ho-title {
    font-family: var(--kk-contact-font);
    font-size: 18px; font-weight: 700; color: #303030; margin: 0 0 5px;
}
.kk-contact__ho p { margin: 0; }

.kk-contact__map { width: 100%; }
.kk-contact__map iframe {
    display: block; width: 100%; border: 0;
    min-height: clamp(300px, 40vw, 425px);
    border-radius: var(--kk-contact-radius);
    box-shadow: 0 5px 10px 0 rgba(0, 0, 0, 0.19);
}

/* -- Our schools ----------------------------------------------------------- */
.kk-contact__schools-title {
    font-family: var(--kk-contact-font);
    font-size: clamp(25px, 5vw, 35px);
    font-weight: 700; color: var(--kk-contact-teal);
    text-align: center; margin: 0 0 12px;
}
.kk-contact__divider {
    width: 17%; min-width: 120px; height: 0; border: 0;
    border-top: 2px solid var(--kk-contact-divider); margin: 0 auto 32px;
}

.kk-contact__grid {
    list-style: none; margin: 0; padding: 0;
    display: grid; grid-template-columns: 1fr; gap: 28px 40px;
}
@media (min-width: 768px) {
    .kk-contact__grid { grid-template-columns: 1fr 1fr; }
}

/* Title spans the full card width on top; thumbnail (left) and address/map (right)
   sit in the row below it — same layout on mobile and desktop. */
.kk-contact__card {
    display: grid;
    grid-template-columns: minmax(0, 40%) 1fr;
    grid-template-areas: "title title" "media body";
    align-items: start; column-gap: 16px; row-gap: 12px;
}
.kk-contact__card-media { grid-area: media; width: 100%; max-width: 200px; }
.kk-contact__card-media img {
    width: 100%; height: 185px; object-fit: cover; object-position: center;
    border-radius: var(--kk-contact-radius); display: block;
}
.kk-contact__card-body { grid-area: body; min-width: 0; }
.kk-contact__card-title {
    grid-area: title;
    font-family: var(--kk-contact-font);
    font-size: clamp(16px, 2.4vw, 20px); font-weight: 700; margin: 0;
}
.kk-contact__card-title a { color: #222; text-decoration: none; }
.kk-contact__card-title a:hover { color: var(--kk-contact-teal); }
.kk-contact__card-address {
    font-family: var(--kk-contact-font);
    font-size: clamp(12px, 1.8vw, 14px); font-weight: 400; line-height: 1.5;
    color: #333; margin: 0 0 8px;
}
.kk-contact__card-address a { color: var(--kk-contact-teal); font-weight: 500; text-decoration: none; }
.kk-contact__card-address a:hover { text-decoration: underline; }
.kk-contact__card-map { margin: 0; }
.kk-contact__card-map a {
    font-family: var(--kk-contact-font);
    font-size: 13px; font-weight: 500; color: var(--kk-contact-teal);
    text-decoration: none;
}
.kk-contact__card-map a:hover { text-decoration: underline; }