/* ==========================================================================
   Article typography — blog posts and Buying Advice pages.
   Only applies when <body> has .so-article, which the inline script after the
   Description section in cms/default(_no_title).template.html adds for
   /blog/... and /buying-advice/... URLs. Other content pages are untouched.
   Linked from headers/template.html — bump its &v= when this file changes.
   ========================================================================== */

#n_content.so-article {
  --so-red: #d7263d;
  --so-ink: #2b2b2b;
  --so-muted: #666;
  --so-rule: #e4e4e4;
  --so-tint: #f6f6f6;
  --so-measure: 46rem;
}

/* Sections sit directly in a Bootstrap .row (no .col), whose -15px margin
   cancels the container padding — restore a side gutter. */
#n_content.so-article section.n-responsive-content {
  padding-left: 16px;
  padding-right: 16px;
  box-sizing: border-box;
}

/* The page's main .row is a flex container. With the narrower article column,
   the share dropdown and comments (siblings of the sections) would sit beside
   the article instead of below it, so stack the row normally on article pages
   and line the share/comment block up with the article column. */
#n_content.so-article #main-content > .row {
  display: block;
}
#n_content.so-article #main-content > .row > :not(nav):not(.container):not(section):not(script):not(style):not(.__NETO__header) {
  max-width: var(--so-measure);
  margin-left: auto;
  margin-right: auto;
  padding-left: 16px;
  padding-right: 16px;
  box-sizing: border-box;
}
#n_content.so-article #main-content > .row > .dropdown {
  margin-top: 2.5rem;
}
#n_content.so-article #main-content > .row > hr {
  padding: 0;
  border-top: 1px solid var(--so-rule);
}

/* ---- Page heading -------------------------------------------------------- */
#n_content.so-article .default_header_container h1.display-4 {
  font-weight: 700;
  font-size: clamp(2rem, 1.4rem + 2.6vw, 3rem);
  line-height: 1.1;
  margin: 0.5rem auto 0.75rem;
  max-width: var(--so-measure);
}

/* ---- Short description → intro line ------------------------------------- */
#n_content.so-article section.n-responsive-content[aria-label="Short description"] {
  max-width: var(--so-measure);
  margin: 0 auto 2rem;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid var(--so-rule);
  text-align: center;
  font-size: clamp(1.1rem, 1rem + 0.5vw, 1.3rem);
  line-height: 1.5;
  color: var(--so-muted);
}

/* ---- Article body -------------------------------------------------------- */
#n_content.so-article section.n-responsive-content[aria-label="Description"] {
  max-width: var(--so-measure);
  margin: 0 auto;
  font-size: 1.125rem;          /* 18px — Roboto Condensed reads small */
  line-height: 1.65;
  color: var(--so-ink);
  overflow-wrap: break-word;
}

#n_content.so-article section[aria-label="Description"] p,
#n_content.so-article section[aria-label="Description"] ul,
#n_content.so-article section[aria-label="Description"] ol {
  margin: 0 0 1.1em;
}
#n_content.so-article section[aria-label="Description"] li { margin-bottom: 0.4em; }
#n_content.so-article section[aria-label="Description"] a:not(.btn) {
  color: var(--so-red);
  text-decoration: underline;
  text-underline-offset: 2px;
}
#n_content.so-article section[aria-label="Description"] li::marker { color: var(--so-red); }

#n_content.so-article section[aria-label="Description"] .so-lead {
  font-size: 1.3rem;
  line-height: 1.5;
  color: #111;
}

#n_content.so-article section[aria-label="Description"] h2,
#n_content.so-article section[aria-label="Description"] .so-legacy-heading {
  font-family: "Roboto Condensed", Helvetica, Arial, sans-serif;
  font-weight: 700;
  font-size: 1.6rem;
  line-height: 1.2;
  color: #111;
  margin: 2.5rem 0 0.75rem;
}
#n_content.so-article section[aria-label="Description"] h2::before,
#n_content.so-article section[aria-label="Description"] .so-legacy-heading::before {
  content: "";
  display: block;
  width: 2.5rem;
  height: 3px;
  background: var(--so-red);
  margin-bottom: 0.6rem;
}
#n_content.so-article section[aria-label="Description"] h3 {
  font-weight: 700;
  font-size: 1.25rem;
  margin: 1.75rem 0 0.5rem;
}

