/* ============================================================
   Knights Monumental AME Church — Stylesheet
   KnightsMonumentalAME.org
   Built by DeVoe Creative Technology Group, INC.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=DM+Serif+Display:ital@0;1&family=DM+Sans:wght@400;500;600&display=swap');

/* ─── Variables ─────────────────────────────────────────────── */
:root {
    /* AME Brand Colors */
    --kmc-black:            #000000;   /* header background, primary dark */
    --kmc-black-mid:        #1a1a1a;   /* body text, slightly softer */
    --kmc-black-soft:       #2a2a2a;   /* card backgrounds on dark sections */
    --kmc-red:              #c3040c;   /* primary accent — buttons, highlights */
    --kmc-red-dark:         #9a0309;   /* red hover state */
    --kmc-green:            #277a29;   /* decorative only — borders, stripes, button bg */
    --kmc-green-dark:       #1d5c1f;   /* green button hover */
    --kmc-green-icon:       #3a9e3d;   /* icon green on dark bg — 6.1:1 on black */
    --kmc-text-on-dark:     #d4d4d4;   /* eyebrow/subtitle text on black — 11:1 on #000 */
    --kmc-text-on-light:    #555555;   /* eyebrow/role text on white/off-white — 7.3:1 */

    /* Neutrals */
    --kmc-white:            #ffffff;
    --kmc-off-white:        #f5f5f5;   /* alternating section backgrounds */
    --kmc-warm-white:       #fafafa;
    --kmc-border-light:     #e0e0e0;   /* light-bg section borders */
    --kmc-muted:            #c8c8c8;   /* footer text, subdued text on dark */
    --kmc-muted-mid:        #aaaaaa;   /* footer copy on black — 4.6:1 */
    --kmc-body-text:        #1a1a1a;   /* body paragraphs — near-black */
    --kmc-subtext:          #444444;   /* secondary paragraphs */

    /* System / Alert */
    --kmc-focus-ring:       #c3040c;   /* red focus ring on light backgrounds */
    --kmc-focus-ring-dark:  #ffffff;   /* white focus ring on dark backgrounds */

    /* Typography */
    --kmc-font-display:     'DM Serif Display', Georgia, serif;
    --kmc-font-body:        'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif;

    /* Layout */
    --kmc-max-width:        1160px;
    --kmc-radius:           6px;
    --kmc-radius-lg:        14px;
    --kmc-transition:       0.2s ease;
}

/* ─── Reset & Base ──────────────────────────────────────────── */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html { scroll-behavior: smooth; }

body {
    font-family: var(--kmc-font-body);
    font-size: 16px;
    line-height: 1.6;
    color: var(--kmc-body-text);
    background-color: var(--kmc-white);
    -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }
ul  { list-style: none; }

a {
    color: var(--kmc-red);
    text-decoration: underline;
    transition: color var(--kmc-transition);
}
a:hover { color: var(--kmc-red-dark); }

/* ─── Global Focus Styles ───────────────────────────────────── */
*:focus-visible {
    outline: 3px solid var(--kmc-focus-ring);
    outline-offset: 3px;
    border-radius: var(--kmc-radius);
}

.kmc-dark-bg *:not(.kmc-nav__list.is-open *):focus-visible {
    outline: 3px solid var(--kmc-focus-ring-dark);
}

*:focus:not(:focus-visible) {
    outline: none;
}

/* ─── Skip Link ─────────────────────────────────────────────── */
.kmc-skip-link {
    position: absolute;
    top: -100px;
    left: 0;
    background: var(--kmc-red);
    color: var(--kmc-white);
    padding: 12px 20px;
    margin: 5px;
    font-weight: 600;
    text-decoration: none;
    z-index: 9999;
    transition: top var(--kmc-transition);
    font-family: var(--kmc-font-body);
}
.kmc-skip-link:focus,
.kmc-skip-link:focus-visible {
    top: 5px;
    left: 5px;
    color: var(--kmc-white);
    outline-color: var(--kmc-white);
}

