@import url('https://fonts.googleapis.com/css2?family=Source+Serif+4:ital,opsz,wght@0,8..60,400;0,8..60,700;0,8..60,800&family=Merriweather:wght@400;700;900&family=Lora:wght@400;700&family=Playfair+Display:wght@400;700;800&family=Roboto+Slab:wght@400;700&family=Inter:wght@400;600;700&family=DM+Sans:wght@400;600;700&family=Lato:wght@400;700;900&display=swap');

/* ================================================================
   Branch card grid — used on division overview pages
   ================================================================ */
.mns-branch-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 16px;
  margin-top: 16px;
}
.mns-branch-card {
  display: flex;
  align-items: center;
  padding: 18px 20px;
  background: #f0f5fc;
  border-left: 4px solid #FBBF01;
  border-radius: 0 6px 6px 0;
  color: #2F34A6;
  font-family: 'Open Sans', sans-serif;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.4;
  text-decoration: none;
  transition: background 0.2s, border-color 0.2s, transform 0.2s;
}
.mns-branch-card:hover {
  background: #2F34A6;
  border-left-color: #FBBF01;
  color: #ffffff;
  transform: translateX(4px);
  text-decoration: none;
}
@media (max-width: 600px) {
  .mns-branch-grid { grid-template-columns: 1fr; }
}

/* ================================================================
   Branch entry blocks — used on division overview pages (full desc + link)
   ================================================================ */
.mns-branch-entry {
  background: #fff;
  border: 1px solid #e2eaf4;
  border-top: 3px solid #2F34A6;
  border-radius: 4px;
  padding: 24px 28px;
  box-shadow: 0 2px 8px rgba(47,52,166,0.04);
  margin-bottom: 20px;
}

.mns-branch-entry h3 {
  font-family: 'Barlow Condensed', sans-serif !important;
  font-size: 20px !important;
  font-weight: 700 !important;
  color: #2F34A6 !important;
  margin: 0 0 12px !important;
  letter-spacing: 0.3px !important;
}

.mns-branch-entry h3 a {
  color: #2F34A6 !important;
  text-decoration: none !important;
}

.mns-branch-entry h3 a:hover {
  color: #FBBF01 !important;
  text-decoration: none !important;
}

.mns-branch-link {
  display: inline-block;
  margin-top: 12px;
  padding: 7px 18px;
  background: #2F34A6;
  color: #fff !important;
  font-family: 'Open Sans', sans-serif;
  font-size: 13px;
  font-weight: 600;
  text-decoration: none !important;
  border-radius: 3px;
  transition: background 0.2s, color 0.2s;
}

.mns-branch-link:hover {
  background: #FBBF01;
  color: #2F34A6 !important;
}

/* Back link on branch detail pages */
.mns-branch-back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  background: #f0f5fc;
  color: #2F34A6 !important;
  font-family: 'Open Sans', sans-serif;
  font-size: 13px;
  font-weight: 600;
  text-decoration: none !important;
  border-radius: 4px;
  margin-bottom: 28px;
  border: 1px solid #c6d8ef;
  transition: background 0.2s, color 0.2s;
}

.mns-branch-back:hover {
  background: #2F34A6;
  color: #fff !important;
}

/* ================================================================
   Global paragraph text — Poppins, clean and readable
   ================================================================ */
p,
.field--type-text-with-summary p,
.field--type-text-long p,
.field--type-text p,
.text-formatted p,
.paragraph p,
article p,
.node__content p,
.layout-container p {
  font-family: 'Poppins', 'Helvetica Neue', Arial, sans-serif !important;
  font-size: 15px !important;
  font-weight: 400 !important;
  line-height: 1.75 !important;
  color: #111111 !important;
}

/* ================================================================
   MNS Division Pages — Hero banner + body content styling
   ================================================================ */

/* --- Hero Banner ------------------------------------------------ */
.mns-page-hero {
  position: relative;
  background: #2F34A6;
  overflow: hidden;
  padding: 40px 0 48px;
}

.mns-page-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 90% 50%, rgba(251,191,1,0.08) 0%, transparent 60%),
    radial-gradient(circle at 10% 20%, rgba(255,255,255,0.04) 0%, transparent 50%);
  pointer-events: none;
}

.mns-page-hero-inner {
  position: relative;
  z-index: 1;
}

.mns-page-breadcrumb {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: rgba(255,255,255,0.6);
  margin-bottom: 18px;
  font-family: 'Open Sans', sans-serif;
  letter-spacing: 0.3px;
}

.mns-page-breadcrumb a {
  color: rgba(255,255,255,0.6);
  text-decoration: none;
  transition: color 0.2s;
}

.mns-page-breadcrumb a:hover {
  color: #FBBF01;
}

.mns-breadcrumb-sep {
  color: rgba(255,255,255,0.3);
  font-size: 11px;
}

/* Global body/paragraph font — the base theme's --bs-paragraph-font variable
   feeds every font-family: var(--bs-paragraph-font) declaration across
   style.css, so overriding it here cascades to all general page/paragraph
   content and the Mission & Vision card body text in one place. Weight is a
   separate property per-selector in style.css (not variable-driven), so it
   needs its own global bump below to make paragraph text read a bit
   stronger than the base theme's regular 400. */
:root {
  --bs-paragraph-font: 'Poppins', 'Helvetica Neue', Arial, sans-serif;
  --bs-body-font-family: 'Segoe UI', Arial, sans-serif;
}

p {
  font-weight: 500 !important;
}

/* ================================================================
   SITE-WIDE FONT — Segoe UI on every single piece of text.
   This file loads last, so `body *` with !important beats every
   other font-family declaration in the theme (including per-section
   hardcoded ones like mns-mission.css's old Open Sans rule that
   previously slipped past narrower selector-based overrides).
   ================================================================ */
body,
body * {
  font-family: 'Segoe UI', Arial, sans-serif !important;
}

/* Font Awesome icons render as literal characters mapped to glyphs in
   their own icon fonts — forcing Segoe UI on them would show boxes/
   letters instead of icons, so their family must survive the rule above. */
.fa,
.fas,
.far,
.fal,
.fab,
.fad,
[class^="fa-"],
[class*=" fa-"] {
  font-family: "Font Awesome 5 Free", "Font Awesome 5 Brands", "Font Awesome 6 Free", "Font Awesome 6 Brands", FontAwesome !important;
}

/* ================================================================
   FRONT PAGE OVERRIDE — Open Sans (the Mission & Vision font).
   Drupal stamps the front page's <body> with .path-frontpage, so this
   scopes back to Open Sans there while the rest of the site keeps the
   site-wide Segoe UI rule above. Higher class count than `body *`
   above wins on specificity, and the icon rule below matches it so
   Font Awesome glyphs still render correctly on the home page. */
body.path-frontpage,
body.path-frontpage * {
  font-family: 'Open Sans', sans-serif !important;
}

body.path-frontpage .fa,
body.path-frontpage .fas,
body.path-frontpage .far,
body.path-frontpage .fal,
body.path-frontpage .fab,
body.path-frontpage .fad,
body.path-frontpage [class^="fa-"],
body.path-frontpage [class*=" fa-"] {
  font-family: "Font Awesome 5 Free", "Font Awesome 5 Brands", "Font Awesome 6 Free", "Font Awesome 6 Brands", FontAwesome !important;
}

.mns-mvv-body,
.mns-mvv-body p {
  font-family: 'Open Sans', sans-serif !important;
  font-weight: 500 !important;
}

/* text-transform: none — the title renders in the casing it was written
   in (e.g. "Law Enforcement, Forensic, Border Security…") rather than
   being forced to all-caps. */
.mns-page-hero-title {
  color: #fff;
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 46px;
  font-weight: 800;
  text-transform: none;
  letter-spacing: 0.5px;
  line-height: 1.15;
  margin: 0 0 20px 0;
}

.mns-page-hero-bar {
  width: 64px;
  height: 4px;
  background: #FBBF01;
  border-radius: 2px;
}

/* --- Content Area ---------------------------------------------- */
.mns-page-content-section {
  background: transparent;
  padding: 0;
}

/* No max-width here — paragraph sections control their own width */
.mns-page-node-body {
  width: 100%;
}

/* Override legal-notes paragraph section for division page context */
.mns-page-content-section .legal-notes.home-page {
  padding: 56px 0 72px;
}
.mns-page-content-section .legal-notes.home-page .content-body {
  max-width: 1140px;
}

/* --- Division Body Sections ------------------------------------ */
.mns-division-body {
  display: flex;
  flex-direction: column;
  gap: 36px;
}

/* Division page title */
.mns-div-title {
  font-family: 'Barlow Condensed', sans-serif !important;
  font-size: 38px !important;
  font-weight: 800 !important;
  color: #2F34A6 !important;
  text-transform: uppercase !important;
  letter-spacing: 1.5px !important;
  margin: 0 0 4px !important;
  padding-bottom: 16px !important;
  border-bottom: 4px solid #FBBF01 !important;
  line-height: 1.15 !important;
}

/* Mandate block */
.mns-div-mandate {
  background: #f0f5fc;
  border-left: 5px solid #FBBF01;
  border-radius: 0 8px 8px 0;
  padding: 28px 36px;
}

.mns-div-mandate h2,
.mns-div-functions h2,
.mns-div-contact h2 {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 22px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: #2F34A6;
  margin: 0 0 14px 0;
  padding-bottom: 10px;
  border-bottom: 2px solid #e2eaf4;
}

.mns-div-mandate p {
  color: #222;
  font-size: 16px;
  line-height: 1.7;
  margin: 0;
}

/* Key Functions block */
.mns-div-functions {
  background: #fff;
  border: 1px solid #e2eaf4;
  border-radius: 8px;
  padding: 28px 36px;
  box-shadow: 0 2px 12px rgba(47,52,166,0.05);
}

.mns-div-functions ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.mns-div-functions ul li {
  position: relative;
  padding: 11px 0 11px 28px;
  border-bottom: 1px solid #f0f4f9;
  color: #222;
  font-size: 15px;
  line-height: 1.5;
}

.mns-div-functions ul li:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.mns-div-functions ul li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 10px;
  height: 10px;
  background: #FBBF01;
  border-radius: 50%;
  flex-shrink: 0;
}

/* Contact block */
.mns-div-contact {
  background: #2F34A6;
  border-radius: 8px;
  padding: 28px 36px;
  color: rgba(255,255,255,0.85);
}

.mns-div-contact h2 {
  color: #FBBF01 !important;
  border-bottom-color: rgba(255,255,255,0.15) !important;
}

.mns-div-contact p {
  color: rgba(255,255,255,0.85);
  font-size: 15px;
  line-height: 1.8;
  margin: 0;
}

/* --- Responsive ------------------------------------------------ */
@media (max-width: 768px) {
  .mns-page-hero {
    padding: 70px 0 44px;
  }
  .mns-page-hero-title {
    font-size: 32px;
  }
  .mns-div-mandate,
  .mns-div-functions,
  .mns-div-contact {
    padding: 20px 20px;
  }
}

/* ================================================================
   Latest News — 3-column modern layout (banner | news | banner)
   ================================================================ */

.home3-blog .blog1 { display: none !important; }

/* ── Section wrapper ── */
.mns-news-section {
  background: #f5f7fa;
  padding: 72px 0 80px;
}

/* ── Section header ── */
.home3-blog .mns-news-header {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  text-align: center !important;
  margin-bottom: 48px !important;
  width: 100% !important;
}

.mns-news-eyebrow {
  position: static !important;
  float: none !important;
  display: block !important;
  text-align: center !important;
  width: 100% !important;
  margin-bottom: 14px !important;
}

.mns-news-eyebrow-line {
  display: none !important;
}

.mns-news-eyebrow-text {
  display: inline-block !important;
  border: 1.5px solid #FBBF01 !important;
  border-radius: 50px !important;
  padding: 5px 18px !important;
  font-family: 'Open Sans', sans-serif !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 2.5px !important;
  text-transform: uppercase !important;
  color: #FBBF01 !important;
  background: transparent !important;
  margin-top: 0 !important;
  line-height: 1 !important;
}

.mns-news-title {
  font-family: 'Barlow Condensed', sans-serif !important;
  font-size: clamp(28px, 3.5vw, 42px) !important;
  font-weight: 800 !important;
  color: #2F34A6 !important;
  text-transform: uppercase !important;
  letter-spacing: 1px !important;
  margin: 0 !important;
  text-shadow: none !important;
  line-height: 1.1 !important;
  text-align: center !important;
  width: 100% !important;
}

/* ── 3-column outer grid ── */
.mns-news-outer {
  display: grid;
  grid-template-columns: 210px 1fr 210px;
  gap: 28px;
  align-items: stretch;
}

/* ── Side banners ── */
.mns-nbanner {
  background: linear-gradient(160deg, #2F34A6 0%, #1E2170 100%);
  border-radius: 12px;
  padding: 22px 18px 20px;
  color: #fff;
  box-shadow: 0 4px 24px rgba(1,30,82,0.18);
  display: flex;
  flex-direction: column;
  max-height: 700px;
}

.mns-nbanner-head {
  display: flex;
  align-items: center;
  gap: 7px;
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: #FBBF01;
  margin-bottom: 14px;
}

.mns-nbanner-head::after {
  content: '';
  flex: 1;
  height: 1px;
  background: rgba(251,191,1,0.25);
}

/* Links list */
.mns-nbanner-links {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
}

.mns-nbanner-links li a {
  display: flex;
  align-items: center;
  gap: 8px;
  color: rgba(255,255,255,0.82) !important;
  font-family: 'Open Sans', sans-serif;
  font-size: 12.5px;
  font-weight: 500;
  padding: 8px 10px;
  border-radius: 6px;
  text-decoration: none !important;
  transition: background 0.18s, color 0.18s;
  line-height: 1.3;
}

.mns-nbanner-links li a:hover {
  background: rgba(255,255,255,0.1);
  color: #FBBF01 !important;
}

/* Arrow variant (right banner initiatives) */
.mns-nbanner-links--arrow li a::after {
  content: '›';
  margin-left: auto;
  font-size: 16px;
  line-height: 1;
  color: rgba(251,191,1,0.5);
  transition: color 0.18s;
}

.mns-nbanner-links--arrow li a:hover::after {
  color: #FBBF01;
}

/* Divider */
.mns-nbanner-divider {
  height: 1px;
  background: rgba(255,255,255,0.1);
  margin: 16px 0;
}

/* Emergency number block */
.mns-nbanner-emergency {
  text-align: center;
  padding: 10px 0 4px;
}

.mns-nbanner-num {
  display: block;
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 56px;
  font-weight: 800;
  color: #FBBF01;
  line-height: 1;
  letter-spacing: -1px;
  text-shadow: 0 0 30px rgba(251,191,1,0.3);
}

.mns-nbanner-numlab {
  display: block;
  font-family: 'Open Sans', sans-serif;
  font-size: 10px;
  font-weight: 700;
  color: rgba(255,255,255,0.6);
  text-transform: uppercase;
  letter-spacing: 1.2px;
  margin-top: 4px;
}

/* Alt numbers (fire, ambulance) */
.mns-nbanner-altnums {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 12px;
}

.mns-nbanner-altnum {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 7px 10px;
  background: rgba(255,255,255,0.07);
  border-radius: 6px;
  border-left: 2px solid rgba(251,191,1,0.4);
}

.mns-nbanner-altnum span {
  font-family: 'Open Sans', sans-serif;
  font-size: 11px;
  color: rgba(255,255,255,0.65);
}

.mns-nbanner-altnum strong {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 18px;
  font-weight: 700;
  color: #FBBF01;
}

/* ── Banner image (when uploaded via Drupal admin) ── */
.mns-nbanner-img {
  margin: -22px -18px -20px;
  border-radius: 12px;
  overflow: hidden;
  flex: 1;
  display: flex;
}

.mns-nbanner-img img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center !important;
  display: block !important;
  border-radius: 12px !important;
}

.mns-nbanner-img .field--name-field-banner-left,
.mns-nbanner-img .field--name-field-banner-right,
.mns-nbanner-img .field__item {
  display: contents !important;
}

