/* Minimal overrides ONLY. Real design = bootstrap.min.css + facts.css +
   gallery.css + per-site head_css, with owl.carousel + main.js for behaviour.
   Do NOT re-implement layout here. */

/* ── CLS (Cumulative Layout Shift) prevention ──────────────────────────────
   Reserve image space with fixed aspect ratios + a neutral placeholder colour
   so cards/heroes never reflow when a lazy image finishes loading. */
.carousel-section .thumb-wrapper,
.roll-posts-carousel .thumb-wrapper {
  aspect-ratio: 16 / 10; overflow: hidden; background: #eef1f4; display: block;
}
.carousel-section .thumb-wrapper img,
.roll-posts-carousel .thumb-wrapper img {
  width: 100%; height: 100%; object-fit: cover; display: block;
}
.facts-wrapper .article .thumbnail {
  aspect-ratio: 16 / 10; overflow: hidden; background: #eef1f4; display: block;
}
.facts-wrapper .article .thumbnail img {
  width: 100%; height: 100%; object-fit: cover; display: block;
}
.feature-img img, .page-thumb img {
  width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover;
  background: #eef1f4; display: block;
}
/* In-content images: keep intrinsic ratio, never overflow, reserve height. */
.content-text img, .entry-content img, .content-container img {
  max-width: 100%; height: auto;
}

/* Reserve the carousel row's height so Owl initialising (which restructures the
   DOM) doesn't cause a large layout shift. Matches the loaded card height. */
.carousel-section .roll-posts-carousel,
#index-carousel { min-height: 300px; }
/* Reserve the front-page column grid + popular grid heights too. */
.front-page-5col { min-height: 60px; }

/* Safety net + CLS fix: before Owl initialises, keep the track to the SAME
   height it settles at (one row, ~300px) and clip the overflow. Without this the
   15 slides wrap to ~4 rows (~1200px), then Owl collapses them to one row and
   everything below jumps up ~900px — the dominant homepage layout shift. Using
   white-space:nowrap + overflow:hidden keeps the un-inited state one row tall, so
   pre-init and post-init heights match and nothing shifts. */
