/* =============================================================================
   National Interests & Friends — WordPress + Elementor glue.

   brand.css is the design system (copied verbatim from the static site and the
   source of truth for colours, typography, buttons and component looks). This
   file adapts that system to WordPress markup:

     A. Accessibility helpers
     B. Primary nav — WP <ul><li><a> adaptation of the static <nav><a>
     C. Elementor homepage layer — scoped under .nif-front-main so the section
        layout beats Elementor's container defaults without touching brand.css
     D. Native Elementor Gallery + Video tweaks
     E. Fluent Forms contact-form skin
     F. Interior pages & blog (page hero, cards, single, sidebar, pagination…)
     G. Non-home header (solid, static — no overlap on blog/interior pages)

   Homepage note: build the brand-section containers as *Full Width* and leave
   their layout controls at default — the rules in section C style them. Keep
   the original class names (hero, section, aims-grid, aim-card, …) in each
   element's Elementor "CSS Classes" field. See SETUP-GUIDE.md.
   ========================================================================== */

/* ---------- A. Accessibility helpers ---------- */
.screen-reader-text {
  border: 0;
  clip: rect(1px, 1px, 1px, 1px);
  clip-path: inset(50%);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
  word-wrap: normal !important;
}

.skip-link {
  background: var(--gold-500);
  color: var(--green-950);
  font-weight: 800;
  left: 8px;
  padding: 12px 18px;
  position: fixed;
  top: -80px;
  transition: top 180ms ease;
  z-index: 999;
}

.skip-link:focus {
  top: 8px;
}

/* ---------- B. Primary nav: <ul><li><a> adaptation ---------- */
/* wp_nav_menu outputs a <ul class="desktop-nav"> of <li><a>; the static site
   used <nav class="desktop-nav"> of bare <a>. Restore the flex row + pill. */
ul.desktop-nav {
  list-style: none;
  margin: 0;
  padding: 0;
}

.desktop-nav li {
  align-items: center;
  display: flex;
  margin: 0;
}

/* CTA pill: in WP menus the "nav-cta" class lands on the <li>, so paint the
   pill on its <a>. (The fallback nav in header.php puts nav-cta on the <a>
   itself; brand.css already styles a.nav-cta for that case.) */
.desktop-nav li.nav-cta {
  border: 0;
  padding: 0;
}

.desktop-nav li.nav-cta > a {
  border: 1px solid var(--gold-500);
  border-radius: 999px;
  color: var(--gold-400);
  padding: 10px 20px;
}

.desktop-nav .current-menu-item > a {
  color: var(--gold-400);
}

@media (max-width: 820px) {
  .desktop-nav li {
    display: block;
    width: 100%;
  }

  .desktop-nav li > a {
    display: block;
  }

  .desktop-nav li.nav-cta > a {
    margin-top: 22px;
    text-align: center;
  }
}

/* =============================================================================
   C. Elementor homepage layer  (scoped to .nif-front-main)
   ========================================================================== */

/* Let brand-section backgrounds bleed full width; kill Elementor's default
   container padding/gap so our own class rules control spacing. */
.nif-front-main .e-con,
.nif-front-main .e-con-inner {
  --gap: 0px;
  max-width: none;
}

/* Neutralise Elementor's default per-widget bottom spacing inside cards and
   tight groups; we reinstate rhythm through the brand rules below. */
.nif-front-main .aim-card .elementor-widget,
.nif-front-main .pillar-card .elementor-widget,
.nif-front-main .interests-list .elementor-widget,
.nif-front-main .event-meta .elementor-widget {
  margin-bottom: 0;
}

/* Headings/paragraphs produced by Elementor widgets should inherit the brand
   type, not Elementor's global fonts (also disabled server-side). */
.nif-front-main .elementor-heading-title {
  color: inherit;
  font-family: Georgia, "Times New Roman", serif;
  font-weight: 500;
  letter-spacing: -0.03em;
  line-height: 1.1;
  margin: 0;
}

.nif-front-main .elementor-widget-text-editor {
  color: inherit;
}