/* ─── Visually Hidden ───────────────────────────────────────── */
.kmc-visually-hidden {
    position: absolute !important;
    height: 1px;
    width: 1px;
    overflow: hidden;
    clip: rect(1px, 1px, 1px, 1px);
    clip-path: none;
    top: -1px;
}

/* ─── Headings ──────────────────────────────────────────────── */
h1, h2, h3, h4 {
    font-family: var(--kmc-font-display);
    line-height: 1.2;
    color: var(--kmc-black);
}

h1 { font-size: clamp(2.2rem, 5vw, 3.4rem); }
h2 { font-size: clamp(1.7rem, 3.5vw, 2.4rem); }
h3 { font-size: clamp(1.15rem, 2.5vw, 1.4rem); }

p {
    font-size: 1rem;
    line-height: 1.75;
    color: var(--kmc-body-text);
}

/* ─── Layout Helpers ────────────────────────────────────────── */
.kmc-container {
    max-width: var(--kmc-max-width);
    margin-inline: auto;
    padding-inline: 24px;
}

.kmc-section {
    padding-block: 88px;
}

.kmc-section--alt {
    background-color: var(--kmc-off-white);
}

.kmc-section--dark {
    background-color: var(--kmc-black);
}

/* Green top border accent on alternating sections */
.kmc-section--accent-top {
    border-top: 4px solid var(--kmc-green);
}

.kmc-section-eyebrow {
    display: inline-block;
    font-family: var(--kmc-font-body);
    font-size: 1rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--kmc-text-on-light);
    margin-bottom: 12px;
}

.kmc-section--dark .kmc-section-eyebrow {
    color: var(--kmc-text-on-dark);
}

.kmc-section-heading {
    margin-bottom: 12px;
}

/* Red underline accent on section headings */
.kmc-section-heading::after {
    content: '';
    display: block;
    width: 48px;
    height: 3px;
    background-color: var(--kmc-red);
    margin-top: 14px;
}

.kmc-section-intro {
    font-size: 1.05rem;
    max-width: 680px;
    margin-top: 24px;
    margin-bottom: 48px;
    color: var(--kmc-subtext);
}

/* ─── Header ────────────────────────────────────────────────── */
.kmc-header {
    position: sticky;
    top: 0;
    z-index: 100;
    background-color: var(--kmc-black);
    border-bottom: 3px solid var(--kmc-red);
    padding-block: 10px;
}

.kmc-header__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
}

.kmc-header__brand {
    display: flex;
    align-items: center;
    gap: 14px;
    text-decoration: none;
    flex-shrink: 0;
}

.kmc-header__brand:hover {
    text-decoration: none;
}

.kmc-header__logo {
    height: 88px;
    width: auto;
    flex-shrink: 0;
    background-color: var(--kmc-white);
    padding: 7px;
    border-radius: var(--kmc-radius);
}

