/*
Theme Name: IT.JO WP
Theme URI: https://samajordan.com
Description: Dense Arabic news layout for samajordan.com. A child of CoverNews, so the parent theme can be updated without losing any of this. Advertising slots, widgets, theme options and every existing setting are the parent's and are left exactly as they are.
Author: server maintenance
Template: covernews
Version: 1.0
Text Domain: itdotjowp
*/

/* =============================================================================
   Design tokens

   A news front page lives or dies on how many headlines a reader can take in at
   once, so the scale is fixed and small — 44 / 24 / 17 / 14 / 12 — and every
   module picks from it rather than inventing a size.

   The accent is the blue of the disc in the masthead logo, and the ink is the
   deep navy of its wordmark — both sampled from the newsroom's own artwork
   rather than chosen. That is the one place this design differs from its sibling
   at أخبار ع النار, whose masthead is red. Everything else on the page stays
   neutral, so wherever the blue appears it means "this is the thing to look at".
   ========================================================================== */
:root {
  --n-accent: #0670a4;
  --n-accent-deep: #05567f;
  --n-ink: #0d2438;
  --n-ink-2: #3d4d5e;
  --n-meta: #74828f;
  --n-line: #dfe5ea;
  --n-line-soft: #eef1f4;
  --n-paper: #ffffff;
  --n-wash: #f4f6f8;

  --n-44: 2.4rem;
  --n-24: 1.35rem;
  --n-17: 1.0rem;
  --n-14: 0.86rem;
  --n-12: 0.75rem;

  --n-gap: 1.35rem;
  --n-wrap: 1240px;
}

/* =============================================================================
   Base
   ========================================================================== */
body.n-news {
  background: var(--n-wash);
  color: var(--n-ink);
  font-family: "Tajawal", "Segoe UI", system-ui, sans-serif;
  font-size: var(--n-17);
  line-height: 1.75;
}

.n-news img { max-width: 100%; display: block; }
.n-news a { color: inherit; text-decoration: none; }
.n-news a:hover { color: var(--n-accent); }

.n-wrap { max-width: var(--n-wrap); margin-inline: auto; padding-inline: 16px; }

/* Headlines take the display face; body text and card meta stay on Tajawal,
   which holds its shape far better at 12–14px than a display face does. */
.n-news h1, .n-news h2, .n-news h3, .n-news h4,
.n-lead-title, .n-card-title, .n-strip-head h2 {
  font-family: "Noto Kufi Arabic", "Tajawal", sans-serif;
  font-weight: 700;
  line-height: 1.5;
  margin: 0;
  text-wrap: balance;
}

/* =============================================================================
   Utility bar — date, weather, currency. Small, dark, never competing.
   ========================================================================== */
