/*
 * News and Noise — Elementor Bridge
 * Scoped styles for the supplied Home, About and Contact templates.
 *
 * Two scopes only: .nan-home for the homepage, .nan-el-page for the editorial
 * pages. Nothing here can reach articles, archives, the header or the footer.
 * Every value resolves to a theme custom property, so the Customiser, dark
 * mode and RTL keep working without a second set of overrides.
 */

/* Spacing is Elementor's job on this page, so the theme's own section margin
   is neutralised. Change the rhythm with container gaps and padding. */
.nan-home .nan-section,
.nan-home .nan-newsletter,
.nan-home .nan-ad {
  margin-block: 0;
}

/* Flex and grid children need an explicit zero minimum or long headlines and
   wide tables push the page sideways. */
.nan-home .e-con,
.nan-home .e-con-inner,
.nan-home .elementor-widget,
.nan-home .elementor-widget-container {
  min-width: 0;
}

/* Belt and braces. The template's column widths already total 96% or less on
   every line, so this never changes a layout; it only guarantees that a
   container can give ground instead of forcing a horizontal scrollbar. */
.nan-home .e-con > .e-con {
  flex-shrink: 1;
}

/* Standfirst and kicker styling is deliberately absent: the theme already
   provides .nan-section-subtitle and .nan-eyebrow, and the Story section
   widget's "Standfirst" field renders through the former. */

/* -------------------------------------------------------------------------
 * The side rail: a denser list than the theme's default compact layout, so a
 * narrow column reads as a column of headlines rather than stacked cards.
 * ---------------------------------------------------------------------- */
.nan-home-rail .nan-stories-compact {
  gap: 0;
}

.nan-home-rail .nan-card {
  padding-block: 0.85rem;
}

.nan-home-rail .nan-card:first-child {
  padding-top: 0;
}

.nan-home-rail .nan-card:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}

.nan-home-rail .nan-card-title {
  font-size: 1.05rem;
  margin-block: 0 0.4rem;
}

/* -------------------------------------------------------------------------
 * Opinion: a rule in the accent colour instead of the card's bottom border,
 * so the section reads as commentary at a glance.
 * ---------------------------------------------------------------------- */
.nan-home-opinion .nan-card {
  border-bottom: 0;
  padding-bottom: 0;
  border-inline-start: 3px solid var(--nan-accent);
  padding-inline-start: 1.1rem;
}

.nan-home-opinion .nan-card-excerpt {
  font-family: var(--nan-headline-font);
  font-style: italic;
  font-size: 1rem;
}

/* -------------------------------------------------------------------------
 * The long read: give the single feature card room and let its image lead.
 * ---------------------------------------------------------------------- */
.nan-home-longread .nan-card {
  border-bottom: 0;
  padding-bottom: 0;
}

.nan-home-longread .nan-stories-feature .nan-card-title {
  font-size: clamp(1.7rem, 3vw, 2.6rem);
  letter-spacing: -0.02em;
}

.nan-home-longread .nan-card-excerpt {
  font-size: 1.05rem;
  max-width: 58ch;
}

/* -------------------------------------------------------------------------
 * Desk columns: a quieter divider between the six category blocks.
 * ---------------------------------------------------------------------- */
.nan-home-desk .nan-section-heading {
  border-top-width: 2px;
  margin-bottom: 1rem;
}

.nan-home-desk .nan-section-heading h2 {
  font-size: clamp(1.2rem, 1.8vw, 1.5rem);
}

.nan-home-desk .nan-card:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}

/* -------------------------------------------------------------------------
 * Optional sections take themselves off the page when the newsroom has
 * nothing to show. The editor keeps its placeholders so they remain findable.
 * :has() is already required by the theme's own stylesheet.
 * ---------------------------------------------------------------------- */
body:not(.elementor-editor-active)
  .nan-home-optional:not(:has(.nan-section, .nan-newsletter, .nan-ad)) {
  display: none;
}

/* -------------------------------------------------------------------------
 * Editorial pages (About, Contact). Scope class: .nan-el-page
 * ---------------------------------------------------------------------- */

/* Hold prose to the theme's own reading measure, whichever page template the
   editor picks. Beats .e-con's max-width without !important. */
.nan-el-page .nan-page-measure {
  max-width: var(--nan-reading-width, 740px);
}

.nan-el-page .e-con,
.nan-el-page .e-con-inner,
.nan-el-page .elementor-widget,
.nan-el-page .elementor-widget-container {
  min-width: 0;
}

.nan-el-page .e-con > .e-con {
  flex-shrink: 1;
}

.nan-el-page .nan-section {
  margin-block: 0;
}

/* Elementor's base CSS flattens heading line-height to 1. Restore the value
   the theme sets on h1-h6 so multi-line headings do not collide. */
.nan-el-page .elementor-heading-title {
  line-height: 1.13;
}

/* Elementor's Button widget ships its own grey palette. Map it onto the
   theme's button tokens so it matches .nan-button in light mode, dark mode
   and after any Customiser change. 44px keeps the touch target comfortable. */
.nan-el-page .elementor-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0.6rem 1.1rem;
  background-color: var(--nan-primary);
  color: var(--nan-background);
  border-radius: var(--nan-radius, 0);
  font-family: var(--nan-navigation-font);
  font-size: 0.85rem;
  font-weight: 700;
  text-decoration: none;
}

.nan-el-page .elementor-button:hover,
.nan-el-page .elementor-button:focus-visible {
  background-color: var(--nan-accent);
  color: var(--nan-background);
}

/* Lists inside prose blocks, matching the article measure and rhythm. */
.nan-el-page .elementor-widget-text-editor ul {
  padding-inline-start: 1.2rem;
}

.nan-el-page .elementor-widget-text-editor li {
  margin-block: 0.4rem;
}

/* A bordered panel that borrows the theme's card language rather than
   inventing a new one. */
.nan-el-page .nan-el-panel {
  border-top: 3px solid var(--nan-primary);
  padding-top: 1rem;
}

.nan-el-page .nan-el-panel .elementor-heading-title {
  font-size: clamp(1.15rem, 1.7vw, 1.4rem);
}

/* A standfirst under the page title, matching the article standfirst. */
.nan-el-page .nan-el-lede {
  font-size: clamp(1.1rem, 2vw, 1.35rem);
  color: var(--nan-muted);
  line-height: 1.5;
}

.nan-el-page .nan-el-lede p:last-child {
  margin-bottom: 0;
}

/* The editor-only placeholder shown in place of an empty section. */
.nan-eb-notice {
  border: 1px dashed var(--nan-border);
  color: var(--nan-muted);
  padding: 1rem;
  margin: 0;
  font-size: 0.85rem;
}

/* -------------------------------------------------------------------------
 * Responsive corrections. The theme's own breakpoints are 640px and 1024px;
 * these match them rather than introducing a third set.
 * ---------------------------------------------------------------------- */
@media (max-width: 1024px) {
  .nan-home-rail .nan-card-title {
    font-size: 1.15rem;
  }
}

@media (max-width: 640px) {
  .nan-home-opinion .nan-card {
    padding-inline-start: 0.9rem;
  }

  .nan-home-longread .nan-card-excerpt {
    font-size: 1rem;
  }
}