.kmc-header__brand-text {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.kmc-header__brand-name {
    font-family: var(--kmc-font-display);
    font-size: 1.75rem;
    color: var(--kmc-white);
    line-height: 1.2;
    letter-spacing: 0.01em;
}

.kmc-header__brand-sub {
    font-family: var(--kmc-font-body);
    font-size: 1rem;
    font-weight: 600;
    color: var(--kmc-text-on-dark);
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

/* ─── Navigation ────────────────────────────────────────────── */
.kmc-nav__list {
    display: flex;
    align-items: center;
    gap: 4px;
}



.kmc-nav__list a {
    display: inline-block;
    padding: 8px 14px;
    font-size: 1rem;
    font-weight: 600;
    color: var(--kmc-muted);
    text-decoration: none;
    border-radius: var(--kmc-radius);
    transition: color var(--kmc-transition), background-color var(--kmc-transition);
}

@media (min-width: 1200px) {
	.kmc-nav__list a {
		font-size: 1.125rem;
	}
}

.kmc-nav__list a:hover {
    color: var(--kmc-white);
    background-color: #2a2a2a;
}

.kmc-nav__cta {
    background-color: var(--kmc-red) !important;
    color: var(--kmc-white) !important;
    padding: 8px 20px !important;
}

.kmc-nav__cta:hover {
    background-color: var(--kmc-red-dark) !important;
    color: var(--kmc-white) !important;
}

/* Mobile toggle */
.kmc-nav-toggle {
    display: none;
    background: none;
    border: 2px solid #555555;
    border-radius: var(--kmc-radius);
    color: var(--kmc-white);
    padding: 7px 12px;
    font-size: 1rem;
    font-weight: 600;
    font-family: var(--kmc-font-body);
    cursor: pointer;
    align-items: center;
    gap: 8px;
}

.kmc-nav-toggle:hover {
    border-color: var(--kmc-muted);
    background-color: #2a2a2a;
}

/* ─── Hero / Welcome Banner ─────────────────────────────────── */
.kmc-hero {
    background-color: var(--kmc-black);
    background-image:
        radial-gradient(ellipse 80% 60% at 70% 40%, #c3040c14 0%, transparent 65%),
        radial-gradient(ellipse 50% 50% at 5% 90%, #1a1a1a 0%, transparent 55%);
    padding-block: 96px 88px;
    position: relative;
    overflow: hidden;
}

/* Subtle cross-hatch texture */
.kmc-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: radial-gradient(circle, #ffffff08 1px, transparent 1px);
    background-size: 32px 32px;
    pointer-events: none;
}

/* Green top stripe */
.kmc-hero::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(to right, var(--kmc-green) 0%, var(--kmc-green) 50%, var(--kmc-red) 50%, var(--kmc-red) 100%);
}

.kmc-hero__inner {
    position: relative;
    max-width: 760px;
}

.kmc-hero__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--kmc-text-on-dark);
    margin-bottom: 24px;
}

.kmc-hero__eyebrow::before {
    content: '';
    display: inline-block;
    width: 28px;
    height: 2px;
    background-color: var(--kmc-green);
    flex-shrink: 0;
}

.kmc-hero h1 {
    color: var(--kmc-white);
    margin-bottom: 24px;
}

.kmc-hero h1 em {
    font-style: italic;
    color: #e8b8b8;
}

.kmc-hero__lead {
    font-size: 1.15rem;
    line-height: 1.75;
    color: var(--kmc-muted);
    font-weight: 600;
    max-width: 620px;
    margin-bottom: 40px;
}

.kmc-hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    align-items: center;
}

