/* 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; } }

/* ── In-article language switcher ── the SAME subject on the sister sites,
   joined on topic_key. Distinct from the footer switcher, which only ever
   reaches homepages: this one is article-to-article, so it belongs in the
   content column, right after the body, where a reader who has finished the
   piece is deciding what to do next.

   Collapsed by default because 17 translated titles are longer than most
   articles' conclusions and would bury the feedback prompt below it. <details>
   keeps every anchor in the DOM while collapsed, so nothing is hidden from a
   crawler — only from the reader who did not ask. */
.article-langs {
  margin: 26px 0 18px;
  border: 1px solid #e3e7ec;
  border-radius: 6px;
  background: #fafbfc;
}
.article-langs > summary {
  cursor: pointer;
  list-style: none;
  padding: 12px 16px;
  font-size: 15px;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 8px;
}
.article-langs > summary::-webkit-details-marker { display: none; }
/* Own disclosure caret, so the control reads the same in every browser. */
.article-langs > summary::after {
  content: "";
  margin-left: auto;
  width: 8px; height: 8px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
  transition: transform .15s ease;
  opacity: .55;
}
.article-langs[open] > summary::after { transform: rotate(-135deg); }
.article-langs-count {
  font-size: 12px;
  font-weight: 700;
  background: #e6ebf1;
  border-radius: 10px;
  padding: 1px 8px;
  opacity: .8;
}
.article-langs ul {
  list-style: none;
  margin: 0;
  padding: 0 16px 12px;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 2px 20px;
}
.article-langs li { margin: 0; }
.article-langs a {
  display: block;
  padding: 7px 0;
  text-decoration: none;
  border-bottom: 1px solid #edf0f3;
}
.article-langs li:last-child a { border-bottom: 0; }
/* The translated title is the anchor text — it is the only string a reader of
   that language recognises, and it carries that locale's own keywords. The
   endonym below it ("Fakten auf Deutsch") says which language it is without
   naming the language in the reader's own tongue. */
.article-langs .al-title { display: block; font-size: 15px; line-height: 1.35; }
.article-langs .al-lang  { display: block; font-size: 12px; opacity: .6; margin-top: 1px; }
.article-langs a:hover .al-title { text-decoration: underline; }
@media (max-width: 600px) { .article-langs ul { grid-template-columns: 1fr; } }

/* ── Sub-topic links on a parent category archive ──
   A two-level taxonomy leaves parent archives with little or nothing of their
   own; these links make the parent a hub into its children rather than a dead
   end, and give the second level a route in from the first. */
.child-categories { margin: 0 0 18px; }
.child-categories ul { list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: 8px 10px; }
.child-categories li { margin: 0; }
.child-categories a { display: inline-block; padding: 5px 12px; border-radius: 999px;
  background: #f2f4f7; border: 1px solid #e2e6ec; font-size: 14px; font-weight: 600;
  text-decoration: none; }
.child-categories a:hover { background: #e8ecf3; }
.child-categories .muted { color: #7a8699; font-size: 12px; }