/* CTA button */
.mns-nbanner-cta {
  display: block;
  text-align: center;
  margin-top: 16px;
  padding: 10px 14px;
  background: #FBBF01;
  color: #2F34A6 !important;
  font-family: 'Open Sans', sans-serif;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  border-radius: 6px;
  text-decoration: none !important;
  transition: background 0.2s, transform 0.2s;
}

.mns-nbanner-cta:hover {
  background: #e0a800;
  transform: translateY(-1px);
}

/* ── Featured article (first news item) ── */
.mns-news-featured {
  margin-bottom: 20px;
}

.mns-news-featured .mns-latestnews-card {
  display: flex;
  flex-direction: row;
  background: #fff;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 4px 24px rgba(47,52,166,0.10);
  min-height: 260px;
}

.mns-news-featured .mns-latestnews-img-link {
  flex: 0 0 46%;
  display: block;
  overflow: hidden;
  position: relative;
}

.mns-news-featured .mns-latestnews-img-link img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  transition: transform 0.4s ease;
}

.mns-news-featured .mns-latestnews-img-link:hover img {
  transform: scale(1.04);
}

.mns-news-featured .mns-latestnews-card-body {
  flex: 1;
  padding: 26px 26px 22px;
  display: flex;
  flex-direction: column;
  border-left: 4px solid #FBBF01;
  background: #fff;
}

.mns-news-featured .mns-latestnews-date {
  display: block;
  font-family: 'Poppins', 'Helvetica Neue', Arial, sans-serif !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: normal !important;
  text-transform: uppercase !important;
  color: #aaa !important;
  margin-bottom: 10px;
}

.mns-news-featured .mns-latestnews-title {
  font-family: 'Poppins', 'Helvetica Neue', Arial, sans-serif !important;
  font-size: 26px;
  font-weight: 800;
  line-height: 1.2;
  margin: 0 0 12px;
}

.mns-news-featured .mns-latestnews-title a {
  color: #2F34A6 !important;
  text-decoration: none !important;
}

.mns-news-featured .mns-latestnews-title a:hover {
  color: #FBBF01 !important;
}

.mns-news-featured .mns-latestnews-excerpt {
  font-family: 'Poppins', 'Helvetica Neue', Arial, sans-serif !important;
  font-size: 14px !important;
  letter-spacing: normal !important;
  color: #4a5568 !important;
  line-height: 1.7 !important;
  flex: 1;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  margin: 0 !important;
}

.mns-news-featured .mns-latestnews-readmore {
  display: inline-flex !important;
  align-items: center;
  gap: 6px;
  margin-top: 20px !important;
  padding: 9px 22px !important;
  background: #2F34A6 !important;
  color: #fff !important;
  font-family: 'Poppins', 'Helvetica Neue', Arial, sans-serif !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: normal !important;
  border-radius: 6px !important;
  text-decoration: none !important;
  align-self: flex-start;
  transition: background 0.2s !important;
  border: none !important;
}

.mns-news-featured .mns-latestnews-readmore:hover {
  background: #FBBF01 !important;
  color: #2F34A6 !important;
}

/* ── Mini news grid (items 2-4) ── */
.mns-news-minigrid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  /* Wider gap between rows than between columns, so the two rows of cards
     read as separate bands rather than one dense block. */
  column-gap: 14px;
  row-gap: 40px;
}

.mns-news-mini .mns-latestnews-card {
  display: flex;
  flex-direction: column;
  background: #fff;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 2px 12px rgba(47,52,166,0.07);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
  height: 100%;
  border-top: 3px solid #2F34A6;
}

.mns-news-mini .mns-latestnews-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 30px rgba(47,52,166,0.13);
  border-top-color: #FBBF01;
}

/* No fixed height here: a locked height forces a choice between cropping
   the photo (object-fit: cover) or letterboxing it (contain). Letting the
   area take the image's natural height means every photo fills the card
   width edge-to-edge with none of its content cut off. */
.mns-news-mini .mns-latestnews-img-link {
  display: block;
  overflow: hidden;
  flex-shrink: 0;
  background: #f0f4f9;
}

.mns-news-mini .mns-latestnews-img-link img {
  width: 100%;
  height: auto;
  max-height: 135px;
  object-fit: cover;
  object-position: center;
  display: block;
  transition: transform 0.35s ease;
}

.mns-news-mini .mns-latestnews-img-link:hover img {
  transform: scale(1.06);
}

.mns-news-mini .mns-latestnews-card-body {
  padding: 8px 12px 10px;
  flex: 1;
  display: flex;
  flex-direction: column;
}

.mns-news-mini .mns-latestnews-date {
  display: block;
  font-family: 'Poppins', 'Helvetica Neue', Arial, sans-serif !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: normal !important;
  text-transform: uppercase !important;
  color: #aaa !important;
  margin-bottom: 3px;
}

.mns-news-mini .mns-latestnews-title {
  font-family: 'Poppins', 'Helvetica Neue', Arial, sans-serif !important;
  font-size: 13.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: -0.2px;
  color: #2F34A6;
  line-height: 1.3;
  margin: 0 0 1px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  display: block;
  width: 100%;
  min-width: 0;
}

.mns-news-mini .mns-latestnews-title a {
  color: #2F34A6 !important;
  text-decoration: none !important;
}

.mns-news-mini .mns-latestnews-title a:hover {
  color: #FBBF01 !important;
}

.mns-news-mini .mns-latestnews-excerpt {
  display: -webkit-box !important;
  font-family: 'Poppins', 'Helvetica Neue', Arial, sans-serif !important;
  font-size: 13.5px !important;
  font-weight: 400 !important;
  letter-spacing: -0.3px !important;
  color: #111111 !important;
  line-height: 1.5 !important;
  margin: 0 0 4px !important;
  overflow: hidden;
  /* Three lines of preview, then the ellipsis. min-height reserves exactly
     those three lines (13.5px x 1.5 line-height) so cards with a short
     excerpt still line up with the rest. */
  min-height: 61px;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  flex: 1;
}

/* The excerpt HTML has a nested <p> inside .mns-latestnews-excerpt (from the
   body field's own markup), and a shared "kill link coloring" rule
   (.mns-latestnews-excerpt *) forces that inner text to #111111 !important
   regardless of the outer color set above - override it back to navy here
   with matching specificity. */
.mns-news-mini .mns-latestnews-excerpt * {
  color: #111111 !important;
}

.mns-news-mini .mns-latestnews-readmore {
  display: inline-flex !important;
  align-items: center;
  gap: 4px;
  font-family: 'Poppins', 'Helvetica Neue', Arial, sans-serif !important;
  font-size: 10.5px !important;
  font-weight: 700 !important;
  color: #2F34A6 !important;
  text-decoration: none !important;
  text-transform: uppercase !important;
  letter-spacing: normal !important;
  margin-top: 4px !important;
  padding: 5px 0 0 !important;
  border-top: 1px solid #f0f4f9 !important;
  background: none !important;
  border-radius: 0 !important;
  border-left: none !important;
  border-right: none !important;
  border-bottom: none !important;
  transition: color 0.2s !important;
}

.mns-news-mini .mns-latestnews-readmore::after {
  content: '›';
  font-size: 14px;
}

.mns-news-mini .mns-latestnews-readmore:hover {
  color: #FBBF01 !important;
  background: none !important;
}

/* ── Responsive ── */
@media (max-width: 1100px) {
  .mns-news-outer {
    grid-template-columns: 190px 1fr 190px;
    gap: 20px;
  }
}