/* ─── Buttons ───────────────────────────────────────────────── */
.kmc-btn {
    display: inline-block;
    padding: 14px 28px;
    font-family: var(--kmc-font-body);
    font-size: 1rem;
    font-weight: 600;
    text-decoration: none;
    border-radius: var(--kmc-radius);
    cursor: pointer;
    transition: background-color var(--kmc-transition), color var(--kmc-transition), transform var(--kmc-transition);
    border: 2px solid transparent;
    line-height: 1.4;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.kmc-btn:hover {
    transform: translateY(-1px);
    text-decoration: none;
}

.kmc-btn--primary {
    background-color: var(--kmc-red);
    color: var(--kmc-white);
    border-color: var(--kmc-red);
}

.kmc-btn--primary:hover {
    background-color: var(--kmc-red-dark);
    border-color: var(--kmc-red-dark);
    color: var(--kmc-white);
}

.kmc-btn--outline-light {
    background-color: transparent;
    color: var(--kmc-white);
    border-color: #555555;
}

.kmc-btn--outline-light:hover {
    background-color: #2a2a2a;
    color: var(--kmc-white);
    border-color: var(--kmc-muted);
}

.kmc-btn--green {
    background-color: var(--kmc-green);
    color: var(--kmc-white);
    border-color: var(--kmc-green);
}

.kmc-btn--green:hover {
    background-color: var(--kmc-green-dark);
    border-color: var(--kmc-green-dark);
    color: var(--kmc-white);
}

/* ─── Welcome Section ───────────────────────────────────────── */
.kmc-welcome {
    padding-block: 88px;
    border-top: 4px solid var(--kmc-green);
}

.kmc-welcome__inner {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 72px;
    align-items: center;
}

/* Church building photo placeholder */
.kmc-photo-placeholder {
    background-color: var(--kmc-off-white);
    border: 2px dashed var(--kmc-border-light);
    border-radius: var(--kmc-radius-lg);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    color: var(--kmc-muted-mid);
    font-family: var(--kmc-font-body);
    font-size: 1rem;
    font-weight: 500;
    text-align: center;
    padding: 40px 24px;
}

.kmc-photo-placeholder svg {
    width: 48px;
    height: 48px;
    color: var(--kmc-border-light);
}

.kmc-photo-placeholder span {
    font-size: 1rem;
    color: var(--kmc-muted-mid);
}

/* Church building photo — landscape */
.kmc-photo-placeholder--church {
    aspect-ratio: 16 / 10;
}

/* Pastor headshot — portrait */
.kmc-photo-placeholder--pastor {
    aspect-ratio: 3 / 4;
    width: 100%;
    max-width: 280px;
}

/* Real photo once added */
.kmc-church-photo,
.kmc-pastor-photo {
    border-radius: var(--kmc-radius-lg);
    width: 100%;
    height: auto;
    object-fit: cover;
}

.kmc-church-photo {
    aspect-ratio: 16 / 10;
}

.kmc-pastor-photo {
    aspect-ratio: 3 / 4;
    max-width: 280px;
    object-fit: cover;
}

/* ─── Ministry Staff Section ────────────────────────────────── */
.kmc-staff {
    padding-block: 88px;
    background-color: var(--kmc-off-white);
    border-top: 4px solid var(--kmc-red);
}

.kmc-staff__inner {
    display: grid;
    grid-template-columns: 280px 1fr;
    gap: 64px;
    align-items: start;
}

.kmc-staff__photo-col {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
}

.kmc-staff__photo-caption {
    font-size: 1rem;
    color: var(--kmc-subtext);
    font-style: italic;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    width: 100%;
}

.kmc-staff__list {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.kmc-staff__item {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding-block: 18px;
    border-bottom: 1px solid var(--kmc-border-light);
}

.kmc-staff__item:first-child {
    padding-top: 0;
}

.kmc-staff__item:last-child {
    border-bottom: none;
}

.kmc-staff__name {
    font-family: var(--kmc-font-display);
    font-size: 1.15rem;
    color: var(--kmc-black);
    line-height: 1.3;
}

.kmc-staff__role {
    font-size: 1rem;
    color: var(--kmc-text-on-light);
    font-weight: 500;
}

/* First item (Senior Pastor) visually emphasized */
.kmc-staff__item--senior .kmc-staff__name {
    font-size: 1.3rem;
    color: var(--kmc-black);
}

.kmc-staff__item--senior .kmc-staff__role {
    color: var(--kmc-red);
    font-weight: 600;
}

/* Prelate / Bishop styling */
.kmc-staff__item--prelate .kmc-staff__name {
    font-size: 1.05rem;
}

.kmc-staff__item--prelate .kmc-staff__role {
    color: var(--kmc-black-soft);
}

/* ─── Schedule Section ──────────────────────────────────────── */
.kmc-schedule {
    padding-block: 88px;
    background-color: var(--kmc-white);
    border-top: 4px solid var(--kmc-green);
}

.kmc-schedule__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 28px;
    margin-top: 48px;
}

.kmc-schedule-card {
    background-color: var(--kmc-off-white);
    border-radius: var(--kmc-radius-lg);
    padding: 32px 28px;
    border-left: 4px solid var(--kmc-green);
}

.kmc-schedule-card--red {
    border-left-color: var(--kmc-red);
}

.kmc-schedule-card__icon {
    width: 44px;
    height: 44px;
    background-color: var(--kmc-white);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 16px;
    border: 1px solid var(--kmc-border-light);
}

.kmc-schedule-card__icon svg {
    width: 22px;
    height: 22px;
    color: var(--kmc-green);
}

.kmc-schedule-card--red .kmc-schedule-card__icon svg {
    color: var(--kmc-red);
}

.kmc-schedule-card h3 {
    font-size: 1.2rem;
    color: var(--kmc-black);
    margin-bottom: 10px;
}

.kmc-schedule-card__time {
    font-size: 1rem;
    font-weight: 600;
    color: var(--kmc-body-text);
    margin-bottom: 8px;
}

.kmc-schedule-card__detail {
    font-size: 1rem;
    color: var(--kmc-subtext);
    line-height: 1.6;
}

.kmc-schedule-card__conf {
    margin-top: 12px;
    padding: 12px 14px;
    background-color: var(--kmc-white);
    border-radius: var(--kmc-radius);
    border: 1px solid var(--kmc-border-light);
}

.kmc-schedule-card__conf p {
    font-size: 1rem;
    color: var(--kmc-subtext);
    margin: 0;
    line-height: 1.5;
}

.kmc-schedule-card__conf strong {
    color: var(--kmc-body-text);
}

/* ─── Location / Directions Section ────────────────────────── */
.kmc-location {
    padding-block: 88px;
    background-color: var(--kmc-black);
    border-top: 4px solid var(--kmc-red);
}

.kmc-location__inner {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 64px;
    align-items: start;
}

.kmc-location h2 {
    color: var(--kmc-white);
}

.kmc-location h2::after {
    background-color: var(--kmc-green);
}

.kmc-location .kmc-section-eyebrow {
    color: var(--kmc-text-on-dark);
}

.kmc-location__address {
    margin-top: 28px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.kmc-location__info-item {
    display: flex;
    align-items: flex-start;
    gap: 14px;
}

.kmc-location__info-icon {
    width: 44px;
    height: 44px;
    background-color: #2a2a2a;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.kmc-location__info-icon svg {
    width: 20px;
    height: 20px;
    color: var(--kmc-green-icon);
}

.kmc-location__info-text strong {
    display: block;
    font-size: 1rem;
    font-weight: 700;
    color: var(--kmc-white);
    margin-bottom: 4px;
}

.kmc-location__info-text span,
.kmc-location__info-text a {
    font-size: 1rem;
    font-weight: 600;
    color: var(--kmc-muted);
    line-height: 1.5;
}

.kmc-location__info-text a {
    color: var(--kmc-muted);
    text-decoration: underline;
}

.kmc-location__info-text a:hover {
    color: var(--kmc-white);
}

.kmc-map-wrap {
    border-radius: var(--kmc-radius-lg);
    overflow: hidden;
    border: 2px solid #333333;
    aspect-ratio: 4 / 3;
}

.kmc-map-wrap iframe {
    width: 100%;
    height: 100%;
    border: none;
    display: block;
}

/* ─── Contact Section ───────────────────────────────────────── */
.kmc-contact {
    padding-block: 88px;
    background-color: var(--kmc-white);
    border-top: 4px solid var(--kmc-green);
}

.kmc-contact__inner {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 80px;
    align-items: start;
}

.kmc-contact h2 {
    color: var(--kmc-black);
    margin-bottom: 12px;
}

.kmc-contact__info-list {
    margin-top: 32px;
    display: flex;
    flex-direction: column;
    gap: 22px;
}

.kmc-contact__info-item {
    display: flex;
    align-items: flex-start;
    gap: 14px;
}

.kmc-contact__info-icon {
    width: 44px;
    height: 44px;
    background-color: var(--kmc-off-white);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    border: 1px solid var(--kmc-border-light);
}

.kmc-contact__info-icon svg {
    width: 20px;
    height: 20px;
    color: var(--kmc-red);
}

.kmc-contact__info-text strong {
    display: block;
    font-size: 1rem;
    font-weight: 600;
    color: var(--kmc-black);
    margin-bottom: 2px;
}

.kmc-contact__info-text span,
.kmc-contact__info-text a {
    font-size: 1rem;
    color: var(--kmc-subtext);
}

.kmc-contact__info-text a {
    color: var(--kmc-red);
}

.kmc-contact__info-text a:hover {
    color: var(--kmc-red-dark);
}

/* CTA card — dark */
.kmc-contact__card {
    background-color: var(--kmc-black);
    border-radius: var(--kmc-radius-lg);
    padding: 44px 40px;
    border-top: 3px solid var(--kmc-red);
}

.kmc-contact__card h3 {
    color: var(--kmc-white);
    font-size: 1.5rem;
    margin-bottom: 12px;
}

.kmc-contact__card p {
    color: var(--kmc-muted);
    font-weight: 600;
    margin-bottom: 28px;
    font-size: 1.05rem;
}

.kmc-contact__card .kmc-btn--primary {
    width: 100%;
    font-size: 1.05rem;
    padding: 16px 28px;
}

.kmc-contact__divider {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-block: 24px;
}

.kmc-contact__divider::before,
.kmc-contact__divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background-color: #333333;
}

.kmc-contact__divider span {
    font-size: 1rem;
    font-weight: 600;
    color: var(--kmc-muted-mid);
    white-space: nowrap;
}

.kmc-contact__detail {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 1rem;
    font-weight: 600;
    color: var(--kmc-muted);
}

.kmc-contact__detail svg {
    width: 18px;
    height: 18px;
    color: var(--kmc-green-icon);
    flex-shrink: 0;
}

.kmc-contact__detail a {
    color: var(--kmc-muted);
    text-decoration: underline;
}

.kmc-contact__detail a:hover {
    color: var(--kmc-white);
}

/* ─── Footer ────────────────────────────────────────────────── */
.kmc-footer {
    background-color: var(--kmc-black);
    border-top: 3px solid var(--kmc-green);
    padding-block: 40px;
}

.kmc-footer__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    flex-wrap: wrap;
}

