/* =========================================================
   TCS Child Theme – main.css
   Base component styles for all pages.
   ========================================================= */

/* ─── CSS Custom Properties – Brand‑aligned & accessible ──── */
:root {
    /* Semantic brand colours (from Customizer) */
    --color-primary:        #5900a8;
    --color-primary-hover:  #6778a9;
    --color-secondary:      #917aa6;
    --color-dark:           #0a0a0a;
    --color-light:          #faf8f5;
    --color-white:          #ffffff;
    --color-black:          #000000;
    --color-border:         #e5e5e5;
    --color-text-muted:     #666666;
    --color-focus-ring:     var(--color-primary);

    /* Additional brand alias (kept for consistency with customizer) */
    --color-error:          #ff3931;

    --section-pad-y:        2rem;
    --section-pad-y-lg:     6rem;
    --container-px:         1.25rem;
    --container-max:        1280px;

    /* New fonts */
    --font-body:            'Plus Jakarta Sans', 'Helvetica Neue', Arial, sans-serif;
    --font-display:         'Playfair Display', serif;

    --ease-out:             cubic-bezier(0.16, 1, 0.3, 1);
    --duration:             220ms;

    /* Page background */
    --tcs-body-bg:          var(--color-light);

    /* Proportional small text sizes based on Customizer body size */
    --font-size-sm:   calc(var(--font-size-body) * 0.8);
    --font-size-xs:   calc(var(--font-size-body) * 0.7);
    --font-size-2xs:  calc(var(--font-size-body) * 0.6);
}

/* ─── Base / Reset additions ─────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
    font-family: var(--font-body);
    color: var(--color-black);
    background: var(--tcs-body-bg);
    -webkit-font-smoothing: antialiased;
    font-size: var(--font-size-body, 1.125rem) !important;
}

img { max-width: 100%; height: auto; display: block; }

/* ─── Layout helpers ─────────────────────────────────────── */
.container {
    width: 100%;
    max-width: var(--container-max);
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--container-px);
    padding-right: var(--container-px);
}

@media (min-width: 768px)  { :root { --container-px: 2rem; } }
@media (min-width: 1024px) { :root { --container-px: 3rem; } }
@media (min-width: 1280px) { :root { --container-px: 4rem; } }

.hidden { display: none !important; }

/* ─── Typography ─────────────────────────────────────────── */
.h1, h1 {
    font-family: var(--font-display);
    font-size: var(--font-size-h1, clamp(2.5rem, 6vw, 4.5rem)) !important;
    line-height: 1.1;
    font-weight: 900;
}
.h2, h2 {
    font-family: var(--font-display);
    font-size: var(--font-size-h2, clamp(1.75rem, 4vw, 3.5rem)) !important;
    line-height: 1.15;
    font-weight: 700;
}
.h3, h3 {
    font-family: var(--font-display);
    font-size: var(--font-size-h3, clamp(1.375rem, 3vw, 2.25rem)) !important;
    line-height: 1.2;
    font-weight: 700;
}
.h4, h4 {
    font-family: var(--font-display);
    font-size: var(--font-size-h4, clamp(1.125rem, 2vw, 1.5rem)) !important;
    line-height: 1.3;
    font-weight: 700;
}
.h5, h5 {
    font-size: var(--font-size-h5, 1.0625rem) !important;
    line-height: 1.4;
    font-weight: 600;
}
.h6, h6 {
    font-size: var(--font-size-h6, 1rem) !important;
    line-height: 1.4;
    font-weight: 600;
}

/* ─── Global link styles ─────────────────────────────────── */
a {
    text-decoration: underline;
    color: inherit;
}
a:hover,
a:focus {
    color: var(--color-primary) !important;
    text-decoration: underline;
    outline: none !important;
}
a:focus-visible {
    outline: 3px solid var(--color-primary) !important;
    outline-offset: 2px !important;
}
a:visited {
    color: inherit !important;
}

/* ─── Responsive body text (mobile scaling) ──────────────── */
p,
li,
td,
th,
.wp-block-paragraph,
.c-info-section__col p,
.c-info-section__col li {
    font-size: clamp(
        1rem,
        4vw,
        var(--font-size-body, 1.7rem)
    ) !important;
}

