/* ==========================================================================
   seo-article.css
   Shared styling for the long-form SEO / editorial pages that are wrapped in
   <main><div class="content seo-article"> ... </div></main>.
   Loaded site-wide from dependencies/head.ejs but every rule is scoped under
   .seo-article, so it only affects those pages.

   Purpose: make these pages match the rest of the website (Bilo font `f`,
   the site's large type scale, brand colours) and fix layout issues caused by
   the site having no global box-sizing. Uses !important so it overrides the
   per-page inline <style> blocks without editing each file.
   ========================================================================== */

/* --- The base `main .content` rule already caps width at 820px and centres
       the column via left:50% + translateX(-50%). Do NOT add margin:auto here
       — it shifts the flow origin and the transform then throws the whole
       column into the right half of the page. --- */

/* --- Neutralise the site's bare element rules that would otherwise hit
       elements inside the article. `header { height:140px }` was clamping the
       <header class="article-header"> title block to 140px, causing the title,
       intro and table-of-contents to overlap. `footer { background;width:100% }`
       would turn an in-article footer band into a full-width panel. --- */
.seo-article header,
.seo-article .article-header,
.seo-article .hero,
.seo-article footer {
  height: auto !important;
  width: auto !important;
  min-height: 0 !important;
  position: static !important;
  z-index: auto !important;
}
.seo-article footer {
  background: none !important;
  padding: 0 !important;
}

/* --- Box model: the site has no global border-box, which made padded
       boxes overflow the 820px content column. Fix it for this subtree. --- */
.seo-article,
.seo-article *,
.seo-article *::before,
.seo-article *::after {
  box-sizing: border-box !important;
}

/* Nothing may push past the content column. */
.seo-article img,
.seo-article table,
.seo-article iframe,
.seo-article video,
.seo-article pre {
  max-width: 100% !important;
}
.seo-article {
  overflow-wrap: break-word;
  word-wrap: break-word;
}

/* --- Base typography: match the site (Bilo `f`, large scale, brand colours) --- */
.seo-article {
  font-family: f, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif !important;
  font-display: swap;
  color: #cdd8e4 !important;
  font-size: 22px;
  line-height: 1.7;
  font-weight: 500;
}

.seo-article h1 {
  font-family: f, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
  color: #e0eaf7 !important;
  font-size: 44px !important;
  line-height: 1.18 !important;
  font-weight: 500 !important;
  margin: 10px 0 24px !important;
}

.seo-article h2 {
  font-family: f, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
  color: #e0eaf7 !important;
  font-size: 37px !important;
  line-height: 1.25 !important;
  font-weight: 500 !important;
  margin: 50px 0 18px !important;
}

.seo-article h3 {
  font-family: f, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
  color: #e0eaf7 !important;
  font-size: 27px !important;
  line-height: 1.3 !important;
  font-weight: 500 !important;
  margin: 32px 0 12px !important;
}

.seo-article h4,
.seo-article h5,
.seo-article h6 {
  font-family: f, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
  color: #e0eaf7 !important;
  font-size: 21px !important;
  font-weight: 500 !important;
  margin: 24px 0 10px !important;
}

.seo-article p {
  font-size: 22px !important;
  line-height: 36px !important;
  color: #cdd8e4 !important;
  margin: 0 0 22px !important;
}

.seo-article ul,
.seo-article ol {
  font-size: 22px !important;
  line-height: 36px !important;
  color: #cdd8e4 !important;
  margin: 0 0 24px 24px !important;
}

.seo-article li {
  font-size: 22px !important;
  line-height: 36px !important;
  color: #cdd8e4 !important;
  margin-bottom: 12px !important;
}

/* Brighten bold text, but WITHOUT !important so per-page coloured callout
   labels (.tip-box strong, .key-takeaway strong, etc.) keep their colour. */
.seo-article strong,
.seo-article b {
  color: #e0eaf7;
  font-weight: 700;
}

/* Body links are brand orange. NO !important on the colour: the per-page
   CTA/button rules (e.g. .studio-link a, .cta-button) set white text on an
   orange pill and are more specific, so they must win here — otherwise the
   button text turns orange-on-orange and the button looks empty. */
