/*
Theme Name:   GP Newsdesk
Description:  GeneratePress child theme for technology and news magazines. Ships with a breaking-news ticker, dark mode, a colour panel, reading time, article summary field and named ad slots. Runs on the free GeneratePress theme and the free GenerateBlocks plugin (GP Premium optional); the included GP Newsdesk Options plugin adds one-click demo setup, settings and updates.
Author:       GP Newsdesk
Theme URI:    https://demo.ncamedya.co/
Author URI:   https://ncamedya.co/
Template:     generatepress
Version:      1.2.2
Requires at least: 6.7
Tested up to: 7.0
Requires PHP: 7.4
License:      GNU General Public License v2 or later
License URI:  https://www.gnu.org/licenses/gpl-2.0.html
Text Domain:  gp-newsdesk
Tags:         news, blog, two-columns, right-sidebar, custom-colors, custom-menu, translation-ready
*/

/* ==========================================================================
   SKIN TOKENS  — values sampled from the live reference layout
   Light page, dark islands. The accent is a SURFACE colour only: it is never
   used for type on light backgrounds (yellow on white lands near 1.3:1).
   ========================================================================== */
:root {
  /* Accent (surfaces: buttons, active pager cell, section rule) */
  --nd-accent:          #F9D30D;
  --nd-accent-hover:    #E6C200;
  --nd-accent-contrast: #161616;   /* type ON the accent */
  --nd-accent-text:     #111111;   /* hover colour for type on light */

  /* Light surfaces */
  --nd-bg:        #FFFFFF;   /* page */
  --nd-bg-alt:    #F8F9FA;   /* cards, section-title band */
  --nd-text:      #333333;
  --nd-heading:   #000000;   /* body h2/h3 — darker than body copy */
  --nd-text-soft: #555555;
  --nd-muted:     #6B6B6B;   /* 4.9:1 on the card ground #F8F9FA — AA everywhere it appears */
  --nd-rule:      #E5E7EB;
  --nd-rule-soft: #F0F1F3;
  --nd-bg-alt-hover: #F1F2F4;

  /* Dark islands */
  --nd-bg-top:    #161616;   /* header bar */
  --nd-bg-dark:   #161616;   /* rail, feature bands, footer */
  --nd-dark-card: rgba(255, 255, 255, 0.05);
  --nd-dark-rule: rgba(255, 255, 255, 0.10);
  --nd-on-dark:      #FFFFFF;
  --nd-on-dark-soft: #AAAAAA;

  /* Slider number strip */
  --nd-pager-bg:        #333333;   /* strip container */
  --nd-pager-cell:      #161616;   /* idle cell */
  --nd-pager-cell-text: #AAAAAA;

  /* Type */
  --nd-font: 'Noto Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  /* Rhythm */
  --nd-radius: 8px;
  --nd-gap:    clamp(1rem, 0.8rem + 0.9vw, 1.75rem);
  --nd-shell:  1100px;
}

/* Optional dark skin — opt in via the header toggle (adds .nd-dark to <html>).
   Only tokens are redefined here; every surface below resolves through them,
   which is what makes one toggle flip the whole site. */
html.nd-dark {
  --nd-bg:        #1A1A1A;
  --nd-bg-alt:    #232323;
  --nd-bg-alt-hover: #2C2C2C;
  --nd-text:      #E8EAED;
  --nd-heading:   #F2F4F7;
  --nd-text-soft: #C3C7CE;
  --nd-muted:     #9AA0AA;
  --nd-rule:      #333333;
  --nd-rule-soft: #292929;
}

/* ------------------------------------------------------------------------
   SURFACE OWNERSHIP
   GeneratePress paints the page, content column and widgets white from its
   own dynamic CSS. Left alone, the dark skin flipped the text but not the
   ground beneath it (white page, near-white type). Claiming these surfaces
   for the tokens keeps the light skin pixel-identical and makes the dark one
   correct everywhere.
   ------------------------------------------------------------------------ */
body,
.site-content,
.site .content-area,
.inside-article,
.entry-content,
.widget-area .widget,
.comments-area {
  background-color: var(--nd-bg);
  color: var(--nd-text);
}
.separate-containers .inside-article,
.separate-containers .comments-area,
.one-container .site-content { background-color: var(--nd-bg); }

/* Type that GP colours from its own settings. Zero specificity again, so the
   dark-island components keep the white headings they define for themselves. */
:where(h1, h2, h3, h4, h5, h6) { color: var(--nd-heading); }
/* Prose links. :where() keeps this at zero specificity on purpose: the home
   page is page content, so every card, rail and button inside it would
   otherwise inherit the prose colour and vanish against its own surface. */
:where(.entry-content) :where(a) { color: var(--nd-accent-text); }
html.nd-dark :where(.entry-content) :where(a) { color: var(--nd-accent); }

/* Type on an accent surface always resolves through the contrast token. */
.nd-btn,
html.nd-dark .nd-btn { color: var(--nd-accent-contrast); }
.nd-ticker a,
html.nd-dark .nd-ticker a,
.nd-ticker__item { color: var(--nd-accent-contrast); }

/* Forms and buttons — GP's global button colours otherwise stay light */
html.nd-dark input[type="text"],
html.nd-dark input[type="email"],
html.nd-dark input[type="search"],
html.nd-dark input[type="url"],
html.nd-dark textarea,
html.nd-dark select {
  background-color: var(--nd-bg-alt);
  color: var(--nd-text);
  border-color: var(--nd-rule);
}
html.nd-dark ::placeholder { color: var(--nd-muted); }

/* ==========================================================================
   BASE TYPOGRAPHY
   The tokens above are inert until something consumes them — GeneratePress
   emits only `font-family: inherit`, so without this block the body falls back
   to the system stack and the bundled Noto Sans never renders.
   ========================================================================== */
body,
button, input, select, textarea {
  font-family: var(--nd-font);
}
body {
  font-size: 16px;
  line-height: 1.6;
  color: var(--nd-text);
  background-color: var(--nd-bg);
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4, h5, h6 {
  font-family: var(--nd-font);
  font-weight: 700;
  line-height: 1.3;
  color: var(--nd-text);
}
a { color: var(--nd-accent); }
a:hover, a:focus { color: var(--nd-accent-text); }
img { max-width: 100%; height: auto; }

/* ==========================================================================
   TICKER
   ========================================================================== */
.nd-ticker {
  display: flex;
  align-items: stretch;
  gap: 0;
  background: var(--nd-accent);
  color: var(--nd-accent-contrast);
  border-radius: var(--nd-radius);
  overflow: hidden;
  min-height: 44px;                 /* reserved — no shift when headlines load */
}
.nd-ticker__label {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  padding: 0 0.9rem;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  background: rgba(0, 0, 0, 0.18);
  white-space: nowrap;
}
.nd-ticker__viewport { flex: 1 1 auto; overflow: hidden; display: flex; align-items: center; }
.nd-ticker__track {
  display: flex;
  gap: 2.5rem;
  white-space: nowrap;
  padding-left: 1rem;
  animation: nd-ticker-scroll var(--nd-ticker-speed, 40s) linear infinite;
}
.nd-ticker:hover .nd-ticker__track,
.nd-ticker:focus-within .nd-ticker__track { animation-play-state: paused; }
.nd-ticker__item {
  color: var(--nd-accent-contrast);
  font-size: 0.9rem;
  font-weight: 500;
  text-decoration: none;
}
.nd-ticker__item:hover { color: var(--nd-accent-contrast); text-decoration: underline; }
.nd-ticker__close {
  flex: 0 0 auto;
  background: none; border: 0; cursor: pointer;
  color: var(--nd-accent-contrast);
  font-size: 1.25rem; line-height: 1;
  padding: 0 0.85rem;
  opacity: 0.75;
}
.nd-ticker__close:hover { opacity: 1; }

@keyframes nd-ticker-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }   /* track is duplicated, so -50% loops seamlessly */
}

/* Motion sensitivity: hold the headlines still and let the strip scroll manually. */
@media (prefers-reduced-motion: reduce) {
  .nd-ticker__track { animation: none; }
  .nd-ticker__viewport { overflow-x: auto; }
}