.kmc-footer__brand {
    display: flex;
    align-items: center;
    gap: 12px;
    text-decoration: none;
}

.kmc-footer__brand:hover {
    text-decoration: none;
}

.kmc-footer__logo-img {
    height: 72px;
    width: auto;
    background-color: var(--kmc-white);
    padding: 6px;
    border-radius: var(--kmc-radius);
}

.kmc-footer__brand-name {
    font-family: var(--kmc-font-body);
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--kmc-white);
    line-height: 1.3;
}

.kmc-footer__copy {
    font-size: 14px;
    font-weight: 600;
    color: var(--kmc-muted-mid);
    text-align: center;
    line-height: 1.5;
}

.kmc-footer__copy a {
    color: var(--kmc-muted);
    text-decoration: underline;
    font-size: 14px;
}

.kmc-footer__copy a:hover {
    color: var(--kmc-white);
}

.kmc-footer__links {
    display: flex;
    gap: 20px;
}

.kmc-footer__links a {
    font-size: 1rem;
    font-weight: 600;
    color: var(--kmc-muted-mid);
    text-decoration: none;
}

.kmc-footer__links a:hover {
    color: var(--kmc-muted);
}

/* ─── Email link ────────────────────────────────────────────── */
.kmc-email-link {
    color: var(--kmc-red);
    text-decoration: underline;
}

