/* ============================================================
   Wedly Typography Foundation
   ============================================================
   Major Third (1.25) scale with responsive html base sizing.
   Loaded BEFORE app.css so component-level overrides cascade.

   Scale snap-points (rem):
     h1  3        h4  1.25       small  0.875
     h2  2.25     h5  1.0625     .lead  1.125
     h3  1.625    h6  0.9375     p/body 1
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Josefin+Sans:wght@400;500;600&family=Montserrat:wght@400;500;700&family=Playfair+Display:wght@700&display=swap');

/* ── Base ── */
html {
    font-size: 93.75%; /* 15 px — the single responsive tuning knob */
}

body {
    font-family: 'Montserrat', sans-serif;
    font-size: 1rem;
    line-height: 1.7;
    color: var(--wedly-charcoal);
}

/* ── Element Defaults ── */
h1, h2, h3, h4, h5, h6 {
    margin-top: 0;
    font-weight: 700;
    color: var(--wedly-charcoal);
}

h1 { font-size: 3rem;      line-height: 1.15; letter-spacing: -0.02em; }
h2 { font-size: 2.25rem;   line-height: 1.2;  letter-spacing: -0.01em; }
h3 { font-size: 1.625rem;  line-height: 1.3; }
h4 { font-size: 1.25rem;   line-height: 1.35; }
h5 { font-size: 1.0625rem; line-height: 1.4; }
h6 { font-size: 0.9375rem; line-height: 1.4; }

p  { font-size: 1rem; line-height: 1.7; }

small { font-size: 0.875rem; }

blockquote {
    font-size: 1rem;
    line-height: 1.8;
    font-style: italic;
    color: #444;
}

strong, b { font-weight: 700; }

/* ── Utility ── */
.lead {
    font-size: 1.125rem;
    line-height: 1.7;
}

/* ── Responsive Scale ──
   Each breakpoint tightens the html base AND reduces headings
   proportionally so the whole page scales from one place.        */

@media (max-width: 991px) {
    html { font-size: 97%; }   /* ~15.5 px */
}

@media (max-width: 767px) {
    html { font-size: 94%; }   /* ~15 px */
}

@media (max-width: 575px) {
    html { font-size: 90%; }   /* ~14.4 px */
}

@media (max-width: 480px) {
    html { font-size: 87%; }   /* ~13.9 px */
}

@media (max-width: 375px) {
    html { font-size: 84%; }   /* ~13.4 px */
}

/* ── Button typography ──
   Buttons inherit the root sizing but need explicit mobile
   reduction because padding + weight make them feel larger
   than body text at the same rem value.                      */

button,
.cta-button,
[class*="btn"] {
    font-size: 1rem;
}