.n-util {
  background: #0d2438;
  color: #9aa1ad;
  font-size: var(--n-12);
}
.n-util .n-wrap { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; padding-block: 7px; }
.n-util .n-live { color: #fff; font-weight: 700; display: inline-flex; align-items: center; gap: 6px; }
.n-util .n-live::before {
  content: ""; width: 7px; height: 7px; border-radius: 50%;
  background: var(--n-accent); animation: n-pulse 2s ease-in-out infinite;
}
@keyframes n-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
@media (prefers-reduced-motion: reduce) { .n-util .n-live::before { animation: none; } }
.n-util .n-util-end { margin-inline-start: auto; display: flex; gap: 14px; }

/* Amman's weather. It sits where a utility bar's small print belongs — present when you look for
   it, never competing with a headline. */
.n-weather { display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; }
.n-weather-icon { font-size: 13px; line-height: 1; }
.n-weather-temp { color: #fff; font-weight: 700; font-variant-numeric: tabular-nums; }

/* The condition is the first thing to go when the bar runs out of room: the temperature and the
   city are the reading, the word for it is the elaboration. */
@media (max-width: 600px) {
  .n-weather-text { display: none; }
}

/* =============================================================================
   Masthead — logo, then the leaderboard slot. Every banner this newsroom sells
   is a widget in home-content-widgets and stays there; this design reads that
   area rather than copying it, so the slot below the masthead is a place, not a
   second inventory to keep in step.
   ========================================================================== */
.n-masthead { background: var(--n-paper); border-bottom: 1px solid var(--n-line); }
.n-masthead .n-wrap { display: flex; align-items: center; gap: 26px; padding-block: 14px; }
.n-brand { display: flex; align-items: center; gap: 12px; flex: 0 0 auto; }
.n-brand img { height: 52px; width: auto; object-fit: contain; }
.n-brand:hover { color: inherit; }

/* -----------------------------------------------------------------------------
   The masthead logo.

   This newsroom's own artwork, used as the file it is. Its sibling at أخبار ع
   النار had to have its logo redrawn in CSS because the original was lost with
   that site's uploads; here the file is present, and a wordmark set in Arabic
   type is not something to reconstruct when the real one exists.

   The height is fixed and the width left to follow (see .n-brand img above): the
   lockup is much wider than it is tall, and pinning the height is what keeps the
   masthead's own height stable regardless of which file is set as the logo.

   .n-brand-text is the fallback when no logo is set or the file has gone
   missing — the site's name in the display face, rather than a broken image.
   -------------------------------------------------------------------------- */
.n-brand-text {
  font-family: "Noto Kufi Arabic", sans-serif;
  font-weight: 800;
  font-size: var(--n-24);
  color: var(--n-ink);
}

.n-ad-leader { flex: 1; min-width: 0; display: flex; justify-content: center; }
.n-ad-leader:empty { display: none; }

/* The hosting credit. Quiet by construction — it is an acknowledgement, not a second masthead.

   Pinned to the far edge with an auto margin rather than relying on the advertising slot beside it
   to push it there: that slot collapses to nothing whenever no banner is set, and the credit then
   slid back up against the masthead. An auto margin holds the edge either way. */
.n-supported {
  flex: 0 0 auto;
  margin-inline-start: auto;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: var(--n-12);
  color: var(--n-meta);
  padding: 6px 10px;
  border: 1px solid var(--n-line);
  border-radius: 999px;
  white-space: nowrap;
}
.n-supported img { height: 22px; width: auto; }
.n-supported:hover { border-color: var(--n-line); color: var(--n-ink-2); background: var(--n-wash); }

/* =============================================================================
   Section navigation — the blue bar. On a news portal this is the primary
   wayfinding, so it is the one full-bleed block of brand colour on the page.
   ========================================================================== */
.n-nav { background: var(--n-accent); position: sticky; top: 0; z-index: 50; }
.n-nav .n-wrap { display: flex; overflow-x: auto; scrollbar-width: none; }
.n-nav .n-wrap::-webkit-scrollbar { display: none; }
.n-nav a {
  color: #fff; font-family: "Noto Kufi Arabic", sans-serif; font-weight: 600;
  font-size: var(--n-14); padding: 12px 15px; white-space: nowrap;
  border-inline-end: 1px solid rgba(255, 255, 255, .14);
}
.n-nav a:hover, .n-nav a.n-on { background: var(--n-accent-deep); color: #fff; }

/* =============================================================================
   Breaking ticker
   ========================================================================== */
.n-ticker {
  background: var(--n-paper); border-bottom: 1px solid var(--n-line);
  font-size: var(--n-14);
}
.n-ticker .n-wrap { display: flex; align-items: center; gap: 14px; padding-block: 9px; }
.n-ticker .n-tag {
  flex: 0 0 auto;
  background: var(--n-accent); color: #fff; font-weight: 700; font-size: var(--n-12);
  padding: 4px 11px; border-radius: 3px; white-space: nowrap;
  font-family: "Noto Kufi Arabic", sans-serif;
}

/* The window the strip travels through. Before this it was a plain overflow:hidden list, which
   meant the first headline filled the bar and the other nine were simply cut off and never seen. */
.n-ticker-viewport {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  /* A short fade at either end, so a headline arrives and departs instead of being sliced by a
     hard edge. */
  -webkit-mask-image: linear-gradient(to left, transparent 0, #000 26px, #000 calc(100% - 26px), transparent 100%);
          mask-image: linear-gradient(to left, transparent 0, #000 26px, #000 calc(100% - 26px), transparent 100%);
}

/* The track carries two identical copies of the list and is moved by exactly one copy's width, so
   the restart lands copy two where copy one started and the loop has no visible seam.

   It travels to the RIGHT, which is the opposite of an English ticker and the correct direction
   here. In a right-to-left line the first word of a headline is its rightmost; moving the track
   rightward brings that word into view first at the left edge, with the rest following behind it.
   Moving it leftward — the English convention — would show every headline's last word first. */
.n-ticker-track {
  display: flex;
  width: max-content;
  animation: n-ticker-run var(--n-ticker-seconds, 40s) linear infinite;
}
@keyframes n-ticker-run {
  from { transform: translateX(0); }
  to   { transform: translateX(50%); }
}

/* A moving headline is a link the reader has to catch. Hovering or tabbing to one stops the strip
   so it can actually be clicked. */
.n-ticker:hover .n-ticker-track,
.n-ticker:focus-within .n-ticker-track { animation-play-state: paused; }

.n-ticker-list { display: flex; align-items: center; margin: 0; padding: 0; list-style: none; }
.n-ticker li { white-space: nowrap; color: var(--n-ink-2); }
.n-ticker li a:hover { color: var(--n-accent); }

/* A pip between headlines, in the masthead red. Carried by every item rather than by "li + li",
   because the join between the two copies is invisible to a sibling selector and the separator
   would drop out exactly once per loop. */
.n-ticker li::before {
  content: "";
  display: inline-block;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--n-accent);
  margin-inline: 20px 14px;
  vertical-align: middle;
}

@media (prefers-reduced-motion: reduce) {
  /* No movement at all: the strip becomes a list the reader can swipe through themselves. */
  .n-ticker-track { animation: none; width: auto; overflow-x: auto; scrollbar-width: none; }
  .n-ticker-track::-webkit-scrollbar { display: none; }
  .n-ticker-list + .n-ticker-list { display: none; }
}

/* =============================================================================
   Advertising band — the banners sold by the newsroom.

   Two across on a wide screen rather than seven stacked: the same inventory, in
   the same order, without pushing every headline below the fold. Each banner
   keeps its own proportions — an advertiser's artwork is not ours to crop.
   ========================================================================== */
.n-sponsors { padding-block: var(--n-gap) 0; }
.n-sponsor-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  align-items: center;
}
.n-sponsor {
  display: block;
  background: var(--n-paper);
  border: 1px solid var(--n-line);
  border-radius: 3px;
  overflow: hidden;
}
/* max-width, not width. This newsroom's inventory runs from a 980x70 strip to a 300x75 button, and
   stretching every one to fill its cell would blow the small legacy banners up to twice their
   pixel width — an advertiser's artwork arriving visibly blurred. Each sits at its natural size,
   centred, and only shrinks when the cell is narrower than the file. */
.n-sponsor img { max-width: 100%; height: auto; margin-inline: auto; }

/* An odd banner at the end takes the full width rather than leaving a hole beside it. */
.n-sponsor-grid > .n-sponsor:last-child:nth-child(odd) { grid-column: 1 / -1; }

@media (max-width: 760px) {
  .n-sponsor-grid { grid-template-columns: minmax(0, 1fr); }
}

/* =============================================================================
   Page shell
   ========================================================================== */
.n-main { padding-block: var(--n-gap) 2.4rem; }
.n-cols { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 2rem; align-items: start; }

/* =============================================================================
   Lead block — one large story, three stacked beside it. The single biggest
   decision on the page: it says what today is about.
   ========================================================================== */
.n-lead { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: var(--n-gap); }
.n-lead-title { font-size: var(--n-44); line-height: 1.32; margin-block: 12px 8px; }

/* A small heading over each block at the top of the page. Two columns of headlines side by side
   with nothing naming them is just "more news"; named, the reader knows what each one is and can
   follow it to the section behind it. */
.n-block-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--n-line);
}
.n-block-head h2 { font-family: "Noto Kufi Arabic", sans-serif; font-size: var(--n-17); margin: 0; }
.n-block-head .n-more { margin-inline-start: auto; font-size: var(--n-12); color: var(--n-meta); }

/* Breaking carries the brand colour: it is the one label on this page that means "now". */
.n-urgent {
  display: inline-block;
  background: var(--n-accent);
  color: #fff;
  padding: 3px 13px;
  border-radius: 3px;
  font-size: var(--n-14);
}

/* The hero rotates. Slides are stacked in the same grid cell rather than laid out in a row, so the
   block's height is the tallest slide's and the page never jumps as the story changes — a layout
   that shifts under the reader every six seconds is worse than one that does not move at all. */
.n-hero { position: relative; display: grid; }
.n-hero:focus-visible { outline: 2px solid var(--n-accent); outline-offset: 3px; }

/* Every slide stays in the grid cell, all five on top of one another, and the inactive ones are
   hidden with visibility rather than removed from the layout.

   That is what keeps the block a fixed height. Headlines differ in length — two lines here, four
   there — so if only the current slide occupied the cell, the hero would grow and shrink every six
   seconds and drag the whole page up and down with it. Stacked, the cell is as tall as the longest
   headline and never moves.

   visibility:hidden also takes the hidden slides out of the tab order and out of the accessibility
   tree, which opacity alone would not do. */
.n-hero-slide {
  grid-area: 1 / 1;
  visibility: hidden;
  opacity: 0;
  transition: opacity .4s ease;
}
.n-hero-slide.n-on { visibility: visible; opacity: 1; }
@media (prefers-reduced-motion: reduce) { .n-hero-slide { transition: none; } }

/* The controls sit ON the photograph, not under it.

   Anchored to the top of the hero with the picture's own 16:9 ratio, so the strip covers exactly
   the image and nothing else — no hard-coded height to drift out of step when the image size
   changes. The container ignores pointer events and the controls take them back, so the whole
   photograph stays a link to the story except where a button actually is. */
/* Hidden when the hero has no photograph to sit on.
   The control strip is a 16:9 box pinned to the top of the hero, on the assumption that a 16:9
   picture is the first thing in every slide. A promoted story without a featured image starts with
   its category and headline instead — and the strip's dark gradient and two arrow buttons then
   landed straight on top of the lead headline and made it unreadable. */
.n-hero:not(:has(.n-thumb)) .n-hero-controls {
  position: absolute;
  top: 0;
  inset-inline: 0;
  width: 100%;
  aspect-ratio: 16 / 9;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-inline: 10px;
  pointer-events: none;
}
.n-hero-controls > * { pointer-events: auto; }

/* A soft shade along the bottom of the picture. Without it the dots vanish on a bright photograph
   and sit on nothing on a dark one. */
.n-hero-controls::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  height: 34%;
  background: linear-gradient(to top, rgba(0, 0, 0, .45), transparent);
  pointer-events: none;
}