.kmc-email-link:hover {
    color: var(--kmc-red-dark);
}

/* ─── Responsive — 1024px (mobile nav) ─────────────────────── */
@media (max-width: 1024px) {
    .kmc-nav__list {
        display: none;
    }

    .kmc-nav-toggle {
        display: flex;
        margin-left: auto;
    }

    /* Mobile open state */
    .kmc-nav__list.is-open {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        background-color: #f5f5f5;
        border-top: 1px solid #cccccc;
        border-bottom: 3px solid var(--kmc-red);
        padding: 0;
        gap: 0;
        z-index: 99;
    }

    .kmc-nav__list.is-open li {
        border-bottom: 1px solid #cccccc;
		padding: .75rem;
    }

    .kmc-nav__list.is-open li:last-child {
        border-bottom: none;
    }

    .kmc-nav__list.is-open a {
        padding: .5rem;
        color: #1a1a1a;
        font-weight: 600;
		width: 100%;
    }

    .kmc-nav__list.is-open a:hover {
        background-color: #e8e8e8;
        color: #000000;
    }

    .kmc-nav__list.is-open .kmc-nav__cta {
        background-color: var(--kmc-red) !important;
        color: var(--kmc-white) !important;
        margin: .75rem .5rem;
        border-radius: var(--kmc-radius);
        text-align: center;
		width: auto;
    }

    .kmc-nav__list.is-open .kmc-nav__cta:hover {
        background-color: var(--kmc-red-dark) !important;
    }

    .kmc-header {
        position: relative;
    }
}

