/* ==================================== */
/* 01. Global Headings (h1, h2, h3) */
/* ==================================== */
/* One fluid type scale: each size grows smoothly from phone to desktop,
   and every level stays clearly smaller than the one above it.
   h1 > h2 > tagline > card titles > body text */
h1 {
    font-size: clamp(2.25rem, 1.5rem + 3vw, 3.75rem);
    line-height: 1.15;
    margin-bottom: 0.5rem;
    font-weight: 700;
}

h2 {
    font-size: clamp(1.6rem, 1.2rem + 1.6vw, 2.4rem);
    line-height: 1.25;
    margin: 1.5rem 0;
    font-weight: 700;
}

h3 {
    font-size: clamp(1.2rem, 1rem + 0.8vw, 1.5rem);
    line-height: 1.3;
    margin: 1rem 0 0.5rem;
    font-weight: 700;
}

/* ==================================== */
/* 02. Paragraph and General Text */
/* ==================================== */

p {
    font-size: clamp(1rem, 2vw, 1.2rem);
    line-height: 1.8;
    color: var(--subtle-text-color);
    /* Comfortable reading width (~70 characters per line) */
    max-width: min(90%, 70ch);
    margin: 0 auto 1.5rem;
    text-wrap: pretty;
}

/* Body text: left-aligned inside a centered column, so every line starts at the same point */
.content-section > p {
    text-align: left;
}

/* Short one-line intros can stay centered */
.content-section > p.text-center {
    text-align: center;
}

.tagline {
    font-size: clamp(1.2rem, 1rem + 1vw, 1.6rem);
    line-height: 1.5;
}

/* ==================================== */
/* 03. Text Utility/Modifier Classes */
/* ==================================== */

.accent {
    color: var(--primary-color);
}

.white-bold {
    color: var(--text-color);
    font-weight: bold;
}

/* ==================================== */
/* 04. Typography Media Queries */
/* ==================================== */

@media (max-width: 767px) {
    h2 {
        margin: 1.25rem 0 1rem;
    }

    /* The parent section already has side padding, so text can use its full width */
    p {
        max-width: 100%;
        line-height: 1.7;
    }

    .tagline {
        margin-bottom: 1rem;
    }
}

@media (min-width: 768px) {
    /* Slightly smaller body text on desktop */
    p {
        font-size: clamp(0.9rem, 2vw, 1.1rem);
    }
}