.n-hero-arrow {
  position: relative;
  z-index: 1;
  width: 38px;
  height: 38px;
  flex: 0 0 auto;
  border: 0;
  border-radius: 50%;
  background: rgba(17, 19, 22, .55);
  color: #fff;
  cursor: pointer;
  display: grid;
  place-items: center;
  backdrop-filter: blur(3px);
  transition: background .2s ease;
}
.n-hero-arrow:hover { background: var(--n-accent); }

.n-hero-dots {
  position: absolute;
  z-index: 1;
  bottom: 12px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 6px;
}
/* The dot is a 4px bar, but the target is not.

   A four-pixel-high control cannot be hit with a fingertip, which is most of why the slider felt
   dead on a phone. The button keeps a comfortable touch height and draws the visible bar as a
   pseudo-element inside it, so what you aim at is far larger than what you see. */
.n-hero-dots button {
  width: 26px;
  height: 26px;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  display: grid;
  place-items: center;
}
.n-hero-dots button::before {
  content: "";
  display: block;
  width: 26px;
  height: 4px;
  border-radius: 2px;
  background: rgba(255, 255, 255, .55);
  transition: background .2s ease;
}
.n-hero-dots button.n-on::before { background: var(--n-accent); }
.n-hero-dots button:focus-visible,
.n-hero-arrow:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
  .n-hero-dots button, .n-hero-arrow { transition: none; }
}