/* ─── Responsive — 900px ────────────────────────────────────── */
@media (max-width: 900px) {
    .kmc-welcome__inner,
    .kmc-staff__inner,
    .kmc-location__inner,
    .kmc-contact__inner {
        grid-template-columns: 1fr;
        gap: 48px;
    }

    .kmc-staff__photo-col {
        align-items: center;
    }

    .kmc-photo-placeholder--pastor,
    .kmc-pastor-photo {
        max-width: 240px;
    }

    .kmc-schedule__grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .kmc-map-wrap {
        aspect-ratio: 4 / 3;
    }

    /* Skip link on tablet */
    .kmc-skip-link:focus-visible {
        position: relative;
        display: inline-block;
        margin: 0 0 1rem;
        top: 0;
        left: 10px;
    }
}

/* ─── Responsive — 700px ────────────────────────────────────── */
@media (max-width: 700px) {
    .kmc-section,
    .kmc-welcome,
    .kmc-staff,
    .kmc-schedule,
    .kmc-location,
    .kmc-contact {
        padding-block: 64px;
    }

    .kmc-hero {
        padding-block: 72px 64px;
    }

    .kmc-email-link {
        overflow-wrap: break-word;
        word-wrap: break-word;
        word-break: break-word;
    }

    .kmc-footer__inner {
        flex-direction: column;
        text-align: center;
        gap: 16px;
    }
}

/* ─── Responsive — 480px ────────────────────────────────────── */
@media (max-width: 480px) {
    .kmc-header .kmc-container {
        padding: 0.25rem;
    }
	
	.kmc-container {
        padding-inline: 1rem;
    }

    .kmc-header__inner {
		flex-direction: column;
        gap: 0.5rem;
		align-items: flex-start;
		padding: 0 1rem;
    }

    .kmc-header__brand-name {
        font-size: 1.5rem
    }

	.kmc-header__brand-sub {
        font-size: 0.875rem;
    }
	.kmc-nav-toggle  {
		font-size:1.125rem;
	}
    .kmc-hero {
        padding-block: 48px 40px;
    }

    .kmc-hero h1 {
        font-size: 1.8rem;
    }

    .kmc-hero__actions {
        flex-direction: column;
        align-items: flex-start;
    }

    .kmc-hero__actions .kmc-btn {
        width: 100%;
        text-align: center;
    }

    .kmc-welcome,
    .kmc-staff,
    .kmc-schedule,
    .kmc-location,
    .kmc-contact {
        padding-block: 48px;
    }

    .kmc-contact__card {
        padding: 28px 20px;
    }

    .kmc-schedule-card {
        padding: 24px 20px;
    }
}