/* ---- Images & figures ---------------------------------------------------- */
#n_content.so-article section[aria-label="Description"] img {
  max-width: 100% !important;
  height: auto !important;       /* kills inline height:335px squash */
  border-radius: 6px;
}
#n_content.so-article section[aria-label="Description"] figure {
  margin: 2rem 0;
}
#n_content.so-article section[aria-label="Description"] figure img {
  display: block;
  width: 100%;
}
#n_content.so-article section[aria-label="Description"] figcaption {
  margin-top: 0.5rem;
  font-size: 0.95rem;
  line-height: 1.45;
  color: var(--so-muted);
}

/* ---- Quick-guide table --------------------------------------------------- */
#n_content.so-article .so-quick-guide {
  background: var(--so-tint);
  border-left: 4px solid var(--so-red);
  border-radius: 6px;
  padding: 1.25rem 1.25rem 0.5rem;
  margin: 2rem 0 2.5rem;
}
#n_content.so-article section[aria-label="Description"] .so-quick-guide h2 { margin-top: 0; font-size: 1.35rem; }
#n_content.so-article section[aria-label="Description"] .so-quick-guide h2::before { display: none; }
#n_content.so-article .so-quick-guide table {
  width: 100%;
  border-collapse: collapse;
  font-size: 1.05rem;
  line-height: 1.4;
}
#n_content.so-article .so-quick-guide th,
#n_content.so-article .so-quick-guide td {
  text-align: left;
  vertical-align: top;
  padding: 0.6rem 0.75rem 0.6rem 0;
  border-bottom: 1px solid var(--so-rule);
}
#n_content.so-article .so-quick-guide tr:last-child td { border-bottom: 0; }
#n_content.so-article .so-quick-guide thead th {
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--so-muted);
}
#n_content.so-article .so-quick-guide td:nth-child(2) {
  font-weight: 700;
  color: var(--so-red);
  white-space: nowrap;
}

@media (max-width: 575.98px) {
  #n_content.so-article section.n-responsive-content[aria-label="Description"] { font-size: 1.0625rem; }
  #n_content.so-article section[aria-label="Description"] h2,
  #n_content.so-article section[aria-label="Description"] .so-legacy-heading { font-size: 1.4rem; }
  #n_content.so-article .so-quick-guide { padding: 1rem 1rem 0.25rem; }
  #n_content.so-article .so-quick-guide thead { display: none; }
  #n_content.so-article .so-quick-guide tr {
    display: grid;
    grid-template-columns: 1fr auto;
    column-gap: 0.75rem;
    padding: 0.7rem 0;
    border-bottom: 1px solid var(--so-rule);
  }
  #n_content.so-article .so-quick-guide tr:last-child { border-bottom: 0; }
  #n_content.so-article .so-quick-guide td { border: 0; padding: 0; }
  #n_content.so-article .so-quick-guide td:first-child { font-weight: 700; }
  #n_content.so-article .so-quick-guide td:nth-child(3) {
    grid-column: 1 / -1;
    color: var(--so-muted);
    font-size: 0.98rem;
    margin-top: 0.2rem;
  }
}

/* ---- Comparison table (.so-quick-guide.so-compare) ------------------------
   Plain grid: first column is the row label, no red figure column, and it
   stays a table on phones (short cells only). */
#n_content.so-article .so-quick-guide.so-compare td:nth-child(2) {
  font-weight: 400;
  color: inherit;
  white-space: normal;
}
#n_content.so-article .so-quick-guide.so-compare tbody th {
  text-align: left;
  vertical-align: top;
  font-weight: 700;
  padding: 0.6rem 0.75rem 0.6rem 0;
  border-bottom: 1px solid var(--so-rule);
}
#n_content.so-article .so-quick-guide.so-compare tr:last-child th { border-bottom: 0; }
#n_content.so-article .so-quick-guide.so-compare tbody td { width: 38%; }
@media (max-width: 575.98px) {
  #n_content.so-article .so-quick-guide.so-compare { overflow-x: auto; }
  #n_content.so-article .so-quick-guide.so-compare table { font-size: 0.95rem; }
  #n_content.so-article .so-quick-guide.so-compare thead { display: table-header-group; }
  #n_content.so-article .so-quick-guide.so-compare tr { display: table-row; padding: 0; border: 0; }
  #n_content.so-article .so-quick-guide.so-compare th,
  #n_content.so-article .so-quick-guide.so-compare td {
    display: table-cell;
    padding: 0.5rem 0.5rem 0.5rem 0;
    border-bottom: 1px solid var(--so-rule);
    color: inherit;
    font-size: inherit;
    margin: 0;
  }
  #n_content.so-article .so-quick-guide.so-compare td:first-child { font-weight: 400; }
  #n_content.so-article .so-quick-guide.so-compare tr:last-child th,
  #n_content.so-article .so-quick-guide.so-compare tr:last-child td { border-bottom: 0; }
}