/* On a phone the arrows shrink; they do not disappear.

   Hiding them left five four-pixel bars as the only sign that the hero was a slider at all, and a
   reader reported — correctly — that the phone "has no slider". A smaller control is a compromise;
   no control is a missing feature. */
@media (max-width: 560px) {
  .n-hero-arrow { width: 32px; height: 32px; }
  .n-hero-controls { padding-inline: 6px; }
}

/* Reduced motion drops the cross-fade. The slider still advances — see the note in hero.js. */
@media (prefers-reduced-motion: reduce) {
  .n-hero-slide { transition: none; }
}
.n-lead-excerpt { color: var(--n-ink-2); font-size: var(--n-17); margin: 0; }

.n-lead-side { display: grid; gap: 14px; align-content: start; }
.n-lead-side article { display: grid; grid-template-columns: 116px minmax(0, 1fr); gap: 12px; align-items: start; }
.n-lead-side .n-card-title { font-size: var(--n-14); }

/* A card whose story has no picture must not sit in the picture's column.
   n_card() prints the thumbnail only when the post has one, but the text block is always printed —
   so with no thumbnail the text became grid item 1 and was squeezed into the fixed 116px track,
   leaving a wide empty column beside it. On a 46,000-post archive a story without a featured image
   is a certainty, not an edge case. Anything that is the only child takes the whole row. */