/* ==========================================================================
   DARK MODE TOGGLE
   ========================================================================== */
/* button.-prefixed so GeneratePress's global button colours never win. It
   lives on the dark header bar, so it wears the social-icon circle look. */
button.nd-dark-toggle,
button.nd-dark-toggle:focus {
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; padding: 0;
  background: var(--nd-dark-card); border: 0; border-radius: 50%;
  color: var(--nd-on-dark); cursor: pointer; font-size: 15px; line-height: 1;
}
button.nd-dark-toggle:hover { background: var(--nd-accent); color: var(--nd-accent-contrast); }
.nd-dark-toggle__moon { display: none; }
html.nd-dark .nd-dark-toggle__sun  { display: none; }
html.nd-dark .nd-dark-toggle__moon { display: inline; }

/* ==========================================================================
   AD SLOTS — heights reserved whether or not ads are switched on
   ========================================================================== */
.nd-ad {
  display: flex; align-items: center; justify-content: center;
  margin: 1.75rem auto; text-align: center;
  background: var(--nd-bg-alt); border-radius: var(--nd-radius); overflow: hidden;
}
/* Placeholder state gets the dashed frame; pasted ad code renders in a plain box. */
.nd-ad:has(> .nd-ad__label) { border: 1px dashed var(--nd-rule); }
.nd-ad--leaderboard { min-height: 90px; }
.nd-ad--inline      { min-height: 280px; }
.nd-ad--sidebar     { min-height: 250px; margin: 0 0 24px; }
.nd-ad--footer      { min-height: 90px; }
/* Full-width band under the header on archives; no rounding, no side margin. */
.nd-ad--masthead    { min-height: 250px; margin: 0; border-radius: 0; }
@media (max-width: 768px) {
  .nd-ad--leaderboard { min-height: 100px; }
  .nd-ad--sidebar     { min-height: 250px; }
  .nd-ad--masthead    { min-height: 120px; }
}
.nd-ad__label {
  display: block;
  font-size: 0.65rem; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--nd-muted);
}

/* ==========================================================================
   SUMMARIZE WITH AI — button + assistant dropdown on single posts
   ========================================================================== */
/* The button shares the category badge's line, as on the reference: the row
   floats right and the headline clears it, so badge and button sit level. */
.nd-ai-row { float: right; margin: 0 0 6px 12px; }
.nd-post-head .nd-post-title,
.nd-post-head .nd-summary { clear: right; }
.nd-ai { position: relative; display: inline-block; }
.nd-ai__toggle {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 12px;
  background: var(--nd-bg-alt); color: var(--nd-text);
  border: 1px solid var(--nd-rule); border-radius: 999px;
  font-size: 13px; font-weight: 700;
  cursor: pointer;
}
.nd-ai__toggle:hover { background: var(--nd-accent); color: var(--nd-accent-contrast); border-color: var(--nd-accent); }
.nd-ai__spark { flex: 0 0 auto; }
.nd-ai__menu {
  position: absolute; right: 0; top: calc(100% + 6px); z-index: 60;
  min-width: 160px;
  background: var(--nd-bg); border: 1px solid var(--nd-rule); border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
  overflow: hidden;
}
.nd-ai__item {
  display: block; padding: 9px 14px;
  font-size: 14px; font-weight: 500;
  color: var(--nd-text); text-decoration: none;
}
.nd-ai__item:hover { background: var(--nd-bg-alt); color: var(--nd-accent-text); }
html.nd-dark .nd-ai__menu { box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5); }

/* ==========================================================================
   ARTICLE FURNITURE
   ========================================================================== */
.nd-summary {
  font-size: 1.12rem; line-height: 1.6;
  color: var(--nd-text-soft);
  max-width: 62ch;
  margin: 0 0 1rem;
}
.nd-time, .nd-post-date, .nd-reading-time { font-size: 0.82rem; color: var(--nd-muted); }
.nd-archive-title { margin: 0 0 0.5rem; }
.nd-archive-title__label { color: var(--nd-muted); font-weight: 400; }


/* Section header with a rule and a "see all" affordance. */

/* Images inside loops should never letterbox or jump. */

/* ==========================================================================
   ARTICLE ELEMENT SUPPORT
   ========================================================================== */

/* ==========================================================================
   HERO SLIDER
   Slides are stacked absolutely and only the active one is translated into
   view. Nothing depends on a measured track width, so a slide cannot drift
   out of alignment — the failure mode a translated strip is prone to.
   The numbered bar is injected by inc/hero-slider.php from the slide count.
   ========================================================================== */
/* Column flex so the number strip is pinned to the very bottom: the rail can
   be taller than the slider's natural 16/9, and without this the strip floated
   mid-block with dead space beneath it. The stage absorbs the extra height and
   the covered images simply crop a little taller. */
.nd-hero {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  overflow: hidden;
  border-radius: var(--nd-radius) 0 0 var(--nd-radius);
  background: var(--nd-bg-dark);
}

.nd-hero__stage {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: #000;
  border-radius: var(--nd-radius) 0 0 0;
}

.nd-slide {
  position: absolute;
  inset: 0;
  z-index: 1;
  visibility: hidden;
  transform: translateX(100%);
  transition: transform 0.5s ease-in-out, visibility 0s 0.5s;
}
.nd-slide.is-active {
  z-index: 2;
  visibility: visible;
  transform: translateX(0);
  transition: transform 0.5s ease-in-out, visibility 0s;
}
/* Outgoing slide keeps its visibility for the length of the slide-out. */
.nd-slide.is-exit-left  { z-index: 2; visibility: visible; transform: translateX(-100%); }
.nd-slide.is-exit-right { z-index: 2; visibility: visible; transform: translateX(100%); }
/* Pre-positions the incoming slide; JS strips these after a reflow. */
.nd-slide.is-enter-right { transform: translateX(100%);  transition: none; }
.nd-slide.is-enter-left  { transform: translateX(-100%); transition: none; }

.nd-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transform: scale(1);
}
.nd-slide.is-zooming img {
  animation: nd-hero-zoom 5s ease-in-out infinite alternate;
}
@keyframes nd-hero-zoom {
  from { transform: scale(1); }
  to   { transform: scale(1.05); }
}

.nd-slide__link {
  position: absolute;
  inset: 0;
  z-index: 5;
  display: block;
  color: inherit;
  text-decoration: none;
}

.nd-slide__overlay {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 60px 22px 26px;
  color: #fff;
  pointer-events: none;
  background: linear-gradient(to top,
              rgba(0, 0, 0, 0.95) 0%,
              rgba(0, 0, 0, 0.60) 60%,
              transparent 100%);
  transition: background 0.3s ease;
}
.nd-slide__link:hover .nd-slide__overlay,
.nd-slide__link:focus-visible .nd-slide__overlay {
  background: linear-gradient(to top,
              rgba(0, 0, 0, 0.97) 0%,
              rgba(0, 0, 0, 0.75) 50%,
              transparent 100%);
}
.nd-slide__overlay h2 {
  margin: 0.45rem 0 0;
  color: #fff;
  line-height: 1.25;
  font-size: clamp(1.15rem, 0.9rem + 1.1vw, 1.95rem);
  font-weight: 700;
}
.nd-slide__overlay p {
  margin: 0.4rem 0 0;
  color: rgba(255, 255, 255, 0.82);
  font-size: 0.92rem;
  line-height: 1.5;
}
.nd-slide__cat {
  display: inline-block;
  padding: 0.2rem 0.55rem;
  background: var(--nd-accent);
  color: var(--nd-accent-contrast);
  border-radius: 3px;
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* Arrows */
.nd-hero__arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 15;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px; height: 40px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.35);
  color: #fff;
  font-size: 1.35rem;
  line-height: 1;
  cursor: pointer;
  transition: background 0.3s ease, color 0.3s ease;
}
.nd-hero__arrow:hover { background: var(--nd-accent); color: var(--nd-accent-contrast); }
.nd-hero__arrow:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.nd-hero__arrow--prev { left: 12px; }
.nd-hero__arrow--next { right: 12px; }

