/* ==========================================================================
   Contact page — email-first layout (v3.24.0)
   Template: templates/page-contact.php. Tokens from variables.css only.
   ========================================================================== */

/* The body is white on page templates; paint the whole canvas grey so the
   white cards read as cards, instead of a grey panel inside white gutters. */
body.page-template-page-contact,
body.page-template-templatespage-contact-php {
    background: var(--color-bg);
}
.pc-contact {
    background: transparent;
    padding: var(--space-2xl) 0 var(--space-3xl);
}
.pc-contact__inner {
    max-width: 1120px;
    margin: 0 auto;
    display: grid;
    gap: var(--space-xl);
}

/* Component text sets its own colour: style.css's `p { color: var(--fg2) }`
   beats inherited values (CLAUDE.md → "CSS gotcha that bit twice"). */
.pc-contact p,
.pc-contact li,
.pc-contact dd,
.pc-contact address { color: var(--fg2); }
.pc-contact strong,
.pc-contact em { color: inherit; }

/* ---- Hero ---- */
.pc-contact__hero { max-width: 720px; }
.pc-contact__eyebrow {
    font: var(--type-label-md, 600 12px/1.4 var(--font-sans));
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--color-primary) !important;
    margin: 0 0 var(--space-sm);
}
.pc-contact__title {
    font: var(--type-headline-lg);
    color: var(--fg1);
    margin: 0 0 var(--space-md);
    text-transform: none;
    letter-spacing: -0.01em;
}
.pc-contact__lede {
    font: var(--type-body-lg);
    margin: 0;
}

/* ---- Primary email card ---- */
.pc-contact__email {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: var(--space-lg);
    padding: var(--space-xl);
    border-radius: var(--radius-lg);
    background:
        radial-gradient(120% 140% at 100% 0%, rgba(201, 222, 230, .55) 0%, rgba(201, 222, 230, 0) 60%),
        var(--color-surface);
    border: 1px solid var(--color-outline-variant);
    box-shadow: var(--elevation-2);
}
.pc-contact__email-icon {
    width: 64px;
    height: 64px;
    border-radius: var(--radius-lg);
    display: grid;
    place-items: center;
    background: var(--color-primary);
    color: var(--color-on-primary);
}
.pc-contact__email-icon .material-symbols-outlined { font-size: 32px; }
.pc-contact__email-label {
    font: var(--type-title-sm);
    color: var(--fg3);
    margin: 0 0 4px;
    text-transform: uppercase;
    letter-spacing: .06em;
}
.pc-contact__email-address {
    font: var(--type-headline-md);
    color: var(--color-primary-dark);
    text-decoration: none;
    word-break: break-all;
}
.pc-contact__email-address:hover { text-decoration: underline; text-underline-offset: 4px; }
.pc-contact__email-tip {
    font: var(--type-body-md);
    margin: var(--space-sm) 0 0;
    max-width: 560px;
}
.pc-contact__email-actions {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
}

/* ---- Buttons ---- */
.pc-contact__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 44px;
    padding: 0 22px;
    border-radius: var(--radius-full);
    font: var(--type-title-sm);
    text-decoration: none;
    cursor: pointer;
    border: 1px solid transparent;
    white-space: nowrap;
    transition: background-color .15s ease, box-shadow .15s ease;
}
.pc-contact__btn .material-symbols-outlined { font-size: 20px; }
.pc-contact__btn--filled {
    background: var(--color-primary);
    color: var(--color-on-primary) !important;
}
.pc-contact__btn--filled:hover { background: var(--color-primary-dark); box-shadow: var(--elevation-1); }
.pc-contact__btn--tonal {
    background: var(--color-primary-container);
    color: var(--color-on-primary-container);
}
.pc-contact__btn--tonal:hover { box-shadow: var(--elevation-1); }
.pc-contact__btn:focus-visible { outline: 3px solid var(--color-primary); outline-offset: 2px; }

/* ---- Section titles ---- */
.pc-contact__section-title {
    font: var(--type-title-lg);
    color: var(--fg1);
    margin: 0 0 var(--space-md);
    text-transform: none;
}