.n-lead-side article > :only-child,
.n-strip-row .n-card > :only-child,
.n-archive-grid .n-card > :only-child { grid-column: 1 / -1; }
.n-lead-side .n-card-title { font-size: var(--n-14); }

/* =============================================================================
   Cards — the page's unit. 71 of them on a busy front page, so they are as
   light as they can be: image, category, headline, time.
   ========================================================================== */
/* display:block is load-bearing, not tidiness. The thumbnail is an <a>, which is inline by
   default, and aspect-ratio has no effect on an inline box — so every image kept its own natural
   proportions and the rows came out ragged, while the inline box wrapping a block <img> left the
   lead block with no reliable height and the section below it painted over the headline. */
.n-thumb {
  display: block;
  overflow: hidden;
  background: var(--n-line-soft);
  border-radius: 3px;
}
.n-thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform .35s ease; }
.n-card:hover .n-thumb img, .n-lead-main:hover .n-thumb img { transform: scale(1.04); }
@media (prefers-reduced-motion: reduce) { .n-thumb img { transition: none; } }

.n-badge {
  display: inline-block; font-family: "Noto Kufi Arabic", sans-serif;
  font-size: var(--n-12); font-weight: 700; color: var(--n-accent);
}
.n-time { font-size: var(--n-12); color: var(--n-meta); font-variant-numeric: tabular-nums; }
.n-card-title { font-size: var(--n-17); margin-block: 6px 5px; }
.n-card-meta { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }

/* =============================================================================
   Section strips — a titled row of four. Repeated per category, which is what
   makes the front page a map of the newsroom rather than one long feed.
   ========================================================================== */
.n-strip { margin-top: 2rem; }
.n-strip-head {
  display: flex; align-items: center; gap: 12px;
  border-block-start: 3px solid var(--n-ink); padding-top: 11px; margin-bottom: 14px;
}
.n-strip-head h2 { font-size: var(--n-24); }
.n-strip-head h2::before {
  content: ""; display: inline-block; width: 9px; height: 9px; background: var(--n-accent);
  margin-inline-end: 9px; vertical-align: 2px;
}
.n-strip-head .n-more { margin-inline-start: auto; font-size: var(--n-14); color: var(--n-meta); }
.n-strip-row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--n-gap); align-items: start; }
.n-strip-row .n-card-title { font-size: var(--n-14); }

/* One shape for every small thumbnail on the page — the side stack and all five strips. A row of
   cards whose images each keep their own proportions reads as a mistake before it reads as
   anything else, and it is what makes a news grid look assembled rather than designed. The lead
   is the single deliberate exception, at 16:9. */
.n-card .n-thumb { aspect-ratio: 3 / 2; }
.n-lead-main .n-thumb { aspect-ratio: 16 / 9; }

/* =============================================================================
   Side rail — latest news as a timed list, plus the sidebar ad slot.
   ========================================================================== */