/* Checklist variant: an ordered list instead of a table. */
#n_content.so-article .so-quick-guide ol { padding-left: 1.25rem; margin-bottom: 0.75rem; }
#n_content.so-article .so-quick-guide ol li { margin-bottom: 0.45em; }
#n_content.so-article .so-quick-guide ol a { color: inherit; font-weight: 700; }

/* ---- Small images shown side by side at native size (.so-figure-pair) ----- */
#n_content.so-article section[aria-label="Description"] .so-figure-pair {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 1.5rem;
  margin: 1.75rem 0;
}
#n_content.so-article section[aria-label="Description"] .so-figure-pair figure {
  margin: 0;
  flex: 0 1 220px;
}
#n_content.so-article section[aria-label="Description"] .so-figure-pair figure img {
  width: auto;
  max-width: 100%;
}
@media (max-width: 575.98px) {
  #n_content.so-article section[aria-label="Description"] .so-figure-pair figure { flex: 1 1 40%; }
}

/* ---- Callout for the one rule to remember (.so-note) ---------------------- */
#n_content.so-article section[aria-label="Description"] .so-note {
  border-left: 4px solid var(--so-red);
  background: var(--so-tint);
  border-radius: 6px;
  padding: 0.9rem 1.1rem;
  margin: 1.5rem 0;
  font-weight: 700;
}

/* ---- Responsive video embed (.so-video) ----------------------------------- */
#n_content.so-article section[aria-label="Description"] .so-video {
  aspect-ratio: 16 / 9;
  margin: 2rem 0;
  border-radius: 6px;
  overflow: hidden;
  background: #000;
}
#n_content.so-article section[aria-label="Description"] .so-video iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

/* ---- Legacy pasted content (Pages/Word inline styles) ---------------------
   Neutralises inline fonts/sizes so old articles pick up the styles above.
   cms/includes/article_tidy.template.html removes &nbsp; spacer paragraphs
   and then adds .so-cleaned,
   which turns on real paragraph spacing (without JS the spacers still space).
   -------------------------------------------------------------------------- */
#n_content.so-article section[aria-label="Description"] [style*="font-family"],
#n_content.so-article section[aria-label="Description"] font[face] {
  font-family: inherit !important;
}
#n_content.so-article section[aria-label="Description"] [style*="font-size"],
#n_content.so-article section[aria-label="Description"] font[size] {
  font-size: inherit !important;
}
#n_content.so-article section[aria-label="Description"] [style*="line-height"] {
  line-height: inherit !important;
}
#n_content.so-article section[aria-label="Description"] strong[style] {
  font-weight: 700;
}
#n_content.so-article section[aria-label="Description"].so-cleaned p[style*="margin"],
#n_content.so-article section[aria-label="Description"].so-cleaned li[style*="margin"] {
  margin: 0 0 1.1em !important;
}
#n_content.so-article section[aria-label="Description"].so-cleaned li[style*="margin"] {
  margin-bottom: 0.4em !important;
}
#n_content.so-article section[aria-label="Description"].so-cleaned p.so-legacy-heading[style],
#n_content.so-article section[aria-label="Description"].so-cleaned p.so-legacy-heading {
  font-size: 1.6rem !important;
  line-height: 1.2 !important;
  margin: 2.5rem 0 0.75rem !important;
}
#n_content.so-article section[aria-label="Description"].so-cleaned p.so-legacy-heading * {
  font-size: inherit !important;
}
@media (max-width: 575.98px) {
  #n_content.so-article section[aria-label="Description"].so-cleaned p.so-legacy-heading[style],
  #n_content.so-article section[aria-label="Description"].so-cleaned p.so-legacy-heading {
    font-size: 1.4rem !important;
  }
}