@media (max-width: 900px) {
  .mns-news-outer {
    grid-template-columns: 1fr;
  }
  .mns-nbanner {
    position: static;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
  }
  .mns-news-featured .mns-latestnews-card {
    flex-direction: column;
    min-height: unset;
  }
  .mns-news-featured .mns-latestnews-img-link {
    flex: 0 0 200px;
    height: 200px;
  }
  .mns-news-minigrid {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 576px) {
  .mns-news-minigrid {
    grid-template-columns: 1fr;
  }
  .mns-nbanner {
    grid-template-columns: 1fr;
  }
}

/* ============================================================
   TENDERS PAGE
   ============================================================ */

/* Hero banner — matches division page style */
/* Listing-page banner — matches the division pages' .mns-page-hero:
   navy band with a soft gradient wash, breadcrumb, large uppercase
   title and the gold rule beneath. */
/* Top padding clears the header: on scroll the theme adds .sticky and the
   header becomes position:fixed (custom1.css), overlaying the top of the
   page. With only 44px of padding the breadcrumb and title ended up behind
   it and just the gold bar showed. 150px matches .mns-page-hero, which
   exists for the same reason. */
.mns-tenders-hero {
  background: #2F34A6;
  padding: 40px 0 48px;
  position: relative;
  overflow: hidden;
}
.mns-tenders-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 90% 50%, rgba(251,191,1,0.08) 0%, transparent 60%),
    radial-gradient(circle at 10% 20%, rgba(255,255,255,0.04) 0%, transparent 50%);
  pointer-events: none;
}
.mns-tenders-hero-inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
/* Breadcrumb above the title, as on the division pages */
.mns-tenders-breadcrumb {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: 'Poppins', 'Helvetica Neue', Arial, sans-serif;
  font-size: 13px;
  color: rgba(255,255,255,0.6);
  margin-bottom: 16px;
  letter-spacing: 0.3px;
}
.mns-tenders-breadcrumb a {
  color: rgba(255,255,255,0.75);
  text-decoration: none;
}
.mns-tenders-breadcrumb a:hover { color: #FBBF01; }
.mns-tenders-title {
  font-family: 'Barlow Condensed', sans-serif !important;
  font-size: clamp(30px, 4vw, 46px) !important;
  font-weight: 800 !important;
  color: #ffffff !important;
  text-transform: uppercase !important;
  letter-spacing: 1.5px !important;
  margin: 0 0 18px !important;
  line-height: 1.1 !important;
}
.mns-tenders-bar {
  width: 64px;
  height: 4px;
  background: #FBBF01;
  border-radius: 2px;
  margin-top: 0;
}

@media (max-width: 767px) {
  .mns-tenders-hero { padding: 70px 0 44px; }
  .mns-tenders-breadcrumb { font-size: 12px; margin-bottom: 12px; }
}

/* Section wrapper */
.mns-tenders-section {
  background: #f5f7fa;
  padding: 64px 0 80px;
}

/* Grid */
.mns-tenders-grid {
  display: flex;
  flex-direction: column;
  gap: 20px;
  max-width: 820px;
  margin: 0 auto;
}

/* Card */
.mns-tender-card {
  background: #ffffff;
  border-radius: 10px;
  border-left: 4px solid #2F34A6;
  box-shadow: -3px 0 10px rgba(47,52,166,0.12), 0 2px 16px rgba(47,52,166,0.06);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 24px 28px;
  gap: 20px;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-left-color 0.2s ease;
}
.mns-tender-card:hover {
  transform: translateY(-3px);
  box-shadow: -4px 0 14px rgba(47,52,166,0.22), 0 8px 28px rgba(47,52,166,0.1);
  border-left-color: #FBBF01;
}

/* Card body */
.mns-tender-card-body {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  flex: 1;
}
.mns-tender-icon {
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  background: #f0f4f9;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.mns-tender-content {
  flex: 1;
}
.mns-tender-title {
  font-family: 'Barlow Condensed', sans-serif !important;
  font-size: 20px !important;
  font-weight: 700 !important;
  color: #2F34A6 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.3px !important;
  margin: 0 0 8px !important;
  line-height: 1.25 !important;
}
.mns-tender-title a {
  color: #2F34A6 !important;
  text-decoration: none !important;
}
.mns-tender-title a:hover {
  color: #FBBF01 !important;
}
.mns-tender-date {
  display: flex;
  align-items: center;
  gap: 5px;
  font-family: 'Poppins', 'Helvetica Neue', Arial, sans-serif;
  font-size: 12px;
  color: #111111;
  font-weight: 600;
}
/* Icon stays gold; only the date text is black */
.mns-tender-date svg { flex-shrink: 0; stroke: #FBBF01; }

/* Action button(s) */
.mns-tender-action {
  flex-shrink: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.mns-tender-action a,
.mns-tender-action .file--application-pdf a,
.mns-tender-action .field--name-field-tenders-pdf a {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  background: #2F34A6 !important;
  color: #ffffff !important;
  font-family: 'Open Sans', sans-serif !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  padding: 10px 20px !important;
  border-radius: 6px !important;
  text-decoration: none !important;
  white-space: nowrap !important;
  transition: background 0.2s !important;
}
.mns-tender-action a:hover,
.mns-tender-action .file--application-pdf a:hover,
.mns-tender-action .field--name-field-tenders-pdf a:hover {
  background: #FBBF01 !important;
  color: #2F34A6 !important;
}

/* Empty state */
.mns-tenders-empty {
  text-align: center;
  color: #718096;
  font-size: 15px;
  padding: 48px 0;
}

/* Pager */
.mns-tenders-pager { margin-top: 40px; text-align: center; }
.mns-tenders-pager .pager__item a {
  color: #2F34A6;
  font-family: 'Open Sans', sans-serif;
  font-weight: 600;
  padding: 6px 14px;
  border: 1.5px solid #2F34A6;
  border-radius: 4px;
  text-decoration: none;
  transition: background 0.2s;
}
.mns-tenders-pager .pager__item a:hover,
.mns-tenders-pager .pager__item.is-active a {
  background: #2F34A6;
  color: #fff;
}

/* Responsive */
@media (max-width: 640px) {
  .mns-tender-card {
    flex-direction: column;
    align-items: flex-start;
  }
  .mns-tender-action { width: 100%; }
  .mns-tender-action a { width: 100% !important; justify-content: center !important; }
}

/* Hide the old default Drupal page title block on tenders view page */
.path--tenders .page-title,
.view-tenders .view-header h1 { display: none !important; }

/* ============================================================
   NOTICES PAGE (node 184) — mirrors tenders page styling
   ============================================================ */

/* Hide the generic page hero on notices — our custom hero handles it */
.page-node-184 .mns-page-hero { display: none !important; }

/* Strip the legal-notes wrapper padding/container so our hero goes full-width */
.page-node-184 .legal-notes.home-page {
  background: transparent !important;
  padding: 0 !important;
}
.page-node-184 .legal-notes.home-page > .container {
  max-width: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
  width: 100% !important;
}
.page-node-184 .legal-notes.home-page .content-body {
  max-width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Hero — identical to .mns-tenders-hero */
.mns-notices-hero {
  background: #2F34A6;
  padding: 36px 0 32px;
}
.mns-notices-hero-inner {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.mns-notices-title {
  font-family: 'Barlow Condensed', sans-serif !important;
  font-size: clamp(26px, 3.5vw, 38px) !important;
  font-weight: 800 !important;
  color: #ffffff !important;
  text-transform: uppercase !important;
  letter-spacing: 1px !important;
  margin: 0 0 12px !important;
  line-height: 1.1 !important;
}
.mns-notices-bar {
  width: 56px;
  height: 4px;
  background: #FBBF01;
  border-radius: 2px;
  margin-top: 2px;
}

/* Section wrapper — identical to .mns-tenders-section */
.mns-notices-section {
  background: #f5f7fa;
  padding: 48px 0 80px;
}

/* Filter tabs */
.mns-notices-filter {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 36px;
}
.mns-nf-btn {
  background: #fff;
  color: #2F34A6;
  border: 1.5px solid #2F34A6;
  border-radius: 6px;
  padding: 9px 20px;
  font-family: 'Open Sans', sans-serif;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s, color 0.2s;
}
.mns-nf-btn:hover,
.mns-nf-btn.active {
  background: #2F34A6;
  color: #fff;
}

/* Grid — identical to .mns-tenders-grid */
.mns-notices-grid {
  display: flex;
  flex-direction: column;
  gap: 20px;
  max-width: 820px;
  margin: 0 auto;
}

/* Badge + ref meta row above each card title */
.mns-notice-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 6px;
  flex-wrap: wrap;
}
.mns-notice-badge {
  font-family: 'Open Sans', sans-serif;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  padding: 3px 10px;
  border-radius: 20px;
  color: #fff;
}
.mns-notice-badge--public { background: #2F34A6; }
.mns-notice-badge--tender { background: #FBBF01; color: #2F34A6; }
.mns-notice-badge--legal  { background: #1a5c2a; }
.mns-notice-ref {
  font-family: 'Open Sans', sans-serif;
  font-size: 11px;
  color: #8a9bb5;
  font-weight: 500;
}

/* Responsive */
@media (max-width: 640px) {
  .mns-notices-filter { gap: 8px; }
  .mns-nf-btn { padding: 7px 14px; font-size: 12px; }
}

/* ============================================================
   GLOBAL PARAGRAPH FONT — Open Sans for all body text
   ============================================================ */
p {
  font-family: 'Open Sans', sans-serif !important;
}

/* ============================================================
   GLOBAL H2 + H3 FONT — Arial Black across all headings
   ============================================================ */
:root h2 {
  font-family: 'Arial Black', 'Helvetica Neue', Arial, sans-serif !important;
  font-weight: 900 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.3px !important;
  text-shadow: 0 1px 1px rgba(0,0,0,0.15) !important;
}

:root h3 {
  font-family: 'Arial Black', 'Helvetica Neue', Arial, sans-serif !important;
  font-weight: 900 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.3px !important;
  text-shadow: 0 1px 1px rgba(0,0,0,0.15) !important;
}

/* Override style.css Barlow Condensed (specificity 0,2,1) — same specificity, loads later = wins */
.home-page .sub-title-center h2,
.home-page .home3-title-center h2,
.home-page .home3-title h2,
.home-page .home2-title-center h2 {
  font-family: 'Barlow Condensed', sans-serif !important;
}

/* Latest News section header — centered */
.home3-blog .mns-news-title {
  text-align: center !important;
  width: 100% !important;
  display: block !important;
}

/* ============================================================
   GLOBAL PILL LABEL — all small section headers site-wide
   Overrides style.css semi-transparent/large-font version
   ============================================================ */
.home-page .sub-title-center > span,
.home-page .home3-title-center > span,
.home-page .home2-title-center > span,
.sub-title-center > span,
.home3-title-center > span,
.home2-title-center > span {
  display: inline-block !important;
  border: 1.5px solid #FBBF01 !important;
  border-radius: 50px !important;
  padding: 5px 18px !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 2.5px !important;
  text-transform: uppercase !important;
  color: #FBBF01 !important;
  background: transparent !important;
  margin-top: 8px !important;
  margin-bottom: 14px !important;
  line-height: 1 !important;
}

/* ================================================================
   Blog Article Page — modern layout
   ================================================================ */

/* Hero tweaks for blog (title can be long — allow wrapping) */
.mns-blog-hero .mns-page-hero-title {
  font-size: 38px;
  text-transform: none;
  letter-spacing: 0.5px;
  max-width: 820px;
  line-height: 1.15;
  margin-bottom: 16px;
}

/* Date + author — hidden */
.mns-blog-hero-meta {
  display: none;
}

.mns-blog-meta-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: 'Open Sans', sans-serif;
  font-size: 13px;
  font-weight: 500;
  color: rgba(255,255,255,0.75);
  letter-spacing: 0.2px;
}

.mns-blog-meta-chip svg {
  opacity: 0.7;
  flex-shrink: 0;
}

/* Article wrapper */
.mns-blog-article-section {
  background: #fff;
  padding: 48px 0 72px;
}

.mns-blog-article-inner {
  max-width: 860px;
  margin: 0 auto;
  background: transparent;
  border-radius: 0;
  box-shadow: none;
  overflow: visible;
}

/* Featured image */
.mns-blog-feat-img {
  width: 100%;
  line-height: 0;
}

.mns-blog-feat-img img {
  width: 100%;
  height: auto;
  display: block;
  margin-bottom: 36px;
}

/* Article body */
.mns-blog-content {
  padding: 0;
  font-family: 'Poppins', 'Helvetica Neue', Arial, sans-serif;
  font-size: 17px;
  font-weight: 400;
  line-height: 1.85;
  color: #111 !important;
}

/* All text elements inside body = black */
.mns-blog-content p,
.mns-blog-content li,
.mns-blog-content td,
.mns-blog-content blockquote {
  color: #111 !important;
  font-family: 'Poppins', 'Helvetica Neue', Arial, sans-serif;
  font-size: 17px;
  font-weight: 400;
  line-height: 1.85;
}

/* Tightened: much of this content was authored with empty <p>&nbsp;</p>
   spacer paragraphs between every line, which doubled the gaps. CSS can't
   select those (they contain a non-breaking space, so :empty won't match),
   so the per-paragraph margin is kept small to keep the rhythm readable. */
.mns-blog-content p {
  margin-bottom: 0.7em;
}

/* Headings inside article. font-family needs !important: the universal
   `.mns-blog-content *` Poppins rule further down is !important, and an
   !important declaration beats a plain one regardless of specificity —
   without this the headings would pick up Poppins along with the body. */
.mns-blog-content h1,
.mns-blog-content h2,
.mns-blog-content h3,
.mns-blog-content h4,
.mns-blog-content h5,
.mns-blog-content h6 {
  font-family: 'Barlow Condensed', sans-serif !important;
  color: #2F34A6 !important;
  font-weight: 700;
  letter-spacing: 0.5px;
  margin: 1.6em 0 0.5em;
  line-height: 1.25;
}

.mns-blog-content h2 { font-size: 28px; }
.mns-blog-content h3 { font-size: 23px; }
.mns-blog-content h4 { font-size: 19px; }

/* Links */
.mns-blog-content a {
  color: #2F34A6;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.mns-blog-content a:hover {
  color: #FBBF01;
}

/* Images inside body */
.mns-blog-content img {
  max-width: 100%;
  height: auto;
  border-radius: 4px;
  margin: 12px 0;
}

/* Blockquotes */
.mns-blog-content blockquote {
  border-left: 4px solid #FBBF01;
  background: #f8f9fc;
  margin: 1.5em 0;
  padding: 16px 24px;
  border-radius: 0 4px 4px 0;
  font-style: italic;
  color: #333 !important;
}

/* Lists */
.mns-blog-content ul,
.mns-blog-content ol {
  padding-left: 1.6em;
  margin-bottom: 1.4em;
}

.mns-blog-content ul li,
.mns-blog-content ol li {
  margin-bottom: 0.5em;
}

/* Tables */
.mns-blog-content table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 1.4em;
  font-size: 15px;
}

.mns-blog-content th {
  background: #2F34A6;
  color: #fff;
  padding: 10px 14px;
  font-weight: 600;
  text-align: left;
  font-family: 'Poppins', 'Helvetica Neue', Arial, sans-serif;
}

.mns-blog-content td {
  padding: 9px 14px;
  border-bottom: 1px solid #e8edf5;
}

.mns-blog-content tr:nth-child(even) td {
  background: #f8f9fc;
}

/* Responsive */
@media (max-width: 768px) {
  .mns-blog-hero .mns-page-hero-title {
    font-size: 26px;
  }
  .mns-blog-article-section {
    padding: 24px 0 48px;
  }
  .mns-blog-content {
    font-size: 16px;
  }
  .mns-blog-content p,
  .mns-blog-content li {
    font-size: 16px;
  }
}

/* ================================================================
   Legal Notes paragraph — consistent body font (division pages,
   Privacy Policy, Terms & Conditions, and all page-type nodes)
   ================================================================ */

.legal-notes.home-page {
  background: #fff;
  padding: 56px 0 72px;
}

.legal-notes.home-page .content-body {
  max-width: 1140px;
  margin: 0 auto;
}

.legal-notes.home-page .content-body,
.legal-notes.home-page .content-body p,
.legal-notes.home-page .content-body li,
.legal-notes.home-page .content-body td,
.legal-notes.home-page .content-body span {
  font-family: 'Poppins', 'Helvetica Neue', Arial, sans-serif !important;
  font-size: 16px !important;
  font-weight: 400 !important;
  color: #111111 !important;
  line-height: 1.75 !important;
}

.legal-notes.home-page .content-body p {
  margin-bottom: 1.3em !important;
}

.legal-notes.home-page .content-body h1,
.legal-notes.home-page .content-body h2,
.legal-notes.home-page .content-body h3,
.legal-notes.home-page .content-body h4,
.legal-notes.home-page .content-body h5 {
  font-family: 'Barlow Condensed', sans-serif !important;
  color: #2F34A6 !important;
  font-weight: 700 !important;
  letter-spacing: 0.3px !important;
  margin: 1.5em 0 0.5em !important;
}

.legal-notes.home-page .content-body h2 { font-size: 28px !important; }
.legal-notes.home-page .content-body h3 { font-size: 22px !important; }
.legal-notes.home-page .content-body h4 { font-size: 18px !important; }

.legal-notes.home-page .content-body ul,
.legal-notes.home-page .content-body ol {
  padding-left: 1.6em;
  margin-bottom: 1.3em;
}

.legal-notes.home-page .content-body ul li::marker {
  color: #FBBF01;
}

.legal-notes.home-page .content-body a {
  color: #2F34A6 !important;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ================================================================
   Blog image border-radius
   ================================================================ */

/* Individual blog article page — featured image */
.mns-blog-feat-img img {
  border-radius: 8px !important;
}

/* Blog listing card thumbnails */
.blog-thumbnail,
.blog-thumbnail a,
.blog-thumbnail .img-wrapper {
  border-radius: 8px;
  overflow: hidden;
}

.blog-thumbnail img {
  border-radius: 8px !important;
}

/* ================================================================
   Contact Page — MNS colors, centered layout
   ================================================================ */

.mns-contact-section {
  background: #f4f7fb;
  padding: 60px 0 0;
}

/* ── Style 2: three centered info cards ── */
.mns-contact-cards-row {
  display: flex;
  gap: 24px;
  justify-content: center;
  margin-bottom: 48px;
  flex-wrap: wrap;
}

.mns-contact-card {
  flex: 1 1 240px;
  max-width: 300px;
  background: #fff;
  border: 1px solid #E7E9F5;
  border-radius: 12px;
  padding: 36px 28px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  box-shadow: 0 4px 20px rgba(47,52,166,0.1);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.mns-contact-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 12px 36px rgba(47,52,166,0.22);
}

.mns-contact-card-icon {
  width: 60px;
  height: 60px;
  background: rgba(251,191,1,0.15);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #FBBF01;
  flex-shrink: 0;
}

.mns-contact-card h3 {
  font-family: 'Barlow Condensed', sans-serif !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  letter-spacing: 1.5px !important;
  text-transform: uppercase !important;
  color: #2F34A6 !important;
  margin: 0 !important;
}

.mns-contact-card a,
.mns-contact-card p,
.mns-contact-card span,
.mns-contact-card > *:not(.mns-contact-card-icon) * {
  color: #333333 !important;
  text-decoration: none !important;
}

.mns-contact-card a,
.mns-contact-card p {
  font-family: 'Poppins', sans-serif !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  margin: 0 !important;
  line-height: 1.6 !important;
}

.mns-contact-card a:hover {
  color: #FBBF01 !important;
}

/* ── Style 2: form (centered) ── */
.mns-contact-form-centered {
  max-width: 680px;
  margin: 0 auto 48px;
  background: #fff;
  border-radius: 12px;
  padding: 40px 48px;
  box-shadow: 0 2px 20px rgba(47,52,166,0.08);
}

/* ── Style 1: info panel (left col) ── */
.mns-contact-row {
  align-items: stretch;
  gap: 0;
}

.mns-contact-info-panel {
  background: #2F34A6;
  border-radius: 12px 0 0 12px;
  padding: 48px 40px;
  height: 100%;
}

.mns-contact-heading {
  font-family: 'Barlow Condensed', sans-serif !important;
  font-size: 32px !important;
  font-weight: 800 !important;
  color: #fff !important;
  margin: 0 0 12px !important;
}

.mns-contact-intro {
  font-family: 'Open Sans', sans-serif;
  font-size: 15px;
  color: rgba(255,255,255,0.75);
  line-height: 1.7;
  margin-bottom: 32px;
}

.mns-contact-list {
  display: flex;
  flex-direction: column;
  gap: 24px;
  margin: 0;
  padding: 0;
}

.mns-contact-item {
  display: flex;
  gap: 16px;
  align-items: flex-start;
}

.mns-contact-icon {
  width: 44px;
  height: 44px;
  background: rgba(251,191,1,0.15);
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #FBBF01;
  flex-shrink: 0;
}

.mns-contact-item-body {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.mns-contact-label {
  font-family: 'Open Sans', sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: #FBBF01;
}

.mns-contact-item-body a,
.mns-contact-item-body span {
  font-family: 'Open Sans', sans-serif;
  font-size: 15px;
  color: rgba(255,255,255,0.85);
  text-decoration: none;
  line-height: 1.55;
}

.mns-contact-item-body a:hover {
  color: #FBBF01;
}

/* ================================================================
   Departments & Agencies — blog post card grid
   ================================================================ */
.mns-agencies-section {
  padding-bottom: 0 !important;
}

.mns-agencies-posts-wrap {
  background: #f5f7fa;
  padding: 48px 0 56px;
  margin-top: 32px;
}

.mns-agencies-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}

@media (max-width: 991px) {
  .mns-agencies-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 575px) {
  .mns-agencies-grid { grid-template-columns: 1fr; }
}

.mns-agency-post-card {
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 2px 12px rgba(47,52,166,0.08);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.mns-agency-post-card:hover {
  box-shadow: 0 6px 24px rgba(47,52,166,0.16);
  transform: translateY(-3px);
}

.mns-agency-post-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  padding: 20px;
  height: 190px;
  border-bottom: 1px solid #eef0f4;
}

.mns-agency-post-logo img {
  max-height: 150px;
  max-width: 100%;
  width: auto;
  object-fit: contain;
}

.mns-agency-post-logo--text {
  background: #2F34A6;
}

.mns-agency-post-logo--text span {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 32px;
  font-weight: 700;
  color: #FBBF01;
  letter-spacing: 2px;
}

.mns-agency-logo-placeholder {
  width: 100%;
  height: 80px;
  background: #2F34A6;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 28px;
  font-weight: 700;
  color: #FBBF01;
  letter-spacing: 2px;
  border-radius: 8px;
}

.mns-agency-post-body {
  padding: 20px 20px 24px;
  display: flex;
  flex-direction: column;
  flex: 1;
}

.mns-agency-post-body h4 {
  font-family: 'Poppins', 'Helvetica Neue', Arial, sans-serif;
  font-size: 15px;
  font-weight: 600;
  color: #111111;
  line-height: 1.4;
  margin: 0 0 16px;
  flex: 1;
}

.mns-agency-post-body h4 a {
  color: #111111;
  text-decoration: none;
}

.mns-agency-post-body h4 a:hover {
  color: #2F34A6;
}

.mns-agency-post-btn {
  display: inline-block;
  padding: 8px 20px;
  background: #2F34A6;
  color: #fff !important;
  font-family: 'Poppins', 'Helvetica Neue', Arial, sans-serif;
  font-size: 13px;
  font-weight: 600;
  border-radius: 4px;
  text-decoration: none !important;
  align-self: flex-start;
  transition: background 0.2s ease;
}

.mns-agency-post-btn:hover {
  background: #FBBF01;
  color: #2F34A6 !important;
}

/* ── Style 1: form panel (right col) ── */
.mns-contact-form-panel {
  background: #fff;
  border-radius: 0 12px 12px 0;
  padding: 48px 40px;
  height: 100%;
}

.mns-contact-form-title {
  font-family: 'Barlow Condensed', sans-serif !important;
  font-size: 28px !important;
  font-weight: 800 !important;
  color: #2F34A6 !important;
  margin: 0 0 24px !important;
}

/* ── Subject dropdown arrow ── */
/* The webform template outputs a raw arrow SVG right after the Subject
   select; without these rules it renders at native size (25x45px) and
   falls onto its own line instead of docking into the select. */
.mns-contact-form-panel .form-select,
.mns-contact-form-centered .form-select {
  background-image: unset;
}

.mns-contact-form-panel .col-md-12,
.mns-contact-form-centered .col-md-12 {
  position: relative;
}

.mns-contact-form-panel svg,
.mns-contact-form-centered svg {
  width: 8px;
  height: 14px;
  position: absolute;
  top: 50%;
  right: 40px;
  transform: translateY(-50%) rotate(90deg);
  pointer-events: none;
}

.mns-contact-form-panel svg path,
.mns-contact-form-centered svg path {
  fill: var(--bs-paragraph-text-color);
}

/* ── Modern form fields (Style 2: centered "Feel Free to Ask") ── */
.mns-contact-form-centered .form-control {
  border: 1.5px solid #E3E6F3;
  border-radius: 10px;
  padding: 14px 18px;
  font-family: 'Open Sans', sans-serif;
  font-size: 15px;
  color: #333333;
  background: #FAFBFF;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

.mns-contact-form-centered .form-select {
  border: 1.5px solid #E3E6F3;
  border-radius: 10px;
  padding: 14px 18px;
  font-family: 'Open Sans', sans-serif;
  font-size: 15px;
  color: #333333;
  background: #FAFBFF;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

.mns-contact-form-centered .form-control:focus,
.mns-contact-form-centered .form-select:focus {
  border-color: #2F34A6;
  background: #fff;
  box-shadow: 0 0 0 4px rgba(47,52,166,0.12);
  outline: none;
}

.mns-contact-form-centered .js-form-item {
  margin-bottom: 18px !important;
}

.mns-contact-form-centered .webform-button--submit {
  border-radius: 999px;
  padding: 14px 36px;
  font-family: 'Open Sans', sans-serif;
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 0.3px;
  border: none;
  box-shadow: 0 6px 20px rgba(251,191,1,0.35);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.mns-contact-form-centered .webform-button--submit:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 28px rgba(251,191,1,0.45);
}

/* ── Map ── */
.mns-contact-map {
  width: 100%;
  margin-top: 48px;
  line-height: 0;
}

.mns-contact-map iframe {
  width: 100% !important;
  height: 400px !important;
  display: block;
  border: none;
}

/* Responsive */
@media (max-width: 767px) {
  .mns-contact-cards-row { gap: 16px; }
  .mns-contact-card { max-width: 100%; }
  .mns-contact-info-panel { border-radius: 12px 12px 0 0; }
  .mns-contact-form-panel { border-radius: 0 0 12px 12px; }
  .mns-contact-form-centered { padding: 28px 20px; }
}

/* ================================================================
   Font consistency — all body/excerpt text matches mission/vision
   DM Sans · 15px · weight 400 · #111111 · line-height 1.75
   (This file loads last so !important here wins everywhere)
   ================================================================ */

/* ── Latest News: date labels ──
   Force override — some underlying rule makes dates orange */
.mns-latestnews-date,
.mns-latestnews-date *,
.mns-latestnews-date span,
.mns-latestnews-date time {
  font-family: 'Open Sans', sans-serif !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  color: #888 !important;
  text-transform: uppercase !important;
  letter-spacing: 1px !important;
}

/* ── Latest News: excerpts ── */
.mns-latestnews-featured .mns-latestnews-excerpt,
.mns-latestnews-item .mns-latestnews-excerpt {
  font-family: 'Open Sans', sans-serif !important;
  font-size: 15px !important;
  font-weight: 500 !important;
  letter-spacing: normal !important;
  color: #111111 !important;
  line-height: 1.7 !important;
}

/* Kill any link coloring inside excerpts */
.mns-latestnews-excerpt a,
.mns-latestnews-excerpt * {
  color: #111111 !important;
  font-size: inherit !important;
  text-decoration: none !important;
}

/* ── Initiatives cards: description text ── */
.home3-service .content-block .content-wrapper p,
.home3-service .content-block .content-wrapper p a,
.home3-service .content-wrapper p,
.home3-service .content-wrapper p a {
  font-family: 'Open Sans', sans-serif !important;
  font-size: 15px !important;
  font-weight: 400 !important;
  color: #111111 !important;
  line-height: 1.75 !important;
  text-decoration: none !important;
}

/* ── Priority/campaigns cards: description text ──
   mns-mission.css uses 13.5px + #6b7280 — override both */
.mns-priority-content p,
.mns-priority-content p a,
.mns-priority-card-body p,
.mns-priority-card-body p a {
  font-family: 'Open Sans', sans-serif !important;
  font-size: 15px !important;
  font-weight: 400 !important;
  color: #111111 !important;
  line-height: 1.75 !important;
  text-decoration: none !important;
}

/* ── POTW dark-navy section: body text ──
   Keep white (dark bg) but match font metrics */
.mns-potw-content p,
.mns-potw-content p a {
  font-family: 'Open Sans', sans-serif !important;
  font-size: 15px !important;
  font-weight: 400 !important;
  color: rgba(255,255,255,0.90) !important;
  line-height: 1.75 !important;
}

/* ── POTW overlay info (smaller card variant) ── */
.mns-pg-potw-info p {
  font-family: 'Poppins', 'Helvetica Neue', Arial, sans-serif !important;
  font-size: 14px !important;
  font-weight: 400 !important;
  color: rgba(255,255,255,0.90) !important;
  line-height: 1.7 !important;
}

/* ── General: kill default browser blue-link color in any body text ── */
.mns-latestnews-card-body p a,
.mns-mvv-body p a,
.mns-blog-content p a {
  color: #2F34A6 !important;
}


/* ================================================================
   NOTICES PAGE
   ================================================================ */
.mns-notices-page {
  max-width: 1000px;
  margin: 0 auto;
}

.mns-notices-intro {
  font-family: 'Open Sans', sans-serif;
  font-size: 15px;
  color: #4a5568;
  line-height: 1.7;
  margin-bottom: 28px;
}

/* Filter buttons */
.mns-notices-filter {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 32px;
}

.mns-nf-btn {
  font-family: 'Open Sans', sans-serif;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.4px;
  padding: 8px 20px;
  border: 2px solid #2F34A6;
  border-radius: 4px;
  background: transparent;
  color: #2F34A6;
  cursor: pointer;
  transition: background 0.18s, color 0.18s;
}

.mns-nf-btn:hover,
.mns-nf-btn.active {
  background: #2F34A6;
  color: #ffffff;
}

/* Notice card list */
.mns-notices-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.mns-notice-card {
  display: flex;
  align-items: flex-start;
  gap: 20px;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-left: 4px solid #2F34A6;
  border-radius: 0 8px 8px 0;
  padding: 22px 24px;
  transition: box-shadow 0.2s, border-left-color 0.2s;
}

.mns-notice-card:hover {
  box-shadow: 0 4px 20px rgba(47,52,166,0.10);
  border-left-color: #FBBF01;
}

.mns-notice-icon {
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  background: #eef3fb;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.mns-notice-body {
  flex: 1;
  min-width: 0;
}

.mns-notice-meta {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 8px;
  flex-wrap: wrap;
}

.mns-notice-badge {
  font-family: 'Open Sans', sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  padding: 3px 10px;
  border-radius: 3px;
}

.mns-notice-badge--public {
  background: #e6f0ff;
  color: #2F34A6;
}

.mns-notice-badge--tender {
  background: #fff8e1;
  color: #8a6200;
}

.mns-notice-badge--legal {
  background: #f0fdf4;
  color: #166534;
}

.mns-notice-ref {
  font-family: 'Open Sans', sans-serif;
  font-size: 12px;
  color: #9aa4b4;
  letter-spacing: 0.3px;
}

.mns-notice-title {
  font-family: 'Barlow Condensed', sans-serif !important;
  font-size: 19px !important;
  font-weight: 700 !important;
  color: #1a202c !important;
  margin: 0 0 6px !important;
  line-height: 1.3 !important;
}

.mns-notice-summary {
  font-family: 'Open Sans', sans-serif;
  font-size: 14px;
  color: #4a5568;
  line-height: 1.65;
  margin: 0 0 14px;
}

.mns-notice-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
}

.mns-notice-date {
  font-family: 'Open Sans', sans-serif;
  font-size: 12.5px;
  color: #718096;
  display: flex;
  align-items: center;
  gap: 5px;
}

.mns-notice-dl {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: 'Open Sans', sans-serif;
  font-size: 13px;
  font-weight: 600;
  color: #ffffff !important;
  background: #2F34A6;
  padding: 7px 16px;
  border-radius: 4px;
  text-decoration: none !important;
  transition: background 0.18s;
  white-space: nowrap;
}

.mns-notice-dl:hover {
  background: #FBBF01 !important;
  color: #2F34A6 !important;
}

.mns-notice-dl svg {
  flex-shrink: 0;
}

@media (max-width: 576px) {
  .mns-notice-card {
    flex-direction: column;
    gap: 14px;
  }
  .mns-notice-icon {
    width: 40px;
    height: 40px;
  }
}

/* ================================================================
   Press Release List page — MNS themed
   ================================================================ */

/* — sticky header clearance on the view page — */
body.path-press-releases main { margin-top: 120px !important; }

.mns-pr-hero {
  background: #2F34A6;
  padding: 36px 0 32px;
  position: relative;
}

.mns-pr-hero-inner {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.mns-pr-title {
  font-family: 'Barlow Condensed', sans-serif !important;
  font-size: clamp(26px, 3.5vw, 38px) !important;
  font-weight: 800 !important;
  color: #ffffff !important;
  text-transform: uppercase !important;
  letter-spacing: 1px !important;
  margin: 0 0 12px !important;
  line-height: 1.1 !important;
}

.mns-pr-bar {
  width: 56px;
  height: 4px;
  background: #FBBF01;
  border-radius: 2px;
  margin-top: 2px;
}

.mns-pr-section {
  background: #f5f7fa;
  padding: 64px 0 80px;
}

.mns-pr-grid {
  display: flex;
  flex-direction: column;
  gap: 20px;
  max-width: 820px;
  margin: 0 auto;
}

.mns-pr-card {
  background: #ffffff;
  border-radius: 10px;
  border-left: 4px solid #2F34A6;
  box-shadow: -3px 0 10px rgba(47,52,166,0.12), 0 2px 16px rgba(47,52,166,0.06);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 24px 28px;
  gap: 20px;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-left-color 0.2s ease;
}

.mns-pr-card:hover {
  transform: translateY(-3px);
  box-shadow: -4px 0 18px rgba(47,52,166,0.18), 0 6px 24px rgba(47,52,166,0.10);
  border-left-color: #FBBF01;
}

.mns-pr-card-body {
  display: flex;
  align-items: flex-start;
  gap: 18px;
  flex: 1;
  min-width: 0;
}

.mns-pr-icon {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  background: rgba(47,52,166,0.07);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.mns-pr-content {
  flex: 1;
  min-width: 0;
}

.mns-pr-card-title {
  font-family: 'Barlow Condensed', sans-serif !important;
  font-size: 20px !important;
  font-weight: 700 !important;
  color: #2F34A6 !important;
  text-transform: uppercase !important;
  margin: 0 0 8px !important;
  line-height: 1.2 !important;
}

.mns-pr-date {
  display: flex;
  align-items: center;
  gap: 5px;
  font-family: 'Poppins', 'Helvetica Neue', Arial, sans-serif;
  font-size: 12px;
  color: #111111;
  font-weight: 600;
}

.mns-pr-action {
  flex-shrink: 0;
}

.mns-pr-action a,
.mns-pr-action .file--application-pdf a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: 'Barlow Condensed', sans-serif !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  letter-spacing: 0.5px !important;
  text-transform: uppercase !important;
  background: #2F34A6 !important;
  color: #ffffff !important;
  border: none !important;
  border-radius: 6px !important;
  padding: 10px 20px !important;
  text-decoration: none !important;
  white-space: nowrap;
  transition: background 0.2s ease, color 0.2s ease;
}

.mns-pr-action a:hover,
.mns-pr-action .file--application-pdf a:hover {
  background: #FBBF01 !important;
  color: #2F34A6 !important;
}

.mns-pr-empty {
  text-align: center;
  color: #666;
  font-family: 'Open Sans', sans-serif;
  font-size: 16px;
  padding: 48px 0;
}

.mns-pr-pager {
  margin-top: 40px;
  display: flex;
  justify-content: center;
}

@media (max-width: 640px) {
  .mns-pr-card {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
  }
  .mns-pr-action {
    width: 100%;
  }
  .mns-pr-action a,
  .mns-pr-action .file--application-pdf a {
    width: 100%;
    justify-content: center;
  }
}

/* ================================================================
   Podcast page — MNS themed
   ================================================================ */

body.path-podcast main { margin-top: 120px !important; }

.mns-podcast-hero {
  background: #2F34A6;
  padding: 36px 0 32px;
}

.mns-podcast-hero-inner {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.mns-podcast-title {
  font-family: 'Barlow Condensed', sans-serif !important;
  font-size: clamp(26px, 3.5vw, 38px) !important;
  font-weight: 800 !important;
  color: #ffffff !important;
  text-transform: uppercase !important;
  letter-spacing: 1px !important;
  margin: 0 0 12px !important;
  line-height: 1.1 !important;
}

.mns-podcast-bar {
  width: 56px;
  height: 4px;
  background: #FBBF01;
  border-radius: 2px;
  margin-top: 2px;
}

.mns-podcast-section {
  background: #f5f7fa;
  padding: 64px 0 80px;
}

.mns-podcast-grid {
  display: flex;
  flex-direction: column;
  gap: 24px;
  max-width: 820px;
  margin: 0 auto;
}

.mns-podcast-card {
  background: #ffffff;
  border-radius: 10px;
  border-left: 4px solid #2F34A6;
  box-shadow: -3px 0 10px rgba(47,52,166,0.12), 0 2px 16px rgba(47,52,166,0.06);
  padding: 24px 28px;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-left-color 0.2s ease;
}

.mns-podcast-card:hover {
  transform: translateY(-3px);
  box-shadow: -4px 0 18px rgba(47,52,166,0.18), 0 6px 24px rgba(47,52,166,0.10);
  border-left-color: #FBBF01;
}

.mns-podcast-card-header {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  margin-bottom: 16px;
}

.mns-podcast-icon {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  background: rgba(47,52,166,0.07);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.mns-podcast-meta {
  flex: 1;
  min-width: 0;
}

.mns-podcast-ep-title {
  font-family: 'Barlow Condensed', sans-serif !important;
  font-size: 20px !important;
  font-weight: 700 !important;
  color: #2F34A6 !important;
  text-transform: uppercase !important;
  margin: 0 0 8px !important;
  line-height: 1.2 !important;
}

.mns-podcast-info-row {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}

.mns-podcast-date {
  display: flex;
  align-items: center;
  gap: 5px;
  font-family: 'Poppins', 'Helvetica Neue', Arial, sans-serif;
  font-size: 12px;
  color: #111111;
  font-weight: 600;
}

.mns-podcast-category {
  font-family: 'Open Sans', sans-serif;
  font-size: 11px;
  font-weight: 700;
  color: #2F34A6;
  background: rgba(47,52,166,0.08);
  padding: 3px 10px;
  border-radius: 20px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.mns-podcast-player {
  border-top: 1px solid rgba(47,52,166,0.08);
  padding-top: 16px;
}

.mns-podcast-player audio {
  width: 100%;
  border-radius: 6px;
}

.mns-podcast-empty {
  text-align: center;
  color: #666;
  font-family: 'Open Sans', sans-serif;
  padding: 48px 0;
}

.mns-podcast-pager {
  margin-top: 40px;
  display: flex;
  justify-content: center;
}

/* ================================================================
   Speeches page — MNS themed
   ================================================================ */

body.path-speeches main { margin-top: 120px !important; }

.mns-speeches-hero {
  background: #2F34A6;
  padding: 36px 0 32px;
}

.mns-speeches-hero-inner {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.mns-speeches-title {
  font-family: 'Barlow Condensed', sans-serif !important;
  font-size: clamp(26px, 3.5vw, 38px) !important;
  font-weight: 800 !important;
  color: #ffffff !important;
  text-transform: uppercase !important;
  letter-spacing: 1px !important;
  margin: 0 0 12px !important;
  line-height: 1.1 !important;
}

.mns-speeches-bar {
  width: 56px;
  height: 4px;
  background: #FBBF01;
  border-radius: 2px;
  margin-top: 2px;
}

.mns-speeches-section {
  background: #f5f7fa;
  padding: 64px 0 80px;
}

.mns-speeches-grid {
  display: flex;
  flex-direction: column;
  gap: 20px;
  max-width: 820px;
  margin: 0 auto;
}

.mns-speech-card {
  background: #ffffff;
  border-radius: 10px;
  border-left: 4px solid #2F34A6;
  box-shadow: -3px 0 10px rgba(47,52,166,0.12), 0 2px 16px rgba(47,52,166,0.06);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 24px 28px;
  gap: 20px;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-left-color 0.2s ease;
}

.mns-speech-card:hover {
  transform: translateY(-3px);
  box-shadow: -4px 0 18px rgba(47,52,166,0.18), 0 6px 24px rgba(47,52,166,0.10);
  border-left-color: #FBBF01;
}

.mns-speech-card-body {
  display: flex;
  align-items: flex-start;
  gap: 18px;
  flex: 1;
  min-width: 0;
}

.mns-speech-icon {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  background: rgba(47,52,166,0.07);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.mns-speech-content {
  flex: 1;
  min-width: 0;
}

.mns-speech-card-title {
  font-family: 'Barlow Condensed', sans-serif !important;
  font-size: 20px !important;
  font-weight: 700 !important;
  color: #2F34A6 !important;
  text-transform: uppercase !important;
  margin: 0 0 8px !important;
  line-height: 1.2 !important;
}

.mns-speech-date {
  display: flex;
  align-items: center;
  gap: 5px;
  font-family: 'Poppins', 'Helvetica Neue', Arial, sans-serif;
  font-size: 12px;
  color: #111111;
  font-weight: 600;
}

.mns-speech-action {
  flex-shrink: 0;
}

.mns-speech-action a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: 'Barlow Condensed', sans-serif !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  letter-spacing: 0.5px !important;
  text-transform: uppercase !important;
  background: #2F34A6 !important;
  color: #ffffff !important;
  border: none !important;
  border-radius: 6px !important;
  padding: 10px 20px !important;
  text-decoration: none !important;
  white-space: nowrap;
  transition: background 0.2s ease, color 0.2s ease;
}

.mns-speech-action a:hover {
  background: #FBBF01 !important;
  color: #2F34A6 !important;
}

.mns-speeches-empty {
  text-align: center;
  color: #666;
  font-family: 'Open Sans', sans-serif;
  padding: 48px 0;
}

.mns-speeches-pager {
  margin-top: 40px;
  display: flex;
  justify-content: center;
}

@media (max-width: 640px) {
  .mns-speech-card {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
  }
  .mns-speech-action {
    width: 100%;
  }
  .mns-speech-action a {
    width: 100%;
    justify-content: center;
  }
}

/* ================================================================
   Articles page (node-180) — hero spacing + modern card redesign
   ================================================================ */

/* Push title lower in the hero */
.page-node-180 .mns-page-hero {
  padding-top: 40px !important;
  padding-bottom: 64px !important;
}

/* ── Section background ──────────────────────────────────────── */
.page-node-180 .home1-event {
  background: #f5f7fa !important;
  padding: 64px 0 80px !important;
}

.page-node-180 .home1-event .home1-event-block {
  max-width: 860px !important;
  margin: 0 auto !important;
}

/* ── Force single-column layout ─────────────────────────────── */
.page-node-180 .home1-event .row {
  flex-direction: column !important;
  gap: 24px !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

.page-node-180 .home1-event .col-md-6 {
  width: 100% !important;
  max-width: 100% !important;
  flex: 0 0 100% !important;
  padding: 0 !important;
}

.page-node-180 .schedule-wrapper {
  display: flex !important;
  flex-direction: column !important;
  gap: 24px !important;
}

/* ── First card (event-wrapper — has image) ─────────────────── */
.page-node-180 .event-wrapper {
  background: #fff !important;
  border-radius: 10px !important;
  border-left: 4px solid #2F34A6 !important;
  box-shadow: -3px 0 10px rgba(47,52,166,0.12), 0 2px 16px rgba(47,52,166,0.06) !important;
  display: flex !important;
  align-items: stretch !important;
  overflow: hidden !important;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-left-color 0.2s ease !important;
}

.page-node-180 .event-wrapper:hover {
  transform: translateY(-3px) !important;
  box-shadow: -4px 0 18px rgba(47,52,166,0.18), 0 6px 24px rgba(47,52,166,0.10) !important;
  border-left-color: #FBBF01 !important;
}

.page-node-180 .event-wrapper .img-wrapper {
  flex-shrink: 0 !important;
  width: 240px !important;
  overflow: hidden !important;
}

.page-node-180 .event-wrapper .img-wrapper a {
  display: block !important;
  height: 100% !important;
}

.page-node-180 .event-wrapper .img-wrapper img {
  width: 100% !important;
  height: 100% !important;
  min-height: 180px !important;
  object-fit: cover !important;
  display: block !important;
}

.page-node-180 .event-wrapper .content-wrapper {
  flex: 1 !important;
  padding: 28px 32px !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  gap: 0 !important;
}

.page-node-180 .event-wrapper .publish {
  font-family: 'Open Sans', sans-serif !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  color: #FBBF01 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.8px !important;
  margin-bottom: 8px !important;
  background: none !important;
  padding: 0 !important;
  display: block !important;
}

.page-node-180 .event-wrapper h4 {
  margin: 0 0 14px !important;
  line-height: 1.2 !important;
}

.page-node-180 .event-wrapper h4 a {
  font-family: 'Barlow Condensed', sans-serif !important;
  font-size: 22px !important;
  font-weight: 700 !important;
  color: #2F34A6 !important;
  text-transform: uppercase !important;
  text-decoration: none !important;
  line-height: 1.2 !important;
}

.page-node-180 .event-wrapper h4 a:hover { color: #FBBF01 !important; }

/* Read Article button via pseudo-element */
.page-node-180 .event-wrapper .content-wrapper::after {
  content: 'Read Article \2192';
  display: inline-block !important;
  font-family: 'Barlow Condensed', sans-serif !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
  color: #fff !important;
  background: #2F34A6 !important;
  padding: 8px 16px !important;
  border-radius: 5px !important;
  align-self: flex-start !important;
  margin-top: 12px !important;
}

/* ── Other cards (content-block — no image) ──────────────────── */
.page-node-180 .content-block {
  background: #fff !important;
  border-radius: 10px !important;
  border-left: 4px solid #2F34A6 !important;
  box-shadow: -3px 0 10px rgba(47,52,166,0.12), 0 2px 16px rgba(47,52,166,0.06) !important;
  padding: 24px 28px !important;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-left-color 0.2s ease !important;
}

.page-node-180 .content-block:hover {
  transform: translateY(-3px) !important;
  box-shadow: -4px 0 18px rgba(47,52,166,0.18), 0 6px 24px rgba(47,52,166,0.10) !important;
  border-left-color: #FBBF01 !important;
}

.page-node-180 .content-block .publish {
  font-family: 'Open Sans', sans-serif !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  color: #FBBF01 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.8px !important;
  margin-bottom: 8px !important;
  background: none !important;
  padding: 0 !important;
}

.page-node-180 .content-block .publish span {
  background: none !important;
  color: inherit !important;
  font-size: inherit !important;
}

.page-node-180 .content-block h4 {
  margin: 0 0 14px !important;
}

.page-node-180 .content-block h4 a {
  font-family: 'Barlow Condensed', sans-serif !important;
  font-size: 22px !important;
  font-weight: 700 !important;
  color: #2F34A6 !important;
  text-transform: uppercase !important;
  text-decoration: none !important;
}

.page-node-180 .content-block h4 a:hover { color: #FBBF01 !important; }

.page-node-180 .content-block .content-wrapper {
  display: flex !important;
  flex-direction: column !important;
}

.page-node-180 .content-block .content-wrapper::after {
  content: 'Read Article \2192';
  display: inline-block !important;
  font-family: 'Barlow Condensed', sans-serif !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
  color: #fff !important;
  background: #2F34A6 !important;
  padding: 8px 16px !important;
  border-radius: 5px !important;
  align-self: flex-start !important;
  margin-top: 4px !important;
  width: max-content !important;
}

/* ── Suppress empty event meta ───────────────────────────────── */
.page-node-180 .time,
.page-node-180 .location { display: none !important; }

.page-node-180 .event-wrapper p,
.page-node-180 .content-block p { display: none !important; }

/* ── Mobile ──────────────────────────────────────────────────── */
@media (max-width: 640px) {
  .page-node-180 .event-wrapper {
    flex-direction: column !important;
  }
  .page-node-180 .event-wrapper .img-wrapper {
    width: 100% !important;
    height: 200px !important;
  }
}

/* ================================================================
   Articles listing (event_listing > block_2) — 3-column cards
   ================================================================ */

/* Section wrapper */
.view-event-listing.view-display-id-block-2 {
  padding: 56px 0 80px;
  background: #f5f7fa;
}

/* Grid spacing */
.mns-article-grid {
  margin-left: -12px !important;
  margin-right: -12px !important;
}

.mns-article-col {
  padding-left: 12px !important;
  padding-right: 12px !important;
  margin-bottom: 24px !important;
}

/* Card */
.mns-article-card {
  background: #fff;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 2px 12px rgba(47,52,166,0.08);
  display: flex;
  flex-direction: column;
  height: 100%;
  transition: transform 0.22s ease, box-shadow 0.22s ease;
  border-top: 3px solid #2F34A6;
}

.mns-article-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 28px rgba(47,52,166,0.16);
}

/* Card image */
.mns-article-card-img {
  overflow: hidden;
  aspect-ratio: 16/10;
  flex-shrink: 0;
}

.mns-article-card-img a {
  display: block;
  height: 100%;
}

.mns-article-card-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.4s ease;
}

.mns-article-card:hover .mns-article-card-img img {
  transform: scale(1.04);
}

/* Card body */
.mns-article-card-body {
  padding: 20px 22px 22px;
  display: flex;
  flex-direction: column;
  flex: 1;
}

/* Date */
.mns-article-date {
  font-family: 'Open Sans', sans-serif !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  color: #FBBF01 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.8px !important;
  margin-bottom: 10px !important;
  display: block !important;
}

/* Title */
.mns-article-title {
  font-family: 'DM Sans', sans-serif !important;
  font-size: 19px !important;
  font-weight: 700 !important;
  line-height: 1.25 !important;
  margin: 0 0 16px !important;
  flex: 1;
}

.mns-article-title a {
  color: #2F34A6 !important;
  text-decoration: none !important;
  text-transform: none !important;
}

.mns-article-title a:hover {
  color: #FBBF01 !important;
}

/* Read Article button */
.mns-article-btn {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  font-family: 'Barlow Condensed', sans-serif !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.4px !important;
  color: #fff !important;
  background: #2F34A6 !important;
  padding: 9px 16px !important;
  border-radius: 6px !important;
  text-decoration: none !important;
  align-self: flex-start !important;
  margin-top: auto !important;
  transition: background 0.18s ease !important;
}

.mns-article-btn:hover {
  background: #FBBF01 !important;
  color: #2F34A6 !important;
}

/* Hero — push title down below sticky nav */
.page-node-9 .mns-page-hero,
.page-node-180 .mns-page-hero {
  padding-top: 40px !important;
  padding-bottom: 64px !important;
}

/* Mobile */
@media (max-width: 767px) {
  .mns-article-grid {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
  .mns-article-col {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
}

/* ================================================================
   Blog content — universal font + colour fix
   ================================================================ */

.mns-blog-content,
.mns-blog-content * {
  font-family: 'Poppins', 'Helvetica Neue', Arial, sans-serif !important;
  color: #1a1a1a !important;
}

.mns-blog-content p,
.mns-blog-content li,
.mns-blog-content td,
.mns-blog-content span,
.mns-blog-content blockquote {
  font-size: 16px !important;
  line-height: 1.85 !important;
  font-weight: 400 !important;
}

.mns-blog-content strong,
.mns-blog-content b {
  font-weight: 700 !important;
  color: #1a1a1a !important;
}

.mns-blog-content h2,
.mns-blog-content h3,
.mns-blog-content h4,
.mns-blog-content h5,
.mns-blog-content h6 {
  font-family: 'Barlow Condensed', sans-serif !important;
  font-weight: 700 !important;
  color: #2F34A6 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
  margin-top: 1.5em !important;
  margin-bottom: 0.6em !important;
}

.mns-blog-content a {
  color: #2F34A6 !important;
  text-decoration: underline !important;
}

.mns-blog-content a:hover {
  color: #FBBF01 !important;
}

.mns-blog-content ul,
.mns-blog-content ol {
  padding-left: 1.5em !important;
  margin-bottom: 1.4em !important;
}

.mns-blog-content li {
  margin-bottom: 0.4em !important;
}

/* ================================================================
   NEWS LISTING PAGE (/news)
   ================================================================ */
.mns-news-listing-section {
  padding: 48px 0 64px;
}

.mns-news-listing-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}

.mns-news-listing-item {
  display: flex;
}

.mns-latestnews-card--full {
  display: flex;
  flex-direction: column;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 12px rgba(47,52,166,0.08);
  overflow: hidden;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  width: 100%;
}

.mns-latestnews-card--full:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 30px rgba(47,52,166,0.13);
}

.mns-latestnews-card--full .mns-latestnews-img-link {
  display: block;
  overflow: hidden;
}

.mns-latestnews-card--full .mns-latestnews-img-link img {
  width: 100%;
  height: 200px;
  object-fit: cover;
  display: block;
  transition: transform 0.3s ease;
}

.mns-latestnews-card--full:hover .mns-latestnews-img-link img {
  transform: scale(1.04);
}

.mns-latestnews-card--full .mns-latestnews-card-body {
  padding: 18px 20px 20px;
  flex: 1;
  display: flex;
  flex-direction: column;
}

.mns-latestnews-card--full .mns-latestnews-date {
  font-size: 12px;
  color: #888;
  font-weight: 500;
  letter-spacing: 0.3px;
}

.mns-latestnews-card--full .mns-latestnews-title {
  font-family: 'Open Sans', sans-serif;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.4;
  color: #2F34A6;
  margin: 6px 0 10px;
}

.mns-latestnews-card--full .mns-latestnews-title a {
  color: inherit;
  text-decoration: none;
}

.mns-latestnews-card--full .mns-latestnews-title a:hover {
  color: #FBBF01;
}

.mns-latestnews-card--full .mns-latestnews-excerpt {
  font-size: 14px;
  color: #555;
  line-height: 1.6;
  flex: 1;
  margin-bottom: 14px;
}

.mns-latestnews-card--full .mns-latestnews-readmore {
  display: inline-block;
  color: #fff;
  background: #2F34A6;
  padding: 7px 18px;
  border-radius: 4px;
  font-weight: 600;
  font-size: 13px;
  text-decoration: none;
  align-self: flex-start;
  transition: background 0.2s;
}

.mns-latestnews-card--full .mns-latestnews-readmore:hover {
  background: #FBBF01;
  color: #2F34A6;
}

@media (max-width: 960px) {
  .mns-news-listing-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
  }
}

@media (max-width: 600px) {
  .mns-news-listing-grid {
    grid-template-columns: 1fr;
  }
}

/* News detail page (team_members bundle): the heading is much taller now
   that h2 uses the heavy uppercase logo-matching font, so with the row's
   original align-items:center it can be pushed above the visible fold
   next to the fixed-height image. Align to the top instead. */
.volunteer-details-block .row {
  align-items: flex-start !important;
}

/* ── Homepage: View More button below news section ── */
.mns-news-viewmore {
  text-align: center;
  padding-top: 32px;
}

.mns-news-viewmore-btn {
  display: inline-block;
  background: #2F34A6;
  color: #fff !important;
  padding: 12px 36px;
  border-radius: 4px;
  font-family: 'Open Sans', sans-serif;
  font-weight: 600;
  font-size: 15px;
  text-decoration: none !important;
  letter-spacing: 0.4px;
  transition: background 0.2s, color 0.2s;
}

.mns-news-viewmore-btn:hover {
  background: #FBBF01;
  color: #2F34A6 !important;
}

/* ================================================================
   Departments & Agencies heading — match the Social Media heading.
   Both were declared Barlow Condensed, but the social one is only a
   (0,1,1) rule so the front-page Open Sans override outranks it,
   while the departments one is held by a (0,2,1) rule above. This
   matches that specificity and loads later, so both now agree.
   ================================================================ */
/* Matched to the homepage "MEDIA" heading (the site-wide :root h2 style) at
   the user's request (2026-09-15): Arial Black 900, 28px, 0.3px spacing.
   Colour is re-asserted because style.css would otherwise set the greyer
   #263B5C here. */
.mns-agencies-section .home3-title-center h2 {
  font-family: 'Arial Black', 'Helvetica Neue', Arial, sans-serif !important;
  font-size: 28px !important;
  font-weight: 900 !important;
  color: #2F34A6 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.3px !important;
  line-height: 1.1 !important;
}

/* ================================================================
   SITE-WIDE PARAGRAPH FONT — Poppins.
   A plain `p` selector is (0,0,1) and loses to the site-wide
   `body *` rule and the front-page `body.path-frontpage *` rule
   (both !important), so paragraphs are qualified here to outrank
   them: `body p` = (0,0,2) and `body.path-frontpage p` = (0,1,2).
   Only <p> is targeted, so headings keep their own fonts.
   ================================================================ */
body p,
body.path-frontpage p {
  font-family: 'Poppins', 'Helvetica Neue', Arial, sans-serif !important;
}

/* ================================================================
   FOOTER TEXT — Poppins.
   Scoped to `footer > .container` and `footer > .copy-right` rather
   than `footer *`, because the chatbot widget is also a child of
   <footer> in the template and is a fixed overlay, not footer text.
   The `body.path-frontpage …` variants are needed to outrank the
   front-page `body.path-frontpage *` Open Sans rule (0,1,1).
   ================================================================ */
footer > .container,
footer > .container *,
footer > .copy-right,
footer > .copy-right *,
body.path-frontpage footer > .container,
body.path-frontpage footer > .container *,
body.path-frontpage footer > .copy-right,
body.path-frontpage footer > .copy-right * {
  font-family: 'Poppins', 'Helvetica Neue', Arial, sans-serif !important;
}

/* Font Awesome glyphs in the footer (e.g. the scroll-to-top chevron)
   must keep their icon font or they render as letters. Declared after
   the block above so it wins the specificity tie. */
body footer .fa,
body footer .fas,
body footer .far,
body footer .fab,
body footer [class^="fa-"],
body footer [class*=" fa-"],
body.path-frontpage footer .fa,
body.path-frontpage footer .fas,
body.path-frontpage footer .far,
body.path-frontpage footer .fab,
body.path-frontpage footer [class^="fa-"],
body.path-frontpage footer [class*=" fa-"] {
  font-family: "Font Awesome 5 Free", "Font Awesome 5 Brands", "Font Awesome 6 Free", "Font Awesome 6 Brands", FontAwesome !important;
}

/* UserWay's launcher is deliberately left un-positioned here — see the
   dockChatToUserWay routine in global.js, which measures wherever the
   widget actually renders and docks the chat button beside it. */

/* ================================================================
   EU cookie compliance banner — keep its text white.
   The module sets #sliding-popup p { color:#fff } in its own inline
   <style>, but the global paragraph rule above uses !important, which
   beats a non-important declaration regardless of specificity — so the
   body copy was rendering near-black on the navy banner. Re-assert it
   here with !important and ID specificity.
   ================================================================ */
#sliding-popup,
#sliding-popup p,
#sliding-popup h1,
#sliding-popup h2,
#sliding-popup h3,
#sliding-popup span,
#sliding-popup label,
#sliding-popup div,
#sliding-popup .eu-cookie-compliance-message,
#sliding-popup .eu-cookie-compliance-message p,
.eu-cookie-compliance-banner p,
.eu-cookie-compliance-banner .eu-cookie-compliance-message p {
  color: #ffffff !important;
}

/* The action buttons keep their own colours (dark label on light button) */
#sliding-popup .eu-cookie-compliance-default-button,
#sliding-popup .eu-cookie-compliance-secondary-button,
#sliding-popup .agree-button,
#sliding-popup .decline-button {
  color: #2F34A6 !important;
}

/* ================================================================
   GALLERY LISTING — album tiles (/gallery-grid)
   Circular cover with the album title and post date beneath, matching
   the layout on the public mns.gov.jm gallery.
   ================================================================ */
.mns-album {
  text-align: center;
  margin-bottom: 40px;
}

.mns-album-thumb {
  display: block;
  width: 250px;
  height: 250px;
  max-width: 100%;
  margin: 0 auto 14px;
  border-radius: 50%;
  overflow: hidden;
  border: 4px solid #2F34A6;
  box-shadow: 0 4px 18px rgba(47,52,166,0.14);
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

.mns-album-thumb:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 30px rgba(47,52,166,0.24);
  border-color: #FBBF01;
}

/* The view prints the image inside its own field wrapper divs */
.mns-album-thumb img,
.mns-album-thumb .field,
.mns-album-thumb .field__item {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
}

.mns-album-thumb img {
  object-fit: cover !important;
  object-position: center !important;
  border-radius: 50% !important;
}

.mns-album-title {
  display: block;
  font-family: 'Poppins', 'Helvetica Neue', Arial, sans-serif;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.4;
  color: #2F34A6 !important;
  text-decoration: none !important;
  max-width: 320px;
  margin: 0 auto 4px;
}

.mns-album-title:hover {
  color: #FBBF01 !important;
  text-decoration: none !important;
}

.mns-album-date {
  font-family: 'Poppins', 'Helvetica Neue', Arial, sans-serif;
  font-size: 13px;
  color: #111111;
}

@media (max-width: 991px) {
  .mns-album-thumb { width: 200px; height: 200px; }
}
@media (max-width: 575px) {
  .mns-album-thumb { width: 180px; height: 180px; }
}

/* ================================================================
   TEXT/ARTICLE PAGES — match the division-page treatment
   (light panel, gold left rule, small underlined sub-headings), as
   used by .mns-div-mandate on /corporate-services and friends.
   ================================================================ */
.mns-blog-article-body .mns-blog-content {
  background: #f0f5fc;
  border-left: 5px solid #FBBF01;
  border-radius: 0 8px 8px 0;
  padding: 28px 36px;
}

.mns-blog-article-body .mns-blog-content h2,
.mns-blog-article-body .mns-blog-content h3,
.mns-blog-article-body .mns-blog-content h4 {
  font-family: 'Barlow Condensed', sans-serif !important;
  font-size: 22px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 1px !important;
  color: #2F34A6 !important;
  margin: 0 0 14px 0 !important;
  padding-bottom: 10px !important;
  border-bottom: 2px solid #e2eaf4 !important;
}

/* Headings after the first get breathing room above */
.mns-blog-article-body .mns-blog-content h2 ~ h2,
.mns-blog-article-body .mns-blog-content p + h2,
.mns-blog-article-body .mns-blog-content p + h3,
.mns-blog-article-body .mns-blog-content ul + h2,
.mns-blog-article-body .mns-blog-content ul + h3 {
  margin-top: 28px !important;
}

/* Images shouldn't butt against the panel edges */
.mns-blog-article-body .mns-blog-content img {
  border-radius: 6px;
}

@media (max-width: 575px) {
  .mns-blog-article-body .mns-blog-content {
    padding: 22px 20px;
  }
}

/* ================================================================
   FAQ page — Poppins for questions and answers.
   The questions are <h3>, so the site-wide :root h3 rule was giving
   them a different face to the rest of the page.
   ================================================================ */
.page-faq .accordion2 .main-content .icon h3,
.page-faq .accordion1 .main-content .icon h4,
.page-faq .accordion2 .sub-content .card-body,
.page-faq .accordion2 .sub-content .card-body *,
.page-faq .accordion2 .content p,
.page-faq .accordion2 .content li {
  font-family: 'Poppins', 'Helvetica Neue', Arial, sans-serif !important;
}

/* ================================================================
   Floating widgets — align the UserWay accessibility button to the
   same baseline as the chat FAB (both bottom: 28px) so they sit level.
   Only the vertical position is touched: UserWay is a third-party
   widget, and forcing its left offset or size pushed it into the chat
   button and made the two overlap. Its own horizontal placement and
   dimensions are left alone, and the chat FAB is offset far enough to
   clear it (see chatbot.css).
   ================================================================ */
/* No CSS positioning for UserWay: its markup and offsets are decided by a
   third-party script, so guessing them here only fought with it. The chat
   button now measures the accessibility button at runtime and docks to it
   (see dockChatToUserWay in global.js), which keeps them aligned whatever
   UserWay renders. */

/* ================================================================
   Vision & Mission page (/vision-mission) — Poppins throughout.
   The body copy was pasted in with inline styles carrying
   `font-family: lato` (and a grey colour) on the inner <span>s, so
   descendants are targeted with !important — an inline style beats
   normal declarations but loses to !important.
   ================================================================ */
.mns-mission-section .mns-section-tag,
.mns-mission-section .mns-section-title,
.mns-mission-section .mns-section-sub,
.mns-mission-section .mns-mvv-card h3,
.mns-mission-section .mns-mvv-body,
.mns-mission-section .mns-mvv-body p,
.mns-mission-section .mns-mvv-body span,
.mns-mission-section .mns-mvv-body li,
.mns-mission-section .mns-mvv-body * {
  font-family: 'Poppins', 'Helvetica Neue', Arial, sans-serif !important;
}

/* Override the grey the paste brought with it */
.mns-mission-section .mns-mvv-body,
.mns-mission-section .mns-mvv-body p,
.mns-mission-section .mns-mvv-body span,
.mns-mission-section .mns-mvv-body * {
  color: #111111 !important;
}

/* …but the dark "featured" card keeps its light text */
.mns-mission-section .mns-mvv-featured .mns-mvv-body,
.mns-mission-section .mns-mvv-featured .mns-mvv-body p,
.mns-mission-section .mns-mvv-featured .mns-mvv-body span,
.mns-mission-section .mns-mvv-featured .mns-mvv-body * {
  color: rgba(255,255,255,0.82) !important;
}

/* ================================================================
   Logo images — most initiative/agency logos are transparent or have
   a white ground, so they bleed into the white card with no visible
   edge. A light border and inset give them a defined frame.
   ================================================================ */
.mns-icard-img,
.mns-agency-post-logo,
.mns-blog-feat-img img {
  border: 1px solid #e2eaf4;
  border-radius: 8px;
  background: #ffffff;
  box-sizing: border-box;
}

/* Breathing room so the artwork doesn't touch the new frame */
.mns-icard-img img,
.mns-agency-post-logo img {
  padding: 10px;
  box-sizing: border-box;
  background: #ffffff;
}

.mns-icard:hover .mns-icard-img,
.mns-agency-post-card:hover .mns-agency-post-logo {
  border-color: #FBBF01;
}

/* ================================================================
   UserWay accessibility launcher — horizontal nudge only.
   A plain margin shifts it right of wherever UserWay places it, without
   touching its size or artwork. Deliberately NOT a transform and NOT a
   left/bottom override: those made the launcher disappear, and the icon
   design must stay exactly as UserWay draws it.
   ================================================================ */
.uwy,
.userway_buttons_wrapper,
#userwayAccessibilityIcon {
  margin-left: 20px !important;
}

/* ================================================================
   LATEST NEWS CARDS — equal columns, uniform image boxes.
   The grid tracks were being inflated by each card's 400px-wide image:
   an <img> with a percentage width still contributes its intrinsic
   width to a grid item's automatic minimum, so the tracks stopped
   being equal and the row overflowed its column. min-width/min-height
   0 on the items lets the tracks size purely from the 1fr share.
   ================================================================ */
.mns-news-minigrid,
.mns-news-listing-grid {
  align-items: stretch;
}

.mns-news-minigrid > .mns-news-mini,
.mns-news-listing-grid > .mns-news-listing-item {
  min-width: 0;
  min-height: 0;
  display: flex;
}

.mns-news-mini > .mns-latestnews-card,
.mns-news-listing-item > .mns-latestnews-card {
  min-width: 0;
  width: 100%;
  height: 100%;
}

/* Every thumbnail gets the same fixed box and fills it edge to edge.
   Focus sits slightly above centre so faces aren't cropped off. */
.mns-news-mini .mns-latestnews-img-link {
  display: block;
  width: 100%;
  height: 190px;
  overflow: hidden;
  flex-shrink: 0;
}

/* Anchored to the top of the photo: press-release shots put heads in the
   upper part of the frame, so cropping from the bottom keeps faces whole.
   The view now feeds these a scale-only derivative (the 'news_card' image
   style) — the old one hard-cropped to 400x300 first, so faces were being
   cut before the CSS ever saw them. */
.mns-news-mini .mns-latestnews-img-link img {
  width: 100% !important;
  height: 100% !important;
  max-height: none !important;
  object-fit: cover !important;
  object-position: center top !important;
  display: block;
}

.mns-news-listing-card-img,
.mns-latestnews-card--full .mns-latestnews-img-link {
  display: block;
  width: 100%;
  height: 230px;
  overflow: hidden;
  flex-shrink: 0;
}

.mns-latestnews-card--full .mns-latestnews-img-link img {
  width: 100% !important;
  height: 100% !important;
  max-height: none !important;
  object-fit: cover !important;
  object-position: center top !important;
  display: block;
}

/* Titles and excerpts must be able to shrink with the track, and long
   words shouldn't force a track wider than its share. */
.mns-latestnews-card-body {
  min-width: 0;
}

.mns-latestnews-title,
.mns-latestnews-excerpt {
  overflow-wrap: break-word;
}

/* ================================================================
   Footer legal line — the links moved out of the copyright_detail
   setting into their own <p>, and .copyright-text is a flex row, so
   stack the two paragraphs instead of sitting them side by side.
   ================================================================ */
.copy-right .copyright-text {
  flex-direction: column;
  gap: 5px;
}

.footer-legal-links {
  margin: 0 !important;
}

.footer-legal-links .sep {
  color: rgba(255,255,255,0.25) !important;
  margin: 0 7px;
}

/* ================================================================
   Topbar socials — the Threads icon lives in its own .social-icons
   wrapper (no Font Awesome 5 glyph exists for it), so pull it back by
   the difference between the topbar's 14px gap and the 10px used
   between icons, and centre its inline SVG the way the <i> glyphs sit.
   ================================================================ */
.mns-topbar-right .mns-topbar-social-extra {
  margin-left: -4px;
}

.mns-topbar-right .social-icons a svg {
  display: block;
  flex-shrink: 0;
}

/* ================================================================
   SHARED CONTENT-PAGE THEME
   One look for every text page: basic pages (.mns-page-node-body)
   and blog / initiative / news articles (.mns-blog-content).
   Text is centred, and both families get the same typography that
   the article pages already used (Poppins body, navy Barlow
   headings, gold accents).
   ================================================================ */

/* A measure limit matters more than usual with centred text: full-width
   centred lines are hard to track from one line to the next. Only the
   article body gets it — basic pages are built from paragraph sections
   that carry their own Bootstrap containers, and capping the wrapper
   squeezed those columns to half width. */
.mns-blog-content {
  max-width: 900px;
  margin-left: auto;
  margin-right: auto;
}

.mns-page-node-body,
.mns-blog-content {
  text-align: center;
}

.mns-page-node-body p,
.mns-page-node-body li,
.mns-page-node-body span,
.mns-page-node-body blockquote,
.mns-blog-content p,
.mns-blog-content li,
.mns-blog-content span,
.mns-blog-content blockquote {
  text-align: center !important;
}

/* Basic pages inherit the article typography so the two match. */
.mns-page-node-body p,
.mns-page-node-body li {
  font-family: 'Poppins', 'Helvetica Neue', Arial, sans-serif !important;
  font-size: 17px !important;
  font-weight: 400 !important;
  line-height: 1.85 !important;
  color: #111 !important;
}

.mns-page-node-body h1,
.mns-page-node-body h2,
.mns-page-node-body h3,
.mns-page-node-body h4,
.mns-page-node-body h5,
.mns-page-node-body h6,
.mns-blog-content h1,
.mns-blog-content h2,
.mns-blog-content h3,
.mns-blog-content h4,
.mns-blog-content h5,
.mns-blog-content h6 {
  text-align: center !important;
  font-family: 'Barlow Condensed', sans-serif !important;
  color: #2F34A6 !important;
  font-weight: 700;
  letter-spacing: 0.5px;
  line-height: 1.25;
}

.mns-page-node-body h2 { font-size: 28px !important; }
.mns-page-node-body h3 { font-size: 23px !important; }
.mns-page-node-body h4 { font-size: 19px !important; }

/* Gold rule under section headings — the same accent as the page hero
   bar, so a section heading reads as part of the same system. */
.mns-page-node-body h2::after,
.mns-blog-content h2::after {
  content: '';
  display: block;
  width: 64px;
  height: 3px;
  background: #FBBF01;
  border-radius: 2px;
  margin: 12px auto 0;
}

/* Bullets have to sit inside the box, otherwise a centred list leaves
   its markers stranded out on the left. */
.mns-page-node-body ul,
.mns-page-node-body ol,
.mns-blog-content ul,
.mns-blog-content ol {
  list-style-position: inside;
  padding-left: 0 !important;
  margin-left: auto;
  margin-right: auto;
}

.mns-page-node-body img,
.mns-blog-content img {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

.mns-page-node-body blockquote,
.mns-blog-content blockquote {
  border-left: none;
  border-top: 3px solid #FBBF01;
  border-radius: 4px;
  max-width: 760px;
  margin-left: auto;
  margin-right: auto;
}

.mns-page-node-body a,
.mns-blog-content a {
  color: #2F34A6;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.mns-page-node-body a:hover,
.mns-blog-content a:hover {
  color: #FBBF01;
}

/* Tables are the exception: centred cell text stops a table being
   readable as columns, so the table is centred but its contents are
   not. Headers keep the navy band used on the article pages. */
.mns-page-node-body table,
.mns-blog-content table {
  margin-left: auto;
  margin-right: auto;
  text-align: left;
}

.mns-page-node-body td,
.mns-page-node-body th,
.mns-blog-content td,
.mns-blog-content th {
  text-align: left !important;
}

.mns-page-node-body th {
  background: #2F34A6;
  color: #fff;
  padding: 10px 14px;
  font-weight: 600;
  font-family: 'Poppins', 'Helvetica Neue', Arial, sans-serif;
}

/* Several basic pages render a stray Bootstrap half-column hanging
   directly off the <section>, outside any .row or .container — a leftover
   from a two-column layout whose image half is gone. That pins the text to
   the left half of the screen. A column that is a direct child of a section
   is always this broken case; real grid layouts keep their columns inside a
   .row, so they are untouched. */
.mns-page-node-body section > [class*="col-"],
.mns-blog-content section > [class*="col-"],
.mns-page-node-body .home2-about-block > .row > [class*="col-"] {
  flex: 0 0 auto !important;
  width: 100% !important;
  max-width: 980px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  float: none !important;
}

/* FAQ accordion headers are flex rows (question on the left, toggle icon on
   the right), so the heading box only ever wraps its own text and centring
   it has no visible effect until the box is allowed to fill the row. */
.mns-page-node-body .accordion2 a.icon h3 {
  flex: 1 1 auto;
  text-align: center !important;
}

/* ================================================================
   DIVISION PAGES — justified body text.
   The body class comes from charity_plus_preprocess_html(), which
   matches the page alias against the Divisions menu, so branch pages
   under each division are covered too. Headings stay centred so these
   pages still read as part of the shared content-page theme.
   ================================================================ */
body.mns-division-page .mns-page-node-body p,
body.mns-division-page .mns-page-node-body li,
body.mns-division-page .mns-blog-content p,
body.mns-division-page .mns-blog-content li,
body.mns-about-page .mns-page-node-body p,
body.mns-about-page .mns-page-node-body li,
body.mns-about-page .mns-blog-content p,
body.mns-about-page .mns-blog-content li,
body.mns-agency-page .mns-page-node-body p,
body.mns-agency-page .mns-page-node-body li,
body.mns-agency-page .mns-blog-content p,
body.mns-agency-page .mns-blog-content li {
  text-align: justify !important;
  /* Justification opens ugly gaps in a narrow column without it. */
  -webkit-hyphens: auto;
  hyphens: auto;
}

/* ================================================================
   LIST INDENTATION
   Markers sit outside the text block (a hanging indent), so wrapped
   lines line up with the first line's text rather than running back
   under the bullet. That only reads correctly with left-aligned list
   text, so list items opt out of the centring used elsewhere — the
   list block itself is still centred on the page.
   ================================================================ */
.mns-page-node-body ul,
.mns-page-node-body ol,
.mns-blog-content ul,
.mns-blog-content ol {
  list-style-position: outside !important;
  padding-left: 2.4em !important;
  max-width: 820px;
  margin-left: auto;
  margin-right: auto;
  text-align: left;
}

.mns-page-node-body li,
.mns-blog-content li {
  text-align: left !important;
  padding-left: 0.35em;
}

/* Nested lists step in again rather than restarting at the margin. */
.mns-page-node-body li > ul,
.mns-page-node-body li > ol,
.mns-blog-content li > ul,
.mns-blog-content li > ol {
  padding-left: 1.8em !important;
  max-width: none;
  margin-top: 0.4em;
}

/* Division pages justify their body text, list items included — the
   hanging indent above still applies. This has to come after the rule
   that left-aligns list items, since both carry !important. */
body.mns-division-page .mns-page-node-body li,
body.mns-division-page .mns-blog-content li,
body.mns-about-page .mns-page-node-body li,
body.mns-about-page .mns-blog-content li,
body.mns-agency-page .mns-page-node-body li,
body.mns-agency-page .mns-blog-content li {
  text-align: justify !important;
}



/* ================================================================
   Press-release card headings — smaller and tighter.
   The global `:root h3` rule (Arial Black 900, uppercase, 0.3px
   letter-spacing, text-shadow) outranks .mns-pr-card-title, so this
   is scoped with :root too in order to win on specificity.
   ================================================================ */
:root h3.mns-pr-card-title {
  font-size: 16px !important;
  line-height: 1.3 !important;
  letter-spacing: 0 !important;
  word-spacing: 0 !important;
  text-shadow: none !important;
  margin: 0 0 6px !important;
}

/* ================================================================
   HEADER CLEARANCE — one offset for every interior page.
   .mns-navbar-wrap only becomes position:absolute (floating over the
   page instead of pushing it down) at the same >=992px breakpoint
   where style.css switches the nav from the mobile hamburger to the
   full bar (see the "position: absolute" rule scoped to
   @media (min-width: 992px) in style.css). Below that, the header
   stays in normal document flow and already pushes content down by
   its own height, so this compensation must not apply there — without
   the guard it adds a dead ~152px gap above the header on every mobile
   page. Individual pages used to compensate with ad-hoc offsets (main
   margin-top of 120px on press-releases/podcast/speeches, 144px
   elsewhere) or by padding the hero by 150px — which is why shrinking
   that padding hid some page titles behind the header. The offset
   lives here instead, so the hero's own padding is purely visual.
   ================================================================ */
@media (min-width: 992px) {
  body.not-frontpage .dialog-off-canvas-main-canvas {
    padding-top: 152px;
  }
}

/* Neutralise the per-page offsets this replaces (120px on press-releases,
   podcast and speeches; 144px elsewhere) so they can't stack on top. */
body.not-frontpage main.main-content,
body.not-frontpage #main,
body.not-frontpage .layout-content,
body.not-frontpage .container-fluid > .row-offcanvas {
  margin-top: 0 !important;
}
/* ================================================================
   ABOUT PAGES — give the body text the article treatment used by the
   blog and news pages (light panel, gold left rule, padded, with real
   space between paragraphs).

   Two things were making these pages read differently from an article:
   .content-block is a grid-card style from custom.css (border, shadow,
   hover lift, no padding), so the text ran flush against the card edge;
   and the section carries a 200px top padding from style.css, which
   left a large blank band under the banner.
   ================================================================ */
body.mns-about-page .mns-page-node-body .content-block {
  background: #f0f5fc !important;
  border: none !important;
  border-left: 5px solid #FBBF01 !important;
  border-radius: 0 8px 8px 0 !important;
  box-shadow: none !important;
  padding: 28px 36px !important;
  overflow: visible !important;
}

body.mns-about-page .mns-page-node-body .content-block:hover {
  transform: none !important;
  box-shadow: none !important;
}

/* Paragraphs were butted together — .mns-blog-content uses 0.7em. */
body.mns-about-page .mns-page-node-body .content-block p {
  margin-bottom: 0.7em !important;
}

/* Sub-headings pick up the same underlined rule as an article's. */
body.mns-about-page .mns-page-node-body .content-block h2,
body.mns-about-page .mns-page-node-body .content-block h3,
body.mns-about-page .mns-page-node-body .content-block h4 {
  padding-bottom: 10px !important;
  border-bottom: 2px solid #e2eaf4 !important;
}

body.mns-about-page .mns-page-node-body .content-block p + h2,
body.mns-about-page .mns-page-node-body .content-block p + h3,
body.mns-about-page .mns-page-node-body .content-block ul + h2,
body.mns-about-page .mns-page-node-body .content-block ul + h3 {
  margin-top: 28px !important;
}

/* The banner already provides the spacing this section was adding. */
.mns-page-node-body section.home2-about,
.mns-page-node-body section.page-about {
  padding-top: 56px !important;
  padding-bottom: 64px !important;
}

@media (max-width: 575px) {
  body.mns-about-page .mns-page-node-body .content-block {
    padding: 22px 20px !important;
  }
}

/* ================================================================
   Clickable parent menu items.
   A parent that points somewhere real (About Us) renders as a normal
   link, so it can't carry Bootstrap's dropdown toggle — clicking it
   would open the panel instead of following the link. Its submenu
   therefore opens on hover, the way the mega menus already do. Parents
   set to <nolink> are untouched and stay click-to-open.
   ================================================================ */
@media (min-width: 992px) {
  .mns-main-collapse .navbar-nav .nav-item:hover > .nav-link[href] + .dropdown-menu {
    display: block !important;
  }
}

/* Below 992px there is no hover, so global.js lets the first tap open
   the panel and the second follow the link; this keeps it visible. */
.mns-main-collapse .navbar-nav .nav-item.mns-submenu-open > .dropdown-menu {
  display: block !important;
}

/* ================================================================
   Third-level menus (Media > Information > the documents).
   The dropdown panel is overflow:hidden, and a flyout opens to the
   side of it — outside that box — so it was being clipped away
   entirely. The panel must not clip its own submenus.
   ================================================================ */
.mns-main-collapse .navbar-nav .dropdown-menu {
  overflow: visible !important;
}

/* Open the flyout on hover too, matching how the rest of the menu
   behaves; Bootstrap's click toggle still works. */
@media (min-width: 992px) {
  .mns-main-collapse .navbar-nav .submenu-1:hover > .dropdown-menu {
    display: block !important;
    left: auto !important;
    right: 100% !important;
    top: 0 !important;
  }
}

/* ================================================================
   BLOG ARTICLE LAYOUT — small image left, text wrapping around it.
   The image is now the first child of .mns-blog-content (see
   node--blog.html.twig), so floating it lets the copy run beside it
   and then continue underneath, rather than starting below a
   full-width banner.
   ================================================================ */
.mns-blog-article--wrap .mns-blog-content .mns-blog-feat-img {
  float: left;
  width: 380px;
  max-width: 48%;
  margin: 4px 32px 22px 0;
  line-height: 0;
}

.mns-blog-article--wrap .mns-blog-content .mns-blog-feat-img img {
  width: 100% !important;
  height: auto !important;
  display: block;
  margin: 0 !important;
  border-radius: 8px;
  border: 1px solid #e2eaf4;
  background: #ffffff;
}

/* The panel has to contain the float, otherwise a short article leaves the
   image hanging out of the bottom of its own background. */
.mns-blog-article--wrap .mns-blog-content::after {
  content: '';
  display: block;
  clear: both;
}

/* Justified, so the text makes a clean edge against the image. Hyphenation
   matters more than usual here: beside a float the column is narrower, and
   justifying a narrow measure without it opens large gaps between words. */
.mns-blog-article--wrap .mns-blog-content p,
.mns-blog-article--wrap .mns-blog-content li {
  text-align: justify !important;
  -webkit-hyphens: auto;
  hyphens: auto;
}

/* Later headings clear the image so they don't collide with it… */
.mns-blog-article--wrap .mns-blog-content h2,
.mns-blog-article--wrap .mns-blog-content h3,
.mns-blog-article--wrap .mns-blog-content h4 {
  clear: left;
}

/* …but when the article opens with a heading (the initiative pages do),
   clearing it would push everything below the image and leave a large gap
   beside it. That first heading runs alongside instead. */
.mns-blog-article--wrap .mns-blog-content .mns-blog-feat-img + h2,
.mns-blog-article--wrap .mns-blog-content .mns-blog-feat-img + h3,
.mns-blog-article--wrap .mns-blog-content .mns-blog-feat-img + h4 {
  clear: none;
  margin-top: 0 !important;
}

/* On a phone the float leaves too little room for the text: stack instead. */
@media (max-width: 575px) {
  .mns-blog-article--wrap .mns-blog-content .mns-blog-feat-img {
    float: none;
    width: 250px;
    max-width: 100%;
    margin: 0 auto 20px;
  }
}

/* ================================================================
   Latest News now occupies the slot the initiatives used to have, a
   single row of cards. Three across keeps that row complete instead
   of leaving the third card alone under the first two.
   ================================================================ */
@media (min-width: 992px) {
  .mns-news-minigrid {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* ================================================================
   Initiatives in the banner-flanked section.
   The cards are col-lg-4 (three across) by default, but this centre
   column is much narrower than a full container — two across gives
   the 2x2 grid the news cards used to have in this slot. That only
   makes sense once there's enough width for two side by side though;
   below that (phones) they stack one per row like everywhere else.
   ================================================================ */
@media (min-width: 576px) {
  .mns-news-center .mns-priority-col {
    flex: 0 0 50% !important;
    max-width: 50% !important;
  }
}

.mns-news-center .row {
  margin-left: -7px;
  margin-right: -7px;
}

.mns-news-center .mns-priority-col {
  padding-left: 7px !important;
  padding-right: 7px !important;
  margin-bottom: 14px;
}

/* The centre column is tighter than the initiatives section was, so the
   card's inner spacing comes down to match. */
.mns-news-center .mns-icard-img {
  height: 130px;
}

.mns-news-center .mns-icard-body {
  padding: 12px 14px 14px;
}

.mns-news-center .mns-icard-title {
  font-size: 14px;
}

.mns-news-center .mns-icard-desc {
  font-size: 12.5px;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ================================================================
   Accent lines follow the sections that swapped places.
   The initiative cards carried their navy/gold line down the left
   edge and the news cards across the top; now that each sits in the
   other's slot, the lines move with the layout — top for the
   initiatives, side for the news.
   ================================================================ */
.mns-news-center .mns-icard {
  border-left: none !important;
  border-top: 4px solid #2F34A6 !important;
  box-shadow: 0 2px 12px rgba(47,52,166,0.07) !important;
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-top-color 0.25s ease !important;
}

.mns-news-center .mns-icard:hover {
  border-top-color: #FBBF01 !important;
  box-shadow: 0 10px 30px rgba(47,52,166,0.13) !important;
  transform: translateY(-4px);
}

.home3-service .mns-news-mini .mns-latestnews-card {
  border-top: none !important;
  border-left: 4px solid #2F34A6 !important;
  box-shadow: -3px 0 10px rgba(47,52,166,0.18), 0 2px 12px rgba(47,52,166,0.07) !important;
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-left-color 0.25s ease !important;
}

.home3-service .mns-news-mini .mns-latestnews-card:hover {
  border-left-color: #FBBF01 !important;
  box-shadow: -4px 0 14px rgba(47,52,166,0.28), 0 12px 32px rgba(47,52,166,0.13) !important;
}

/* ================================================================
   Submenu indicator (Media > Information).
   The menu template already outputs an .nav-arrow SVG on any dropdown
   item that has a flyout, but custom.css hides it everywhere except
   header-2 (".header .nav-arrow { display: none }"), so the only item
   with children looked identical to the plain links. Show it here and
   push it to the right-hand edge of the row.
   ================================================================ */
#header-1 .navbar-nav .submenu-1 > .dropdown-item .nav-arrow {
  display: inline-block !important;
  width: 6px;
  height: 10px;
  margin-left: 10px;
  flex-shrink: 0;
  opacity: 0.65;
}

/* The glyph is painted white for header-2's dark menu, which makes it
   invisible on this white panel — take the item's own text colour. */
#header-1 .navbar-nav .submenu-1 > .dropdown-item .nav-arrow,
#header-1 .navbar-nav .submenu-1 > .dropdown-item .nav-arrow path {
  fill: currentColor !important;
}

#header-1 .navbar-nav .submenu-1:hover > .dropdown-item .nav-arrow {
  opacity: 1;
}

/* Label stays hard left, in line with the items above it; the arrow is
   pushed to the right edge by its own auto margin. (space-between left the
   label sitting further right than its neighbours.) */
#header-1 .navbar-nav .submenu-1 > .dropdown-item:has(.nav-arrow) {
  display: flex !important;
  align-items: center;
  justify-content: flex-start !important;
  text-align: left !important;
  width: 100%;
}

#header-1 .navbar-nav .submenu-1 > .dropdown-item .nav-arrow {
  margin-left: auto !important;
}

/* ================================================================
   HERO SLIDER — latest news slides
   The news photo fills the whole slide (object-fit: cover crops it to
   shape, never squashed). A soft dark shadow on the right, where the
   headline and Read More sit, keeps the text readable over any photo.
   The theme sends the original upload (or a 1920px-wide copy of
   anything larger). A split layout (photo left, solid blue panel
   right) was sharper but the user preferred the full photo.
   ================================================================ */
.home3-info-block .swiper-slide.mns-news-slide {
  background: linear-gradient(90deg, #23277D 0%, #2F34A6 100%) !important;
  align-items: stretch !important;
}

.mySwiper .swiper-slide img.mns-news-slide-bg {
  position: absolute !important;
  /* The header overlays the top 152px of the slide on desktop — start
     the photo below it so faces are not hidden behind the header. */
  top: 152px !important;
  bottom: 0 !important;
  left: 0 !important;
  right: 0 !important;
  z-index: 0 !important;
  width: 100% !important;
  height: calc(100% - 152px) !important;
  max-width: none !important;
  object-fit: cover !important;
  /* Press photos put faces in the upper part of the frame. */
  object-position: center 30% !important;
  animation: none !important;
  transform: none !important;
}

/* Soft shadow behind the text on the right; the left of the photo is
   left clear. */
.mns-news-slide-shade {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(90deg, rgba(0, 20, 52, 0) 0%, rgba(0, 20, 52, 0) 38%, rgba(0, 20, 52, 0.5) 60%, rgba(0, 20, 52, 0.74) 100%);
  pointer-events: none;
}

.mns-news-slide-inner {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  width: 100%;
  margin: 0;
  /* Top: the header overlays 152px on desktop. Left: start past the
     photo. Right: clear the social rail and the next arrow. */
  padding: 152px 110px 56px calc(62% + 48px);
  box-sizing: border-box;
}

.mns-news-slide-text {
  max-width: 560px;
  min-width: 0;
  color: #ffffff;
}

/* :root h2 is Arial Black, uppercase, with a text-shadow — outrank it. */
:root h2.mns-news-slide-title {
  font-family: 'Barlow Condensed', sans-serif !important;
  font-size: clamp(28px, 2.5vw, 46px) !important;
  font-weight: 800 !important;
  line-height: 1.08 !important;
  letter-spacing: 0.2px !important;
  text-transform: none !important;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.55) !important;
  color: #ffffff !important;
  margin: 0 0 26px !important;
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.mns-news-slide-btn {
  display: inline-flex;
  align-items: center;
  padding: 12px 28px;
  border-radius: 6px;
  background: #FBBF01;
  color: #2F34A6 !important;
  font-family: 'Poppins', 'Helvetica Neue', Arial, sans-serif;
  font-size: 14px;
  font-weight: 700;
  text-decoration: none !important;
  transition: background 0.2s ease, color 0.2s ease;
}

.mns-news-slide-btn:hover {
  background: #ffffff;
  color: #2F34A6 !important;
}

/* Same fade-up entrance the designed slides use. */
.mns-news-slide .mns-news-slide-text > * {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.8s ease, transform 0.8s ease;
}
.mns-news-slide.swiper-slide-active .mns-news-slide-text > *,
.mns-news-slide.swiper-slide-duplicate-active .mns-news-slide-text > * {
  opacity: 1;
  transform: translateY(0);
}
.mns-news-slide.swiper-slide-active .mns-news-slide-title { transition-delay: 0.15s; }
.mns-news-slide.swiper-slide-active .mns-news-slide-btn   { transition-delay: 0.3s; }

/* Small desktop: give the text panel a little more of the width. */
@media (min-width: 992px) and (max-width: 1279.98px) {
  .mns-news-slide-shade {
    background: linear-gradient(90deg, rgba(0, 20, 52, 0) 0%, rgba(0, 20, 52, 0) 32%, rgba(0, 20, 52, 0.52) 54%, rgba(0, 20, 52, 0.76) 100%);
  }
  .mns-news-slide-inner { padding: 152px 96px 56px calc(55% + 32px); }
}

/* Tablet: the header is in normal flow from here down, so the photo
   runs the full slide height. Photo and panel split the width; the
   right padding clears the social rail and the next arrow. */
@media (max-width: 991.98px) {
  .mySwiper .swiper-slide img.mns-news-slide-bg {
    top: 0 !important;
    height: 100% !important;
  }
  .mns-news-slide-shade {
    background: linear-gradient(90deg, rgba(0, 20, 52, 0) 0%, rgba(0, 20, 52, 0) 26%, rgba(0, 20, 52, 0.55) 48%, rgba(0, 20, 52, 0.78) 100%);
  }
  .mns-news-slide-inner {
    padding: 32px 92px 40px calc(50% + 24px);
  }
  :root h2.mns-news-slide-title {
    font-size: 24px !important;
    margin: 0 0 18px !important;
  }
  .mns-news-slide-btn { padding: 10px 22px; font-size: 13px; }
}

/* Phone: too narrow for side by side — photo across the top, the blue
   panel rising from the bottom with the headline, clear of the edge
   strips and above the pagination dots. */
@media (max-width: 767.98px) {
  /* Phone: text sits along the bottom, so the shadow rises from there. */
  .mns-news-slide-shade {
    background: linear-gradient(180deg, rgba(0, 20, 52, 0) 0%, rgba(0, 20, 52, 0) 34%, rgba(0, 20, 52, 0.55) 60%, rgba(0, 20, 52, 0.82) 100%);
  }
  .mns-news-slide-inner {
    align-items: flex-end;
    padding: 18px 52px 40px;
  }
  :root h2.mns-news-slide-title {
    font-size: 21px !important;
    margin: 0 0 12px !important;
    -webkit-line-clamp: 3;
  }
  .mns-news-slide-btn { padding: 8px 18px; font-size: 12.5px; }
}

/* ================================================================
   PRESS RELEASE PAGES
   Press releases are pages now (converted from their PDFs). They use
   the blog "wrap" article layout; these rules add the document-style
   cover, the photos section (which mirrors the Gallery album the
   mnsp_press_gallery module keeps), and the original-PDF button.
   ================================================================ */
.mns-press-release .mns-blog-content .mns-pr-cover {
  display: block;
  width: 280px;
  max-width: 40%;
}
.mns-press-release .mns-blog-content .mns-pr-cover img {
  box-shadow: 0 6px 22px rgba(47, 52, 166, 0.14);
}

.mns-press-release .mns-pr-photos {
  clear: both;
  margin-top: 36px;
  padding-top: 28px;
  border-top: 1px solid #e2eaf4;
}
.mns-press-release .mns-pr-photos-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 18px;
}
:root .mns-press-release h2.mns-pr-photos-title {
  font-size: 22px !important;
  margin: 0 !important;
  text-align: left !important;
}
.mns-press-release .mns-pr-album-link {
  font-family: 'Poppins', 'Helvetica Neue', Arial, sans-serif;
  font-size: 14px;
  font-weight: 600;
  color: #2F34A6 !important;
  text-decoration: none !important;
}
.mns-press-release .mns-pr-album-link:hover { text-decoration: underline !important; }

.mns-press-release .mns-gallery-photos-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 18px;
}
.mns-press-release .mns-pr-photo { margin: 0; min-width: 0; }
/* mns-redesign.css squares gallery tiles; press photos keep 3:2 here. */
.mns-press-release .mns-gallery-photo-link { aspect-ratio: auto; }
.mns-press-release .mns-pr-photo img {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  object-position: center top;
  display: block;
  border-radius: 8px;
  border: 1px solid #e2eaf4;
}
.mns-press-release .mns-pr-photo figcaption {
  margin-top: 8px;
  font-size: 13px;
  line-height: 1.5;
  color: #4a5568;
  text-align: left !important;
}

.mns-press-release .mns-pr-original {
  clear: both;
  margin-top: 30px;
}
.mns-press-release .mns-pr-pdf-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 20px;
  border: 2px solid #2F34A6;
  border-radius: 6px;
  font-family: 'Poppins', 'Helvetica Neue', Arial, sans-serif;
  font-size: 14px;
  font-weight: 600;
  color: #2F34A6 !important;
  text-decoration: none !important;
  transition: background 0.2s ease, color 0.2s ease;
}
.mns-press-release .mns-pr-pdf-btn:hover {
  background: #2F34A6;
  color: #ffffff !important;
}

/* ================================================================
   POLICY / ACT PAGES
   Same conversion as press releases: policies are pages now instead of
   just title + download-link cards. Same "blog wrap" layout and cover —
   no PDF button (the page is the source of record) and no photo gallery
   (not applicable here).
   ================================================================ */
.mns-policy .mns-blog-content .mns-policy-cover {
  display: block;
  width: 280px;
  max-width: 40%;
}
.mns-policy .mns-blog-content .mns-policy-cover img {
  box-shadow: 0 6px 22px rgba(47, 52, 166, 0.14);
}

/* Press Releases listing cards: a release without photos shows its cover
   (the PDF's first page, portrait) — crop from the top so the letterhead
   and headline show rather than the middle of the page. */
.mns-latestnews-card--full .mns-pr-listing-cover img {
  object-position: center top !important;
}

/* Speeches listing — Press Releases card layout. Speeches have no photos,
   so the picture area is a navy panel; the PDF link (the view's own file
   field output) is styled like the cards' Read More button. */
.mns-speech-grid-card .mns-speech-panel {
  height: 230px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  color: #FBBF01;
  background:
    radial-gradient(circle at 80% 20%, rgba(251, 191, 1, 0.14) 0, rgba(251, 191, 1, 0) 45%),
    linear-gradient(135deg, #23277D 0%, #2F34A6 100%);
}
/* Cover image from the speech PDF's front page. */
.mns-speech-grid-card .mns-speech-cover {
  height: 230px;
  flex-shrink: 0;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #23277D 0%, #2F34A6 100%);
}
.mns-speech-grid-card .mns-speech-cover img {
  display: block;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  box-sizing: border-box;
}
/* Portrait covers (every speech's front page): the whole page on a white
   background, the page itself framed with a thin border so white pages
   stand out. The img is sized to the page (not the box) so the border
   hugs the page. */
/* A soft "desk" behind the page instead of flat white: pale blue gradient,
   a faint dot texture, a warm gold glow in one corner and a gold rule
   along the bottom, echoing the site's navy/gold. The page lifts a little
   when the card is hovered. */
.mns-speech-grid-card .mns-speech-cover--contain {
  position: relative;
  background:
    radial-gradient(circle at 88% 12%, rgba(251, 191, 1, 0.18) 0, rgba(251, 191, 1, 0) 38%),
    radial-gradient(rgba(47, 52, 166, 0.09) 1px, transparent 1.2px) 0 0 / 14px 14px,
    linear-gradient(160deg, #f5f8fd 0%, #e2e9f6 100%);
  border-bottom: 3px solid #FBBF01;
}
.mns-speech-grid-card .mns-speech-cover--contain img {
  width: auto !important;
  height: 192px !important;
  max-width: 86% !important;
  object-fit: contain;
  padding: 0;
  background: #ffffff;
  border: 1px solid #cfd8e6;
  border-radius: 3px;
  box-shadow: 0 2px 4px rgba(35, 39, 125, 0.08), 0 12px 26px rgba(35, 39, 125, 0.20);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.mns-speech-grid-card:hover .mns-speech-cover--contain img {
  transform: translateY(-4px) scale(1.02);
  box-shadow: 0 4px 8px rgba(35, 39, 125, 0.10), 0 18px 34px rgba(35, 39, 125, 0.26);
}
/* Landscape photos fill the box; faces sit in the upper part. */
.mns-speech-grid-card .mns-speech-cover--fill img {
  object-fit: cover;
  object-position: center top;
}
/* Small emblems (the coat of arms) centred on white. */
.mns-speech-grid-card .mns-speech-cover--emblem {
  background: #ffffff;
  border-bottom: 1px solid #e2eaf4;
}
.mns-speech-grid-card .mns-speech-cover--emblem img {
  object-fit: contain;
  padding: 28px;
}
.mns-speech-grid-card .mns-speech-panel-label {
  font-family: 'Poppins', 'Helvetica Neue', Arial, sans-serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: #ffffff;
}
.mns-speech-grid-card .mns-latestnews-title {
  flex: 1;
}
.mns-speech-grid-card .mns-speech-action {
  margin-top: 16px;
  /* Notices can carry several files, each with its own button. */
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.mns-speech-grid-card .mns-speech-action a {
  display: inline-flex !important;
  align-items: center;
  gap: 6px;
  padding: 9px 18px !important;
  background: #2F34A6 !important;
  color: #ffffff !important;
  border-radius: 4px;
  font-family: 'Poppins', 'Helvetica Neue', Arial, sans-serif !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  text-decoration: none !important;
  transition: background 0.2s ease, color 0.2s ease;
}
.mns-speech-grid-card .mns-speech-action a:hover {
  background: #FBBF01 !important;
  color: #2F34A6 !important;
}

/* List cards now link to the page. */
.mns-pr-card-title a {
  color: inherit !important;
  text-decoration: none !important;
}
.mns-pr-card-title a:hover { text-decoration: underline !important; }

@media (max-width: 575.98px) {
  .mns-press-release .mns-blog-content .mns-pr-cover {
    float: none;
    width: 100%;
    max-width: 320px;
    margin: 0 auto 20px;
  }
}

/* ================================================================
   FAQ PAGE (node 66) — the CTA block at the bottom ("Do You Have Any
   Questions...") uses a content-editable background image field that
   was still set to the leftover demo "LIV GUD!" graffiti photo. Swap
   it for a plain brand-blue background instead.
   ================================================================ */
.page-node-66 .page-cta {
  background-image: none !important;
  background-color: #2F34A6 !important;
}

/* ================================================================
   PAGINATION — modernized. Overrides custom.css's plain black-outline
   circles (used by the podcast/speeches/press-release pagers, and any
   other default Views pager) with a softer pill shape sized to fit the
   "Page N" label without wrapping, plus a hover lift.
   ================================================================ */
.pagination.js-pager__items .page-item a,
.pagination.js-pager__items .page-item > span,
.pagination.js-pager__items .pager__item--next a {
  width: auto;
  height: auto;
  min-width: 44px;
  min-height: 44px;
  padding: 10px 20px;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  white-space: nowrap;
  font-family: 'DM Sans', sans-serif;
  font-weight: 600;
  font-size: 14px;
  line-height: 1.2;
  border: 1.5px solid #2F34A6;
  border-radius: 999px;
  color: #2F34A6;
  background: #fff;
  box-shadow: 0 2px 10px rgba(47, 52, 166, 0.12);
  transition: background 0.25s ease, color 0.25s ease, box-shadow 0.25s ease, transform 0.25s ease;
}

.pagination.js-pager__items .page-item.active > span,
.pagination.js-pager__items .page-item a:hover,
.pagination.js-pager__items .pager__item--next a:hover {
  background: #2F34A6;
  border-color: #2F34A6;
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(47, 52, 166, 0.25);
}

.mns-tenders-pager .pager__item a {
  border-radius: 999px;
  box-shadow: 0 2px 10px rgba(47, 52, 166, 0.12);
  transition: background 0.25s ease, color 0.25s ease, box-shadow 0.25s ease, transform 0.25s ease;
}

.mns-tenders-pager .pager__item a:hover,
.mns-tenders-pager .pager__item.is-active a {
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(47, 52, 166, 0.25);
}