/**
 * BBCPress - BBC Typography System
 * Implements BBC Reith Sans & BBC Reith Serif styling & scale
 */

@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;1,400;1,600&family=IBM+Plex+Serif:ital,wght@0,400;0,500;0,600;0,700;1,400&family=Outfit:wght@400;600;700;800;900&display=swap');

/* Font Face fallbacks */
@font-face {
  font-family: 'BBC Reith Sans';
  font-weight: 300;
  src: local('BBC Reith Sans Light'), local('Arial');
}
@font-face {
  font-family: 'BBC Reith Sans';
  font-weight: 400;
  src: local('BBC Reith Sans'), local('Arial');
}
@font-face {
  font-family: 'BBC Reith Sans';
  font-weight: 500;
  src: local('BBC Reith Sans Medium'), local('Arial Bold');
}
@font-face {
  font-family: 'BBC Reith Sans';
  font-weight: 700;
  src: local('BBC Reith Sans Bold'), local('Arial Bold');
}
@font-face {
  font-family: 'BBC Reith Serif';
  font-weight: 400;
  src: local('BBC Reith Serif'), local('Georgia'), local('Times New Roman');
}
@font-face {
  font-family: 'BBC Reith Serif';
  font-weight: 500;
  src: local('BBC Reith Serif Medium'), local('Georgia Bold');
}
@font-face {
  font-family: 'BBC Reith Serif';
  font-weight: 700;
  src: local('BBC Reith Serif Bold'), local('Georgia Bold');
}

body {
  font-family: 'BBC Reith Sans', 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  font-size: 16px;
  line-height: 1.5;
  color: var(--bbc-charcoal);
}

/* Headings scale */
h1, h2, h3, h4, h5, h6 {
  font-family: 'BBC Reith Sans', 'Outfit', -apple-system, BlinkMacSystemFont, sans-serif;
  font-weight: 700;
  line-height: 1.2;
  color: var(--bbc-charcoal);
  margin-bottom: 0.5em;
}

.bbc-headline-xxl {
  font-size: 40px;
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.8px;
}

.bbc-headline-xl {
  font-size: 32px;
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.5px;
}

.bbc-headline-lg {
  font-size: 24px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.3px;
}

.bbc-headline-md {
  font-size: 18px;
  font-weight: 700;
  line-height: 1.3;
}

.bbc-headline-sm {
  font-size: 15px;
  font-weight: 700;
  line-height: 1.3;
}

.bbc-font-serif {
  font-family: 'BBC Reith Serif', 'IBM Plex Serif', Georgia, serif;
}

@media (max-width: 768px) {
  .bbc-headline-xxl { font-size: 28px; }
  .bbc-headline-xl { font-size: 24px; }
  .bbc-headline-lg { font-size: 20px; }
}

/* Article Body Typography */
.bbc-article-body {
  font-family: 'BBC Reith Serif', 'IBM Plex Serif', Georgia, 'Times New Roman', serif;
  font-size: 18px;
  line-height: 1.65;
  color: #222222;
}

.bbc-article-body p {
  margin-bottom: 1.4em;
}

.bbc-article-body h2 {
  font-family: 'BBC Reith Sans', 'Outfit', sans-serif;
  font-size: 24px;
  font-weight: 700;
  margin-top: 1.8em;
  margin-bottom: 0.6em;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--bbc-border-color);
}

.bbc-article-body h3 {
  font-family: 'BBC Reith Sans', sans-serif;
  font-size: 20px;
  font-weight: 700;
  margin-top: 1.4em;
  margin-bottom: 0.5em;
}

.bbc-article-body blockquote {
  position: relative;
  margin: 2em 0;
  padding: 16px 20px 16px 24px;
  border-left: 4px solid var(--bbc-red);
  background-color: var(--bbc-grey-bg);
  font-family: 'BBC Reith Serif', Georgia, serif;
  font-size: 20px;
  font-style: italic;
  line-height: 1.5;
  color: var(--bbc-charcoal);
}

.bbc-article-body blockquote cite {
  display: block;
  font-family: 'BBC Reith Sans', sans-serif;
  font-size: 14px;
  font-weight: 600;
  font-style: normal;
  margin-top: 8px;
  color: var(--bbc-grey-mid);
}

/* BBC Dropcap */
.bbc-dropcap::first-letter {
  float: left;
  font-family: 'BBC Reith Sans', 'Outfit', sans-serif;
  font-size: 64px;
  line-height: 52px;
  padding-top: 4px;
  padding-right: 10px;
  padding-bottom: 0;
  color: var(--bbc-black);
  font-weight: 800;
}

/* Article Callouts & Interest Box */
.bbc-callout-box {
  background-color: var(--bbc-grey-bg);
  border: 1px solid var(--bbc-grey-border);
  padding: 20px;
  margin: 28px 0;
}

.bbc-callout-title {
  font-family: 'BBC Reith Sans', sans-serif;
  font-size: 16px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--bbc-charcoal);
  margin-bottom: 12px;
  padding-bottom: 8px;
  border-bottom: 2px solid var(--bbc-red);
}