/* ---- Routing cards ---- */
.pc-contact__route-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-md);
}
.pc-contact__route,
.pc-contact__card {
    background: var(--color-surface);
    border: 1px solid var(--color-outline-variant);
    border-radius: var(--radius-lg);
    box-shadow: var(--elevation-1);
}
.pc-contact__route { padding: var(--space-lg); }
.pc-contact__route-icon {
    display: inline-grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border-radius: var(--radius-sm);
    background: var(--color-primary-container);
    color: var(--color-on-primary-container);
    font-size: 22px;
    margin-bottom: var(--space-md);
}
.pc-contact__route h3 {
    font: var(--type-title-md);
    color: var(--fg1);
    margin: 0 0 6px;
    text-transform: none;
}
.pc-contact__route p { font: var(--type-body-md); margin: 0 0 var(--space-md); }
.pc-contact__route ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.pc-contact__route a {
    font: var(--type-body-md);
    font-weight: 600;
    color: var(--color-primary);
    text-decoration: none;
}
.pc-contact__route a::after { content: " →"; }
.pc-contact__route a:hover { text-decoration: underline; text-underline-offset: 3px; }

/* ---- Talk + visit split ---- */
.pc-contact__split {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: var(--space-md);
    align-items: start;
}
.pc-contact__card { padding: var(--space-lg); }

.pc-contact__channels { list-style: none; margin: 0 0 var(--space-md); padding: 0; display: grid; gap: var(--space-md); }
.pc-contact__channels li { display: flex; gap: 12px; align-items: flex-start; }
.pc-contact__channels .material-symbols-outlined { color: var(--color-primary); margin-top: 2px; }
.pc-contact__channels a { font: var(--type-title-md); color: var(--fg1); text-decoration: none; }
.pc-contact__channels a:hover { color: var(--color-primary); }
.pc-contact__channels small { display: block; font: var(--type-body-sm); color: var(--fg3); }

.pc-contact__note { font: var(--type-body-sm); color: var(--fg3) !important; margin: var(--space-md) 0 0; }

.pc-contact__subhead {
    font: var(--type-title-sm);
    color: var(--fg1);
    margin: var(--space-lg) 0 var(--space-sm);
    padding-top: var(--space-lg);
    border-top: 1px solid var(--color-outline-variant);
    text-transform: none;
}
.pc-contact__facts { margin: 0; display: grid; gap: 6px; }
.pc-contact__facts div { display: grid; grid-template-columns: 96px 1fr; gap: var(--space-sm); }
.pc-contact__facts dt { font: var(--type-body-sm); color: var(--fg3); }
.pc-contact__facts dd { margin: 0; font: var(--type-body-md); }
.pc-contact__facts code { font-family: var(--font-mono, monospace); font-size: 13px; color: var(--fg1); background: none; padding: 0; }

.pc-contact__address { font-style: normal; font: var(--type-body-md); margin: 0 0 var(--space-md); }
.pc-contact__address strong { color: var(--fg1); }

/* The map: bounded, rounded, fixed aspect ratio — no more edge-to-edge iframe. */
.pc-contact__map {
    position: relative;
    aspect-ratio: 16 / 10;
    border-radius: var(--radius-lg);
    overflow: hidden;
    background: var(--color-surface-container);
    border: 1px solid var(--color-outline-variant);
}
.pc-contact__map iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
    filter: saturate(.85);
}
.pc-contact__map-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: var(--space-sm);
    font: var(--type-title-sm);
    color: var(--color-primary);
    text-decoration: none;
}
.pc-contact__map-link .material-symbols-outlined { font-size: 18px; }

/* ---- Responsive ---- */
@media (max-width: 900px) {
    .pc-contact__email { grid-template-columns: auto 1fr; }
    .pc-contact__email-actions { grid-column: 1 / -1; flex-direction: row; flex-wrap: wrap; }
    .pc-contact__route-grid { grid-template-columns: 1fr; }
    .pc-contact__split { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
    .pc-contact { padding: var(--space-xl) var(--space-md) var(--space-2xl); }
    .pc-contact__title { font: var(--type-headline-sm); }
    .pc-contact__email { grid-template-columns: 1fr; padding: var(--space-lg); gap: var(--space-md); }
    .pc-contact__email-icon { width: 48px; height: 48px; }
    .pc-contact__email-address { font: var(--type-title-lg); }
    .pc-contact__email-actions .pc-contact__btn { flex: 1 1 100%; }
    .pc-contact__map { aspect-ratio: 4 / 3; }
}