/* Numbered bar */
.nd-hero__nav {
  position: relative;
  z-index: 10;
  flex: 0 0 auto;
  display: flex;
  overflow-x: auto;
  background: var(--nd-pager-bg);
  border-radius: 0 0 0 var(--nd-radius);
  scrollbar-width: none;
}
.nd-hero__nav::-webkit-scrollbar { display: none; }
.nd-hero__num {
  flex: 1;
  min-width: 44px;
  height: 43px;
  padding: 0;
  border: 0;
  border-right: 1px solid rgba(255, 255, 255, 0.14);
  background: transparent;
  color: rgba(255, 255, 255, 0.6);
  font-size: 0.88rem;
  font-variant-numeric: tabular-nums;
  cursor: pointer;
  transition: background 0.3s ease, color 0.3s ease;
}
.nd-hero__num:last-child { border-right: 0; }
.nd-hero__num:hover { background: #222222; color: var(--nd-on-dark); }
.nd-hero__num.is-active {
  background: var(--nd-accent);
  color: var(--nd-accent-contrast);
  font-weight: 700;
}
.nd-hero__num:focus-visible { outline: 2px solid #fff; outline-offset: -3px; }

@media (max-width: 900px) {
  .nd-slide__overlay { padding: 50px 18px 22px; }
}
@media (max-width: 600px) {
  .nd-hero__arrow { display: none; }
  .nd-slide__overlay { padding: 40px 15px 18px; }
  .nd-hero__num { height: 38px; font-size: 0.8rem; }
}
@media (prefers-reduced-motion: reduce) {
  .nd-slide { transition: none; }
  .nd-slide img { animation: none; }
}

/* ==========================================================================
   HOME COMPONENTS
   Geometry mirrors a 1100px content shell: hero 733/367, card grid 4×267,
   category split 723/362, recent 2×540.
   ========================================================================== */

/* --- Section title band ------------------------------------------------- */
.nd-section-title {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 34px 0 16px;
  padding: 10px 10px 10px 0;
  background: var(--nd-bg-alt);
  border-radius: 4px;
  overflow: hidden;
}
.nd-section-title::before {          /* accent rule down the leading edge */
  content: "";
  flex: 0 0 auto;
  width: 6px;
  align-self: stretch;
  min-height: 32px;
  background: var(--nd-accent);
}
.nd-section-title h2 {
  margin: 0;
  font-size: 24px;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  color: var(--nd-text);
}


/* --- Hero: slider + dark rail ------------------------------------------ */
/* Rounded only on the outer edges so the seam between slider and rail is flat. */
/* No gap: the slider, its number strip and the rail read as ONE dark block.
   A gap here is what made the right side look detached. */
.nd-hero-wrap {
  display: grid;
  grid-template-columns: 733fr 367fr;
  gap: 0;
  align-items: stretch;
  margin-top: 18px;      /* clears the ticker sitting directly above */
}
.nd-rail {
  background: var(--nd-bg-dark);
  border-radius: 0 var(--nd-radius) var(--nd-radius) 0;
  padding: 10px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 8px;
  height: 100%;
  min-height: 0;
  overflow: hidden;
}
.nd-rail__item {
  display: grid;
  grid-template-columns: 110px 1fr;
  gap: 12px;
  align-items: center;
  flex: 0 0 auto;
  height: 78px;          /* fixed: a taller card would push the whole hero row
                            past the slider's natural height and strand the
                            number strip above the bottom edge */
  padding: 8px;
  border-radius: 8px;
  background: var(--nd-dark-card);
  border: 1px solid var(--nd-dark-rule);
  transition: background 0.2s ease, border-color 0.2s ease;
}
.nd-rail__item:hover { background: rgba(255, 255, 255, 0.10); border-color: rgba(255, 255, 255, 0.20); }
.nd-rail__item img {
  width: 100%;
  aspect-ratio: 110 / 62;
  object-fit: cover;
  border-radius: 6px;
  display: block;
}
.nd-rail__item h3 {
  margin: 0;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.3;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.nd-rail__item h3 a { color: var(--nd-on-dark); text-decoration: none; }

.nd-rail__item .nd-time { color: var(--nd-on-dark-soft); font-size: 12px; }

/* --- Card grid (image on top) ------------------------------------------ */
.nd-cards {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
}
.nd-card {
  display: block;
  background: var(--nd-bg-alt);
  border-radius: var(--nd-radius);
  padding: 10px;
  text-decoration: none;
}

.nd-card img {
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  border-radius: 6px;
  display: block;
  margin-bottom: 10px;
}
.nd-card h3 {
  margin: 0;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.35;
  color: var(--nd-text);
}

.nd-card .nd-time { display: block; margin-top: 8px; font-size: 12px; color: var(--nd-muted); }

/* --- List rows (thumb left, text right) -------------------------------- */
.nd-rows { display: grid; gap: 12px; }
.nd-row {
  display: grid;
  grid-template-columns: 210px 1fr;
  gap: 16px;
  align-items: center;
  padding: 10px;
  background: var(--nd-bg-alt);
  border-radius: var(--nd-radius);
}

.nd-row img {
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  border-radius: 6px;
  display: block;
}
.nd-row h3 { margin: 0; font-size: 20px; font-weight: 700; line-height: 1.3; }
.nd-row h3 a { color: var(--nd-text); text-decoration: none; }

.nd-row p { margin: 8px 0 0; color: var(--nd-text-soft); font-size: 15px; line-height: 1.55; }
.nd-row .nd-time { display: block; margin-top: 10px; font-size: 13px; color: var(--nd-muted); }

/* --- Category split: main column + dark sidebar island ----------------- */
.nd-split {
  display: grid;
  grid-template-columns: 723fr 362fr;
  gap: 15px;
  align-items: start;
}
.nd-dark-rail {
  background: var(--nd-bg-dark);
  border-radius: var(--nd-radius);
  padding: 12px;
  display: grid;
  gap: 12px;
  align-content: start;
}
/* Photo card with the headline sitting on the image */
.nd-photo-card {
  position: relative;
  display: block;
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid var(--nd-dark-rule);
  text-decoration: none;
}
.nd-photo-card img {
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  display: block;
}
.nd-photo-card h3 {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  margin: 0;
  padding: 34px 12px 12px;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.3;
  color: #fff;
  background: linear-gradient(to top, rgba(0,0,0,0.92) 0%, rgba(0,0,0,0.55) 55%, transparent 100%);
}


/* --- Dark showcase section (reference's full dark band) ------------------ */
.nd-showcase {
  background: var(--nd-bg-dark);
  border-radius: var(--nd-radius);
  padding: 16px 16px 20px;
  margin: 4px 0 10px;
}
.nd-showcase .nd-section-title--dark {
  background: transparent;
  margin-bottom: 14px;
}
.nd-showcase .nd-section-title--dark h2 { color: #fff; }
.nd-showcase__body {
  display: grid;
  grid-template-columns: 640fr 418fr;
  gap: 10px;
  align-items: start;
}
.nd-showcase__main { display: grid; }
.nd-showcase__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  align-content: start;
}
.nd-showcase__main .nd-photo-card img { aspect-ratio: 16 / 10.2; }
.nd-showcase__main .nd-photo-card h3 { font-size: 22px; padding: 44px 16px 14px; }
.nd-showcase__grid .nd-photo-card h3 { font-size: 14px; padding: 26px 10px 10px; }
.nd-showcase .nd-see-all { margin-top: 14px; }
@media (max-width: 768px) {
  .nd-showcase__body { grid-template-columns: 1fr; }
}

/* --- Two-column recent list -------------------------------------------- */
.nd-two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }

/* --- Breakpoints -------------------------------------------------------- */
@media (max-width: 1024px) {
  .nd-hero-wrap,
  .nd-split      { grid-template-columns: 1fr; }
  .nd-hero-wrap  { gap: 12px; }
  .nd-hero,
  .nd-hero__stage,
  .nd-hero__nav  { border-radius: var(--nd-radius) var(--nd-radius) 0 0; }
  .nd-hero__nav  { border-radius: 0 0 var(--nd-radius) var(--nd-radius); }
  .nd-rail       { border-radius: var(--nd-radius); height: auto; }
  .nd-cards      { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px) {
  .nd-two-col    { grid-template-columns: 1fr; }
  .nd-row        { grid-template-columns: 150px 1fr; gap: 12px; }
  .nd-row h3     { font-size: 17px; }
  .nd-row p      { display: none; }
  .nd-section-title h2 { font-size: 20px; }
}
@media (max-width: 600px) {
  .nd-cards      { grid-template-columns: 1fr; }
  .nd-row        { grid-template-columns: 1fr; }
}

/* ==========================================================================
   TWO-TIER HEADER
   Tier 1 (GeneratePress header): dark bar, logo left, social row right.
   Tier 2 (GeneratePress primary nav): white category bar below it.
   ========================================================================== */
/* Backgrounds of both tiers span the full viewport (like the footer);
   only the inner content stays in the 1140 shell. */
.site-header,
.main-navigation {
  max-width: none;
  margin-left: 0;
  margin-right: 0;
}
.site-header .inside-header,
.main-navigation .inside-navigation {
  max-width: 1140px;
  margin-left: auto;
  margin-right: auto;
}
.site-header {
  background-color: var(--nd-bg-dark);
}
.site-header .inside-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  min-height: 80px;
  padding-top: 0;
  padding-bottom: 0;
}
.site-header .site-title a { color: var(--nd-on-dark); }
.site-header .site-title a:hover { color: var(--nd-accent); }
.site-header .site-description { color: var(--nd-muted); }

/* Category bar */
.main-navigation {
  background-color: var(--nd-bg);
  border-bottom: 1px solid var(--nd-rule);
}
/* Light-mode nav colours come from Customize → Colors (GP owns them). Only the
   dark skin needs an override, since GP has no dark variant of those settings. */
html.nd-dark .main-navigation,
html.nd-dark .main-navigation ul ul { background-color: var(--nd-bg); }
html.nd-dark .main-navigation .main-nav ul li a,
html.nd-dark .main-navigation .menu-toggle,
html.nd-dark .main-navigation .menu-bar-items { color: var(--nd-text); }
html.nd-dark .main-navigation .main-nav ul li:not([class*="current-menu-"]):hover > a,
html.nd-dark .main-navigation .main-nav ul li[class*="current-menu-"] > a {
  color: var(--nd-accent);
  background-color: var(--nd-bg);
}
.main-navigation .main-nav > ul > li > a {
  font-size: 16px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.01em;
  line-height: 52px;
  padding-top: 0;
  padding-bottom: 0;
}

/* --- Mobile header: single dark row, reference language —
   hamburger left | logo centred | dark-mode + search right --------------- */
@media (max-width: 768px) {
  .site-header .inside-header {
    position: relative;       /* anchors the right-side icon cluster */
    flex-wrap: nowrap;
    justify-content: center;
    min-height: 60px;
    padding: 0 96px 0 56px;   /* clears the hamburger (L) and the icons (R) */
  }
  .site-branding { text-align: center; }
  .site-header .main-title { font-size: 22px; }

  /* The nav bar collapses to just the toggle, floated over the dark bar. */
  .main-navigation {
    position: absolute;
    top: 0;
    left: 0;
    width: 56px;
    background: transparent;
    border: 0;
    z-index: 20;
  }
  .main-navigation .menu-toggle {
    height: 60px;
    padding: 0 0 0 18px;
    background: transparent;
    color: var(--nd-on-dark);
  }
  .main-navigation .mobile-menu { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } /* visible to screen readers only */

  /* Social row: keep only dark-mode + search, pinned right in the bar. */
  .site-header .nd-social a:not(:last-of-type),
  .site-header .nd-social .nd-social__label { display: none; }
  .site-header .gb-element-ndsocial,
  .site-header .nd-social {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    gap: 8px;
  }
  .site-header .nd-dark-toggle { display: inline-flex; }
}
/* Slideout panel: dark ground, bold uppercase links — the site's menu language */
.slideout-navigation {
  background-color: var(--nd-bg-top);
}
.slideout-navigation .main-nav > ul > li > a {
  color: var(--nd-on-dark);
  font-size: 16px;
  font-weight: 700;
  text-transform: uppercase;
}
.slideout-navigation .main-nav > ul > li > a:hover { color: var(--nd-accent); }
.slideout-exit { color: #fff; }

/* Mobile drawer — used when GP Premium's Menu Plus is not providing the
   slideout above (inc/mobile-menu.php). Same look: 265px dark panel from the
   left, bold uppercase links, close button outside the panel, dim overlay. */
.nd-drawer[hidden] { display: none; }
.nd-drawer { position: fixed; inset: 0; z-index: 100000; }
.nd-drawer__overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.8);
  opacity: 0;
  transition: opacity 0.2s ease;
}
.nd-drawer__panel {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 265px;
  max-width: calc(100% - 50px);
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 0 20px;
  background-color: var(--nd-bg-top);
  transform: translate3d(-100%, 0, 0);
  transition: transform 0.2s cubic-bezier(0.16, 0.68, 0.43, 0.99);
  outline: 0;
}
.nd-drawer.is-open .nd-drawer__overlay { opacity: 1; }
.nd-drawer.is-open .nd-drawer__panel { transform: none; }
.nd-drawer__menu,
.nd-drawer__menu ul,
.nd-drawer__nav ul { margin: 0; padding: 0; list-style: none; }
.nd-drawer__nav a {
  display: block;
  padding: 0 20px;
  color: var(--nd-on-dark);
  font-size: 14px;
  font-weight: 700;
  line-height: 46px;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  text-decoration: none;
}
.nd-drawer__nav ul ul a { padding-left: 36px; font-size: 13px; line-height: 40px; }
.nd-drawer__nav a:hover,
.nd-drawer__nav a:focus-visible,
.nd-drawer__nav .current-menu-item > a { color: var(--nd-accent); }
.nd-drawer .nd-drawer__close {
  position: absolute;
  top: 0;
  left: 260px;
  width: 40px;
  height: 50px;
  padding: 10px;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: #fff;
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.2s ease;
}
.nd-drawer.is-open .nd-drawer__close { opacity: 1; }
.nd-drawer .nd-drawer__close:hover,
.nd-drawer .nd-drawer__close:focus { background: transparent; color: var(--nd-accent); }
.nd-drawer__close svg { display: block; width: 1em; height: 1em; fill: currentColor; }
html.nd-drawer-open,
html.nd-drawer-open body { overflow: hidden; }
@media (prefers-reduced-motion: reduce) {
  .nd-drawer__overlay,
  .nd-drawer__panel,
  .nd-drawer .nd-drawer__close { transition: none; }
}

/* Social / action row — the "Header icons" part (inc/parts.php) */
.nd-social {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-left: auto;
}
.nd-social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--nd-dark-card);
  color: var(--nd-on-dark);
  text-decoration: none;
  transition: background 0.2s ease, color 0.2s ease;
}
.nd-social a:hover { background: var(--nd-accent); color: var(--nd-accent-contrast); }
.nd-social svg { width: 15px; height: 15px; fill: currentColor; display: block; }
.nd-social__label {
  margin-left: 4px;
  font-size: 15px;
  font-weight: 700;
  color: var(--nd-on-dark);
  white-space: nowrap;
}