.seo-article a {
  color: #de5126;
  text-decoration: none;
}
.seo-article a:hover {
  text-decoration: underline;
}
/* Keep pill/CTA buttons clean: white text, no underline, whatever the page set. */
.seo-article .studio-link a,
.seo-article .cta a,
.seo-article .cta-box a,
.seo-article a.cta-button,
.seo-article a.button,
.seo-article a.btn {
  text-decoration: none !important;
}
.seo-article .studio-link a:hover,
.seo-article .cta a:hover,
.seo-article .cta-box a:hover,
.seo-article a.cta-button:hover,
.seo-article a.button:hover,
.seo-article a.btn:hover {
  text-decoration: none !important;
  filter: brightness(1.08);
}

/* Intro / lead / standfirst paragraphs sit a little larger and muted. */
.seo-article .intro,
.seo-article .subtitle,
.seo-article .standfirst,
.seo-article .lead,
.seo-article .hero-sub,
.seo-article .tl-dr > p:first-child {
  font-size: 24px !important;
  line-height: 38px !important;
  color: #aebccb !important;
}

/* Small print: labels, tags, meta, captions, breadcrumbs. */
.seo-article .label,
.seo-article .meta,
.seo-article .date,
.seo-article .article-meta,
.seo-article .header-meta,
.seo-article .hero-tag,
.seo-article .hero-meta,
.seo-article .breadcrumb,
.seo-article .video-caption,
.seo-article .footer-note,
.seo-article .footer-meta,
.seo-article .article-footer,
.seo-article .sources {
  font-size: 15px !important;
  line-height: 1.6 !important;
}

/* Small "label" style headings must stay small, not adopt the h2/h3 scale.
   (e.g. the table-of-contents "Contents" label, TL;DR / info-box captions.) */
.seo-article .toc h2 {
  font-size: 15px !important;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #de5126 !important;
  margin: 0 0 14px !important;
  border: none !important;
  padding: 0 !important;
}
.seo-article .tldr h2,
.seo-article .tl-dr h2,
.seo-article .info-box h2,
.seo-article .studio-link h2,
.seo-article .key-takeaway h2 {
  font-size: 20px !important;
  margin: 0 0 8px !important;
  border: none !important;
  padding: 0 !important;
}

/* --- FAQ questions use the site's pink (matches the FAQ on normal pages) --- */
.seo-article .faq-item h3,
.seo-article .faq-item h4,
.seo-article .faq-question,
.seo-article .faq-q,
.seo-article .faq dt {
  color: #ebb5cf !important;
}

/* --- Tables keep a tighter, tidy scale so columns don't blow out --- */
.seo-article table {
  width: 100% !important;
  border-collapse: collapse !important;
}
.seo-article th,
.seo-article td {
  font-size: 16px !important;
  line-height: 1.5 !important;
}

/* --- Neutralise the bespoke gradient hero into a clean, on-brand title
       block that fits the column (the old one overflowed and clashed with
       the site look). Applies to .article-header and .hero variants. --- */
.seo-article .article-header,
.seo-article .hero {
  background: none !important;
  background-color: transparent !important;
  border: none !important;
  border-bottom: 2px solid #70818c !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 8px 0 26px !important;
  margin: 16px 0 34px !important;
  overflow: visible !important;
  text-align: left !important;
  color: #e0eaf7 !important;
}
.seo-article .article-header::before,
.seo-article .article-header::after,
.seo-article .hero::before,
.seo-article .hero::after {
  display: none !important;
}
.seo-article .article-header h1,
.seo-article .hero h1 {
  color: #e0eaf7 !important;
}
/* The per-page hero styles cap the title/intro at ~650-700px, which makes the
   text wrap early inside the wider column. Let hero content use the full width. */
.seo-article .article-header h1,
.seo-article .article-header h2,
.seo-article .article-header p,
.seo-article .article-header .intro,
.seo-article .article-header .subtitle,
.seo-article .article-header .meta,
.seo-article .hero h1,
.seo-article .hero p,
.seo-article .hero .hero-sub,
.seo-article .hero .hero-meta {
  max-width: none !important;
}
.seo-article .article-header .label,
.seo-article .hero .hero-tag {
  color: #de5126 !important;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-size: 15px !important;
}
.seo-article .article-header .intro,
.seo-article .article-header .subtitle,
.seo-article .hero .hero-sub {
  color: #aebccb !important;
}
.seo-article .article-header .meta,
.seo-article .hero .hero-meta {
  color: #8a99a8 !important;
}