.n-rail { display: grid; gap: 1.6rem; align-content: start; position: sticky; top: 56px; }
.n-panel { background: var(--n-paper); border: 1px solid var(--n-line); border-radius: 4px; }
.n-panel > h2 {
  font-size: var(--n-17); padding: 12px 15px; margin: 0;
  border-bottom: 2px solid var(--n-accent); background: var(--n-paper);
}
.n-panel ul { margin: 0; padding: 0; list-style: none; }
.n-panel li { border-bottom: 1px solid var(--n-line-soft); }
.n-panel li:last-child { border-bottom: 0; }
.n-panel li a { display: block; padding: 11px 15px; font-size: var(--n-14); line-height: 1.65; }
.n-panel li .n-time { display: block; margin-top: 4px; }

.n-ad-rail { display: flex; justify-content: center; }
.n-ad-rail:empty { display: none; }

/* =============================================================================
   Section listings — the same card, in a four-up grid. Uniform by construction:
   every thumbnail here is the one .n-card .n-thumb ratio used everywhere else.
   ========================================================================== */
.n-archive-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--n-gap) 1.1rem;
  align-items: start;
}

.n-pager { margin-top: 2rem; }
.n-pager .nav-links { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; }
.n-pager .page-numbers {
  display: inline-block; min-width: 38px; text-align: center;
  padding: 7px 11px; border: 1px solid var(--n-line); border-radius: 3px;
  background: var(--n-paper); font-size: var(--n-14); font-variant-numeric: tabular-nums;
}
.n-pager .page-numbers.current,
.n-pager .page-numbers:hover { background: var(--n-accent); border-color: var(--n-accent); color: #fff; }

/* =============================================================================
   The article. The one page that is deliberately not dense: a comfortable
   measure and large type, because this is where reading actually happens.
   ========================================================================== */
.n-article { background: var(--n-paper); border: 1px solid var(--n-line); border-radius: 4px; padding: 1.8rem; }
/* One measure for the whole article, not just the running text.

   Long lines tire the eye, so the article is capped at a comfortable length. Capping only the body,
   though, left the text hugging one edge of a much wider card with a bare gap down the other —
   which reads as a layout mistake rather than as a typographic decision. Every element in the
   article shares one column and sits centred in the card, so the space is even on both sides and
   looks deliberate, because it is.

   The measure is in rem, NOT ch. `ch` resolves against each element's own font size, so the same
   "72ch" became about 1200px on the 33px headline — no constraint at all — and about 576px on the
   16px line carrying the section and the date. The result was a byline visibly indented from the
   headline directly above it. One absolute measure gives every element the same two edges. */
:root { --n-measure: 44rem; }

.n-article > *,
.n-article-body > * {
  max-width: var(--n-measure);
  margin-inline: auto;
}

.n-article-title { font-size: clamp(1.5rem, 3.4vw, 2.1rem); line-height: 1.45; margin-block: 10px 16px; }

/* The lead photograph shares the article's measure rather than running the full width of the card.
   Sitting wider than the headline above it, it made the headline look indented instead of making
   the picture look generous — one column, one set of edges, top to bottom. */
.n-article-figure { margin: 0 0 1.4rem; }
.n-article-figure img { width: 100%; height: auto; border-radius: 3px; }
.n-article-figure figcaption {
  font-size: var(--n-12); color: var(--n-meta); padding-top: 7px;
}

/* The related strip is a four-up grid and needs the whole card. */
.n-article > .n-strip { max-width: none; }

.n-article-body { font-size: 1.08rem; line-height: 2.05; color: var(--n-ink-2); }
.n-article-body p { margin: 0 0 1.15rem; }
.n-article-body h2, .n-article-body h3 { color: var(--n-ink); margin: 1.8rem 0 .7rem; }
.n-article-body img { height: auto; border-radius: 3px; margin-block: 1rem; }
.n-article-body a { color: var(--n-accent); text-decoration: underline; text-underline-offset: 3px; }
.n-article-body blockquote {
  margin: 1.4rem 0; padding: .2rem 1.1rem;
  border-inline-start: 3px solid var(--n-accent); color: var(--n-ink); font-size: 1.1rem;
}
/* The parent theme's in-article advert, wherever its position setting puts it. */
.n-article-body .single-post-ad { display: block; margin: 1.6rem 0; }

.n-tags { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 1.6rem; }
.n-tags a {
  font-size: var(--n-12); padding: 5px 11px; border-radius: 999px;
  background: var(--n-wash); border: 1px solid var(--n-line); color: var(--n-ink-2);
}
.n-tags a:hover { background: var(--n-accent); border-color: var(--n-accent); color: #fff; }

/* =============================================================================
   Footer
   ========================================================================== */
.n-foot { background: #0d2438; color: #9aa1ad; margin-top: 2.6rem; padding-block: 2.4rem 1.2rem; }
.n-foot a { color: #cfd4dc; }
.n-foot a:hover { color: #fff; }

/* Proportional columns, not equal ones. The brand block needs room for a logo and a line of text;
   the two link columns do not, and giving all three the same width left the first one nearly empty
   with the links stranded in the middle of a very wide page. */
.n-foot-cols {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1.2fr) minmax(0, 1fr);
  gap: 2.2rem;
  align-items: start;
}

.n-foot h3 {
  color: #fff; font-size: var(--n-14); margin: 0 0 .9rem;
  font-family: "Noto Kufi Arabic", sans-serif;
}
.n-foot ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; font-size: var(--n-14); }

/* Eight sections in one tall column left a lot of dead space beside it. */
.n-foot-sections { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 1.2rem; }

/* The logo is a navy wordmark beside a blue disc, and the footer is that same navy — printed
   straight onto it, the words would disappear and only the disc would survive. Rather than
   bleaching the artwork white and losing the disc's colour with it, the lockup is given the white
   ground it was drawn for, inset just enough to read as a plate rather than a patch. */
.n-foot-logo {
  display: inline-block;
  background: #fff;
  padding: 9px 14px;
  border-radius: 4px;
}
.n-foot-logo img { height: 40px; width: auto; }

.n-foot-brand p { margin: 1rem 0 0; font-size: var(--n-14); max-width: 34ch; line-height: 1.85; }



.n-foot-social { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 1.1rem; }
.n-foot-social a {
  font-size: var(--n-12); padding: 6px 14px; border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, .16);
}
.n-foot-social a:hover { background: var(--n-accent); border-color: var(--n-accent); color: #fff; }

.n-foot-base {
  border-top: 1px solid rgba(255, 255, 255, .1); margin-top: 2rem; padding-top: 1.1rem;
  font-size: var(--n-12); display: flex; justify-content: space-between;
  gap: 12px; flex-wrap: wrap; align-items: center;
}
.n-foot-credit { display: inline-flex; align-items: center; gap: 7px; opacity: .85; }
.n-foot-credit:hover { opacity: 1; }
.n-foot-credit img { height: 18px; width: auto; }

@media (max-width: 820px) {
  .n-foot-cols { grid-template-columns: minmax(0, 1fr); gap: 1.8rem; }
}

/* =============================================================================
   Responsive. The grid degrades by removing columns, never by shrinking type:
   a headline that has become unreadable has stopped doing its job.
   ========================================================================== */
@media (max-width: 1080px) {
  .n-cols { grid-template-columns: minmax(0, 1fr); }
  .n-rail { position: static; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
  .n-strip-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .n-archive-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 860px) {
  .n-archive-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .n-article { padding: 1.2rem; }
}
@media (max-width: 760px) {
  :root { --n-44: 1.6rem; --n-24: 1.15rem; }
  .n-lead { grid-template-columns: minmax(0, 1fr); }
  .n-masthead .n-wrap { flex-wrap: wrap; gap: 12px; }
  .n-ad-leader { order: 3; flex-basis: 100%; justify-content: flex-start; }
}
@media (max-width: 520px) {
  /* At phone width a four-up row becomes a list, so each card turns into a thumbnail beside its
     headline — the same shape as the side stack, which keeps every small image on the site
     identical rather than introducing a third proportion just for small screens. */
  .n-strip-row,
  .n-archive-grid { grid-template-columns: minmax(0, 1fr); }
  .n-strip-row .n-card,
  .n-archive-grid .n-card { display: grid; grid-template-columns: 116px minmax(0, 1fr); gap: 12px; align-items: start; }
}