/* WordPress-generated markup that the static design never had. */
.screen-reader-text,.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}
.alignleft{float:left;margin:.3em 1.4em 1em 0}
.alignright{float:right;margin:.3em 0 1em 1.4em}
.aligncenter{display:block;margin-left:auto;margin-right:auto}
.wp-caption,.wp-block-image figcaption{max-width:100%}
.wp-caption-text,.wp-element-caption{font-size:13px;color:var(--muted);margin-top:8px}
.sticky,.bypostauthor,.gallery-caption{}
.news-pagination{margin:40px 0}
.news-pagination ul{display:flex;flex-wrap:wrap;gap:6px;list-style:none;margin:0;padding:0;justify-content:center}
.news-pagination a,.news-pagination span{display:inline-grid;place-items:center;min-width:40px;height:40px;padding:0 12px;border:1px solid var(--line);border-radius:var(--radius-s);color:var(--ink);font-weight:600;font-size:14px;text-decoration:none}
.news-pagination .current{background:var(--red);border-color:var(--red);color:#fff}
.news-pagination a:hover{border-color:var(--ink)}
body.admin-bar .site-header{top:32px}
@media (max-width:782px){body.admin-bar .site-header{top:46px}}
/* Ticker speed set per site (News. → Theme Options → Ticker). */
.breaking__track{ animation-duration:var(--ticker-dur, 34s); }
/* Weather page: "My location" chip + status line */
.wx-chip--geo{ display:inline-flex; align-items:center; gap:6px; }
.wx-chip--geo svg{ flex:none; }
.wx-chip--geo.is-loading{ opacity:.6; cursor:progress; }
.wx-geo-msg{ margin:-6px 0 18px; font-size:13px; color:var(--muted); }
.wx-content{ margin:32px 0 0; }

/* LIVE badge on live-coverage cards (Story settings → Live coverage). */
.live-badge{
  position:absolute; top:12px; left:12px; z-index:3;
  display:inline-flex; align-items:center; gap:6px;
  padding:5px 9px 5px 8px; border-radius:3px;
  background:var(--red); color:#fff;
  font-family:var(--sans); font-size:11px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; line-height:1;
  box-shadow:0 4px 14px rgba(0,0,0,.25); pointer-events:none;
}
.live-badge__dot{ width:7px; height:7px; border-radius:50%; background:#fff; animation:live-badge-pulse 1.4s ease-in-out infinite; }
@keyframes live-badge-pulse{ 0%,100%{ opacity:1; transform:scale(1); } 50%{ opacity:.35; transform:scale(.7); } }
@media (prefers-reduced-motion:reduce){ .live-badge__dot{ animation:none; } }
.featured__hero .live-badge{ top:20px; left:20px; font-size:12px; }
/* Lead card text shares the LIVE badge's inset. */
.featured__hero .story-card__body{ padding-left:20px; padding-right:20px; }

/* Top billboard switched off / empty: give the first section its own top gap (desktop; phones never show that ad). */
@media (min-width:861px){
  body.no-top-ad main > .section:first-of-type{ padding-top:20px; }
  /* Same gap below the featured grid as above it. */
  body.home main > .section:first-of-type{ padding-bottom:20px; }
}

/* LIVE + PREMIUM side by side in the image corner. */
.card-flags{ position:absolute; z-index:3; top:12px; left:12px; display:flex; align-items:center; gap:6px; pointer-events:none; }
.card-flags .live-badge{ position:static; box-shadow:none; }
.card-flags .premium-mark{ position:static; margin:0; }
@media (max-width:860px){ .card-flags{ left:8px; } }

/* Active main-menu item uses its category color (the design default was always red). */
.nav-link--news.is-active{ color:var(--c-news); }
.nav-link--national.is-active{ color:var(--c-national); }
.nav-link--region.is-active{ color:var(--c-region); }
.nav-link--world.is-active{ color:var(--c-world); }
.nav-link--sport.is-active{ color:var(--c-sport); }
.nav-link--showbiz.is-active{ color:var(--c-showbiz); }
.nav-link--magazine.is-active{ color:var(--c-magazine); }
.nav-link--business.is-active{ color:var(--c-business); }
.nav-link--scitech.is-active{ color:var(--c-scitech); }
.nav-link--lifestyle.is-active{ color:var(--c-lifestyle); }
.nav-link--crime.is-active{ color:var(--ink); }

/* Newsletter: honeypot, inline answer, result notice after confirm / unsubscribe links */
.news-nl-hp{ position:absolute !important; left:-9999px !important; width:1px; height:1px; overflow:hidden; }
.news-nl-msg{ margin:10px 0 0; font-size:13px; line-height:1.45; font-weight:600; color:#1a7f37; }
.news-nl-msg.is-error{ color:var(--red); }
.cta .news-nl-msg{ color:#fff; flex-basis:100%; }
.news-flash{ position:fixed; z-index:300; left:50%; bottom:20px; transform:translateX(-50%); width:min(560px, calc(100% - 32px));
  display:flex; align-items:center; gap:12px; padding:14px 16px; border-radius:var(--radius-s,8px);
  background:#1a7f37; color:#fff; font-size:14px; line-height:1.4; box-shadow:0 10px 30px rgba(0,0,0,.18); }
.news-flash--error{ background:var(--red); }
.news-flash span{ flex:1; }
.news-flash__close{ flex:none; width:28px; height:28px; border:0; border-radius:50%; background:rgba(255,255,255,.18); color:#fff; font-size:18px; line-height:1; cursor:pointer; }

/* ---- Mobile usability (audit 2026-09-29) ---- */
@media (max-width: 860px){
  /* iOS zooms into any form field under 16px on focus: keep fields at 16px on phones. */
  input[type="text"], input[type="email"], input[type="search"], input[type="url"], input[type="tel"],
  input[type="password"], input[type="number"], input[type="date"], select, textarea{ font-size:16px !important; }

  /* Bigger touch areas for small text links without changing the layout
     (vertical padding is balanced by a negative margin). */
  .breaking__track a, .section__title a, .see-all, .footer-link, .topic-row__link,
  .feature-byline__name, .author-contact__mail, .legal-toc a, .contact-hero__jumps a{
    padding-block:7px; margin-block:-7px;
  }
  .comment-form input[type="checkbox"], .account-field input[type="checkbox"]{ width:20px; height:20px; }
}


/* ---- Accessibility: readable text contrast (WCAG AA 4.5:1) ---- */
/* Timestamps on white / paper cards (the base .meta color is meant for text over photos). */
.vrail__body .meta, .featured__mini:not(.featured__mini--cover):not(.featured__mini--lead) > .meta,
.featured__row2 .featured__mini:not(.featured__mini--lead) .meta, .cat-nl .meta, .cat-lead__stack .meta,
.article-related .featured__mini .meta, .cat-grid .featured__mini .meta{ color:var(--muted); }
html:not([data-theme="dark"]) body{ --muted-light:#716B5D; }
@media (prefers-color-scheme: dark){ html[data-theme="system"] body{ --muted-light:#7A756B; } }
/* Footer greys on black, captions on the dark video bar. */
.footer-col h3, .footer-bottom__links a, .footer-hero__label, .footer-hero__note{ color:#8C877C; }
.article-embed figcaption .img-title, .article-embed figcaption .img-caption{ color:#9B968A; }
/* Rate-card contact links: enough space between the two tap targets. */
.ad-card__contact{ gap:10px; }
.ad-card__contact a{ display:inline-block; padding-block:4px; }

/* Footer "Sections": links in two columns (half the height). */
.footer-col--sections{ display:grid; grid-template-columns:repeat(2, max-content); column-gap:clamp(24px, 3vw, 44px); row-gap:13px; align-content:start; }
.footer-col--sections > h3{ grid-column:1 / -1; }

/* ---- Light header (header color with low contrast for white): dark logo + dark icons ---- */
body.header-light .brand-bar{ border-bottom:1px solid var(--border-bottom); }
body.header-light .menu-toggle,
body.header-light .brand-bar__premium{ color:var(--ink); }
body.header-light .icon-btn--ghost{ color:var(--ink); border-color:rgba(20,20,20,.16); }
body.header-light .icon-btn--ghost:hover{ background:rgba(20,20,20,.05); border-color:var(--ink); }
body.header-light .mobile-nav__top{ color:var(--ink); border-bottom-color:var(--border-bottom); }
body.header-light .mobile-nav__close{ color:var(--ink); }
.mobile-nav__top .mobile-nav__logo{ height:22px; width:auto; }
/* Dark mode keeps a dark header. */
/* Dark mode keeps a light header dark: through the variable, so both header layouts follow
   (in the one-row layout the header itself carries the background). */
html[data-theme="dark"] body.header-light{ --header-bg:#141416; }
html[data-theme="dark"] body.header-light .brand-bar,
html[data-theme="dark"] body.header-light .mobile-nav__top{ background:#141416; border-bottom-color:#2A2A2E; }
html[data-theme="dark"] body.header-light .menu-toggle,
html[data-theme="dark"] body.header-light .brand-bar__premium,
html[data-theme="dark"] body.header-light .mobile-nav__close,
html[data-theme="dark"] body.header-light .icon-btn--ghost{ color:#fff; border-color:rgba(255,255,255,.35); }

/* Tags and stamps stay on one line: long kickers end with "…" and keep 10px from the right edge. */
.tag,
.life-stamp{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:calc(100% - 20px); }
.tag{ display:inline-block; line-height:1.25; }
.life-card__media .life-stamp,
.life-feat .life-stamp{ display:inline-block; line-height:1.25; text-shadow:0 1px 1px rgba(0,0,0,.3); }

/* =====================================================================
   Ads — extra sizes, code slots, in-article, skyscrapers beside the page, sticky phone banner
   ===================================================================== */
.ad-slot--code{ height:auto !important; width:auto !important; max-width:100%; min-height:0; display:flex; justify-content:center; }
.ad-slot--code iframe{ max-width:100%; }
.ad-slot--large-leaderboard{ max-width:970px; width:100%; }
.ad-slot--leaderboard{ max-width:728px; width:100%; }
.ad-slot--large-rectangle{ max-width:336px; width:100%; }
.ad-slot--wide-skyscraper{ width:160px; }
.ad-slot--narrow-skyscraper{ width:120px; }
.ad-slot--mobile-small{ max-width:320px; width:100%; }
.ad-slot--filled picture,
.ad-slot--filled picture img{ display:block; width:100%; height:auto; }
.ad-wrap--comments{ padding:28px 0 8px; }
.article-mid-ad--728x90 .ad-unit,
.article-mid-ad--336x280 .ad-unit{ align-items:center; }
.news-gpt{ display:flex; justify-content:center; width:100%; }

/* Skyscrapers left and right of the page (inserted by main.js only when they fit). */
.ad-rail{ position:fixed; z-index:5; top:var(--ad-rail-top, 150px); }
.ad-rail--left{ right:calc(50% + var(--shell-max) / 2 + 12px); }
.ad-rail--right{ left:calc(50% + var(--shell-max) / 2 + 12px); }
.ad-rail .ad-unit{ gap:6px; }
body.admin-bar .ad-rail{ top:calc(var(--ad-rail-top, 150px) + 32px); }

/* Sticky banner at the bottom on phones, above the tab bar. */
.ad-anchor{
  position:fixed; z-index:95; left:0; right:0; bottom:calc(55px + env(safe-area-inset-bottom, 0px));
  display:flex; justify-content:center; padding:6px 0 4px;
  background:var(--paper-2); border-top:1px solid var(--line); box-shadow:0 -6px 18px rgba(0,0,0,.12);
}
.ad-anchor .ad-slot{ max-width:320px; width:100%; margin:0 auto; }
.ad-anchor__close{
  position:absolute; top:-26px; right:8px; width:26px; height:26px; border:1px solid var(--line); border-bottom:0;
  border-radius:6px 6px 0 0; background:var(--paper-2); color:var(--ink); font-size:18px; line-height:1; cursor:pointer;
}
body.has-ad-anchor{ padding-bottom:70px; }

/* =====================================================================
   Wallpaper ad (site skin) — News. Core → Wallpaper ads. The picture sits behind the page,
   the content becomes a column (Site width); the visible sides and the space above are one link.
   ===================================================================== */
.wallpaper-ad{
  position:fixed; inset:0; z-index:0; display:block;
  background-color:var(--wp-bg, #111); background-image:var(--wp-img); background-repeat:no-repeat;
  background-position:center var(--wp-y, 0px); background-size:var(--wp-size, auto);
}
.wallpaper-ad__label{
  position:absolute; right:12px; top:calc(var(--wp-y, 0px) + 8px); padding:2px 7px; border-radius:3px;
  background:rgba(0,0,0,.45); color:#fff; font:600 10px/1.4 var(--sans); letter-spacing:.12em; text-transform:uppercase;
}
body.has-wallpaper{ background:var(--wp-bg, #111); }
body.has-wallpaper .site-content{
  position:relative; z-index:1; max-width:var(--shell-max); margin:var(--wp-top, 240px) auto 0;
  background:var(--paper); box-shadow:0 0 40px rgba(0,0,0,.18); overflow-x:clip;
}
body.has-wallpaper .site-footer{ position:relative; z-index:1; }
body.has-wallpaper .ad-rail{ display:none; } /* The wallpaper already uses the sides. */
body.has-wallpaper .ad-wrap--desktop-leader{ display:none; } /* One takeover at a time: no billboard above the column. */
body.has-wallpaper #main{ padding-top:24px; } /* The hidden billboard used to space the first section from the topics bar. */

/* Header icons without frames by default (News. → Header → Frames around the header icons). */
html body:not(.header-icons-framed) .brand-bar .icon-btn--ghost,
html body:not(.header-icons-framed) .brand-bar .icon-btn--ghost:hover{ border-color:transparent; }

/* =====================================================================
   Premium page (page-premium.php) — additions to the prototype styles.
   ===================================================================== */
.premium-page .premium-offer{ min-height:0; }
.premium-tier + .premium-tier{ margin-top:28px; padding-top:24px; border-top:1px solid var(--line); }
.premium-tier__name{ font-family:var(--display); font-size:20px; margin:0 0 4px; }
.premium-tier__desc{ color:var(--muted); margin:0 0 12px; }
.premium-tier__buy{ margin-top:4px; }
.premium-page .premium-price__sum{ font-size:clamp(22px,2.4vw,28px); }
.premium-page .premium-wall__inner .premium-field{ margin-bottom:12px; }
.premium-page .premium-wall__inner form .btn{ margin-top:4px; }
.premium-more{ padding:48px var(--gutter) 72px; }
.premium-more__title{ font-family:var(--display); font-size:clamp(22px,2.4vw,30px); margin:0 0 18px; }
.premium-more__content{ max-width:760px; font-size:17px; line-height:1.65; }
.premium-faq{ max-width:860px; display:grid; gap:10px; }
.premium-faq__item{ border:1px solid var(--line); border-radius:var(--radius-m); background:var(--paper-2); }
.premium-faq__item summary{ cursor:pointer; list-style:none; padding:16px 20px; font-weight:700; font-size:16px; display:flex; justify-content:space-between; gap:16px; }
.premium-faq__item summary::-webkit-details-marker{ display:none; }
.premium-faq__item summary::after{ content:"+"; color:var(--red); font-size:20px; line-height:1; }
.premium-faq__item[open] summary::after{ content:"\2212"; }
.premium-faq__item p{ margin:0; padding:0 20px 18px; color:var(--muted); line-height:1.6; }

/* Primary buttons: in dark mode the hover grey is a little lighter, so it still reads as a change. */
html[data-theme="dark"]{ --btn-hover:#45454B; --btn-active:#38383D; }
@media (prefers-color-scheme: dark){ html:not([data-theme="light"]){ --btn-hover:#45454B; --btn-active:#38383D; } }

/* Crime is black: its text shade (mega menu hover…) turns light in dark mode. */
:root{ --c-crime-ink:#0B0B0C; }
html[data-theme="dark"]{ --c-crime-ink:#F2EFE8; }
@media (prefers-color-scheme: dark){ html:not([data-theme="light"]){ --c-crime-ink:#F2EFE8; } }

/* Header cart icon (WooCommerce): left of "Premium", with a count badge. */
.brand-bar__cart{ position:relative; }
.brand-bar__cart[hidden]{ display:none; }
.brand-bar__cart svg{ display:block; }
/* Icon per fill level: empty, 1, 2, 3+ items (the badge adds the number from 4 items). */
.brand-bar__cart .brand-bar__cart-state{ display:none; }
.brand-bar__cart[data-cart-count="0"] [data-cart-state="0"],
.brand-bar__cart[data-cart-count="1"] [data-cart-state="1"],
.brand-bar__cart[data-cart-count="2"] [data-cart-state="2"],
.brand-bar__cart[data-cart-count="3"] [data-cart-state="3"]{ display:inline; }
.brand-bar__cart-count{
  position:absolute; top:2px; right:-2px; min-width:17px; height:17px; padding:0 4px; border-radius:99px;
  background:var(--red); color:#fff; font:800 10px/17px var(--sans); text-align:center; box-shadow:0 0 0 2px var(--header-bg, #333);
}
.brand-bar__cart-count[hidden]{ display:none; }