@media (max-width: 768px) {
  .site-header .inside-header { min-height: 64px; }
  .nd-social__label { display: none; }
  .main-navigation .main-nav > ul > li > a { font-size: 14px; line-height: 46px; }
}

/* --- Section footer call-to-action -------------------------------------- */
.nd-see-all {
  display: flex;
  justify-content: center;
  margin: 22px 0 6px;
}
.nd-btn {
  display: inline-block;
  padding: 14px 30px;
  border-radius: 6px;
  background: var(--nd-accent);
  color: var(--nd-accent-contrast);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  text-decoration: none;
  transition: background 0.2s ease, transform 0.15s ease;
}
.nd-btn:hover {
  background: var(--nd-accent-hover);
  color: var(--nd-accent-contrast);
  transform: translateY(-1px);
}
.nd-btn:focus-visible { outline: 2px solid var(--nd-text); outline-offset: 3px; }

@media (max-width: 600px) {
  .nd-btn { width: 100%; text-align: center; padding: 13px 20px; }
}


/* --- Card hover: the picture reacts, the headline stays put ---------------
   A colour shift on the title fights the headline hierarchy; a small push-in
   on the image reads as "selected" without moving any type. --------------- */
.nd-card,
.nd-row,
.nd-photo-card,
.nd-rail__item { overflow: hidden; }