#index-carousel:not(.owl-loaded) {
  display: block; height: 300px; overflow: hidden; white-space: nowrap;
}
#index-carousel:not(.owl-loaded) .item {
  display: inline-block; width: 24%; white-space: normal; vertical-align: top;
}
/* Other owl carousels keep the simple reveal fallback. */
.owl-carousel:not(.owl-loaded):not(#index-carousel) { display: block; }

/* Homepage H1 — added for on-page SEO (theme had no H1). Kept understated so it
   reads as a page lede rather than a banner. */
.home-intro { margin: 6px 0 4px; }
.home-intro .home-title {
  font-size: 20px; line-height: 1.35; font-weight: 700; margin: 0;
  color: #222;
}
@media (min-width: 1025px) {
  .home-intro .home-title { font-size: 24px; }
}

/* TOC anchor jumps shouldn't hide the heading under any sticky chrome. */
.content-title { scroll-margin-top: 90px; }

/* ─────────────────────────────────────────────────────────────────────────
   Mobile safety-net: the NewsAnchor theme (and the live WP sites) let article
   content and the title bar overflow the viewport on phones, so text gets clipped
   on the right. This constrains everything to the viewport width and wraps long
   words — strictly an improvement over the original, no desktop impact.
   ───────────────────────────────────────────────────────────────────────── */
.sr-only {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
@media (max-width: 991px) {
  html, body { overflow-x: hidden; max-width: 100%; }
  /* Content columns fill the phone width and never exceed it. */
  #primary, #content, .content-area, .site-main, .entry-content,
  .single .entry-content, .post, .content-container, .content-text,
  aside.content-sidebar, .row, [class*="col-md-"], [class*="col-sm-"] {
    max-width: 100% !important;
    box-sizing: border-box;
    overflow-wrap: break-word;
    word-wrap: break-word;
  }
  /* Media and tables never push the layout wider than the screen. */
  img, video, iframe, table, pre { max-width: 100% !important; height: auto; }
  .entry-content img, .feature-img img, .content-text img,
  .page-thumb img, .facts-wrapper img, .thumb-wrapper img { max-width: 100% !important; height: auto; }
  /* Long titles wrap instead of being clipped by the full-bleed title bar. */
  .single-title, .cat-title, .page-title { overflow-wrap: break-word; word-wrap: break-word; }
  /* The content TOC and numbered fact list stay inside the column. */
  .content-container ol, .content-container ul, .entry-content ol, .entry-content ul { padding-left: 1.2em; }
}

/* ─────────────────────────────────────────────────────────────────────────
   Numbered facts — the live NewsAnchor theme renders each fact under a heading
   as a numbered item (its .sp-tab-content ol styling: big bold number, zebra
   rows). Our imported article bodies keep the raw <ol><li>, so apply the same
   design directly to them so every fact is numbered like the original.
   ───────────────────────────────────────────────────────────────────────── */
/* Reset the counter ONCE per article so it runs continuously 01→N top to
   bottom, across every section's <ol> (not restarting at each heading). */
.single .entry-content, .single .content-container { counter-reset: fact-counter; }
.single .entry-content ol,
.single .content-container ol {
  list-style: none;
  padding-left: 0;
  margin: 0 0 18px;
}
.single .entry-content ol > li,
.single .content-container ol > li {
  counter-increment: fact-counter;
  position: relative;
  padding: 6px 0 12px 52px;   /* room for the number, no background */
  margin: 0;
}
.single .entry-content ol > li::before,
.single .content-container ol > li::before {
  content: counter(fact-counter, decimal-leading-zero);
  position: absolute;
  left: 0;
  top: 6px;
  min-width: 40px;
  font-weight: 700;
  font-size: 1.9rem;
  line-height: 1.35;
  color: #0f1a5c;   /* navy, matching the live fact numbers */
}

/* ── Share bar ── FA icons in colored circles, matching the live share design.
   (The theme's .media_icon rules target <svg>; we use font-awesome <i>.) */
.share-action .media_icon, .share-floating .media_icon {
  display: flex; gap: 10px; flex-wrap: wrap; align-items: center;
}
.share-action .media_icon a, .share-floating .media_icon a {
  width: 38px; height: 38px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  color: #fff !important; font-size: 17px; text-decoration: none; border: 0;
}
.media_icon a.facebook { background: #1877f2; }
.media_icon a.twitter  { background: #111; }
.media_icon a.pinterest{ background: #e60023; }
.media_icon a.whatsapp { background: #25d366; }
.media_icon a.mail     { background: #6b7280; }
.share-action { margin: 22px 0; }
.share-action > p { font-weight: 700; margin: 0 0 10px; }
/* The floating desktop share rail would duplicate .share-action on phones. */
@media (max-width: 991px) { .share-floating { display: none; } }

/* Fallback thumbnail. Articles whose featured image failed to generate used to
   render an empty slot (the macros guarded with {% if card.image %}); they now
   fall back to a neutral placeholder so cards keep their shape. Muted so it
   never competes with real thumbnails. */
img.is-placeholder { object-fit: contain; opacity: .55; background: #eef1f4; }

/* ── Footer language switcher ── the 18 sister sites, each labelled in its own
   language. Sits below the footer menu as a quiet, wrapping row: it is a
   navigation aid and an hreflang mirror, not a call to action, so it must not
   out-shout the footer menu above it. */
.lang-switcher {
  border-top: 1px solid rgba(255, 255, 255, .15);
  margin-top: 18px;
  padding: 16px 0 22px;
}
.lang-switcher-title {
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  opacity: .7;
  margin: 0 0 10px;
}
.lang-switcher-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 6px 18px;
}
.lang-switcher-list li { margin: 0; }
.lang-switcher-list a {
  font-size: 14px;
  text-decoration: none;
  opacity: .85;
  border-bottom: 1px solid transparent;
}
.lang-switcher-list a:hover { opacity: 1; border-bottom-color: currentColor; }
/* The current site is a <span>, not a link — self-linking navigation is noise
   for readers and a wasted internal link for crawlers. */
.lang-switcher-list .is-current span { font-size: 14px; font-weight: 700; opacity: 1; }
@media (max-width: 600px) { .lang-switcher-list { gap: 4px 14px; } }