/* ARUNA — Base / Global Reset
   Universal box-sizing reset. Must load before all other stylesheets so
   every element site-wide (including WP admin bar and plugin markup such
   as CF7/ACF) uses border-box, preventing width: 100% + padding overflow. */
*,
*::before,
*::after {
    box-sizing: border-box;
}

/* ─── Typography defaults ─────────────────────────────
   Fallback styling only, for content with no component class
   (e.g. the_content() output). Component CSS files (hero.css,
   cards.css, single.css, etc.) set their own fonts/colors on their
   own class selectors, which take precedence via specificity. */
body {
    margin: 0;
    font-family: var(--font-body);
    font-weight: 400;
    font-size: clamp(16px, 1.5vw, 18px);
    line-height: 1.75;
    color: var(--color-text);
}

h1,
h2,
h3,
h4 {
    font-family: var(--font-heading);
    /* No explicit color here: var(--color-text) is already the value
       inherited from body/.section-light/.section-warm, so omitting it
       lets headings inside .section-dark / .hero__content correctly
       inherit var(--color-text-inverse) instead of being forced dark. */
}

h1 {
    font-weight: 700;
    font-size: clamp(30px, 5vw, 52px);
    line-height: 1.15;
}

h2 {
    font-weight: 400;
    font-size: clamp(22px, 3vw, 26px);
    line-height: 1.2;
    color: var(--color-heading-secondary);
}

/* Dark sections keep inheriting the inverse text color for contrast,
   rather than the secondary heading color meant for light backgrounds. */
.section-dark h2 {
    color: var(--color-text-inverse);
}

h3 {
    font-weight: 700;
    font-size: clamp(18px, 2.5vw, 21px);
    line-height: 1.25;
}

h4 {
    font-weight: 400;
    font-size: 1.25rem;
    line-height: 1.3;
}

p {
    margin-bottom: var(--space-sm);
}

:where(a) {
    color: var(--color-accent);
    text-decoration: underline;
    transition: opacity 0.2s ease;
}

a:hover {
    opacity: 0.75;
}

::selection {
    background: var(--color-accent);
    color: var(--color-text-inverse);
}