.nd-card img,
.nd-row img,
.nd-photo-card img,
.nd-rail__item img {
  transition: transform 0.35s ease;
  will-change: transform;
}
.nd-card:hover img,
.nd-row:hover img,
.nd-photo-card:hover img,
.nd-rail__item:hover img { transform: scale(1.06); }

.nd-card:hover h3,
.nd-row:hover h3 a,
.nd-photo-card:hover h3,
.nd-rail__item:hover h3 a { color: inherit; }
.nd-photo-card:hover h3,
.nd-rail__item:hover h3 a { color: var(--nd-on-dark); }

@media (prefers-reduced-motion: reduce) {
  .nd-card img, .nd-row img, .nd-photo-card img, .nd-rail__item img {
    transition: none;
  }
  .nd-card:hover img, .nd-row:hover img,
  .nd-photo-card:hover img, .nd-rail__item:hover img { transform: none; }
}

/* ==========================================================================
   INNER PAGES — single post and archives
   Column widths mirror the reference: 750 content beside a 350 sidebar.
   ========================================================================== */

/* GeneratePress paints the footer on an inner wrapper, so the token has to be
   applied there as well as on .site-footer. */
.site-footer,
.site-footer .inside-site-info,
.footer-widgets { background-color: var(--nd-bg-dark); }
.site-footer, .site-footer a { color: var(--nd-on-dark-soft); }
.site-footer a:hover { color: var(--nd-accent); }

/* --- Static pages (about, contact, masthead, legal set) ------------------ */
/* Scoped :not(.home) so the pattern-built front page keeps its own layout. */
body.page:not(.home) .entry-title {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 28px;
  font-weight: 700;
  line-height: 1.3;
  color: var(--nd-text);
  margin-bottom: 18px;
}
body.page:not(.home) .entry-title::before {
  content: "";
  flex: 0 0 auto;
  width: 15px;
  height: 15px;
  background: var(--nd-accent);
}
body.page:not(.home) .entry-content {
  max-width: 72ch;
  font-size: 16px;
  line-height: 1.6;
  color: var(--nd-text);
}
body.page:not(.home) .entry-content h2 { font-size: 20px; font-weight: 700; color: var(--nd-heading); margin: 1.8em 0 0.6em; }
body.page:not(.home) .entry-content h3 { font-size: 17px; font-weight: 700; margin: 1.4em 0 0.5em; }
body.page:not(.home) .entry-content a {
  color: var(--nd-accent-text);
  text-decoration: underline;
  text-decoration-color: var(--nd-accent);
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}
body.page:not(.home) .entry-content a:hover {
  background: var(--nd-accent);
  color: var(--nd-accent-contrast);
  text-decoration: none;
}

/* --- Single post -------------------------------------------------------- */
.single .entry-content { font-size: 16px; line-height: 1.5; color: var(--nd-text); }
.single .entry-content p { margin: 0 0 1.25em; }
.single .entry-content h2 { font-size: 20px; font-weight: 700; line-height: 1.3; color: var(--nd-heading); margin: 1.8em 0 .6em; }
.single .entry-content h3 { font-size: 18px; font-weight: 700; margin: 1.5em 0 .5em; }
.single .entry-content img { border-radius: var(--nd-radius); }
.entry-meta, .single .entry-meta a { font-size: 14px; color: var(--nd-muted); }
.single .entry-meta a:hover { color: var(--nd-accent-text); }

/* --- Archive / category -------------------------------------------------- */
/* Reference model: plain heading row — 15×15 accent square before an
   uppercase title, term description on its own line below. No band. */
.archive .page-header,
.blog .page-header,
.search .page-header {
  margin-bottom: 18px;
}
.page-header .page-title,
.page-header h1 {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  font-size: 22px;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--nd-text);
}
.page-header .page-title::before,
.page-header h1::before {
  content: "";
  flex: 0 0 auto;
  width: 15px;
  height: 15px;
  background: var(--nd-accent);
}
.page-header .taxonomy-description,
.page-header .author-info {
  margin: 10px 0 0;
  font-size: 16px;
  line-height: 24px;
  color: var(--nd-text);
}
.page-header .taxonomy-description p { margin: 0; }

/* Column count comes from Customize → Layout → Blog → Columns (GP Premium).
   Only the gutter is ours, so a buyer can switch to 3 or 4 columns freely. */
.site-main .generate-columns-container {
  margin-left: 0;
}
/* The archive title also lives inside this container — span it across. */
.site-main .generate-columns-container > .page-header { grid-column: 1 / -1; }
/* Column widths, gutters and the responsive collapse are GeneratePress's own
   (Customize → Layout → Blog → Columns). Nothing to override here. */

/* Archive cards — reference model: bare card, image on top (16:9, square
   corners), 18px title, small relative-time meta. No box, no excerpt. */
.archive .generate-columns-container > article,
.blog .generate-columns-container > article,
.search .generate-columns-container > article,
.archive .site-main > article,
.blog .site-main > article {
  background: transparent;
  margin-bottom: 20px;
}
.archive .inside-article,
.blog .inside-article,
.search .inside-article { padding: 0; }
.generate-columns-container > article > .inside-article { height: 100%; }
.archive .post-image,
.blog .post-image { margin: 0 0 10px; overflow: hidden; }
.archive .post-image img,
.blog .post-image img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  display: block;
  transition: transform 0.35s ease;
}
.archive article:hover .post-image img,
.blog article:hover .post-image img { transform: scale(1.06); }

@media (max-width: 768px) {
  .site-main .generate-columns-container { grid-template-columns: 1fr; }
}

/* Archive grid without GP Premium's Blog module (body classes from
   inc/free-gp.php; Premium's own columns never get these classes).
   Columns: Customize → Layout → Archive columns. Title band, search box and
   pager span the full row. */
.nd-cols-1 { --nd-cols: 1; }
.nd-cols-2 { --nd-cols: 2; }
.nd-cols-3 { --nd-cols: 3; }
.nd-cols-4 { --nd-cols: 4; }
.nd-archive-grid .site-main {
  display: grid;
  grid-template-columns: repeat(var(--nd-cols, 2), minmax(0, 1fr));
  column-gap: 20px;
}
.nd-archive-grid .site-main > :not(article) { grid-column: 1 / -1; }
.nd-archive-grid .site-main > article { min-width: 0; margin-bottom: 40px; }
.nd-archive-grid .inside-article .post-image { margin-bottom: 2em; }
@media (max-width: 1024px) {
  .nd-cols-3,
  .nd-cols-4 { --nd-cols: 2; }
}
@media (max-width: 768px) {
  .nd-archive-grid { --nd-cols: 1; }
  .nd-archive-grid .site-main > article { margin-bottom: 20px; }
}
.archive .entry-title,
.blog .entry-title { font-size: 18px; font-weight: 700; line-height: 1.35; margin: 0 0 6px; }
.archive .entry-title a,
.blog .entry-title a { color: var(--nd-text); text-decoration: none; }
.archive .entry-meta,
.blog .entry-meta { font-size: 12px; }

/* Pagination */
.paging-navigation .page-numbers {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 38px; height: 38px; padding: 0 10px; margin: 0 3px;
  background: var(--nd-bg-alt); color: var(--nd-text);
  border-radius: 4px; font-weight: 700; text-decoration: none;
}
.paging-navigation .page-numbers.current,
.paging-navigation .page-numbers:hover {
  background: var(--nd-accent); color: var(--nd-accent-contrast);
}

/* Sidebar widgets */
.sidebar .widget {
  background: var(--nd-bg-alt);
  border-radius: var(--nd-radius);
  padding: 15px;
  margin-bottom: 20px;
}
.sidebar .widget-title {
  font-size: 16px; font-weight: 700; text-transform: uppercase;
  margin: 0 0 12px; padding-left: 10px;
  border-left: 5px solid var(--nd-accent);
}


/* ==========================================================================
   ARTICLE — header, editorial blocks, share row, continuous reading
   Values sampled from the reference article layout.
   ========================================================================== */