/* ─── Global list‑item reset ─────────────────────────────── */
main li:not(.c-primary-nav li):not(.c-info-section__col li),
.o-page li:not(.c-primary-nav li):not(.c-info-section__col li) {
    display: list-item !important;
    text-align: inherit !important;
    float: none !important;
    clear: none !important;
}

main li a:not(.c-primary-nav a):not(.c-info-section__col a),
.o-page li a:not(.c-primary-nav a):not(.c-info-section__col a) {
    display: inline !important;
    float: none !important;
    vertical-align: baseline !important;
}

/* ─── Buttons ────────────────────────────────────────────── */
.c-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .625rem;
    padding: 1rem 1.5rem;
    font-size: 1rem;
    font-weight: 700;
    text-decoration: none;
    border: 3px solid transparent;
    cursor: pointer;
    transition: background var(--duration) var(--ease-out),
                color var(--duration) var(--ease-out),
                border-color var(--duration) var(--ease-out);
    line-height: 1;
    white-space: nowrap;
}

.c-button--primary {
    background: var(--color-black);
    color: var(--color-white);
    border-color: var(--color-black);
}
.c-button--primary:hover {
    background: transparent;
    color: var(--color-black);
}

.c-button--secondary {
    background: transparent;
    color: var(--color-black);
    border-color: var(--color-black);
}
.c-button--secondary:hover {
    background: var(--color-black);
    color: var(--color-white);
}

.c-button--tertiary {
    background: var(--color-primary);
    color: var(--color-black);
    border-color: var(--color-primary);
}
.c-button--tertiary:hover {
    background: var(--color-primary-hover);
    border-color: var(--color-primary-hover);
}

.c-button--white {
    background: var(--color-white);
    color: var(--color-black);
    border-color: var(--color-white);
}
.c-button--white:hover {
    background: transparent;
    color: var(--color-white);
}

.c-button--thin { padding-top: .75rem; padding-bottom: .75rem; }

/* ─── Page header (wraps sticky nav) ─────────────────────── */
.c-page-header {
    position: sticky;
    top: 0;
    z-index: 500;
    height: var(--nav-height, 3.75rem);
}

/* ─── Sections base ──────────────────────────────────────── */
.c-slice { position: relative; }

/* ==========================================================
   SLICE DIVIDER
   ========================================================== */
.c-slice-divider {
    height: .5rem;
    background: var(--color-primary);
    overflow: hidden;
    position: relative;
}

.c-slice-divider--tall { height: 4rem; }
.c-slice-divider--dark { background: var(--color-dark); }

.c-slice-divider--wave::after {
    content: '';
    position: absolute;
    bottom: -1px;
    left: 0;
    right: 0;
    height: 2rem;
    background: var(--color-white);
    clip-path: ellipse(51% 100% at 50% 100%);
}

/* ==========================================================
   ACCESSIBILITY & UTILITIES
   ========================================================== */
:focus-visible {
    outline: 3px solid var(--color-primary);
    outline-offset: 2px;
}

/* Skip link */
.skip-link {
    position: absolute;
    top: -100%;
    left: 1rem;
    z-index: 9999;
    padding: .625rem 1rem;
    background: var(--color-primary);
    color: var(--color-black);
    font-weight: 700;
    text-decoration: none;
    transition: top var(--duration);
}

.skip-link:focus { top: 1rem; }

/* Reduced motion override for all transitions */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
    }
}

/* Secondary button – outline, uses brand primary colour */
.c-btn-secondary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.85rem 1.75rem;
    font-size: var(--font-size-body);
    font-weight: 700;
    font-family: var(--font-body);
    color: var(--color-primary);
    background: transparent;
    border: 2px solid var(--color-primary);
    border-radius: 999px;
    text-decoration: none;
    line-height: 1.2;
    transition: background 0.22s ease, color 0.22s ease;
}

.c-btn-secondary:hover {
    background: var(--color-primary);
    color: var(--color-white);
}

/* Global accent style – use anywhere with <span class="c-script-underline"> */
.c-script-underline {
    font-style: italic;
    color: var(--color-primary);
}

body .o-page main,
.about-page-content,
.contact-page-content,
.donations-page-content {
    padding-top: 4rem;
}