/* ---- Hero ---- */
.nif-front-main .hero {
  align-items: center;
  background:
    radial-gradient(
      circle at 65% 40%,
      rgba(23, 112, 84, 0.62),
      transparent 30%
    ),
    linear-gradient(112deg, #001f18 0%, #003b2d 58%, #052d24 100%);
  color: var(--white);
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(350px, 0.9fr);
  min-height: 800px;
  overflow: hidden;
  padding: 152px clamp(24px, 7vw, 112px) 92px;
  position: relative;
}

.nif-front-main .hero-copy,
.nif-front-main .hero-visual {
  position: relative;
  z-index: 2;
}

.nif-front-main .hero-visual {
  align-items: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.nif-front-main .hero-actions {
  align-items: center;
  display: flex;
  /* Elementor flex containers default to column; the two CTAs sit in a row. */
  flex-direction: row;
  flex-wrap: wrap;
  gap: 14px;
}

/* Only the H1 gets the giant hero size — not the eyebrow or other headings. */
.nif-front-main .hero h1.elementor-heading-title {
  font-size: clamp(52px, 6.2vw, 94px);
  line-height: 1.03;
}

/* Card titles (aims, pillars): the source .aim-card h3 / .pillar-card h3 rules
   never set font-weight, so they render at the browser's default bold (700)
   — heavier than the blanket heading rule's 500. Restore that default here. */
.nif-front-main .aim-card .elementor-heading-title,
.nif-front-main .pillar-card .elementor-heading-title {
  font-weight: 700;
}

/* Pillar icon (◆ glyph in a circle): Elementor's default widget flex values
   (align-items/justify-content: normal) override brand.css's centering,
   pinning the glyph to the top-left instead of the middle of the circle. */
.nif-front-main .pillar-icon {
  align-items: center;
  justify-content: center;
}

/* The decorative orbit rings are an HTML widget; take it out of the grid flow so
   the two real columns — copy (left) and emblem (right) — sit side by side
   instead of the rings eating the first grid cell. */
.nif-front-main .hero > .elementor-widget-html {
  inset: 0;
  margin: 0;
  pointer-events: none;
  position: absolute;
  z-index: 0;
}

/* Restore the source hero-copy rhythm. Elementor makes .hero-copy a flex column
   with a 20px row-gap (via --widgets-spacing-row, a separate declaration from
   --gap) plus 10px padding, which fights the brand child-margins and gives
   uneven spacing. Kill the gap + padding, then set the exact source spacing on
   each child. */
.nif-front-main .hero-copy {
  padding: 0;
  row-gap: 0;
}

.nif-front-main .hero-copy > .eyebrow {
  margin: 0 0 22px;
}

.nif-front-main .hero-copy > .elementor-widget-heading:not(.eyebrow) {
  margin: 0;
}

.nif-front-main .hero-copy > .hero-lead {
  margin: 30px 0 0;
}

.nif-front-main .hero-copy > .hero-actions {
  /* Elementor's default container padding (10px all round) otherwise shifts
     the buttons right of the eyebrow/headline/lead and pads out the 38/30px
     rhythm above and below them. */
  margin-top: 38px;
  padding: 0;
}

.nif-front-main .hero-copy > .hero-note {
  margin-top: 30px;
}

/* The "Talk is cheap. / Be solution driven." badge: stack + centre. brand.css
   sets flex-direction:column, but it is overridden inside the Elementor HTML
   widget, so re-declare it scoped and winning. */
.nif-front-main .hero-badge {
  align-items: center;
  display: flex;
  flex-direction: column;
  /* Elementor's default flex gap (20px) otherwise stacks on top of the span's
     own 4px margin-top, tripling the space between "Talk is cheap." and the
     label below it. */
  gap: 0;
  row-gap: 0;
  text-align: center;
}

/* Note strip: centre the pulse dot against the label and tighten the gap to the
   source value (Elementor's default widget gap otherwise pushes it to 20px). */
.nif-front-main .hero-note {
  align-items: center;
  gap: 10px;
}

/* Dot-grid texture on the emblem side. Elementor's own .e-con::before resets
   the brand .hero::before to content:none, so re-declare it scoped to win. */
.nif-front-main .hero::before {
  background-image: radial-gradient(
    rgba(234, 198, 112, 0.18) 1px,
    transparent 1px
  );
  background-size: 17px 17px;
  content: "";
  inset: 0 0 0 48%;
  -webkit-mask-image: linear-gradient(to left, #000, transparent);
  mask-image: linear-gradient(to left, #000, transparent);
  opacity: 0.65;
  pointer-events: none;
  position: absolute;
}

/* ---- Generic section padding ---- */
.nif-front-main .section {
  padding: 120px clamp(24px, 7vw, 112px);
}

.nif-front-main .heading-split {
  align-items: end;
  display: grid;
  gap: 8vw;
  grid-template-columns: 1.1fr 0.9fr;
  margin-bottom: 58px;
}

.nif-front-main .section-heading.centered {
  margin: 0 auto 65px;
  max-width: 720px;
  text-align: center;
}

/* ---- About / aims grid ---- */
.nif-front-main .aims-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
}

.nif-front-main .aim-card {
  border-left: 1px solid var(--line);
  min-height: 270px;
  padding: 28px clamp(20px, 2.3vw, 38px);
}

.nif-front-main .aim-card:last-child {
  border-right: 1px solid var(--line);
}

/* ---- Pillars ---- */
.nif-front-main .pillars-section {
  background:
    radial-gradient(circle at 50% 0%, rgba(20, 102, 77, 0.9), transparent 45%),
    var(--green-950);
  color: var(--white);
  padding: 112px clamp(24px, 7vw, 112px) 125px;
}

.nif-front-main .pillars-grid {
  display: grid;
  gap: 14px;
  grid-template-columns: repeat(4, 1fr);
}

.nif-front-main .pillar-card {
  background: rgba(255, 255, 255, 0.055);
  border: 1px solid rgba(233, 197, 111, 0.2);
  min-height: 260px;
  padding: 28px;
  position: relative;
}

/* ---- Interests ---- */
.nif-front-main .interests-section {
  align-items: center;
  background: var(--ivory);
  display: grid;
  gap: 8vw;
  grid-template-columns: 0.88fr 1.12fr;
  padding: 125px clamp(24px, 7vw, 112px);
}

.nif-front-main .benefit-list {
  display: grid;
  gap: 14px;
  grid-template-columns: 1fr 1fr;
  margin-top: 36px;
}

.nif-front-main .interests-list {
  background: var(--white);
  border: 1px solid rgba(214, 168, 77, 0.35);
  box-shadow: 0 30px 80px rgba(0, 58, 43, 0.09);
  list-style: none;
  margin: 0;
  padding: 16px 42px;
}

/* ---- Youth ---- */
.nif-front-main .youth-section {
  align-items: center;
  display: grid;
  gap: 7vw;
  grid-template-columns: 1.08fr 0.92fr;
}

.nif-front-main .youth-image {
  background: var(--green-950);
  box-shadow: 24px 24px 0 var(--gold-200);
  overflow: hidden;
}

/* ---- Event ---- */
.nif-front-main .event-section {
  background: var(--green-950);
  padding: 100px clamp(24px, 7vw, 112px);
}

.nif-front-main .event-card {
  align-items: center;
  background: var(--white);
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(380px, 0.85fr);
  margin: auto;
  max-width: 1300px;
}

.nif-front-main .event-copy {
  padding: clamp(40px, 5vw, 74px);
}

.nif-front-main .event-meta {
  border-bottom: 1px solid var(--line);
  border-top: 1px solid var(--line);
  margin-bottom: 34px;
}

.nif-front-main .event-meta div {
  display: grid;
  gap: 15px;
  grid-template-columns: 78px 1fr;
  padding: 10px 0;
}

/* ---- Gallery + Videos + Convenor + Contact section backgrounds/padding ---- */
.nif-front-main .gallery-section {
  background: var(--ivory);
  padding: 120px clamp(24px, 7vw, 112px);
}

/* Break the gallery shortcode out of Elementor's max-width container so the
   ivory background and grid span the full viewport width. */
.nif-front-main .elementor-widget-shortcode .gallery-section {
  left: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
  position: relative;
  right: 50%;
  width: 100vw;
}

.nif-front-main .videos-section {
  background: var(--cream);
  padding: 120px clamp(24px, 7vw, 112px);
}

.nif-front-main .convenor-section {
  align-items: center;
  background: var(--ivory);
  display: grid;
  gap: 8vw;
  grid-template-columns: 0.72fr 1.28fr;
}

.nif-front-main .contact-section {
  background:
    linear-gradient(125deg, rgba(0, 31, 24, 0.96), rgba(0, 60, 46, 0.92)),
    radial-gradient(
      circle at 75% 50%,
      rgba(233, 197, 111, 0.2),
      transparent 35%
    );
  color: var(--white);
  padding: 110px clamp(24px, 7vw, 112px);
}

.nif-front-main .contact-shell {
  display: grid;
  gap: 8vw;
  grid-template-columns: 0.85fr 1.15fr;
  margin: auto;
  max-width: 1300px;
}

/* Responsive collapses mirroring brand.css breakpoints (Elementor Full-Width
   containers don't inherit the static grid collapses automatically). */
@media (max-width: 1100px) {
  .nif-front-main .hero {
    grid-template-columns: 1fr 0.7fr;
  }
  .nif-front-main .aims-grid {
    grid-template-columns: repeat(3, 1fr);
  }
  .nif-front-main .aim-card:nth-child(4) {
    border-right: 0;
  }
  .nif-front-main .pillars-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .nif-front-main .event-card {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 820px) {
  .nif-front-main .hero {
    grid-template-columns: 1fr;
    min-height: auto;
    padding-top: 140px;
    text-align: center;
  }
  .nif-front-main .hero-copy {
    align-items: center;
    display: flex;
    flex-direction: column;
    margin-top: 56px;
  }
  .nif-front-main .hero-visual {
    margin-top: 0;
    order: -1;
  }
  .nif-front-main .heading-split,
  .nif-front-main .interests-section,
  .nif-front-main .youth-section,
  .nif-front-main .convenor-section,
  .nif-front-main .contact-shell {
    grid-template-columns: 1fr;
  }
  .nif-front-main .heading-split {
    gap: 28px;
  }
  .nif-front-main .aims-grid {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 560px) {
  .nif-front-main .hero {
    padding-left: 20px;
    padding-right: 20px;
  }
  .nif-front-main .section,
  .nif-front-main .interests-section,
  .nif-front-main .pillars-section,
  .nif-front-main .event-section,
  .nif-front-main .gallery-section,
  .nif-front-main .videos-section,
  .nif-front-main .contact-section {
    padding-left: 20px;
    padding-right: 20px;
  }
  .nif-front-main .aims-grid,
  .nif-front-main .pillars-grid,
  .nif-front-main .benefit-list {
    grid-template-columns: 1fr;
  }
  .nif-front-main .aim-card {
    border-right: 1px solid var(--line);
    min-height: auto;
  }
}

/* =============================================================================
   D. Native Elementor Gallery + Video tweaks
   ========================================================================== */

/* Basic Gallery: match the static 3-up rounded grid + hover zoom. */
.nif-front-main .gallery-section .elementor-image-gallery .gallery-item {
  padding: 9px;
}

.nif-front-main .gallery-section .elementor-image-gallery img {
  border: 0 !important;
  border-radius: 4px;
  object-fit: cover;
  transition: transform 320ms ease;
  width: 100%;
}

.nif-front-main .gallery-section .elementor-image-gallery a:hover img {
  transform: scale(1.03);
}

/* Feature photo (Image widget) + credit line spacing. */
.nif-front-main .gallery-feature {
  border-radius: 4px;
  box-shadow: 0 24px 60px -32px rgba(0, 44, 34, 0.55);
  margin: 0 auto 22px !important;
  max-width: 1300px;
  overflow: hidden;
}

.nif-front-main .gallery-credit {
  color: var(--muted);
  font-size: 14px;
  margin: 34px auto 0;
  max-width: 1300px;
  text-align: center;
}

/* Videos: 3-up grid, matching the static rhythm; the Elementor Video widget
   supplies its own 16:9 frame + play button. */
.nif-front-main .videos-grid {
  display: grid;
  gap: 30px 22px;
  grid-template-columns: repeat(3, 1fr);
  margin: 0 auto;
  max-width: 1300px;
}

.nif-front-main .videos-grid .video-title .elementor-heading-title {
  font-size: 17px;
  line-height: 1.35;
}

@media (max-width: 1100px) {
  .nif-front-main .videos-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 560px) {
  .nif-front-main .videos-grid {
    grid-template-columns: 1fr;
  }
}

/* =============================================================================
   E. Fluent Forms contact-form skin
   Scoped to the contact section so it reproduces the dark translucent inputs,
   gold focus ring, uppercase labels and gold submit button.
   ========================================================================== */
.contact-section .fluentform .ff-el-group,
.nif-contact .fluentform .ff-el-group {
  margin-bottom: 18px;
}

.contact-section .fluentform .ff-el-input--label label,
.nif-contact .fluentform .ff-el-input--label label {
  color: rgba(255, 255, 255, 0.7);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.contact-section .fluentform .ff-el-form-control,
.nif-contact .fluentform .ff-el-form-control {
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 2px;
  color: var(--white);
  padding: 15px 16px;
}

.contact-section .fluentform .ff-el-form-control:focus,
.nif-contact .fluentform .ff-el-form-control:focus {
  border-color: var(--gold-400);
  box-shadow: none;
  outline: none;
}

.contact-section .fluentform .ff-el-form-control::placeholder,
.nif-contact .fluentform .ff-el-form-control::placeholder {
  color: rgba(255, 255, 255, 0.4);
}

.contact-section .fluentform select.ff-el-form-control option {
  color: var(--ink);
}

.contact-section .fluentform .ff-btn-submit,
.nif-contact .fluentform .ff-btn-submit {
  background: var(--gold-500) !important;
  border: 0 !important;
  border-radius: 4px;
  color: var(--green-950) !important;
  cursor: pointer;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.04em;
  min-height: 52px;
  padding: 0 25px;
}

.contact-section .fluentform .ff-btn-submit:hover {
  background: var(--gold-400) !important;
}

/* Success/error messages */
.contact-section .fluentform .ff-message-success {
  color: var(--gold-400);
}

/* =============================================================================
   F. Interior pages & blog
   ========================================================================== */
.nif-page {
  background: var(--cream);
  color: var(--ink);
}

/* Branded page/blog hero band */
.page-hero {
  background:
    radial-gradient(
      circle at 70% 30%,
      rgba(20, 102, 77, 0.55),
      transparent 40%
    ),
    linear-gradient(120deg, #001f18 0%, #003b2d 60%, #052d24 100%);
  border-bottom: 4px solid var(--gold-500);
  color: var(--white);
  padding: 74px clamp(24px, 7vw, 112px) 60px;
}

.page-hero-inner {
  margin: 0 auto;
  max-width: 1200px;
}

/* Left-align the hero eyebrow above the title (the .gold variant is centered
   for the homepage section headings, but here it should follow the title). */
.page-hero .eyebrow {
  justify-content: flex-start;
}

.page-title {
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(34px, 4.2vw, 58px);
  font-weight: 500;
  letter-spacing: -0.03em;
  line-height: 1.05;
  margin: 8px 0 0;
}

.page-title span {
  color: var(--gold-400);
}

.archive-description {
  color: rgba(255, 255, 255, 0.72);
  margin-top: 14px;
  max-width: 720px;
}

/* Content + sidebar layout */
.nif-content-wrap {
  display: grid;
  gap: clamp(32px, 5vw, 64px);
  grid-template-columns: minmax(0, 1fr) 300px;
  margin: 0 auto;
  max-width: 1200px;
  padding: clamp(48px, 6vw, 80px) clamp(24px, 7vw, 112px);
}

.nif-content-wrap--narrow {
  grid-template-columns: minmax(0, 1fr);
  max-width: 820px;
}

@media (max-width: 900px) {
  .nif-content-wrap {
    grid-template-columns: 1fr;
  }
}

/* Post list: one post per row, stacked in the content column (sidebar sits
   to the right via .nif-content-wrap). */
.post-grid {
  display: flex;
  flex-direction: column;
  gap: 34px;
}

/* Each card stacks vertically: full-width landscape banner, then the text. */
.post-card {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 6px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transition:
    transform 180ms ease,
    box-shadow 180ms ease;
}

.post-card:hover {
  box-shadow: 0 24px 60px -34px rgba(0, 44, 34, 0.5);
  transform: translateY(-3px);
}

/* Full-width landscape banner across the top of the card. */
.post-card-media {
  aspect-ratio: 16 / 9;
  display: block;
  width: 100%;
}

.post-card-media img {
  display: block;
  height: 100%;
  object-fit: cover;
  width: 100%;
}

/* Fallback banner for posts without a featured image: the emblem on a
   brand-green panel filling the same landscape box. */
.post-card-media--placeholder {
  align-items: center;
  background:
    radial-gradient(120% 140% at 50% -20%, var(--green-800), var(--green-950));
  border-bottom: 2px solid var(--gold-500);
  display: flex;
  justify-content: center;
}

.post-card-media--placeholder img {
  height: 84px;
  object-fit: contain;
  opacity: 0.9;
  width: 84px;
}

.post-card-body {
  display: flex;
  flex: 1;
  flex-direction: column;
  padding: 26px 26px 28px;
}

.entry-meta {
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.08em;
  margin: 0 0 10px;
  text-transform: uppercase;
}

.entry-meta a {
  color: var(--green-700);
}

.entry-meta-sep {
  margin: 0 8px;
}

.post-card-title {
  font-family: Georgia, "Times New Roman", serif;
  font-size: 23px;
  font-weight: 500;
  line-height: 1.2;
  margin: 0 0 12px;
}

.post-card-title a:hover {
  color: var(--green-700);
}

.post-card-excerpt {
  color: var(--muted);
  font-size: 14px;
  margin-bottom: 18px;
}

.post-card .text-link {
  margin-top: auto;
}

/* Single post */
/* Banner sits at the top of the post's content column, above the text. */
.single-feature {
  margin: 0 0 32px;
}

.single-feature img {
  border-radius: 6px;
  display: block;
  width: 100%;
}

/* Banner fallback when a post has no featured image: emblem on a brand-green
   panel, matching the archive cards. */
.single-feature-fallback {
  align-items: center;
  aspect-ratio: 16 / 9;
  background:
    radial-gradient(120% 140% at 50% -20%, var(--green-800), var(--green-950));
  border-radius: 6px;
  display: flex;
  justify-content: center;
  width: 100%;
}

.single-feature-fallback img {
  border-radius: 0;
  height: 96px;
  opacity: 0.9;
  width: 96px;
}

.entry-content {
  font-size: 17px;
  line-height: 1.8;
}

.entry-content h2,
.entry-content h3,
.entry-content h4 {
  font-family: Georgia, "Times New Roman", serif;
  font-weight: 500;
  letter-spacing: -0.01em;
  line-height: 1.2;
}

.entry-content h2 {
  font-size: 30px;
  margin: 42px 0 16px;
}

.entry-content h3 {
  font-size: 24px;
  margin: 34px 0 14px;
}

.entry-content p {
  margin: 0 0 22px;
}

.entry-content a {
  color: var(--green-700);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.entry-content blockquote {
  border-left: 3px solid var(--gold-500);
  color: var(--green-800);
  font-family: Georgia, "Times New Roman", serif;
  font-size: 22px;
  margin: 30px 0;
  padding: 6px 0 6px 26px;
}

.entry-content img {
  border-radius: 6px;
  height: auto;
}

.entry-taxonomy {
  margin-top: 40px;
}

.entry-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.entry-tags a {
  background: var(--ivory);
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--green-800);
  display: inline-block;
  font-size: 12px;
  font-weight: 700;
  padding: 6px 14px;
}

/* Post navigation (prev/next) */
.post-navigation {
  border-top: 1px solid var(--line);
  margin-top: 44px;
  padding-top: 26px;
}

.post-navigation .nav-links {
  display: flex;
  gap: 24px;
  justify-content: space-between;
}

.post-navigation .nav-subtitle {
  color: var(--muted);
  display: block;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.post-navigation .nav-title {
  color: var(--green-800);
  font-family: Georgia, "Times New Roman", serif;
  font-size: 17px;
}

/* Pagination */
.nif-pagination {
  margin-top: 48px;
}

.nif-pagination .nav-links {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
}

.nif-pagination .page-numbers {
  border: 1px solid var(--line);
  border-radius: 4px;
  color: var(--green-800);
  font-weight: 700;
  padding: 10px 15px;
}

.nif-pagination .page-numbers.current {
  background: var(--green-800);
  border-color: var(--green-800);
  color: var(--white);
}

.nif-pagination a.page-numbers:hover {
  border-color: var(--gold-500);
  color: var(--green-700);
}

/* Sidebar */
.nif-sidebar .widget {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 6px;
  margin-bottom: 26px;
  padding: 24px 24px 26px;
}

.widget-title {
  font-family: Georgia, "Times New Roman", serif;
  font-size: 18px;
  font-weight: 500;
  margin: 0 0 16px;
}

.nif-sidebar ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.nif-sidebar li {
  border-bottom: 1px solid var(--line);
  padding: 9px 0;
}

.nif-sidebar li:last-child {
  border-bottom: 0;
}

.nif-sidebar a:hover {
  color: var(--green-700);
}

/* Search form */
.nif-search-form {
  display: flex;
  gap: 8px;
}

.nif-search-field {
  background: var(--cream);
  border: 1px solid var(--line);
  border-radius: 4px;
  color: var(--ink);
  flex: 1;
  padding: 12px 14px;
}

.nif-search-field:focus {
  border-color: var(--gold-500);
  outline: none;
}

.nif-search-submit {
  min-height: 0;
  padding: 0 18px;
}

/* Comments */
.comments-area {
  border-top: 1px solid var(--line);
  margin-top: 48px;
  padding-top: 36px;
}

.comments-title {
  font-family: Georgia, "Times New Roman", serif;
  font-size: 24px;
  font-weight: 500;
  margin: 0 0 24px;
}

.comment-list {
  list-style: none;
  margin: 0 0 40px;
  padding: 0;
}

.comment-list ol {
  list-style: none;
}

.comment-body {
  border-bottom: 1px solid var(--line);
  padding: 20px 0;
}

.comment-author {
  align-items: center;
  display: flex;
  gap: 12px;
}

.comment-author .fn {
  font-weight: 800;
}

.comment-meta {
  color: var(--muted);
  font-size: 12px;
}

.comment-respond {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 28px;
}

.comment-form input[type="text"],
.comment-form input[type="email"],
.comment-form input[type="url"],
.comment-form textarea {
  background: var(--cream);
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 12px 14px;
  width: 100%;
}

.no-posts,
.no-comments {
  color: var(--muted);
}

/* =============================================================================
   G. Non-home header — solid + static so it never overlaps blog/interior pages
   ========================================================================== */
body:not(.nif-front) .site-header {
  background: #002c22;
  position: static;
}

@media (max-width: 820px) {
  /* On non-home pages the drawer nav is still fixed; header itself is static. */
  body:not(.nif-front) .site-header {
    height: 78px;
  }
}

/* =============================================================================
   H. Elementor widget skins used by the homepage template
   These map native Button / Heading / Icon-List / Video widgets onto the brand
   look. Attach the noted CSS class to each widget (see SETUP-GUIDE.md).
   ========================================================================== */

/* Hero <h1> gold sub-line (title contains a <span>). */
.nif-front-main .hero .elementor-heading-title span {
  color: var(--gold-400);
  display: block;
}

/* Eyebrow as a Heading widget: brand.css .eyebrow sits on the widget wrapper,
   so its ::before rule + flex still render the little gold rule before text.
   Elementor's default widget gap (20px) and align override the brand values, so
   restore the source: 32px rule, 11px gap, vertically centred against the caps. */
.nif-front-main .elementor-widget.eyebrow {
  align-items: center;
  column-gap: 11px;
  display: flex;
  gap: 11px;
}

/* Hero emblem: Elementor's own image-widget CSS ties on specificity with
   brand.css's width/height:112% (the oversize-crop trick that hides the
   PNG's edge margin) and, loading later, wins — leaving the image at 100%
   and exposing a sliver of transparent margin. Force brand's sizing to win. */
.nif-front-main .hero-emblem img {
  height: 112% !important;
  max-width: none !important;
  object-fit: cover;
  width: 112% !important;
}

/* The eyebrow's heading text must inherit the small gold label styling from the
   .eyebrow wrapper (otherwise it inherits a section/hero heading size). */
.nif-front-main .eyebrow .elementor-heading-title {
  color: inherit;
  font: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
}

/* Native Button widget → brand gold button; add class "btn-ghost" for the
   translucent outline variant used beside it in the hero.
   Elementor renders the button as display:inline-block with the label in a
   nested .elementor-button-text span, so without an explicit flex centering
   the label sinks to the top of the 52px pill. Force it centered. */
/* !important on color: a widget's own Style > Text Color (set per-instance in
   the Elementor editor) bakes a highly specific rule that otherwise beats this
   class-based skin, so the brand color must win unconditionally here. */
.nif-front-main .elementor-button {
  align-items: center;
  background: var(--gold-500);
  border: 0;
  border-radius: 4px;
  color: var(--green-950) !important;
  display: inline-flex;
  font-size: 13px;
  font-weight: 800;
  justify-content: center;
  letter-spacing: 0.04em;
  line-height: 1;
  min-height: 52px;
  padding: 0 25px;
  text-decoration: none;
}

.nif-front-main .elementor-button:hover {
  background: var(--gold-400);
}

.nif-front-main .btn-ghost .elementor-button {
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.35);
  color: var(--white) !important;
}

.nif-front-main .btn-ghost .elementor-button:hover {
  border-color: var(--gold-400);
  color: var(--gold-400) !important;
}

/* Pillars: small corner number (Heading widget, class "pillar-num"). */
.nif-front-main .pillar-card .pillar-num {
  color: rgba(233, 197, 111, 0.62);
  font-family: Georgia, "Times New Roman", serif;
  font-size: 14px;
  position: absolute;
  right: 22px;
  top: 18px;
}

/* Benefit list (Icon List widget, class "benefit-iconlist"): 2-column checks. */
.nif-front-main .benefit-iconlist .elementor-icon-list-items {
  display: grid;
  gap: 14px;
  grid-template-columns: 1fr 1fr;
}

.nif-front-main .benefit-iconlist .elementor-icon-list-item {
  align-items: flex-start;
  font-size: 13px;
  font-weight: 700;
}

/* Source `.benefit-list i` renders each check as a filled green circle with a
   gold tick centred inside. Elementor gives us only a bare icon span (a black
   FontAwesome check), so build the badge here. */
.nif-front-main .benefit-iconlist .elementor-icon-list-icon {
  align-items: center;
  background: var(--green-800);
  border-radius: 50%;
  color: var(--gold-400);
  display: flex;
  flex: 0 0 auto;
  height: 21px;
  justify-content: center;
  width: 21px;
}

/* Recolour + resize the tick inside the badge. The extra ancestor class beats
   Elementor's own `.elementor-widget-icon-list .elementor-icon-list-icon svg`
   sizing/margin rule (specificity 0,3,1). */
.nif-front-main
  .interests-copy
  .benefit-iconlist
  .elementor-icon-list-icon
  svg {
  fill: var(--gold-400);
  height: 11px;
  margin: 0;
  width: 11px;
}

/* Source gap between badge and label is 10px; Elementor defaults to 5px. */
.nif-front-main
  .benefit-iconlist
  .elementor-icon-list-icon
  + .elementor-icon-list-text {
  padding-inline-start: 10px;
}

@media (max-width: 560px) {
  .nif-front-main .benefit-iconlist .elementor-icon-list-items {
    grid-template-columns: 1fr;
  }
}

/* Interests list (Icon List widget, class "interests-iconlist"): boxed rows,
   the leading "01." lives in the item text; icons hidden. */
.nif-front-main .interests-iconlist .elementor-icon-list-items {
  background: var(--white);
  border: 1px solid rgba(214, 168, 77, 0.35);
  box-shadow: 0 30px 80px rgba(0, 58, 43, 0.09);
  padding: 16px 42px;
}

/* Elementor ships `.elementor .elementor-element ul.elementor-icon-list-items
   { padding: 0 }` (specificity 0,3,1), which beats the padding above and
   collapses the card's inset — rows and dividers run full-bleed. Restore the
   16px 42px inset with a selector that outweighs Elementor's. */
.nif-front-main
  .interests-section
  .interests-iconlist
  ul.elementor-icon-list-items {
  padding: 16px 42px;
}

.nif-front-main .interests-iconlist .elementor-icon-list-icon {
  display: none;
}

.nif-front-main .interests-iconlist .elementor-icon-list-item {
  border-bottom: 1px solid var(--line);
  font-family: Georgia, "Times New Roman", serif;
  font-size: 17px;
  min-height: 54px;
}

/* nav.js wraps each item's leading "01" in this span (editors type the whole
   row, incl. the number, as one line of free text) so it can be styled like
   the source's separate <span>01</span> label instead of inheriting the
   Georgia body-copy styling of the rest of the row. */
.nif-front-main .interests-iconlist .interest-num {
  color: var(--gold-500);
  font-family: Arial, Helvetica, sans-serif;
  font-size: 11px;
  font-weight: 800;
  margin-right: 22px;
}

.nif-front-main .interests-iconlist .elementor-icon-list-item:last-child {
  border-bottom: 0;
}

/* Youth aims (Icon List widget, class "youth-list"): underlined rows. */
.nif-front-main .youth-list .elementor-icon-list-item {
  border-bottom: 1px solid var(--line);
  font-size: 14px;
  font-weight: 700;
  padding: 12px 0;
}

.nif-front-main .youth-list .elementor-icon-list-icon {
  color: var(--gold-500);
}

/* Event meta rows (containers, class "event-meta-row"). Elementor prints a
   per-element inline rule (".elementor-element.elementor-element-{id}") for
   each container's default padding/margin at the same specificity as a single
   class selector, and that stylesheet is enqueued after ours — so on a
   specificity tie it wins the cascade, reinstating Elementor's default
   padding/gap and blowing out the rhythm between Date/Time/Admission.
   !important forces our intended (HTML-parity) spacing to win regardless of
   source order. */
.nif-front-main .event-meta-row {
  display: grid !important;
  gap: 15px !important;
  grid-template-columns: 78px 1fr !important;
  margin: 0 !important;
  padding: 10px 0 !important;
}

.nif-front-main .event-meta-row .meta-label,
.nif-front-main .event-meta-row .meta-value {
  margin: 0 !important;
  padding: 0 !important;
}

.nif-front-main .event-meta-row .meta-label .elementor-heading-title {
  color: var(--muted);
  font-family: Arial, Helvetica, sans-serif;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.08em;
  margin: 0 !important;
  text-transform: uppercase;
}

.nif-front-main .event-meta-row .meta-value .elementor-heading-title {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 13px;
  font-weight: 700;
  margin: 0 !important;
}

.nif-front-main .event-meta {
  margin-bottom: 34px !important;
}

/* Convenor copy column: Elementor makes it a flex column with 20px gap, which
   stacks on top of the quote's own margins and over-spaces the section.
   Kill the gap and restore rhythm through element margins (eyebrow → h2 → quote). */
.nif-front-main .convenor-copy {
  row-gap: 0;
}

/* Convenor pull-quote (Text Editor widget, class "quote") — brand.css styles
   .quote on the wrapper; ensure the inner paragraph inherits it. */
.nif-front-main .quote p {
  color: inherit;
  font: inherit;
  margin: 0;
}

/* Videos section: eyebrow colour override (beats brand.css specificity in Elementor). */
.nif-front-main .videos-section .eyebrow.gold,
.nif-front-main .videos-section .eyebrow.gold .elementor-heading-title {
  color: var(--gold-500);
}

/* Videos section: remove Elementor's default flex gap so only the
   section-heading's 65px bottom margin controls the heading→grid spacing. */
.nif-front-main .videos-section.e-con > .e-con-inner,
.nif-front-main .videos-section.e-con {
  gap: 0;
}

/* Video cards: each is a container holding an HTML widget (thumb) + a title Heading. */
.nif-front-main .videos-grid .video-card {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

/* Strip Elementor widget wrapper padding so .video-thumb fills the card edge-to-edge. */
.nif-front-main .video-card .elementor-widget-html,
.nif-front-main .video-card .elementor-widget-html .elementor-widget-container {
  padding: 0;
}