:root { --nd-verified: #1D9BF0; }

/* --- Header ------------------------------------------------------------- */
.nd-post-cat-wrap a,
.nd-post-cat {
  display: inline-block;
  padding: 5px 8px;
  background: var(--nd-accent);
  color: var(--nd-accent-contrast);
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  text-decoration: none;
  border-radius: 0;
}
.nd-post-cat-wrap a:hover,
.nd-post-cat:hover { background: var(--nd-accent-hover); color: var(--nd-accent-contrast); }
.nd-post-cat-wrap span { display: inline-block; }

.nd-post-title {
  margin: 14px 0 10px;
  font-size: 40px;
  font-weight: 700;
  line-height: 52px;
  color: var(--nd-text);
}
.nd-post-title a { color: inherit; text-decoration: none; }

.nd-post-standfirst {
  margin: 0 0 12px;
  font-size: 18px;
  line-height: 1.55;
  color: var(--nd-text);
}

.nd-post-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 14px;
  padding: 8px 0;
  font-size: 14px;
  color: var(--nd-muted);
}
.nd-post-meta time { color: var(--nd-muted); }

.nd-author { display: inline-flex; align-items: center; gap: 8px; text-decoration: none; }
.nd-author__avatar { width: 40px; height: 40px; border-radius: 50%; display: block; }
.nd-author__name { font-size: 14px; font-weight: 700; color: var(--nd-text); }
.nd-author:hover .nd-author__name { color: var(--nd-accent-text); }

.nd-verified { display: inline-flex; width: 16px; height: 16px; }
.nd-verified svg { width: 16px; height: 16px; fill: var(--nd-verified); }
.nd-verified__tick { fill: #fff; }

.nd-post-hero,
.single .post-image img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 10px;
  margin: 6px 0 18px;
}

/* --- Editorial blocks ---------------------------------------------------- */
.nd-keypoints {
  background: var(--nd-bg-alt);
  border-left: 5px solid var(--nd-accent);
  border-radius: 4px;
  padding: 20px;
  margin: 0 0 25px;
}
.nd-keypoints__title {
  margin: 0 0 10px;
  font-size: 17px;
  font-weight: 700;
  color: var(--nd-text);
}
.nd-keypoints ul { margin: 0; padding: 0; list-style: none; }
.nd-keypoints li {
  position: relative;
  padding-left: 25px;
  line-height: 24px;
  margin-bottom: 12px;
  font-size: 16px;
  color: var(--nd-text);
}
.nd-keypoints li:last-child { margin-bottom: 0; }
.nd-keypoints li::before {
  content: "\25A0";          /* solid square, matching the reference marker */
  position: absolute;
  left: 4px; top: 0;
  font-weight: 700;
  color: var(--nd-text);
}

.nd-callout {
  background: var(--nd-bg-alt);
  border-left: 3px solid var(--nd-accent);
  border-radius: 4px;
  padding: 10px 14px;
  margin: 26px 0;
}
.nd-callout p { margin: 0 0 .5em; }
.nd-callout p:last-child { margin-bottom: 0; }

/* Block-editor equivalents */
.wp-block-group.is-style-nd-keypoints {
  background: var(--nd-bg-alt); border-left: 5px solid var(--nd-accent);
  border-radius: 4px; padding: 20px;
}
.wp-block-group.is-style-nd-callout {
  background: var(--nd-bg-alt); border-left: 3px solid var(--nd-accent);
  border-radius: 4px; padding: 10px 14px;
}

