/* ============================================================
   AC Quiz — ac-fonts.css
   Google Fonts imports and typographic rhythm
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,600;0,700;0,800;1,400;1,600&family=Poppins:wght@400;500;600;700&family=Source+Serif+4:ital,wght@0,300;0,400;0,600;1,300;1,400&display=swap');

/* ---- Typographic scale ---- */
.display-1 { font-family: var(--font-head); font-size: clamp(3rem, 6vw, 5rem); font-weight: 800; line-height: 1.1; }
.display-2 { font-family: var(--font-head); font-size: clamp(2.5rem, 4.5vw, 4rem); font-weight: 700; line-height: 1.15; }

.headline-xl { font-family: var(--font-head); font-size: clamp(2rem, 3.5vw, 3.2rem); font-weight: 700; }
.headline-lg { font-family: var(--font-head); font-size: clamp(1.7rem, 2.5vw, 2.4rem); font-weight: 700; }
.headline-md { font-family: var(--font-head); font-size: clamp(1.3rem, 2vw, 1.75rem); font-weight: 700; }

.subhead { font-family: var(--font-sub); font-size: 1.1rem; font-weight: 500; color: var(--text-muted); }
.label-tag {
  font-family: var(--font-sub);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.body-lg { font-size: 1.1rem; line-height: 1.8; }
.body-md { font-size: 1rem; line-height: 1.72; }
.body-sm { font-size: .9rem; line-height: 1.65; }
.body-xs { font-size: .82rem; line-height: 1.55; }

/* ---- Drop caps for articles ---- */
.dropcap::first-letter {
  float: left;
  font-family: var(--font-head);
  font-size: 4.2rem;
  font-weight: 700;
  line-height: .8;
  margin: .1em .15em 0 0;
  color: var(--accent);
}

/* ---- Pull quote ---- */
.pull-quote {
  font-family: var(--font-head);
  font-size: 1.5rem;
  font-style: italic;
  line-height: 1.45;
  color: var(--text-dark);
  padding: 1.5rem 0;
  border-top: 3px solid var(--accent);
  border-bottom: 1px solid var(--border);
  margin: 2.5rem 0;
}

/* ---- Colour on type ---- */
.text-gradient {
  background: linear-gradient(135deg, var(--accent) 0%, var(--accent-light) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.text-gradient-blue {
  background: linear-gradient(135deg, #1a2e4a 0%, #3b6cb7 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ---- Eyebrow labels ---- */
.eyebrow {
  display: inline-block;
  font-family: var(--font-sub);
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--accent);
}
.eyebrow-white { color: rgba(255,255,255,.75); }

/* ---- Reading typography ---- */
.reading-width { max-width: 680px; }
.reading-width-lg { max-width: 820px; }

/* ---- Numbered list styled ---- */
.styled-list { list-style: none; padding: 0; }
.styled-list li {
  display: flex; gap: .85rem;
  margin-bottom: .85rem;
  font-size: .97rem;
  color: var(--text-body);
}
.styled-list li::before {
  content: '';
  width: 8px; height: 8px; min-width: 8px;
  background: var(--accent);
  border-radius: 50%;
  margin-top: .55em;
}

/* ---- Blockquote styled ---- */
.blockquote-styled {
  border-left: 4px solid var(--accent);
  padding: 1.25rem 1.75rem;
  background: var(--bg-section);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  font-size: 1.07rem;
  font-style: italic;
  color: var(--text-dark);
  margin: 2rem 0;
}
.blockquote-styled cite {
  display: block;
  font-style: normal;
  font-family: var(--font-sub);
  font-size: .82rem;
  font-weight: 600;
  color: var(--text-muted);
  margin-top: .75rem;
}
.blockquote-styled cite::before { content: '— '; }