/* ============================================================
   GP Base — main.css (v1.0.0)
   Design system: dark-first news utility. Tokens from approved
   mockups 006/007. Accent overridable via Customizer
   (--gp-accent injected inline from functions.php).
   ============================================================ */

/* ===== 1. Tokens ===== */
:root {
  --gp-accent: #f97316;
  --gp-accent-dark: #ea580c;
  --gp-accent-soft: rgba(249, 115, 22, .14);
  /* Darkened accent for white-on-accent surfaces — passes WCAG AA (4.5:1)
     against white for the default orange; adapts to Customizer accents. */
  --gp-accent-strong: color-mix(in srgb, var(--gp-accent) 62%, #000);
  --gp-radius: 10px;
  --gp-radius-sm: 6px;
  --gp-maxw: 1280px;
  --font-display: "Space Grotesk", "Segoe UI", sans-serif;
  --font-body: "Manrope", -apple-system, "Segoe UI", sans-serif;
}
html[data-theme="dark"] {
  --bg: #0d1117; --card: #161b22; --fg: #e6edf3; --muted: #8b949e;
  --line: #21262d; --ink: #010409; --soft: #1c2129; --shadow: rgba(0,0,0,.5);
  --pill-bg: rgba(255,255,255,.06);
  --pros: #3fb950; --cons: #f85149; --track: #21262d;
  --hero-overlay: rgba(1,4,9,.72);
}
html[data-theme="light"] {
  --bg: #f4f5f7; --card: #ffffff; --fg: #16181d; --muted: #5b6472;
  --line: #e2e5ea; --ink: #16181d; --soft: #eef0f3; --shadow: rgba(22,24,29,.1);
  --pill-bg: rgba(22,24,29,.05);
  --pros: #1a7f37; --cons: #cf222e; --track: #e5e7eb;
  --hero-overlay: rgba(255,255,255,.25);
}
/* Light-mode accent on buttons keeps dark text for AA */
html[data-theme="light"] .btn-primary,
html[data-theme="light"] .lead .cat,
html[data-theme="light"] .tabs button.active,
html[data-theme="light"] .pill.reviews,
html[data-theme="light"] .newsletter button { color: #fff; }

/* ===== 2. Base ===== */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--font-body); background: var(--bg); color: var(--fg);
  line-height: 1.55; -webkit-font-smoothing: antialiased;
  transition: background .2s, color .2s; margin: 0;
}
h1, h2, h3, h4, .logo, .big { font-family: var(--font-display); }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; height: auto; }
.wrap { max-width: var(--gp-maxw); margin: 0 auto; padding: 0 20px; }
.screen-reader-text { position: absolute; width: 1px; height: 1px; clip-path: inset(50%); overflow: hidden; white-space: nowrap; }
:focus-visible { outline: 2px solid var(--gp-accent); outline-offset: 2px; }
.skip-link { position: absolute; left: -9999px; top: 0; background: var(--ink); color: #fff; padding: 10px 16px; z-index: 9999; }
.skip-link:focus { left: 0; }

/* ===== 3. Top bar / ticker ===== */
.topbar { background: var(--ink); color: #a7b0bc; font-size: 12.5px; }
.topbar-inner { display: flex; align-items: center; gap: 16px; height: 36px; overflow: hidden;
  mask-image: linear-gradient(90deg, transparent, #000 40px, #000 calc(100% - 40px), transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 40px, #000 calc(100% - 40px), transparent); }
.topbar .label { background: var(--gp-accent); color: #fff; font-weight: 800; text-transform: uppercase; font-size: 10.5px; letter-spacing: .08em; padding: 3px 10px; border-radius: 4px; white-space: nowrap; font-family: var(--font-display); }
.ticker { display: flex; gap: 40px; overflow: hidden; white-space: nowrap; }
.ticker ul { display: flex; gap: 40px; margin: 0; padding: 0; list-style: none; animation: tick 30s linear infinite; }
.ticker li a { color: #a7b0bc; }
.ticker li a:hover { color: #fff; }
@keyframes tick { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } }
.topbar .right { margin-left: auto; white-space: nowrap; }
.topbar .right a { color: #a7b0bc; padding: 0 8px; }
.topbar .right a:hover { color: #fff; }

/* ---- Secondary header: sliding strip below the main header ---- */
.sheader {
	display: flex;
	align-items: stretch;
	background: var(--sheader-bg, var(--gp-accent));
	color: #fff;
	font-size: 14px;
	overflow: hidden;
}
.sheader-fixed {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 0 18px;
	background: rgba(0, 0, 0, .18);
	border-right: 1px solid rgba(255, 255, 255, .22);
	min-height: 46px;
}
.sheader-label {
	font-family: var(--font-display);
	font-weight: 800;
	text-transform: uppercase;
	font-size: 11.5px;
	letter-spacing: .09em;
	white-space: nowrap;
}
.sheader-viewall {
	color: rgba(255, 255, 255, .85);
	font-size: 12px;
	font-weight: 700;
	white-space: nowrap;
	text-decoration: none;
}
.sheader-viewall:hover { color: #fff; text-decoration: underline; }
/* Static clip viewport: only this box defines the visible window; it never
   moves, so the strip can never cross into the fixed label zone. */
.sheader-viewport {
	flex: 1 1 auto;
	min-width: 0;
	overflow: hidden;
	display: flex;
	align-items: center;
}
.sheader-track {
	display: flex;
	align-items: center;
	gap: 14px;
	flex: 0 0 auto;
	white-space: nowrap;
	animation: sheader-scroll var(--sheader-speed, 24s) linear infinite;
}
/* Pause on hover ONLY where hover exists (mouse/trackpad). Touch devices
   must never freeze the strip: iOS Safari keeps :hover "stuck" after a tap,
   which would otherwise pause the animation permanently. */
@media (hover: hover) and (pointer: fine) {
	.sheader-viewport:hover .sheader-track { animation-play-state: paused; }
}
.sheader-item {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	color: #fff;
	text-decoration: none;
	flex: 0 0 auto;
	padding-right: 14px;
	border-right: 1px solid rgba(255, 255, 255, .28);
}
.sheader-item:hover { color: #fff; }
.sheader-item:hover .sheader-title { text-decoration: underline; }
.sheader-thumb {
	width: 56px;
	height: 34px;
	flex: 0 0 auto;
	overflow: hidden;
	border-radius: 5px;
	background: rgba(0, 0, 0, .25);
}
.sheader-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sheader-title { font-size: 13.5px; font-weight: 600; line-height: 1.35; max-width: 340px; overflow: hidden; text-overflow: ellipsis; }
@keyframes sheader-scroll {
	0% { transform: translateX(0); }
	100% { transform: translateX(-50%); }
}
/* Sticky variant: pins below the sticky main header while scrolling.
   Classic header is 72px; CNET two-tier is ~130px (sidebar uses 134px).
   If the main header itself isn't sticky, pin the bar to the very top. */
.sheader--sticky {
	position: sticky;
	top: 72px;
	z-index: 45;
}
body:not(.gp-sticky-header) .sheader--sticky { top: 0; }
body.gp-hdr-cnet .sheader--sticky { top: 132px; }
@media (max-width: 760px) {
	body.gp-hdr-cnet .sheader--sticky { top: 118px; } /* logo row shrinks on mobile */
}
@media (max-width: 782px) {
	.sheader-fixed { padding: 0 12px; gap: 8px; }
	.sheader-title { max-width: 220px; }
}
@media (prefers-reduced-motion: reduce) {
	/* Do NOT stop the marquee — a news ticker that never ticks is broken for
	   every reader with Reduce Motion on (a very common phone setting).
	   Slow it down a lot instead: motion is still present but gentle. */
	.sheader-track { animation-duration: calc(var(--sheader-speed, 24s) * 2.5); }
}

/* ===== 4. Header ===== */
header.site { background: var(--card); border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 50; backdrop-filter: blur(10px); }
.header-inner { display: flex; align-items: center; gap: 22px; height: 72px; }
.logo { font-weight: 700; font-size: 21px; letter-spacing: -.02em; display: flex; align-items: center; gap: 9px; }
.logo img { max-height: 64px; width: auto; }
.logo .box { background: linear-gradient(135deg, var(--gp-accent), var(--gp-accent-dark)); color: #fff; padding: 5px 11px; border-radius: 8px; font-size: 14px; font-weight: 700; box-shadow: 0 4px 14px rgba(249,115,22,.35); }
.logo .logo-dark { display: none !important; max-height: 64px; width: auto; }
html[data-theme="light"] .logo .custom-logo { display: none !important; }
html[data-theme="light"] .logo .logo-dark { display: inline-block !important; }
/* WP Dark Mode plugin compat: honor its light state too (plugin adds gp-wpdm body class via functions.php). */
html:not(.wp-dark-mode-active) body.gp-wpdm .logo .custom-logo { display: none !important; }
html:not(.wp-dark-mode-active) body.gp-wpdm .logo .logo-dark { display: inline-block !important; }
nav.main { display: flex; gap: 2px; margin-left: auto; }
nav.main ul { display: flex; gap: 2px; margin: 0; padding: 0; list-style: none; }
nav.main a { font-size: 14px; font-weight: 600; color: var(--muted); padding: 8px 13px; border-radius: 8px; display: block; }
nav.main a:hover, nav.main .current-menu-item > a { color: var(--fg); background: var(--soft); }
nav.main .current-menu-item > a { color: var(--gp-accent); }

/* ===== 4b. Nav dropdowns + mega panels =====
   Adopted from the Games Menu on games.gadgetpilipinas.net so the pattern is
   available to EVERY GP site, not just the hub. Any WP menu assigned to the
   primary location can nest, and children now open as a real panel instead of
   rendering as an unstyled inline row (the theme previously had no desktop
   sub-menu CSS at all - only .mobile-menu .sub-menu).

   Markup comes from core wp_nav_menu: li.menu-item-has-children > ul.sub-menu.

   Opting a top-level item into a wide MEGA panel: add the CSS class `gp-mega`
   to it (Appearance > Menus > Screen Options > CSS Classes). `gp-mega-2` and
   `gp-mega-4` set the column count; the default is 3. */
nav.main li.menu-item-has-children { position: relative; }

/* Chevron affordance so it is obvious an item opens a panel. */
nav.main li.menu-item-has-children > a::after {
  content: "";
  display: inline-block;
  width: 4px;
  height: 4px;
  margin: 0 0 2px 6px;
  border-right: 1.6px solid currentColor;
  border-bottom: 1.6px solid currentColor;
  transform: rotate(45deg);
  opacity: .6;
}
nav.main li.menu-item-has-children:hover > a::after { opacity: 1; }

/* The panel. display:block beats the `nav.main ul { display:flex }` row. */
nav.main .sub-menu {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  z-index: 60;
  min-width: 200px;
  margin: 0;
  padding: 6px;
  list-style: none;
  display: block;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: 0 14px 34px rgba(0, 0, 0, .45);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-5px);
  transition: opacity .15s ease, transform .15s ease, visibility .15s;
}
/* Opened by pointer, by keyboard focus, or by the JS touch toggle. */
nav.main li.menu-item-has-children:hover > .sub-menu,
nav.main li.menu-item-has-children:focus-within > .sub-menu,
nav.main li.gp-nav-open > .sub-menu { opacity: 1; visibility: visible; transform: translateY(0); }

nav.main .sub-menu a { padding: 8px 11px; border-radius: 8px; white-space: nowrap; }
nav.main .sub-menu .current-menu-item > a { color: var(--gp-accent); }

/* Depth 3+ flies out to the side. */
nav.main .sub-menu li.menu-item-has-children > .sub-menu { top: -6px; left: calc(100% + 4px); }
nav.main .sub-menu li.menu-item-has-children > a::after { transform: rotate(-45deg); margin: 0 0 0 8px; }

/* JS flips any panel that would overflow the right edge of the viewport. */
nav.main li.gp-flip > .sub-menu { left: auto; right: 0; }

/* ---- Mega panel ---- */
nav.main li.gp-mega > .sub-menu,
nav.main li.gp-mega-2 > .sub-menu,
nav.main li.gp-mega-4 > .sub-menu {
  display: block;
  column-count: var(--gp-mega-cols, 3);
  column-gap: 20px;
  width: min(var(--gp-mega-w, 760px), calc(100vw - 40px));
  padding: 14px;
}
nav.main li.gp-mega-2 > .sub-menu { --gp-mega-cols: 2; --gp-mega-w: 520px; }
nav.main li.gp-mega-4 > .sub-menu { --gp-mega-cols: 4; --gp-mega-w: 940px; }
nav.main li.gp-mega > .sub-menu > li,
nav.main li.gp-mega-2 > .sub-menu > li,
nav.main li.gp-mega-4 > .sub-menu > li { break-inside: avoid; }
nav.main li.gp-mega > .sub-menu > li > a,
nav.main li.gp-mega-2 > .sub-menu > li > a,
nav.main li.gp-mega-4 > .sub-menu > li > a { white-space: normal; }
/* Inside a mega panel the grandchildren are always visible under their heading,
   so nothing hides behind a hover. */
nav.main li.gp-mega > .sub-menu > li > .sub-menu,
nav.main li.gp-mega-2 > .sub-menu > li > .sub-menu,
nav.main li.gp-mega-4 > .sub-menu > li > .sub-menu {
  position: static;
  opacity: 1;
  visibility: visible;
  transform: none;
  min-width: 0;
  padding: 0 0 6px 4px;
  background: transparent;
  border: 0;
  box-shadow: none;
}
nav.main li.gp-mega > .sub-menu > li > .sub-menu a,
nav.main li.gp-mega-2 > .sub-menu > li > .sub-menu a,
nav.main li.gp-mega-4 > .sub-menu > li > .sub-menu a { font-weight: 500; color: var(--muted); padding: 6px 9px; }
/* A mega column heading is not a toggle, so it carries no chevron. */
nav.main li.gp-mega > .sub-menu > li > a::after,
nav.main li.gp-mega-2 > .sub-menu > li > a::after,
nav.main li.gp-mega-4 > .sub-menu > li > a::after { display: none; }

@media (prefers-reduced-motion: reduce) {
  nav.main .sub-menu { transition: none; transform: none; }
}

.header-actions { display: flex; gap: 9px; align-items: center; }
.icon-btn { width: 40px; height: 40px; border-radius: 9px; border: 1px solid var(--line); background: var(--card); cursor: pointer; display: grid; place-items: center; color: var(--muted); font-size: 16px; }
.icon-btn:hover { border-color: var(--gp-accent); color: var(--gp-accent); }
.burger { display: none; }
.mobile-menu { display: none; flex-direction: column; padding: 10px 20px 16px; border-top: 1px solid var(--line); background: var(--card); }
.mobile-menu.open { display: flex; }
.mobile-menu ul { list-style: none; margin: 0; padding: 0; }
.mobile-menu a { display: block; padding: 12px 0; font-weight: 600; border-bottom: 1px solid var(--line); }
.mobile-menu li:last-child a { border-bottom: none; }
.mobile-menu .sub-menu a { padding-left: 16px; font-size: 14px; color: var(--muted); }
.header-search {
  display: none;
  position: absolute;
  right: 0;
  top: 72px;
  width: min(420px, calc(100vw - 32px));
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 0 0 var(--gp-radius) var(--gp-radius);
  box-shadow: 0 14px 34px var(--shadow);
  padding: 14px 16px;
}
.header-search.open { display: block; }
.header-search .search-form { display: flex; gap: 10px; align-items: center; }
.header-search .search-field {
  flex: 1;
  background: var(--soft);
  border: 1px solid var(--line);
  color: var(--fg);
  border-radius: var(--gp-radius-sm);
  padding: 10px 14px;
  font-size: 14px;
  outline: none;
  transition: border-color .2s;
}
.header-search .search-field:focus { border-color: var(--gp-accent); }
.header-search .search-submit {
  background: var(--gp-accent-strong);
  color: #fff;
  border: 0;
  border-radius: var(--gp-radius-sm);
  padding: 10px 16px;
  font-weight: 700;
  font-size: 13px;
  cursor: pointer;
  white-space: nowrap;
}
.header-search .search-submit:hover { filter: brightness(1.08); }

/* Gooey-style glow under the search input (pure CSS, no canvas/JS).
   A rotating conic gradient behind a blurred ring — animated on focus. */
.header-search .search-form { position: relative; }
.header-search .search-form::before {
  content: "";
  position: absolute;
  inset: -3px;
  border-radius: calc(var(--gp-radius-sm) + 3px);
  background: conic-gradient(from var(--gp-gooey-angle, 0deg), var(--gp-accent), transparent 30%, var(--gp-accent) 60%, transparent 85%);
  opacity: 0;
  filter: blur(6px);
  z-index: -1;
  transition: opacity .3s;
}
.header-search .search-form:focus-within::before {
  opacity: .8;
  animation: gp-gooey-rotate 3s linear infinite;
}
@keyframes gp-gooey-rotate { to { --gp-gooey-angle: 360deg; } }
@property --gp-gooey-angle { syntax: "<angle>"; initial-value: 0deg; inherits: false; }
@media (prefers-reduced-motion: reduce) {
  .header-search .search-form:focus-within::before { animation: none; opacity: .5; }
}

/* ===== 4b. CNET two-tier header (Customizer → Header → layout = CNET) ===== */
.site--cnet .wrap { max-width: var(--gp-maxw, 1200px); }
.site--cnet .cnet-top { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 12px 0 10px; }
.site--cnet .cnet-top .logo { font-size: 22px; }
.site--cnet .cnet-top .logo img, .site--cnet .cnet-top .logo .logo-dark { max-height: 46px; }
.site--cnet .cnet-swg a {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 16px; border: 1px solid var(--line); border-radius: 999px;
  color: var(--fg); font-size: 12.5px; font-weight: 600; text-decoration: none;
  background: var(--card); transition: border-color .15s, color .15s, box-shadow .15s;
  white-space: nowrap;
}
.site--cnet .cnet-swg a:hover { border-color: var(--gp-accent); color: var(--gp-accent); box-shadow: 0 2px 10px var(--shadow); }
.site--cnet .cnet-swg svg { flex: none; }
.site--cnet .cnet-navrow { display: flex; align-items: center; gap: 10px; border-top: 1px solid var(--line); padding: 6px 0; min-height: 50px; }
.site--cnet .cnet-navrow nav.main { margin-left: 0; flex: 1; }
.site--cnet .cnet-navrow nav.main ul { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
.site--cnet .cnet-navrow nav.main ul::-webkit-scrollbar { display: none; }
/* That overflow-x:auto scroll container would CLIP absolutely-positioned
   dropdowns. Only a nav that really contains nested items drops the scroll
   behaviour (and wraps instead), so flat menus keep scrolling as before. */
.site--cnet .cnet-navrow nav.main ul:has(li.menu-item-has-children) { overflow: visible; flex-wrap: wrap; row-gap: 2px; }
.site--cnet .cnet-navrow nav.main a { padding: 7px 12px; font-size: 13.5px; }
.site--cnet .cnet-navrow .burger { display: grid; } /* visible on desktop like CNET */
.site--cnet .cnet-navrow .header-actions { margin-left: auto; }
/* Mobile menu panel drops below the taller two-tier header. */
.site--cnet .mobile-menu { border-top: 0; }
/* Search dropdown anchors to the bottom of the two-tier header. */
.site--cnet .header-search { top: calc(100% - 1px); }
/* Sidebar sticky offset assumes a 72px header; CNET is two rows (~110px). */
body.gp-hdr-cnet .sidebar { top: 134px; }
@media (max-width: 760px) {
  .site--cnet .cnet-top { padding: 10px 0 8px; }
  .site--cnet .cnet-top .logo img, .site--cnet .cnet-top .logo .logo-dark { max-height: 38px; }
  .site--cnet .cnet-swg a { padding: 7px 11px; }
  .site--cnet .cnet-swg .cnet-swg__label { display: none; } /* icon-only pill on mobile */
  .site--cnet .cnet-navrow nav.main { flex: none; }
}
@media (max-width: 480px) {
  .site--cnet .cnet-swg a { padding: 6px 9px; }
}

/* ===== 5. Category pills ===== */
.pill { display: inline-flex; align-items: center; gap: 5px; font-family: var(--font-display); font-size: 10.5px; font-weight: 600; text-transform: uppercase; letter-spacing: .07em; padding: 3px 9px; border-radius: 999px; background: var(--pill-bg); color: var(--muted); border: 1px solid var(--line); }
/* Category pills — bright solid colors (white text, readable in both themes). */
.pill.reviews { background: #dc2626; border-color: #dc2626; color: #fff; }
.pill.feature { background: #2563eb; border-color: #2563eb; color: #fff; }
/* Category pills carry WHITE text directly on the fill, so each one has to clear
   WCAG AA (4.5:1) against #fff on its own. The previous 500/600-level fills did
   not — Lighthouse flagged news at 3.29:1, and editorial/guides fail the same
   way by measurement (3.56:1 / 3.74:1). These are the 700-level equivalents:
   news 5.02:1, editorial 5.18:1, guides 5.47:1. .pill.reviews (#dc2626, 4.83:1)
   and .pill.feature (#2563eb, 5.17:1) already pass — leave those two alone. */
.pill.news { background: #15803d; border-color: #15803d; color: #fff; }
.pill.editorial { background: #c2410c; border-color: #c2410c; color: #fff; }
.pill.guides { background: #0f766e; border-color: #0f766e; color: #fff; }
.pill.score { color: #fff; }

/* ===== 6. Category tabs ===== */
.tabs-row { display: flex; align-items: center; gap: 14px; padding: 18px 0 6px; flex-wrap: wrap; }
.tabs-row .tabs { padding: 0; }
.tabs { display: flex; gap: 8px; flex-wrap: wrap; }
.tabs a, .tabs button { font: inherit; font-size: 13.5px; font-weight: 600; padding: 8px 16px; border-radius: 999px; border: 1px solid var(--line); background: var(--card); color: var(--muted); cursor: pointer; }
.tabs a:hover, .tabs button:hover { border-color: var(--gp-accent); color: var(--gp-accent); }
.tabs a.active, .tabs button.active { background: var(--gp-accent-strong); border-color: var(--gp-accent-strong); color: #fff; }

/* ===== 7. Layout ===== */
.layout { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 24px; padding: 16px 0 10px; align-items: start; }
.main-col { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.sidebar { display: flex; flex-direction: column; gap: 20px; position: sticky; top: 94px; min-width: 0; }

/* ===== 8. Lead story ===== */
.lead { display: grid; grid-template-columns: 1.3fr 1fr; background: var(--card); border: 1px solid var(--line); border-radius: var(--gp-radius); overflow: hidden; transition: box-shadow .15s ease; }
.lead:hover { box-shadow: 0 10px 30px var(--shadow); }
.lead .img { min-height: 300px; position: relative; background: var(--soft); }
.lead .img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.lead .img .shade { position: absolute; inset: 0; background: linear-gradient(90deg, var(--hero-overlay) 0%, transparent 70%); }
.lead .img .label { position: absolute; inset: 0; display: grid; place-items: center; color: var(--muted); font-weight: 500; }
.lead .body { padding: 28px; display: flex; flex-direction: column; justify-content: center; position: relative; }
.lead .body .pill { align-self: flex-start; margin-bottom: 14px; }
.lead h2 { font-size: 30px; font-weight: 700; line-height: 1.16; letter-spacing: -.015em; margin-bottom: 12px; }
.lead h2 a:hover { color: var(--gp-accent); }
.lead p { color: var(--muted); font-size: 14.5px; margin-bottom: 16px; max-width: 46ch; }
.lead .meta { font-size: 12.5px; color: var(--muted); display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.lead .meta .sep { color: #3d444d; }
.lead .by { color: var(--fg); font-weight: 600; }

/* ===== 11b. Lead carousel ===== */
.lead-carousel { position: relative; }
/* Aurora glow behind the hero — two blurred gradient blobs drifting slowly.
   GPU-composited (transform/opacity only, no layout thrash) and disabled for
   reduced-motion. Cost is negligible; visual, minimal interactivity. */
.lead-carousel::before,
.lead-carousel::after {
  content: "";
  position: absolute;
  z-index: 0;
  width: 46%;
  aspect-ratio: 1;
  border-radius: 999px;
  filter: blur(70px);
  opacity: .34;
  pointer-events: none;
  will-change: transform;
}
.lead-carousel::before {
  top: -30%;
  left: -6%;
  background: radial-gradient(circle, var(--gp-accent) 0%, transparent 65%);
  animation: gp-aurora-a 14s ease-in-out infinite alternate;
}
.lead-carousel::after {
  bottom: -34%;
  right: -8%;
  background: radial-gradient(circle, color-mix(in srgb, var(--gp-accent) 60%, #58a6ff) 0%, transparent 65%);
  animation: gp-aurora-b 18s ease-in-out infinite alternate;
}
@keyframes gp-aurora-a {
  from { transform: translate3d(0, 0, 0) scale(1); }
  to   { transform: translate3d(5%, 7%, 0) scale(1.12); }
}
@keyframes gp-aurora-b {
  from { transform: translate3d(0, 0, 0) scale(1.05); }
  to   { transform: translate3d(-6%, -5%, 0) scale(0.94); }
}
.lead-carousel .lead-slides { position: relative; z-index: 1; display: grid; border-radius: var(--gp-radius); }
.lead-carousel .lead-slide { grid-area: 1 / 1; min-width: 0; opacity: 0; visibility: hidden; transition: opacity .5s ease; }
.lead-carousel .lead-slide.active { opacity: 1; visibility: visible; position: relative; z-index: 1; }
.lead-carousel .car-arrow { position: absolute; top: 45%; transform: translateY(-50%); z-index: 2; width: 40px; height: 40px; border-radius: 50%; border: 1px solid rgba(255,255,255,.35); background: rgba(0,0,0,.45); color: #fff; font-size: 22px; line-height: 1; cursor: pointer; display: grid; place-items: center; backdrop-filter: blur(4px); transition: background .15s ease; }
.lead-carousel .car-arrow:hover { background: rgba(0,0,0,.7); }
.lead-carousel .car-arrow.prev { left: 12px; }
.lead-carousel .car-arrow.next { right: 12px; }
.lead-carousel .car-dots { display: flex; gap: 8px; justify-content: center; margin-top: 12px; }
/* 24×24 hit target (WCAG 2.5.8) with a 9px visual dot drawn via ::before. */
.lead-carousel .car-dot { width: 24px; height: 24px; border-radius: 999px; border: none; background: transparent; cursor: pointer; padding: 0; position: relative; }
.lead-carousel .car-dot::before { content: ''; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 9px; height: 9px; border-radius: 999px; background: var(--line); transition: width .2s ease, background .2s ease; }
.lead-carousel .car-dot.active::before { width: 26px; background: var(--gp-accent); }

/* ===== 9. Trending strip ===== */
.trending-strip { display: flex; align-items: center; gap: 14px; background: var(--card); border: 1px solid var(--line); border-radius: var(--gp-radius); padding: 10px 16px; overflow: hidden; }
.trending-strip .t { font-family: var(--font-display); font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--gp-accent); white-space: nowrap; }
.trending-strip .items { display: flex; gap: 24px; overflow: hidden; white-space: nowrap; }
.trending-strip .items a { font-size: 13px; color: var(--muted); }
.trending-strip .items a:hover { color: var(--fg); }

/* HOT strip — stacked items cross-fade (only .active is visible). */
.trending-strip.hot-strip .items { position: relative; flex: 1; gap: 0; }
.trending-strip.hot-strip .hot-item {
  position: absolute; left: 0; top: 0; right: 0;
  opacity: 0; visibility: hidden; transform: translateY(4px);
  transition: opacity .45s ease, transform .45s ease, visibility .45s;
}
.trending-strip.hot-strip .hot-item.active { opacity: 1; visibility: visible; transform: none; position: relative; }

/* ===== 9b. Back-to-top button ===== */
.gp-top {
  position: fixed;
  right: 20px;
  bottom: 20px;
  width: 44px;
  height: 44px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--card);
  color: var(--fg);
  font-size: 18px;
  cursor: pointer;
  display: grid;
  place-items: center;
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: opacity .25s ease, transform .25s ease, visibility .25s, border-color .2s;
  z-index: 60;
  box-shadow: 0 8px 22px var(--shadow);
}
.gp-top:hover { border-color: var(--gp-accent); color: var(--gp-accent); }
.gp-top.show { opacity: 1; visibility: visible; transform: none; }
@media (max-width: 480px) {
  .gp-top { right: 12px; bottom: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .gp-top.show { transition: none; }
}

/* ===== 10. Section header ===== */
.sec { display: flex; align-items: center; gap: 10px; margin: 8px 0 2px; }
.sec h2, .sec h3 { font-size: 16px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; font-family: var(--font-display); margin: 0; }
.sec::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.sec .more { font-size: 12px; font-weight: 600; color: var(--muted); }
.sec .more:hover { color: var(--gp-accent); }

/* ===== 11. Cards / feed grid ===== */
.news-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.item { background: var(--card); border: 1px solid var(--line); border-radius: var(--gp-radius); overflow: hidden; display: flex; flex-direction: column; transition: border-color .15s ease, transform .15s ease; }
.item:hover { border-color: var(--gp-accent); transform: translateY(-2px); }
.item .thumb { height: var(--gp-card-thumb-h, 160px); background: var(--soft); position: relative; display: block; }
.item .thumb img { width: 100%; height: 100%; object-fit: cover; }
.item .thumb .pill { position: absolute; top: 10px; left: 10px; z-index: 2; }
.item .body { padding: 14px 16px 16px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.item .body .meta { font-size: 12px; color: var(--muted); display: flex; gap: 8px; align-items: center; }
.item h3 { font-size: 16.5px; font-weight: 600; line-height: 1.3; letter-spacing: -.005em; margin: 0; }
.item h3 a:hover { color: var(--gp-accent); }
.item p { font-size: 13.5px; color: var(--muted); line-height: 1.5; margin: 0; }

/* Archive rows */
.row { display: grid; grid-template-columns: 56px 1fr auto; gap: 24px; padding: 28px 0; border-bottom: 1px solid var(--line); align-items: start; }
.row .num { font-family: var(--font-display); font-size: 28px; font-weight: 800; letter-spacing: -.04em; color: transparent; -webkit-text-stroke: 1px #3a3a3a; line-height: 1; padding-top: 4px; }
.row .num.hot { -webkit-text-stroke: 1px var(--gp-accent); }
.row .info { min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.row .info h2 { font-size: 22px; font-weight: 600; letter-spacing: -.03em; line-height: 1.15; margin: 0; }
.row .info h2 a:hover { color: var(--gp-accent); }
.row .meta2 { font-size: 12px; color: var(--muted); display: flex; gap: 12px; flex-wrap: wrap; }
.row .score { font-family: var(--font-display); font-size: 24px; font-weight: 800; letter-spacing: -.04em; color: var(--gp-accent); padding-top: 2px; }

/* ===== 12. Sidebar widgets ===== */
.widget { background: var(--card); border: 1px solid var(--line); border-radius: var(--gp-radius); padding: 18px; }
.widget h4, .widget .widget-title { font-family: var(--font-display); font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; margin: 0 0 12px; display: flex; align-items: center; gap: 8px; }
.widget h4::after, .widget .widget-title::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.rank { display: flex; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--line); align-items: flex-start; }
.rank:last-child { border-bottom: none; padding-bottom: 0; }
.rank .n { font-family: var(--font-display); font-size: 20px; font-weight: 700; color: var(--muted); line-height: 1.1; width: 22px; flex-shrink: 0; }
.rank .n.top { color: var(--gp-accent); }
.rank .t { font-size: 13.5px; font-weight: 600; line-height: 1.35; }
.rank .t a:hover { color: var(--gp-accent); }
.rank .d { font-size: 11.5px; color: var(--muted); margin-top: 2px; }
.lrev { display: flex; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.lrev:last-child { border-bottom: none; padding-bottom: 0; }
.lrev .th { width: 72px; height: 48px; border-radius: var(--gp-radius-sm); background: var(--soft); flex-shrink: 0; overflow: hidden; }
.lrev .th img { width: 100%; height: 100%; object-fit: cover; }
.lrev .info { display: flex; flex-direction: column; gap: 3px; }
.lrev .t { font-size: 13px; font-weight: 600; line-height: 1.3; }
.lrev .t a:hover { color: var(--gp-accent); }
.lrev .score { font-family: var(--font-display); font-size: 12px; font-weight: 700; color: var(--gp-accent); }
.newsletter { background: linear-gradient(150deg, var(--card), var(--soft)); border: 1px solid var(--line); border-radius: var(--gp-radius); padding: 18px; }
.newsletter h4 { font-family: var(--font-display); font-size: 14px; font-weight: 700; margin: 0 0 6px; }
.newsletter p { font-size: 12.5px; color: var(--muted); margin: 0 0 12px; }
.newsletter input, .newsletter .email-input { width: 100%; padding: 10px 12px; border-radius: 8px; border: 1px solid var(--line); background: var(--card); color: var(--fg); font: inherit; font-size: 13px; margin-bottom: 8px; }
.newsletter button { width: 100%; padding: 10px; border-radius: 8px; border: none; background: var(--gp-accent-strong); color: #fff; font: inherit; font-weight: 700; font-size: 13.5px; cursor: pointer; }
.newsletter button:hover { background: var(--gp-accent-dark); }

/* ===== 13. Ad slots ===== */
.gp-ad-slot { position: relative; }
.gp-ad-slot .ad-label { position: absolute; top: 4px; left: 50%; transform: translateX(-50%); font-size: 9.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); background: var(--card); padding: 0 6px; border-radius: 3px; z-index: 1; }
.gp-ad-slot .ad-box { min-height: 90px; display: grid; place-items: center; color: var(--muted); font-size: 12px; text-transform: uppercase; letter-spacing: .05em; }
.gp-ad-slot .ad-box { text-align: center; }
.gp-ad-slot .ad-box img { max-width: 100%; height: auto; display: inline-block; }
.sidebar .gp-ad-slot .ad-box:empty { border: 1px dashed var(--line); border-radius: var(--gp-radius); background: var(--soft); min-height: 200px; }

/* ===== 14. Footer ===== */
footer.site { background: var(--ink); color: #a7b0bc; margin-top: 20px; }
.footer-inner { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 30px; padding: 40px 20px 30px; max-width: var(--gp-maxw); margin: 0 auto; }
.footer-inner h3, .footer-inner .widget-title { color: #fff; font-family: var(--font-display); font-size: 13px; text-transform: uppercase; letter-spacing: .08em; margin: 0 0 14px; }
.footer-inner .widget { background: transparent; border: none; padding: 0; border-radius: 0; }
.footer-inner a { display: block; font-size: 13.5px; padding: 4px 0; color: #a7b0bc; }
.footer-inner a:hover { color: #fff; }
.footer-inner .brand p { font-size: 13px; margin: 10px 0 0; max-width: 34ch; }
.footer-inner ul { list-style: none; margin: 0; padding: 0; }
.socials { display: flex; gap: 8px; margin-top: 14px; }
.socials a { width: 36px; height: 36px; border-radius: 8px; border: 1px solid #2a313c; display: grid; place-items: center; font-size: 15px; padding: 0; }
.socials a:hover { border-color: var(--gp-accent); color: var(--gp-accent); }
.copyright { border-top: 1px solid #1c2129; text-align: center; font-size: 12px; padding: 16px; color: #9aa4b2; } /* fixed, not var(--muted): footer bg is dark ink in BOTH themes (3.43:1 → 8.14:1) */

/* ===== 15. Article ===== */
.crumbs { font-size: 12.5px; color: var(--muted); padding: 18px 0 6px; display: flex; gap: 6px; flex-wrap: wrap; }
.crumbs a:hover { color: var(--gp-accent); }
.crumbs .sep { color: #3d444d; }
.article-head { max-width: 760px; }
.article-head .pill { margin-bottom: 12px; }
.article-head h1 { font-size: 38px; font-weight: 700; line-height: 1.14; letter-spacing: -.02em; margin: 0 0 16px; }
.author-row { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; flex-wrap: wrap; }
.avatar { width: 42px; height: 42px; border-radius: 50%; background: linear-gradient(135deg, var(--gp-accent), #8b5cf6); display: grid; place-items: center; font-family: var(--font-display); font-weight: 700; color: #fff; font-size: 15px; flex-shrink: 0; overflow: hidden; }
.avatar img { width: 100%; height: 100%; object-fit: cover; }
.author-row .who { font-size: 13.5px; }
.author-row .who .name { font-weight: 700; color: var(--fg); }
.author-row .who .role { color: var(--muted); font-size: 12.5px; }
.author-row .sep { color: #3d444d; font-size: 13px; }
.author-row .meta { font-size: 13px; color: var(--muted); }
/* Updated-date signal — see inc/update-signal.php */
.author-row .meta .upd { color: var(--muted); white-space: nowrap; }
.author-row .meta .upd time { color: var(--fg); font-weight: 600; }
/* Multi-author photo strip in the article header. */
.author-row .avatars { display: flex; align-items: center; }
.author-row .avatars .avatar { margin-right: -10px; outline: 2px solid var(--bg); outline-offset: -1px; }
.author-row .avatars:has(.avatar:last-child:not(:first-child)) .avatar:last-child { margin-right: 0; }
.author-row .avatars .avatar a, .author-row .avatars a.avatar { display: block; border-radius: 50%; }
.share-row { display: inline-block; margin: 2px 0 2px; }
.share-btn { display: inline-flex; align-items: center; gap: 7px; padding: 8px 14px; border-radius: 8px; border: 1px solid var(--line); background: var(--card); color: var(--fg); font-size: 13px; font-weight: 600; cursor: pointer; font-family: var(--font-body); }
.share-btn:hover { border-color: var(--gp-accent); color: var(--gp-accent); }
.share-btn .ic { font-size: 15px; }
.topics { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 18px; margin-bottom: 22px; }
.topics .t { font-size: 12.5px; font-weight: 600; color: var(--muted); padding: 6px 12px; border-radius: 999px; border: 1px solid var(--line); background: var(--soft); }
.topics .t:hover { color: var(--gp-accent); border-color: var(--gp-accent); }
.topics .lbl { font-family: var(--font-display); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--gp-accent); align-self: center; }
.hero-img { border-radius: var(--gp-radius); overflow: hidden; border: 1px solid var(--line); position: relative; margin-bottom: 8px; }
.hero-img img { width: 100%; display: block; }
.hero-img .zoom { position: absolute; right: 14px; bottom: 14px; background: rgba(1,4,9,.65); color: #fff; font-size: 12px; padding: 6px 10px; border-radius: 6px; }
/* Review score pill overlaid on the featured image (lower left). */
.gp-hero-score {
	position: absolute;
	left: 14px;
	bottom: 14px;
	z-index: 2;
	display: flex;
	align-items: baseline;
	gap: 3px;
	background: color-mix(in srgb, var(--c, var(--gp-accent)) 88%, #000);
	border: 2px solid var(--c, var(--gp-accent));
	color: #fff;
	font-family: var(--font-display);
	font-weight: 800;
	font-size: 21px;
	line-height: 1;
	padding: 8px 12px;
	border-radius: 10px;
	box-shadow: 0 4px 14px rgba(1, 4, 9, .45);
}
.gp-hero-score small { font-size: 10.5px; font-weight: 600; opacity: .85; }
/* Hero image on the right of the article header (per-post "side" option). */
.head-media { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 28px; align-items: start; margin: 24px 0 8px; }
.head-media .head-col { min-width: 0; }
.head-media .hero-img { margin: 0; border: none; height: 320px; }
.head-media .hero-img img { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 900px) {
  .head-media { grid-template-columns: 1fr; }
  .head-media .hero-img { height: auto; }
}
/* Full-width hero: keep it big but not overwhelming; header spans the wrap. */
.hero-img.full { height: 480px; }
.hero-img.full img { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 900px) {
  .hero-img.full { height: auto; }
}
.article-head { max-width: 100%; }
.caption { font-size: 12px; color: var(--muted); text-align: center; padding-bottom: 26px; }
.article-layout { display: grid; grid-template-columns: minmax(0, 760px) 300px; gap: 40px; justify-content: center; align-items: start; }
.content { min-width: 0; font-size: 17px; line-height: 1.75; }
.content p { margin-bottom: 20px; color: var(--fg); }
.content p.lead-p { font-size: 19px; color: var(--muted); line-height: 1.6; }
.content h2 { font-size: 26px; font-weight: 700; margin: 34px 0 14px; letter-spacing: -.01em; scroll-margin-top: 88px; }
.content h2::before { content: ""; display: block; width: 34px; height: 4px; border-radius: 2px; background: var(--gp-accent); margin-bottom: 12px; }
.content h3 { font-size: 20px; font-weight: 700; margin: 26px 0 12px; scroll-margin-top: 88px; }
.content img:not(.avatar), .content .wp-block-image img { width: 100%; height: auto; border-radius: var(--gp-radius); border: 1px solid var(--line); margin: 6px 0; }
.content figure { margin: 24px 0; }
.content figcaption, .content .wp-element-caption { font-size: 12px; color: var(--muted); text-align: center; margin-top: 4px; }
.content blockquote { border-left: 4px solid var(--gp-accent); background: var(--soft); padding: 16px 20px; border-radius: 0 8px 8px 0; margin: 24px 0; font-size: 18px; font-style: italic; color: var(--fg); }
/* "What changed" note above the body (inc/update-signal.php). Decorative accent
   border only — all text uses --fg / --muted so both themes stay AA. */
.gp-update-note { display: flex; gap: 10px; align-items: flex-start; margin: 0 0 22px; padding: 12px 16px; border-left: 3px solid var(--gp-accent); background: var(--gp-accent-soft); border-radius: 0 var(--gp-radius-sm) var(--gp-radius-sm) 0; font-size: 14px; line-height: 1.55; color: var(--fg); }
.gp-update-note strong { font-weight: 700; white-space: nowrap; }
html[data-theme="light"] .gp-update-note { border-left-color: var(--gp-accent-strong); }
@media (max-width: 640px) { .gp-update-note { flex-direction: column; gap: 2px; } }
.content ul, .content ol { margin: 0 0 20px 22px; }
.content li { margin-bottom: 8px; }
.content a { color: var(--gp-accent); font-weight: 600; }
.content a:hover { text-decoration: underline; }
.content .wp-caption { max-width: 100%; }
.content .alignleft { float: left; margin: 4px 20px 16px 0; max-width: 50%; }
.content .alignright { float: right; margin: 4px 0 16px 20px; max-width: 50%; }
.content .aligncenter { display: block; margin-left: auto; margin-right: auto; }
.content table:not(.cmp):not(.lets-review-criteria-table) { border-collapse: collapse; width: 100%; font-size: 14px; margin: 20px 0; }
.content table:not(.cmp):not(.lets-review-criteria-table) th, .content table:not(.cmp):not(.lets-review-criteria-table) td { border: 1px solid var(--line); padding: 8px 12px; text-align: left; }
/* Dark mode: force readable tables (kills editor-set white cell backgrounds). */
html[data-theme="dark"] .content table:not(.cmp) td,
html[data-theme="dark"] .content table:not(.cmp) th { background: transparent !important; color: var(--fg) !important; border-color: var(--line) !important; }
html[data-theme="dark"] .content table:not(.cmp) thead th { background: var(--soft) !important; }
html[data-theme="dark"] .content table:not(.cmp) tr { background: transparent !important; }
html[data-theme="dark"] .content table:not(.cmp) tbody tr:nth-child(odd) { background: rgba(255,255,255,.02) !important; }
html[data-theme="dark"] .content table:not(.cmp) tbody tr:nth-child(odd) td { background: transparent !important; }

/* Comparison table */
.cmp-wrap { border: 1px solid var(--line); border-radius: var(--gp-radius); overflow: hidden; margin: 26px 0; }
.cmp-wrap .cmp-title { background: var(--ink); color: #fff; padding: 12px 16px; font-family: var(--font-display); font-size: 14px; font-weight: 700; display: flex; justify-content: space-between; align-items: center; }
.cmp-wrap .cmp-title .note { font-size: 11px; color: #8b949e; font-family: var(--font-body); font-weight: 500; }
.cmp-scroll { overflow-x: auto; }
table.cmp { width: 100%; border-collapse: collapse; font-size: 14px; min-width: 560px; }
table.cmp th { text-align: left; font-family: var(--font-display); font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); padding: 12px 16px; border-bottom: 1px solid var(--line); background: var(--card); }
table.cmp td { padding: 12px 16px; border-bottom: 1px solid var(--line); }
table.cmp tr:last-child td { border-bottom: none; }
table.cmp tr.win td { background: rgba(249,115,22,.07); }
table.cmp td.feat { color: var(--muted); font-weight: 600; }
table.cmp td .hl { color: var(--gp-accent); font-weight: 700; }

/* Let's Review restyle — theme tokens over plugin classes (harmless once LR is gone) */
.lets-review-api-wrap, .lr-review-box, .lets-review-block__wrap {
  border: 1px solid var(--line) !important; border-radius: var(--gp-radius) !important;
  background: var(--card) !important; box-shadow: none !important; margin: 30px 0 !important;
  color: var(--fg) !important;
}
.lets-review-api-wrap .score-overlay, .lets-review-api-score-box .score-overlay,
.lets-review-api-wrap .score, .lets-review-api-score-box .score {
  color: var(--gp-accent) !important; font-family: var(--font-display) !important;
}
.lets-review-api-wrap .cb-bar, .lets-review-block__wrap .cb-bar { background: var(--track) !important; }
.lets-review-api-wrap .cb-bar span, .lets-review-block__wrap .cb-bar span { background: var(--gp-accent) !important; }
.lets-review-api-wrap .lets-review__up, .lets-review-block__wrap .lets-review__up { color: var(--pros) !important; }
.lets-review-api-wrap .lets-review__down, .lets-review-block__wrap .lets-review__down { color: var(--cons) !important; }
.lets-review-api-wrap .lets-review-subtitle, .lets-review-block__wrap .lets-review-subtitle { color: var(--muted) !important; }
.lets-review-api-wrap .cb-review-ext-box, .lets-review-block__wrap .cb-review-ext-box { background: transparent !important; color: var(--fg) !important; }

/* ===== GP Review Box (native + rehub-compat renderer) ===== */
.lr-box, .gp-rbox {
  --rbox-accent: var(--gp-accent);
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--gp-radius);
  padding: 0;
  margin: 30px 0;
  overflow: hidden;
  color: var(--fg);
  font-size: 14px;
  line-height: 1.55;
}
.lr-box .lr-head {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 14px 20px;
  border-bottom: 1px solid var(--line);
  background: var(--soft);
}
.lr-box .lr-head h3 {
  margin: 0; font-size: 16px; font-weight: 700; line-height: 1.3;
}
.lr-box .lr-head .tag {
  flex: 0 0 auto;
  font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .07em;
  color: var(--gp-accent);
  background: var(--gp-accent-soft);
  border: 1px solid color-mix(in srgb, var(--gp-accent) 35%, transparent);
  padding: 3px 10px; border-radius: 20px; white-space: nowrap;
}
.lr-box .lr-body { padding: 20px; }
/* Big score */
.lr-box .lr-score {
  display: flex; align-items: baseline; gap: 10px;
  margin-bottom: 18px;
}
.lr-box .lr-score .num {
  font-family: var(--font-display);
  font-size: 52px; font-weight: 700; line-height: 1;
  color: var(--rbox-accent);
  font-variant-numeric: tabular-nums;
}
.lr-box .lr-score .den {
  font-size: 13px; color: var(--muted);
}
.lr-box .lr-score .den b { color: var(--fg); font-weight: 700; }
/* Criteria bars */
.lr-box .lr-criteria { display: grid; gap: 12px; }
.lr-box .cri { display: grid; grid-template-columns: minmax(0, 1fr) 130px 42px; align-items: center; gap: 12px; }
.lr-box .cri .lbl { font-size: 13px; font-weight: 600; color: var(--fg); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lr-box .cri .bar { height: 8px; background: var(--track); border-radius: 20px; overflow: hidden; }
.lr-box .cri .bar i { display: block; height: 100%; background: linear-gradient(90deg, color-mix(in srgb, var(--rbox-accent) 70%, #000), var(--rbox-accent)); border-radius: 20px; }
.lr-box .cri .val { font-size: 12.5px; font-weight: 700; color: var(--rbox-accent); text-align: right; font-variant-numeric: tabular-nums; }
/* Verdict */
.lr-box .lr-verdict {
  margin: 18px 20px 0; padding: 12px 16px;
  border-left: 3px solid var(--rbox-accent);
  background: var(--gp-accent-soft);
  border-radius: 0 var(--gp-radius-sm) var(--gp-radius-sm) 0;
  font-size: 13.5px;
}
.lr-box .lr-verdict b { color: var(--rbox-accent); }
/* Pros / cons */
.lr-box .lr-proscons {
  display: grid; grid-template-columns: 1fr 1fr; gap: 14px;
  padding: 18px 20px 20px;
}
.lr-box .pc {
  border: 1px solid var(--line); border-radius: var(--gp-radius-sm);
  padding: 12px 14px; background: var(--soft);
}
.lr-box .pc h4 {
  margin: 0 0 8px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em;
}
.lr-box .pc.pros h4 { color: var(--pros); }
.lr-box .pc.cons h4 { color: var(--cons); }
.lr-box .pc ul { list-style: none; margin: 0; padding: 0; }
.lr-box .pc li {
  position: relative; padding-left: 22px; margin-bottom: 6px;
  font-size: 13px; color: var(--fg);
}
.lr-box .pc li::before {
  position: absolute; left: 0; top: 0; font-weight: 700;
}
.lr-box .pc.pros li::before { content: "✓"; color: var(--pros); }
.lr-box .pc.cons li::before { content: "✕"; color: var(--cons); }
/* CTA */
.lr-box .lr-cta {
  display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap;
  padding: 14px 20px;
  border-top: 1px solid var(--line);
  background: var(--soft);
}
.lr-box .lr-cta .btn.primary {
  background: var(--gp-accent-strong); color: #fff;
  padding: 9px 20px; border-radius: var(--gp-radius-sm);
  font-weight: 700; font-size: 13.5px;
  transition: filter .15s;
}
.lr-box .lr-cta .btn.primary:hover { filter: brightness(1.08); }
.lr-box .lr-cta .lr-cta-price {
  font-weight: 800; font-size: 16px; color: var(--fg);
  font-variant-numeric: tabular-nums;
}
.lr-box .lr-cta .disclosure { font-size: 11px; color: var(--muted); }
/* Legacy converted verdict (from LR HTML migration) */
.lr-verdict.gp-lr-legacy {
  margin: 20px 0; padding: 14px 18px;
  border-left: 3px solid var(--gp-accent);
  background: var(--card); border-radius: 0 var(--gp-radius) var(--gp-radius) 0;
  border-top: 1px solid var(--line); border-right: 1px solid var(--line); border-bottom: 1px solid var(--line);
  font-size: 14px; color: var(--fg);
}
.lr-verdict.gp-lr-legacy b { color: var(--gp-accent); }
@media (max-width: 640px) {
  .lr-box .lr-proscons { grid-template-columns: 1fr; }
  .lr-box .cri { grid-template-columns: minmax(0, 1fr) 90px 36px; gap: 8px; }
  .lr-box .lr-score .num { font-size: 44px; }
}

/* Pros/cons from Rehub wpsm shortcodes (compat) */
.gp-pros, .gp-cons { border: 1px solid var(--line); border-radius: var(--gp-radius); padding: 16px 20px; margin: 20px 0; background: var(--card); }
.gp-pros { border-top: 3px solid var(--pros); }
.gp-cons { border-top: 3px solid var(--cons); }
.gp-pros > .title, .gp-cons > .title { font-family: var(--font-display); font-weight: 700; text-transform: uppercase; letter-spacing: .06em; font-size: 12px; margin-bottom: 10px; }
.gp-pros ul, .gp-cons ul { list-style: none; margin: 0 0 0 2px; }
.gp-pros li { padding-left: 22px; position: relative; }
.gp-pros li::before { content: "✓"; position: absolute; left: 0; color: var(--pros); font-weight: 700; }
.gp-cons li { padding-left: 22px; position: relative; }
.gp-cons li::before { content: "✕"; position: absolute; left: 0; color: var(--cons); font-weight: 700; }

/* ===== 16. Rail / TOC ===== */
.rail { position: sticky; top: 90px; display: flex; flex-direction: column; gap: 20px; min-width: 0; }
.toc { background: var(--card); border: 1px solid var(--line); border-radius: var(--gp-radius); padding: 18px; }
.toc.collapsed { padding: 12px 16px; }
.toc-toggle { display: flex; align-items: center; justify-content: space-between; width: 100%; background: none; border: none; cursor: pointer; padding: 0; color: var(--fg); font: inherit; }
.toc-toggle .toc-title { font-family: var(--font-display); font-size: 12.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; }
.toc-toggle .toc-chev { color: var(--muted); font-size: 12px; transition: transform .2s ease; }
.toc.collapsed .toc-chev { transform: rotate(-90deg); }
.toc ul { list-style: none; margin: 12px 0 0; padding: 0; transition: opacity .2s ease; }
.toc.collapsed ul { display: none; }
.toc a { display: block; font-size: 13px; color: var(--muted); padding: 6px 0 6px 12px; border-left: 2px solid var(--line); line-height: 1.4; }
.toc a:hover { color: var(--fg); }
.toc a.active { color: var(--gp-accent); border-left-color: var(--gp-accent); font-weight: 600; }
.toc .sub { padding-left: 24px; font-size: 12.5px; }

/* Theme widgets share the TOC card look (Latest News / Most Viewed). */
.gp-widget-list ul { margin: 0; }
.gp-widget-list li { display: flex; align-items: baseline; gap: 8px; }
.gp-widget-list li + li { margin-top: 2px; }
.gp-widget-list .gp-mv-n { font-family: var(--font-display); font-size: 12px; font-weight: 700; color: var(--muted); width: 18px; flex-shrink: 0; text-align: right; }
.rail .gp-ad-slot .ad-box:empty { min-height: 250px; border: 1px dashed var(--line); border-radius: var(--gp-radius); background: var(--soft); }
/* QR Code Composer box (before the rail ad). */
.gp-qr { border: 1px solid var(--line); border-radius: var(--gp-radius); background: var(--card); padding: 18px 14px 14px; text-align: center; }
.gp-qr .qrc_canvass { margin: 0 auto !important; display: block !important; }
.gp-qr .gp-qr-note { font-size: 11px; color: var(--muted); margin: 10px 0 0; }
html[data-theme="dark"] .gp-qr .qrc_canvass { filter: invert(1); }

/* Google preferred-source button: centered inside widgets (legacy), left-justified manual link in theme placements. */
.widget div[google-add-preferred-source-btn] { display: flex !important; justify-content: center !important; align-items: center !important; width: 100% !important; }
.widget div[google-add-preferred-source-btn] iframe { margin: 0 auto; }
.gp-swg { display: inline-block; margin: 2px 3px 7px 0; }
.gp-swg img { max-width: 280px; height: auto; display: block; }
.tabs-row .gp-swg { margin: 0; }
.tabs-row .gp-swg img { max-width: 240px; }
.gp-swg:hover { opacity: .92; }

/* ===== 17. Author box + related ===== */
.author-card { display: flex; gap: 16px; border: 1px solid var(--line); border-radius: var(--gp-radius); padding: 20px; margin: 30px 0; background: var(--card); }
/* Multi-author: one card per author, side by side on wide screens. */
.author-cards { display: grid; gap: 16px; margin: 30px 0; }
@media (min-width: 900px) {
	.author-cards { grid-template-columns: repeat(2, 1fr); }
}
.author-cards .author-card { margin: 0; min-width: 0; }
/* Social icons row inside author cards (only when the author set them). */
.author-card .author-socials { display: flex; gap: 8px; margin: 10px 0 4px; }
.author-card .author-socials .s { width: 32px; height: 32px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; border: 1px solid var(--line); color: var(--muted); background: transparent; transition: color .15s ease, border-color .15s ease; }
.author-card .author-socials .s:hover { color: var(--gp-accent); border-color: var(--gp-accent); }
.author-card .avatar { width: 56px; height: 56px; font-size: 19px; }
/* Keep the avatar photo dead-centered in its circle — overrides the generic
   .content img rule (margin/border would shift + ring the avatar). */
.author-card .avatar img { margin: 0; border: 0; border-radius: 50%; width: 100%; height: 100%; object-fit: cover; }
.author-card .info h4 { font-size: 16px; font-weight: 700; margin: 0 0 2px; }
.author-card .info .role { font-size: 12.5px; color: var(--muted); margin-bottom: 8px; }
.author-card .info p { font-size: 13.5px; color: var(--muted); line-height: 1.6; margin: 0 0 8px; }
.author-card .info .more { font-size: 12.5px; color: var(--gp-accent); font-weight: 700; }
.related { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin: 20px 0 10px; }
.rel { background: var(--card); border: 1px solid var(--line); border-radius: var(--gp-radius); overflow: hidden; }
.rel:hover { border-color: var(--gp-accent); }
.rel .th { position: relative; display: block; height: var(--gp-card-thumb-h, 160px); background: var(--soft); }
.rel .th img, .rel .th .ph { width: 100%; height: 100%; object-fit: cover; display: block; }
.rel .th .ph { display: flex; align-items: center; justify-content: center; font-family: var(--font-display); font-size: 13px; color: var(--muted); text-transform: uppercase; letter-spacing: .08em; }
.rel .th .shade { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(1,4,9,0) 30%, rgba(1,4,9,.85) 100%); }
.rel .th .t { position: absolute; left: 0; right: 0; bottom: 0; padding: 26px 14px 12px; font-size: 13.5px; font-weight: 600; line-height: 1.32; color: #fff; }
.rel .th:hover .t { color: var(--gp-accent); }
.rel .b { padding: 10px 14px 12px; }
.rel .b .m { font-size: 11.5px; color: var(--muted); display: flex; gap: 8px; align-items: center; }
.rel .b .m .score { color: var(--gp-accent); font-weight: 700; font-size: 11.5px; }
.rel .b .m .sep { opacity: .6; }

/* ===== 18. Trending grid ===== */
.trending-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; padding: 6px 0 40px; }
.tg { background: var(--card); border: 1px solid var(--line); border-radius: var(--gp-radius); padding: 14px; position: relative; }
.tg .num { font-family: var(--font-display); font-size: 30px; font-weight: 700; color: transparent; -webkit-text-stroke: 1px var(--muted); line-height: 1; margin-bottom: 8px; } /* stroke must be a token: #3d444d on --card was 1.75:1 (Lighthouse) */
.tg .num.hot { -webkit-text-stroke: 1px var(--gp-accent); }
.tg .t { font-size: 13.5px; font-weight: 600; line-height: 1.35; }
.tg .t a:hover { color: var(--gp-accent); }
.tg .m { font-size: 11.5px; color: var(--muted); margin-top: 6px; }

/* ===== 19. Buttons ===== */
.btn { display: inline-flex; align-items: center; gap: 8px; padding: 11px 20px; border-radius: 9px; font-weight: 700; font-size: 14px; cursor: pointer; border: none; font-family: var(--font-body); }
.btn.primary { background: var(--gp-accent); color: #fff; }
.btn.primary:hover { background: var(--gp-accent-dark); }
.btn.ghost { background: transparent; border: 1px solid var(--line); color: var(--fg); }
.btn.ghost:hover { border-color: var(--gp-accent); color: var(--gp-accent); }

/* ===== 20. Comments ===== */
.comments-wrap { max-width: 760px; margin: 40px auto 0; }
.comments-wrap h3 { font-size: 20px; font-weight: 700; margin-bottom: 16px; }
.comment-list { list-style: none; margin: 0; padding: 0; }
.comment-list .comment-body { background: var(--card); border: 1px solid var(--line); border-radius: var(--gp-radius); padding: 16px; margin-bottom: 12px; }
.comment-list .comment-author { font-weight: 600; }
.comment-list .comment-metadata { font-size: 12px; color: var(--muted); }
.comment-list .reply a { font-size: 12.5px; color: var(--gp-accent); font-weight: 700; }
.comment-form label { display: block; font-size: 13px; font-weight: 600; margin: 10px 0 4px; }
.comment-form input, .comment-form textarea { width: 100%; padding: 10px 12px; border-radius: 8px; border: 1px solid var(--line); background: var(--card); color: var(--fg); font: inherit; font-size: 14px; }
.comment-form .submit { background: var(--gp-accent); color: #fff; border: none; font-weight: 700; cursor: pointer; width: auto; padding: 10px 24px; }
.comment-form .submit:hover { background: var(--gp-accent-dark); }

/* ===== 21. Pages / archives / search ===== */
.page-head { padding: 24px 0 8px; }
.page-head h1 { font-size: 34px; font-weight: 700; letter-spacing: -.02em; margin: 0; }
.page-head .desc { color: var(--muted); margin-top: 6px; }
.single-content, .page-content { max-width: 760px; margin: 0 auto; }
.archive-grid, .search-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; padding: 20px 0; }
.pagination { display: flex; gap: 8px; justify-content: center; padding: 24px 0 40px; }
.pagination .page-numbers { padding: 8px 14px; border: 1px solid var(--line); border-radius: 8px; background: var(--card); color: var(--muted); font-weight: 600; }
.pagination .page-numbers.current { background: var(--gp-accent); border-color: var(--gp-accent); color: #fff; }
.pagination a.page-numbers:hover { border-color: var(--gp-accent); color: var(--gp-accent); }

/* ===== Pagebar (standard "Page X of Y" bar — inc/pagebar.php) =====
   Scoped to .event-page intentionally: the site-level pagination snippet
   injects its own .gp-pagebar rules inline AFTER this sheet. Equal
   specificity means the later inline copy wins, and that copy is hardcoded
   white/blue — so without the scope the microsite bar would ignore dark/
   light mode and the per-event accent. Once that snippet is retired these
   rules can be un-scoped to serve every paginated listing. */
.event-page .gp-pagebar { display: flex; align-items: center; justify-content: center; gap: 10px; background: var(--card); border: 1px solid var(--line); border-radius: 999px; padding: 10px 20px; margin: 30px auto 40px; width: fit-content; box-shadow: 0 2px 12px var(--shadow); font-family: var(--font-body); }
.event-page .gp-pagebar-txt { color: var(--muted); font-size: 13px; font-weight: 600; }
.event-page .gp-pagebar-cur { background: var(--card); border: 2px solid var(--gp-accent); color: var(--gp-accent); font-weight: 800; font-size: 14px; min-width: 30px; height: 30px; display: inline-flex; align-items: center; justify-content: center; border-radius: 8px; padding: 0 4px; line-height: 1; }
.event-page .gp-pagebar-total { color: var(--fg); font-weight: 700; font-size: 13px; }
.event-page .gp-pagebar-arrow { width: 34px; height: 34px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--line); border-radius: 50%; color: var(--fg); font-size: 17px; line-height: 1; text-decoration: none; transition: border-color .15s ease, color .15s ease; }
.event-page .gp-pagebar-arrow:hover { border-color: var(--gp-accent); color: var(--gp-accent); }
.event-page .gp-pagebar-arrow:focus-visible { outline: 2px solid var(--gp-accent); outline-offset: 2px; }
.event-page .gp-pagebar-arrow.is-off { opacity: .35; pointer-events: none; }
@media (max-width: 600px) { .event-page .gp-pagebar { gap: 7px; padding: 9px 14px; } }
.search-form { display: flex; gap: 10px; }
.search-form input[type="search"] { flex: 1; padding: 12px 14px; border-radius: 9px; border: 1px solid var(--line); background: var(--card); color: var(--fg); font: inherit; font-size: 15px; }
.search-form button { padding: 12px 20px; border-radius: 9px; border: none; background: var(--gp-accent); color: #fff; font: inherit; font-weight: 700; cursor: pointer; }

/* ===== 22. 404 ===== */
.notfound { text-align: center; padding: 80px 20px; }
.notfound .big { font-size: 96px; font-weight: 800; color: var(--gp-accent); line-height: 1; }
.notfound h1 { font-size: 28px; margin: 12px 0; }

/* ===== 23. Responsive ===== */
@media (max-width: 1024px) {
  .layout { grid-template-columns: minmax(0, 1fr); }
  .sidebar { position: static; display: grid; grid-template-columns: 1fr 1fr; align-items: start; }
  .newsletter, .sidebar .widget:last-child { grid-column: 1 / -1; }
  .trending-grid { grid-template-columns: repeat(2, 1fr); }
  .article-layout { grid-template-columns: minmax(0, 760px); }
  .rail { position: static; order: 2; flex-direction: column; }
  .toc { flex: none; }
}
@media (max-width: 760px) {
  nav.main { display: none; }
  .burger { display: grid; }
  /* With the nav hidden its margin-left:auto disappears — push the actions
     back to the right edge like desktop/mobile instead of mid-header. */
  .header-actions { margin-left: auto; }
  .lead { grid-template-columns: 1fr; }
  .lead .img { min-height: 220px; }
  .lead h2 { font-size: 24px; }
  .news-grid, .archive-grid, .search-grid { grid-template-columns: 1fr; }
  .sidebar { display: flex; }
  .footer-inner { grid-template-columns: 1fr 1fr; }
  .trending-grid { grid-template-columns: 1fr 1fr; }
  .topbar .right { display: none; }
  .article-head h1 { font-size: 28px; }
  .hero-img .zoom { display: none; }
  .related { grid-template-columns: 1fr; }
  .row { grid-template-columns: 40px 1fr; gap: 16px; }
  .row .score { grid-column: 2; font-size: 22px; }
  .author-card { flex-wrap: wrap; }
}
@media (max-width: 480px) {
  .trending-grid { grid-template-columns: 1fr; }
  .footer-inner { grid-template-columns: 1fr; }
  .header-inner { gap: 12px; }
  .logo { font-size: 18px; }
  .share-btn { padding: 8px 10px; font-size: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .ticker ul { animation: none; }
  .lead-carousel::before, .lead-carousel::after { animation: none; opacity: .18; }
  *, *::before, *::after { transition-duration: .01ms !important; }
}

/* ===== 18. Reading progress bar (single post) ===== */
.gp-progress { position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 999; opacity: 0; transition: opacity .2s ease; pointer-events: none; }
.gp-progress span { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--gp-accent), var(--gp-accent-dark)); border-radius: 0 3px 3px 0; }

/* ===== 19. 80% popup card (single post) ===== */
.gp-popup { position: fixed; bottom: 24px; left: 50%; transform: translate(-50%, 16px); width: min(420px, calc(100vw - 32px)); background: var(--card); border: 1px solid var(--line); border-radius: 14px; box-shadow: 0 18px 50px var(--shadow); padding: 20px 22px; z-index: 998; opacity: 0; transition: opacity .25s ease, transform .25s ease; }
.gp-popup.show { opacity: 1; transform: translate(-50%, 0); }
.gp-popup-close { position: absolute; top: 10px; right: 12px; background: none; border: none; color: var(--muted); font-size: 15px; cursor: pointer; padding: 4px; line-height: 1; }
.gp-popup-close:hover { color: var(--fg); }
.gp-popup-body h3 { font-family: var(--font-display); font-size: 16px; font-weight: 700; margin: 0 0 6px; }
.gp-popup-body p { font-size: 13px; color: var(--muted); margin: 0 0 14px; line-height: 1.5; }
.gp-popup-body .btn-primary { display: inline-block; background: var(--gp-accent-strong); color: #fff; padding: 9px 18px; border-radius: 8px; font-weight: 700; font-size: 13.5px; text-decoration: none; }
.gp-popup-body .btn-primary:hover { background: var(--gp-accent-dark); }
.gp-popup-body .btn-primary:focus-visible { outline: 2px solid var(--gp-accent); outline-offset: 2px; }
@media (max-width: 480px) {
  .gp-popup { bottom: 12px; width: calc(100vw - 24px); }
}

/* ===== 22. Videos page (page-videos.php — YouTube channel feed) ===== */
.page-videos { padding: 28px 0 48px; }
.videos-head { margin-bottom: 28px; }
.videos-head h1 { font-size: 30px; font-weight: 800; margin: 10px 0 6px; letter-spacing: -.02em; }
.videos-intro { color: var(--muted); max-width: 640px; margin: 0 0 14px; }
.videos-sec { margin: 34px 0; }
.videos-sec-title { font-size: 20px; font-weight: 700; display: flex; align-items: center; gap: 10px; margin-bottom: 16px; letter-spacing: -.01em; }
.videos-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 20px; }
.video-card { background: var(--card); border: 1px solid var(--line); border-radius: var(--gp-radius); overflow: hidden; display: flex; flex-direction: column; }
.video-thumb { position: relative; display: block; width: 100%; padding: 0; border: 0; background: #000; cursor: pointer; aspect-ratio: 16/9; }
.video-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.video-dur { position: absolute; right: 8px; bottom: 8px; background: rgba(0,0,0,.82); color: #fff; font-size: 11.5px; font-weight: 600; padding: 2px 6px; border-radius: 6px; }
.video-play { position: absolute; inset: 0; margin: auto; width: 52px; height: 52px; border-radius: 50%; background: rgba(0,0,0,.55); color: #fff; display: grid; place-items: center; font-size: 18px; padding-left: 3px; border: 2px solid rgba(255,255,255,.85); transition: transform .15s ease, background .15s ease; }
.video-thumb:hover .video-play { transform: scale(1.08); background: var(--gp-accent); }
.video-title { margin: 12px 14px 0; font-size: 15px; font-weight: 700; line-height: 1.35; }
.video-title .video-expand-btn { background: none; border: 0; padding: 0; text-align: left; color: var(--fg); font: inherit; cursor: pointer; }
.video-title .video-expand-btn:hover { color: var(--gp-accent); }
.video-title a.video-expand-btn { text-decoration: none; }
.video-thumb--link { text-decoration: none; }
.video-meta { margin: 4px 14px 12px; font-size: 12px; color: var(--muted); }
.video-expand { border-top: 1px solid var(--line); padding: 14px; }
.video-player { position: relative; aspect-ratio: 16/9; background: #000; border-radius: 8px; overflow: hidden; margin-bottom: 12px; }
.video-player iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.video-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.video-actions .btn { font-size: 12.5px; padding: 7px 12px; }
.share-label { font-size: 12px; color: var(--muted); margin-left: 4px; }
.share-row { display: inline-flex; gap: 6px; flex-wrap: wrap; }
.share { font-size: 12px; font-weight: 600; padding: 6px 10px; border-radius: 999px; border: 1px solid var(--line); color: var(--fg); text-decoration: none; transition: border-color .15s ease, color .15s ease; }
.share:hover { border-color: var(--gp-accent); color: var(--gp-accent); }
.share-fb:hover { border-color: #1877f2; color: #1877f2; }
.share-x:hover { border-color: #e7e9ea; color: #e7e9ea; }
.share-threads:hover { border-color: #fff; color: #fff; }
.share-wa:hover { border-color: #25d366; color: #25d366; }
@media (max-width: 480px) {
  .videos-grid { grid-template-columns: 1fr; }
  .video-actions { gap: 6px; }
}

/* ---------------------------------------------------------------------------
 * GP — Latest YouTube Shorts widget (v1.11)
 * Compact thumb rows matching the TOC-card widget style.
 * ------------------------------------------------------------------------- */
.gp-widget-yt { list-style: none; margin: 12px 0 0; padding: 0; }
.gp-widget-yt li { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--line); }
.gp-widget-yt li:last-child { border-bottom: 0; padding-bottom: 0; }
.gp-widget-yt li:first-child { padding-top: 0; }
.gp-widget-yt .yt-th { flex-shrink: 0; line-height: 0; }
.gp-widget-yt .yt-th img { width: 80px; height: 45px; object-fit: cover; border-radius: 6px; display: block; background: var(--line); }
.gp-widget-yt .yt-info { min-width: 0; }
.gp-widget-yt .yt-t { display: block; font-size: 13px; font-weight: 600; color: var(--fg); line-height: 1.35; }
.gp-widget-yt .yt-t:hover { color: var(--gp-accent); }
.gp-widget-yt .yt-meta { display: block; margin-top: 2px; font-size: 11.5px; color: var(--muted); }

/* ---------------------------------------------------------------------------
 * v1.11 homepage/footer/widget additions
 * ------------------------------------------------------------------------- */

/* Full-width hero (carousel or legacy lead) above the layout. */
.lead-full { padding: 16px 0 0; }
.lead-full .lead .img { min-height: 340px; max-height: 460px; }

/* Discernible divider between homepage segments: gradient hairline + accent diamond. */
.sec-sep { border: 0; height: 1px; margin: 28px 0; background: linear-gradient(90deg, transparent, var(--line) 12%, var(--line) 88%, transparent); position: relative; }
.sec-sep::after { content: ""; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%) rotate(45deg); width: 7px; height: 7px; background: var(--gp-accent); border-radius: 2px; }

/* GP — Social Icons widget (flat, minimalist). */
.gp-social { display: flex; gap: 8px; flex-wrap: wrap; }
.gp-social a { width: 38px; height: 38px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--line); border-radius: 9px; color: var(--muted); transition: color .15s ease, border-color .15s ease, background .15s ease; }
.gp-social a:hover { color: #fff; background: var(--gp-accent); border-color: var(--gp-accent); }
.gp-social svg { width: 18px; height: 18px; fill: currentColor; }

/* ---------------------------------------------------------------------------
 * v1.13 — Event Microsite (page-event.php)
 * ------------------------------------------------------------------------- */
.event-page { padding: 18px 0 10px; }
.event-hero { text-align: center; padding: 26px 0 10px; }
.event-hero .pill.event { background: var(--gp-accent-strong); border-color: var(--gp-accent-strong); color: #fff; } /* accent-strong token, not raw accent: white on the raw accent is 2.8:1 */
.event-hero h1 { font-size: 44px; font-weight: 800; letter-spacing: -.02em; line-height: 1.08; margin: 14px 0 8px; color: var(--fg); }
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .event-hero h1 { background: linear-gradient(90deg, var(--gp-accent), var(--fg) 55%, var(--gp-accent)); -webkit-background-clip: text; background-clip: text; color: transparent; }
}
.event-tagline { color: var(--muted); font-size: 15px; margin: 0 auto 4px; max-width: 60ch; }
.event-carousel { margin-top: 22px; }
@media (max-width: 760px) {
  .event-hero h1 { font-size: 32px; }
}

/* ---------------------------------------------------------------------------
 * v1.14 — About Us (page-about.php)
 * ------------------------------------------------------------------------- */
.about-page { padding: 18px 0 10px; }
.about-hero { padding: 22px 0 6px; max-width: 760px; }
.about-hero h1 { font-size: 40px; font-weight: 800; letter-spacing: -.02em; line-height: 1.1; margin: 12px 0 12px; }
.about-hero h1::after { content: ""; display: block; width: 64px; height: 4px; border-radius: 2px; background: var(--gp-accent); margin-top: 14px; }
.about-lead { color: var(--muted); font-size: 16px; line-height: 1.6; max-width: 56ch; margin: 0; }

.about-values { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin: 26px 0 10px; }
.about-values .value { background: var(--card); border: 1px solid var(--line); border-radius: var(--gp-radius); padding: 20px 18px; }
.about-values .value .ico { font-size: 26px; display: block; margin-bottom: 8px; }
.about-values .value h3 { font-family: var(--font-display); font-size: 14px; text-transform: uppercase; letter-spacing: .06em; margin: 0 0 6px; }
.about-values .value p { color: var(--muted); font-size: 13.5px; margin: 0; line-height: 1.55; }

.about-content { margin-top: 18px; }
.about-content h1 { display: none; } /* page title already in the hero */
.about-content h2 { font-size: 26px; font-weight: 700; letter-spacing: -.01em; margin: 34px 0 14px; padding-left: 12px; border-left: 4px solid var(--gp-accent); }
.about-content h3 { font-family: var(--font-display); font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); margin: 30px 0 12px; }
.about-content h4 { font-size: 19px; font-weight: 700; margin: 26px 0 6px; letter-spacing: -.005em; }
.about-content p { color: var(--muted); font-size: 15px; line-height: 1.65; margin: 0 0 14px; max-width: 70ch; }
.about-content .wp-block-image { margin: 14px 0; }
.about-content .wp-block-image img { border-radius: 12px; max-width: 240px; height: auto; }
.about-content .wp-block-embed { border-radius: 14px; overflow: hidden; margin: 18px 0; box-shadow: 0 0 0 1px var(--line); }
@media (max-width: 760px) {
  .about-values { grid-template-columns: 1fr; }
  .about-hero h1 { font-size: 32px; }
}

/* ---------------------------------------------------------------------------
 * v1.15 — Contact Us (page-contact.php)
 * ------------------------------------------------------------------------- */
.contact-page { padding: 18px 0 10px; }
.contact-hero { padding: 22px 0 6px; max-width: 760px; }
.contact-hero h1 { font-size: 40px; font-weight: 800; letter-spacing: -.02em; line-height: 1.1; margin: 12px 0 12px; }
.contact-hero h1::after { content: ""; display: block; width: 64px; height: 4px; border-radius: 2px; background: var(--gp-accent); margin-top: 14px; }
.contact-lead { color: var(--muted); font-size: 16px; line-height: 1.6; max-width: 56ch; margin: 0; }

.contact-grid { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 380px); gap: 26px; margin-top: 24px; align-items: start; }

/* Typography for the page's own info content (same treatment as About). */
.contact-content h1 { display: none; }
.contact-content h2 { font-size: 26px; font-weight: 700; letter-spacing: -.01em; margin: 34px 0 14px; padding-left: 12px; border-left: 4px solid var(--gp-accent); }
.contact-content h3 { font-family: var(--font-display); font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); margin: 30px 0 12px; }
.contact-content h4 { font-size: 19px; font-weight: 700; margin: 26px 0 6px; letter-spacing: -.005em; }
.contact-content p { color: var(--muted); font-size: 15px; line-height: 1.65; margin: 0 0 14px; max-width: 70ch; }
.contact-content a { color: var(--gp-accent); }
.contact-content a:hover { text-decoration: underline; }

/* Native contact form card. */
.contact-form h3 { font-family: var(--font-display); font-size: 16px; font-weight: 700; margin: 0 0 14px; }
.contact-form p { margin: 0 0 12px; }
.contact-form label { display: block; font-size: 12.5px; font-weight: 600; color: var(--muted); margin-bottom: 5px; }
.contact-form input, .contact-form textarea { width: 100%; padding: 10px 12px; border-radius: 8px; border: 1px solid var(--line); background: var(--card); color: var(--fg); font: inherit; font-size: 14px; }
.contact-form input:focus, .contact-form textarea:focus { outline: none; border-color: var(--gp-accent); }
.contact-form textarea { resize: vertical; min-height: 110px; }
.contact-form button { width: 100%; padding: 11px; border-radius: 8px; border: none; background: var(--gp-accent-strong); color: #fff; font: inherit; font-weight: 700; font-size: 14px; cursor: pointer; transition: background .15s ease; }
.contact-form button:hover { background: var(--gp-accent-dark); }
.contact-form .cf-hp { display: none; }
.cf-msg { border-radius: 8px; padding: 10px 12px; font-size: 13.5px; margin: 0 0 14px; }
.cf-msg.ok { background: rgba(34, 197, 94, .12); color: var(--fg); border: 1px solid rgba(34, 197, 94, .4); }
.cf-msg.err { background: rgba(220, 38, 38, .10); color: var(--fg); border: 1px solid rgba(220, 38, 38, .4); }
@media (max-width: 900px) {
  .contact-grid { grid-template-columns: 1fr; }
  .contact-hero h1 { font-size: 32px; }
}

/* ---------------------------------------------------------------------------
 * v1.16 — Captcha, footer description width, editor font loading
 * ------------------------------------------------------------------------- */
.cf-captcha { margin: 0 0 12px; }
.cf-captcha label { display: block; font-size: 12.5px; font-weight: 600; color: var(--muted); margin-bottom: 5px; }
.cf-captcha input[type="number"] { width: 100px; padding: 10px 12px; border-radius: 8px; border: 1px solid var(--line); background: var(--card); color: var(--fg); font: inherit; font-size: 14px; -moz-appearance: textfield; }
.cf-captcha input[type="number"]::-webkit-outer-spin-button,
.cf-captcha input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.footer-desc { font-size: 13px; line-height: 1.6; margin: 6px 0 0; max-width: 48ch; }

/* ---------------------------------------------------------------------------
 * Bento hero grid (alternative to the featured carousel)
 * Fixed width; rows grow with content (no vertical constraint).
 * ------------------------------------------------------------------------ */
.gp-bento { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; grid-auto-rows: auto; }
.gp-bento .bento-cell { position: relative; overflow: hidden; border-radius: var(--gp-radius); border: 1px solid var(--line); background: var(--card); display: flex; flex-direction: column; justify-content: flex-end; min-height: 150px; text-decoration: none; color: var(--fg); opacity: 0; transform: translateY(26px); transition: opacity .65s ease, transform .65s cubic-bezier(.22, 1, .36, 1), border-color .25s ease, box-shadow .25s ease; transition-delay: calc(var(--i) * 75ms); box-shadow: 0 1px 2px var(--shadow); }
.gp-bento.visible .bento-cell { opacity: 1; transform: none; }
.gp-bento.visible .bento-cell:hover { transform: translateY(-4px); border-color: var(--gp-accent); box-shadow: 0 12px 28px var(--shadow); }
.gp-bento.settled .bento-cell { transition-delay: 0s; }
.gp-bento .bento-cell .thumb { position: absolute; inset: 0; background: var(--soft); }
.gp-bento .bento-cell .thumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.gp-bento .bento-cell .thumb.placeholder { display: grid; place-items: center; }
.gp-bento .bento-cell .thumb.placeholder .label { color: var(--muted); font-weight: 500; }
.gp-bento .bento-cell .shade {
  position: absolute; inset: 0; z-index: 1;
  /* Granular overlay: top veil holds until (100 − cover), then ramps to full
     bottom darkness. Vars emitted inline from Customizer (front-page.php). */
  background: linear-gradient(180deg,
    rgba(1, 4, 9, var(--gp-bento-top, .05)) 0%,
    rgba(1, 4, 9, var(--gp-bento-top, .05)) calc(100% - var(--gp-bento-cover, 70%)),
    rgba(1, 4, 9, var(--gp-bento-shade, .85)) 100%);
}
.gp-bento .bento-cell.featured .shade {
  /* Featured keeps a readable floor even if the user drops the slider. */
  background: linear-gradient(180deg,
    rgba(1, 4, 9, min(calc(var(--gp-bento-top, .05) * 1.8), .2)) 0%,
    rgba(1, 4, 9, min(calc(var(--gp-bento-top, .05) * 1.8), .2)) calc(100% - var(--gp-bento-cover, 70%)),
    rgba(1, 4, 9, min(max(calc(var(--gp-bento-shade, .85) * 1.06), .55), .97)) 100%);
}
.gp-bento .bento-cell .body { position: relative; z-index: 2; padding: 16px; display: flex; flex-direction: column; gap: 8px; }
.gp-bento .bento-cell .pills { display: flex; gap: 6px; flex-wrap: wrap; }
.gp-bento .bento-cell .title { font-family: var(--font-display); font-size: 16px; font-weight: 600; line-height: 1.3; letter-spacing: -.005em; color: #fff; text-shadow: 0 1px 3px rgba(1, 4, 9, .55); }
.gp-bento .bento-cell .excerpt { font-size: 13px; line-height: 1.5; color: rgba(230, 237, 243, .82); margin: 0; text-shadow: 0 1px 3px rgba(1, 4, 9, .55); }
.gp-bento .bento-cell.featured { grid-column: span 2; grid-row: span 2; min-height: 260px; }
.gp-bento .bento-cell.featured .title { font-size: 22px; }
.gp-bento .bento-cell .pill.score { color: #fff; }
@media (max-width: 900px) {
  .gp-bento { grid-template-columns: repeat(2, 1fr); }
  .gp-bento .bento-cell.featured { grid-column: span 2; grid-row: span 2; min-height: 220px; }
}
@media (max-width: 560px) {
  .gp-bento { grid-template-columns: 1fr; }
  .gp-bento .bento-cell.featured { grid-column: span 1; grid-row: span 1; min-height: 200px; }
  .gp-bento .bento-cell { min-height: 170px; }
  .gp-bento .bento-cell.featured .title { font-size: 19px; }
}
@media (prefers-reduced-motion: reduce) {
  .gp-bento .bento-cell { opacity: 1; transform: none; transition: none; }
}

/* ===== 20. Special Coverage header toggle (inc/coverage.php) ===== */
.gp-coverage { position: absolute; left: 0; right: 0; top: 100%; z-index: 55; pointer-events: none; }
/* Right-align the toggle + panel to the CONTENT WRAP (not the viewport edge),
   so it sits tucked under the header search/theme icons like the design peg. */
.gp-coverage-toggle {
  --cov-accent: #f97316;
  position: absolute;
  right: max(20px, calc((100vw - var(--gp-maxw)) / 2 + 20px));
  top: -14px; /* ~40% of the pill sits above the header bottom border, like the peg */
  pointer-events: auto;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 18px;
  border: 0; border-radius: 999px; cursor: pointer;
  background: var(--cov-accent, var(--gp-accent, #f97316));
  color: #fff; font-size: 13px; font-weight: 700; letter-spacing: .04em;
  box-shadow: 0 6px 18px color-mix(in srgb, var(--cov-accent, #f97316) 45%, transparent);
  /* NOTE: keep this element absolutely positioned — a later `position: relative`
     would override `absolute` and drop the pill into flow at the container's
     LEFT edge (below the logo). Shine/ring pseudo-elements anchor to the
     absolute box fine. */
  overflow: hidden;
  transition: transform .2s ease, box-shadow .2s ease, filter .2s ease;
}
html[data-theme="light"] .gp-coverage-toggle { color: #fff; }
.gp-coverage-toggle:hover { transform: translateY(-1px); filter: brightness(1.07); box-shadow: 0 8px 22px color-mix(in srgb, var(--cov-accent, #f97316) 55%, transparent); }
.gp-coverage-toggle .cov-caret { font-size: 10px; transition: transform .25s ease; }
.gp-coverage.open .gp-coverage-toggle .cov-caret { transform: rotate(180deg); }
/* Shine sweep (CSS port of VengeanceUI animated-button shine) */
.gp-coverage-toggle .cov-shine {
  position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(110deg, transparent 30%, rgba(255,255,255,.38) 50%, transparent 70%);
  background-size: 220% 100%; background-position: 120% 0;
  animation: gp-cov-shine 2.8s ease-in-out infinite;
}
@keyframes gp-cov-shine { 0% { background-position: 130% 0; } 55% { background-position: -40% 0; } 100% { background-position: -40% 0; } }
/* Animated border ring (subtle pulse) */
.gp-coverage-toggle::after {
  content: ""; position: absolute; inset: -2px; border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--cov-accent, #f97316) 70%, transparent);
  animation: gp-cov-ring 2.8s ease-in-out infinite;
}
@keyframes gp-cov-ring { 0%, 100% { opacity: .9; } 50% { opacity: .35; } }

.gp-coverage-panel {
  position: absolute; top: 34px;
  right: max(20px, calc((100vw - var(--gp-maxw)) / 2 + 20px));
  width: min(680px, calc(100vw - 40px));
  pointer-events: auto;
  opacity: 0; visibility: hidden; transform: translateY(-8px);
  transition: opacity .22s ease, transform .22s ease, visibility .22s;
  z-index: 56;
}
.gp-coverage.open .gp-coverage-panel { opacity: 1; visibility: visible; transform: translateY(0); }
.gp-coverage-card {
  position: relative;
  background: var(--card); border: 1px solid var(--line);
  border-radius: 16px; box-shadow: 0 22px 55px var(--shadow);
  padding: 20px 22px 22px;
}
.cov-close {
  position: absolute; top: 10px; right: 12px;
  width: 28px; height: 28px; border-radius: 8px;
  border: 1px solid var(--line); background: var(--soft); color: var(--muted);
  font-size: 15px; line-height: 1; cursor: pointer; z-index: 2;
}
.cov-close:hover { color: var(--fg); border-color: var(--gp-accent); }
.cov-pill {
  display: inline-block; margin: 0 0 8px; padding: 3px 10px;
  border-radius: 999px; background: color-mix(in srgb, var(--cov-accent, var(--gp-accent, #f97316)) 16%, transparent);
  color: var(--cov-accent, var(--gp-accent, #f97316));
  font-size: 10.5px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase;
}
.cov-main { display: grid; grid-template-columns: 210px 1fr; gap: 18px; align-items: center; }
.cov-main--noimg { grid-template-columns: 1fr; }
.cov-img { display: block; border-radius: 12px; overflow: hidden; background: var(--soft); }
.cov-img img { width: 100%; height: var(--gp-cov-img-h, 160px); object-fit: cover; display: block; }
.cov-body { min-width: 0; }
.cov-title { margin: 0 0 6px; font-size: 19px; line-height: 1.3; }
.cov-title a { color: var(--fg); }
.cov-title a:hover { color: var(--cov-accent, var(--gp-accent, #f97316)); }
.cov-tagline { margin: 0 0 10px; color: var(--muted); font-size: 13px; line-height: 1.55; }
.cov-posts { list-style: none; margin: 0 0 12px; padding: 0; display: flex; flex-direction: column; gap: 5px; }
.cov-posts a {
  display: flex; gap: 8px; align-items: baseline;
  font-size: 13px; color: var(--muted); text-decoration: none; line-height: 1.4;
}
.cov-posts a::before { content: ""; flex: none; width: 6px; height: 6px; border-radius: 50%; background: var(--cov-accent, var(--gp-accent, #f97316)); transform: translateY(-2px); }
.cov-posts a:hover { color: var(--cov-accent, var(--gp-accent, #f97316)); }
.cov-cta {
  display: inline-block; padding: 7px 15px; border-radius: 9px;
  background: var(--cov-accent, var(--gp-accent, #f97316)); color: #fff;
  font-size: 13px; font-weight: 700; text-decoration: none;
  transition: filter .2s ease;
}
.cov-cta:hover { filter: brightness(1.08); color: #fff; }

@media (max-width: 760px) {
  .cov-main { grid-template-columns: 1fr; }
  .cov-img img { height: calc(var(--gp-cov-img-h, 160px) * 1.25); }
  /* Toggle + panel keep wrap-aligned right offset via the max() formula. */
  .gp-coverage-panel { width: calc(100vw - 40px); }
}
@media (max-width: 480px) {
  .gp-coverage-toggle { font-size: 12px; padding: 8px 14px; }
}
@media (prefers-reduced-motion: reduce) {
  .gp-coverage-toggle .cov-shine, .gp-coverage-toggle::after { animation: none; }
  .gp-coverage-panel { transition: none; }
}

/* ===== 21. Legacy [youtube] embeds (inc/compat.php) — fluid 16:9 ===== */
.gp-legacy-embed { position: relative; margin: 22px 0; }
.gp-legacy-embed .wp-block-embed__wrapper {
  position: relative; width: 100%; aspect-ratio: 16 / 9;
  border-radius: 12px; overflow: hidden; background: #000;
}
.gp-legacy-embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }