/**
 * typography.css — AnyMotion typographic scale
 *
 * Heading: Raleway 300/400/600/700 (geometric, luxury sans-serif)
 * Body/UI: Inter 400/500/600 (clean, legible, modern)
 */

/* ── Smooth scroll — voor alle anchor-links en paginanavigatie ── */
html {
    scroll-behavior: smooth;
}

/* ── Base body ── */
body,
.site {
    font-family: var(--font-body) !important;
    font-size: 16px !important;
    line-height: 1.7 !important;
    color: var(--text) !important;
    background-color: var(--bg) !important;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* ── Headings ── */
h1, h2, h3, h4,
.entry-title,
.page-title,
.widget-title {
    font-family: var(--font-heading) !important;
    font-style: normal !important;
    font-weight: 600 !important;
    color: var(--text) !important;
    line-height: 1.1 !important;
    letter-spacing: 0.01em !important;
    margin-top: 0;
}

h1, .entry-title { font-size: clamp(28px, 4vw,   52px); margin-bottom: var(--space-lg); }
h2              { font-size: clamp(22px, 2.8vw, 36px); margin-bottom: var(--space-md); }
h3              { font-size: clamp(16px, 2vw,   22px); margin-bottom: var(--space-md); }
h4              { font-size: clamp(14px, 1.5vw, 18px); margin-bottom: var(--space-sm); }

/* ── Body copy ── */
p {
    font-family: var(--font-body) !important;
    font-size: 15px !important;
    line-height: 1.75 !important;
    color: var(--muted) !important;
    margin-top: 0;
    margin-bottom: var(--space-md);
}

/* ── Links ── */
a {
    color: var(--gold);
    text-decoration: none;
    transition: color var(--transition);
}

a:hover,
a:focus {
    color: var(--gold-light);
    text-decoration: none;
}

/* ── Eyebrow utility ── */
.eyebrow,
.section-eyebrow {
    display: block;
    font-family: var(--font-body) !important;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--gold);
    margin-bottom: var(--space-md);
}

/* ── Strong / bold ── */
strong, b {
    font-weight: 600;
    color: var(--text-secondary);
}

/* ── Small / caption ── */
small,
.caption {
    font-size: 12px;
    color: var(--muted);
}

/* ── Blockquote ── */
blockquote {
    border-left: 2px solid var(--gold);
    padding-left: var(--space-lg);
    margin-left: 0;
    font-family: var(--font-heading) !important;
    font-style: normal;
    font-weight: 300;
    font-size: clamp(18px, 2vw, 24px);
    color: var(--text-secondary);
    line-height: 1.5;
}

/* ── Lists ── */
ul, ol {
    font-size: 15px;
    color: var(--muted);
    line-height: 1.8;
    padding-left: var(--space-lg);
    margin-bottom: var(--space-md);
}

/* ── HR ── */
hr {
    border: none;
    border-top: 1px solid var(--border);
    margin: var(--space-xl) 0;
}