/**
 * Base — global typography and element defaults
 * Builds on top of Bootstrap + Montserrat font
 */

html {
    overflow-x: hidden;
}

body {
    font-family: var(--font-base);
    color: var(--color-text);
    overflow-x: hidden;
}

/* ── Headings ────────────────────────────────────────────────────────────────
   Standard scale used consistently across all pages.
   Use h1–h6 or .h1–.h6 Bootstrap aliases.
*/

h1, .h1 { font-size: 2.5rem;  font-weight: 700; line-height: 1.2; }
h2, .h2 { font-size: 2rem;    font-weight: 700; line-height: 1.25; }
h3, .h3 { font-size: 1.5rem;  font-weight: 600; line-height: 1.3; }
h4, .h4 { font-size: 1.25rem; font-weight: 600; line-height: 1.35; }
h5, .h5 { font-size: 1rem;    font-weight: 600; line-height: 1.4; }
h6, .h6 { font-size: 0.875rem; font-weight: 600; line-height: 1.4; }

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
    font-family: var(--font-base);
    color: var(--color-text);
    margin-bottom: 0.75em;
}

/* ── Body text ───────────────────────────────────────────────────────────────*/

p {
    line-height: 1.7;
    margin-bottom: 1rem;
}

/* ── Links ───────────────────────────────────────────────────────────────────*/

a {
    color: var(--color-primary);
    text-decoration: none;
    transition: color 0.2s;
}

a:hover {
    color: var(--color-primary-dark);
}

/* ── Text size scale ─────────────────────────────────────────────────────────
   Reusable anywhere — prefer these over component-specific sizes.
*/

.text-fine   { font-size: 0.75rem; }    /* 12px — legal, footnotes (Google minimum) */
.text-xs     { font-size: 0.8125rem; }  /* 13px — captions, labels */
.text-sm     { font-size: 0.875rem; }   /* 14px — secondary content */
.text-base   { font-size: 1rem; }       /* 16px — body */
.text-lg     { font-size: 1.125rem; }   /* 18px */
.text-xl     { font-size: 1.25rem; }    /* 20px */

/* ── Text colour helpers for dark backgrounds ────────────────────────────────*/

.text-light-75  { color: var(--color-text-light); }
.text-light-40  { color: var(--color-text-faint); }

/* ── Section spacing ─────────────────────────────────────────────────────────*/

.section        { padding: 5rem 0; }
.section-sm     { padding: 3rem 0; }
.section-lg     { padding: 7rem 0; }

/* ── CJK font fallback for Chinese pages ─────────────────────────────────*/

:lang(zh) {
    font-family: 'Montserrat', 'Noto Sans SC', 'PingFang SC', 'Microsoft YaHei', sans-serif;
}

/* ── Mobile heading overrides ──────────────────────────────────────────── */

@media (max-width: 767.98px) {
    h1, .h1 { font-size: var(--font-size-h1-mobile, 1.75rem); }
    h2, .h2 { font-size: var(--font-size-h2-mobile, 1.35rem); }
    h3, .h3 { font-size: var(--font-size-h3-mobile, 1.15rem); }

    /* Override class-based heading sizes too — component classes win over element selectors */
    .ba-hero__title,
    .ba-section__title,
    .ba-tile__title,
    .ba-dive-card__title,
    .ba-card__title { font-size: var(--font-size-h2-mobile, 1.35rem); }
}