/* --- Share row ----------------------------------------------------------- */
.nd-share { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin: 26px 0; }
.nd-share__label { font-size: 14px; font-weight: 700; color: var(--nd-text); margin-right: 4px; }
.nd-share__btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; padding: 0;
  border: 0; border-radius: 50%;
  color: #fff; cursor: pointer;
  transition: transform 0.15s ease, filter 0.15s ease;
}
.nd-share__btn svg { width: 18px; height: 18px; fill: currentColor; }
.nd-share__btn:hover { transform: translateY(-2px); filter: brightness(1.08); color: #fff; }
.nd-share__btn:focus-visible { outline: 2px solid var(--nd-text); outline-offset: 2px; }
.nd-share__btn--whatsapp { background: #25D366; }
.nd-share__btn--telegram { background: #29A9EB; }
.nd-share__btn--x        { background: #111111; }
.nd-share__btn--facebook { background: #1877F2; }
.nd-share__btn--linkedin { background: #0A66C2; }
.nd-share__btn--copy     { background: #6B6B6B; }
.nd-share__btn--copy.is-copied { background: #1E9E5A; }

/* --- Continuous reading -------------------------------------------------- */
.nd-infinite-sentinel { height: 1px; }
.nd-infinite-post .nd-post-title { font-size: 32px; line-height: 1.25; }
.nd-infinite-post .nd-post-body { font-size: 16px; line-height: 1.5; color: var(--nd-text); }
.nd-infinite-post .nd-post-body h2 { font-size: 20px; font-weight: 700; color: var(--nd-heading); margin: 1.8em 0 .6em; }

@media (max-width: 768px) {
  .nd-post-title { font-size: 28px; line-height: 1.25; }
  .nd-infinite-post .nd-post-title { font-size: 24px; }
  .nd-post-standfirst { font-size: 16px; }
}

/* ==========================================================================
   CONTINUOUS READING — divider, status
   Without a hard visual break the appended article reads as a continuation of
   the previous one, which is exactly how it looked before this rule existed.
   ========================================================================== */
.nd-next-divider {
  position: relative;
  margin: 48px 0 26px;
  border-top: 3px solid var(--nd-text);
  text-align: center;
}
.nd-next-divider__label {
  position: relative;
  top: -13px;
  display: inline-block;
  padding: 4px 16px;
  background: var(--nd-accent);
  color: var(--nd-accent-contrast);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.nd-infinite-post { margin-top: 0; padding-top: 0; border-top: 0; }

.nd-infinite-status {
  display: none;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 22px 0;
  font-size: 14px;
  color: var(--nd-muted);
}
.nd-infinite-status[data-state="loading"] { display: flex; }
.nd-infinite-status[data-state="end"] { display: flex; }
.nd-infinite-status[data-state="end"] .nd-infinite-status__spinner { display: none; }
.nd-infinite-status[data-state="end"] .nd-infinite-status__text::after {
  content: " — that's everything for now.";
}
.nd-infinite-status__spinner {
  width: 18px; height: 18px;
  border: 2px solid var(--nd-rule);
  border-top-color: var(--nd-accent);
  border-radius: 50%;
  animation: nd-spin 0.8s linear infinite;
}
@keyframes nd-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .nd-infinite-status__spinner { animation: none; }
}

/* ==========================================================================
   EDITORIAL: pull quote, FAQ, recommendation
   ========================================================================== */
.nd-post-body blockquote,
.entry-content blockquote {
  margin: 28px 0;
  padding: 4px 0 4px 22px;
  border-left: 5px solid var(--nd-accent);
  font-size: 20px;
  line-height: 1.5;
  font-style: normal;
  color: var(--nd-text);
}
.nd-post-body blockquote p,
.entry-content blockquote p { margin: 0 0 .5em; }
.nd-post-body blockquote cite,
.entry-content blockquote cite {
  display: block;
  margin-top: 8px;
  font-size: 14px;
  font-style: normal;
  color: var(--nd-muted);
}

.nd-faq { margin: 32px 0; }
.nd-faq__title { font-size: 22px; font-weight: 700; margin: 0 0 14px; color: var(--nd-text); }
.nd-faq__item {
  background: var(--nd-bg-alt);
  border-radius: 4px;
  margin-bottom: 8px;
  overflow: hidden;
}
.nd-faq__item summary {
  cursor: pointer;
  list-style: none;
  padding: 14px 44px 14px 16px;
  position: relative;
  font-size: 16px;
  font-weight: 700;
  color: var(--nd-text);
}
.nd-faq__item summary::-webkit-details-marker { display: none; }
.nd-faq__item summary::after {
  content: "+";
  position: absolute;
  right: 16px; top: 50%;
  transform: translateY(-50%);
  font-size: 20px; font-weight: 700;
  color: var(--nd-accent-text);
}
.nd-faq__item[open] summary::after { content: "–"; }
.nd-faq__item summary:focus-visible { outline: 2px solid var(--nd-accent-text); outline-offset: -3px; }
.nd-faq__answer { padding: 0 16px 14px; font-size: 15px; line-height: 1.6; color: var(--nd-text-soft); }
.nd-faq__answer p { margin: 0; }

/* ==========================================================================
   SIDEBAR WIDGETS
   ========================================================================== */
/* The sidebar scrolls with the article; only its LAST widget sticks (put an
   ad widget last for the classic sticky ad). A whole sticky sidebar taller
   than the viewport stops sticking partway — the old behaviour.
   The sidebar stretches to the row height (flex default) and its inner box
   fills it, so the last widget has room to travel. No max-height or inner
   overflow on purpose — capping it produced a second scrollbar. */
.sidebar .inside-right-sidebar { height: 100%; }
.sidebar .inside-right-sidebar > :last-child {
  position: sticky;
  top: 20px;
}
.nd-swidget { margin-bottom: 24px; }
.nd-swidget__title {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--nd-text);
  margin: 0 0 15px;
  padding: 0 0 10px;
  border-bottom: 3px solid var(--nd-accent);   /* rule sits UNDER the title */
}
.nd-swidget__list { list-style: none; margin: 0; padding: 0; }
.nd-swidget__item {
  display: flex; gap: 12px; align-items: flex-start;
  padding-bottom: 12px; margin-bottom: 12px;
  border-bottom: 1px solid var(--nd-rule-soft);
}
.nd-swidget__item:last-child { border-bottom: 0; margin-bottom: 0; }
.nd-swidget__thumb {
  /* Same ratio as the 16:9 covers so the artwork shows uncropped. */
  width: 100px; aspect-ratio: 16 / 9; height: auto; flex: 0 0 100px;
  object-fit: cover; border-radius: 4px; display: block;
  transition: transform 0.35s ease;
}
.nd-swidget__item:hover .nd-swidget__thumb { transform: scale(1.06); }
.nd-swidget__text { min-width: 0; }
/* body-prefixed: GP prints widget link colours as inline dynamic CSS, which
   loads after this file and would otherwise keep them dark in the dark skin. */
.widget-area .widget .nd-swidget__text a,
.sidebar .widget .nd-swidget__text a,
.nd-swidget__text a {
  display: block; font-size: 14px; font-weight: 700; line-height: 1.35;
  color: var(--nd-text); text-decoration: none;
}
.widget-area .widget .nd-swidget__text a:hover { color: var(--nd-accent-text); }
html.nd-dark .widget-area .widget .nd-swidget__text a:hover { color: var(--nd-accent); }
.nd-swidget__time { display: block; margin-top: 4px; font-size: 12px; color: var(--nd-muted); }


/* Featured image comes from GeneratePress; match the article hero styling. */
.single .featured-image,
.single .page-header-image-single { margin: 6px 0 18px; }
.single .featured-image img,
.single .page-header-image-single img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 10px;
}

/* --- Related stories ----------------------------------------------------- */
.nd-related { margin: 34px 0 0; }
.nd-related__title {
  font-size: 13px; font-weight: 700; letter-spacing: 0.04em;
  text-transform: uppercase; color: var(--nd-text);
  margin: 0 0 15px; padding: 0 0 10px;
  border-bottom: 3px solid var(--nd-accent);
}
.nd-related__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 15px; }
.nd-related__card {
  display: block; text-decoration: none;
  background: var(--nd-bg-alt); border-radius: var(--nd-radius);
  padding: 10px; overflow: hidden;
}
.nd-related__card img {
  width: 100%; aspect-ratio: 16 / 10; object-fit: cover;
  border-radius: 6px; display: block; margin-bottom: 8px;
  transition: transform 0.35s ease;
}
.nd-related__card:hover img { transform: scale(1.06); }
.nd-related__card h3 {
  margin: 0; font-size: 15px; font-weight: 700; line-height: 1.35; color: var(--nd-text);
}
.nd-related__time { display: block; margin-top: 6px; font-size: 12px; color: var(--nd-muted); }
@media (max-width: 768px) { .nd-related__grid { grid-template-columns: 1fr; } }

/* ==========================================================================
   COMMENTS
   ========================================================================== */
.nd-comments { margin: 30px 0 0; }
button.nd-comments-bar {
  color: var(--nd-text);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  min-height: 50px;
  padding: 10px 14px;
  background: var(--nd-bg-alt);
  border: 0;
  border-radius: 6px;
  cursor: pointer;
  text-align: left;
  font-family: inherit;
}
button.nd-comments-bar:hover { background: var(--nd-bg-alt-hover); }
button.nd-comments-bar:focus-visible { outline: 2px solid var(--nd-accent-text); outline-offset: 2px; }
.nd-comments-bar__info { display: inline-flex; align-items: center; gap: 8px; }
.nd-comments-bar__info svg { width: 20px; height: 20px; fill: var(--nd-muted); flex: 0 0 auto; }
.nd-comments-bar__label { font-size: 14px; font-weight: 600; color: var(--nd-text); }
.nd-comments-bar__action {
  font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em;
  color: var(--nd-accent-contrast);
  background: var(--nd-accent);
  padding: 8px 14px; border-radius: 4px; white-space: nowrap;
}
.nd-comments-bar:hover .nd-comments-bar__action { background: var(--nd-accent-hover); }

.nd-comments__panel { margin-top: 18px; }
.nd-comment-list { list-style: none; margin: 0 0 24px; padding: 0; }
.nd-comment-list .comment-body {
  background: var(--nd-bg-alt);
  border-radius: 6px;
  padding: 14px;
  margin-bottom: 12px;
}
.nd-comment-list .comment-author img { border-radius: 50%; margin-right: 8px; vertical-align: middle; }
.nd-comment-list .fn { font-weight: 700; font-style: normal; color: var(--nd-text); }
.nd-comment-list .comment-metadata { font-size: 12px; color: var(--nd-muted); margin-top: 2px; }
.nd-comment-list .children { list-style: none; margin: 0 0 0 24px; padding: 0; }

.nd-comments__panel .comment-reply-title { font-size: 20px; font-weight: 700; margin: 0 0 12px; }
.nd-comments__panel .comment-form label { display: block; font-size: 13px; font-weight: 700; margin-bottom: 4px; }
.nd-comments__panel .comment-form input[type="text"],
.nd-comments__panel .comment-form input[type="email"],
.nd-comments__panel .comment-form input[type="url"],
.nd-comments__panel .comment-form textarea {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--nd-rule);
  border-radius: 4px;
  background: var(--nd-bg);
  color: var(--nd-text);
  font-family: inherit;
  font-size: 15px;
}
.nd-comments__panel .comment-form textarea { min-height: 120px; resize: vertical; }
.nd-comments__panel .comment-form p { margin-bottom: 12px; }
.nd-comments__panel .form-submit input[type="submit"] {
  background: var(--nd-accent);
  color: var(--nd-accent-contrast);
  border: 0; border-radius: 6px;
  padding: 12px 26px;
  font-size: 15px; font-weight: 700; text-transform: uppercase;
  cursor: pointer;
}
.nd-comments__panel .form-submit input[type="submit"]:hover { background: var(--nd-accent-hover); }

@media (max-width: 600px) {
  .nd-comments-bar { flex-direction: column; align-items: stretch; }
  .nd-comments-bar__action { text-align: center; }
}

/* --- Preferred source prompt --------------------------------------------- */
.nd-preferred {
  display: flex; align-items: center; flex-wrap: wrap; gap: 10px;
  margin: 26px 0;
  padding: 14px 16px;
  background: var(--nd-bg-alt);
  border-radius: 6px;
}
.nd-preferred__text { font-size: 15px; font-weight: 700; color: var(--nd-text); }
.nd-preferred__link {
  font-size: 14px; font-weight: 700; text-decoration: none;
  color: var(--nd-accent-contrast); background: var(--nd-accent);
  padding: 8px 14px; border-radius: 4px;
}
.nd-preferred__link:hover { background: var(--nd-accent-hover); color: var(--nd-accent-contrast); }

/* --- Author box (under the article) -------------------------------------- */
.nd-authorbox {
  margin: 26px 0;
  padding: 16px;
  border: 1px solid var(--nd-rule);
  border-radius: 6px;
}
.nd-authorbox .nd-author__avatar { width: 56px; height: 56px; }
.nd-authorbox .nd-author__name { font-size: 16px; }
.nd-authorbox__bio { margin: 10px 0 0; font-size: 14px; line-height: 22px; color: var(--nd-text-soft); }

/* ==========================================================================
   FOOTER
   Four columns with a wider brand block first, matching the reference grid.
   Everything here is driven by GeneratePress's own footer widget areas, so
   the site owner edits it from Appearance → Widgets, not from theme files.
   ========================================================================== */
.site-footer,
.footer-widgets,
.site-footer .inside-site-info,
.footer-widgets-container {
  background-color: var(--nd-bg-dark);
  color: var(--nd-on-dark);
}
.footer-widgets { padding: 60px 0 10px; font-size: 14px; }

/* GeneratePress lays these out as equal columns; the reference gives the
   brand block roughly a third and splits the rest three ways.
   The width is pinned to the same shell as the bottom bar — GeneratePress
   wraps the two rows in different containers, so without this the columns
   ended 40px short of the copyright line above them. */
.footer-widgets .inside-footer-widgets {
  display: grid;
  grid-template-columns: 340px repeat(3, 1fr);
  gap: 40px;
}
/* GeneratePress pulls this row left with a -40px margin for its own float
   column system (selector weight 0,3,0 — ours must match it to win). CSS grid
   does not need it; leaving it in shifted the columns 40px off the content. */
.site-footer .footer-widgets-container .inside-footer-widgets { margin-left: 0; }

/* Match the widget row's container exactly — same max-width and the same 40px
   inner padding — so both rows share one left and right axis. */
.site-footer .inside-site-info {
  max-width: 1140px;
  margin-inline: auto;
  padding-left: 40px;
  padding-right: 40px;
}
.footer-widgets .inside-footer-widgets > div { width: auto; padding: 0; float: none; }

.footer-widgets .widget-title,
.footer-widgets .widget h2 {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--nd-on-dark);
  margin: 0 0 15px;
  padding: 0 0 10px;
  border-bottom: 3px solid var(--nd-accent);
}
.footer-widgets ul { list-style: none; margin: 0; padding: 0; }
.footer-widgets li { margin-bottom: 10px; }
.footer-widgets a { color: var(--nd-on-dark-soft); text-decoration: none; font-size: 14px; }
.footer-widgets a:hover { color: var(--nd-accent); }

/* Brand block */
.nd-brand__name { margin: 0 0 10px; font-size: 20px; font-weight: 700; color: var(--nd-on-dark); }
.nd-brand__text { margin: 0 0 16px; font-size: 14px; line-height: 1.6; color: var(--nd-on-dark-soft); }
.nd-brand__social { display: flex; gap: 10px; flex-wrap: wrap; }

/* Bottom bar */
.site-footer .inside-site-info {
  padding: 30px 0;
  border-top: 1px solid var(--nd-dark-rule);
  font-size: 13px;
  color: var(--nd-on-dark-soft);
}
.site-footer .copyright-bar { color: var(--nd-on-dark-soft); }
.site-footer .inside-site-info a { color: var(--nd-on-dark-soft); }
.site-footer .inside-site-info a:hover { color: var(--nd-accent); }

@media (max-width: 1024px) {
  .footer-widgets .inside-footer-widgets { grid-template-columns: 1fr 1fr; gap: 30px; }
}
@media (max-width: 768px) {
  .footer-widgets .inside-footer-widgets { grid-template-columns: 1fr; gap: 26px; }
  .footer-widgets { padding: 40px 0 10px; }
}

/* --- Contact + social columns -------------------------------------------- */
.nd-contact__label {
  margin: 0 0 4px;
  font-size: 14px;
  font-weight: 700;
  color: var(--nd-on-dark);
}
.nd-contact__address {
  margin: 0 0 16px;
  font-style: normal;
  font-size: 14px;
  line-height: 1.7;
  color: var(--nd-on-dark-soft);
}
.nd-contact__email {
  font-size: 14px;
  font-weight: 700;
  color: var(--nd-accent);
  text-decoration: none;
  word-break: break-word;
}
.nd-contact__email:hover { color: var(--nd-accent-hover); text-decoration: underline; }

.nd-social-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  max-width: 200px;   /* wraps to two rows, as in the reference */
}
.nd-social-grid a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px; height: 40px;
  border-radius: 50%;
  background: var(--nd-dark-card);
  color: var(--nd-on-dark);
  transition: background 0.2s ease, color 0.2s ease;
}
.nd-social-grid a:hover { background: var(--nd-accent); color: var(--nd-accent-contrast); }
.nd-social-grid svg { width: 18px; height: 18px; fill: currentColor; display: block; }

/* --- Bottom bar: copyright left, secondary line right --------------------- */
.site-footer .inside-site-info {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  padding: 30px 0 0;
  font-size: 14px;
  color: var(--nd-on-dark-soft);
  border-top: 1px solid var(--nd-dark-rule);
}
.site-footer .copyright-bar { margin: 0; }
.nd-footer-legal { margin: 0; }
.nd-footer-legal__list {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: 6px 18px;
}
.nd-footer-legal__list li { margin: 0; }
.nd-footer-legal__list a {
  font-size: 13px; color: var(--nd-on-dark-soft); text-decoration: none;
}
.nd-footer-legal__list a:hover { color: var(--nd-accent); }
.nd-footer-secondary {
  font-size: 14px;
  font-style: italic;
  color: var(--nd-on-dark-soft);
  text-align: right;
}
@media (max-width: 768px) {
  .site-footer .inside-site-info { flex-direction: column; align-items: flex-start; }
  .nd-footer-secondary { text-align: left; }
}

/* ==========================================================================
   SEARCH + 404
   ========================================================================== */
.nd-search-refine { margin: 0 0 20px; }
.nd-search-refine .search-form { display: flex; gap: 8px; }
.nd-search-refine .search-field {
  flex: 1 1 auto;
  padding: 11px 14px;
  border: 1px solid var(--nd-rule);
  border-radius: 4px;
  background: var(--nd-bg);
  color: var(--nd-text);
  font-family: inherit;
  font-size: 15px;
}
.nd-search-refine .search-field:focus-visible {
  outline: 2px solid var(--nd-accent-text);
  outline-offset: -1px;
}
.nd-search-refine .search-submit {
  flex: 0 0 auto;
  padding: 11px 22px;
  border: 0;
  border-radius: 4px;
  background: var(--nd-accent);
  color: var(--nd-accent-contrast);
  font-weight: 700;
  text-transform: uppercase;
  font-size: 14px;
  cursor: pointer;
}
.nd-search-refine .search-submit:hover { background: var(--nd-accent-hover); }

/* 404 — centred single-column composition (sidebar is dropped in PHP). */
.error404 .inside-article { padding-top: 28px; text-align: center; }
.error404 .entry-title,
.error404 .page-header h1 {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin: 0 0 14px;
  font-size: 26px;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--nd-text);
}
.error404 .entry-title::before,
.error404 .page-header h1::before {
  content: "";
  flex: 0 0 auto;
  width: 15px;
  height: 15px;
  background: var(--nd-accent);
}
.error404 .page-content > p { max-width: 60ch; margin: 0 auto 18px; }
.error404 .page-content > .search-form,
.error404 .search-form {
  max-width: 560px;
  margin: 16px auto 0;
  display: flex;
  justify-content: center;
  gap: 8px;
}
.error404 .search-form .search-field { flex: 1 1 auto; }
.nd-404-suggestions { margin-top: 44px; text-align: left; }
.nd-404-suggestions .nd-related__title { text-align: left; }

/* Mobile: iOS Safari zooms into any field under 16px on focus and the page then
   pans sideways. Keep every text field at 16px on phones. */
@media (max-width: 768px) {
  input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]),
  select,
  textarea { font-size: 16px !important; }
}
/* The hero handles horizontal swipes itself; let the browser keep vertical scrolling. */
.nd-hero { touch-action: pan-y; }