@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&display=swap');

/* ==========================================================================
   TOWN OF CALEDON - MAIN CONSOLIDATED STYLESHEET (styles.css)
   ==========================================================================
   CSS ARCHITECTURE & SECTION SUMMARY:
   This stylesheet contains the complete design system and component architecture
   for the Town of Caledon municipal theme, structured into 9 physical section blocks.

   SECTION INDEX & HIERARCHY:
   --------------------------------------------------------------------------
   01. DESIGN TOKENS & CSS VARIABLES (:root)
   02. BASE RESETS & TYPOGRAPHY
   03. GLOBAL LAYOUT & CONTAINERS
   04. GLOBAL COMPONENTS & UI UTILITIES (Buttons, Forms, Badges, Chips, Cards, Modals, Accordions)
   05. HEADER & NAVIGATION COMPONENTS (Utility Bar, Translation Menu, Accessibility Panel, Contact Panel, Header, Mega Menu, Mobile Nav Drawer)
   06. FOOTER COMPONENTS (Site Footer Grid, Social Icons, Footer Bottom Bar)
   07. PAGE & CONTENT SECTIONS (Interior Heroes, Sidebars, Content Shells, iFrames)
   08. ACCESSIBILITY & HIGH CONTRAST MODES (body.high-contrast overrides)
   09. RESPONSIVE MEDIA QUERIES (Mobile, Tablet, Desktop Breakpoints)
   ========================================================================== */

/* ==========================================================================
   01. DESIGN TOKENS & CSS VARIABLES
   ========================================================================== */

/*Drupal CSS */

:root {
  --brand-blue: #0256a4;
  --brand-blue-hover: #0268c1;
  --brand-blue-dark: #014785;
  --brand-light: #eaf3fb;
  --brand-text: #1d2b36;
  --brand-muted: #5b6770;
  --brand-highlight-green: #438306;
  --brand-highlight-green-dark: #438306;
  --brand-green-light: #edf7e7;
  --chip-primary-bg: #cfea7e;
  --chip-primary-color: #000000;
  --event-town: #0256a4;
  --event-town-light: #eaf3fb;
  --event-community: #236b18;
  --event-community-light: #eef8e8;
  --event-recreation: #c75f00;
  --event-recreation-light: #fff1e3;
  --event-arts: #7a4ab0;
  --event-arts-light: #f2ebfb;
  --event-engagement: #00838f;
  --event-engagement-light: #e6f6f8;
  --secondary-green: #236b18;
  --secondary-green-dark: #17470f;
  --secondary-green-light: #edf7e7;
  --soft: #f5f8fb;
  --white: #fff;
  --page-bg: #fff;
  --surface: #fff;
  --border: #d9e2ec;
  --radius: 10px;
  --shadow: 0 10px 30px rgba(0,0,0,.12);
  --max-width: 1180px;
  --font-primary: "myriad-pro",Arial,Helvetica,sans-serif;
  scroll-padding-top: 140px;
}

/* ==========================================================================
   02. BASE RESETS & TYPOGRAPHY
   ========================================================================== */

.utility-item {
  position: relative;
}

body.menu-open {
  overflow: hidden;
  touch-action: none;
}

@keyframes toc-pulse-ring {
  0% {
    box-shadow: 0 0 0 0 rgba(26, 94, 168, 0.6);
  }
  70% {
    box-shadow: 0 0 0 10px rgba(26, 94, 168, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(26, 94, 168, 0);
  };
}

@keyframes pulse-arrow {
  0%, 100% {
    transform: translateX(0);
  }
  50% {
    transform: translateX(4px);
  };
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  };
}

.skip-link {
  position: absolute;
  top: -120px;
  left: 16px;
  z-index: 999999 !important;
  padding: 12px 24px;
  background: var(--brand-blue, #0256A4);
  color: #ffffff !important;
  font-weight: 700;
  font-size: 1rem;
  border-radius: 0 0 8px 8px;
  text-decoration: underline;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
  transition: top 0.2s ease;
}

.skip-link:focus,
.skip-link:focus-visible {
  top: 0 !important;
  outline: 3px solid #ffffff !important;
  outline-offset: -3px !important;
  box-shadow: 0 0 0 4px #0256A4, 0 6px 20px rgba(0, 0, 0, 0.4) !important;
}

* {
  box-sizing: border-box;
}

html {
  overflow-x: clip;
}

body {
  margin: 0;
  overflow-x: clip;
  font-family: var(--font-primary);
  color: var(--brand-text);
  background: var(--page-bg);
  line-height: 1.5;
}

a {
  color: inherit;
  text-decoration: none;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

.img-rounded {
  max-width: 100%;
  height: auto;
  display: block;
  border-radius: var(--radius) !important;
}

.img-square {
  max-width: 100%;
  height: auto;
  display: block;
  border-radius: 0 !important;
}

*,
*::before, 
*::after {
  box-sizing: border-box !important;
}

html, body {
  font-family: var(--font-primary) !important;
  margin: 0 !important;
  padding: 0 !important;
  font-size: 1rem;
  line-height: 1.6875;
  font-weight: 400;
  -webkit-text-size-adjust: 100% !important;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0) !important;
}

/* Base cursor reset: prevents inline style="cursor: grab" inheritance on page elements */

html, body,
#page-wrapper,
.dialog-off-canvas-main-canvas,
main, section, article, header, footer, nav, aside,
div, p, span, h1, h2, h3, h4, h5, h6, li, ul, ol, dl, dt, dd,
table, tr, td, th, figure, figcaption, form, fieldset {
  cursor: default !important;
}

p {
  font-family: var(--font-primary);
  font-size: 1.125rem;
  line-height: 1.6875rem;
  font-weight: 400;
  margin: 0 0 16px;
}

/* ── Underlined Links in Page Content (Normal State) ── */

p > a > u,
p > a > strong > u,
p > a > span > u,
p > a > span > strong > u,
p > a > em > strong > u,
p > a > strong > em > u,
ul > li > a > u,
ul > li > a > strong > u,
ul > li > a > span > u,
ul > li > a > span > strong > u,
ol > li > a > u,
ol > li > a > strong > u,
ol > li > a > span > u,
ol > li > a > span > strong > u,
tr > td > a > u,
tr > td > a > strong > u,
td > a > u,
td > a > strong > u,
td > a > span > strong > u {
  color: var(--brand-blue) !important;
}

/* WCAG 2.1 SC 1.4.1 (Level A) - All inline links within text must have an underline and brand blue color */
p a:not(.btn):not(.button):not([class*="btn"]):not(.card-link):not(.hero-banner-link),
.content-main li a:not(.btn):not(.button):not([class*="btn"]):not(.card-link),
.field--name-body li a:not(.btn):not(.button):not([class*="btn"]):not(.card-link),
td a:not(.btn):not(.button):not([class*="btn"]) {
  color: var(--brand-blue, #0256a4);
  text-decoration: underline !important;
  text-decoration-skip-ink: none !important;
  text-underline-offset: 2px;
}


/* ── Underlined Links in Page Content (Rollover / Hover / Focus State - Lighter Blue #0268c1) ── */

p > a:hover > u,
p > a:focus > u,
p > a:hover > strong > u,
p > a:focus > strong > u,
p > a:hover > span > u,
p > a:focus > span > u,
p > a:hover > span > strong > u,
p > a:focus > span > strong > u,
p > a:hover > em > strong > u,
p > a:focus > em > strong > u,
p > a:hover > strong > em > u,
p > a:focus > strong > em > u,
ul > li > a:hover > u,
ul > li > a:focus > u,
ul > li > a:hover > strong > u,
ul > li > a:focus > strong > u,
ul > li > a:hover > span > u,
ul > li > a:focus > span > u,
ul > li > a:hover > span > strong > u,
ul > li > a:focus > span > strong > u,
ol > li > a:hover > u,
ol > li > a:focus > u,
ol > li > a:hover > strong > u,
ol > li > a:focus > strong > u,
ol > li > a:hover > span > u,
ol > li > a:focus > span > u,
ol > li > a:hover > span > strong > u,
ol > li > a:focus > span > strong > u,
tr > td > a:hover > u,
tr > td > a:focus > u,
tr > td > a:hover > strong > u,
tr > td > a:focus > strong > u,
td > a:hover > u,
td > a:focus > u,
td > a:hover > strong > u,
td > a:focus > strong > u,
td > a:hover > span > strong > u,
td > a:focus > span > strong > u,
p a:not(.btn):not(.button):not([class*="btn"]):not(.card-link):not(.hero-banner-link):hover,
p a:not(.btn):not(.button):not([class*="btn"]):not(.card-link):not(.hero-banner-link):focus,
.content-main li a:not(.btn):not(.button):not([class*="btn"]):not(.card-link):hover,
.content-main li a:not(.btn):not(.button):not([class*="btn"]):not(.card-link):focus,
.field--name-body li a:not(.btn):not(.button):not([class*="btn"]):not(.card-link):hover,
.field--name-body li a:not(.btn):not(.button):not([class*="btn"]):not(.card-link):focus,
td a:not(.btn):not(.button):not([class*="btn"]):hover,
td a:not(.btn):not(.button):not([class*="btn"]):focus {
  color: var(--brand-blue-hover, #0268c1) !important;
  text-decoration: underline !important;
  text-decoration-skip-ink: none !important;
}

.highlight-success > div,
.highlight-info > div,
.highlight-warning > div {
  color: var(--brand-blue) !important;
  font-weight: 400 !important;
}

ul > li {
  font-family: var(--font-primary);
  font-size: 1.125rem;
  line-height: 1.6875rem;
  margin: 0 0 8px;
}

ol > li {
  font-family: var(--font-primary);
  font-size: 1.125rem;
  line-height: 1.6875rem;
  margin: 0 0 8px;
}

dt > a > strong > u {
  color: #000000 !important;
}

dt > a:hover > strong > u,
dt > a:focus > strong > u {
  color: var(--brand-blue-hover, #0268c1) !important;
}

p > img,
p > a > img,
p > span > img,
p > a > span > img {
  max-width: 100% !important;
  height: auto !important;
  display: block !important;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-primary);
  font-weight: 600;
  line-height: 1.28;
}

h1, h3, h4 {
  color: var(--brand-blue-dark);
  margin: 0 0 16px;
  font-weight: 600;
  line-height: 1.22;
}

h2 {
  color: #000000;
  font-size: 1.65rem;
  line-height: 1.28;
  margin: 0 0 16px;
  font-weight: 600;
}

h5, h6 {
  color: #000000;
  margin: 0 0 16px;
  font-weight: 600;
  line-height: 1.35;
}

h1 {
  font-size: 1.75rem;
  line-height: 1.22;
}

h3 {
  font-size: 1.375rem;
  line-height: 1.28;
}

h4 {
  font-size: 1.25rem;
  line-height: 1.3;
}

h5 {
  font-size: 1.125rem;
  line-height: 1.35;
}

h6 {
  font-size: 1rem;
  line-height: 1.4;
}

.content-main h1, .content-shell h1,
.content-main h2, .content-shell h2,
.content-main h3, .content-shell h3,
.content-main h4, .content-shell h4,
.content-main h5, .content-shell h5,
.content-main h6, .content-shell h6 {
  line-height: 1.28 !important;
}

body.text-large h1, body.text-xlarge h1,
body.text-large h2, body.text-xlarge h2,
body.text-large h3, body.text-xlarge h3,
body.text-large h4, body.text-xlarge h4,
body.text-large h5, body.text-xlarge h5,
body.text-large h6, body.text-xlarge h6 {
  line-height: 1.28 !important;
}

.hero {
  min-height: 480px;
  background-color: var(--brand-blue-dark);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

.hero-carousel {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
}

.hero-slide {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  background-position: center center;
  background-size: cover;
  background-repeat: no-repeat;
  opacity: 0;
  transition: opacity 0.8s ease-in-out;
}

.hero-slide.active {
  opacity: 1;
}

.hero-slide video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  display: block;
}

/* 2. Hero Background Overlay (Black 34% -> 39% -> 34% smooth horizontal gradient) */
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(90deg, rgba(0, 0, 0, 0.34) 0%, rgba(0, 0, 0, 0.39) 50%, rgba(0, 0, 0, 0.34) 100%);
  opacity: var(--hero-overlay-opacity, 1);
  pointer-events: none;
  transition: opacity 0.3s ease;
}

/* Remove overlay when no headline or CTA is displayed */
.hero.no-overlay::after {
  display: none !important;
}

/* 2. Hero Typography */
.hero-content {
  position: relative;
  z-index: 2;
  max-width: 860px;
  padding: 48px 20px;
  text-align: center;
  margin: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.hero h1 {
  font-family: "myriad-pro", "Myriad Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
  font-weight: 500 !important;
  color: #ffffff !important;
  font-size: clamp(2.1rem, 4vw, 3.4rem);
  line-height: 1.15;
  margin: 0 auto;
  letter-spacing: -0.02em;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.55), 0 1px 3px rgba(0, 0, 0, 0.7) !important;
  text-align: center;
}

/* 3. Hero Call-to-Action (CTA) Button */
.hero-cta-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 44px !important;
  padding: 10px 28px !important;
  background: rgba(0, 0, 0, 0.6) !important;
  border: 2px solid #ffffff !important;
  border-radius: 4px !important;
  color: #ffffff !important;
  font-family: "myriad-pro", "Myriad Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
  font-size: 1rem !important;
  font-weight: 500 !important;
  text-decoration: none !important;
  margin: 18px auto 0 !important;
  cursor: pointer !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4) !important;
  transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease !important;
}

.hero-cta-btn:hover,
.hero-cta-btn:focus,
.hero-cta-btn:focus-visible {
  background: #438306 !important;
  border-color: #438306 !important;
  color: #ffffff !important;
  text-decoration: underline !important;
  text-underline-offset: 3px !important;
  outline: none !important;
  box-shadow: none !important;
}

/* Hero Discreet Pause/Play Control (WCAG 2.2.2 Accessibility) */
.hero-playback-toggle {
  position: absolute;
  bottom: 24px;
  right: 24px;
  z-index: 5;
  width: 38px;
  height: 38px;
  min-width: 38px;
  min-height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.6);
  border: 2px solid rgba(255, 255, 255, 0.85);
  border-radius: 4px;
  color: #ffffff;
  cursor: pointer;
  padding: 0;
  transition: background-color 0.2s ease, border-color 0.2s ease;
}

.hero-playback-toggle:hover,
.hero-playback-toggle:focus,
.hero-playback-toggle:focus-visible {
  background: var(--brand-blue-dark, #014785) !important;
  border: 2px solid #ffffff !important;
  border-color: #ffffff !important;
  color: #ffffff !important;
  outline: none !important;
  box-shadow: none !important;
}

.hero-learn-more {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.95rem;
  font-weight: 500;
  color: #ffffff;
  text-decoration: underline;
  text-underline-offset: 4px;
  text-shadow: 0 2px 8px rgba(0,0,0,.4);
  transition: opacity .2s ease, transform .2s ease;
  margin-top: 4px;
}

.hero-learn-more:hover,
.hero-learn-more:focus {
  opacity: .85;
  color: #ffffff;
}

.hero-learn-more svg {
  width: 14px;
  height: 14px;
  transition: transform .2s ease;
}

.hero-learn-more:hover svg {
  transform: translateX(3px);
}

.hero-dots {
  position: absolute;
  left: 50%;
  bottom: 16px;
  transform: translateX(-50%);
  z-index: 3;
  display: flex !important;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

.hero-dot {
  width: 10px;
  height: 10px;
  border: 0;
  border-radius: 9999px;
  padding: 0;
  background: rgba(255,255,255,.6);
  cursor: pointer;
  transition: background .2s ease, transform .2s ease;
}

.hero-dot.active {
  background: #ffffff;
  transform: scale(1.15);
}

/* ── HOME SEARCH STRIP (STANDALONE DESIGN) ── */
.home-search-strip {
  background-color: #f8fafc;
  padding: 24px 16px 26px;
  border-bottom: 1px solid #e2e8f0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.home-search-pill {
  max-width: 820px;
  width: 100%;
  margin: 0 auto;
  background: #ffffff;
  border: 1px solid #dbe2ea;
  border-radius: 9999px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
  display: flex;
  align-items: center;
  padding: 6px 6px 6px 20px;
  gap: 12px;
  transition: box-shadow .2s ease, border-color .2s ease;
}

.home-search-pill:focus-within {
  border-color: #005696;
  box-shadow: 0 6px 20px rgba(0, 86, 150, 0.15);
}

.home-search-pill .search-icon {
  width: 20px;
  height: 20px;
  stroke: #005696;
  flex-shrink: 0;
}

.home-search-pill input#heroSearchInput {
  flex: 1;
  border: none !important;
  outline: none !important;
  background: transparent !important;
  font-size: 1rem;
  color: #1e293b;
  padding: 8px 0;
  box-shadow: none !important;
}

.home-search-pill input#heroSearchInput::placeholder {
  color: #64748b;
  font-weight: 400;
}

.home-search-btn {
  background-color: #005696;
  color: #ffffff;
  border: none;
  border-radius: 9999px;
  padding: 10px 28px;
  font-size: 0.95rem;
  font-weight: 600;
  cursor: pointer;
  transition: background-color .2s ease, transform .15s ease;
  flex-shrink: 0;
}

.home-search-btn:hover,
.home-search-btn:focus {
  background-color: #004070;
  color: #ffffff;
}

.home-search-subtext {
  text-align: center;
  margin-top: 10px;
  font-size: 0.8125rem;
  color: #64748b;
}

.home-search-subtext a {
  color: #64748b;
  text-decoration: underline;
}

.home-search-subtext a:hover {
  color: #005696;
}

@media (max-width: 640px) {
  .home-search-pill {
    padding: 4px 4px 4px 14px;
    gap: 8px;
  }
  .home-search-pill input#heroSearchInput {
    font-size: 0.9rem;
  }
  .home-search-btn {
    padding: 8px 20px;
    font-size: 0.875rem;
  }
}

.search-panel {
  max-width: 720px;
  margin: 0 auto;
  padding: 12px;
  display: flex;
  gap: 10px;
  background: var(--surface);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

.top-links-strip {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 36px 0 20px;
  background: var(--surface);
}

.top-links-grid {
  display: grid;
  grid-template-columns: repeat(6,minmax(0,1fr));
  gap: 0;
  align-items: stretch;
}

.top-link-icon {
  width: 110px;
  height: 110px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 4px;
  transition: transform .18s ease;
}

.top-link-icon:hover,.top-link-icon:focus {
  transform: translateY(-2px);
}

.top-link-icon img,.top-link-icon svg {
  width: 72px;
  height: 72px;
  object-fit: contain;
  min-height: 4px;
}

.featured-updates {
  padding: 24px 0 64px;
  background: var(--surface);
}

.promo-grid {
  display: grid;
  gap: 20px;
}

/* quantity queries using :has() */

.promo-grid:has(> :nth-child(1):last-child) {
  grid-template-columns: 1fr;
}

.promo-grid:has(> :nth-child(2):last-child) {
  grid-template-columns: 1fr 1fr;
}

.promo-grid:has(> :nth-child(3):last-child) {
  grid-template-columns: 0.95fr 2.05fr;
  grid-template-rows: 280px 280px;
  align-items: start;
}

.promo-grid:has(> :nth-child(4):last-child) {
  grid-template-columns: 0.95fr 1.025fr 1.025fr;
  grid-template-rows: 280px 280px;
  align-items: start;
}

/* Quantity queries for 5+ cards */

.promo-grid:has(> :nth-child(5)) {
  grid-template-columns: repeat(6, 1fr);
  align-items: start;
}

.promo-title {
  position: absolute;
  z-index: 2;
  left: -1px;
  right: -1px;
  bottom: -1px;
  padding: 18px 22px;
  background: #0256a4;
  border-radius: 0 0 calc(var(--radius) + 1px) calc(var(--radius) + 1px);
  color: #ffffff;
  font-size: clamp(1rem,1.15vw,1.25rem);
  line-height: 1.2;
  font-weight: 600;
  transition: background .18s ease,color .18s ease;
}

.have-your-say {
  padding: 64px 0;
  background: var(--brand-light);
}

.engagement-panel {
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: 36px;
  align-items: center;
  background: var(--surface);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
}

.engagement-copy {
  padding: 42px;
}

.engagement-copy h2 {
  margin: 0 0 14px;
  color: var(--brand-blue-dark);
  font-size: clamp(1.9rem,3vw,2.6rem);
  line-height: 1.1;
}

.engagement-copy p {
  margin: 0 0 20px;
  max-width: 540px;
  color: var(--brand-muted);
}

.engagement-image {
  position: relative;
  min-height: 360px;
  height: 100%;
  background: url('../assets/home-page/get-involved/have-your-say-bg.jpg?auto') center/cover;
  display: grid;
  place-items: center;
  padding: 32px;
  text-decoration: none;
}

.news-notices {
  padding: 64px 0;
  background: var(--surface);
}

.section-header {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 28px;
}

.section-header h2 {
  margin: 0;
  color: var(--brand-blue-dark);
  font-size: clamp(1.8rem,3vw,2.5rem);
  line-height: 1.1;
}

.section-header a {
  font-weight: 600 !important;
  font-size: 2rem !important;
  line-height: 1.15 !important;
  color: var(--brand-blue-dark) !important;
  font-weight: 900 !important;
}

.section-header a:hover,.section-header a:focus {
  color: var(--brand-blue-dark);
  text-decoration: underline;
  text-underline-offset: 4px;
}

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

.news-date {
  margin-bottom: 10px;
  color: var(--brand-muted);
  font-size: .85rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .04em;
}

.have-your-say {
  background: #f2f2f2!important;
}

.section-header a {
  font-weight: 600 !important;
  font-size: 2rem !important;
  line-height: 1.15 !important;
  color: var(--brand-blue-dark) !important;
  font-weight: 900 !important;
}

.promo-title {
  font-weight: 600 !important;
}

.emergency-notice {
  display: none;
  background: #1d1d1d;
  color: #fff;
  border-bottom: 1px solid rgba(255,255,255,.18);
}

body.has-emergency-notice .emergency-notice {
  display: block;
}

.emergency-notice-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 10px 0;
}

.emergency-notice-label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 600!important;
  text-transform: uppercase;
  letter-spacing: .055em;
  font-size: .88rem;
}

.emergency-notice-label::before {
  content: "!";
  display: inline-grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #fff;
  color: #1d1d1d;
  font-weight: 600;
}

.emergency-notice-link {
  color: #fff;
  font-weight: 400!important;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.emergency-notice-link:hover,.emergency-notice-link:focus {
  color: #fff;
  text-decoration-thickness: 2px;
}

.news-section {
  padding: 64px 0;
  background: var(--surface);
}

.news-section + .news-section {
  padding-top: 20px;
}

.public-notices {
  background: #f2f2f2;
}

.notice-list {
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap: 20px;
}

.emergency-notice {
  background: #d94f00 !important;
  color: #ffffff !important;
  border-bottom: 0 !important;
}

.emergency-notice-label::before {
  background: #ffffff !important;
  color: #d94f00 !important;
}

.emergency-notice-link {
  color: #ffffff !important;
}

.emergency-notice-link:hover,
.emergency-notice-link:focus {
  color: #ffffff !important;
  text-decoration-thickness: 2px;
}

.emergency-notice {
  background: #ffa201 !important;
  color: #1d1d1d !important;
  border-bottom: 0 !important;
}

.emergency-notice-inner {
  overflow: hidden;
}

.emergency-notice-label {
  color: #1d1d1d !important;
  flex: 0 0 auto;
}

.emergency-notice-label::before {
  background: #1d1d1d !important;
  color: #ffa201 !important;
}

.emergency-marquee {
  flex: 1 1 auto;
  overflow: hidden;
  min-width: 0;
  white-space: nowrap;
}

.emergency-marquee-track {
  display: inline-flex;
  gap: 56px;
  min-width: max-content;
  animation: emergencyMarquee 24s linear infinite;
}

.emergency-marquee-track span {
  color: #1d1d1d !important;
  font-weight: 600 !important;
}

@keyframes emergencyMarquee {
  from{transform: translateX(0)}
  to{transform:translateX(-50%)};
}

.emergency-notice:hover .emergency-marquee-track,
.emergency-notice:focus-within .emergency-marquee-track,
.emergency-notice.is-paused .emergency-marquee-track {
  animation-play-state: paused !important;
}

.emergency-pause-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 4px;
  background: rgba(0, 0, 0, 0.2);
  border: 1px solid currentColor;
  color: inherit;
  cursor: pointer;
  padding: 0;
  margin-left: 12px;
  flex: 0 0 32px;
  transition: background 0.15s ease, color 0.15s ease;
}

.emergency-pause-btn:hover,
.emergency-pause-btn:focus-visible {
  background: rgba(0, 0, 0, 0.4);
  outline: 3px solid currentColor !important;
  outline-offset: 2px !important;
}

.visually-hidden-emergency {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0,0,0,0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

.updates-hub {
  padding: 70px 0;
  background: #ffffff;
}

.updates-hub-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 28px;
  margin-bottom: 28px;
}

.updates-kicker {
  display: block;
  margin-bottom: 8px;
  color: var(--brand-muted);
  font-size: .82rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  font-weight: 600 !important;
}

.updates-hub-header h2 {
  margin: 0 0 8px;
  color: var(--brand-blue-dark);
  font-size: clamp(1.9rem,3vw,2.65rem);
  line-height: 1.08;
  font-weight: 600 !important;
}

.updates-hub-header p {
  margin: 0;
  max-width: 680px;
  color: var(--brand-muted);
  font-weight: 400 !important;
}

.updates-hub-grid {
  display: grid;
  grid-template-columns: 1.35fr .9fr;
  gap: 26px;
  align-items: stretch;
}

.town-news-panel,
.public-notices-panel {
  min-width: 0;
}

.updates-panel-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 18px;
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border);
}

.updates-panel-header h3 {
  margin: 0;
  color: var(--brand-blue-dark);
  font-size: 1.35rem;
  line-height: 1.15;
  font-weight: 600 !important;
}

.updates-panel-header a {
  color: var(--brand-blue);
  font-weight: 600 !important;
  white-space: nowrap;
}

.updates-panel-header a:hover,
.updates-panel-header a:focus {
  color: var(--brand-blue-dark);
  text-decoration: underline;
  text-underline-offset: 4px;
}

.featured-news-image {
  min-height: 310px;
  background: url('images/landing page/featured items/news.jpg?auto=format&fit=crop&w=900&q=80') center/cover no-repeat;
}

.featured-news-content {
  padding: 28px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.featured-news-content h4 {
  margin: 0 0 10px;
  color: var(--brand-blue-dark);
  font-size: clamp(1.45rem,2.2vw,2rem);
  line-height: 1.08;
  font-weight: 600 !important;
}

.featured-news-content p {
  margin: 0 0 18px;
  color: var(--brand-muted);
  font-weight: 400 !important;
}

.featured-news-content span {
  color: var(--brand-blue);
  font-weight: 600 !important;
}

.mini-news-list {
  display: grid;
  grid-template-columns: repeat(2,minmax(0,1fr));
  gap: 16px;
  margin-top: 16px;
}

.mini-news-item {
  display: block;
  padding: 20px;
  background: #ffffff;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  transition: transform .18s ease,border-color .18s ease;
}

.mini-news-item strong {
  display: block;
  margin-bottom: 7px;
  color: var(--brand-blue-dark);
  font-size: 1.08rem;
  line-height: 1.2;
  font-weight: 600 !important;
}

.mini-news-item span {
  display: block;
  color: var(--brand-muted);
  font-weight: 400 !important;
}

.notice-rail {
  display: grid;
  gap: 14px;
  padding: 22px;
  background: #f2f2f2;
  border-radius: var(--radius);
  border: 1px solid var(--border);
}

.notice-rail-item {
  display: grid;
  grid-template-columns: 64px 1fr;
  gap: 16px;
  align-items: start;
  padding: 18px;
  background: #ffffff;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  transition: transform .18s ease,border-color .18s ease;
}

.notice-date-box {
  display: grid;
  place-items: center;
  min-height: 64px;
  border-radius: 8px;
  background: var(--brand-blue);
  color: #ffffff;
  text-align: center;
}

.notice-date-box span {
  display: block;
  color: #ffffff;
  font-size: .78rem;
  line-height: 1;
  text-transform: uppercase;
  font-weight: 400 !important;
}

.notice-date-box strong {
  display: block;
  color: #ffffff;
  font-size: 1.55rem;
  line-height: 1;
  font-weight: 600 !important;
}

.notice-rail-item h4 {
  margin: 0 0 6px;
  color: var(--brand-blue-dark);
  font-size: 1.08rem;
  line-height: 1.2;
  font-weight: 600 !important;
}

.notice-rail-item p {
  margin: 0;
  color: var(--brand-muted);
  font-weight: 400 !important;
}

.news-events-section {
  padding: 64px 0 70px;
  background: #ffffff;
}

.visually-hidden-section-title {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0,0,0,0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

.news-events-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: start;
}

.list-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding-bottom: 16px;
  border-bottom: 1px solid #cfcfcf;
}

.list-panel-title {
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
}

.list-panel-title svg {
  width: 34px;
  height: 34px;
  flex: 0 0 34px;
  fill: none;
  stroke: #333333;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.list-panel-title h3 {
  margin: 0;
  color: #2f2f2f;
  font-size: clamp(1.7rem,2.2vw,2.15rem);
  line-height: 1.1;
  font-weight: 600 !important;
}

.list-panel-header a {
  color: var(--brand-blue);
  font-size: 1.05rem;
  font-weight: 600 !important;
  white-space: nowrap;
}

.list-panel-header a:hover,
.list-panel-header a:focus {
  color: var(--brand-blue-hover);
  text-decoration: underline;
  text-underline-offset: 4px;
}

.simple-list {
  display: grid;
}

.simple-list-row,
.event-list-row {
  display: grid;
  align-items: center;
  min-height: 82px;
  gap: 18px;
  border-bottom: 1px solid #cfcfcf;
  color: inherit;
}

.simple-list-row {
  grid-template-columns: minmax(0,1fr) auto;
}

.event-list-row {
  grid-template-columns: 60px minmax(0,1fr) auto;
}

.simple-list-title,
.event-list-title {
  min-width: 0;
  color: var(--brand-blue);
  font-size: clamp(1.05rem,1.35vw,1.34rem);
  line-height: 1.18;
  font-weight: 600 !important;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.simple-list-meta {
  color: var(--brand-muted);
  font-size: clamp(1rem,1.2vw,1.25rem);
  line-height: 1.2;
  font-weight: 400 !important;
  white-space: nowrap;
}

.event-date-box {
  width: 56px;
  min-height: 64px;
  display: grid;
  place-items: center;
  align-content: center;
  background: #e7f2fb;
  color: var(--brand-blue-dark);
  text-align: center;
}

.event-date-box span {
  display: block;
  color: var(--brand-blue-dark);
  font-size: .72rem;
  line-height: 1;
  text-transform: uppercase;
  font-weight: 600 !important;
}

.event-date-box strong {
  display: block;
  color: var(--brand-blue-dark);
  font-size: 1.55rem;
  line-height: 1.05;
  font-weight: 600 !important;
}

.simple-list-row:hover .simple-list-title,
.simple-list-row:focus .simple-list-title,
.event-list-row:hover .event-list-title,
.event-list-row:focus .event-list-title {
  color: var(--brand-blue-hover);
  text-decoration: underline;
  text-underline-offset: 4px;
}

.top-link-icon {
  transition: transform .22s ease, filter .22s ease !important;
}

.emergency-notice {
  background: #014785 !important;
  color: #ffffff !important;
  border-bottom: 0 !important;
}

.emergency-notice-label,
.emergency-marquee-track span,
.emergency-notice-link {
  color: #ffffff !important;
}

.emergency-notice-label::before {
  background: #ffffff !important;
  color: #014785 !important;
}

.hero h1 {
  font-size: clamp(2.8rem,5.4vw,5.8rem) !important;
  line-height: .95 !important;
  letter-spacing: -.055em !important;
  max-width: 980px !important;
}

#townNewsHeading,
#eventsHeading,
.list-panel-title h3 {
  color: #014785 !important;
}

.list-panel-title svg {
  stroke: #014785 !important;
}

.emergency-notice-label {
  text-transform: uppercase !important;
}

.emergency-marquee.emergency-notice-link {
  display: block;
  color: #ffffff !important;
  text-decoration: none !important;
}

.emergency-marquee.emergency-notice-link:hover,
.emergency-marquee.emergency-notice-link:focus {
  text-decoration: underline !important;
  text-underline-offset: 4px;
}

.emergency-marquee.emergency-notice-link:focus {
  outline: 3px solid #ffffff !important;
  outline-offset: 3px;
}

.hero-video-slide video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hero h1 {
  margin-bottom: 32px !important;
}

.hero-search-typed-cursor {
  display: inline-block;
}

.emergency-notice {
  display: block !important;
}

.notice-date-box {
  background: var(--brand-blue-dark) !important;
  color: #ffffff !important;
}

.notice-date-box span {
  color: #ffffff !important;
  font-size: 1rem !important;
  line-height: 1 !important;
  font-weight: 600 !important;
  letter-spacing: .04em !important;
}

.notice-date-box strong {
  color: #ffffff !important;
  font-size: 1.55rem !important;
  line-height: 1 !important;
  font-weight: 600 !important;
}

.event-date-box {
  background: var(--brand-blue-dark) !important;
  color: #ffffff !important;
  border-color: var(--brand-blue-dark) !important;
}

.event-date-box span,
.event-date-box .event-month,
.event-date-box .month {
  color: #ffffff !important;
  font-size: 1.05rem !important;
  line-height: 1 !important;
  font-weight: 600 !important;
  letter-spacing: .04em !important;
  text-transform: uppercase !important;
}

.event-date-box strong,
.event-date-box .event-day,
.event-date-box .day {
  color: #ffffff !important;
  font-size: 1.55rem !important;
  line-height: 1 !important;
  font-weight: 600 !important;
}

.event-date-box {
  border-radius: 6px !important;
  overflow: hidden !important;
}

.enews-benefits {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 18px;
}

.enews-benefits span {
  display: inline-flex;
  align-items: center;
  padding: 7px 10px;
  background: var(--brand-light);
  color: var(--brand-blue-dark);
  border-radius: 999px;
  font-size: .9rem;
  line-height: 1;
  font-weight: 600 !important;
}

.enews-form {
  display: grid;
  gap: 10px;
}

.enews-form-row {
  display: flex;
  flex-direction: row;
  gap: 12px;
  align-items: center;
}

.enews-form label {
  color: var(--brand-text);
  font-size: .95rem;
  line-height: 1.3;
  font-weight: 600 !important;
}

.enews-privacy {
  margin: 2px 0 0 !important;
  color: var(--brand-muted);
  font-size: .9rem !important;
  line-height: 1.35 !important;
}

.enews-privacy a {
  color: var(--brand-blue);
  font-weight: 600 !important;
}

.enews-privacy a:hover,
.enews-privacy a:focus {
  color: var(--brand-blue-dark);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.enews-icon {
  display: inline-grid;
  place-items: center;
  width: 64px;
  height: 64px;
  margin-bottom: 18px;
  border-radius: 50%;
  background: var(--brand-blue);
  color: #ffffff;
  box-shadow: 0 8px 18px rgba(2,86,164,.18);
}

.enews-icon svg {
  width: 32px;
  height: 32px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.enews-photo {
  position: relative;
  min-height: 360px;
  background: linear-gradient(90deg,rgba(0,0,0,.08),rgba(0,0,0,.02)),
                url('../assets/home-page/subscribe/subscribe.jpg') center/cover no-repeat;
}

.enews-photo::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg,rgba(1,71,133,0) 45%,rgba(1,71,133,.32) 100%);
  pointer-events: none;
}

.enews-content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 44px;
}

.enews-content h2 {
  margin: 0 0 12px;
  color: var(--brand-blue-dark);
  font-size: clamp(1.9rem,3vw,2.65rem);
  line-height: 1.08;
  font-weight: 600 !important;
}

.enews-content p {
  margin: 0 0 22px;
  max-width: 680px;
  color: var(--brand-muted);
  font-weight: 400 !important;
}

.enews-content .enews-form {
  max-width: 620px;
}

.enews-photo {
  background-position: center center !important;
  background-size: cover !important;
}

/* =========================================================
   HOMEPAGE HERO TITLE SIZE REFINEMENT
   Drupal implementation note:
   Reduces the homepage hero title from the oversized test treatment
   while keeping it bold/semi-bold and readable over photography/video.
   This rule is placed late in the stylesheet so it overrides earlier
   prototype hero-title rules.
   ========================================================= */

.hero h1 {
  font-size: clamp(2.15rem,4vw,4.1rem) !important;
  line-height: 1.02 !important;
  letter-spacing: -.045em !important;
  font-weight: 600 !important;
  max-width: 900px !important;
}

/* =========================================================
   HOMEPAGE HERO TITLE SCREENSHOT MATCH
   Drupal implementation note:
   Matches the approved screenshot direction: large, clean, bold white
   hero title with strong but not overdone weight. This uses the normal
   approved 600 semi-bold weight and relies on size/shadow for impact
   rather than artificial stroke.
   ========================================================= */

.hero h1 {
  font-size: clamp(3.25rem,5.25vw,5.05rem) !important;
  line-height: 1 !important;
  letter-spacing: -.05em !important;
  font-weight: 600 !important;
  max-width: 900px !important;
  text-shadow: 0 3px 10px rgba(0,0,0,.62), 0 1px 2px rgba(0,0,0,.55) !important;
  -webkit-text-stroke: 0 !important;
}

/* =========================================================
   HOMEPAGE HERO TITLE FINAL WEIGHT
   Drupal implementation note:
   Hero title font weight is locked to 600 to match the approved
   screenshot direction and the Town's two-weight typography standard.
   ========================================================= */

.hero h1 {
  font-weight: 600 !important;
  -webkit-text-stroke: 0 !important;
}

/* =========================================================
   HOMEPAGE HERO TITLE FINAL APPROVED STYLE
   Drupal implementation note:
   The homepage hero title must render at font-weight 600. This rule is
   intentionally specific and placed at the end of the stylesheet to
   override earlier prototype rules, including generic span/text rules.
   No artificial stroke or 700/800 weight is used.
   ========================================================= */

body.homepage .hero .hero-content h1,
body.homepage .hero .hero-content h1 *,
.hero .hero-content h1,
.hero .hero-content h1 * {
  font-family: var(--font-primary) !important;
  font-weight: 500 !important;
  -webkit-text-stroke: 0 !important;
  color: #ffffff;
  text-shadow: 0 3px 12px rgba(0,0,0,.62), 0 1px 2px rgba(0,0,0,.55) !important;
}

body.homepage .hero .hero-content h1,
.hero .hero-content h1 {
  font-size: clamp(3.25rem,5.25vw,5.05rem) !important;
  line-height: 1 !important;
  letter-spacing: -.05em !important;
  max-width: 900px !important;
}

/* ---- PRC feature grid ---- */

.prc-feature {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 22px;
  align-items: stretch;
  margin: 28px 0 34px;
}

.prc-feature-content {
  position: relative;
  z-index: 2;
  display: flex;
  min-height: 310px;
  flex-direction: column;
  justify-content: flex-end;
  padding: 28px;
  color: #ffffff;
}

.prc-feature-content h2 {
  margin: 0 0 10px;
  color: #ffffff;
  font-size: clamp(1.6rem, 2.8vw, 2.35rem);
  line-height: 1.05;
}

.prc-feature-content p {
  max-width: 560px;
  margin: 0 0 18px;
  color: rgba(255,255,255,.92);
}

.prc-feature-side {
  display: grid;
  gap: 16px;
}

/* ---- Content sections ---- */

.content-section {
  padding: 34px 0;
  border-top: 1px solid var(--border);
}

.content-section h2 {
  margin: 0 0 16px;
  color: var(--brand-blue-dark);
  font-size: clamp(1.55rem, 2.4vw, 2rem);
  line-height: 1.25;
}

.content-section h3 {
  margin: 24px 0 10px;
  color: var(--brand-blue);
  font-size: 1.18rem;
  line-height: 1.28;
}

.content-section p {
  margin: 0 0 16px;
  color: var(--brand-text);
}

.content-section ul,
.content-section ol {
  margin: 0 0 18px 1.25rem;
  padding: 0;
}

.content-section li {
  margin-bottom: 8px;
}

/* ---- Service principles ---- */

.service-principles {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  margin-top: 22px;
}

/* ---- Action panel ---- */

.action-panel {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 22px;
  padding: 28px;
  margin: 32px 0;
  background: var(--brand-blue);
  color: #ffffff;
  border-radius: var(--radius);
}

.action-panel h2 {
  margin: 0 0 8px;
  color: #ffffff;
  font-size: 1.5rem;
}

.action-panel p {
  margin: 0;
  color: rgba(255,255,255,0.9);
}

/* ---- Strategy panel ---- */

.strategy-panel {
  padding: 28px;
  background: #f2f2f2;
  border: 1px solid var(--border);
  border-radius: var(--radius);
}

.strategy-panel h2 {
  margin-top: 0;
}

/* ---- Related links ---- */

.related-links {
  padding: 54px 0 64px;
  background: #f2f2f2;
}

.related-links h2 {
  margin: 0 0 24px;
  color: var(--brand-blue-dark);
  font-size: clamp(1.65rem, 2.6vw, 2.25rem);
}

.related-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}

.existing-promo-content {
  position: relative;
  z-index: 2;
  min-height: 230px;
  max-width: 620px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 8px;
  padding: 32px;
  color: #ffffff;
}

.existing-promo-content .promo-kicker {
  font-size: .82rem;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.existing-promo-content strong {
  display: block;
  font-size: clamp(2rem, 4vw, 3.4rem);
  line-height: .95;
  letter-spacing: -.04em;
}

.existing-promo-content span:last-child {
  max-width: 520px;
  font-size: 1.08rem;
  color: rgba(255,255,255,.92);
}

/* ---- Full width layout variants ---- */

.prc-full-width-layout {
  display: block !important;
}

/* ---- Existing page comparison button ---- */

.existing-page-link {
  margin-top: 10px;
}

/* --- Schedule browser widget --- */

.sched-widget {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  display: grid;
  grid-template-columns: 260px 1fr;
}

.sched-filters {
  border-right: 1px solid var(--border);
  background: #fff;
  height: 580px;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: #c8d6e4 transparent;
}

.sched-filters::-webkit-scrollbar {
  width: 4px;
}

.sched-filters::-webkit-scrollbar-thumb {
  background: #c8d6e4;
  border-radius: 4px;
}

.sched-activities {
  padding: 20px 22px;
  background: #f7f9fc;
  height: 580px;
  overflow-y: auto;
}

/* day-toggle pill buttons */

.sched-day {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 38px;
  height: 38px;
  padding: 0 8px;
  border-radius: 50px;
  border: 1.5px solid var(--border);
  background: #fff;
  color: var(--brand-text);
  font-family: inherit;
  font-size: .78rem;
  font-weight: 600;
  cursor: pointer;
  transition: background .15s,border-color .15s,color .15s;
}

.sched-day:hover {
  border-color: var(--brand-blue);
  color: var(--brand-blue);
}

.sched-day.on {
  background: var(--brand-blue);
  border-color: var(--brand-blue);
  color: #fff;
}

/* --- Accordion (DS: .acc-wrap / .acc / .acc-hdr / .acc-ico / .acc-body) --- */

.accordion,.acc-wrap {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}

.accordion-item,.acc {
  border-bottom: 1px solid var(--border);
}

.accordion-item:last-child,.acc:last-child {
  border-bottom: none !important;
}

/* Remove redundant top borders on content sections immediately following accordions */

.acc-wrap + .content-section,
.acc-wrap + .migrated-body-section,
.acc-wrap + .event-content-section {
  border-top: none !important;
}

/* --- FOI-specific layout --- */

.foi-layout {
  display: grid;
  grid-template-columns: minmax(0,1fr) 320px;
  gap: 42px;
  align-items: start;
}

.foi-content {
  max-width: none;
  margin: 0;
}

/* --- Migrated content sections --- */

.migrated-intro {
  margin: 0 0 28px;
}

.migrated-intro p {
  margin: 0 0 16px;
  color: var(--brand-text);
  font-weight: 400!important;
}

.migrated-intro a {
  color: var(--brand-blue);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.migrated-intro a:hover,.migrated-intro a:focus {
  color: var(--brand-blue-dark);
}

.migrated-accordion {
  margin-bottom: 32px;
}

.migrated-body-section {
  padding: 30px 0;
  border-top: 1px solid var(--border);
}

.migrated-body-section h2 {
  margin: 0 0 14px;
  color: var(--brand-blue-dark);
  font-size: clamp(1.45rem,2.2vw,1.9rem);
  line-height: 1.25;
  font-weight: 600!important;
}

.migrated-body-section h3 {
  margin: 22px 0 8px;
  color: var(--brand-blue-dark);
  font-size: 1.1rem;
  line-height: 1.28;
  font-weight: 600!important;
}

.migrated-body-section p {
  margin: 0 0 14px;
  color: var(--brand-text);
  font-weight: 400!important;
}

.migrated-body-section a {
  color: var(--brand-blue);
  text-decoration: underline;
  text-underline-offset: 3px;
  font-weight: 400!important;
}

.migrated-body-section a:hover,.migrated-body-section a:focus {
  color: var(--brand-blue-dark);
}

.migrated-divider {
  border: 0;
  border-top: 1px solid var(--border);
  margin: 0;
}

/* ---- DS: Data table (.tbl-wrap) ---- */

.tbl-wrap {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow-x: auto;
  box-shadow: 0 4px 12px rgba(2,86,164,.04);
}

.tbl-wrap table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: .94rem;
  min-width: 600px;
}

.tbl-wrap thead tr {
  background: var(--brand-blue-dark);
}

.tbl-wrap thead th {
  text-align: left;
  padding: 16px 18px;
  font-size: .94rem;
  font-weight: 700;
  color: #fff;
  border-bottom: 1px solid var(--border);
}

.tbl-wrap thead th *,
.tbl-wrap thead td * {
  color: #fff !important;
}

.tbl-wrap thead th a:hover,
.tbl-wrap thead td a:hover,
.tbl-wrap thead th a:focus,
.tbl-wrap thead td a:focus,
.tbl-wrap thead th a:active,
.tbl-wrap thead td a:active,
.tbl-wrap thead th a:visited:hover,
.tbl-wrap thead td a:visited:hover,
.tbl-wrap thead th a:visited:focus,
.tbl-wrap thead td a:visited:focus {
  color: #fff !important;
  text-decoration: none !important;
  opacity: 1 !important;
}

.tbl-wrap thead th:first-child {
  border-top-left-radius: calc(var(--radius) - 1px);
}

.tbl-wrap thead th:last-child {
  border-top-right-radius: calc(var(--radius) - 1px);
}

.tbl-wrap tbody td {
  padding: 16px 18px;
  border-bottom: 1px solid var(--border);
  color: var(--brand-text);
}

.tbl-wrap tbody tr:nth-child(odd) {
  background: #fff;
}

.tbl-wrap tbody tr:nth-child(even) {
  background: var(--brand-light);
}

.tbl-wrap tbody tr:last-child td {
  border-bottom: none;
}

.tbl-wrap tbody tr:last-child td:first-child {
  border-bottom-left-radius: calc(var(--radius) - 1px);
}

.tbl-wrap tbody tr:last-child td:last-child {
  border-bottom-right-radius: calc(var(--radius) - 1px);
}

/* --- Mail block --- */

.mail-block {
  padding: 20px;
  margin: 12px 0 18px;
  background: #f2f2f2;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  font-weight: 400!important;
}

/* --- CCTV map image --- */

.cctv-map-image {
  display: block;
  width: 100%;
  height: auto;
  margin-top: 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
}

.feedback-label {
  display: block;
  margin: 0 0 6px;
  color: var(--brand-text);
  font-size: .92rem;
  font-weight: 600!important;
}

.feedback-rating {
  display: flex;
  flex-direction: row-reverse;
  justify-content: flex-end;
  gap: 4px;
  margin: 8px 0 14px;
}

.feedback-rating label {
  display: inline-grid;
  place-items: center;
  width: 34px;
  height: 34px;
  color: var(--brand-muted);
  font-size: 1.55rem;
  line-height: 1;
  cursor: pointer;
  border-radius: 6px;
}

.feedback-submit {
  width: 100%;
  min-height: 44px;
  border: 0;
  border-radius: calc(var(--radius) - 2px);
  background: var(--brand-blue);
  color: #fff;
  font: inherit;
  font-weight: 600!important;
  cursor: pointer;
}

.feedback-submit:hover,.feedback-submit:focus {
  background: var(--brand-blue-dark);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.feedback-note {
  margin: 12px 0 0!important;
  color: var(--brand-muted)!important;
  font-size: .86rem!important;
}

.feedback-submit:focus,
.feedback-submit:focus-visible {
  background: var(--brand-blue-dark);
  text-decoration: underline;
  text-underline-offset: 3px;
  outline: 3px solid var(--brand-blue);
  outline-offset: 2px;
}

/* --- Page support banner (full-width strip above footer) --- */

.page-support-banner {
  padding: 0;
  background: #eaf3fb;
  border-top: 1px solid #d6e6f4;
}

.page-support-grid {
  display: grid;
  grid-template-columns: repeat(3,minmax(0,1fr));
  gap: 72px;
  align-items: start;
}

.page-support-icon {
  grid-column: 1;
  grid-row: 1 / span 2;
  width: 44px;
  height: 44px;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  background: transparent;
  color: var(--brand-blue);
  border: 0;
  border-radius: 0;
}

.page-support-icon svg {
  width: 40px;
  height: 40px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* =========================================
   NOTIFICATION TICKER
   ========================================= */

.notif-ticker, .toc-bnr {
  transition: background .4s;
  position: relative;
  z-index: 98;
}

.notif-ticker[data-type="notice"], .toc-bnr[data-type="notice"] {
  background: #004b87;
}

.notif-ticker[data-type="emergency"], .toc-bnr[data-type="emergency"] {
  background: #a81010;
}

.notif-ticker[data-type="warning"], .toc-bnr[data-type="warning"] {
  background: #a14d00;
}

.notif-ticker[data-type="resolved"], .toc-bnr[data-type="resolved"] {
  background: #1a6b3c;
}

.notif-ticker-inner {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 11px 0;
  min-height: 46px;
}

.notif-marquee, .toc-bnr-msg {
  flex: 1;
  overflow: hidden;
  position: relative;
}

.notif-marquee-track {
  display: inline-flex;
  white-space: nowrap;
  transition: opacity .28s;
}

.notif-marquee-track.fading {
  opacity: 0;
}

.notif-marquee-item {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding-right: 60px;
}

.notif-mtext {
  font-size: .9rem;
  font-weight: 600;
  color: #fff;
  line-height: 1.4;
}

.notif-ticker[data-type="warning"] .notif-mtext, .toc-bnr[data-type="warning"] .notif-mtext {
  color: #fff;
}

.notif-link {
  font-size: .9rem;
  font-weight: 600;
  color: #fff;
  text-decoration: underline;
  line-height: 1.4;
}

.notif-ticker[data-type="warning"] .notif-link, .toc-bnr[data-type="warning"] .notif-link {
  color: #fff !important;
}

.notif-link:hover,.notif-link:focus {
  background: transparent!important;
  outline: 2px solid currentColor;
}

/* Row 36 — Spacing between feedback textarea and submit button */

.feedback-submit {
  margin-top: 12px;
}

/* Row 34 — Custom validation error message for eNews form
   Replaces Firefox's native floating validation tooltip which
   breaks when parent has overflow:hidden */

.enews-form-error {
  display: none;
  margin: 0;
  color: #c0392b;
  font-size: .88rem;
  font-weight: 600 !important;
  line-height: 1.3;
}

.enews-form-error.visible {
  display: block;
}

/* =================================================================
   NEW PAGE CSS ADDITIONS
   Added for: calendar, development-applications, news-and-notices,
   typical-news-post, typical-applications-page,
   typical-event-details-page, parks-and-facilities
   ================================================================= */

/* ---- Shared utilities ---- */

.visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

.back-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 24px;
  color: var(--brand-blue);
  font-weight: 600;
}

.back-link:hover, .back-link:focus {
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ---- View toggle (shared: calendar + DA + parks) ---- */

.view-toggle {
  display: inline-flex;
  padding: 4px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 999px;
}

/* DA uses grey background for the toggle container */

.application-shell .view-toggle {
  background: #f2f2f2;
}

/* ================================================================
   EVENTS CALENDAR (calendar.html)
   ================================================================ */

.calendar-hero {
  background: linear-gradient(135deg, #fff 0%, #f1f3f5 100%);
  border-bottom: 1px solid var(--border);
  padding: 46px 0;
}

.calendar-hero h1 {
  margin: 0;
  color: var(--brand-blue-dark);
  font-size: clamp(2.2rem, 4vw, 3.5rem);
  line-height: 1.05;
  letter-spacing: -.045em;
  font-weight: 600;
}

.calendar-shell {
  padding: 48px 0 72px;
  background: #fff;
}

.calendar-layout {
  display: block;
}

.calendar-controls-panel {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  width: 100%;
  margin: 0 0 24px;
  background: #fff;
  border: 0;
  border-radius: 0;
}

.calendar-tools {
  margin: 0;
  padding: 0;
  background: transparent;
  border: 0;
}

.calendar-main.is-list-view .calendar-tools {
  display: none;
}

.category-filter {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 0;
  padding: 0;
  border: 0;
  min-inline-size: 0;
}

.category-filter legend, .category-panel-title {
  margin: 0 0 2px;
  color: var(--brand-text);
  font-size: 1rem;
  font-weight: 600;
}

.category-filter-options {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.category-swatch {
  width: 22px;
  height: 22px;
  border-radius: 999px;
  box-shadow: inset 0 0 0 3px rgba(255,255,255,.72), 0 0 0 1px rgba(15,45,64,.18);
}

.category-option[data-category="town"] .category-swatch {
  background: var(--event-town);
}

.category-option[data-category="community"] .category-swatch {
  background: var(--event-community);
}

.category-option[data-category="recreation"] .category-swatch {
  background: var(--event-recreation);
}

.category-option[data-category="arts"] .category-swatch {
  background: var(--event-arts);
}

.category-option[data-category="engagement"] .category-swatch {
  background: var(--event-engagement);
}

.category-option:focus-within {
  outline: 3px solid rgba(2,86,164,.22);
  outline-offset: 2px;
}

.calendar-filter-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.calendar-empty-state {
  display: none;
  margin: 18px 0 0;
  padding: 18px;
  background: #fff;
  border: 1px dashed var(--border);
  border-radius: var(--radius);
  color: var(--brand-muted);
  font-weight: 600;
}

.calendar-empty-state.active {
  display: block;
}

.calendar-view-header {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  flex-shrink: 0;
  margin: 0 0 0 auto;
}

/* Month calendar grid */

.month-calendar {
  overflow: visible;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: #fff;
  box-shadow: 0 6px 18px rgba(2,86,164,.06);
}

.month-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  flex: 0 0 46px;
}

.calendar-weekdays, .calendar-days {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
}

.calendar-weekdays div {
  padding: 14px 12px;
  background: #f2f2f2;
  border-right: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  color: var(--brand-blue-dark);
  font-size: 1rem;
  font-weight: 600;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: .04em;
}

.calendar-weekdays div:last-child {
  border-right: 0;
}

.calendar-day {
  min-height: 124px;
  padding: 10px;
  border-right: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  background: #fff;
}

.calendar-day:nth-child(7n) {
  border-right: 0;
}

.calendar-day.muted {
  background: #f7f8f9;
  color: #8a96a0;
}

.day-number {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 28px;
  height: 28px;
  margin-bottom: 8px;
  color: var(--brand-text);
  font-weight: 600;
}

.calendar-day.today .day-number {
  background: var(--brand-blue);
  color: #fff;
  border-radius: 999px;
}

/* Event pills */

.event-pill {
  display: block;
  position: relative;
  z-index: 1;
  margin: 5px 0 0;
  padding: 6px 8px;
  border-radius: 8px;
  font-size: .82rem;
  font-weight: 600 !important;
  line-height: 1.25;
}

.event-pill.town-event {
  background: var(--event-town-light);
  color: var(--brand-blue-dark);
  border: 1px solid var(--event-town);
}

.event-pill.community-event {
  background: var(--event-community-light);
  color: #356904;
  border: 1px solid var(--event-community);
}

.event-pill.recreation-event {
  background: var(--event-recreation-light);
  color: #8a4300;
  border: 1px solid var(--event-recreation);
}

.event-pill.arts-event {
  background: var(--event-arts-light);
  color: #503072;
  border: 1px solid var(--event-arts);
}

.event-pill.engagement-event {
  background: var(--event-engagement-light);
  color: #005e66;
  border: 1px solid var(--event-engagement);
}

.event-pill:hover, .event-pill:focus {
  z-index: 60;
}

.event-pill.town-event:hover, .event-pill.town-event:focus {
  background: var(--event-town);
  color: #fff;
}

.event-pill.community-event:hover, .event-pill.community-event:focus {
  background: var(--event-community);
  color: #fff;
}

.event-pill.recreation-event:hover, .event-pill.recreation-event:focus {
  background: var(--event-recreation);
  color: #fff;
}

.event-pill.arts-event:hover, .event-pill.arts-event:focus {
  background: var(--event-arts);
  color: #fff;
}

.event-pill.engagement-event:hover, .event-pill.engagement-event:focus {
  background: var(--event-engagement);
  color: #fff;
}

.event-popup {
  display: none;
  position: absolute;
  left: 0;
  top: calc(100% + 8px);
  z-index: 50;
  width: min(280px, calc(100vw - 48px));
  padding: 14px;
  background: #fff;
  color: var(--brand-text);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: 0 14px 30px rgba(15,45,64,.22);
  font-size: .92rem;
  line-height: 1.35;
  font-weight: 400;
  text-align: left;
}

.event-popup::before {
  content: "";
  position: absolute;
  left: 16px;
  top: -7px;
  width: 12px;
  height: 12px;
  background: #fff;
  border-left: 1px solid var(--border);
  border-top: 1px solid var(--border);
  transform: rotate(45deg);
}

.event-popup strong, .event-popup span, .event-popup em {
  display: block;
}

.event-popup strong {
  margin: 0 0 6px;
  color: var(--brand-blue-dark);
  font-size: 1rem;
  font-weight: 600;
}

.event-popup em {
  margin-top: 8px;
  color: var(--brand-muted);
  font-style: normal;
}

.event-pill:hover .event-popup, .event-pill:focus .event-popup {
  display: block;
}

/* Calendar/list view panels */

.calendar-view-panel, .list-view-panel {
  display: none;
}

.calendar-view-panel.active {
  display: block;
}

.list-view-panel.active {
  display: grid;
}

.list-view-panel {
  grid-template-columns: minmax(0,1fr) 320px;
  gap: 22px;
  align-items: start;
}

.list-main {
  display: grid;
  gap: 18px;
}

.event-list {
  gap: 0;
  margin-top: 0;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  background: #fff;
}

.event-date {
  display: grid;
  place-items: center;
  width: 112px;
  min-height: 112px;
  padding: 14px;
  border-radius: var(--radius);
  text-align: center;
  font-weight: 600;
  color: #fff;
}

.event-date span:first-child {
  font-size: 1.32rem;
  line-height: 1;
  font-weight: 600;
  letter-spacing: .015em;
  text-transform: uppercase;
}

.event-date span:last-child {
  font-size: 2.65rem;
  line-height: .95;
  font-weight: 600;
}

.event-details {
  padding-right: 24px;
}

.event-details h3 {
  margin: 0 0 6px;
  color: var(--brand-blue-dark);
  font-size: 1.4rem;
  line-height: 1.2;
  font-weight: 600;
}

.event-meta {
  display: flex;
  gap: 18px;
  flex-wrap: wrap;
  margin: 0 0 8px;
  color: var(--brand-muted);
  font-size: 1rem;
  font-weight: 600;
}

.event-details p {
  margin: 0;
  color: var(--brand-muted);
}

.event-tag {
  display: inline-flex;
  align-items: center;
  padding: 7px 10px;
  background: #f2f2f2;
  color: var(--brand-blue-dark);
  border-radius: 999px;
  font-size: .82rem;
  font-weight: 600;
  white-space: nowrap;
}

.event-tag-town {
  background: var(--event-town-light);
  color: var(--brand-blue-dark);
  border: 1px solid var(--event-town);
}

.event-tag-community {
  background: var(--event-community-light);
  color: #356904;
  border: 1px solid var(--event-community);
}

.event-tag-recreation {
  background: var(--event-recreation-light);
  color: #8a4300;
  border: 1px solid var(--event-recreation);
}

.event-tag-arts {
  background: var(--event-arts-light);
  color: #503072;
  border: 1px solid var(--event-arts);
}

.event-tag-engagement {
  background: var(--event-engagement-light);
  color: #005e66;
  border: 1px solid var(--event-engagement);
}

.category-counts {
  display: grid;
  gap: 8px;
  margin-top: 20px;
  padding-top: 18px;
  border-top: 1px solid var(--border);
}

.category-count {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 9px 10px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  font-size: .95rem;
  font-weight: 600;
}

.category-count-label {
  display: flex;
  align-items: center;
  gap: 8px;
}

.category-count-number {
  color: var(--brand-muted);
}

/* ================================================================
   PAGE HERO (news pages — no .page-banner before it)
   ================================================================ */

.page-hero {
  background: linear-gradient(135deg, #fff 0%, #f1f3f5 100%);
  border-bottom: 1px solid var(--border);
  padding: 46px 0 40px;
}

.page-hero h1 {
  margin: 0;
  color: var(--brand-blue-dark);
  font-size: clamp(2.15rem,3.7vw,3.35rem);
  line-height: 1.05;
  letter-spacing: -.045em;
  font-weight: 600;
}

.page-hero p {
  max-width: 850px;
  margin: 16px 0 0;
  color: var(--brand-muted);
  font-weight: 400;
}

/* News post .page-hero has a tighter h1 max-width */

.post-shell ~ .page-hero h1,
.page-hero.post-hero h1 {
  max-width: 1020px;
}

.news-shell {
  padding: 0 0 72px;
  background: #fff;
}

.news-layout {
  display: grid;
  grid-template-columns: minmax(0,1fr) 330px;
  gap: 36px;
  align-items: start;
}

.filter-header {
  padding: 22px 22px 0;
  background: #fff;
  color: var(--brand-blue-dark);
}

.filter-header h2,
.policies-shell .filter-header h2 {
  margin: 0 0 14px;
  color: var(--brand-blue-dark) !important;
  font-size: 1.25rem;
  line-height: 1.2;
  font-weight: 600;
}

.filter-body {
  padding: 0 22px 22px;
}

.form-group, .fg {
  margin-bottom: 20px;
}

.form-group label, .fg label, .pseudo-label,
.policies-shell .filter-panel label,
.policies-shell .filter-panel .fg label,
.policies-shell .filter-panel .form-item label {
  display: block;
  margin-bottom: 8px;
  color: var(--brand-text) !important;
  font-weight: 600;
}

.date-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
}

.category-checks {
  display: grid;
  gap: 9px;
  margin-top: 10px;
}

.check-row {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  color: var(--brand-muted);
  font-weight: 400;
}

.filter-actions {
  display: grid;
  gap: 10px;
  margin-top: 22px;
}

/* Admin toolbar overrides to guarantee it stays on top when drawer is closed, but drops below backdrop when drawer opens */

#toolbar-administration,
.toolbar,
.toolbar-menu,
.toolbar-tray,
.gin-secondary-toolbar,
#gin-secondary-toolbar,
.gin-breadcrumb,
.gin-back-to-admin,
[data-gin-toolbar] {
  z-index: 99999 !important;
}

body.menu-open #toolbar-administration,
body.menu-open .toolbar,
body.menu-open .toolbar-menu,
body.menu-open .toolbar-tray,
body.menu-open .gin-secondary-toolbar,
body.menu-open #gin-secondary-toolbar,
body.menu-open .gin-breadcrumb,
body.menu-open .gin-back-to-admin,
body.menu-open [data-gin-toolbar],
body.menu-open .page-opts-bar-wrap {
  z-index: 1 !important;
}

.news-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 22px;
  flex-wrap: wrap;
}

.news-tabs {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.news-tab {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  padding: 0 14px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: #fff;
  color: var(--brand-muted);
  font-weight: 600;
}

.news-tab.active, .news-tab:hover, .news-tab:focus {
  background: var(--brand-blue);
  border-color: var(--brand-blue);
  color: #fff;
}

.results-count {
  color: var(--brand-muted);
  font-weight: 400;
}

.subscribe-callout {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 20px;
  align-items: center;
  margin-bottom: 26px;
  padding: 22px 24px;
  background: var(--brand-light);
  border-left: 6px solid var(--brand-blue);
  border-radius: var(--radius);
}

.subscribe-callout h2 {
  margin: 0 0 4px;
  color: var(--brand-blue-dark);
  font-size: 1.25rem;
  font-weight: 600;
}

.subscribe-callout p {
  margin: 0;
  color: var(--brand-muted);
  font-weight: 400;
}

/* News list — scoped to avoid conflict with homepage .news-list / .news-card */

.news-shell .news-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 22px;
}

.news-image.news-image-placeholder {
  background: #e9f1f7;
  color: #4b607a;
  display: grid;
  place-items: center;
  font-family: inherit;
  font-weight: 700;
  font-size: 1.1rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  text-align: center;
  padding: 16px;
  line-height: 1.3;
}

.news-image {
  min-height: 178px;
  background: linear-gradient(135deg, #dce8f4, #f5f7fa);
  display: grid;
  place-items: center;
  color: var(--brand-blue-dark);
  font-weight: 600;
  text-align: center;
  padding: 0;
  overflow: hidden;
}

.news-image img {
  width: 100%;
  height: 100%;
  min-height: 178px;
  object-fit: cover;
  display: block;
}

.news-content {
  padding: 24px 50px 24px 0;
}

.news-meta {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
  margin-bottom: 10px;
  color: var(--brand-muted);
  font-size: .94rem;
  font-weight: 400;
}

.read-more {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--brand-blue);
  font-weight: 600;
}

.read-more svg {
  width: 1.1em;
  height: 1.1em;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform .18s ease;
}

.read-more:hover, .read-more:focus {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.read-more:hover svg, .read-more:focus svg {
  transform: translateX(4px);
}

.pagination {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-wrap: wrap;
  color: var(--brand-muted);
}

.page-links {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.page-links a, .page-links span {
  display: inline-grid;
  place-items: center;
  min-width: 38px;
  height: 38px;
  padding: 0 10px;
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--brand-blue);
  font-weight: 600;
  background: #fff;
}

.page-links span.current {
  background: var(--brand-blue);
  color: #fff;
  border-color: var(--brand-blue);
}

.page-links a:hover, .page-links a:focus {
  background: var(--brand-light);
  border-color: var(--brand-blue-dark);
}

/* ================================================================
   NEWS POST (typical-news-post.html)
   ================================================================ */

.post-shell {
  padding: 42px 0 72px;
  background: #fff;
}

.post-layout {
  display: grid;
  grid-template-columns: minmax(0,1fr) 330px;
  gap: 38px;
  align-items: start;
}

.post-image {
  width: 100%;
  height: auto;
  display: block;
  border-radius: var(--radius);
  margin-bottom: 28px;
}

.post-content {
  padding: 0;
}

.post-meta {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 18px;
  color: var(--brand-muted);
  font-weight: 400;
}

.post-content p {
  margin: 0 0 18px;
  color: var(--brand-text);
  font-weight: 400;
}

.post-content h2 {
  margin: 32px 0 12px;
  color: var(--brand-blue-dark);
  font-size: 1.42rem;
  line-height: 1.2;
  font-weight: 600;
}

/* ================================================================
   SUBSCRIBE MODAL (shared: news-and-notices + typical-news-post)
   ================================================================ */

.subscribe-modal-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 2000;
  background: rgba(0,0,0,.55);
  padding: 20px;
  overflow: auto;
}

.subscribe-modal-backdrop[hidden] {
  display: none !important;
}

.subscribe-modal-backdrop.open,
.subscribe-modal-backdrop.is-open {
  display: grid;
  place-items: center;
}

.subscribe-modal {
  width: min(440px, 100%);
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 24px 70px rgba(0,0,0,.28);
  overflow: hidden;
}

.subscribe-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 18px 20px;
  background: var(--brand-blue-dark);
  color: #fff;
}

.subscribe-modal-header h2 {
  color: #ffffff !important;
  margin: 0;
  font-size: 1.22rem;
  line-height: 1.2;
  font-weight: 600;
}

.subscribe-modal-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  padding: 0;
  margin: 0;
  border: 1px solid rgba(255,255,255,.55);
  border-radius: 999px;
  background: transparent;
  color: #fff;
  cursor: pointer;
  flex-shrink: 0;
  line-height: 1;
  transition: background-color .15s ease, border-color .15s ease;
}

.subscribe-modal-close svg {
  display: block;
  width: 14px;
  height: 14px;
  stroke: #ffffff;
  pointer-events: none;
}

.subscribe-modal-close:hover,
.subscribe-modal-close:focus {
  background: rgba(255,255,255,.14);
  border-color: #ffffff;
}

.subscribe-modal-body {
  padding: 20px;
}

.subscribe-modal-body .form-group {
  margin-bottom: 16px;
}

.subscribe-modal-body fieldset {
  border: 0;
  padding: 0;
  margin: 0;
}

.subscribe-modal-body legend {
  margin: 0 0 10px !important;
  color: var(--brand-text) !important;
  font-weight: 600 !important;
  font-size: 1rem;
}

.subscribe-category-grid {
  display: grid;
  gap: 8px;
  margin-top: 0;
}

.subscribe-category-option {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 44px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: #fff;
  color: var(--brand-text);
  font-size: 1rem;
  line-height: 1.2;
  font-weight: 600;
  cursor: pointer;
}

.subscribe-category-option:hover, .subscribe-category-option:focus-within {
  border-color: var(--brand-blue);
  background: var(--brand-light);
}

.subscribe-category-option span {
  display: block;
  padding-top: 1px;
}

.subscribe-modal-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 18px;
}

.subscribe-privacy-note {
  margin: 14px 0 0;
  color: var(--brand-muted);
  font-size: .9rem;
  font-weight: 400;
}

.subscribe-confirmation {
  display: none;
  margin-top: 14px;
  padding: 12px 14px;
  background: var(--brand-light);
  border-left: 5px solid var(--brand-blue);
  border-radius: 8px;
  color: var(--brand-blue-dark);
  font-weight: 600;
}

.subscribe-confirmation.show {
  display: block;
}

body.modal-open {
  overflow: hidden;
}

/* ================================================================
   DEVELOPMENT APPLICATIONS (development-applications.html)
   ================================================================ */

.planning-banner {
  background-image: url('../Landing Page/images/landing page/banner images/planning-and-development.jpg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.application-shell {
  padding: 48px 0 72px;
  background: #fff;
  cursor: default;
}

.results-header {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 20px;
  margin: 0 0 18px;
}

.map-view {
  display: block;
  position: relative;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  background: #fff;
  box-shadow: 0 6px 18px rgba(2,86,164,.06);
  margin-bottom: 1rem;
}

.map-toolbar {
  position: relative;
  z-index: 6;
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  padding: 14px;
  background: #fff;
  border-bottom: 1px solid var(--border);
}

.map-view:fullscreen,
.map-view:-webkit-full-screen,
.map-view.is-fullscreen-fallback {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  z-index: 99999 !important;
  border-radius: 0 !important;
  border: 0 !important;
  background: #fff !important;
  margin-bottom: 0 !important;
}

/* Loader for map iframe */

.map-loader {
  position: absolute;
  top: 71px;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: #f1f3f5;
  z-index: 5;
  transition: opacity 0.4s ease, visibility 0.4s ease;
}

.map-loader.hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none !important;
  display: none !important;
}

.map-loader p {
  margin-top: 16px;
  color: var(--brand-blue-dark);
  font-weight: 600;
}

.spinner {
  width: 40px;
  height: 40px;
  border: 4px solid rgba(2, 86, 164, 0.2);
  border-top-color: var(--brand-blue);
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  to { transform: rotate(360deg);
  };
}

.applications-list-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 350px;
  gap: 40px;
  align-items: start;
}

.applications-main-col {
  display: grid;
  gap: 36px;
  min-width: 0;
}

.application-list {
  display: grid;
  gap: 16px;
}

.ward-list-heading {
  margin: 32px 0 8px;
  padding: 24px 0 0;
  background: transparent;
  border: 0;
  border-top: 1px solid var(--border);
  border-radius: 0;
  color: var(--brand-blue-dark);
  font-size: 2rem;
  line-height: 1.15;
  font-weight: 600;
}

.application-list:first-child .ward-list-heading:first-of-type {
  margin-top: 0;
  border-top: 0;
  padding-top: 0;
}

.application-summary {
  margin: 0;
  color: var(--brand-muted);
}

.meta-row {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.application-action {
  align-self: center;
  white-space: nowrap;
}

.application-filter-empty {
  display: none;
  padding: 24px;
  border: 1px dashed var(--border);
  border-radius: var(--radius);
  background: #fff;
  color: var(--brand-muted);
}

.application-filter-empty.active {
  display: block;
}

.process-section {
  padding: 56px 0;
  background: #f2f2f2;
}

.process-section h2 {
  margin: 0 0 24px;
  color: var(--brand-blue-dark);
  font-size: clamp(1.65rem, 2.6vw, 2.25rem);
  font-weight: 600;
}

.process-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 18px;
}

/* ================================================================
   TYPICAL APPLICATIONS PAGE (development application detail)
   ================================================================ */

.detail-shell {
  padding: 48px 0 72px;
  background: #fff;
}

.detail-layout {
  display: grid;
  grid-template-columns: minmax(0,1fr) 320px;
  gap: 42px;
  align-items: start;
}

.detail-content {
  min-width: 0;
}

.intro-copy {
  margin: 0 0 28px;
  color: var(--brand-text);
  font-size: 1.14rem;
}

.content-section {
  padding: 30px 0;
}

.content-section:first-child {
  padding-top: 0;
}

.content-section h2 {
  margin: 0 0 16px;
  color: var(--brand-blue-dark);
  font-size: clamp(1.55rem, 2.4vw, 2rem);
  line-height: 1.15;
  font-weight: 600;
}

.content-section p {
  margin: 0 0 16px;
  color: var(--brand-text);
}

.content-section ul {
  margin: 0 0 16px 1.25rem;
  padding: 0;
}

.content-section li {
  margin-bottom: 8px;
}

.map-image {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  margin: 18px 0 0;
}

.document-list {
  display: grid;
  gap: 8px;
  margin: 0 0 0 1.25rem;
}

.label-row {
  display: grid;
  gap: 4px;
  padding: 11px 0;
  border-top: 1px solid var(--border);
}

.label-row:first-of-type {
  border-top: 0;
}

.label-row strong {
  color: var(--brand-blue-dark);
  font-weight: 600;
}

.label-row span {
  color: var(--brand-muted);
}

/* ================================================================
   TYPICAL EVENT DETAILS PAGE
   ================================================================ */

.event-hero {
  background: linear-gradient(135deg, #fff 0%, #f1f3f5 100%);
  border-bottom: 1px solid var(--border);
  padding: 46px 0 40px;
}

.event-hero h1 {
  max-width: 1040px;
  margin: 0;
  color: var(--brand-blue-dark);
  font-size: clamp(2.25rem, 4vw, 3.6rem);
  line-height: 1.05;
  letter-spacing: -.045em;
  font-weight: 600;
}

.event-meta-strip {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 18px;
  color: var(--brand-muted);
  font-weight: 400;
}

.event-category-tag {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 0 11px;
  border-radius: 999px;
  background: var(--event-community);
  color: #fff;
  font-size: .94rem;
  font-weight: 600;
}

.event-feature-image {
  display: block;
  width: 100%;
  max-height: 450px;
  height: auto;
  object-fit: cover;
  margin: 0 0 28px;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  box-shadow: 0 6px 18px rgba(2,86,164,.08);
}

.event-feature-image-wrap {
  margin: 0 0 28px;
}

.event-feature-image-wrap .event-feature-image {
  margin-bottom: 0;
}

.event-feature-image-note {
  margin: 8px 0 0;
  color: var(--brand-muted);
  font-size: .92rem;
  font-weight: 400;
}

.event-shell {
  padding: 42px 0 72px;
  background: #fff;
}

.event-layout {
  display: grid;
  grid-template-columns: minmax(0,1fr) 330px;
  gap: 38px;
  align-items: start;
}

.event-main {
  min-width: 0;
}

.event-content-section {
  padding: 30px 0;
  border-top: 1px solid var(--border);
}

.event-content-section:first-of-type {
  border-top: 0;
  padding-top: 0;
}

.event-content-section h2 {
  margin: 0 0 14px;
  color: var(--brand-blue-dark);
  font-size: clamp(1.45rem, 2.2vw, 1.9rem);
  line-height: 1.15;
  font-weight: 600;
}

.event-content-section h3 {
  margin: 22px 0 8px;
  color: var(--brand-blue-dark);
  font-size: 1.1rem;
  line-height: 1.2;
  font-weight: 600;
}

.event-content-section p {
  margin: 0 0 14px;
  color: var(--brand-text);
  font-weight: 400;
}

.event-content-section li {
  font-size: 1.16rem;
  line-height: 1.62;
}

.event-content-section a {
  color: var(--brand-blue);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.event-details-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 18px;
  margin: 22px 0 0;
}

.event-actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin: 24px 0 0;
}

.event-actions-top {
  margin: 0 0 24px;
}

/* ================================================================
   PARKS AND FACILITIES (parks-and-facilities.html)
   ================================================================ */

.facilities-banner {
  background-image: url('../assets/images/parks-facilities-banner.jpg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.facility-tool-section {
  padding: 48px 0 72px;
  background: #fff;
}

.facilities-map-embed {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  background: #fff;
  box-shadow: 0 6px 18px rgba(2,86,164,.06);
}

.date-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
}

.pg-item:hover {
  background: var(--brand-light);
  border-color: var(--brand-blue);
}

.pg-item.active, .pg-item[aria-current="page"] {
  background: var(--brand-blue);
  color: #fff;
  border-color: var(--brand-blue);
}

.pg-item.disabled, .pg-item[aria-disabled="true"] {
  color: #767676;
  border-color: #e5e7eb;
  cursor: not-allowed;
  pointer-events: none;
  background: #fff;
}

/* ================================================================
   POLICIES PAGE
   ================================================================ */

.policies-shell {
  padding: 48px 0 72px;
  background: #fff;
}

.policies-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 330px;
  gap: 36px;
  align-items: start;
}

.policies-toolbar {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  margin-bottom: 28px;
  padding-bottom: 22px;
  border-bottom: 1px solid var(--border);
}

.policies-help {
  margin: 0;
  color: var(--brand-muted);
  font-size: .95rem;
  line-height: 1.6;
}

.policies-help a {
  color: var(--brand-blue);
  font-weight: 600;
  text-decoration: none;
}

.policies-help a:hover, .policies-help a:focus {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.policies-results-heading {
  font-weight: 700;
  color: var(--brand-blue-dark);
  margin: 0 0 20px;
}

.policy-list {
  display: grid;
  gap: 16px;
  margin-bottom: 32px;
}

.policy-meta {
  display: grid;
  grid-template-columns: 90px 1fr;
  gap: 0;
  margin: 0 0 18px;
}

.policy-meta-row {
  display: contents;
}

.policy-meta dt {
  font-size: 18px;
  font-weight: 700;
  color: var(--brand-muted);
  padding: 4px 12px 4px 0;
  align-self: baseline;
}

.policy-meta dd {
  font-size: 18px;
  color: var(--brand-text);
  padding: 4px 0;
  margin: 0;
  align-self: baseline;
  line-height: 1.6;
}

.policy-meta dd a {
  color: var(--brand-blue);
  font-weight: 600;
  text-decoration: none;
}

.policy-meta dd a:hover, .policy-meta dd a:focus {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.policy-meta-summary dt, .policy-meta-summary dd {
  padding-top: 6px;
}

.news-pagination-bar {
  padding-top: 24px;
  border-top: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
  margin-top: 32px;
}

/* ══════════════════════════════════════════════════════════════════════
   SITE MAP PAGE
   ══════════════════════════════════════════════════════════════════════ */

.sitemap-hero {
  background: linear-gradient(135deg, #fff 0%, #eee 100%);
  border-bottom: 1px solid var(--border);
  padding: 54px 0 48px;
}

.sitemap-hero h1, .sitemap-hero-row h1 {
  margin: 0 0 16px;
  color: var(--brand-blue-dark);
  font-size: clamp(2.3rem, 4vw, 3.65rem);
  line-height: 1.05;
  letter-spacing: -.045em;
}

.sitemap-hero p {
  max-width: 920px;
  margin: 0;
  color: var(--brand-muted);
}

.sitemap-shell {
  padding: 42px 0 72px;
  background: #fff;
}

.sitemap-note {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 20px;
  align-items: center;
  margin-bottom: 34px;
  padding: 22px 24px;
  background: #fff;
  border: 1px solid var(--border);
  border-left: 6px solid var(--brand-blue);
  border-radius: var(--radius);
  box-shadow: 0 6px 18px rgba(2,86,164,.08);
}

.sitemap-note p {
  margin: 0;
  color: var(--brand-muted);
  font-weight: 700;
}

.sitemap-note a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 16px;
  background: var(--brand-blue);
  color: #fff;
  border-radius: calc(var(--radius) - 2px);
  font-weight: 900;
  white-space: nowrap;
}

.sitemap-note a:hover, .sitemap-note a:focus {
  background: var(--brand-blue-dark);
  text-decoration: underline;
  text-underline-offset: 4px;
}

.bucket-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 34px;
  align-items: start;
}

.bucket {
  background: transparent;
  border: 0;
  min-width: 0;
}

.bucket-header {
  padding: 0 0 8px;
  margin-bottom: 14px;
}

.bucket-header h2 {
  margin: 0;
  color: var(--brand-blue-dark);
  font-size: 1.55rem;
  line-height: 1.1;
  letter-spacing: -.025em;
}

.sitemap-footer-note {
  margin-top: 34px;
  padding: 18px 22px;
  background: #f5f7fa;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--brand-muted);
  font-size: .95rem;
}

.sitemap-subpage-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.7em;
  height: 1.7em;
  margin-left: 7px;
  border: 1px solid var(--border);
  border-radius: 50%;
  background: #fff;
  color: var(--brand-blue);
  font: inherit;
  font-size: 0.9em;
  line-height: 1;
  font-weight: 600;
  cursor: pointer;
  vertical-align: middle;
}

.sitemap-subpage-toggle:hover, .sitemap-subpage-toggle:focus {
  background: var(--brand-blue);
  color: #fff;
  border-color: var(--brand-blue);
}

.sitemap-subpage-toggle .accordion-icon {
  display: block;
  transform: translateY(-0.05em);
}

.sitemap-hero-row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
}

.sitemap-hero-row h1 {
  margin: 0;
}

.sitemap-controls {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  margin: 0 0 24px;
}

.sitemap-hero-row .sitemap-controls {
  align-items: center;
  margin: 0 0 8px;
  flex: 0 0 auto;
}

/* ===== Agendas & Minutes – page-scoped styles ===== */

/* Calendar embed container */

.council-calendar-embed {
  margin-top: 28px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: #f0f3f6;
  overflow: hidden;
  min-height: 480px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Legend list */

.council-legend-list {
  margin: 14px 0 0;
}

/* Dot swatch – square with slight rounding, matching calendar pill aesthetic */

.legend-dot {
  width: 22px;
  height: 22px;
  border-radius: 4px;
  flex-shrink: 0;
}

.legend-dot-meetings {
  background: #0256a4;
}

.legend-dot-committees {
  background: #236b18;
}

.legend-dot-public {
  background: #c0002a;
}

.legend-dot-advisory {
  background: #c75f00;
}

.legend-dot-library {
  background: #7a4ab0;
}

.form-step {
  display: none;
}

.form-step.active {
  display: block;
}

.dropdown-option {
  color: var(--brand-text);
}

.dropdown-option:hover,
  .dropdown-option.active {
  background: var(--brand-blue) !important;
  color: #fff !important;
}

.dropdown-option:focus {
  background: var(--brand-blue) !important;
  color: #fff !important;
  outline: none;
}

/* --- Diwali Slider --- */

.diwali-slider-wrap {
  position: relative;
  width: 100%;
  max-width: 760px;
  margin: 40px auto;
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: none !important;
  height: auto !important;
  max-height: none !important;
  aspect-ratio: unset !important;
}

.diwali-slider {
  display: flex;
  transition: transform 0.4s ease-in-out;
  height: auto !important;
  max-height: none !important;
  aspect-ratio: unset !important;
  align-items: center;
}

.diwali-slide {
  flex: 0 0 100%;
  width: 100%;
  height: auto !important;
}

.diwali-slide img {
  width: 100%;
  height: auto !important;
  max-height: none !important;
  aspect-ratio: unset !important;
  object-fit: contain;
  display: block;
}

.slider-dots {
  display: none !important;
}

.slider-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: rgba(255,255,255,0.5);
  border: none;
  cursor: pointer;
  padding: 0;
  transition: background 0.2s;
}

.slider-dot.active {
  background: #fff;
}

.facility-meta {
  display: grid;
  grid-template-columns: 100px 1fr;
  gap: 0;
  margin: 0 0 18px 0;
}

.facility-meta-row {
  display: contents;
}

.facility-meta dt {
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--brand-muted);
  padding: 5px 12px 5px 0;
  align-self: baseline;
}

.facility-meta dd {
  font-size: 0.9rem;
  color: var(--brand-text);
  padding: 5px 0;
  margin: 0;
  align-self: baseline;
  line-height: 1.55;
}

/* Status Indicators */

.status-indicator {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  font-size: 0.9rem;
}

.status-indicator::before {
  content: '';
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: currentColor;
}

.status-indicator.open {
  color: #2b8a3e;
  /* Forest Green */;
}

.status-indicator.limited {
  color: #e67e22;
  /* Orange */;
}

.status-indicator.closed {
  color: #c92a2a;
  /* Red */;
}

/* Parks & Facilities Map Embed Fullscreen Container & Top Toolbar */

.map-embed-wrapper {
  display: block !important;
  position: relative;
  width: 100% !important;
  background: #ffffff;
  border: 1px solid var(--border, #cbd5e1);
  border-radius: var(--radius, 8px);
  overflow: hidden;
  margin-bottom: 24px;
  box-shadow: 0 4px 18px rgba(2, 86, 164, 0.08);
  box-sizing: border-box !important;
}

.map-fullscreen-top-bar {
  display: flex !important;
  justify-content: flex-end !important;
  align-items: center !important;
  width: 100% !important;
  padding: 10px 16px;
  background: #ffffff;
  border-bottom: 1px solid var(--border, #e2e8f0);
  box-sizing: border-box !important;
}

/* Fullscreen Mode Padding & Height */

.map-embed-wrapper:fullscreen,
.map-embed-wrapper:-webkit-full-screen,
.map-embed-wrapper.is-fullscreen-fallback {
  width: 100vw !important;
  height: 100vh !important;
  max-width: 100vw !important;
  max-height: 100vh !important;
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  z-index: 999999 !important;
  background: #ffffff !important;
  border-radius: 0 !important;
  border: none !important;
  margin: 0 !important;
  padding: 0 !important;
  box-sizing: border-box !important;
  display: flex !important;
  flex-direction: column !important;
}

.map-embed-wrapper:fullscreen .map-fullscreen-top-bar,
.map-embed-wrapper:-webkit-full-screen .map-fullscreen-top-bar,
.map-embed-wrapper.is-fullscreen-fallback .map-fullscreen-top-bar {
  position: relative !important;
  top: 0 !important;
  right: 0 !important;
  width: 100% !important;
  flex-shrink: 0 !important;
  background: #ffffff !important;
  border-bottom: 1px solid #e2e8f0 !important;
  display: flex !important;
  justify-content: flex-end !important;
  align-items: center !important;
  padding: 16px !important;
  z-index: 1000001 !important;
  margin: 0 !important;
  box-sizing: border-box !important;
}

/* Custom Multi-Select Dropdown with Search & Checkboxes */

.custom-multiselect {
  position: relative;
  width: 100%;
  margin-bottom: 20px;
}

.multiselect-trigger {
  width: 100%;
  padding: 12px 16px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  font-size: 0.95rem;
  font-family: inherit;
  color: var(--brand-text);
  text-align: left;
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
  box-sizing: border-box;
  transition: border-color 0.15s, box-shadow 0.15s;
}

.multiselect-trigger:focus, .multiselect-trigger.active {
  outline: none;
  border-color: var(--brand-blue);
  box-shadow: 0 0 0 3px rgba(2, 86, 164, 0.15);
}

.multiselect-trigger svg {
  width: 14px;
  height: 14px;
  stroke: var(--brand-muted);
  fill: none;
  stroke-width: 2.5;
  transition: transform 0.2s ease;
  margin-left: 8px;
  flex-shrink: 0;
}

.multiselect-trigger.active svg {
  transform: rotate(180deg);
}

.multiselect-dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12);
  z-index: 100;
  margin-top: 6px;
  display: none;
  opacity: 0;
  transform: translateY(-8px);
  transition: opacity 0.2s ease, transform 0.2s ease, display 0.2s allow-discrete;
}

.multiselect-dropdown.show {
  display: block;
  opacity: 1;
  transform: translateY(0);
}

.multiselect-search-wrap {
  padding: 10px;
  border-bottom: 1px solid var(--border);
  position: relative;
}

.multiselect-options {
  max-height: 220px;
  overflow-y: auto;
  padding: 8px 0 !important;
}

.multiselect-option:hover {
  background: var(--brand-light);
}

.multiselect-option span {
  align-self: center !important;
  vertical-align: middle !important;
  line-height: 1.2 !important;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding: 0 !important;
  margin: 0 !important;
}

.multiselect-option.hidden {
  display: none;
}

.multiselect-selected-text {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: calc(100% - 20px);
}

.highlight-info {
  background: var(--brand-light);
  border: 1px solid #c5d8ef;
  border-radius: var(--radius);
  padding: 18px 22px;
  margin-bottom: 24px;
}

.highlight-warning {
  background: #fff4e5;
  border: 1px solid #f0c987;
  border-radius: var(--radius);
  padding: 18px 22px;
  margin-bottom: 24px;
}

.highlight-success {
  background: var(--brand-green-light);
  border: 1px solid #c8dcb0;
  border-radius: var(--radius);
  padding: 18px 22px;
  margin-bottom: 24px;
}

.highlight-info h2,.highlight-warning h2,.highlight-success h2 {
  margin: 0 0 10px;
  color: var(--brand-blue-dark);
  font-size: 1.25rem;
}

.highlight-info p,.highlight-warning p,.highlight-success p {
  margin: 0 0 10px;
}

/* Responsive table wrapper to enable horizontal scrolling on overflow */

.table-scroll-wrapper,
.table-wrapper,
.tbl-wrap {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  overflow-x: auto !important;
  -webkit-overflow-scrolling: touch !important;
}

.table-scroll-wrapper table,
.table-wrapper table,
.tbl-wrap table {
  width: 100% !important;
  min-width: max-content !important;
  /* Force overflow when content exceeds width */;
}

.table-scroll-wrapper {
  margin-bottom: 24px;
  border-radius: var(--radius);
}

.table-scroll-wrapper table {
  margin-bottom: 0 !important;
}

/* Keyboard focus indicators for scrollable table wrappers (WCAG 2.1.1 & 2.4.7) */
.table-scroll-wrapper:focus,
.table-wrapper:focus,
.tbl-wrap:focus,
.table-responsive:focus {
  outline: none;
}

.table-scroll-wrapper:focus-visible,
.table-wrapper:focus-visible,
.tbl-wrap:focus-visible,
.table-responsive:focus-visible {
  outline: 3px solid var(--brand-blue, #1a5ea8) !important;
  outline-offset: 2px !important;
  border-radius: var(--radius, 4px) !important;
}

/* ── News filter: gap between Search and Reset All buttons.
   Drupal wraps both buttons in its own inner form-actions/edit-actions
   div before they reach .filter-actions, so the gap must apply to
   that inner wrapper, not .filter-actions itself. ── */

.filter-actions .form-actions,
.filter-actions #edit-actions {
  display: grid !important;
  gap: 10px !important;
}

/* ── News filter: Search / Reset buttons — ID selectors used
   deliberately, since they outrank the sitewide unified input/select
   rule (.news-shell input:not(...):not(...)) that overrides
   class-based attempts back to white. ── */

.news-empty-state {
  text-align: center;
  padding: 48px 24px;
  color: var(--brand-muted);
  font-size: 1.1rem;
  font-weight: 600;
  grid-column: 1 / -1;
}

.news-empty-wrapper {
  width: 100%;
  text-align: center;
  padding: 80px 20px;
}

.news-empty-wrapper h1 {
  font-size: 2.25rem;
  font-weight: 700;
  color: #0d47a1;
  /* replace with your exact Caledon brand blue if different */
  margin: 0;
}

/* ── Google Translate & BugHerd suppression (accessibility + staging tools) ── */

.goog-te-banner-frame.skiptranslate,
#goog-gt-tt,
#goog-gt-votingHiddenPane,
#goog-gt-votingForm,
#bugherd_embed_communication_frame,
[id*="bugherd"][src*="bugherd"],
.goog-te-balloon-frame {
  display: none !important;
}

body {
  top: 0px !important;
}

.goog-text-highlight {
  background: none !important;
  box-shadow: none !important;
}

/* ── Google Translate link accessibility (WCAG 1.4.1 Use of Color) ──
   Ensures inline attribution links ("Powered by Translate") have an underline
   and 3:1+ high-contrast color so they do not rely on color alone. */
.VIpgJd-ZVi9od-l4eHX-hSRGPd,
a.VIpgJd-ZVi9od-l4eHX-hSRGPd,
.goog-logo-link,
.goog-te-gadget a,
a[href*="translate.google.com"] {
  text-decoration: underline !important;
  text-underline-offset: 2px !important;
  color: #014785 !important;
  display: inline !important;
}

.VIpgJd-ZVi9od-l4eHX-hSRGPd:hover,
.VIpgJd-ZVi9od-l4eHX-hSRGPd:focus,
.goog-logo-link:hover,
.goog-logo-link:focus,
.goog-te-gadget a:hover,
.goog-te-gadget a:focus,
a[href*="translate.google.com"]:hover,
a[href*="translate.google.com"]:focus {
  text-decoration: underline !important;
  color: #0d47a1 !important;
}


/* Sidebar Toggle Button Styles */

.submenu-toggle {
  flex: 0 0 auto;
  width: 1.4em;
  height: 1.4em;
  border: 1.5px solid #a9c8e4;
  border-radius: 50%;
  background: #ffffff;
  color: var(--brand-blue, #0256a4);
  cursor: pointer;
  padding: 0;
  font-size: 1.25rem;
  line-height: 1;
  display: grid;
  place-items: center;
  transition: background 0.2s ease, border-color 0.2s ease;
  margin-left: 0;
  font-weight: 700;
}

.submenu-toggle:hover {
  border-color: var(--brand-blue, #0256a4);
}

.submenu-toggle[aria-expanded="true"] {
  border-color: var(--brand-blue, #0256a4);
  border-width: 2px;
}

.submenu-toggle .toggle-icon {
  display: inline-block;
  transform: translateY(-0.06em);
  font-weight: bold;
}

.submenu-toggle:focus-visible {
  outline: 2px solid var(--brand-blue, #0256a4);
  outline-offset: 1px;
}

/* ──────────────────────────────────────────────────────────────────────────
   MIGRATED PAGE-SPECIFIC AND COMPONENT-SPECIFIC STYLES
   ────────────────────────────────────────────────────────────────────────── */

/* ──────────────────────────────────────────────────────────────────────────
   MIGRATED PAGE-SPECIFIC AND COMPONENT-SPECIFIC STYLES
   ────────────────────────────────────────────────────────────────────────── */

/* ── Global Keyframes & Toolbar Styling ── */

@keyframes toc-spin {
  from { transform: rotate(0deg);
  }
  to { transform: rotate(360deg);
  };
}

.quickedit-toolbar-label {
  color: #fff;
  font-style: normal;
  font-weight: 600;
  font-size: .8rem;
}

/* ── Node Preview Modal Button Alignment (Scoped strictly to Node Preview) ── */
body:has(.node-preview-container) .ui-dialog:has(.ui-dialog-buttonset) {
  min-width: 380px !important;
  max-width: min(520px, calc(100vw - 32px)) !important;
  box-sizing: border-box !important;
}

body:has(.node-preview-container) .ui-dialog .ui-widget-content.ui-dialog-buttonpane {
  display: flex !important;
  justify-content: flex-end !important;
  align-items: center !important;
  padding: 14px 20px 16px !important;
  background: var(--gin-bg-app, #f8f9fa) !important;
  border-top: 1px solid var(--gin-border-color-layer, #e5e7eb) !important;
}

body:has(.node-preview-container) .ui-dialog .ui-dialog-buttonset {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 12px !important;
  width: auto !important;
  float: none !important;
  margin: 0 !important;
}

body:has(.node-preview-container) .ui-dialog .ui-dialog-buttonset button,
body:has(.node-preview-container) .ui-dialog .ui-dialog-buttonset .button {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  white-space: nowrap !important;
  height: 38px !important;
  min-height: 38px !important;
  max-height: 38px !important;
  padding: 0 18px !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  line-height: 1 !important;
  border-radius: 8px !important;
  box-sizing: border-box !important;
  cursor: pointer !important;
  margin: 0 !important;
  text-align: center !important;
  text-decoration: none !important;
  transition: all 0.15s ease !important;
}

/* Secondary button (Cancel in preview) */
body:has(.node-preview-container) .ui-dialog .ui-dialog-buttonset button:first-child:not(:last-child):not(.button--danger),
body:has(.node-preview-container) .ui-dialog .ui-dialog-buttonset .button:first-child:not(:last-child):not(.button--danger) {
  background: #f1f3f5 !important;
  color: #212529 !important;
  border: 1px solid #ced4da !important;
}

body:has(.node-preview-container) .ui-dialog .ui-dialog-buttonset button:first-child:not(:last-child):not(.button--danger):hover,
body:has(.node-preview-container) .ui-dialog .ui-dialog-buttonset .button:first-child:not(:last-child):not(.button--danger):hover {
  background: #e9ecef !important;
  color: #000000 !important;
  border-color: #adb5bd !important;
}

/* Primary button (Leave preview) */
body:has(.node-preview-container) .ui-dialog .ui-dialog-buttonset button:last-child:not(.button--danger),
body:has(.node-preview-container) .ui-dialog .ui-dialog-buttonset .button:last-child:not(.button--danger) {
  background: var(--brand-blue, #0256a4) !important;
  color: #ffffff !important;
  border: 1px solid var(--brand-blue, #0256a4) !important;
}

body:has(.node-preview-container) .ui-dialog .ui-dialog-buttonset button:last-child:not(.button--danger):hover,
body:has(.node-preview-container) .ui-dialog .ui-dialog-buttonset .button:last-child:not(.button--danger):hover {
  background: var(--brand-blue-dark, #014785) !important;
  color: #ffffff !important;
  border-color: var(--brand-blue-dark, #014785) !important;
}


.node-development-application-new .page-support-banner {
  width: 100%;
  background: #f8f9fa;
  padding: 40px 0;
  border-top: 1px solid #eaeaea;
}

.node-development-application-new .page-support-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(280px,1fr));
  gap: 30px;
}

.node-development-application-new .page-support-icon svg {
  width: 48px;
  height: 48px;
  stroke: var(--brand-blue,#1a5ea8);
  fill: none;
  stroke-width: 1.5;
  margin-bottom: 16px;
}

.event-detail-page .ed-back-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 20px 0 0;
  font-size: 0.92rem;
  font-weight: 600;
  text-decoration: none;
  color: #1b2a4a;
}

.event-detail-page .ed-back-link:hover {
  text-decoration: underline;
}

.event-detail-page .ed-shell {
  padding: 24px 0 64px;
}

.event-detail-page .ed-layout {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
  gap: 28px;
  align-items: start;
}

.event-detail-page .ed-image {
  border-radius: 12px;
  overflow: hidden;
  line-height: 0;
}

.event-detail-page .ed-image img {
  width: 100%;
  height: auto;
  display: block;
}

.event-detail-page .ed-datetime-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 10px;
  background: #eef1fb;
  color: #1b2a4a;
  flex-shrink: 0;
}

.event-detail-page .ed-datetime-text {
  font-size: 1rem;
  color: #1b2a4a;
  flex: 1 1 auto;
  min-width: 200px;
}

.event-detail-page .ed-address {
  font-size: 0.98rem;
  line-height: 1.6;
  color: #333;
}

.event-detail-page .ed-address a {
  color: #1b2a4a;
  font-weight: 600;
}

.event-detail-page .ed-body {
  font-size: 0.98rem;
  line-height: 1.7;
  color: #333;
}

.event-detail-page .ed-body p:first-child {
  margin-top: 0;
}

.event-detail-page .ed-share-actions {
  display: flex;
  gap: 10px;
}

.node-news .recent-posts-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.node-news .recent-posts-list li {
  padding: 10px 0;
  border-bottom: 1px solid #f0f0f0;
}

.node-news .recent-posts-list li:last-child {
  border-bottom: none;
}

.node-news .recent-posts-list a {
  display: block;
  color: var(--brand-text) !important;
  font-size: 1.125rem;
  font-weight: 600;
  text-decoration: none;
  line-height: 1.3;
}

.node-news .recent-posts-list a:hover {
  color: var(--brand-blue) !important;
  text-decoration: underline;
}

.node-news .recent-posts-list .recent-post-date {
  display: block;
  font-size: .9rem;
  color: var(--brand-muted);
  font-weight: 700;
  margin-top: 3px;
}

.node-news .content-empty-notice {
  background: #fff8e1;
  border: 1px solid #f0d98c;
  border-radius: var(--radius,6px);
  padding: 14px 16px;
  color: #6b5900;
  font-size: .95rem;
}

.node-news .post-image-wrap {
  position: relative;
  margin: 0 0 20px;
}

.node-news .post-image-wrap .post-image {
  width: 100%;
  height: auto;
  display: block;
  border-radius: var(--radius,6px);
}

/* ── Node: Typical Page (node--typical-page.html.twig) ── */

.node-typical-page .acc-wrap>.acc,
.node-typical-page .acc-wrap>.paragraph--type--accordion-item,
.node-typical-page .acc-wrap>.paragraph--type--accordion-item-simple {
  background: #fff;
  border: 1px solid #ddd;
  margin-bottom: 4px!important;
}

.node-typical-page .acc-wrap>.acc:last-child,
.node-typical-page .acc-wrap>.paragraph--type--accordion-item:last-child,
.node-typical-page .acc-wrap>.paragraph--type--accordion-item-simple:last-child {
  margin-bottom: 0!important;
}

.node-typical-page .acc-ico {
  display: inline-block!important;
  font-size: 22px!important;
  font-weight: 400!important;
  line-height: 1!important;
  flex-shrink: 0!important;
  color: var(--brand-blue,#1a5ea8)!important;
  min-width: 20px!important;
  text-align: center!important;
  background-image: none!important;
  width: auto!important;
  height: auto!important;
  position: static!important;
  border: none!important;
  transform: none!important;
  transition: none!important;
}

.node-typical-page .acc-ico::before {
  content: '+'!important;
  content: '+' / '' !important;
  speak: never;
  display: block!important;
  background: none!important;
  width: auto!important;
  height: auto!important;
  position: static!important;
  transition: none!important;
}

.node-typical-page .acc-ico::after {
  content: none!important;
  display: none!important;
}

.node-typical-page .two-col-layout {
  display: flex;
  gap: 32px;
  align-items: flex-start;
  margin-bottom: 28px;
  flex-wrap: wrap;
}

.node-typical-page .field--name-field-accordion-content .field__label,
.node-typical-page .field--name-field-body .field__label,
.node-typical-page .field--name-field-highlight-content .field__label,
.node-typical-page .field--name-field-disclaimer-text .field__label {
  display: none;
}

/* ── Paragraph: Custom Embed (paragraph--custom-embed.html.twig) ── */

.paragraph--type--custom-embed .custom-embed-wrapper {
  width: 100%;
  margin: 0 0 28px;
  position: relative;
}

.paragraph--type--custom-embed .embed-placeholder {
  display: none;
  width: 100%;
  min-height: 500px;
  background: #f4f7fb;
  border: 2px dashed #c5d8ef;
  border-radius: var(--radius, 6px);
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 40px 24px;
  box-sizing: border-box;
  gap: 16px;
}

.paragraph--type--custom-embed .embed-placeholder svg {
  color: #aabdd4;
  flex-shrink: 0;
}

.paragraph--type--custom-embed .embed-placeholder h3 {
  margin: 0;
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--brand-blue-dark, #154d8e);
}

.paragraph--type--custom-embed .embed-placeholder p {
  margin: 4px 0 0;
  font-size: .88rem;
  color: #666;
  max-width: 420px;
  line-height: 1.55;
}

.paragraph--type--custom-embed .embed-placeholder .embed-dev-tag {
  font-size: .75rem;
  color: #999;
  margin-top: 4px;
}

/* ── Paragraph: Data Table (paragraph--data-table.html.twig) ── */

.data-table-paragraph .table-wrapper {
  overflow-x: auto;
}

.data-table-paragraph table {
  width: 100%;
  border-collapse: collapse;
  font-size: .9rem;
  line-height: 1.45;
  background: #fff;
}

.data-table-paragraph table tbody tr:first-child td,
.data-table-paragraph table thead th,
.data-table-paragraph table thead td {
  background: var(--brand-blue,#1a5ea8);
  color: #fff;
  font-weight: 700;
  padding: 11px 14px;
  border: 1px solid var(--brand-blue,#1a5ea8);
  text-align: left;
  vertical-align: middle;
}

.data-table-paragraph table thead th *,
.data-table-paragraph table thead td * {
  color: #fff !important;
}

.data-table-paragraph table thead th a:hover,
.data-table-paragraph table thead td a:hover,
.data-table-paragraph table thead th a:focus,
.data-table-paragraph table thead td a:focus,
.data-table-paragraph table thead th a:active,
.data-table-paragraph table thead td a:active,
.data-table-paragraph table thead th a:visited:hover,
.data-table-paragraph table thead td a:visited:hover,
.data-table-paragraph table thead th a:visited:focus,
.data-table-paragraph table thead td a:visited:focus {
  color: #fff !important;
  text-decoration: none !important;
  opacity: 1 !important;
}

.data-table-paragraph table tbody tr td {
  padding: 10px 14px;
  border: 1px solid #dde3ed;
  vertical-align: top;
  color: #1a1a1a;
}

.data-table-paragraph table tbody tr:nth-child(even) td {
  background: #f0f5fb;
}

.data-table-paragraph table tbody tr:nth-child(odd):not(:first-child) td {
  background: #fff;
}

.data-table-paragraph table tbody tr:not(:first-child):hover td {
  background: #e4edf8;
}

.data-table-paragraph .table-caption {
  font-size: .88rem;
  color: #555;
  margin-bottom: 6px;
}

.data-table-paragraph table .TextRun,
.data-table-paragraph table [class^="SCXW"],
.data-table-paragraph table [class^="BCX"] {
  font-family: inherit !important;
  font-size: inherit !important;
  color: inherit !important;
}

.table-wrapper--compact table tbody tr td,
.table-wrapper--compact table tbody tr:first-child td {
  padding: 7px 10px;
  font-size: .85rem;
}

/* ── Paragraph: Highlight Box (paragraph--highlight-box.html.twig) ── */

.highlight-box {
  margin: 0 0 28px !important;
}

.highlight-box-inner {
  padding: 24px 28px;
  border-radius: var(--radius, 6px);
}

.highlight-box-inner h2,
.highlight-box-inner h3,
.highlight-box-inner h4,
.highlight-box-inner h5 {
  margin: 0 0 10px;
  color: var(--brand-blue-dark, #154d8e);
  font-size: 1.15rem;
  font-weight: 700;
  line-height: 1.3;
}

.highlight-box-inner h5 {
  font-size: 1rem;
}

.highlight-box-inner p {
  margin: 0 0 10px;
  font-size: .92rem;
  line-height: 1.6;
}

.highlight-box-inner p:last-child {
  margin-bottom: 0;
}

.highlight-box-inner .TextRun,
.highlight-box-inner [class^="SCXW"],
.highlight-box-inner [class^="BCX"] {
  font-family: inherit !important;
  font-size: inherit !important;
  color: inherit !important;
}

/* ── Paragraph: Quick Links Bar (paragraph--quick-links-bar.html.twig) ── */

.quick-links-bar-inner {
  background: var(--brand-light, #edf4e6);
  border: 1px solid #c8dcb0;
  border-radius: var(--radius, 6px);
  padding: 18px 22px;
  margin: 0 0 28px;
}

.quick-links-bar-inner .ql-label {
  display: block;
  margin-bottom: 12px;
  color: var(--brand-blue-dark, #154d8e);
  font-size: 1rem;
  font-weight: 700;
}

.quick-links-bar-inner .ql-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.quick-links-bar-inner .link-ql {
  display: inline-block;
  color: var(--brand-blue, #1a5ea8);
  font-size: .9rem;
  text-decoration: none;
  padding: 4px 0;
  border-bottom: 1px solid transparent;
  transition: border-color .15s;
}

.quick-links-bar-inner .link-ql:hover {
  border-bottom-color: var(--brand-blue, #1a5ea8);
}

.quick-links-bar-inner .pill-ql {
  display: inline-block;
  padding: 6px 16px;
  background: #e8f0fb;
  color: var(--brand-blue, #1a5ea8);
  font-size: .88rem;
  font-weight: 600;
  border-radius: 20px;
  text-decoration: none;
  transition: background .2s, color .2s;
  white-space: nowrap;
}

.quick-links-bar-inner .pill-ql:hover {
  background: var(--brand-blue, #1a5ea8);
  color: #fff;
}

.quick-links-bar nav.ql-plain {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin: 20px 0;
  border-bottom: 2px solid #e8e8e8;
  padding-bottom: 16px;
}

/* ── View: Current Development Applications (views-view--current-development-applications--page-1.html.twig) ── */

.development-applications-banner {
  width: 100%;
  min-height: 220px;
  background-color: var(--brand-blue,#1a5ea8);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  position: relative;
}

.development-applications-banner .hero-banner-edit-btn {
  position: absolute;
  top: 16px;
  right: 16px;
  z-index: 5;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 11px 20px 11px 16px;
  border-radius: 999px;
  background: var(--brand-blue,#1a5ea8);
  color: #fff!important;
  font-size: .9rem;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
  box-shadow: 0 4px 14px rgba(0,0,0,.3),0 2px 4px rgba(0,0,0,.18);
  text-decoration: none;
  forced-color-adjust: none;
  transition: background .15s ease,transform .15s ease,box-shadow .15s ease;
}
.development-applications-banner .hero-banner-edit-btn:hover,
.development-applications-banner .hero-banner-edit-btn:focus {
  background: var(--brand-blue-dark,#154d8e);
  color: #fff!important;
  text-decoration: none;
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(0,0,0,.35),0 3px 6px rgba(0,0,0,.2);
}
.development-applications-banner .hero-banner-edit-btn svg {
  width: 16px;
  height: 16px;
  fill: currentColor;
  stroke: none;
  flex-shrink: 0;
}

/* --- Highlight boxes / Emphasis blocks (Blue and Green) --- */

p.emphasis-Primary,
h2.emphasis-Primary,
h3.emphasis-Primary,
h4.emphasis-Primary,
div.emphasis-Primary,
.emphasis-Primary,
p.highlight-box-blue {
  background: #ebf3f8 !important;
  border-left: 4px solid var(--brand-blue) !important;
  padding: 14px 16px !important;
  margin: 0 0 14px !important;
  font-weight: 600 !important;
  color: var(--brand-blue) !important;
  border-radius: 0 var(--radius) var(--radius) 0 !important;
  display: block !important;
  overflow-wrap: break-word !important;
  word-break: break-word !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

p.emphasis-Secondary,
h2.emphasis-Secondary,
h3.emphasis-Secondary,
h4.emphasis-Secondary,
div.emphasis-Secondary,
.emphasis-Secondary,
p.highlight-box-green {
  background: #f6ffe4 !important;
  border-left: 4px solid #477000 !important;
  padding: 14px 16px !important;
  margin: 0 0 14px !important;
  color: #1b3800 !important;
  border-radius: 0 var(--radius) var(--radius) 0 !important;
  display: block !important;
  overflow-wrap: break-word !important;
  word-break: break-word !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

p.emphasis-Tertiary,
h2.emphasis-Tertiary,
h3.emphasis-Tertiary,
h4.emphasis-Tertiary,
div.emphasis-Tertiary,
.emphasis-Tertiary {
  background: #f2f2f2 !important;
  border-left: 4px solid #aaa !important;
  padding: 14px 16px !important;
  margin: 0 0 14px !important;
  font-weight: 700 !important;
  color: #1e293b !important;
  border-radius: 0 var(--radius) var(--radius) 0 !important;
  display: block !important;
  overflow-wrap: break-word !important;
  word-break: break-word !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

/* Paragraphs in emphasis blocks */
p.emphasis-Primary,
p.emphasis-Secondary,
p.emphasis-Tertiary,
p.highlight-box-blue,
p.highlight-box-green,
div.emphasis-Primary p,
div.emphasis-Secondary p,
div.emphasis-Tertiary p {
  font-family: var(--font-primary) !important;
  font-size: 1.125rem !important;
  line-height: 1.6875rem !important;
}

/* Headings in emphasis blocks: keep original heading font size, apply proportional line height */
h1.emphasis-Primary, h2.emphasis-Primary, h3.emphasis-Primary, h4.emphasis-Primary, h5.emphasis-Primary, h6.emphasis-Primary,
h1.emphasis-Secondary, h2.emphasis-Secondary, h3.emphasis-Secondary, h4.emphasis-Secondary, h5.emphasis-Secondary, h6.emphasis-Secondary,
h1.emphasis-Tertiary, h2.emphasis-Tertiary, h3.emphasis-Tertiary, h4.emphasis-Tertiary, h5.emphasis-Tertiary, h6.emphasis-Tertiary,
div.emphasis-Primary h1, div.emphasis-Primary h2, div.emphasis-Primary h3, div.emphasis-Primary h4, div.emphasis-Primary h5, div.emphasis-Primary h6,
div.emphasis-Secondary h1, div.emphasis-Secondary h2, div.emphasis-Secondary h3, div.emphasis-Secondary h4, div.emphasis-Secondary h5, div.emphasis-Secondary h6,
div.emphasis-Tertiary h1, div.emphasis-Tertiary h2, div.emphasis-Tertiary h3, div.emphasis-Tertiary h4, div.emphasis-Tertiary h5, div.emphasis-Tertiary h6 {
  font-family: var(--font-primary) !important;
  line-height: 1.35 !important;
}

/* Container divs / generic blocks default line height */
div.emphasis-Primary,
div.emphasis-Secondary,
div.emphasis-Tertiary,
.emphasis-Primary:not(h1):not(h2):not(h3):not(h4):not(h5):not(h6),
.emphasis-Secondary:not(h1):not(h2):not(h3):not(h4):not(h5):not(h6),
.emphasis-Tertiary:not(h1):not(h2):not(h3):not(h4):not(h5):not(h6) {
  font-family: var(--font-primary) !important;
  line-height: 1.6875rem !important;
}

/* Div container box internal paragraphs */
div.emphasis-Primary p,
div.emphasis-Secondary p,
div.emphasis-Tertiary p {
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  margin: 0 0 10px !important;
  color: inherit !important;
}
div.emphasis-Primary p:last-child,
div.emphasis-Secondary p:last-child,
div.emphasis-Tertiary p:last-child {
  margin-bottom: 0 !important;
}
div.emphasis-Primary ul, div.emphasis-Primary ol,
div.emphasis-Secondary ul, div.emphasis-Secondary ol,
div.emphasis-Tertiary ul, div.emphasis-Tertiary ol {
  color: inherit !important;
  margin: 0 0 12px 20px !important;
}

/* Seamless collapse for adjacent multi-line emphasis paragraphs */
p.emphasis-Secondary + p.emphasis-Secondary,
h2.emphasis-Secondary + p.emphasis-Secondary,
h3.emphasis-Secondary + p.emphasis-Secondary,
h4.emphasis-Secondary + p.emphasis-Secondary,
.emphasis-Secondary + .emphasis-Secondary {
  margin-top: -14px !important;
  border-top-left-radius: 0 !important;
  border-top-right-radius: 0 !important;
  padding-top: 4px !important;
}
p.emphasis-Secondary:has(+ p.emphasis-Secondary),
p.emphasis-Secondary:has(+ h2.emphasis-Secondary),
p.emphasis-Secondary:has(+ h3.emphasis-Secondary),
p.emphasis-Secondary:has(+ h4.emphasis-Secondary),
.emphasis-Secondary:has(+ .emphasis-Secondary) {
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  margin-bottom: 0 !important;
  padding-bottom: 4px !important;
}

p.emphasis-Primary + p.emphasis-Primary,
h2.emphasis-Primary + p.emphasis-Primary,
h3.emphasis-Primary + p.emphasis-Primary,
h4.emphasis-Primary + p.emphasis-Primary,
.emphasis-Primary + .emphasis-Primary {
  margin-top: -14px !important;
  border-top-left-radius: 0 !important;
  border-top-right-radius: 0 !important;
  padding-top: 4px !important;
}
p.emphasis-Primary:has(+ p.emphasis-Primary),
p.emphasis-Primary:has(+ h2.emphasis-Primary),
p.emphasis-Primary:has(+ h3.emphasis-Primary),
p.emphasis-Primary:has(+ h4.emphasis-Primary),
.emphasis-Primary:has(+ .emphasis-Primary) {
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  margin-bottom: 0 !important;
  padding-bottom: 4px !important;
}

p.emphasis-Tertiary + p.emphasis-Tertiary,
h2.emphasis-Tertiary + p.emphasis-Tertiary,
h3.emphasis-Tertiary + p.emphasis-Tertiary,
h4.emphasis-Tertiary + p.emphasis-Tertiary,
.emphasis-Tertiary + .emphasis-Tertiary {
  margin-top: -14px !important;
  border-top-left-radius: 0 !important;
  border-top-right-radius: 0 !important;
  padding-top: 4px !important;
}
p.emphasis-Tertiary:has(+ p.emphasis-Tertiary),
p.emphasis-Tertiary:has(+ h2.emphasis-Tertiary),
p.emphasis-Tertiary:has(+ h3.emphasis-Tertiary),
p.emphasis-Tertiary:has(+ h4.emphasis-Tertiary),
.emphasis-Tertiary:has(+ .emphasis-Tertiary) {
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  margin-bottom: 0 !important;
  padding-bottom: 4px !important;
}

/* Ensure emphasis blocks inside columns keep exact background colors */
.advanced-column .emphasis-Secondary {
  background: #f6ffe4 !important;
  border-left: 4px solid #477000 !important;
  color: #1b3800 !important;
}
.advanced-column .emphasis-Primary {
  background: #ebf3f8 !important;
  border-left: 4px solid var(--brand-blue) !important;
  color: var(--brand-blue) !important;
}
.advanced-column .emphasis-Tertiary {
  background: #f2f2f2 !important;
  border-left: 4px solid #aaa !important;
  color: #1e293b !important;
}

p.emphasis-Primary a:not(.btn):not(.btn-ql):not(.btn-p):not(.btn-s):not(.btn-secondary):not(.btn-outline):not(.btn-o):not(.button):not([class*="btn-"]),
p.emphasis-Secondary a:not(.btn):not(.btn-ql):not(.btn-p):not(.btn-s):not(.btn-secondary):not(.btn-outline):not(.btn-o):not(.button):not([class*="btn-"]),
p.emphasis-Tertiary a:not(.btn):not(.btn-ql):not(.btn-p):not(.btn-s):not(.btn-secondary):not(.btn-outline):not(.btn-o):not(.button):not([class*="btn-"]),
p.highlight-box-blue a:not(.btn):not(.btn-ql):not(.btn-p):not(.btn-s):not(.btn-secondary):not(.btn-outline):not(.btn-o):not(.button):not([class*="btn-"]),
p.highlight-box-green a:not(.btn):not(.btn-ql):not(.btn-p):not(.btn-s):not(.btn-secondary):not(.btn-outline):not(.btn-o):not(.button):not([class*="btn-"]) {
  color: var(--brand-blue) !important;
  text-decoration: underline;
  font-weight: 600;
  text-underline-offset: 3px; 
}

p.emphasis-Primary a:not(.btn):not(.btn-ql):not(.btn-p):not(.btn-s):not(.btn-secondary):not(.btn-outline):not(.btn-o):not(.button):not([class*="btn-"]):hover,
p.emphasis-Primary a:not(.btn):not(.btn-ql):not(.btn-p):not(.btn-s):not(.btn-secondary):not(.btn-outline):not(.btn-o):not(.button):not([class*="btn-"]):focus,
p.emphasis-Secondary a:not(.btn):not(.btn-ql):not(.btn-p):not(.btn-s):not(.btn-secondary):not(.btn-outline):not(.btn-o):not(.button):not([class*="btn-"]):hover,
p.emphasis-Secondary a:not(.btn):not(.btn-ql):not(.btn-p):not(.btn-s):not(.btn-secondary):not(.btn-outline):not(.btn-o):not(.button):not([class*="btn-"]):focus,
p.emphasis-Tertiary a:not(.btn):not(.btn-ql):not(.btn-p):not(.btn-s):not(.btn-secondary):not(.btn-outline):not(.btn-o):not(.button):not([class*="btn-"]):hover,
p.emphasis-Tertiary a:not(.btn):not(.btn-ql):not(.btn-p):not(.btn-s):not(.btn-secondary):not(.btn-outline):not(.btn-o):not(.button):not([class*="btn-"]):focus,
p.highlight-box-blue a:not(.btn):not(.btn-ql):not(.btn-p):not(.btn-s):not(.btn-secondary):not(.btn-outline):not(.btn-o):not(.button):not([class*="btn-"]):hover,
p.highlight-box-blue a:not(.btn):not(.btn-ql):not(.btn-p):not(.btn-s):not(.btn-secondary):not(.btn-outline):not(.btn-o):not(.button):not([class*="btn-"]):focus,
p.highlight-box-green a:not(.btn):not(.btn-ql):not(.btn-p):not(.btn-s):not(.btn-secondary):not(.btn-outline):not(.btn-o):not(.button):not([class*="btn-"]):hover,
p.highlight-box-green a:not(.btn):not(.btn-ql):not(.btn-p):not(.btn-s):not(.btn-secondary):not(.btn-outline):not(.btn-o):not(.button):not([class*="btn-"]):focus {
  color: var(--brand-blue-hover, #0268c1) !important;
}

/* General wrapper styling for Cludo autocomplete dropdown */

.cludo-search_autocomplete {
  z-index: 9999999 !important;
}

/* Autocomplete Header Styling */

.cludo-search_autocomplete .search_autocomplete h3 {
  background-color: #f8fafc !important;
  color: #475569 !important;
  font-size: 0.75rem !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
  padding: 10px 16px !important;
  margin: 0 !important;
  border-bottom: 1px solid #e2e8f0 !important;
}

/* Suggestion Items */

.cludo-search_autocomplete .search_autocomplete li {
  padding: 12px 16px !important;
  background-color: #ffffff !important;
  border-bottom: 1px solid #f1f5f9 !important;
  transition: background-color 0.2s ease, padding-left 0.2s ease !important;
}

.cludo-search_autocomplete .search_autocomplete li:last-child {
  border-bottom: 0 !important;
}

/* Suggestion Hover & Active Styles - Brand Blue highlight with white text */

.cludo-search_autocomplete .search_autocomplete li:hover,
.cludo-search_autocomplete .search_autocomplete li.active {
  background-color: var(--brand-blue-dark, #02345e) !important;
  /* Brand-aligned dark blue highlight background */
  padding-left: 20px !important;
  /* Micro-interaction slide effect */;
}

.cludo-search_autocomplete .search_autocomplete li a {
  color: #334155 !important;
  font-size: 0.95rem !important;
  font-weight: 500 !important;
  text-decoration: none !important;
  display: block !important;
  width: 100% !important;
}

.cludo-search_autocomplete .search_autocomplete li:hover a,
.cludo-search_autocomplete .search_autocomplete li.active a {
  color: #ffffff !important;
  /* Text turns white on hover/active highlight */;
}

/* Autocomplete Bold Match Highlighting */

.cludo-search_autocomplete .search_autocomplete li b {
  color: #0066cc !important;
  font-weight: 700 !important;
  transition: color 0.2s ease !important;
}

.cludo-search_autocomplete .search_autocomplete li:hover b,
.cludo-search_autocomplete .search_autocomplete li.active b {
  color: #ffffff !important;
  /* Bold matched letters also turn white on hover/active highlight */;
}

/* Cludo Search Results Modal - Base */

#cludo-search-results .cludo-search-modal-body {
  position: fixed !important;
  top: 128px !important;
  left: 50% !important;
  margin: 0 0 0 -470px !important;
  z-index: 9999999 !important;
  height: 75% !important;
  padding: 30px 20px 0 40px !important;
  width: 940px !important;
  background-color: #fff !important;
  overflow: auto !important;
  overflow-y: scroll !important;
  overflow-x: hidden !important;
  font-size: 14px !important;
  line-height: 21px !important;
  box-sizing: border-box !important;
}

/* Allow Cludo dropdown to escape the hero section and render above subsequent cards */

.hero {
  overflow: visible !important;
  z-index: 99 !important;
}

.hero-carousel {
  overflow: hidden !important;
  border-radius: inherit;
}

blockquote, .ck-content blockquote {
  border-left: 4px solid var(--brand-highlight-green) !important;
  padding: 4px 0 4px 20px !important;
  margin: 20px 0 !important;
  font-style: italic;
}

/* ===================================================
   CTA CARD EQUAL HEIGHT — Advanced Container layout
   Ensures all cards in a row stretch to the same height
   and the button is always pinned to the bottom.
   =================================================== */

/* THE ROOT FIX: data-valign="top" sets align-self:flex-start which prevents
   columns from stretching to equal height. Override it to stretch so all
   columns in a row are always the same height. */

.advanced-column[data-valign="top"] {
  align-self: stretch !important;
  justify-content: flex-start !important;
}

/* Columns are flex columns (already in container.css, reinforced here) */

.advanced-column {
  display: flex !important;
  flex-direction: column !important;
}

/* ============================================================
   MULTI-STEP WEBFORM PROGRESS WIZARD STYLES
   ============================================================ */

.custom-step-wizard {
  position: relative;
  width: 100%;
  margin: 10px 0 35px 0;
  font-family: "myriad-pro", Arial, Helvetica, sans-serif;
}

.step-wizard-list {
  position: relative;
  display: flex;
  justify-content: space-between;
  list-style: none;
  padding: 0;
  margin: 0;
  z-index: 2;
  width: 100%;
}

.step-wizard-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 1 !important;
  min-width: 0 !important;
  text-align: center;
  position: relative;
}

/* Connect default grey lines between steps */

.step-wizard-item::after {
  content: '';
  position: absolute;
  top: 20px;
  left: -50%;
  width: 100%;
  height: 2px;
  background-color: #d9e2ec;
  z-index: -1;
}

/* Connect blue completed lines */

.step-wizard-item::before {
  content: '';
  position: absolute;
  top: 20px;
  left: -50%;
  width: 100%;
  height: 2px;
  background-color: #0256a4;
  z-index: -1;
  display: none;
}

.step-wizard-item.is-completed::before,
.step-wizard-item.is-active::before {
  display: block;
}

/* Hide lines to the left of the first step */

.step-wizard-item:first-child::after,
.step-wizard-item:first-child::before {
  display: none !important;
}

.step-circle {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background-color: #fff;
  border: 2px solid #d9e2ec;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
  box-shadow: 0 0 0 4px #fff;
  z-index: 2;
}

.step-number {
  font-size: 0.95rem;
  font-weight: 700;
  color: #5b6770;
}

.step-tick {
  width: 16px;
  height: 16px;
  color: #fff;
}

.step-label {
  margin-top: 10px;
  font-size: 0.88rem;
  font-weight: 600;
  color: #5b6770;
  transition: all 0.3s ease;
  max-width: 110px;
  word-wrap: break-word;
}

/* Active State */

.step-wizard-item.is-active .step-circle {
  background-color: #0256a4;
  border-color: #0256a4;
  box-shadow: 0 0 0 5px rgba(2, 86, 164, 0.15), 0 0 0 2px #fff;
}

.step-wizard-item.is-active .step-number {
  color: #fff;
}

.step-wizard-item.is-active .step-label {
  color: #0256a4;
  font-weight: 700;
}

/* Completed State */

.step-wizard-item.is-completed .step-circle {
  background-color: #0256a4;
  border-color: #0256a4;
}

.step-wizard-item.is-completed .step-label {
  color: #5b6770;
}

.migrated-intro {
  margin-top: 15px;
  margin-bottom: 25px;
  font-size: 0.95rem;
  color: #1d2b36;
  text-align: left;
  width: 100%;
}

/* ── Navigation Cards ([nav-cards] shortcode) ────────────────────── */

.nav-cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 20px;
  margin: 24px 0;
}

/* [nav-cards] shortcode: force exactly 3 columns, responsive down to 1 */

.nav-cards-3col {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 20px;
}

/* ============================================================
   [nav-cards] shortcode styles
   Add this entire block to the end of styles.css
   ============================================================ */

/* Force exactly 3 columns, responsive down to 1 */

.nav-cards-3col {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 20px;
}

/* ==========================================================================
   03. GLOBAL LAYOUT & CONTAINERS
   ========================================================================== */

.container {
  width: min(var(--max-width),calc(100% - 32px));
  margin: 0 auto;
}

.section-label {
  width: min(var(--max-width),calc(100% - 32px));
  margin: 18px auto 8px;
  color: var(--brand-muted);
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.page-support-banner .container {
  padding-top: 48px;
  padding-bottom: 48px;
}

.news-shell .container.news-layout {
  padding-top: 28px;
}

.quickedit-toolbar-container > .quickedit-toolbar-content {
  border-radius: 999px;
  background: var(--brand-blue,#1a5ea8);
  background-image: none;
  box-shadow: 0 2px 10px rgba(0,0,0,.25);
  padding: .2em .6em;
}

.quickedit-toolbar-container > .quickedit-toolbar-lining {
  box-shadow: none;
}

.quickedit-toolbar-container > .quickedit-toolbar-pointer {
  background-color: var(--brand-blue,#1a5ea8);
  box-shadow: none;
}

/* ==========================================================================
   04. GLOBAL COMPONENTS & UI UTILITIES (Buttons, Forms, Badges, Chips, Cards, Modals, Accordions)
   ========================================================================== */

/* ============================================================
   ADD THESE LINES TO THE BOTTOM OF:
   /caledon/web/themes/custom/toc/css/components.css
   OR
   /caledon/web/themes/custom/toc/css/styles.css
   
   This loads AFTER accordion.frontend.css so it wins cleanly.
   No JS needed. Run: drush cr  after saving.
   ============================================================ */

/* Reset the module's blue header */

.ckeditor-accordion-container dl dt,
.ckeditor-accordion-container dl dt a,
.ckeditor-accordion-container dl dt span,
dl.ckeditor-accordion dt,
dl.ckeditor-accordion dt a,
dl.ckeditor-accordion dt span {
  background: #fff !important;
  background-color: #fff !important;
  background-image: none !important;
  color: #1a1a1a !important;
}

/* The container / dl wrapper */

.ckeditor-accordion-container,
.ckeditor-accordion-container dl,
dl.ckeditor-accordion {
  background: #fff !important;
  border: 1px solid #ddd !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

/* Remove the module's chevron icon */

.ckeditor-accordion-container dl dt .ckeditor-accordion-toggle,
dl.ckeditor-accordion dt .ckeditor-accordion-toggle {
  display: none !important;
}

/* Style the dt as a flex row */

.ckeditor-accordion-container dl dt,
dl.ckeditor-accordion dt {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  padding: 14px 16px !important;
  cursor: pointer !important;
  font-weight: 700 !important;
  font-size: .95rem !important;
  border: none !important;
}

.ckeditor-accordion-heading,
.ckeditor-accordion-container dl dt h3,
dl.ckeditor-accordion dt h3 {
  margin: 0 !important;
  padding: 0 !important;
  font-size: inherit !important;
  font-weight: inherit !important;
  line-height: inherit !important;
  color: inherit !important;
  display: flex !important;
  flex: 1 !important;
  width: 100% !important;
  background: transparent !important;
  border: none !important;
}

.ckeditor-accordion-container dl dt:hover,
dl.ckeditor-accordion dt:hover {
  background: #f5f5f5 !important;
  background-color: #f5f5f5 !important;
}

/* The toggler link inside dt */

.ckeditor-accordion-container dl dt a.ckeditor-accordion-toggler,
dl.ckeditor-accordion dt a.ckeditor-accordion-toggler {
  flex: 1 !important;
  text-decoration: none !important;
  color: #1a1a1a !important;
  font-weight: 700 !important;
  background: none !important;
}

/* Add our + icon via pseudo-element AFTER the link */

.ckeditor-accordion-container dl dt a.ckeditor-accordion-toggler::after,
dl.ckeditor-accordion dt a.ckeditor-accordion-toggler::after {
  content: '+' !important;
  content: '+' / '' !important;
  speak: never;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
  width: 24px !important;
  margin-left: 12px !important;
  font-size: 1.375rem !important;
  font-weight: 400 !important;
  color: #1a5ea8 !important;
  background: none !important;
}

/* When active show minus */

.ckeditor-accordion-container dl dt.active a.ckeditor-accordion-toggler::after,
dl.ckeditor-accordion dt.active a.ckeditor-accordion-toggler::after {
  content: '\2212' !important;
  content: '\2212' / '' !important;
  speak: never;
}

/* dd (body) */

.ckeditor-accordion-container dl dd,
dl.ckeditor-accordion dd {
  border-top: 1px solid #eee !important;
  border-bottom: none !important;
  border-left: none !important;
  border-right: none !important;
  background: #fff !important;
  padding: 12px 16px 16px !important;
  margin: 0 !important;
}

/**
 * Restyle Drupal core's contextual links trigger + dropdown to match
 * the Town of Caledon blue brand instead of the default dark/gray UI.
 * Add this to themes/custom/toc/css/components.css (or a new file
 * loaded via toc.libraries.yml).
 */

/* The floating gear/pencil trigger button */

.contextual .trigger,
.contextual-links-trigger {
  background-color: var(--brand-blue, #1a5ea8) !important;
  border-color: var(--brand-blue, #1a5ea8) !important;
}

.contextual .trigger:hover,
.contextual .trigger:focus {
  background-color: var(--brand-blue-dark, #154d8e) !important;
}

/* The dropdown panel itself */

.contextual .contextual-links {
  background-color: #ffffff !important;
  border: 1px solid var(--brand-blue, #1a5ea8) !important;
  border-radius: var(--radius, 6px);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
  min-width: 140px;
}

.contextual .contextual-links li {
  border-bottom: 1px solid #f0f0f0;
}

.contextual .contextual-links li:last-child {
  border-bottom: none;
}

.contextual .contextual-links a {
  color: var(--brand-blue, #1a5ea8) !important;
  font-weight: 600;
  padding: 10px 16px;
  display: block;
  text-decoration: none;
}

.contextual .contextual-links a:hover,
.contextual .contextual-links a:focus {
  background-color: #f4f8fc !important;
  color: var(--brand-blue-dark, #154d8e) !important;
  text-decoration: none;
}

/**
 * Restyle Drupal core's modal dialog (jQuery UI) to match the
 * Town of Caledon blue brand theme. Add to
 * themes/custom/toc/css/components.css (or a new file in the
 * theme's global-styling library).
 *
 * Applies specifically to the Hero Banner quick-edit modal, but will
 * restyle any core modal dialog the same way for consistency.
 */

/* Overlay behind the modal */

.ui-widget-overlay {
  background: rgba(20, 30, 45, 0.55) !important;
  z-index: 10000100 !important;
}

/* The dialog window itself */

.ui-dialog,
.ui-dialog.ui-widget,
.ui-dialog.ui-corner-all {
  background: #ffffff !important;
  border-radius: var(--radius, 8px) !important;
  border: none !important;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.25) !important;
  overflow: hidden;
  padding: 0 !important;
  z-index: 10000105 !important;
}

/* Title bar */

.ui-dialog .ui-dialog-titlebar {
  background: var(--brand-blue, #1a5ea8) !important;
  border: none !important;
  border-radius: 0 !important;
  padding: 18px 24px 18px 48px !important;
  margin: 0 !important;
}

.ui-dialog .ui-dialog-title {
  color: #ffffff !important;
  font-size: 1.25rem !important;
  font-weight: 700 !important;
  padding-right: 40px !important;
  margin: 0 !important;
  display: block !important;
}

/* Close (X) button in the title bar.
   Uses `all: unset` first to strip out Gin admin theme's own button
   styling (which loads after our theme CSS and was overriding the
   earlier attempt at this), then rebuilds the button from scratch. */

.ui-dialog .ui-dialog-titlebar-close {
  all: unset !important;
  position: absolute !important;
  top: 50% !important;
  right: 16px !important;
  transform: translateY(-50%) !important;
  width: 28px !important;
  height: 28px !important;
  border-radius: 50% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  background: rgba(255, 255, 255, 0.15) !important;
  font-size: 0 !important;
  color: transparent !important;
}

.ui-dialog .ui-dialog-titlebar-close:hover {
  background: rgba(255, 255, 255, 0.3) !important;
}

/* Hide Drupal/jQuery UI's native sprite icon completely. */

.ui-dialog .ui-dialog-titlebar-close .ui-icon,
.ui-dialog .ui-dialog-titlebar-close .ui-button-icon,
.ui-dialog .ui-dialog-titlebar-close .ui-button-icon-space {
  display: none !important;
}

.ui-dialog .ui-dialog-titlebar-close::before {
  display: none !important;
  content: none !important;
}

.ui-dialog .ui-dialog-titlebar-close::after {
  content: '\2715' !important;
  /* × character */
  color: #ffffff !important;
  font-size: 16px !important;
  font-weight: bold !important;
  line-height: 1 !important;
  display: block !important;
  border: none !important;
  transform: none !important;
  position: static !important;
  width: auto !important;
  height: auto !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Content area (where the form renders) */

.ui-dialog .ui-dialog-content {
  background: #ffffff !important;
  color: #1a1a1a !important;
  padding: 24px !important;
}

/* Button pane (Save/Cancel row at the bottom) - Drupal renders this
   as a separate element from ui-dialog-content, so it needs its own
   background override or it stays dark. */

.ui-dialog .ui-dialog-buttonpane {
  background: #ffffff !important;
  border-top: 1px solid #eaeaea !important;
  padding: 16px 24px !important;
  margin: 0 !important;
  display: flex !important;
  justify-content: flex-end !important;
  gap: 12px !important;
}

.ui-dialog .ui-dialog-content label {
  color: #1a1a1a !important;
  font-weight: 600;
  display: block;
  margin-bottom: 6px;
}

.ui-dialog .ui-dialog-content .description {
  color: #6b7280 !important;
  font-size: 0.85rem;
}

.ui-dialog .ui-dialog-content input[type="text"] {
  border: 1px solid #d1d5db;
  border-radius: var(--radius, 4px);
  padding: 8px 12px;
  width: 100%;
}

.ui-dialog .ui-dialog-content input[type="text"]:focus {
  border-color: var(--brand-blue, #1a5ea8);
  outline: none;
  box-shadow: 0 0 0 3px rgba(26, 94, 168, 0.15);
}

/* Buttons: Save Banner, Remove, Choose file */

.ui-dialog .ui-dialog-content input[type="submit"],
.ui-dialog .ui-dialog-content .button,
.ui-dialog .ui-dialog-content button,
.ui-dialog .ui-dialog-buttonpane input[type="submit"],
.ui-dialog .ui-dialog-buttonpane .button,
.ui-dialog .ui-dialog-buttonpane button {
  background: var(--brand-blue, #1a5ea8) !important;
  color: #ffffff !important;
  border: none !important;
  border-radius: var(--radius, 4px);
  padding: 10px 22px;
  margin: 0 !important;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s ease;
}

.ui-dialog .ui-dialog-content input[type="submit"]:hover,
.ui-dialog .ui-dialog-content .button:hover,
.ui-dialog .ui-dialog-content button:hover,
.ui-dialog .ui-dialog-buttonpane input[type="submit"]:hover,
.ui-dialog .ui-dialog-buttonpane .button:hover,
.ui-dialog .ui-dialog-buttonpane button:hover {
  background: var(--brand-blue-dark, #154d8e) !important;
}

/* "Remove" button on the uploaded file - keep it visually secondary */

.ui-dialog .ui-dialog-content .file-widget .button,
.ui-dialog .ui-dialog-content [name="banner_image_0_remove_button"] {
  background: #ffffff !important;
  color: var(--brand-blue, #1a5ea8) !important;
  border: 1px solid var(--brand-blue, #1a5ea8) !important;
}

.ui-dialog .ui-dialog-content .file-widget .button:hover {
  background: #f4f8fc !important;
}

/**
 * Pulsing highlight for CKEditor's Fullscreen button, applied via
 * ckeditor-auto-fullscreen.js when arriving from the "Edit Content"
 * link on the live page. Draws the eye to the button so the editor
 * can click it themselves - add to themes/custom/toc/css/components.css
 */

.toc-pulse-highlight {
  position: relative;
  z-index: 10;
  border-radius: 4px !important;
  box-shadow: 0 0 0 0 rgba(26, 94, 168, 0.6) !important;
  animation: toc-pulse-ring 1.1s ease-out infinite;
}

/* Force frontend editing toggle visibility */

.frontend-editing-toggle {
  z-index: 9999999 !important;
}

.frontend-editing-toggle a {
  background-color: #1a5ea8 !important;
  opacity: 1 !important;
  visibility: visible !important;
}

.policies-search-wrap input[type="search"] {
  flex: 1;
  padding: 10px 14px;
  border: 1px solid #ccc;
  border-right: 0;
  border-radius: var(--radius,6px) 0 0 var(--radius,6px);
}

/* Hide the native date-picker icon so it doesn't overlap our custom
   SVG calendar icon in the News filter panel. The clickable area is
   kept and repositioned over our icon, so clicking it still opens
   the native date picker. */

.filter-panel input[type="date"]::-webkit-calendar-picker-indicator {
  position: absolute;
  right: 0;
  width: 32px;
  height: 100%;
  opacity: 0;
  cursor: pointer;
}

/* ============================================================
   Remove stray migration <u> underline in CKEditor accordion titles.
   Targets the <u> itself: a text-decoration painted by a descendant
   cannot be cancelled from an ancestor, which is why the existing
   `dt a { text-decoration:none }` above never affected it.
   Scoped by .ckeditor-accordion-container (NOT dl.ckeditor-accordion)
   since the module's JS strips that class at runtime.
   ============================================================ */

.ckeditor-accordion-container dl > dt u {
  text-decoration: none !important;
  border-bottom: 0 !important;
}

/* ============================================================
   Remove stray migration <u> underline in CKEditor accordion titles.
   Targets the <u> itself: a text-decoration painted by a descendant
   cannot be cancelled from an ancestor, which is why the existing
   `dt a { text-decoration:none }` above never affected it.
   Scoped by .ckeditor-accordion-container (NOT dl.ckeditor-accordion)
   since the module's JS strips that class at runtime.
   ============================================================ */

.ckeditor-accordion-container dl > dt u {
  text-decoration: none !important;
  border-bottom: 0 !important;
}

/* ── TABLE SCROLL NOTE ──────────────────────────────────────────────────── */

.table-scroll-note {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 1.125rem;
  color: var(--brand-blue, #1a5ea8);
  font-weight: 600;
  margin-bottom: 8px;
  animation: fadeIn 0.3s ease-in-out;
  transition: opacity 0.3s ease;
}

.table-scroll-note svg {
  animation: pulse-arrow 1.5s infinite;
  flex-shrink: 0;
  stroke: var(--brand-blue, #1a5ea8);
}

/* === CTA CARD (same pattern as emphasis blocks) === */

.cta, .lb-callToAction {
  border: 1.5px solid #d9e2ec !important;
  border-left: 5px solid #0256a4 !important;
  border-radius: 10px !important;
  padding: 24px 26px 26px !important;
  background: #fff !important;
  box-sizing: border-box !important;
  margin: 0 0 24px !important;
  display: flex !important;
  flex-direction: column !important;
  flex-grow: 1 !important;
  height: 100% !important;
  color: #1d2b36 !important;
  font-size: 15px !important;
  line-height: 1.6 !important;
}

.cta h4 {
  font-size: 17px !important;
  font-weight: 700 !important;
  color: #0256a4 !important;
  margin-top: 0 !important;
  margin-bottom: 12px !important;
}

.cta p {
  margin-top: 0 !important;
  margin-bottom: 18px !important;
}

.cta p:last-child {
  margin-top: auto !important;
  margin-bottom: 0 !important;
}

.cta a.btn-p {
  align-self: flex-start !important;
  margin-top: 0 !important;
}

button,input,select,textarea {
  font-family: var(--font-primary);
  font-size: 1rem;
}

input[type="text"],input[type="search"],input[type="email"],input[type="tel"],input[type="number"],input[type="password"],input[type="url"],input[type="date"],input[type="time"],select,textarea {
  border: 1px solid #ccd6df !important;
  border-radius: 6px;
  padding: 10px 14px;
  font-size: .95rem;
  font-family: inherit;
  color: var(--brand-text);
  background: #fff;
  box-sizing: border-box;
  transition: border-color .15s ease,outline .15s ease;
}

input:focus,select:focus,textarea:focus {
  outline: 2px solid var(--brand-blue-dark);
  outline-offset: -1px;
  border-color: var(--brand-blue-dark);
}

.input-error {
  border-color: #c0392b!important;
  outline: 2px solid #c0392b!important;
  outline-offset: -1px!important;
}

/* Interactive elements get pointer cursor */

a, a *,
button, button *,
select, select *,
label, label *,
input[type="button"], input[type="submit"], input[type="reset"],
input[type="checkbox"], input[type="radio"],
[role="button"], [role="button"] *,
.btn, .btn *, .button, .button *, summary, summary * {
  cursor: pointer !important;
}

/* Text inputs get text cursor */

input[type="text"], input[type="search"], input[type="email"],
input[type="tel"], input[type="password"], input[type="number"],
input[type="url"], input[type="date"], input[type="time"],
textarea, [contenteditable="true"] {
  cursor: text !important;
}

.highlight-success > div > a:not(.btn):not(.btn-ql):not(.btn-p):not(.btn-s):not(.button),
.highlight-info > div > a:not(.btn):not(.btn-ql):not(.btn-p):not(.btn-s):not(.button),
.highlight-warning > div > a:not(.btn):not(.btn-ql):not(.btn-p):not(.btn-s):not(.button) {
  color: var(--brand-blue) !important;
  font-weight: 400 !important;
  text-decoration: underline;
}

.highlight-success > div > a:not(.btn):not(.btn-ql):not(.btn-p):not(.btn-s):not(.button):hover,
.highlight-success > div > a:not(.btn):not(.btn-ql):not(.btn-p):not(.btn-s):not(.button):focus,
.highlight-info > div > a:not(.btn):not(.btn-ql):not(.btn-p):not(.btn-s):not(.button):hover,
.highlight-info > div > a:not(.btn):not(.btn-ql):not(.btn-p):not(.btn-s):not(.button):focus,
.highlight-warning > div > a:not(.btn):not(.btn-ql):not(.btn-p):not(.btn-s):not(.button):hover,
.highlight-warning > div > a:not(.btn):not(.btn-ql):not(.btn-p):not(.btn-s):not(.button):focus {
  color: var(--brand-blue-hover, #0268c1) !important;
}

.search-panel input {
  flex: 1 !important;
  border: 1px solid #ccd6df !important;
  border-radius: calc(var(--radius) - 2px) !important;
  padding: 16px !important;
  font-size: 1rem !important;
  font-weight: 400 !important;
  color: var(--brand-text) !important;
}

.search-panel input::placeholder {
  color: var(--brand-muted) !important;
  opacity: 0.9 !important;
}

.search-panel .btn {
  width: 56px !important;
  min-height: 52px !important;
  display: grid !important;
  place-items: center !important;
  padding: 0 !important;
}

.search-panel .btn svg {
  width: 24px !important;
  height: 24px !important;
  fill: none !important;
  stroke: currentColor !important;
  stroke-width: 2.4 !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
}

.top-link-card {
  background: transparent;
  border-right: 2px solid var(--border);
  padding: 10px 14px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  min-height: 165px;
}

.top-link-card:last-child {
  border-right: 0;
}

.top-link-card h2 {
  margin: 0;
  font-size: 1rem;
  line-height: 1.2;
  color: var(--brand-text);
  transition: color .18s ease,transform .18s ease;
}

.top-link-card:hover h2,.top-link-card:focus-within h2 {
  color: var(--brand-blue);
  transform: translateY(-2px);
}

.promo-card {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  border-radius: var(--radius);
  background: var(--brand-light);
  box-shadow: 0 4px 18px rgba(2,86,164,.10);
}

.promo-card img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .35s ease;
}

.promo-card:hover img,.promo-card:focus img {
  transform: scale(1.04);
}

.promo-grid:has(> :nth-child(1):last-child) .promo-card {
  height: 400px;
}

.promo-grid:has(> :nth-child(2):last-child) .promo-card {
  height: 380px;
}

.promo-grid:has(> :nth-child(3):last-child) .promo-card:nth-child(1) {
  grid-column: 1;
  grid-row: 1 / span 2;
  height: 580px;
}

.promo-grid:has(> :nth-child(3):last-child) .promo-card:nth-child(2) {
  grid-column: 2;
  grid-row: 1;
  height: 280px;
}

.promo-grid:has(> :nth-child(3):last-child) .promo-card:nth-child(3) {
  grid-column: 2;
  grid-row: 2;
  height: 280px;
}

.promo-grid:has(> :nth-child(4):last-child) .promo-card:nth-child(1) {
  grid-column: 1;
  grid-row: 1 / span 2;
  height: 580px;
}

.promo-grid:has(> :nth-child(4):last-child) .promo-card:nth-child(2) {
  grid-column: 2 / span 2;
  grid-row: 1;
  height: 280px;
}

.promo-grid:has(> :nth-child(4):last-child) .promo-card:nth-child(3) {
  grid-column: 2;
  grid-row: 2;
  height: 280px;
}

.promo-grid:has(> :nth-child(4):last-child) .promo-card:nth-child(4) {
  grid-column: 3;
  grid-row: 2;
  height: 280px;
}

.promo-grid:has(> :nth-child(5)) .promo-card {
  height: 280px;
  grid-column: span 2;
  /* Default: 3 columns per row */;
}

/* 5 CARDS: Row 1 = 3 cards, Row 2 = 2 cards */

.promo-grid:has(> :nth-child(5):last-child) .promo-card:nth-child(4),
.promo-grid:has(> :nth-child(5):last-child) .promo-card:nth-child(5) {
  grid-column: span 3;
}

/* 7 CARDS: Row 1 = 3, Row 2 = 2, Row 3 = 2 */

.promo-grid:has(> :nth-child(7):last-child) .promo-card:nth-child(4),
.promo-grid:has(> :nth-child(7):last-child) .promo-card:nth-child(5),
.promo-grid:has(> :nth-child(7):last-child) .promo-card:nth-child(6),
.promo-grid:has(> :nth-child(7):last-child) .promo-card:nth-child(7) {
  grid-column: span 3;
}

/* 8 CARDS: Row 1 = 3, Row 2 = 2, Row 3 = 3 */

.promo-grid:has(> :nth-child(8):last-child) .promo-card:nth-child(4),
.promo-grid:has(> :nth-child(8):last-child) .promo-card:nth-child(5) {
  grid-column: span 3;
}

/* 10 CARDS: Row 1 = 3, Row 2 = 2, Row 3 = 3, Row 4 = 2 */

.promo-grid:has(> :nth-child(10):last-child) .promo-card:nth-child(4),
.promo-grid:has(> :nth-child(10):last-child) .promo-card:nth-child(5),
.promo-grid:has(> :nth-child(10):last-child) .promo-card:nth-child(9),
.promo-grid:has(> :nth-child(10):last-child) .promo-card:nth-child(10) {
  grid-column: span 3;
}

/* 11 CARDS: Row 1 = 3, Row 2 = 3, Row 3 = 3, Row 4 = 2 */

.promo-grid:has(> :nth-child(11):last-child) .promo-card:nth-child(10),
.promo-grid:has(> :nth-child(11):last-child) .promo-card:nth-child(11) {
  grid-column: span 3;
}

.promo-card:hover .promo-title,.promo-card:focus .promo-title {
  color: #ffffff;
  background: #014785;
}

.promo-card.wide .promo-title {
  padding: 20px 24px;
}

.engagement-copy .btn {
  margin-top: 10px;
}

.news-card {
  border-radius: var(--radius);
  background: var(--surface);
  border: 1px solid var(--border);
  border-top: 5px solid var(--brand-blue);
  box-shadow: 0 4px 18px rgba(2,86,164,.08);
  transition: transform .18s ease,box-shadow .18s ease;
}

.news-card:hover,.news-card:focus-within {
  transform: translateY(-3px);
  box-shadow: 0 10px 24px rgba(2,86,164,.14);
}

.news-card h3 {
  margin: 0 0 10px;
  color: var(--brand-blue-dark);
  font-size: 1.25rem;
  line-height: 1.2;
}

.news-card p {
  margin: 0 0 18px;
  color: var(--brand-muted);
}

.news-card a {
  color: var(--brand-blue-dark);
  font-weight: 600 !important;
}

a:focus,
button:focus,
input:focus,
select:focus,
textarea:focus {
  outline: none;
  scroll-margin-top: 140px;
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 2px solid #000000;
  outline-offset: 2px;
}

.top-links-grid .top-link-card {
  border-right: 2px solid var(--border) !important;
}

.top-links-grid .top-link-card:last-child {
  border-right: 0 !important;
}

.notice-card {
  padding: 24px;
  border-radius: var(--radius);
  background: #fff;
  border: 1px solid var(--border);
  border-left: 5px solid var(--brand-blue);
  box-shadow: 0 4px 18px rgba(2,86,164,.06);
  transition: transform .18s ease,box-shadow .18s ease;
}

.notice-card:hover,.notice-card:focus-within {
  transform: translateY(-3px);
  box-shadow: 0 10px 24px rgba(2,86,164,.12);
}

.notice-card h3 {
  margin: 0 0 10px;
  color: var(--brand-blue-dark);
  font-size: 1.25rem;
  line-height: 1.2;
  font-weight: 600!important;
}

.notice-card p {
  margin: 0 0 18px;
  color: var(--brand-muted);
  font-weight: 400!important;
}

.notice-card a {
  color: var(--brand-blue);
  font-weight: 600!important;
}

.notice-card a:hover,.notice-card a:focus {
  color: var(--brand-blue-dark);
  text-decoration: underline;
  text-underline-offset: 4px;
}

.top-link-card h2 {
  font-weight: 600 !important;
}

.featured-news-card {
  display: grid;
  grid-template-columns: .92fr 1.08fr;
  min-height: 310px;
  overflow: hidden;
  background: #ffffff;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: 0 8px 22px rgba(2,86,164,.08);
}

.featured-news-card:hover,
.featured-news-card:focus,
.mini-news-item:hover,
.mini-news-item:focus,
.notice-rail-item:hover,
.notice-rail-item:focus {
  transform: translateY(-2px);
  border-color: var(--brand-blue);
}

.top-link-card:hover .top-link-icon,
.top-link-card:focus-within .top-link-icon,
.top-link-icon:hover,
.top-link-icon:focus {
  transform: translateY(-8px) scale(1.08) !important;
  filter: drop-shadow(0 8px 10px rgba(2,86,164,.18));
}

.top-link-card:hover h2,
.top-link-card:focus-within h2 {
  transform: translateY(-3px) !important;
}

.mobile-menu-support-cta {
  display: none;
}

.top-links-grid .top-link-card {
  border-right: 2px solid var(--border) !important;
}

.top-links-grid .top-link-card:last-child {
  border-right: 0 !important;
}

.enews-cta {
  padding: 56px 0;
  background: #f2f2f2;
}

.enews-cta-card {
  display: grid;
  grid-template-columns: minmax(0,1.15fr) minmax(360px,.85fr);
  gap: 34px;
  align-items: center;
  padding: 34px;
  background: #ffffff;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: 0 8px 24px rgba(2,86,164,.08);
}

.enews-cta-kicker {
  display: block;
  margin-bottom: 8px;
  color: var(--brand-muted);
  font-size: .82rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  font-weight: 600 !important;
}

.enews-cta h2 {
  margin: 0 0 12px;
  color: var(--brand-blue-dark);
  font-size: clamp(1.9rem,3vw,2.65rem);
  line-height: 1.08;
  font-weight: 600 !important;
}

.enews-cta p {
  margin: 0;
  max-width: 720px;
  color: var(--brand-muted);
  font-weight: 400 !important;
}

.enews-form input {
  flex: 1;
  min-width: 0;
  width: 100%;
  min-height: 52px;
  padding: 14px 15px;
  border: 1px solid var(--border);
  border-radius: calc(var(--radius) - 2px);
  background: #ffffff;
  color: var(--brand-text);
  font: inherit;
}

.enews-form .button,.enews-form .btn {
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
}

.enews-cta-copy {
  position: relative;
}

.enews-cta-copy p {
  max-width: 680px;
}

.enews-cta {
  padding: 64px 0;
  background: #f2f2f2;
}

.enews-cta-card.enews-cta-photo-layout {
  display: grid !important;
  grid-template-columns: minmax(360px,.92fr) minmax(0,1.08fr) !important;
  gap: 0 !important;
  align-items: stretch !important;
  padding: 0 !important;
  overflow: hidden;
  background: #ffffff;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: 0 8px 24px rgba(2,86,164,.08);
}

.enews-photo-badge {
  position: absolute;
  left: 22px;
  bottom: 22px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 12px 15px 12px 12px;
  background: rgba(255,255,255,.94);
  color: var(--brand-blue-dark);
  border-radius: 999px;
  box-shadow: 0 8px 18px rgba(0,0,0,.18);
  font-weight: 600 !important;
}

.enews-photo-badge .enews-icon {
  width: 42px;
  height: 42px;
  margin: 0;
  box-shadow: none;
}

.enews-photo-badge .enews-icon svg {
  width: 22px;
  height: 22px;
}

.enews-content .enews-cta-kicker {
  display: block;
  margin-bottom: 8px;
  color: var(--brand-muted);
  font-size: .82rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  font-weight: 600 !important;
}

.mobile-menu-support-cta {
  display: none !important;
}

/* ---- Intro card ---- */

.intro-card {
  padding: 28px;
  margin-bottom: 28px;
  background: #ffffff;
  border: 1px solid var(--border);
  border-left: 6px solid var(--brand-blue);
  border-radius: var(--radius);
  box-shadow: 0 6px 18px rgba(2,86,164,0.08);
}

.intro-card p {
  margin: 0;
  color: var(--brand-text);
}

.prc-feature-card {
  position: relative;
  overflow: hidden;
  min-height: 310px;
  border-radius: var(--radius);
  background: #ffffff;
  border: 1px solid var(--border);
  box-shadow: 0 8px 22px rgba(2,86,164,0.08);
}

.prc-feature-card img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.prc-feature-card::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(0,0,0,.48), rgba(0,0,0,.10));
}

.prc-mini-card {
  display: block;
  padding: 22px;
  background: #ffffff;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: 0 6px 18px rgba(2,86,164,0.06);
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}

.prc-mini-card:hover,
.prc-mini-card:focus {
  transform: translateY(-2px);
  border-color: var(--brand-blue);
  box-shadow: 0 10px 24px rgba(2,86,164,0.12);
}

.prc-mini-card strong {
  display: block;
  margin-bottom: 8px;
  color: var(--brand-blue-dark);
  font-size: 1.12rem;
  line-height: 1.2;
}

.prc-mini-card span {
  display: block;
  color: var(--brand-muted);
}

.principle-card {
  padding: 22px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: #ffffff;
  box-shadow: 0 4px 16px rgba(2,86,164,0.06);
}

.principle-card h3 {
  margin-top: 0;
}

/* ---- Service card grid ---- */

.service-card-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  margin-top: 22px;
}

.service-card {
  display: block;
  padding: 24px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: #ffffff;
  box-shadow: 0 4px 16px rgba(2,86,164,0.06);
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}

.service-card:hover,
.service-card:focus {
  transform: translateY(-2px);
  border-color: var(--brand-blue);
  box-shadow: 0 10px 24px rgba(2,86,164,0.12);
}

.service-card h3 {
  margin: 0 0 10px;
  color: var(--brand-blue-dark);
  font-size: 1.25rem;
  line-height: 1.2;
}

.service-card p {
  margin: 0;
  color: var(--brand-muted);
}

.service-card .card-link {
  display: inline-block;
  margin-top: 16px;
  color: var(--brand-blue);
  font-weight: 900;
}

.action-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 46px;
  padding: 0 18px;
  background: #ffffff;
  color: var(--brand-blue-dark);
  border-radius: calc(var(--radius) - 2px);
  font-weight: 900;
  white-space: nowrap;
}

.action-button:hover,
.action-button:focus {
  background: #eaf3fb;
  text-decoration: underline;
  text-underline-offset: 4px;
}

.sidebar-card {
  padding: 28px 24px 20px;
  background: #ffffff;
  border: 1px solid #d7e2ec;
  border-radius: 10px;
  box-shadow: 0 6px 18px rgba(0, 54, 102, 0.10);
}

.sidebar-card.highlight {
  background: var(--brand-blue);
  color: #ffffff;
  border-color: var(--brand-blue);
}

.sidebar-card h2 {
  margin: 0 0 18px;
  color: #004c91;
  font-size: 1.22rem;
  line-height: 1.25;
  font-weight: 700;
}

.sidebar-card.highlight h2,
.sidebar-card.highlight p,
.sidebar-card.highlight a {
  color: #ffffff;
}

.sidebar-card p {
  margin: 0 0 14px;
  color: var(--brand-muted);
}

.sidebar-card ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 10px;
}

.sidebar-card a {
  color: #00549f;
  font-weight: 500;
}

.sidebar-card a:hover,
.sidebar-card a:focus {
  color: #00549f;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.sidebar-card.highlight a:hover,
.sidebar-card.highlight a:focus {
  color: #ffffff;
}

.related-card {
  display: block;
  padding: 22px;
  background: #ffffff;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: 0 4px 16px rgba(2,86,164,0.06);
  transition: transform .18s ease, border-color .18s ease;
}

.related-card strong {
  display: block;
  margin-bottom: 8px;
  color: var(--brand-blue-dark);
  font-size: 1.08rem;
}

.related-card span {
  display: block;
  color: var(--brand-muted);
}

.related-card:hover,
.related-card:focus {
  border-color: var(--brand-blue);
  transform: translateY(-2px);
}

/* ---- Existing card grid ---- */

.existing-card-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}

.existing-link-card {
  display: block;
  padding: 24px;
  min-height: 170px;
  background: #ffffff;
  border: 1px solid var(--border);
  border-left: 6px solid var(--brand-blue);
  border-radius: var(--radius);
  box-shadow: 0 4px 16px rgba(2,86,164,0.06);
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}

.existing-link-card:hover,
.existing-link-card:focus {
  transform: translateY(-2px);
  border-color: var(--brand-blue);
  box-shadow: 0 10px 24px rgba(2,86,164,0.12);
}

.existing-link-card h2 {
  margin: 0 0 10px;
  color: var(--brand-blue-dark);
  font-size: 1.28rem;
  line-height: 1.18;
}

.existing-link-card p {
  margin: 0;
  color: var(--brand-muted);
}

.parks-full-width .existing-card-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.existing-page-link .button,
.existing-page-link .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 13px 18px;
  background: var(--brand-blue);
  color: #ffffff !important;
  border-radius: calc(var(--radius) - 2px);
  font-weight: 900;
  text-decoration: none;
}

.existing-page-link .button:hover,
.existing-page-link .button:focus,
.existing-page-link .btn:hover,
.existing-page-link .btn:focus {
  background: var(--brand-blue-dark);
  text-decoration: underline;
  text-underline-offset: 4px;
}

/* --- Sidebar cards --- */

.sidebar-card {
  padding: 24px;
  background: #ffffff;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: 0 6px 18px rgba(2,86,164,0.08);
}

.sidebar-card.highlight {
  background: var(--brand-blue);
  color: #ffffff;
  border-color: var(--brand-blue);
}

.sidebar-card h2 {
  margin: 0 0 10px;
  color: var(--brand-blue-dark);
  font-size: 1.25rem;
  font-weight: 600!important;
}

.sidebar-card.highlight h2,.sidebar-card.highlight p,.sidebar-card.highlight a {
  color: #ffffff;
}

.sidebar-card p {
  margin: 0 0 14px;
  color: var(--brand-muted);
}

.sidebar-card ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 10px;
}

.sidebar-card a {
  color: var(--brand-blue);
}

.sidebar-card a:hover,.sidebar-card a:focus {
  color: var(--brand-blue-dark);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.sidebar-card.highlight a:hover,.sidebar-card.highlight a:focus {
  color: #ffffff;
}

.accordion-trigger,.acc-hdr {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 15px 18px;
  border: 0;
  background: #fff;
  color: #000;
  text-align: left;
  font-family: inherit;
  font-size: 1rem;
  font-weight: 700!important;
  cursor: pointer;
  transition: background .15s,color .15s;
}

.accordion-trigger span, .acc-hdr span {
  font-weight: 700!important;
  font-family: inherit;
}

.accordion-trigger:hover,.accordion-trigger:focus,.acc-hdr:hover,.acc-hdr:focus {
  background: #f5f7fa;
  color: #000;
}

.acc-hdr:focus {
  outline: none;
}

.acc-hdr:focus-visible {
  outline: 2px solid var(--brand-blue);
  outline-offset: -2px;
}

.accordion-item.open .accordion-trigger,.acc.open > .acc-hdr,.accordion-trigger[aria-expanded="true"],.acc-hdr[aria-expanded="true"] {
  background: #edf2f8;
  color: var(--brand-blue);
}

/* + / − icon */

.accordion-trigger::after, .acc-hdr::after {
  content: '+';
  content: '+' / '';
  speak: never;
  display: inline-block;
  font-size: 1.375rem;
  font-weight: 400;
  line-height: 1;
  flex-shrink: 0;
  color: var(--brand-blue);
  min-width: 20px;
  text-align: center;
}

.accordion-item.open .accordion-trigger::after, .acc.open > .acc-hdr::after, .accordion-trigger[aria-expanded="true"]::after, .acc-hdr[aria-expanded="true"]::after {
  content: '\2212';
  content: '\2212' / '';
  speak: never;
}

/* Hide old explicit icons */

.accordion-trigger svg, .acc-hdr svg, .acc-ico {
  display: none !important;
}

/* Body */

.accordion-panel,.acc-body {
  display: none;
  padding: 16px 18px 20px;
  font-size: 1rem;
  color: var(--brand-text);
  border-top: 1px solid var(--border);
  line-height: 1.7;
  background: #fff;
}

.accordion-panel.open,.acc-body.open,.accordion-trigger[aria-expanded="true"] + .accordion-panel,.acc-hdr[aria-expanded="true"] + .acc-body {
  display: block;
}

.accordion-panel h3,.acc-body h3 {
  margin: 22px 0 8px;
  color: var(--brand-blue-dark);
  font-size: 1.05rem;
  font-weight: 600!important;
}

.accordion-panel p,.acc-body p {
  margin: 0 0 14px;
  color: var(--brand-text);
  font-weight: 400!important;
}

.accordion-panel a,.acc-body a {
  color: var(--brand-blue);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.accordion-panel a:hover,.accordion-panel a:focus,.acc-body a:hover,.acc-body a:focus {
  color: var(--brand-blue-dark);
}

.accordion-panel a.btn,.acc-body a.btn {
  text-decoration: none!important;
  font-weight: 600!important;
}

.accordion-panel a.btn:hover,.accordion-panel a.btn:focus,.acc-body a.btn:hover,.acc-body a.btn:focus {
  text-decoration: underline!important;
  color: #fff!important;
}

.migrated-body-section a.btn,.migrated-intro a.btn {
  text-decoration: none!important;
  font-weight: 600!important;
}

.migrated-body-section a.btn:hover,.migrated-body-section a.btn:focus,.migrated-intro a.btn:hover,.migrated-intro a.btn:focus {
  text-decoration: underline!important;
  color: #fff!important;
}

/* --- FOI sidebar card specifics --- */

.foi-sidebar .sidebar-card {
  padding: 24px;
  background: #ffffff;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: 0 6px 18px rgba(2,86,164,0.08);
}

.foi-sidebar .sidebar-card h2 {
  margin: 0 0 10px;
  color: var(--brand-blue-dark);
  font-size: 1.25rem;
  font-weight: 600!important;
}

.foi-sidebar .sidebar-card p {
  margin: 0;
  color: var(--brand-muted);
  font-weight: 400!important;
}

.foi-sidebar .sidebar-card ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 10px;
}

.foi-sidebar .sidebar-card a {
  color: var(--brand-blue);
  font-weight: 400!important;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.foi-sidebar .sidebar-card a:hover,.foi-sidebar .sidebar-card a:focus {
  color: var(--brand-blue-dark);
}

/* --- Related sidebar card --- */

.related-sidebar-card {
  padding: 22px;
}

.related-sidebar-card p {
  color: var(--brand-muted);
  font-size: 1.125rem;
  margin: 0 0 14px;
}

/* --- Page feedback card --- */

.page-feedback-card {
  padding: 24px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: 0 6px 18px rgba(2,86,164,.08);
}

.page-feedback-card h2 {
  margin: 0 0 8px;
  color: var(--brand-blue-dark);
  font-size: 1.25rem;
  line-height: 1.2;
  font-weight: 600!important;
}

.page-feedback-card p {
  margin: 0 0 14px;
  color: var(--brand-muted);
}

.page-feedback-card fieldset {
  margin: 0 0 14px;
  padding: 0;
  border: 0;
}

.feedback-rating input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.feedback-rating label:hover,.feedback-rating label:hover ~ label,.feedback-rating input:checked ~ label {
  color: var(--brand-highlight-green);
}

.feedback-rating input:focus + label {
  outline: 3px solid var(--brand-highlight-green);
  outline-offset: 2px;
}

.page-feedback-card textarea {
  width: 100%;
  min-height: 92px;
  resize: vertical;
  padding: 11px 12px;
  border: 1px solid var(--border);
  border-radius: calc(var(--radius) - 2px);
  color: var(--brand-text);
  background: #fff;
  font: inherit;
}

.page-support-card {
  display: grid;
  grid-template-columns: 54px minmax(0,1fr);
  column-gap: 24px;
  row-gap: 0;
  align-items: start;
  padding: 0;
  margin: 0;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  text-align: left;
  min-height: 0;
}

.page-support-card::before {
  display: none;
}

.page-support-card h3 {
  grid-column: 2;
  grid-row: 1;
  margin: 0 0 12px;
  padding: 0;
  color: #2b2f33;
  font-size: 1.45rem;
  line-height: 1.15;
  font-weight: 600!important;
}

.page-support-card p {
  grid-column: 2;
  grid-row: 2;
  margin: 0;
  padding: 0;
  color: #2b2f33;
  font-weight: 400!important;
  max-width: 360px;
}

.page-support-card a,.page-support-card p strong {
  display: inline;
  color: var(--brand-blue);
  font-weight: 600!important;
  text-decoration: none;
}

.page-support-card a:hover,.page-support-card a:focus {
  color: var(--brand-blue-dark);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Badge — outlined pill */

.notif-badge, .toc-bnr-tag {
  flex-shrink: 0;
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  white-space: nowrap;
  padding: 4px 13px;
  border-radius: 20px;
  border: 2px solid rgba(255,255,255,.75);
  color: #fff;
  line-height: 1.4;
}

.notif-ticker[data-type="warning"] .notif-badge, .toc-bnr[data-type="warning"] .toc-bnr-tag {
  border-color: rgba(255,255,255,.75);
  color: #fff;
}

/* Prev / Next nav arrows - Hidden per prototype specifications */
#notifPrevBtn,
#notifNextBtn {
  display: none !important;
}

/* Notification Ticker Pause / Play Button (Matching Reference Prototype) */
.notice-motion-toggle,
.notif-pause-btn,
.toc-bnr-btn.notif-pause-btn,
#noticeMotionToggle,
#notifPauseBtn {
  flex: 0 0 44px !important;
  width: 44px !important;
  height: 36px !important;
  display: grid !important;
  place-items: center !important;
  padding: 0 !important;
  border: 1px solid rgba(255, 255, 255, 0.75) !important;
  border-radius: 5px !important;
  background: rgba(0, 0, 0, 0.14) !important;
  color: #ffffff !important;
  cursor: pointer !important;
  margin-left: auto !important;
  transition: background 0.18s ease, border-color 0.18s ease !important;
}

.notice-motion-toggle:hover,
.notif-pause-btn:hover,
.toc-bnr-btn.notif-pause-btn:hover,
#noticeMotionToggle:hover,
#notifPauseBtn:hover {
  background: rgba(0, 0, 0, 0.32) !important;
}

.notice-motion-toggle:focus-visible,
.notif-pause-btn:focus-visible,
.toc-bnr-btn.notif-pause-btn:focus-visible,
#noticeMotionToggle:focus-visible,
#notifPauseBtn:focus-visible {
  outline: 3px solid #ffffff !important;
  outline-offset: 3px !important;
  box-shadow: 0 0 0 5px var(--brand-blue-dark, #014785) !important;
}

.notice-motion-toggle svg,
.notif-pause-btn svg,
.toc-bnr-btn.notif-pause-btn svg,
#noticeMotionToggle svg,
#notifPauseBtn svg {
  width: 16px !important;
  height: 16px !important;
  fill: currentColor !important;
  stroke: none !important;
}

.notice-motion-toggle .icon-play,
.notif-pause-btn .icon-play,
.notif-pause-btn .notif-play-icon {
  display: none;
}

.notice-motion-toggle.is-paused .icon-pause,
.notif-pause-btn.is-paused .icon-pause,
.notif-pause-btn.is-paused .notif-pause-icon {
  display: none !important;
}

.notice-motion-toggle.is-paused .icon-play,
.notif-pause-btn.is-paused .icon-play,
.notif-pause-btn.is-paused .notif-play-icon {
  display: block !important;
}

.notif-nav-btn, .toc-bnr-btn {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 1.5px solid rgba(255,255,255,.5);
  background: transparent;
  cursor: pointer;
  color: #fff;
  padding: 0;
  transition: background .2s,border-color .2s;
}

.notif-nav-btn:hover,.notif-nav-btn:focus,.toc-bnr-btn:hover,.toc-bnr-btn:focus {
  background: rgba(255,255,255,.18);
  border-color: rgba(255,255,255,.9);
  outline: none;
}

.notif-nav-btn svg,.toc-bnr-btn svg {
  width: 13px;
  height: 13px;
  stroke: currentColor;
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  fill: none;
}

.notif-ticker[data-type="warning"] .notif-nav-btn, .toc-bnr[data-type="warning"] .toc-bnr-btn {
  border-color: rgba(255,255,255,.5);
  color: #fff;
}

.notif-ticker[data-type="warning"] .notif-nav-btn:hover,.notif-ticker[data-type="warning"] .notif-nav-btn:focus,.toc-bnr[data-type="warning"] .toc-bnr-btn:hover,.toc-bnr[data-type="warning"] .toc-bnr-btn:focus {
  background: rgba(255,255,255,.18);
  border-color: rgba(255,255,255,.9);
}

/* ============================================================
   CROSS-BROWSER COMPATIBILITY FIXES
   Addresses Firefox (and other browsers) rendering their own
   blue focus rings / borders on inputs, textareas, and buttons.
   ============================================================ */

/* Rows 31, 32, 33, 35 — replace browser-default blue focus ring on
   all inputs and textareas with brand-blue ring */

input:focus,
input:focus-visible,
select:focus,
select:focus-visible,
textarea:focus,
textarea:focus-visible {
  outline: 1px solid #000000 !important;
  outline-offset: 0;
  border-color: var(--brand-blue) !important;
}

.enews-form input.input-invalid {
  border-color: #c0392b !important;
  box-shadow: 0 0 0 3px rgba(192, 57, 43, 0.12) !important;
}

.enews-form input.input-invalid:focus,
.enews-form input.input-invalid:focus-visible {
  outline-color: #c0392b;
  border-color: #c0392b !important;
  box-shadow: 0 0 0 3px rgba(192, 57, 43, 0.15) !important;
}

/* BUTTON TEXT — Antialiasing for all buttons; white text only on primary (dark-bg) variants. */

.btn,
a.btn,
button.btn {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.btn-p {
  color: #ffffff !important;
}

.btn-s {
  background-color: var(--white) !important;
  border: 2px solid var(--brand-blue-dark)  !important;
  color: var(--brand-blue-dark)  !important;
  font-weight: bold !important;
  transition: transform .15s ease, background .15s ease, border-color .15s ease  !important;
  padding: 14px 22px  !important;
  border-radius: var(--radius, 4px)  !important;
  display: inline-block !important;
}

.btn-s:hover {
  background: #d4e7f742 !important;
  border-color: var(--brand-blue-dark) !important;
  color: var(--brand-blue-dark) !important;
  text-decoration: underline !important;
  text-underline-offset: 2px !important;
  text-decoration-thickness: 1.5px !important;
}

.btn, .btn-p, .btn-s, .btn-secondary, .btn-outline, .btn-o, .btn-ql, .button {
  font-size: 1rem !important;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 16px;
  border-radius: calc(var(--radius) - 2px);
  font: inherit;
  font-weight: bold !important;
  cursor: pointer;
  border: 1px solid var(--brand-blue);
  transition: background .18s ease, color .18s ease, border-color .18s ease;
  text-decoration: none;
}

.btn:hover, .btn:focus {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.btn-p {
  background: var(--brand-blue) !important;
  color: #fff !important;
  border: 0 !important;
  border-radius: calc(var(--radius) - 2px) !important;
  padding: 14px 22px !important;
  font-weight: bold !important;
  cursor: pointer !important;
  display: inline-block !important;
  transition: background .18s ease, transform .18s ease !important;
}

.btn-p:hover {
  background: var(--brand-highlight-green) !important;
  border-color: var(--brand-highlight-green) !important;
  color: #ffffff !important;
  text-decoration: underline !important;
  text-underline-offset: 4px !important;
  transform: translateY(-2px);
}

.btn-p:active {
  opacity: 0.74;
  transform: scale(0.975);
  box-shadow: inset 0 2px 6px rgba(0,0,0,0.18);
}

.btn-p:focus, .btn-p:focus-visible {
  background: var(--brand-highlight-green) !important;
  border-color: var(--brand-highlight-green) !important;
  color: #ffffff !important;
  text-decoration: underline !important;
  text-underline-offset: 4px !important;
  transform: translateY(-2px);
  outline: 3px solid var(--brand-blue-dark) !important;
  outline-offset: 3px !important;
}

.btn-outline, .btn-o {
  background: #fff;
  border: 2px solid var(--brand-blue-dark);
  color: var(--brand-blue-dark);
  font-weight: bold !important;
  transition: transform .15s ease, background .15s ease, border-color .15s ease;
}

.btn-outline:hover, .btn-o:hover {
  background: var(--brand-light);
  color: var(--brand-blue-dark);
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-thickness: 1.5px;
}

.btn-outline:active, .btn-o:active {
  opacity: 0.74;
  transform: scale(0.975);
  box-shadow: inset 0 2px 6px rgba(0,0,0,0.18);
}

.btn-outline:focus, .btn-outline:focus-visible,
.btn-o:focus, .btn-o:focus-visible {
  background: var(--brand-light) !important;
  color: var(--brand-blue-dark) !important;
  text-decoration: underline !important;
  text-underline-offset: 2px !important;
  text-decoration-thickness: 1.5px !important;
  outline: 3px solid var(--brand-blue-dark) !important;
  outline-offset: 3px !important;
}

.btn-s {
  background-color: var(--white);
  border: 2px solid var(--brand-blue-dark);
  color: var(--brand-blue-dark);
  font-weight: bold !important;
  transition: transform .15s ease, background .15s ease, border-color .15s ease;
}

.btn-s:hover {
  background: #d4e7f742;
  border-color: var(--brand-blue-dark);
  color: var(--brand-blue-dark);
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-thickness: 1.5px;
}

.btn-s:active {
  opacity: 0.74;
  transform: scale(0.975);
  box-shadow: inset 0 2px 6px rgba(0,0,0,0.18);
}

.btn-s:focus, .btn-s:focus-visible {
  background: #d4e7f742 !important;
  border-color: var(--brand-blue-dark) !important;
  color: var(--brand-blue-dark) !important;
  text-decoration: underline !important;
  text-underline-offset: 2px !important;
  text-decoration-thickness: 1.5px !important;
  outline: 3px solid var(--brand-blue-dark) !important;
  outline-offset: 3px !important;
  box-shadow: none !important;
}

.view-toggle button {
  border: 0;
  background: transparent;
  color: var(--brand-muted);
  padding: 9px 14px;
  border-radius: 999px;
  font: inherit;
  font-weight: bold !important;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.view-toggle button.active {
  background: var(--brand-blue);
  color: #fff;
  transition: background 0.18s, color 0.18s;
  font-weight: bold !important;
}

.view-toggle button.active:hover {
  background: var(--brand-highlight-green);
}

.view-toggle button:focus,
.view-toggle button:focus-visible {
  outline: 3px solid var(--brand-blue-dark);
  outline-offset: 3px;
}

.view-toggle button.active:focus,
.view-toggle button.active:focus-visible {
  background: var(--brand-highlight-green);
}

.view-toggle button:hover:not(.active),
.view-toggle button:focus:not(.active),
.view-toggle button:focus-visible:not(.active) {
  background: rgba(0, 0, 0, 0.05);
  color: var(--brand-text);
}

/* ── Community Event CTA Banner (Exact Match to Image 1 Reference) ── */

.community-event-cta {
  background: #eaf3fb !important;
  border-bottom: 1px solid #dce5ef !important;
  border-top: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  width: 100% !important;
}

.community-event-cta-inner {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 24px !important;
  padding-top: 26px !important;
  padding-bottom: 26px !important;
  background: transparent !important;
  border: 0 !important;
  border-left: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  height: auto !important;
}

.community-event-cta-text {
  flex: 1 1 auto;
}

.community-event-cta h2 {
  margin: 0 0 6px 0 !important;
  color: var(--brand-blue) !important;
  font-size: clamp(1.25rem, 2.1vw, 1.75rem) !important;
  line-height: 1.25 !important;
  font-weight: 600 !important;
}

.community-event-cta p {
  margin: 0 !important;
  color: var(--brand-muted) !important;
  font-size: 1rem !important;
  line-height: 1.5 !important;
  font-weight: 400 !important;
}

.category-option {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  padding: 8px 4px;
  background: #fff;
  border: 0;
  border-radius: 0;
  color: var(--brand-text);
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  user-select: none;
}

.category-option input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.category-option:has(input:checked) {
  box-shadow: none;
}

.category-option:has(input:not(:checked)) {
  opacity: .42;
  background: #fff;
}

.filter-link-button {
  padding: 0;
  background: transparent;
  border: 0;
  color: var(--brand-blue);
  font: inherit;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}

.filter-link-button:hover, .filter-link-button:focus {
  color: var(--brand-blue-dark);
}

.month-nav button, .month-nav-button {
  width: 46px !important;
  min-width: 46px !important;
  max-width: 46px !important;
  height: 46px !important;
  min-height: 46px !important;
  max-height: 46px !important;
  padding: 0 !important;
  margin: 0 !important;
  border: 2px solid rgba(255,255,255,.78);
  border-radius: 50% !important;
  background: rgba(255,255,255,.10);
  color: #fff;
  cursor: pointer;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  align-self: center !important;
  justify-self: center !important;
  aspect-ratio: 1 / 1 !important;
  flex: 0 0 46px !important;
  box-sizing: border-box !important;
}

.month-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  flex: 0 0 46px;
}

.month-nav button:hover, .month-nav button:focus,
.month-nav-button:hover, .month-nav-button:focus {
  background: #fff;
  color: var(--brand-blue-dark);
  border-color: #fff;
}

.event-card {
  color: inherit;
  text-decoration: none;
  display: grid;
  grid-template-columns: 116px minmax(0,1fr) auto;
  column-gap: 32px;
  align-items: center;
  padding: 40px 32px 40px 40px;
  border-bottom: 1px solid var(--border);
  background: #fff;
  box-shadow: none;
}

.event-card:last-child {
  border-bottom: 0;
}

.event-card:hover, .event-card:focus {
  background: #f8fbfe;
  outline: 3px solid rgba(2,86,164,.18);
  outline-offset: -3px;
}

.event-card:hover h3, .event-card:focus h3 {
  text-decoration: underline;
  text-underline-offset: 4px;
}

.event-card.event-town-card {
  border-left: 6px solid var(--event-town);
}

.event-card.event-community-card {
  border-left: 6px solid var(--event-community);
}

.event-card.event-recreation-card {
  border-left: 6px solid var(--event-recreation);
}

.event-card.event-arts-card {
  border-left: 6px solid var(--event-arts);
}

.event-card.event-engagement-card {
  border-left: 6px solid var(--event-engagement);
}

.event-town-card .event-date {
  background: var(--event-town);
}

.event-community-card .event-date {
  background: var(--event-community);
}

.event-recreation-card .event-date {
  background: var(--event-recreation);
}

.event-arts-card .event-date {
  background: var(--event-arts);
}

.event-engagement-card .event-date {
  background: var(--event-engagement);
}

.list-sidebar .category-option:has(input:not(:checked)) {
  opacity: .45;
  background: transparent;
}

.list-sidebar .category-option:has(input:checked) {
  box-shadow: none;
}

.date-grid .input-icon-wrap {
  width: 100%;
}

.date-grid .input-icon-wrap input {
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
}

.check-row input {
  margin-top: 4px;
  accent-color: var(--brand-blue);
}

.input-icon-wrap {
  position: relative;
  display: flex;
  align-items: center;
}

.input-icon-wrap .input-icon {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%)!important;
  width: 16px;
  height: 16px;
  stroke: var(--brand-muted);
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  pointer-events: none;
  flex-shrink: 0;
}

.input-icon-wrap .has-icon {
  padding-left: 42px;
  width: 100%;
}

.subscribe-top-button {
  display: block !important;
  text-align: center !important;
  white-space: normal !important;
  word-wrap: break-word !important;
  min-width: 138px;
}

.subscribe-top-button svg {
  display: inline-block !important;
  width: 1.25em !important;
  height: 1.25em !important;
  fill: none !important;
  stroke: currentColor !important;
  stroke-width: 2.2 !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
  flex-shrink: 0 !important;
  margin: -2px 0 0 8px !important;
  vertical-align: middle !important;
}

.sidebar-subscribe-button {
  display: block !important;
  width: 100% !important;
}

.sidebar-subscribe-body .btn {
  width: 100%;
}

.news-shell .news-card {
  display: grid;
  grid-template-columns: 190px minmax(0,1fr);
  gap: 24px;
  background: #fff;
  border: 1px solid var(--border);
  border-top: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: 0 6px 18px rgba(2,86,164,.08);
  overflow: hidden;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.news-shell .news-card:hover, .news-shell .news-card:focus-within {
  transform: translateY(-2px);
  box-shadow: 0 10px 30px rgba(0,0,0,.10);
  border-color: var(--brand-blue);
}

.news-shell .news-card.no-image {
  grid-template-columns: 1fr;
}

.news-shell .news-card.no-image .news-content {
  padding-left: 24px;
}

.chip.chip-filled-primary {
  display: inline-flex;
  align-items: center;
  min-height: 26px;
  padding: 0 10px;
  border-radius: 999px;
  background: var(--chip-primary-bg, #cfea7e);
  color: var(--chip-primary-color, #000000);
  font-weight: 600;
  border: 1.5px solid var(--chip-primary-bg, #cfea7e);
}

.chip.chip-filled-notice {
  display: inline-flex;
  align-items: center;
  min-height: 26px;
  padding: 0 10px;
  border-radius: 999px;
  background: var(--brand-blue);
  color: #ffffff;
  font-weight: 600;
  border: 1.5px solid var(--brand-blue);
}

.news-shell .news-card h2 {
  margin: 0 0 10px;
  color: var(--brand-blue-dark);
  font-size: 1.42rem;
  line-height: 1.18;
  font-weight: 600;
}

.news-shell .news-card h2 a:hover, .news-shell .news-card h2 a:focus {
  color: var(--brand-blue);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.news-shell .news-card p {
  margin: 0 0 18px;
  color: var(--brand-muted);
  font-weight: 400;
}

.post-card {
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  overflow: visible;
}

.chip.chip-filled-primary {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 0 11px;
  border-radius: 999px;
  background: var(--chip-primary-bg, #cfea7e);
  color: var(--chip-primary-color, #000000);
  font-size: .94rem;
  font-weight: 600;
  border: 1.5px solid var(--chip-primary-bg, #cfea7e);
}

.sidebar-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  width: 100%;
  min-height: 50px;
  padding: 0 18px;
  border: 2px solid var(--brand-highlight-green);
  border-radius: calc(var(--radius) - 2px);
  background: var(--brand-highlight-green);
  color: #fff;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
  transition: transform .15s ease, background .15s ease, border-color .15s ease;
}

.sidebar-button:hover {
  background: var(--brand-highlight-green-dark);
  border-color: var(--brand-highlight-green-dark);
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-thickness: 1.5px;
}

.sidebar-button:active {
  opacity: 0.74;
  transform: scale(0.975);
  box-shadow: inset 0 2px 6px rgba(0,0,0,0.18);
}

.sidebar-button:focus, .sidebar-button:focus-visible {
  background: var(--brand-highlight-green);
  border-color: var(--brand-highlight-green);
  outline: 3px solid var(--brand-highlight-green);
  outline-offset: 3px;
  box-shadow: none;
}

.sidebar-button svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.btn-g {
  background: var(--brand-highlight-green);
  border-color: var(--brand-highlight-green);
  color: #fff;
  font-weight: 700;
  transition: transform .15s ease, background .15s ease, border-color .15s ease;
}

.btn-g:hover {
  background: var(--brand-highlight-green-dark);
  border-color: var(--brand-highlight-green-dark);
  color: #fff;
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-thickness: 1.5px;
}

.btn-g:active {
  opacity: 0.74;
  transform: scale(0.975);
  box-shadow: inset 0 2px 6px rgba(0,0,0,0.18);
}

.btn-g:focus, .btn-g:focus-visible {
  background: var(--brand-highlight-green);
  border-color: var(--brand-highlight-green);
  color: #fff;
  outline: 3px solid var(--brand-highlight-green);
  outline-offset: 3px;
  box-shadow: none;
}

.btn-g svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.subscribe-category-option input {
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  margin: 0;
  accent-color: var(--brand-blue);
  cursor: pointer;
}

.subscribe-modal-actions .btn {
  width: 100%;
  min-height: 42px;
}

.applications-list-layout,
.applications-main-col,
.applications-filter-sidebar,
.filter-panel,
.application-card,
.ward-list-heading {
  cursor: default;
}

.applications-filter-sidebar input[type="text"],
.applications-filter-sidebar input[type="search"],
.policies-shell .filter-panel input[type="text"],
.policies-shell .filter-panel input[type="search"] {
  cursor: text !important;
}

.applications-filter-sidebar select,
.applications-filter-sidebar button,
.applications-filter-sidebar input[type="checkbox"],
.applications-filter-sidebar input[type="radio"],
.policies-shell .filter-panel select,
.policies-shell .filter-panel button,
.application-card a,
.map-toolbar button {
  cursor: pointer !important;
}

.map-toolbar .button, .map-toolbar .btn {
  min-height: 42px;
}

.applications-filter-sidebar .filter-actions .filter-reset-button {
  width: 100%;
}

.application-card {
  display: grid;
  grid-template-columns: minmax(0,1fr) auto;
  gap: 18px;
  align-items: start;
  padding: 22px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: #fff;
  box-shadow: 0 4px 16px rgba(2,86,164,.06);
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}

.application-card:hover, .application-card:focus-within {
  transform: translateY(-2px);
  border-color: var(--brand-blue);
  box-shadow: 0 10px 24px rgba(2,86,164,.12);
}

.application-card h3 {
  margin: 0 0 8px;
  color: var(--brand-blue-dark);
  font-size: 1.25rem;
  line-height: 1.2;
  font-weight: 600;
}

.chip {
  display: inline-flex;
  align-items: center;
  padding: 6px 9px;
  background: #f2f2f2;
  color: var(--brand-blue-dark);
  border-radius: 999px;
  font-size: .82rem;
  font-weight: 600;
  white-space: nowrap;
}

.chip.ward {
  background: var(--brand-light);
  color: var(--brand-blue-dark);
}

.chip.status {
  background: var(--secondary-green-light);
  color: var(--secondary-green-dark);
}

.process-card {
  padding: 22px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: 0 4px 16px rgba(2,86,164,.06);
}

.process-card strong {
  display: block;
  margin-bottom: 8px;
  color: var(--brand-blue-dark);
  font-size: 1.08rem;
  font-weight: 600;
}

.process-card span {
  display: block;
  color: var(--brand-muted);
}

/* Scoped list pattern for sidebar cards on this page */

.detail-shell .sidebar-card ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0;
}

.detail-shell .sidebar-card li {
  border-top: 1px solid var(--border);
}

.detail-shell .sidebar-card li:first-child {
  border-top: 0;
}

.detail-shell .sidebar-card li a {
  display: block;
  padding: 11px 0;
  color: var(--brand-blue);
  font-weight: 600;
  text-decoration: none;
}

.detail-shell .sidebar-card li a:hover, .detail-shell .sidebar-card li a:focus {
  color: var(--brand-blue-dark);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.event-intro-card {
  padding: 28px;
  margin-bottom: 28px;
  background: #fff;
  border: 1px solid var(--border);
  border-left: 6px solid var(--event-community);
  border-radius: var(--radius);
  box-shadow: 0 6px 18px rgba(2,86,164,.08);
}

.event-intro-card p {
  margin: 0;
  color: var(--brand-text);
  font-weight: 400;
}

.event-detail-card {
  padding: 20px;
  background: var(--soft);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}

.event-detail-card h3 {
  margin: 0 0 8px;
  color: var(--brand-blue-dark);
  font-size: 1.06rem;
}

.event-detail-card p {
  margin: 0;
  color: var(--brand-text);
  font-weight: 400;
}

.event-detail-card a {
  color: var(--brand-blue);
  font-weight: 600;
  text-decoration: none;
}

.event-detail-card a:hover, .event-detail-card a:focus {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.event-sidebar .event-actions .button,
.event-sidebar .event-actions .btn {
  width: 100%;
  max-width: 100%;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px;
  box-sizing: border-box;
  white-space: normal;
  height: auto;
  text-align: center !important;
  font-weight: 600 !important;
}

.event-sidebar .event-actions .button svg,
.event-sidebar .event-actions .btn svg {
  width: 1.25em;
  height: 1.25em;
  flex-shrink: 0;
}

/* Event sidebar card uses header+body pattern (no card-level padding) */

.event-sidebar .sidebar-card {
  padding: 0;
  overflow: hidden;
}

.event-sidebar .sidebar-card h2 {
  margin: 0;
  padding: 20px 22px 0;
}

.sidebar-card-body {
  padding: 18px 22px 22px;
}

.event-sidebar .sidebar-card.cu-card .cu-card-body {
  padding: 10px 22px 22px;
}

/* ================================================================
   UNIFIED INPUT / SELECT — all new page shells
   Scope covers every text-like field on all 7 new pages.
   Uses container selectors so no input type is missed.
   ================================================================ */

/* ---- Base appearance ---- */

.news-shell    input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]),
.news-shell    select,
.application-shell input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]),
.application-shell select,
.policies-shell input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]),
.policies-shell select,
select#policySort,
.post-shell    input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]),
.post-shell    select,
.subscribe-modal-backdrop input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]),
.subscribe-modal-backdrop select,
.content-shell input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]),
.content-shell select {
  display: block !important;
  width: 100% !important;
  min-height: 48px !important;
  padding: 12px 16px !important;
  border: 2px solid #d0dae3 !important;
  border-radius: var(--radius) !important;
  background: #fff !important;
  color: var(--brand-text) !important;
  font: inherit !important;
  font-size: 1rem !important;
  line-height: 1.4 !important;
  transition: border-color .18s ease, box-shadow .18s ease !important;
  -webkit-appearance: none !important;
  appearance: none !important;
}

/* Restore native date picker (overrides appearance:none above) */

.news-shell input[type="date"]:not([type="submit"]):not([type="button"]),
.application-shell input[type="date"]:not([type="submit"]):not([type="button"]),
.content-shell input[type="date"]:not([type="submit"]):not([type="button"]) {
  -webkit-appearance: auto !important;
  appearance: auto !important;
  cursor: pointer !important;
}

/* Hide the native calendar icon but stretch it across the full field
   so clicking anywhere on the input still opens the picker */

.news-shell .input-icon-wrap input[type="date"]::-webkit-calendar-picker-indicator,
.application-shell .input-icon-wrap input[type="date"]::-webkit-calendar-picker-indicator,
.content-shell .input-icon-wrap input[type="date"]::-webkit-calendar-picker-indicator {
  display: none !important;
}

/* Search icon padding override */

.news-shell .input-icon-wrap input.has-icon:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]),
.application-shell .input-icon-wrap input.has-icon:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]),
.policies-shell .input-icon-wrap input.has-icon:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]),
.content-shell .input-icon-wrap input.has-icon:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]) {
  padding-left: 36px !important;
}

/* Remove webkit search clear button */

.news-shell    input[type="search"]::-webkit-search-cancel-button,
.application-shell input[type="search"]::-webkit-search-cancel-button,
.policies-shell input[type="search"]::-webkit-search-cancel-button,
.content-shell input[type="search"]::-webkit-search-cancel-button {
  -webkit-appearance: none !important;
}

/* ---- Focus / active — blue ring matching site search bar ---- */

.news-shell    input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]):focus,
.news-shell    select:focus,
.application-shell input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]):focus,
.application-shell select:focus,
.policies-shell input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]):focus,
.policies-shell select:focus,
select#policySort:focus,
.post-shell    input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]):focus,
.post-shell    select:focus,
.subscribe-modal-backdrop input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]):focus,
.subscribe-modal-backdrop select:focus,
.content-shell input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]):focus,
.content-shell select:focus {
  border-color: #000000 !important;
  outline: none !important;
}

/* ---- Select: custom chevron arrow (all contexts) ---- */

.news-shell select,
.application-shell select,
.policies-shell select,
select#policySort,
.post-shell select,
.subscribe-modal-backdrop select,
.content-shell select {
  padding-right: 46px !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%231d2b36' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 14px center !important;
  background-size: 16px 16px !important;
  cursor: pointer !important;
}

/* Hide duplicate chevron arrow span inside calculator page */

.content-shell select + span {
  display: none !important;
}

/* Ensure the hidden select inside custom dropdown containers is never displayed */

.custom-select-container select {
  display: none !important;
}

/* Ensure the custom dropdown panel floats above page body content but stays behind the sticky header (z-index 100) */

.custom-select-dropdown {
  z-index: 90 !important;
}

/* Custom select trigger styling to match unified input/select in Burn Permit */

.custom-select-trigger {
  min-height: 48px !important;
  border: 2px solid #d0dae3 !important;
  border-radius: var(--radius) !important;
  padding: 12px 16px !important;
  font-size: 1rem !important;
  color: var(--brand-text) !important;
  box-sizing: border-box !important;
  background-color: #fff !important;
}

.custom-select-trigger span {
  font-size: 1rem !important;
}

.custom-select-trigger svg {
  transition: transform 0.2s ease !important;
}

.custom-select-trigger.open svg {
  transform: rotate(180deg) !important;
}

/* ================================================================
   PAGINATION ITEMS — .pg-item boxed button pattern
   ================================================================ */

.pg-item {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  height: 40px;
  padding: 0 14px;
  border: 1.5px solid var(--border);
  border-radius: var(--radius);
  font-size: .94rem;
  font-weight: 600;
  color: var(--brand-blue);
  text-decoration: none;
  background: #fff;
  transition: background .15s, color .15s, border-color .15s;
  cursor: pointer;
  user-select: none;
}

.policies-search-wrap .views-exposed-form .form-item-keyword input {
  width: 100% !important;
  height: 52px !important;
  border: 1px solid var(--border, #ccc) !important;
  border-right: 0 !important;
  border-radius: var(--radius, 6px) 0 0 var(--radius, 6px) !important;
  padding: 15px 16px !important;
  font-size: 1rem !important;
  font-family: inherit !important;
  color: var(--brand-text) !important;
  box-sizing: border-box !important;
  background: #fff !important;
}

.policies-search-wrap .views-exposed-form .form-item-keyword input:focus {
  outline: 2px solid var(--brand-blue, #1a5ea8) !important;
  outline-offset: 0 !important;
  border-color: var(--brand-blue, #1a5ea8) !important;
}

.policy-card {
  border: 1px solid var(--border);
  border-left: 4px solid var(--brand-blue);
  border-radius: var(--radius);
  padding: 22px 24px 20px;
  background: #fff;
  transition: box-shadow .18s;
}

.policy-card:hover {
  box-shadow: 0 4px 16px rgba(2,86,164,.1);
}

.policy-card-title {
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--brand-blue-dark);
  margin: 0 0 14px;
}

.policy-card-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.section-card {
  padding: 0 0 26px;
  border: 0;
}

.section-card h3 {
  background: transparent;
  color: var(--brand-blue-dark);
  padding: 0 0 10px;
  margin: 0 0 14px;
  border-radius: 0;
  border-bottom: 2px solid var(--brand-blue-dark);
  font-weight: 600;
  font-size: 1.18rem;
  line-height: 1.2;
}

.section-card ul, .section-card li, .section-card li.subpage-accordion > ul {
  list-style: none;
}

.section-card ul {
  padding-left: 0;
  margin: 0;
}

.section-card li {
  margin: 8px 0;
  color: var(--brand-muted);
}

.section-card li li {
  margin: 6px 0;
  font-size: .94rem;
}

.section-card li.subpage-accordion > ul {
  padding-left: 14px;
}

.section-card li.subpage-accordion > ul li {
  padding-left: 0;
}

.section-card a {
  color: var(--brand-muted);
  font-weight: 500;
  text-decoration: none;
  overflow-wrap: anywhere;
}

.section-card a:hover, .section-card a:focus {
  color: var(--brand-blue);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.section-card li.subpage-accordion {
  margin: 10px 0;
}

.section-card li.subpage-accordion > a {
  display: inline;
}

.section-card li.subpage-accordion > ul {
  display: none;
  margin: 9px 0 0;
  padding: 10px 12px 10px 14px;
  background: #f5f7fa;
  border-left: 3px solid var(--brand-blue);
  border-radius: 0 calc(var(--radius) - 4px) calc(var(--radius) - 4px) 0;
}

.section-card li.subpage-accordion.open > ul {
  display: block;
}

.sitemap-control-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  padding: 10px 20px !important;
  font: inherit;
  font-weight: 700 !important;
  white-space: nowrap;
  cursor: pointer;
}

.sitemap-control-button span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  font-size: 1.3rem;
  font-weight: 600;
  transform: translateY(-1px);
}

/* Focus styles for forms */

input[type="text"]:focus,
  input[type="email"]:focus,
  select:focus,
  input[type="checkbox"]:focus {
  border-color: var(--brand-blue) !important;
  outline: none;
}

/* Custom Autocomplete dropdown styles */

.custom-select-trigger {
  transition: all 0.2s ease;
}

.custom-select-trigger:hover {
  border-color: #a0aec0 !important;
}

.custom-select-trigger:focus {
  border-color: var(--brand-blue) !important;
  outline: none;
  box-shadow: 0 0 0 3px rgba(0, 102, 204, 0.2) !important;
}

.custom-select-trigger.open {
  border-color: #000000 !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
}

.slider-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 40px;
  height: 40px;
  background: rgba(255, 255, 255, 0.92);
  border: none;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 10;
  color: var(--brand-blue);
  transition: background 0.15s, box-shadow 0.15s;
  padding: 0;
}

.slider-btn:hover, .slider-btn:active {
  background: #fff;
  box-shadow: 0 2px 8px rgba(0,0,0,0.15);
  color: var(--brand-blue);
}

.slider-btn svg {
  width: 24px;
  height: 24px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.slider-btn.prev {
  left: 16px;
}

.slider-btn.next {
  right: 16px;
}

/* ================================================================
   PARKS & FACILITIES CARDS & UTILITIES (parks-and-facilities.html)
   ================================================================ */

.facility-card {
  display: grid;
  grid-template-columns: 240px minmax(0, 1fr);
  gap: 24px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: 0 6px 18px rgba(2, 86, 164, 0.06);
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
  margin-bottom: 22px;
}

.facility-card:hover, .facility-card:focus-within {
  transform: translateY(-2px);
  box-shadow: 0 10px 30px rgba(2, 86, 164, 0.12);
  border-color: var(--brand-blue);
}

.facility-card-image {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 200px;
  background: linear-gradient(135deg, #dce8f4, #f5f7fa);
  overflow: hidden;
}

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

.facility-card-image-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  width: 100%;
  background: #e9f1f7;
  color: #4b607a;
  font-weight: 700;
  font-size: 1.1rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 16px;
  text-align: center;
  box-sizing: border-box;
}

.facility-card-content {
  padding: 24px 24px 22px 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.facility-card-title {
  font-size: 1.35rem;
  font-weight: 700;
  color: var(--brand-blue-dark);
  margin: 0 0 12px 0;
}

.facility-card-title a {
  color: inherit;
  text-decoration: none;
}

.facility-card-title a:hover, .facility-card-title a:focus {
  color: var(--brand-blue);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.facility-card-actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: auto;
}

/* Chips/Amenities */

.chip-group {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.chip-sm {
  display: inline-flex;
  align-items: center;
  font-size: 0.78rem;
  font-weight: 600;
  padding: 2px 10px;
  border-radius: 999px;
  background: var(--chip-primary-bg, #cfea7e);
  color: var(--chip-primary-color, #000000);
  border: 1.5px solid var(--chip-primary-bg, #cfea7e);
}

.map-fullscreen-btn {
  white-space: nowrap !important;
}

.multiselect-search-wrap .input-icon-wrap {
  width: 100%;
}

.multiselect-search-wrap .input-icon-wrap input.has-icon {
  width: 100% !important;
  min-height: 40px !important;
  padding: 8px 12px 8px 42px !important;
  font-size: 0.9rem !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius) !important;
  box-sizing: border-box !important;
  background: #fff !important;
  color: var(--brand-text) !important;
  line-height: 1.4 !important;
}

.multiselect-search-wrap .input-icon-wrap input.has-icon:focus {
  outline: none !important;
  border-color: var(--brand-blue) !important;
  box-shadow: 0 0 0 3px rgba(2, 86, 164, 0.15) !important;
}

.multiselect-search-wrap .input-icon-wrap .input-icon {
  position: absolute !important;
  left: 14px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  width: 16px !important;
  height: 16px !important;
  stroke: var(--brand-muted) !important;
  fill: none !important;
  stroke-width: 2.2 !important;
  pointer-events: none !important;
}

.multiselect-option {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  padding: 10px 16px !important;
  cursor: pointer;
  transition: background 0.1s;
  font-size: 0.9rem;
  color: var(--brand-text);
  user-select: none;
}

.multiselect-option input {
  accent-color: var(--brand-blue);
  cursor: pointer !important;
  flex-shrink: 0;
  width: 16px !important;
  height: 16px !important;
  margin: 0 !important;
  align-self: center !important;
  vertical-align: middle !important;
}

/* ============================================================
   CKEditor Accordion — TRUE final fix.
   Root cause found: the ckeditor_accordion module's own JS strips
   the "ckeditor-accordion" class off each <dl> at runtime and
   replaces it with "styled" (data-once="ckeditorAccordions").
   Every earlier CSS attempt targeted "dl.ckeditor-accordion", which
   NEVER matches the live DOM - so none of those rules ever fired.
   This version scopes purely by the .ckeditor-accordion-container
   ancestor, not by the dl's own class, so it actually matches.
   ============================================================ */

.ckeditor-accordion-container {
  margin: 0 0 32px !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius) !important;
  overflow: hidden !important;
  background: transparent !important;
  box-shadow: none !important;
}

.ckeditor-accordion-container dl {
  margin: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  position: static !important;
}

.ckeditor-accordion-container dl + dl {
  border-top: 1px solid var(--border) !important;
}

/* dt (header row) - tight height, no extra padding from module defaults */

.ckeditor-accordion-container dl > dt {
  margin: 0 !important;
  padding: 0 !important;
  line-height: 1.4 !important;
  min-height: 0 !important;
  background: #fff !important;
  box-sizing: border-box !important;
}

.ckeditor-accordion-container dl > dt a,
.ckeditor-accordion-container dl > dt .ckeditor-accordion-toggler {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 16px !important;
  width: 100% !important;
  padding: 15px 18px !important;
  margin: 0 !important;
  box-sizing: border-box !important;
  color: #111 !important;
  text-decoration: none !important;
  font-weight: 700 !important;
  font-size: 1rem !important;
  line-height: 1.4 !important;
  cursor: pointer !important;
}

.ckeditor-accordion-container dl > dt a > *,
.ckeditor-accordion-container dl > dt .ckeditor-accordion-toggler > * {
  padding: 0 !important;
  margin: 0 !important;
  line-height: inherit !important;
  font-weight: 700 !important;
  font-size: 1.125rem;
}

.ckeditor-accordion-container dl > dt a:hover,
.ckeditor-accordion-container dl > dt a:focus,
.ckeditor-accordion-container dl > dt .ckeditor-accordion-toggler:hover,
.ckeditor-accordion-container dl > dt .ckeditor-accordion-toggler:focus {
  background: #f5f7fa !important;
  color: #000000 !important;
}

.ckeditor-accordion-container dl > dt.acc-open a,
.ckeditor-accordion-container dl > dt.acc-open .ckeditor-accordion-toggler {
  background: #edf2f8 !important;
  color: #000000 !important;
}

.ckeditor-accordion-container dl > dt a::after,
.ckeditor-accordion-container dl > dt .ckeditor-accordion-toggler::after {
  content: '+';
  content: '+' / '';
  speak: never;
  font-size: 1.375rem;
  font-weight: 400;
  line-height: 1;
  flex-shrink: 0;
  color: var(--brand-blue);
  min-width: 20px;
  text-align: center;
}

.ckeditor-accordion-container dl > dt.acc-open a::after,
.ckeditor-accordion-container dl > dt.acc-open .ckeditor-accordion-toggler::after {
  content: '\2212';
  content: '\2212' / '';
  speak: never;
}

/* dd (body/panel) - override the module's inline display:none only
   when the module itself marks the item open (via its own JS toggling
   a class/attribute - do not force display here or it'll break the
   collapse/expand behavior) */

.ckeditor-accordion-container dl > dd {
  margin: 0 !important;
  padding: 18px !important;
  border-top: 1px solid var(--border) !important;
  border-top: 1px solid var(--border) !important;
  background: #fff !important;
  color: var(--brand-text);
  font-size: 1rem;
  line-height: 1.7;
  box-sizing: border-box !important;
}

.ckeditor-accordion-container dl > dd ul {
  margin: 0 0 14px;
  padding-left: 22px;
}

.ckeditor-accordion-container dl > dd p {
  margin: 0 0 14px;
}

.ckeditor-accordion-container dl > dd a:not(.btn):not(.btn-p):not(.btn-s):not(.button):not(.ckeditor-accordion-toggler) {
  color: var(--brand-blue) !important;
  text-decoration: underline !important;
  text-underline-offset: 3px;
  font-weight: 600 !important;
  display: inline !important;
  width: auto !important;
  padding: 0 !important;
}

.ckeditor-accordion-container dl > dd a:not(.btn):not(.btn-p):not(.btn-s):not(.button):not(.ckeditor-accordion-toggler):hover,
.ckeditor-accordion-container dl > dd a:not(.btn):not(.btn-p):not(.btn-s):not(.button):not(.ckeditor-accordion-toggler):focus {
  color: var(--brand-blue-dark) !important;
}

.highlight-info .btn-p,
.highlight-info .btn-s,
.highlight-warning .btn-p,
.highlight-warning .btn-s,
.highlight-success .btn-p,
.highlight-success .btn-s {
  margin-top: 6px !important;
  margin-bottom: 6px !important;
  margin-right: 8px !important;
  text-decoration: none;
}

.highlight-info .btn-p:hover,
.highlight-info .btn-s:hover,
.highlight-warning .btn-p:hover,
.highlight-warning .btn-s:hover,
.highlight-success .btn-p:hover,
.highlight-success .btn-s:hover {
  text-decoration: underline !important;
}

/* ── News filter: date inputs — non-flex layout to avoid Chrome's
   native date-input flex-basis quirk (box was still shrinking after
   value selection even with flex-grow/flex-basis set). The icon SVG
   is already position:absolute, so the wrapper doesn't need flex at
   all — plain block + relative positioning is simpler and immune to
   the flex recalculation issue entirely. ── */

.filter-panel .date-grid .input-icon-wrap {
  display: block !important;
  position: relative !important;
  width: 100% !important;
}

.filter-panel .date-grid .input-icon-wrap .input-icon {
  position: absolute !important;
  top: 50% !important;
  left: 14px !important;
  transform: translateY(-50%) !important;
  width: 16px !important;
  height: 16px !important;
  margin: 0 !important;
}

/* Hide Apply submit button ONLY on Current Development Applications view page — keeps filter functionality intact */

.application-shell input#edit-submit-current-development-applications,
.application-shell input[data-drupal-selector="edit-submit-current-development-applications"],
.applications-filter-sidebar input#edit-submit-current-development-applications,
.applications-filter-sidebar .filter-actions input[type="submit"],
#edit-submit-current-development-applications,
body.path-current-development-applications input#edit-submit-current-development-applications {
  display: none !important;
}

.applications-filter-sidebar .filter-reset-button {
  width: 100% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* ── By-Laws & Policies: Search input, clear button, and reset button ── */

.input-icon-wrap {
  position: relative !important;
  width: 100% !important;
  display: block !important;
}

.input-icon-wrap .input-icon {
  position: absolute !important;
  top: 50% !important;
  left: 14px !important;
  transform: translateY(-50%) !important;
  width: 18px !important;
  height: 18px !important;
  color: var(--brand-muted) !important;
  pointer-events: none !important;
  z-index: 2 !important;
}

.input-clear-btn {
  position: absolute !important;
  top: 50% !important;
  right: 10px !important;
  transform: translateY(-50%) !important;
  width: 28px !important;
  height: 28px !important;
  border: none !important;
  background: transparent !important;
  color: var(--brand-muted) !important;
  cursor: pointer !important;
  display: none;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 !important;
  border-radius: 50% !important;
  transition: background 0.15s ease, color 0.15s ease !important;
  z-index: 3 !important;
}

.input-clear-btn:hover,
.input-clear-btn:focus {
  background: #eaf3fb !important;
  color: var(--brand-blue-dark) !important;
}

.input-clear-btn svg {
  width: 14px !important;
  height: 14px !important;
}

/* ---- Button Flexbox Group Utility ---- */

.btn-group,
.btn-flex {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 12px 16px !important;
  margin-top: 12px !important;
  margin-bottom: 12px !important;
}

/* Reset margin when inside a flex group to let the gap property handle spacing cleanly */

.btn-group .btn-p,
.btn-group .btn-s,
.btn-flex .btn-p,
.btn-flex .btn-s {
  margin: 0 !important;
}

.sidebar-menu-card {
  padding: 28px 24px 20px;
  background: #ffffff;
  border: 1px solid #d7e2ec;
  border-radius: 10px;
  box-shadow: 0 6px 18px rgba(0, 54, 102, 0.10);
}

.sidebar-menu-card h2 {
  margin: 0 0 18px;
  color: var(--brand-blue-dark);
  font-size: 1.22rem;
  line-height: 1.25;
  font-weight: 700;
  border-bottom: none !important;
  padding-bottom: 0 !important;
}

.quickedit-button {
  border-radius: 50%;
  border: none;
  background: rgba(255,255,255,.15);
  color: #fff;
}

.quickedit-button:hover,
.quickedit-button:active {
  background: rgba(255,255,255,.3);
  color: #fff;
  border: none;
}

/* ── Node: Development Application New (node--development-application-new.html.twig) ── */

.node-development-application-new .content-main .btn-p,
.node-development-application-new .page-support-banner .btn-p {
  margin: 4px 8px 8px 0 !important;
}

.node-development-application-new .quick-links-sidebar-card {
  background: #fff;
  border: 1px solid #e0e0e0;
  border-radius: var(--radius,6px);
  padding: 20px 20px 16px;
  margin-bottom: 20px;
}

.node-development-application-new .quick-links-sidebar-card h2 {
  font-size: 1rem;
  font-weight: 700;
  color: var(--brand-blue,#1a5ea8);
  margin: 0 0 12px;
  padding-bottom: 10px;
  border-bottom: 2px solid var(--brand-blue,#1a5ea8);
}

.node-development-application-new .quick-links-sidebar-card ul,
.node-development-application-new .quick-links-sidebar-card .menu {
  list-style: none;
  margin: 0;
  padding: 0;
}

.node-development-application-new .quick-links-sidebar-card ul li,
.node-development-application-new .quick-links-sidebar-card .menu li {
  border-bottom: 1px solid #f0f0f0;
}

.node-development-application-new .quick-links-sidebar-card ul li:last-child,
.node-development-application-new .quick-links-sidebar-card .menu li:last-child {
  border-bottom: none;
}

.node-development-application-new .quick-links-sidebar-card ul li a,
.node-development-application-new .quick-links-sidebar-card .menu li a {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 4px;
  color: #1a1a1a;
  font-size: .9rem;
  text-decoration: none;
  transition: color .15s;
}

.node-development-application-new .quick-links-sidebar-card ul li a::before,
.node-development-application-new .quick-links-sidebar-card .menu li a::before {
  content: '';
  display: inline-block;
  width: 6px;
  height: 6px;
  border-top: 2px solid var(--brand-blue,#1a5ea8);
  border-right: 2px solid var(--brand-blue,#1a5ea8);
  transform: rotate(45deg);
  flex-shrink: 0;
}

.node-development-application-new .quick-links-sidebar-card ul li a:hover,
.node-development-application-new .quick-links-sidebar-card .menu li a:hover {
  color: var(--brand-blue,#1a5ea8);
  text-decoration: underline;
}

.node-development-application-new .quick-links-sidebar-card .menu li.menu-item--active-trail>a,
.node-development-application-new .quick-links-sidebar-card ul li a.is-active {
  color: var(--brand-blue,#1a5ea8);
  font-weight: 600;
}

.node-development-application-new .page-support-card {
  text-align: center;
}

.node-development-application-new .page-support-card h3 {
  font-size: 1.25rem;
  font-weight: 700;
  margin-bottom: 12px;
  color: #1a1a1a;
}

.node-development-application-new .page-support-card p {
  font-size: .95rem;
  margin: 0;
}

.node-development-application-new .hero-banner-edit-btn {
  position: absolute;
  top: 16px;
  right: 16px;
  z-index: 5;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 11px 20px 11px 16px;
  border-radius: 999px;
  background: var(--brand-blue,#1a5ea8);
  color: #fff!important;
  font-size: .9rem;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
  box-shadow: 0 4px 14px rgba(0,0,0,.3),0 2px 4px rgba(0,0,0,.18);
  text-decoration: none;
  forced-color-adjust: none;
  transition: background .15s ease,transform .15s ease,box-shadow .15s ease;
}

.node-development-application-new .hero-banner-edit-btn:hover,
.node-development-application-new .hero-banner-edit-btn:focus {
  background: var(--brand-blue-dark,#154d8e);
  color: #fff!important;
  text-decoration: none;
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(0,0,0,.35),0 3px 6px rgba(0,0,0,.2);
}

.node-development-application-new .hero-banner-edit-btn svg {
  width: 16px;
  height: 16px;
  fill: currentColor;
  stroke: none;
  flex-shrink: 0;
}

.node-development-application-new .content-edit-btn {
  position: absolute;
  top: 6px;
  right: 0;
  z-index: 5;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 40px;
  padding: 0 18px 0 14px;
  background: var(--brand-blue,#1a5ea8);
  color: #fff!important;
  border-radius: 999px;
  font-size: .85rem;
  font-weight: 600;
  white-space: nowrap;
  text-decoration: none;
  box-shadow: 0 2px 10px rgba(26,94,168,.35);
  forced-color-adjust: none;
  transition: background .18s ease,box-shadow .18s ease,transform .18s ease;
}

.node-development-application-new .content-edit-btn:hover,
.node-development-application-new .content-edit-btn:focus {
  background: var(--brand-blue-dark,#154d8e);
  color: #fff!important;
  text-decoration: none;
  box-shadow: 0 4px 14px rgba(21,77,142,.45);
  transform: translateY(-2px);
}

.node-development-application-new .content-edit-btn:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 2px;
}

.node-development-application-new .content-edit-btn svg {
  width: 16px;
  height: 16px;
  fill: currentColor;
  stroke: none;
  flex-shrink: 0;
}

.node-development-application-new .content-edit-btn.is-loading svg {
  animation: toc-spin .7s linear infinite;
}

/* ── Node: Event Detail (node--event.html.twig) ── */

.event-detail-page .ed-badge {
  display: inline-block;
  margin: 12px 8px 0 0;
  padding: 4px 12px;
  border-radius: 999px;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.02em;
}

.event-detail-page .ed-badge-featured {
  background: #fff3cd;
  color: #8a6d1a;
}

.event-detail-page .ed-badge-category {
  background: rgba(255,255,255,0.18);
  color: inherit;
  border: 1px solid rgba(255,255,255,0.4);
}

.event-detail-page .ed-card {
  background: #fff;
  border: 1px solid #e5e8ee;
  border-radius: 12px;
  padding: 20px 24px;
  box-shadow: 0 1px 3px rgba(20, 30, 60, 0.05);
}

.event-detail-page .ed-card-title {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 12px;
  font-size: 1.05rem;
  font-weight: 700;
  color: #1b2a4a;
}

.event-detail-page .ed-datetime-card {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
}

.event-detail-page .ed-add-calendar-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
}

.event-detail-page .ed-share-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 8px;
  background: #eef1fb;
  color: #1b2a4a;
  transition: background 0.15s ease;
}

.event-detail-page .ed-share-btn:hover {
  background: #dde3f7;
}

.node-landing-page .hero-banner-edit-btn {
  position: absolute;
  top: 16px;
  right: 16px;
  z-index: 5;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 11px 20px 11px 16px;
  border-radius: 999px;
  background: var(--brand-blue,#1a5ea8);
  color: #fff!important;
  font-size: .9rem;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
  box-shadow: 0 4px 14px rgba(0,0,0,.3),0 2px 4px rgba(0,0,0,.18);
  text-decoration: none;
  forced-color-adjust: none;
  transition: background .15s ease,transform .15s ease,box-shadow .15s ease;
}

.node-landing-page .hero-banner-edit-btn:hover,
.node-landing-page .hero-banner-edit-btn:focus {
  background: var(--brand-blue-dark,#154d8e);
  color: #fff!important;
  text-decoration: none;
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(0,0,0,.35),0 3px 6px rgba(0,0,0,.2);
}

.node-landing-page .hero-banner-edit-btn svg {
  width: 16px;
  height: 16px;
  fill: currentColor;
  stroke: none;
  flex-shrink: 0;
}

.node-landing-page .content-main .existing-card-grid {
  display: grid!important;
  grid-template-columns: repeat(3,1fr)!important;
  gap: 24px!important;
  margin-top: 32px!important;
}

/* ── Node: News Post (node--news.html.twig) ── */

.node-news .recent-posts-card {
  background: #fff;
  border: 1px solid #e0e0e0;
  border-radius: var(--radius,6px);
  padding: 20px 20px 16px;
  margin-bottom: 20px;
}

.node-news .recent-posts-card h2 {
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--brand-blue,#1a5ea8);
  margin: 0 0 12px;
}

.node-news .post-layout.content-layout--full .post-card {
  width: 100%;
  max-width: none;
}

.node-news .post-card {
  position: relative;
}

.node-news .content-edit-btn {
  position: absolute;
  top: -46px;
  right: 0;
  z-index: 5;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 40px;
  padding: 0 18px 0 14px;
  background: var(--brand-blue,#1a5ea8);
  color: #fff!important;
  border-radius: 999px;
  font-size: .85rem;
  font-weight: 600;
  white-space: nowrap;
  text-decoration: none;
  box-shadow: 0 2px 10px rgba(26,94,168,.35);
  forced-color-adjust: none;
  transition: background .18s ease,box-shadow .18s ease,transform .18s ease;
}

.node-news .content-edit-btn:hover,
.node-news .content-edit-btn:focus {
  background: var(--brand-blue-dark,#154d8e);
  color: #fff!important;
  text-decoration: none;
  box-shadow: 0 4px 14px rgba(21,77,142,.45);
  transform: translateY(-2px);
}

.node-news .content-edit-btn:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 2px;
}

.node-news .content-edit-btn svg {
  width: 16px;
  height: 16px;
  fill: currentColor;
  stroke: none;
  flex-shrink: 0;
}

.node-news .content-edit-btn.is-loading svg {
  animation: toc-spin .7s linear infinite;
}

.node-news .post-image-edit-btn {
  position: absolute;
  top: 16px;
  right: 16px;
  z-index: 5;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 11px 20px 11px 16px;
  border-radius: 999px;
  background: var(--brand-blue,#1a5ea8);
  color: #fff!important;
  font-size: .9rem;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
  box-shadow: 0 4px 14px rgba(0,0,0,.3),0 2px 4px rgba(0,0,0,.18);
  text-decoration: none;
  forced-color-adjust: none;
  transition: background .15s ease,transform .15s ease,box-shadow .15s ease;
}

.node-news .post-image-edit-btn:hover,
.node-news .post-image-edit-btn:focus {
  background: var(--brand-blue-dark,#154d8e);
  color: #fff!important;
  text-decoration: none;
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(0,0,0,.35),0 3px 6px rgba(0,0,0,.18);
}

.node-news .post-image-edit-btn svg {
  width: 16px;
  height: 16px;
  fill: currentColor;
  stroke: none;
  flex-shrink: 0;
}

/* ── Node: Typical Page 2 (node--typical-page-2.html.twig) ── */

.node-typical-page-2 .content-main .btn-p,
.node-typical-page-2 .page-support-banner .btn-p {
  margin: 4px 8px 8px 0 !important;
}

.node-typical-page-2 .quick-links-sidebar-card {
  background: #fff;
  border: 1px solid #e0e0e0;
  border-radius: var(--radius,6px);
  padding: 20px 20px 16px;
  margin-bottom: 20px;
}

.node-typical-page-2 .quick-links-sidebar-card h2 {
  font-size: 1rem;
  font-weight: 700;
  color: var(--brand-blue,#1a5ea8);
  margin: 0 0 12px;
  padding-bottom: 10px;
  border-bottom: 2px solid var(--brand-blue,#1a5ea8);
}

.node-typical-page-2 .quick-links-sidebar-card ul,
.node-typical-page-2 .quick-links-sidebar-card .menu {
  list-style: none;
  margin: 0;
  padding: 0;
}

.node-typical-page-2 .quick-links-sidebar-card ul li,
.node-typical-page-2 .quick-links-sidebar-card .menu li {
  border-bottom: 1px solid #f0f0f0;
}

.node-typical-page-2 .quick-links-sidebar-card ul li:last-child,
.node-typical-page-2 .quick-links-sidebar-card .menu li:last-child {
  border-bottom: none;
}

.node-typical-page-2 .quick-links-sidebar-card ul li a,
.node-typical-page-2 .quick-links-sidebar-card .menu li a {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 4px;
  color: #1a1a1a;
  font-size: .9rem;
  text-decoration: none;
  transition: color .15s;
}

.node-typical-page-2 .quick-links-sidebar-card ul li a::before,
.node-typical-page-2 .quick-links-sidebar-card .menu li a::before {
  content: '';
  display: inline-block;
  width: 6px;
  height: 6px;
  border-top: 2px solid var(--brand-blue,#1a5ea8);
  border-right: 2px solid var(--brand-blue,#1a5ea8);
  transform: rotate(45deg);
  flex-shrink: 0;
}

.node-typical-page-2 .quick-links-sidebar-card ul li a:hover,
.node-typical-page-2 .quick-links-sidebar-card .menu li a:hover {
  color: var(--brand-blue,#1a5ea8);
  text-decoration: underline;
}

.node-typical-page-2 .quick-links-sidebar-card .menu li.menu-item--active-trail>a,
.node-typical-page-2 .quick-links-sidebar-card ul li a.is-active {
  color: var(--brand-blue,#1a5ea8);
  font-weight: 600;
}

.node-typical-page-2 .hero-banner-edit-btn {
  position: absolute;
  top: 16px;
  right: 16px;
  z-index: 5;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 11px 20px 11px 16px;
  border-radius: 999px;
  background: var(--brand-blue,#1a5ea8);
  color: #fff!important;
  font-size: .9rem;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
  box-shadow: 0 4px 14px rgba(0,0,0,.3),0 2px 4px rgba(0,0,0,.18);
  text-decoration: none;
  forced-color-adjust: none;
  transition: background .15s ease,transform .15s ease,box-shadow .15s ease;
}

.node-typical-page-2 .hero-banner-edit-btn:hover,
.node-typical-page-2 .hero-banner-edit-btn:focus {
  background: var(--brand-blue-dark,#154d8e);
  color: #fff!important;
  text-decoration: none;
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(0,0,0,.35),0 3px 6px rgba(0,0,0,.2);
}

.node-typical-page-2 .hero-banner-edit-btn svg {
  width: 16px;
  height: 16px;
  fill: currentColor;
  stroke: none;
  flex-shrink: 0;
}

.node-typical-page-2 .content-edit-btn {
  position: absolute;
  top: 6px;
  right: 0;
  z-index: 5;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 40px;
  padding: 0 18px 0 14px;
  background: var(--brand-blue,#1a5ea8);
  color: #fff!important;
  border-radius: 999px;
  font-size: .85rem;
  font-weight: 600;
  white-space: nowrap;
  text-decoration: none;
  box-shadow: 0 2px 10px rgba(26,94,168,.35);
  forced-color-adjust: none;
  transition: background .18s ease,box-shadow .18s ease,transform .18s ease;
}

.node-typical-page-2 .content-edit-btn:hover,
.node-typical-page-2 .content-edit-btn:focus {
  background: var(--brand-blue-dark,#154d8e);
  color: #fff!important;
  text-decoration: none;
  box-shadow: 0 4px 14px rgba(21,77,142,.45);
  transform: translateY(-2px);
}

.node-typical-page-2 .content-edit-btn:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 2px;
}

.node-typical-page-2 .content-edit-btn svg {
  width: 16px;
  height: 16px;
  fill: currentColor;
  stroke: none;
  flex-shrink: 0;
}

.node-typical-page-2 .content-edit-btn.is-loading svg {
  animation: toc-spin .7s linear infinite;
}

.node-typical-page .acc-body {
  display: none;
  padding: 0;
  overflow: hidden;
}

.node-typical-page .acc-body.open {
  display: block;
  padding: 12px 16px 16px;
  animation: accOpen .2s ease;
}

.node-typical-page .acc-hdr {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  background: #fff;
  border: none;
  padding: 14px 16px;
  font-size: .95rem;
  font-weight: 700;
  color: #1a1a1a;
  cursor: pointer;
  text-align: left;
  gap: 12px;
}

.node-typical-page .acc-hdr:hover {
  background: #f5f5f5;
  color: #1a1a1a;
}

.node-typical-page .acc-hdr--sm {
  font-size: .9rem;
  font-weight: 600;
  color: #1a1a1a;
  background: #fff;
  padding: 10px 16px;
}

.node-typical-page .acc-hdr[aria-expanded="true"] .acc-ico::before {
  content: '\2212'!important;
  content: '\2212' / '' !important;
  speak: never;
  transform: none!important;
  opacity: 1!important;
}

.node-typical-page .acc-body>.acc-wrap {
  margin-top: 8px;
  padding-top: 4px;
  border-top: 1px solid #eee;
}

.node-typical-page .acc-body>.acc-wrap>.acc,
.node-typical-page .acc-body>.acc-wrap>.paragraph--type--accordion-item-simple {
  border: none!important;
  border-bottom: 1px solid #eee!important;
  margin-bottom: 0!important;
  background: #fff;
}

.node-typical-page .acc-body>.acc-wrap>.acc:last-child,
.node-typical-page .acc-body>.acc-wrap>.paragraph--type--accordion-item-simple:last-child {
  border-bottom: none!important;
}

.node-typical-page .paragraph--type--rich-text,
.node-typical-page .paragraph--type--section-heading,
.node-typical-page .paragraph--type--cta-button,
.node-typical-page .paragraph--type--divider,
.node-typical-page .paragraph--type--image-block,
.node-typical-page .paragraph--type--banner {
  margin: 0;
  padding: 0;
}

.node-typical-page .quick-links-sidebar-card {
  background: #fff;
  border: 1px solid #e0e0e0;
  border-radius: var(--radius,6px);
  padding: 20px 20px 16px;
  margin-bottom: 20px;
}

.node-typical-page .quick-links-sidebar-card h2 {
  font-size: 1rem;
  font-weight: 700;
  color: var(--brand-blue,#1a5ea8);
  margin: 0 0 12px;
  padding-bottom: 10px;
  border-bottom: 2px solid var(--brand-blue,#1a5ea8);
}

.node-typical-page .quick-links-sidebar-card ul,
.node-typical-page .quick-links-sidebar-card .menu {
  list-style: none;
  margin: 0;
  padding: 0;
}

.node-typical-page .quick-links-sidebar-card ul li,
.node-typical-page .quick-links-sidebar-card .menu li {
  border-bottom: 1px solid #f0f0f0;
}

.node-typical-page .quick-links-sidebar-card ul li:last-child,
.node-typical-page .quick-links-sidebar-card .menu li:last-child {
  border-bottom: none;
}

.node-typical-page .quick-links-sidebar-card ul li a,
.node-typical-page .quick-links-sidebar-card .menu li a {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 4px;
  color: #1a1a1a;
  font-size: .9rem;
  text-decoration: none;
  transition: color .15s;
}

.node-typical-page .quick-links-sidebar-card ul li a::before,
.node-typical-page .quick-links-sidebar-card .menu li a::before {
  content: '';
  display: inline-block;
  width: 6px;
  height: 6px;
  border-top: 2px solid var(--brand-blue,#1a5ea8);
  border-right: 2px solid var(--brand-blue,#1a5ea8);
  transform: rotate(45deg);
  flex-shrink: 0;
}

.node-typical-page .quick-links-sidebar-card ul li a:hover,
.node-typical-page .quick-links-sidebar-card .menu li a:hover {
  color: var(--brand-blue,#1a5ea8);
  text-decoration: underline;
}

.node-typical-page .quick-links-sidebar-card .menu li.menu-item--active-trail>a,
.node-typical-page .quick-links-sidebar-card ul li a.is-active {
  color: var(--brand-blue,#1a5ea8);
  font-weight: 600;
}

.node-typical-page .page-banner-edit-btn {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 10;
  display: flex;
  align-items: center;
  gap: 6px;
}

.node-typical-page .page-banner-edit-btn a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(255,255,255,0.92);
  color: var(--brand-blue, #1a5ea8);
  border: 1.5px solid var(--brand-blue, #1a5ea8);
  border-radius: 6px;
  padding: 6px 14px;
  font-size: 0.8rem;
  font-weight: 700;
  text-decoration: none;
  backdrop-filter: blur(4px);
  transition: background 0.15s, color 0.15s;
  line-height: 1;
}

.node-typical-page .page-banner-edit-btn a:hover {
  background: var(--brand-blue, #1a5ea8);
  color: #fff;
  text-decoration: none;
}

.node-typical-page .page-banner-edit-btn a svg {
  width: 13px;
  height: 13px;
  flex-shrink: 0;
}

.paragraph--type--custom-embed .embed-placeholder .embed-open-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
  padding: 10px 22px;
  background: var(--brand-blue, #1a5ea8);
  color: #fff !important;
  font-size: .9rem;
  font-weight: 600;
  border-radius: var(--radius, 4px);
  text-decoration: none !important;
  transition: background .2s;
}

.paragraph--type--custom-embed .embed-placeholder .embed-open-btn:hover {
  background: var(--brand-blue-dark, #154d8e);
}

.highlight-box-inner .cta-button-row,
.highlight-box-inner .button-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 18px;
}

.highlight-box-inner .btn-p,
.highlight-box-inner .btn-s,
.highlight-box-inner .cta-button-row a,
.highlight-box-inner .button-row a {
  display: inline-block;
  padding: 9px 18px;
  background: var(--brand-blue, #1a5ea8) !important;
  color: #fff !important;
  font-size: .88rem;
  font-weight: 600;
  border-radius: var(--radius, 4px);
  text-decoration: none !important;
  line-height: 1.4;
  white-space: nowrap;
  transition: background .2s;
  border: none;
  cursor: pointer;
}

.highlight-box-inner .btn-p:hover,
.highlight-box-inner .btn-s:hover,
.highlight-box-inner .cta-button-row a:hover,
.highlight-box-inner .button-row a:hover {
  background: var(--brand-blue-dark, #154d8e) !important;
  color: #fff !important;
}

.quick-links-bar-inner .btn-ql {
  display: inline-block;
  padding: 9px 18px;
  background: var(--brand-blue, #1a5ea8);
  color: #fff !important;
  font-size: .88rem;
  font-weight: 600;
  border-radius: var(--radius, 4px);
  text-decoration: none;
  line-height: 1.4;
  white-space: nowrap;
  transition: background .2s;
  cursor: pointer;
  border: none;
}

.quick-links-bar-inner .btn-ql:hover {
  background: var(--brand-blue-dark, #154d8e);
  color: #fff !important;
  text-decoration: none;
}

/* Premium aesthetics for Cludo suggestions box - aligned strictly to bottom of input fields */

.cludo-search_autocomplete .search_autocomplete {
  position: absolute !important;
  top: 75px !important;
  /* Pushes the dropdown exactly below the search inputs (no overlap/gap) */
  left: 0 !important;
  right: 0 !important;
  background-color: #ffffff !important;
  border: 1px solid #ccd6df !important;
  border-top: 0 !important;
  /* Joint design connecting seamlessly with the input field */
  border-radius: 0 0 8px 8px !important;
  /* Curved bottom corners only for a jointed dropdown card */
  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.08), 0 8px 10px -6px rgba(0, 0, 0, 0.03) !important;
  overflow: hidden !important;
  width: 100% !important;
  /* Matches wrapper width exactly */
  z-index: 9999999 !important;
}

/* ============================================================
   GLOBAL FORM FIELDS CONSISTENCY: TEXT BOXES & SELECT DROPDOWNS
   ============================================================ */

/* Base State: 2px solid #d0dae3 border */

input[type="text"],
input[type="email"],
input[type="tel"],
input[type="number"],
input[type="search"],
input[type="password"],
input[type="url"],
input[type="date"],
select,
textarea,
.custom-select-trigger {
  border: 2px solid #d0dae3 !important;
  min-height: 48px !important;
  padding: 12px 16px !important;
  border-radius: var(--radius) !important;
  transition: border-color 0.15s ease, box-shadow 0.15s ease !important;
}

/* Exception for Joined Search inputs: keep border-right: 0 so it connects to search button */

.policies-search-wrap .views-exposed-form .form-item-keyword input {
  border-right: 0 !important;
}

/* Focus State: 2px solid black border */

input[type="text"]:focus,
input[type="email"]:focus,
input[type="tel"]:focus,
input[type="number"]:focus,
input[type="search"]:focus,
input[type="password"]:focus,
input[type="url"]:focus,
input[type="date"]:focus,
select:focus,
textarea:focus,
.custom-select-trigger:focus,
.custom-select-trigger.open {
  border-color: #000000 !important;
  outline: none !important;
  box-shadow: none !important;
}

/* Custom Items Per Page select dropdown styling - overrides global min-height/padding */

.items-per-page-wrapper {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  font-size: 0.9rem !important;
  color: #475569 !important;
}

.items-per-page-wrapper label {
  font-weight: 500 !important;
  white-space: nowrap !important;
  margin: 0 !important;
  font-size: 0.9rem !important;
  color: #475569 !important;
}

.items-per-page-wrapper select,
.items-per-page-select,
.form-item-items-per-page select,
select[name="items_per_page"] {
  display: inline-block !important;
  width: auto !important;
  min-height: unset !important;
  height: 38px !important;
  padding: 6px 36px 6px 16px !important;
  border: 2px solid #d0dae3 !important;
  border-radius: 8px !important;
  background-color: #fff !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%231d2b36' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 12px center !important;
  background-size: 14px 14px !important;
  color: #1e293b !important;
  font-size: 0.9rem !important;
  font-weight: 500 !important;
  cursor: pointer !important;
  -webkit-appearance: none !important;
  appearance: none !important;
}

.items-per-page-wrapper select:hover,
.items-per-page-select:hover {
  border-color: #94a3b8 !important;
}

.items-per-page-wrapper select:focus,
.items-per-page-select:focus {
  border-color: #000000 !important;
  outline: none !important;
}

/* Ensure inputs wrapped in .input-icon-wrap have proper left padding to avoid icon overlap */

.input-icon-wrap input,
.input-icon-wrap input.has-icon {
  padding-left: 36px !important;
}

/* Remove border globally for primary buttons */

.btn-p {
  border: none !important;
}

.nav-card {
  display: block;
  background: #ffffff;
  border: 1px solid #d9e2ec;
  border-radius: 8px;
  padding: 20px;
  text-decoration: none;
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.nav-card:hover {
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.08);
  transform: translateY(-2px);
}

.nav-card-title {
  margin: 0 0 8px;
  font-size: 1.05rem;
  color: #014785;
  font-weight: 700;
}

.nav-card-desc {
  margin: 0;
  font-size: 0.92rem;
  color: #4a4a4a;
  line-height: 1.4;
}

.nav-card.no-description .nav-card-title {
  margin-bottom: 0;
}

/* Thumbnail cards: 25% image / 75% content, side-by-side */

.existing-link-card.has-thumbnail {
  display: flex;
  align-items: stretch;
  padding: 0;
  overflow: hidden;
}

.existing-link-card.has-thumbnail .existing-link-card-thumb {
  flex: 0 0 25%;
  max-width: 25%;
  height: auto;
  min-height: 100%;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  border-radius: 0;
  margin: 0;
}

.existing-link-card.has-thumbnail .existing-link-card-content {
  flex: 0 0 75%;
  max-width: 75%;
  padding: 20px 24px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.existing-link-card.has-thumbnail .existing-link-card-content h2 {
  margin: 0 0 8px;
}

.existing-link-card.has-thumbnail .existing-link-card-content p {
  margin: 0;
}

/* ── FIREFOX BANNER / NOTICE HERO IMAGE NATURAL COLOR RENDERING ── */

.page-banner,
.post-image-wrap,
.hero-slide,
.news-card-image,
.event-card-image {
  background-color: transparent !important;
  isolation: auto !important;
  filter: none !important;
}

.page-banner img,
.post-image,
.hero-slide img,
.news-card-image img,
.content-main img {
  filter: none !important;
  color-interpolation-filters: auto !important;
}

@supports (-moz-appearance: none) {
  .page-banner,
  .page-banner img,
  .post-image-wrap,
  .post-image,
  .hero-slide img,
  .news-card-image img,
  .content-main img {
    filter: none !important;
    mix-blend-mode: normal !important;
  }
}

/* ==========================================================================
   05. HEADER & NAVIGATION COMPONENTS (Utility Bar, Translation Menu, Accessibility Panel, Contact Panel, Header, Mega Menu, Mobile Nav Drawer)
   ========================================================================== */

.header-search-panel:not(.open) {
  display: none !important;
}

.mega {
  display: none;
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  z-index: 110;
  padding: 0 0 24px;
}

.contact-panel {
  display: none;
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  width: 325px;
  max-width: min(325px,calc(100vw - 20px));
  padding: 22px 18px 24px;
  background: var(--surface);
  border: 1px solid var(--border);
  box-shadow: 0 12px 28px rgba(15,45,64,.14);
  color: var(--brand-text);
  z-index: 150;
  text-align: left;
}

.accessibility-panel {
  display: none;
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  width: 325px;
  padding: 22px 18px 24px;
  background: var(--surface);
  border: 1px solid var(--border);
  box-shadow: 0 12px 28px rgba(15,45,64,.14);
  color: var(--brand-text);
  z-index: 150;
  text-align: left;
}

.translation-panel {
  display: none;
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  z-index: 150;
  min-width: 220px;
  max-height: calc(100vh - 100px);
  overflow-y: auto;
  padding: 10px;
  background: var(--surface);
  border: 1px solid var(--border);
  box-shadow: 0 12px 28px rgba(15,45,64,.14);
  text-align: left;
}

.footer-contact-details {
  margin-top: 16px !important;
  line-height: 1.55;
}

.footer-contact-details strong {
  color: #fff;
}

/* =========================================
   Header Component
   ========================================= */

.utility-bar {
  background: var(--surface);
  color: var(--brand-muted);
  font-size: .9rem;
}

.utility-bar .container {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 24px;
  padding: 9px 0;
  font-weight: 600;
  text-align: right;
}

.utility-bar .container>a {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.utility-bar .container>a svg {
  width: 1em;
  height: 1em;
  flex-shrink: 0;
}

.utility-bar a:hover,.utility-bar a:focus {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.translation-menu {
  position: relative;
}

.translation-trigger {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  border: 0;
  background: transparent;
  color: var(--brand-muted);
  padding: 0;
  font: inherit;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
}

.translation-trigger:hover,.translation-trigger:focus,.translation-menu.open .translation-trigger {
  color: var(--brand-blue);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.translation-trigger svg {
  width: 1em;
  height: 1em;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.translation-trigger>svg:last-child {
  transition: transform .2s;
}

.translation-menu.open .translation-trigger>svg:last-child {
  transform: rotate(180deg);
}

.translation-menu.open .translation-panel {
  display: block;
}

.translation-panel a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 10px;
  color: var(--brand-text);
  font-weight: 600;
}

.translation-panel a:hover,.translation-panel a:focus {
  background: var(--brand-light);
  color: var(--brand-blue);
  text-decoration: none;
}

.accessibility-trigger {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  border: 0;
  background: transparent;
  color: var(--brand-muted);
  font: inherit;
  font-weight: 600;
  padding: 0;
  cursor: pointer;
}

.accessibility-trigger:hover,.accessibility-trigger:focus,.utility-item.open .accessibility-trigger {
  color: var(--brand-blue);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.accessibility-trigger svg {
  width: 1em;
  height: 1em;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.accessibility-trigger>svg:last-child {
  transition: transform .2s;
}

.utility-item.open .accessibility-trigger>svg:last-child {
  transform: rotate(180deg);
}

.utility-item.open .accessibility-panel {
  display: block;
}

.accessibility-panel h3 {
  margin: 0 0 12px;
  color: #111;
  font-size: 1.05rem;
}

.accessibility-options {
  display: flex;
  gap: 14px;
  margin-bottom: 28px;
  flex-wrap: wrap;
}

.accessibility-options button {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  border: 0;
  border-bottom: 3px solid transparent;
  background: transparent;
  color: var(--brand-blue);
  padding: 0 0 6px;
  font: inherit;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
}

.accessibility-options button:hover,.accessibility-options button:focus,.accessibility-options button.active {
  border-bottom-color: var(--brand-blue);
}

.accessibility-message {
  margin: 0;
  color: #39434d;
  font-size: 1rem;
  line-height: 1.75;
}

.contact-trigger {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  border: 0;
  background: transparent;
  color: var(--brand-muted);
  font: inherit;
  font-weight: 600;
  padding: 0;
  cursor: pointer;
}

.contact-trigger:hover,.contact-trigger:focus,.utility-item.open .contact-trigger {
  color: var(--brand-blue);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.contact-trigger svg {
  width: 1em;
  height: 1em;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.contact-trigger>svg:last-child {
  transition: transform .2s;
}

.utility-item.open .contact-trigger>svg:last-child {
  transform: rotate(180deg);
}

.utility-item.open .contact-panel {
  display: block;
}

.contact-panel h3 {
  margin: 0 0 12px;
  color: var(--brand-blue-dark);
  font-size: 1.05rem;
}

.contact-311-group {
  margin-bottom: 0;
}

.contact-311-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: var(--brand-blue);
  color: #fff;
  border: 0;
  border-radius: 100px;
  padding: 7px 18px;
  font: inherit;
  font-size: 1rem;
  font-weight: 700;
  cursor: pointer;
  text-decoration: none;
  transition: background .15s;
}

.contact-311-btn svg {
  width: 16px;
  height: 16px;
  stroke: #fff;
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex-shrink: 0;
}

.contact-311-btn:hover,.contact-311-btn:focus {
  background: var(--brand-blue-dark);
}

.contact-311-desc {
  margin: 10px 0 0;
  color: #39434d;
  font-size: 1rem;
  line-height: 1.75;
}

.contact-options {
  display: flex;
  flex-direction: column;
  margin-top: 4px;
}

.contact-option {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 7px 0;
  color: var(--brand-text);
  text-decoration: none;
  font-size: 1rem;
}

.contact-option:last-child {
  padding-bottom: 0;
}

.contact-option svg {
  flex-shrink: 0;
  margin-top: 2px;
  width: 15px;
  height: 15px;
  stroke: var(--brand-muted);
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: stroke .15s;
}

.contact-option-label {
  display: block;
  font-size: .72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--brand-muted);
  line-height: 1.2;
  margin-bottom: 2px;
  text-decoration: none;
}

.contact-option-value {
  display: block;
  color: var(--brand-text);
  line-height: 1.3;
}

a.contact-option:hover,a.contact-option:focus {
  text-decoration: none;
}

a.contact-option:hover .contact-option-value,a.contact-option:focus .contact-option-value {
  color: var(--brand-blue);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.contact-option-static {
  cursor: default;
}

.contact-divider {
  border: 0;
  border-top: 1px solid var(--border);
  margin: 16px 0;
}

.site-top {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--surface);
}

.site-header {
  background: var(--surface);
  border-bottom: 0;
  box-shadow: 0 4px 18px rgba(0,0,0,.04);
}

.site-header::after {
  display: none;
}

.drawer-close-btn {
  display: none;
}

.main-header {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 16px 0 20px;
}

.logo {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  min-width: 210px;
}

.logo img {
  width: 210px;
  min-width: 210px;
  height: auto;
  display: block;
  border-radius: 0px !important;
}

.nav-wrap {
  flex: 1;
  display: flex;
  justify-content: flex-end;
  min-width: 0;
  margin-left: auto;
}

.main-nav {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0;
  margin-left: auto;
}

.nav-item {
  position: static;
  border-left: 1px solid var(--border);
}

.nav-item:first-child {
  border-left: 0;
}

.nav-link {
  display: inline-flex;
  align-items: center;
  padding: 17px 20px;
  color: #000;
  font-weight: 600;
  font-size: 1.08rem;
  letter-spacing: .01em;
  white-space: nowrap;
  border-radius: 0;
}

.nav-item:last-child .nav-link {
  padding-right: 14px;
}

.nav-link:hover,.nav-item:hover>.nav-link,.nav-item:focus-within>.nav-link {
  background: transparent;
  color: var(--brand-blue);
}

.nav-item:hover .mega,.nav-item:focus-within .mega,.nav-item.focus-open .mega {
  display: block;
}

.mega:before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -28px;
  height: 28px;
  background: transparent;
}

.mega-inner {
  position: relative;
  width: 100%;
  background: var(--surface);
  border: 1px solid var(--border);
  border-top: 0;
  border-radius: 0 0 18px 18px;
  box-shadow: 0 18px 45px rgba(15,45,64,.14);
  overflow-x: hidden;
  overflow-y: auto;
  max-height: calc(100vh - 160px);
  overscroll-behavior: contain;
}

.mega-inner::before {
  content: "";
  display: block;
  height: 8px;
  background: linear-gradient(90deg,#0276e8 0%,#0256a4 100%);
}

.mega-header {
  padding: 18px 24px;
  background: #f2f2f2;
  border-bottom: 1px solid var(--border);
}

.mega-header p {
  margin: 0;
  color: var(--brand-muted);
  max-width: 850px;
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.5;
}

.mega-grid {
  display: grid;
  grid-template-columns: repeat(4,minmax(0,1fr));
  gap: 24px;
  padding: 24px;
}

.section-link {
  display: block;
  width: 100%;
  margin-bottom: 14px;
  padding: 4px 0 12px;
  background: transparent;
  color: #000;
  font-size: 1.08rem;
  font-weight: 600;
  line-height: 1.25;
  border-bottom: 1px solid var(--border);
}

.section-link:hover,.section-link:focus {
  background: transparent;
  color: var(--brand-blue);
  text-decoration: none;
}

.sub-links {
  list-style: none;
  margin: 0;
  padding: 0;
}

.sub-links li {
  margin: 0 0 9px;
}

.sub-links a {
  color: #606060;
  font-size: .92rem;
  font-weight: 600;
  line-height: 1.16;
  display: inline-block;
  text-decoration-skip-ink: none !important;
  transition: transform .18s ease,color .18s ease;
}

.sub-links a:hover,
.sub-links a:focus {
  color: #0a6ed1;
  text-decoration: underline;
  text-decoration-skip-ink: none !important;
  text-underline-offset: 3px;
  text-decoration-thickness: 2px;
  transform: translateX(8px);
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.search-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  margin: 0;
  width: 44px;
  height: 44px;
  border: 0 !important;
  border-radius: 50% !important;
  background: var(--brand-blue, #0256a4) !important;
  color: #fff !important;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  box-sizing: border-box;
  transition: background .18s ease, transform .18s ease, box-shadow .18s ease;
}

.search-toggle:hover,
.search-toggle:focus {
  background: var(--brand-blue-dark, #014785) !important;
  color: #fff !important;
}

.search-toggle.active {
  background: var(--brand-blue, #0256a4) !important;
  color: #fff !important;
}

.search-toggle.active:hover,
.search-toggle.active:focus {
  background: var(--brand-blue-dark, #014785) !important;
  color: #fff !important;
}

.search-toggle svg {
  display: block;
  width: 20px;
  height: 20px;
  margin: auto;
  fill: none;
  stroke: #ffffff !important;
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ==========================================================================
   SITE HEADER SEARCH COMPONENT (Dedicated Styles)
   ========================================================================== */

.site-header-search-panel,
.header-search-panel {
  display: none;
  position: relative;
  width: 100%;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 24px 0 12px;
  background: #FFFFFF;
  border-top: 1px solid #EDEDEE;
  border-bottom: 1px solid #B4B6BB;
  box-shadow: 0px 7px 9px 0px rgba(0, 0, 0, 0.03);
  box-sizing: border-box;
}

.site-header-search-panel:not(.open),
.header-search-panel:not(.open),
#headerSearchPanel:not(.open),
#caledon-search-bar:not(.open) {
  display: none !important;
}

.site-header-search-panel.open,
.header-search-panel.open,
#headerSearchPanel.open,
#caledon-search-bar.open {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
}

.site-header-search-form,
.caledon-search-form,
.header-search-form {
  display: block !important;
  width: min(var(--max-width), calc(100% - 32px)) !important;
  max-width: var(--max-width) !important;
  height: auto !important;
  min-height: 0 !important;
  margin: 0 auto !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  box-sizing: border-box !important;
}

.site-header-search-field,
.caledon-search-field {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 16px !important;
  width: 100% !important;
  height: 52px !important;
  min-height: 52px !important;
  max-height: 52px !important;
  padding: 8px 12px !important;
  box-sizing: border-box !important;
  background: #FFFFFF !important;
  border: 2px solid #B3CCE4 !important;
  border-radius: 999px !important;
  box-shadow: none !important;
  transition: border-color 0.18s ease, box-shadow 0.18s ease !important;
}

.site-header-search-field:focus-within,
.caledon-search-field:focus-within {
  border: 2px solid #0256A4 !important;
  border-color: #0256A4 !important;
  box-shadow: 0 0 0 3px rgba(2, 86, 164, 0.15) !important;
  outline: none !important;
}

.site-header-search-icon,
.site-header-search-field > svg,
.site-header-search-field > img,
.caledon-header-search-icon,
.caledon-search-field > img,
.caledon-search-field > svg,
#caledon-search-bar .caledon-search-field > svg,
#caledon-search-bar .caledon-search-field > img,
#caledon-search-bar .caledon-header-search-icon {
  position: static !important;
  left: auto !important;
  top: auto !important;
  right: auto !important;
  bottom: auto !important;
  transform: none !important;
  background: none !important;
  background-image: none !important;
  flex-shrink: 0 !important;
  width: 24px !important;
  height: 24px !important;
  min-width: 24px !important;
  min-height: 24px !important;
  max-width: 24px !important;
  max-height: 24px !important;
  display: block !important;
  margin: 0 !important;
  padding: 0 !important;
}

.site-header-search-field input,
.site-header-search-field input[type="search"],
.caledon-search-field input,
.caledon-search-field input[type="search"],
#headerSearchInput,
#caledon-search-input {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  min-height: 0 !important;
  max-height: 24px !important;
  height: 24px !important;
  line-height: 24px !important;
  border: 0 !important;
  outline: 0 !important;
  background: transparent !important;
  background-color: transparent !important;
  font-family: 'Manrope', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
  font-size: 16px !important;
  color: rgba(0, 0, 0, 0.9) !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0 !important;
  box-sizing: border-box !important;
  -webkit-appearance: none !important;
  appearance: none !important;
  display: block !important;
  vertical-align: middle !important;
}

.site-header-search-field input:focus,
.site-header-search-field input:focus-visible,
.caledon-search-field input:focus,
.caledon-search-field input:focus-visible,
#headerSearchInput:focus,
#headerSearchInput:focus-visible,
#caledon-search-input:focus,
#caledon-search-input:focus-visible {
  outline: none !important;
  box-shadow: none !important;
  border: 0 !important;
}

.site-header-search-field input::placeholder,
.caledon-search-field input::placeholder,
#headerSearchInput::placeholder,
#caledon-search-input::placeholder {
  color: rgba(0, 0, 0, 0.55) !important;
  font-family: 'Manrope', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
  font-size: 16px !important;
  font-weight: 400 !important;
  line-height: 24px !important;
  opacity: 1 !important;
}

.site-header-search-field input[type="search"]::-webkit-search-cancel-button,
.site-header-search-field input[type="search"]::-webkit-search-decoration,
.site-header-search-field input[type="search"]::-webkit-search-results-button,
.site-header-search-field input[type="search"]::-webkit-search-results-decoration,
.caledon-search-field input[type="search"]::-webkit-search-cancel-button,
.caledon-search-field input[type="search"]::-webkit-search-decoration,
.caledon-search-field input[type="search"]::-webkit-search-results-button,
.caledon-search-field input[type="search"]::-webkit-search-results-decoration,
#headerSearchInput::-webkit-search-cancel-button,
#headerSearchInput::-webkit-search-decoration,
#headerSearchInput::-webkit-search-results-button,
#headerSearchInput::-webkit-search-results-decoration,
#caledon-search-input::-webkit-search-cancel-button,
#caledon-search-input::-webkit-search-decoration,
#caledon-search-input::-webkit-search-results-button,
#caledon-search-input::-webkit-search-results-decoration {
  -webkit-appearance: none !important;
  appearance: none !important;
  display: none !important;
  width: 0 !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}

.site-header-search-field input[type="search"]::-ms-clear,
.site-header-search-field input[type="search"]::-ms-reveal,
.caledon-search-field input[type="search"]::-ms-clear,
.caledon-search-field input[type="search"]::-ms-reveal,
#headerSearchInput::-ms-clear,
#headerSearchInput::-ms-reveal,
#caledon-search-input::-ms-clear,
#caledon-search-input::-ms-reveal {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
}

.site-header-search-submit,
.site-header-search-field .site-header-search-submit,
.caledon-search-submit,
.caledon-search-field .caledon-search-submit,
#headerSearchBtn,
#caledon-search-submit {
  flex-shrink: 0 !important;
  height: 32px !important;
  min-height: 32px !important;
  max-height: 32px !important;
  padding: 5px 16px !important;
  line-height: 20px !important;
  border: 1px solid #0256A4 !important;
  border-radius: 999px !important;
  background: #0256A4 !important;
  background-color: #0256A4 !important;
  color: #FFFFFF !important;
  font-family: 'Manrope', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  cursor: pointer !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  box-sizing: border-box !important;
  outline: none !important;
  outline-offset: 0 !important;
  box-shadow: none !important;
  transition: opacity 0.15s ease, background-color 0.15s ease !important;
  transform: none !important;
  text-decoration: none !important;
  opacity: 1 !important;
}

.site-header-search-submit:hover,
.caledon-search-submit:hover,
#headerSearchBtn:hover {
  background: #014785 !important;
  background-color: #014785 !important;
  border-color: #014785 !important;
  color: #FFFFFF !important;
  text-decoration: none !important;
  outline: none !important;
  box-shadow: none !important;
  transform: none !important;
}

.site-header-search-submit:focus,
.site-header-search-submit:focus-visible,
.site-header-search-submit:active,
.caledon-search-submit:focus,
.caledon-search-submit:focus-visible,
.caledon-search-submit:active,
#headerSearchBtn:focus,
#headerSearchBtn:focus-visible,
#headerSearchBtn:active {
  outline: none !important;
  outline-offset: 0 !important;
  box-shadow: none !important;
}

.site-header-search-submit:disabled:not(.loading),
.caledon-search-submit:disabled:not(.loading),
#headerSearchBtn:disabled:not(.loading) {
  opacity: 1 !important;
  cursor: pointer !important;
  pointer-events: auto !important;
  background: #0256A4 !important;
  background-color: #0256A4 !important;
  border-color: #0256A4 !important;
  color: #FFFFFF !important;
  outline: none !important;
  box-shadow: none !important;
}

.site-header-search-powered,
.caledon-search-powered,
.header-search-meta {
  display: block !important;
  margin: 0 auto !important;
  font-family: 'Manrope', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
  font-size: 12px !important;
  line-height: 16px !important;
  color: rgba(0, 0, 0, 0.55) !important;
  text-align: center !important;
  align-self: center !important;
  width: min(var(--max-width), calc(100% - 32px)) !important;
  max-width: var(--max-width) !important;
  box-sizing: border-box !important;
}

.site-header-search-powered a,
.site-header-search-powered a:link,
.site-header-search-powered a:visited,
.caledon-search-powered a,
.caledon-search-powered a:link,
.caledon-search-powered a:visited,
.header-search-meta a,
.header-search-meta .privacy-link {
  color: inherit !important;
  text-decoration: underline !important;
  text-underline-offset: 2px !important;
  font-family: inherit !important;
  font-weight: 400 !important;
}

.site-header-search-powered a:hover,
.site-header-search-powered a:focus,
.caledon-search-powered a:hover,
.caledon-search-powered a:focus,
.header-search-meta a:hover,
.header-search-meta a:focus {
  color: inherit !important;
  text-decoration-thickness: 2px !important;
}

.header-search-submit {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  margin: 0;
  width: 54px;
  height: 52px;
  border: 0;
  border-radius: var(--radius);
  background: var(--brand-blue);
  color: #fff;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  box-sizing: border-box;
}

.header-search-submit:hover,.header-search-submit:focus {
  background: var(--brand-highlight-green);
}

.header-search-submit svg {
  display: block;
  width: 22px;
  height: 22px;
  margin: auto;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

body.homepage .header-actions .search-toggle {
  display: none;
}

.mobile-toggle {
  display: none;
  align-items: center;
  gap: 10px;
  background: var(--brand-blue);
  color: #fff;
  border: 0;
  border-radius: var(--radius);
  padding: 12px 14px;
  font-weight: 600;
  cursor: pointer;
}

.mobile-toggle svg {
  width: 20px;
  height: 20px;
}

.mobile-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.35);
  z-index: 999998 !important;
}

body.menu-open .mobile-backdrop {
  display: block !important;
  z-index: 999998 !important;
}

.policies-search-wrap .header-search-submit {
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  border: 1px solid var(--brand-blue-dark,#154d8e);
  border-radius: 0 var(--radius,6px) var(--radius,6px) 0;
  background: var(--brand-blue-dark,#154d8e) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M16.5 16.5 21 21'/%3E%3C/svg%3E") center/20px no-repeat;
  color: transparent;
  cursor: pointer;
}

.policies-search-wrap .header-search-submit:hover {
  background-color: var(--brand-highlight-green,#3a8f4a);
}

/* ── TRANSLATION NOTE & DIVIDER ─────────────────────────────────────────── */

.translation-panel .translation-divider,
.drawer-qa-panel .translation-divider {
  border: 0;
  border-top: 1px solid var(--border);
  margin: 12px 10px 8px;
}

.translation-panel .translation-note,
.drawer-qa-panel .translation-note {
  padding: 4px 10px;
  font-size: 0.85rem;
  color: var(--brand-muted);
  font-style: italic;
  text-align: center;
}

/* ── SEARCH ICON TOGGLE ─────────────────────────────────────────────────── */

.search-toggle .close-icon {
  display: none !important;
}

.search-toggle.active .search-icon {
  display: none !important;
}

.search-toggle.active .close-icon {
  display: block !important;
}

.logo, .logo img, .logo svg {
  border-radius: 0 !important;
}

.engagement-photo-logo {
  width: min(72%,360px);
  height: auto;
  filter: drop-shadow(0 8px 18px rgba(0,0,0,.22));
  transition: transform .25s ease,filter .25s ease;
}

.engagement-image:hover .engagement-photo-logo {
  transform: scale(1.03);
  filter: drop-shadow(0 12px 26px rgba(0,0,0,.32));
}

.footer-contact-details {
  margin-top: 16px!important;
  line-height: 1.55;
}

.footer-contact-details strong {
  color: #fff;
}

body,
p,
li,
a,
input,
select,
textarea,
button,
.section-label,
.news-date,
.news-card p,
.engagement-copy p,
.accessibility-message,
.translation-panel a {
  font-weight: 400 !important;
}

strong,
.button,
.nav-link,
.section-link,
.translation-trigger,
.accessibility-trigger,
.contact-trigger,
.utility-bar .container>a,
.search-toggle,
.mobile-toggle,
.header-search-submit,
.search-panel .button,
.site-footer h3,
.site-footer a,
.footer-brand strong,
.footer-contact-details strong,
.news-card h3 {
  font-weight: 600 !important;
}

.mega-header p {
  font-weight: 400 !important;
}

.sub-links a {
  font-weight: 400 !important;
}

.section-link,
.nav-link {
  font-weight: 600 !important;
}

.main-nav .nav-link {
  text-transform: uppercase!important;
  letter-spacing: .045em!important;
  font-size: 1rem!important;
}

body.homepage .header-actions .search-toggle {
  display: none !important;
}

.main-nav .nav-link {
  text-transform: uppercase !important;
}

.site-header,
.site-header::after,
main,
.hero {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

.mega-support-cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 22px;
  margin: 0 24px 24px;
  padding: 20px 22px;
  background: #f2f2f2;
  border-radius: var(--radius);
}

.mega-support-copy {
  min-width: 0;
}

.mega-support-copy strong {
  display: block;
  margin-bottom: 4px;
  color: var(--brand-blue-dark);
  font-size: 1.08rem;
  line-height: 1.2;
  font-weight: 600 !important;
}

.mega-support-copy span {
  display: block;
  color: var(--brand-muted);
  font-size: .98rem;
  line-height: 1.35;
  font-weight: 400 !important;
}

.mega-support-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
}

.mega-support-primary,
.mega-support-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 42px;
  padding: 0 16px;
  border-radius: calc(var(--radius) - 2px);
  font-size: .98rem;
  line-height: 1;
  font-weight: 600 !important;
  white-space: nowrap;
}

.mega-support-primary {
  background: var(--brand-blue);
  color: #ffffff !important;
}

.mega-support-primary:hover,
.mega-support-primary:focus {
  background: var(--brand-highlight-green);
  color: #ffffff !important;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.mega-support-secondary {
  background: #ffffff;
  color: var(--brand-blue) !important;
  border: 1px solid var(--border);
}

.mega-support-secondary:hover,
.mega-support-secondary:focus {
  color: var(--brand-blue-dark) !important;
  border-color: var(--brand-blue);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.mega .section-link {
  display: block !important;
  width: 100% !important;
  margin-bottom: 14px !important;
  padding: 4px 0 12px !important;
  background: transparent !important;
  color: var(--brand-blue-dark) !important;
  font-size: 1.08rem !important;
  font-weight: 600 !important;
  line-height: 1.25 !important;
  border-bottom: 2px solid var(--brand-blue-dark) !important;
  cursor: default !important;
  text-decoration: none !important;
  pointer-events: none !important;
}

.mega .section-link:hover,
.mega .section-link:focus {
  color: var(--brand-blue-dark) !important;
  background: transparent !important;
  text-decoration: none !important;
}

.mega-header {
  display: none !important;
}

.mega-inner {
  background: rgba(255,255,255,.9) !important;
  backdrop-filter: saturate(120%) blur(4px);
}

.mega-grid {
  background: transparent !important;
}

.mega-inner {
  background: var(--surface) !important;
  backdrop-filter: none;
}

body.homepage .header-actions .search-toggle {
  display: none !important;
}

body:not(.homepage) .header-actions .search-toggle {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* =========================================================
   TRANSLATE MENU LANGUAGE ORDER
   Drupal implementation note:
   Preferred first-position language order is:
   English, Italian, Punjabi, Hindi, French.
   Remaining languages can follow after these priority items.
   ========================================================= */

.mega-support-actions,
.mobile-menu-support-actions {
  display: none !important;
}

.mega-support-inline-link,
.mobile-support-inline-link {
  color: var(--brand-blue) !important;
  font-weight: 600 !important;
  text-decoration: underline !important;
  text-underline-offset: 3px !important;
}

.mega-support-inline-link:hover,
.mega-support-inline-link:focus,
.mobile-support-inline-link:hover,
.mobile-support-inline-link:focus {
  color: var(--brand-blue-dark) !important;
  text-decoration-thickness: 2px !important;
}

/* =========================================================
   SAVED STANDARD MEGA MENU
   Drupal implementation note:
   This landing page now uses the saved standard mega menu treatment:
   light grey utility/accessory top nav, updated Translate order, and
   the two-button mega menu CTA with "AI-assisted search" and
   "View the SiteMap". Keep this as the current default pattern.
   ========================================================= */

.utility-bar {
  background: #f7f8f9 !important;
  border-bottom: 1px solid #eef1f4 !important;
}

/* Ensure the previous inline-link CTA treatment does not override buttons. */

.mega-support-inline-link,
.mobile-support-inline-link {
  all: unset;
}

.mega-support-cta {
  display: none !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 22px !important;
  margin: 0 24px 24px !important;
  padding: 20px 22px !important;
  background: #f2f2f2 !important;
  border-radius: var(--radius) !important;
}

.mega-support-copy {
  min-width: 0 !important;
}

.mega-support-copy strong {
  display: block !important;
  margin-bottom: 4px !important;
  color: var(--brand-blue-dark) !important;
  font-size: 1.08rem !important;
  line-height: 1.2 !important;
  font-weight: 600 !important;
}

.mega-support-copy span {
  display: block !important;
  color: var(--brand-muted) !important;
  font-size: .98rem !important;
  line-height: 1.35 !important;
  font-weight: 400 !important;
}

.mega-support-actions {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  flex-shrink: 0 !important;
}

.mega-support-primary,
.mega-support-secondary {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 42px !important;
  padding: 0 16px !important;
  border-radius: calc(var(--radius) - 2px) !important;
  font-size: .98rem !important;
  line-height: 1 !important;
  font-weight: 600 !important;
  text-decoration: none !important;
  white-space: nowrap !important;
}

.mega-support-primary {
  background: var(--brand-blue) !important;
  color: #ffffff !important;
  border: 1px solid var(--brand-blue) !important;
}

.mega-support-secondary {
  background: #ffffff !important;
  color: var(--brand-blue-dark) !important;
  border: 1px solid var(--border) !important;
}

.mega-support-primary:hover,
.mega-support-primary:focus {
  background: var(--brand-highlight-green) !important;
  border-color: var(--brand-highlight-green) !important;
  color: #ffffff !important;
  text-decoration: underline !important;
  text-underline-offset: 3px !important;
}

.mega-support-secondary:hover,
.mega-support-secondary:focus {
  border-color: var(--brand-blue) !important;
  color: var(--brand-blue) !important;
  text-decoration: underline !important;
  text-underline-offset: 3px !important;
}

/* ---- Contact card grid ---- */

.contact-card-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  margin: 28px 0;
}

.contact-card {
  padding: 22px;
  background: var(--brand-light);
  border-radius: var(--radius);
  border: 1px solid rgba(2,86,164,0.14);
}

.contact-card h2 {
  margin: 0 0 8px;
  color: var(--brand-blue-dark);
  font-size: 1.1rem;
  line-height: 1.2;
}

.contact-card p,
.contact-card a {
  margin: 0;
  color: var(--brand-text);
  font-weight: 700;
}

.contact-card a {
  color: var(--brand-blue);
}

.contact-card a:hover,
.contact-card a:focus {
  color: var(--brand-blue-dark);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Row 30 — Accessibility panel buttons: override Firefox default blue ring
   when the active (selected) button keeps focus after click */

.accessibility-options button:focus,
.accessibility-options button:focus-visible {
  outline: 2px solid var(--brand-blue);
  outline-offset: 3px;
  border-bottom-color: var(--brand-blue);
}

/* Row 29 — Translation panel links: brand-color focus ring */

.translation-panel a:focus,
.translation-panel a:focus-visible {
  outline: 2px solid var(--brand-blue);
  outline-offset: -2px;
  background: var(--brand-light);
  color: var(--brand-blue);
  text-decoration: none;
}

/* Active/selected language in translation panel */

.translation-panel a.active {
  background: var(--brand-blue);
  color: #ffffff !important;
  font-weight: 600 !important;
}

.translation-panel a.active:hover,
.translation-panel a.active:focus {
  background: var(--brand-blue-dark);
  color: #ffffff !important;
}

/* ============================================================
   UTILITY BAR — Color consistency & cross-browser normalization
   ============================================================ */

/* Site Map <a> on hover/focus: match the trigger buttons' brand-blue */

.utility-bar .container > a:hover,
.utility-bar .container > a:focus {
  color: var(--brand-blue);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Remove Firefox's inner dotted border on all interactive header buttons */

.contact-trigger::-moz-focus-inner,
.translation-trigger::-moz-focus-inner,
.accessibility-trigger::-moz-focus-inner,
.accessibility-options button::-moz-focus-inner,
.feedback-submit::-moz-focus-inner,
.search-toggle::-moz-focus-inner,
.mobile-toggle::-moz-focus-inner,
.header-search-submit::-moz-focus-inner {
  border: 0;
  padding: 0;
}

/* Normalize UA button appearance in Firefox/Safari */

.contact-trigger,
.translation-trigger,
.accessibility-trigger,
.accessibility-options button {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

/* ============================================================
   ACCESSIBILITY PANEL — Clean click-vs-keyboard focus ring
   Firefox shows a native outline after a mouse click on a button.
   :focus-visible suppresses it for mouse; keyboard still gets a ring.
   ============================================================ */

/* Mouse click: no outline (active bottom-border is the visual indicator) */

.accessibility-options button:focus:not(:focus-visible) {
  outline: none;
}

/* Keyboard focus: intentional 2px brand ring */

.accessibility-options button:focus-visible {
  outline: 2px solid var(--brand-blue);
  outline-offset: 3px;
  border-bottom-color: var(--brand-blue);
}

/* ============================================================
   MOBILE DRAWER — Quick-access panel consistent active states
   Mirrors the desktop accessibility panel button active treatment
   for buttons rendered inside the mobile drawer (.drawer-qa-panel)
   ============================================================ */

.drawer-qa-panel .accessibility-options button:focus:not(:focus-visible) {
  outline: none;
}

.drawer-qa-panel .accessibility-options button:focus-visible {
  outline: 2px solid var(--brand-blue);
  outline-offset: 3px;
  border-bottom-color: var(--brand-blue);
}

/* ---- Shared: contact-us-card / cu-card ---- */

.contact-us-card, .cu-card, .contactContainer {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 20px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.03);
}

.contact-us-card h2, .cu-card h2, .cu-card-title, .contactHeaderTitle {
  margin: 0 0 10px;
  padding: 0;
  border-bottom: none;
  color: var(--brand-blue-dark);
  font-size: 1.25rem;
  font-weight: 700;
}

.contact-us-body, .cu-card-body, .contactBody {
  padding: 0;
  font-size: 0.9375rem;
  color: #576b82;
  line-height: 1.55;
}

.contact-us-body p, .cu-card-body p {
  margin: 0 0 10px;
  color: var(--brand-muted) !important;
  font-weight: 400;
}

.contact-us-body p:last-child, .cu-card-body p:last-child {
  margin-bottom: 0;
}

.contact-us-body strong, .cu-card-body strong {
  font-weight: 600 !important;
  display: block;
  margin-bottom: 6px;
  color: var(--brand-text);
}

.contact-us-body strong + br, .cu-card-body strong + br {
  display: none !important;
}

.contact-us-body a, .cu-card-body a {
  color: var(--brand-blue);
  font-weight: 600 !important;
  text-decoration: none;
}

.contact-us-body a:hover, .contact-us-body a:focus,
.cu-card-body a:hover, .cu-card-body a:focus {
  text-decoration: underline;
  text-underline-offset: 3px;
  color: var(--brand-blue-dark);
}

.contact-note {
  padding: 20px;
  background: var(--soft);
  border-left: 5px solid var(--brand-blue);
  border-radius: 0 calc(var(--radius) - 2px) calc(var(--radius) - 2px) 0;
}

.contact-note p:last-child {
  margin-bottom: 0;
}

.contact-note a {
  color: var(--brand-blue);
  font-weight: 600 !important;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.contact-card {
  padding: 20px;
}

.contact-card h3 {
  margin: 0 0 10px;
  color: var(--brand-blue-dark);
  font-size: 1.05rem;
  font-weight: 600;
}

.contact-card p {
  margin: 0 0 12px;
  color: var(--brand-muted);
  font-weight: 400;
}

.contact-card strong {
  color: var(--brand-text);
  font-weight: 600;
}

.contact-card a {
  color: var(--brand-blue);
  font-weight: 600;
  text-decoration: none;
}

.contact-card a:hover, .contact-card a:focus {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.contact-card p {
  margin: 0 0 12px;
  color: var(--brand-muted);
  font-weight: 400;
}

.contact-card strong {
  color: var(--brand-text);
  font-weight: 700;
  font-size: 1.05rem;
}

.contact-card a {
  color: var(--brand-blue);
  font-weight: 600;
  text-decoration: none;
}

.contact-card a:hover, .contact-card a:focus {
  text-decoration: underline;
  text-underline-offset: 3px;
  color: var(--brand-blue-dark);
}

.policies-search-wrap .views-exposed-form .form-actions .header-search-submit {
  width: 54px !important;
  height: 52px !important;
  border: 1px solid var(--brand-blue-dark, #154d8e) !important;
  border-radius: 0 var(--radius, 6px) var(--radius, 6px) 0 !important;
  background: var(--brand-blue-dark, #154d8e) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M16.5 16.5 21 21'/%3E%3C/svg%3E") center/20px no-repeat !important;
  color: transparent !important;
  cursor: pointer !important;
  box-sizing: border-box !important;
  flex-shrink: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  font-size: 0 !important;
  line-height: 0 !important;
  display: inline-block !important;
  box-shadow: none !important;
}

.policies-search-wrap .views-exposed-form .form-actions .header-search-submit:hover,
.policies-search-wrap .views-exposed-form .form-actions .header-search-submit:focus {
  background-color: var(--brand-highlight-green, #3a8f4a) !important;
  border-color: var(--brand-highlight-green, #3a8f4a) !important;
  color: #ffffff;
}

.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px 24px;
  margin-bottom: 32px;
}

.nav-item-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 60px;
  gap: 14px;
}

.sidebar-nav-list li.active > .nav-item-row > a {
  font-weight: 700 !important;
  color: #1d1d1f !important;
}

.sidebar-nav-list li.active > .nav-item-row > a[aria-current="page"],
.sidebar-nav-list li.active > .nav-item-row > a.is-active {
  color: var(--brand-blue, #0256a4) !important;
}

.event-detail-page .ed-contact-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.event-detail-page .ed-contact-item {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.94rem;
  color: #333;
}

.event-detail-page .ed-contact-item svg {
  flex-shrink: 0;
  color: #1b2a4a;
}

.event-detail-page .ed-contact-item a {
  color: #1b2a4a;
  font-weight: 600;
  text-decoration: none;
}

.event-detail-page .ed-contact-item a:hover {
  text-decoration: underline;
}

/* Fix Cludo CSS overriding form margins and breaking centering */

form.search-panel,
form.header-search-inner,
.cludo-search-form {
  margin: 0 auto !important;
  z-index: 9999999 !important;
  position: relative !important;
  /* Establishes positioning context for autocomplete */;
}

/* ==========================================================================
   06. FOOTER COMPONENTS (Site Footer Grid, Social Icons, Footer Bottom Bar)
   ========================================================================== */

/* =========================================
   Footer Component
   ========================================= */

.site-footer {
  background: #014785;
  color: #ffffff;
  padding: 48px 0 24px;
}

.site-footer,
.site-footer * {
  color: #ffffff;
}

.footer-grid {
  display: grid;
  grid-template-columns: 1.3fr 1fr 1fr 1fr 1fr;
  gap: 34px;
  margin-bottom: 34px;
}

.footer-brand p {
  margin: 0;
  color: rgba(255, 255, 255, .84);
  max-width: 320px;
}

.footer-brand > p:first-child strong {
  color: #fff;
  font-weight: 600;
}

.site-footer h3 {
  margin: 0 0 14px;
  font-size: 1rem;
  text-transform: uppercase;
  letter-spacing: .06em;
  font-weight: 600 !important;
}

.site-footer ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 9px;
}

.site-footer a {
  color: rgba(255, 255, 255, .88) !important;
  font-weight: 600 !important;
}

.site-footer a:hover,
.site-footer a:focus {
  color: #fff !important;
  text-decoration: underline;
  text-underline-offset: 4px;
}

.social-list {
  gap: 11px;
}

.social-link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.social-icon {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, .32);
  display: inline-grid;
  place-items: center;
  flex-shrink: 0;
  transition: background .18s ease, border-color .18s ease;
}

.social-icon svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.social-icon svg[fill="currentColor"] {
  fill: currentColor;
  stroke: none;
}

.social-link:hover .social-icon,
.social-link:focus .social-icon {
  background: rgba(255, 255, 255, .12);
  border-color: rgba(255, 255, 255, .7);
}

.footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, .24);
  padding-top: 18px;
  display: flex;
  justify-content: space-between;
  gap: 20px;
  color: rgba(255, 255, 255, .78) !important;
  font-size: .9rem;
}

.footer-legal {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.footer-divider {
  color: rgba(255, 255, 255, .3);
  user-select: none;
}

.site-footer {
  background: var(--brand-blue-dark);
  color: #fff;
  padding: 48px 0 24px;
}

.footer-grid {
  display: grid;
  grid-template-columns: 1.3fr 1fr 1fr 1fr 1fr;
  gap: 34px;
  margin-bottom: 34px;
}

.footer-brand p {
  margin: 0;
  color: rgba(255,255,255,.84);
  max-width: 320px;
}

.footer-brand > p:first-child strong {
  color: #fff;
  font-weight: 600;
}

.site-footer h3 {
  margin: 0 0 14px;
  font-size: 1rem;
  text-transform: uppercase;
  letter-spacing: .06em;
}

.site-footer ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 9px;
}

.site-footer a {
  color: rgba(255,255,255,.84);
  font-weight: 600;
}

.social-list {
  gap: 11px;
}

.social-link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.social-icon {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,.32);
  display: inline-grid;
  place-items: center;
  flex-shrink: 0;
  transition: background .18s ease,border-color .18s ease;
}

.social-icon svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.social-icon svg[fill="currentColor"] {
  fill: currentColor;
  stroke: none;
}

.social-link:hover .social-icon,
.social-link:focus .social-icon {
  background: rgba(255,255,255,.12);
  border-color: rgba(255,255,255,.7);
}

.footer-bottom {
  border-top: 1px solid rgba(255,255,255,.22);
  padding-top: 18px;
  display: flex;
  justify-content: space-between;
  gap: 20px;
  color: rgba(255,255,255,.76);
  font-size: .9rem;
}

.footer-legal {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.footer-divider {
  color: rgba(255, 255, 255, .3);
  user-select: none;
}

.site-footer {
  background: var(--footer-bg, #000000) !important;
  color: var(--footer-text, #ffffff) !important;
}

.site-footer,
.site-footer * {
  color: var(--footer-text, #ffffff);
}

.site-footer a {
  color: var(--footer-link, rgba(255,255,255,.88)) !important;
}

.site-footer .footer-bottom {
  color: var(--footer-text, rgba(255,255,255,.78)) !important;
  border-top-color: rgba(255,255,255,.24) !important;
}

.site-footer a:hover {
  color: #ffffff !important;
  text-decoration: underline;
}

.site-footer a:focus {
  color: #ffffff !important;
  text-decoration: underline;
  text-underline-offset: 4px;
  background-color: transparent !important;
  outline: 2px solid #ffffff;
  outline-offset: 4px;
}

.site-footer .footer-bottom {
  color: rgba(255,255,255,.78) !important;
  border-top-color: rgba(255,255,255,.24) !important;
}

.site-footer .social-icon {
  border-color: rgba(255,255,255,.35) !important;
}

/* ==========================================================================
   07. PAGE & CONTENT SECTIONS (Interior Heroes, Sidebars, Content Shells, iFrames)
   ========================================================================== */

/* ── Policies/By-laws: search bar ── */

.policies-search-wrap {
  display: flex;
  align-items: center;
  gap: 0;
  max-width: 420px;
}

/* ── Policies/By-laws: pagination ── */

.policies-pagination-bar .pager {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  list-style: none;
  margin: 24px 0;
  padding: 0;
}

.policies-pagination-bar .pager__item {
  list-style: none;
}

.policies-pagination-bar .pager__item a,
.policies-pagination-bar .pager__item.is-active {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 36px;
  height: 36px;
  padding: 0 10px;
  border: 1px solid #ddd;
  border-radius: var(--radius,6px);
  color: #1a1a1a;
  text-decoration: none;
  font-size: .9rem;
}

.policies-pagination-bar .pager__item.is-active {
  background: var(--brand-blue,#1a5ea8);
  color: #fff;
  border-color: var(--brand-blue,#1a5ea8);
}

.policies-pagination-bar .pager__item a:hover {
  background: #f0f4f8;
}

.policies-pagination-bar .pager__item--disabled a,
.policies-pagination-bar .pager__item--disabled {
  opacity: .4;
  pointer-events: none;
}

/* =========================================
   Embedded Widget Component (PerfectMind, etc.)
   Rendered server-side from a [[EMBED:url]] marker by the
   toc_embed_marker filter (modules/custom/toc_embed_marker) — the
   filter always outputs a bare <iframe> with no wrapper div, so this
   targets any iframe sitting inside the main content area directly.
   ========================================= */

.content-main iframe {
  display: block;
  width: 100%;
  max-width: 100%;
  border: 1px solid var(--border, #e0e0e0);
  border-radius: var(--radius, 6px);
  margin: 20px 0;
  background: #ffffff;
  box-shadow: 0 1px 3px rgba(15, 45, 64, .08);
}

/* Loading state: a light placeholder background shows through until
   the embedded page's own content paints, instead of a stark blank
   white box — purely cosmetic, no JS required. */

.content-main iframe {
  background-color: var(--surface, #f7f8fa);
}

/* Responsive Video Embeds (YouTube, Vimeo, etc.) */
iframe[src*="youtube"],
iframe[src*="youtu.be"],
iframe[src*="vimeo"],
.content-main iframe[src*="youtube"],
.content-main iframe[src*="youtu.be"],
.content-main iframe[src*="vimeo"] {
  width: 100% !important;
  max-width: 100% !important;
  aspect-ratio: 16 / 9 !important;
  height: auto !important;
  min-height: unset !important;
  border: 0 !important;
  border-radius: var(--radius, 8px) !important;
  margin-top: 36px !important;
  margin-bottom: 44px !important;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.08) !important;
}

/* YouTube Shorts vertical 9:16 aspect ratio */
iframe[src*="youtube.com/shorts"],
iframe[src*="/shorts/"],
.content-main iframe[src*="youtube.com/shorts"],
.content-main iframe[src*="/shorts/"] {
  width: 100% !important;
  max-width: 420px !important;
  aspect-ratio: 9 / 16 !important;
  height: auto !important;
  min-height: unset !important;
  margin-top: 36px !important;
  margin-bottom: 44px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  border-radius: 12px !important;
}

/* Ensure paragraph/figure wrappers around video iframes have proper vertical spacing */
.content-main p:has(iframe[src*="youtube"]),
.content-main p:has(iframe[src*="vimeo"]),
.content-main figure:has(iframe[src*="youtube"]),
.content-main figure:has(iframe[src*="vimeo"]),
.content-main .media:has(iframe[src*="youtube"]),
.content-main .media:has(iframe[src*="vimeo"]) {
  margin-top: 36px !important;
  margin-bottom: 44px !important;
}

.toc-booking-widget {
  width: 100%;
  max-width: 100%;
  margin: 1.5rem 0;
  overflow: hidden;
}

.toc-booking-widget iframe {
  width: 100%;
  min-height: 1000px;
  border: 0;
  display: block;
}

.interior-hero h1 {
  margin: 0 0 16px;
  color: var(--brand-blue-dark);
  font-size: clamp(2.2rem, 4vw, 3.5rem);
  line-height: 1.05;
  letter-spacing: -0.045em;
}

.month-bar h3 {
  color: #ffffff;
  margin: 0;
  font-weight: 700;
  line-height: 1.05;
}

.list-month-bar h3 {
  color: #ffffff;
  margin: 0;
  font-weight: 700;
  line-height: 1.05;
}

/* Map frames and embedded GIS applications manage their own internal cursors */

iframe, iframe *,
.esri-view, .esri-view *,
.leaflet-container, .leaflet-container *,
.mapboxgl-map, .mapboxgl-map *,
[class*="arcgis-map"], [class*="arcgis-map"] * {
  cursor: auto !important;
}

/* Scoped fallback for any nested <u> inside page content links on rollover */

.content-main a:hover u,
.content-main a:focus u,
.field--name-body a:hover u,
.field--name-body a:focus u,
.node__content a:hover u,
.node__content a:focus u,
.page-content a:hover u,
.page-content a:focus u,
article a:hover u,
article a:focus u {
  color: var(--brand-blue-hover, #0268c1) !important;
}

/* =========================================================
   SUB-LANDING PAGE COMPONENTS
   =========================================================
   Styles specific to interior / sub-landing page templates.
   Shared global styles (header, footer, nav, accessibility,
   utility bar, emergency notice) live above in this file.
   ========================================================= */

/* ---- Page banner image ---- */

.page-banner {
  aspect-ratio: 1900 / 405;
  min-height: 180px;
  background: center/cover no-repeat;
  border-bottom: 1px solid var(--border);
}

/* Interior hero banners: remove black overlay to display at natural brightness */
.page-banner::after,
.development-applications-banner::after {
  display: none !important;
}

/* ---- Interior hero / title band ---- */

.interior-hero {
  background: linear-gradient(135deg, #ffffff 0%, #f1f3f5 100%);
  border-bottom: 1px solid var(--border);
  padding: 44px 0 44px;
}

.interior-hero h1 {
  font-family: var(--font-primary, "myriad-pro", Arial, Helvetica, sans-serif) !important;
  margin: 0 0 16px;
  color: var(--brand-blue-dark);
  font-weight: 600;
  font-size: clamp(2.2rem, 4vw, 3.5rem) !important;
  line-height: 1.05;
  letter-spacing: -0.045em;
}

.interior-hero p {
  max-width: 860px;
  margin: 0;
  color: var(--brand-muted);
}

/* ---- Breadcrumbs ---- */

.breadcrumbs, .bc {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
  margin-bottom: 26px;
  line-height: 1.4;
  font-weight: 400;
}

.breadcrumbs a, .bc a {
  color: var(--brand-blue);
  font-weight: 400 !important;
  text-decoration: none;
}

.breadcrumbs a:hover,
.breadcrumbs a:focus,
.bc a:hover,
.bc a:focus {
  color: var(--brand-blue);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.breadcrumbs .crumb-sep, .bc .sep {
  color: #666;
  font-weight: 400;
}

.breadcrumbs .crumb-current,
.breadcrumbs [aria-current="page"],
.bc .cur,
.bc [aria-current="page"] {
  color: #1a1a1a;
  font-weight: 400 !important;
}

/* ---- Content shell & layout ---- */

.content-shell {
  padding: 28px 0 72px;
  background: var(--surface);
}

.content-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: 42px;
  align-items: start;
}

.content-main {
  min-width: 0;
}

/* ---- Sidebar ---- */

.sidebar {
  position: sticky;
  top: 160px;
  display: grid;
  gap: 20px;
  align-self: start;
}

/* ---- Existing page promo banner ---- */

.existing-promo-banner {
  position: relative;
  display: block;
  min-height: 230px;
  margin: 0 0 28px;
  overflow: hidden;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  box-shadow: 0 8px 22px rgba(2,86,164,0.08);
  background: var(--brand-blue);
}

.existing-promo-banner img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: .62;
}

.existing-promo-banner::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(2,86,164,.92), rgba(2,86,164,.40));
}

/* ---- Graphic banner variant ---- */

.existing-promo-banner.graphic-banner {
  min-height: 0;
  display: block;
  padding: 0;
  background: transparent;
  border: 0;
  box-shadow: none;
  overflow: hidden;
  border-radius: var(--radius);
}

.existing-promo-banner.graphic-banner img {
  position: static;
  display: block;
  width: 100%;
  height: auto;
  opacity: 1;
  object-fit: contain;
}

.existing-promo-banner.graphic-banner::after {
  display: none;
}

.existing-promo-banner.graphic-banner:hover,
.existing-promo-banner.graphic-banner:focus {
  outline: 3px solid var(--brand-blue);
  outline-offset: 3px;
}

.prc-full-width-layout .content-main {
  max-width: none;
  width: 100%;
}

/* ============================================================
   TYPICAL PAGE COMPONENTS
   ============================================================ */

/* --- Typical page layout --- */

.typical-content-layout {
  display: grid;
  grid-template-columns: minmax(0,1fr) 320px;
  gap: 42px;
  align-items: start;
}

.typical-sidebar {
  position: sticky;
  top: 120px;
  display: grid;
  gap: 20px;
  align-self: start;
}

.foi-sidebar {
  position: sticky;
  top: 120px;
  display: grid;
  gap: 20px;
  align-self: start;
}

/* --- FOI / page banner --- */

.page-banner.foi-banner {
  height: 320px;
  background: url('https://www.caledon.ca/en/rotatingimages/navTab03/banner-townhall.jpg') center/cover no-repeat;
  border-bottom: 1px solid var(--border);
}

.foi-content-shell {
  padding: 28px 0 72px;
  background: var(--surface);
}

.related-sidebar-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: block;
}

.related-sidebar-list li {
  border-top: none;
  border-bottom: 1px solid #d7e2ec;
}

.related-sidebar-list li:last-child {
  border-bottom: none;
}

.related-sidebar-list a {
  display: block;
  color: #00549f;
  text-decoration: none;
  font-size: 1.03rem;
  line-height: 1.45;
  padding: 18px 0;
  font-weight: 500;
  transition: none;
  transform: none;
}

.related-sidebar-list a:hover,
.related-sidebar-list a:focus {
  text-decoration: underline;
  text-underline-offset: 3px;
  color: #00549f;
  transform: none;
}

.related-sidebar-list li.active a {
  font-weight: 700;
  color: #00549f;
}

.month-bar {
  display: grid;
  grid-template-columns: 46px minmax(0,1fr) 46px;
  align-items: center;
  gap: 16px;
  padding: 18px 20px;
  background: var(--brand-blue-dark);
  color: #fff;
}

.month-bar h3 {
  margin: 0;
  font-size: clamp(1.75rem, 3vw, 2.35rem);
  line-height: 1.05;
  font-weight: 600;
  letter-spacing: -.02em;
  text-align: center;
}

.list-month-bar {
  display: grid;
  grid-template-columns: 46px minmax(0,1fr) 46px;
  align-items: center;
  gap: 16px;
  padding: 18px 20px;
  background: var(--brand-blue-dark);
  color: #fff;
  border-radius: var(--radius);
}

.list-month-bar h3 {
  margin: 0;
  font-size: clamp(1.75rem, 3vw, 2.35rem);
  line-height: 1.05;
  font-weight: 600;
  letter-spacing: -.02em;
  text-align: center;
}

/* List sidebar */

.list-sidebar {
  position: sticky;
  top: 160px;
  align-self: start;
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 0;
}

.list-sidebar .category-filter {
  gap: 0;
}

.list-sidebar .category-filter legend {
  margin: 0 0 14px;
  color: var(--brand-blue-dark);
  font-size: 1.25rem;
  line-height: 1.2;
  font-weight: 600;
}

.list-sidebar .category-filter-options {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
}

.list-sidebar .category-option {
  display: flex;
  width: 100%;
  min-height: 0;
  padding: 12px 0;
  border-top: 1px solid var(--border);
  background: transparent;
  border-radius: 0;
  color: var(--brand-blue);
  font-weight: 400;
  line-height: 1.3;
  transition: transform .18s ease, color .18s ease, font-weight .18s ease, opacity .18s ease;
}

.list-sidebar .category-option:first-child {
  border-top: 0;
}

.list-sidebar .category-option:hover, .list-sidebar .category-option:focus-within {
  transform: translateX(1px);
  color: var(--brand-blue-dark);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
  outline: 0;
}

.list-sidebar .category-option:focus-within {
  outline: 3px solid var(--brand-blue);
  outline-offset: 3px;
}

.list-sidebar .category-swatch {
  width: 20px;
  height: 20px;
  flex: 0 0 20px;
}

/* ================================================================
   NEWS AND NOTICES (news-and-notices.html)
   ================================================================ */

.sidebar,
.typical-sidebar,
.foi-sidebar,
.list-sidebar,
.post-sidebar,
.applications-filter-sidebar,
.right-sidebar,
.event-sidebar {
  max-height: none !important;
  overflow: visible !important;
}

.news-shell .interior-hero {
  margin-bottom: 0;
}

.right-sidebar {
  position: sticky;
  top: 200px;
  align-self: start;
  display: grid;
  gap: 18px;
}

.filter-panel {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: 0 6px 18px rgba(2,86,164,.08);
  overflow: hidden;
}

.sidebar-subscribe {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: 0 6px 18px rgba(2,86,164,.08);
  overflow: hidden;
}

.sidebar-subscribe-header {
  padding: 22px 22px 0;
  background: #fff;
  color: var(--brand-blue-dark);
}

.sidebar-subscribe-header h2 {
  margin: 0 0 14px;
  color: var(--brand-blue-dark);
  font-size: 1.25rem;
  line-height: 1.2;
  font-weight: 600;
}

.sidebar-subscribe-body {
  padding: 0 22px 22px;
}

.sidebar-subscribe-body p {
  margin: 0 0 16px;
  color: var(--brand-muted);
  font-weight: 400;
}

.post-sidebar {
  position: sticky;
  top: 220px;
  align-self: start;
  display: grid;
  gap: 18px;
}

.sidebar-box {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: 0 6px 18px rgba(2,86,164,.08);
  overflow: hidden;
}

.sidebar-box-header {
  padding: 20px 20px 0;
  background: #fff;
  color: var(--brand-blue-dark);
}

.sidebar-box-header h2 {
  margin: 0 0 14px;
  color: var(--brand-blue-dark);
  font-size: 1.25rem;
  line-height: 1.2;
  font-weight: 600;
}

.sidebar-nav {
  list-style: none;
  margin: 0;
  padding: 8px 0;
}

.sidebar-nav a {
  display: block;
  padding: 13px 20px;
  color: var(--brand-blue);
  font-weight: 600;
  border-bottom: 1px solid var(--border);
}

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

.sidebar-nav a:hover, .sidebar-nav a:focus {
  background: var(--brand-light);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.map-view:fullscreen .application-map-iframe,
.map-view:-webkit-full-screen .application-map-iframe,
.map-view.is-fullscreen-fallback .application-map-iframe {
  height: calc(100vh - 71px) !important;
  min-height: 0 !important;
}

.application-map-iframe {
  display: block;
  width: 100%;
  height: 640px;
  min-height: 640px;
  border: 0;
  background: #fff;
  -webkit-overflow-scrolling: touch;
  transform: translateZ(0);
}

.applications-filter-sidebar {
  position: sticky;
  top: 220px;
  align-self: start;
  width: 100%;
}

.sidebar {
  position: sticky;
  top: 200px;
  align-self: start;
  display: grid;
  gap: 20px;
}

.event-sidebar {
  position: sticky;
  top: 200px;
  align-self: start;
  display: grid;
  gap: 18px;
}

.event-sidebar .event-actions {
  display: grid;
  margin: 0;
}

.sidebar-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0;
}

.sidebar-list li {
  border-top: 1px solid var(--border);
  padding: 12px 0;
}

.sidebar-list li:first-child {
  border-top: 0;
  padding-top: 0;
}

.sidebar-label {
  display: block;
  margin-bottom: 4px;
  color: var(--brand-muted);
  font-size: .92rem;
  font-weight: 600;
}

.sidebar-value {
  display: block;
  color: var(--brand-text);
  font-weight: 400;
}

.sidebar-value a {
  color: var(--brand-blue);
  font-weight: 600;
  text-decoration: none;
}

.sidebar-value a:hover, .sidebar-value a:focus {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.facilities-map-iframe {
  display: block;
  width: 100%;
  min-height: 600px;
  border: 0;
  background: #fff;
}

.policies-search-wrap {
  width: 100% !important;
  max-width: 600px !important;
}

.policies-search-wrap .views-exposed-form {
  display: flex !important;
  align-items: stretch !important;
  gap: 0 !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
}

.policies-search-wrap .views-exposed-form .form-item-keyword {
  flex: 1 !important;
  margin: 0 !important;
  padding: 0 !important;
}

.policies-search-wrap .views-exposed-form .form-actions {
  margin: 0 !important;
  padding: 0 !important;
  display: flex !important;
  align-items: center !important;
}

.policies-pagination-bar {
  padding-top: 24px;
  border-top: 1px solid var(--border);
  display: flex;
  justify-content: flex-end;
  margin-top: 32px;
}

.policies-pagination-bar .pager__items,
.news-pagination-bar .pager__items {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
  justify-content: flex-end !important;
  list-style: none !important;
  margin: 24px 0 !important;
  padding: 0 !important;
}

.policies-pagination-bar .pager__item,
.news-pagination-bar .pager__item {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
  background: none !important;
  display: inline-flex !important;
}

.policies-pagination-bar .pager__item a,
.news-pagination-bar .pager__item a {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 38px !important;
  height: 38px !important;
  padding: 0 10px !important;
  margin: 0 2px !important;
  border: 1px solid var(--border, #ccc) !important;
  border-radius: var(--radius, 6px) !important;
  color: var(--brand-blue, #1a5ea8) !important;
  font-size: .95rem !important;
  font-weight: 500 !important;
  text-decoration: none !important;
  background: #fff !important;
  transition: background .15s, color .15s, border-color .15s !important;
  cursor: pointer !important;
  box-sizing: border-box !important;
}

.policies-pagination-bar .pager__item a:hover,
.news-pagination-bar .pager__item a:hover {
  background: var(--brand-light, #f0f4f8) !important;
  border-color: var(--brand-blue, #1a5ea8) !important;
  color: var(--brand-blue, #1a5ea8) !important;
  text-decoration: none !important;
}

.policies-pagination-bar .pager__item.is-active a,
.policies-pagination-bar .pager__item a[aria-current="page"],
.news-pagination-bar .pager__item.is-active a,
.news-pagination-bar .pager__item a[aria-current="page"] {
  background: var(--brand-blue, #1a5ea8) !important;
  color: #fff !important;
  border-color: var(--brand-blue, #1a5ea8) !important;
}

.policies-pagination-bar .pager__item--ellipsis,
.news-pagination-bar .pager__item--ellipsis {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 38px !important;
  height: 38px !important;
  padding: 0 10px !important;
  margin: 0 2px !important;
  color: #767676 !important;
  font-size: .95rem !important;
  font-weight: 500 !important;
  box-sizing: border-box !important;
}

.council-calendar-embed iframe {
  width: 100%;
  height: 520px;
  border: 0;
  display: block;
}

/* Burn Permit Page overrides */

.content-main {
  min-height: 650px;
}

.right-sidebar {
  position: sticky !important;
  top: 160px !important;
  align-self: start !important;
  display: grid !important;
  gap: 20px !important;
}

.map-embed-wrapper iframe {
  display: block !important;
  width: 100% !important;
  border: none;
  margin: 0;
  padding: 0;
}

.map-embed-wrapper:fullscreen iframe,
.map-embed-wrapper:-webkit-full-screen iframe,
.map-embed-wrapper.is-fullscreen-fallback iframe {
  flex: 1 1 auto !important;
  width: 100% !important;
  height: calc(100vh - 52px) !important;
  min-height: calc(100vh - 52px) !important;
  border: none !important;
  margin: 0 !important;
}

/* Auto-style ANY table inside the page content editor field — no Style click needed */

.content-main table {
  width: 100%;
  border-collapse: collapse;
  font-size: .94rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  margin-bottom: 24px;
}

.content-main table td,
.content-main table th {
  padding: 13px 18px;
  border-bottom: 1px solid var(--border);
  color: var(--brand-text);
  font-size: 1.125rem;
}

.content-main table thead th,
.content-main table thead td {
  text-align: left;
  padding: 13px 18px;
  font-size: 1.125rem;
  color: #fff;
  background: #014785;
  border-bottom: 1px solid var(--border);
}

.content-main table thead th *,
.content-main table thead td * {
  color: #fff !important;
}

.content-main table thead th a:hover,
.content-main table thead td a:hover,
.content-main table thead th a:focus,
.content-main table thead td a:focus,
.content-main table thead th a:active,
.content-main table thead td a:active,
.content-main table thead th a:visited:hover,
.content-main table thead td a:visited:hover,
.content-main table thead th a:visited:focus,
.content-main table thead td a:visited:focus {
  color: #fff !important;
  text-decoration: none !important;
  opacity: 1 !important;
}

.content-main table tbody tr:nth-child(odd) {
  background: #eaf3fb;
}

.content-main table tbody tr:nth-child(even) {
  background: #fff;
}

/* Override zebra striping if thead is present (starts with white) */

.content-main table thead ~ tbody tr:nth-child(odd) {
  background: #fff !important;
}

.content-main table thead ~ tbody tr:nth-child(even) {
  background: #eaf3fb !important;
}

.content-main table tr:last-child td {
  border-bottom: none;
}

/* Table caption styles */

.content-main table caption,
.table-scroll-wrapper table caption,
.table-wrapper table caption,
.tbl-wrap table caption {
  font-size: 1.125em !important;
  font-weight: 700 !important;
  margin: 6px 6px 12px 6px !important;
  padding: 0 !important;
  text-align: left;
}

.interior-hero .hero-title-row {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  flex-wrap: wrap;
  gap: 28px;
}

.interior-hero .hero-title-row h1 {
  margin: 0 !important;
}

/* ── By-Laws & Policies: Responsive Pagination Single-Line & Arrow Alignment Fix ── */

.policies-pagination-bar {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  flex-wrap: wrap !important;
  gap: 16px !important;
  width: 100% !important;
  padding: 8px 0 !important;
  margin: 0 auto !important;
}

.policies-pagination-bar nav,
.policies-pagination-bar .pager,
.policies-pagination-bar ul,
.policies-pagination-bar .pager__items,
ul.pager__items {
  display: flex !important;
  flex-wrap: nowrap !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 6px !important;
  overflow-x: auto !important;
  max-width: 100% !important;
  padding: 8px 0 !important;
  margin: 0 !important;
  -webkit-overflow-scrolling: touch !important;
}

.policies-pagination-bar .pager__item,
ul.pager__items .pager__item {
  flex-shrink: 0 !important;
  list-style: none !important;
  margin: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.policies-pagination-bar .pager__item a,
.policies-pagination-bar .pager__item span,
ul.pager__items .pager__item a,
ul.pager__items .pager__item span {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  box-sizing: border-box !important;
  line-height: 1 !important;
  vertical-align: middle !important;
}

/* Perfect baseline centering for arrow symbols « and » */

.policies-pagination-bar .pager__item--previous a,
.policies-pagination-bar .pager__item--next a,
.policies-pagination-bar .pager__item--first a,
.policies-pagination-bar .pager__item--last a,
ul.pager__items .pager__item--previous a,
ul.pager__items .pager__item--next a,
ul.pager__items .pager__item--first a,
ul.pager__items .pager__item--last a,
.policies-pagination-bar .pager__item--previous span,
.policies-pagination-bar .pager__item--next span,
.policies-pagination-bar .pager__item--first span,
.policies-pagination-bar .pager__item--last span,
ul.pager__items .pager__item--previous span,
ul.pager__items .pager__item--next span,
ul.pager__items .pager__item--first span,
ul.pager__items .pager__item--last span {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  line-height: 1 !important;
  padding-bottom: 1px !important;
  font-size: 1rem !important;
}

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

.sidebar-nav-list > li {
  border-top: none;
  border-bottom: 1px solid #d7e2ec;
  margin: 0px !important;
}

.sidebar-nav-list > li:last-child {
  border-bottom: none;
}

.sidebar-nav-list a {
  display: block;
  flex: 1;
  color: var(--brand-text);
  text-decoration: none;
  font-size: 1.03rem;
  line-height: 1.45;
  padding: 10px 0;
  font-weight: 700 !important;
  transition: color 160ms ease, transform 160ms ease;
}

.sidebar-nav-list a:hover,
.sidebar-nav-list a:focus-visible {
  color: var(--brand-blue, #0256a4);
  transform: translateX(8px);
  text-decoration: none;
}

/* Nested Submenu (Accordion Container) */

.sidebar-nav-list .nested-menu {
  list-style: none;
  padding: 2px 0 8px 9px;
  margin: 0 0 8px;
  background-color: transparent;
  border-left: 1px solid #d7e2ec;
  border-radius: 0;
  overflow: hidden;
  transition: 
    max-height 250ms cubic-bezier(0.4, 0, 0.2, 1),
    opacity 250ms ease,
    padding-top 250ms cubic-bezier(0.4, 0, 0.2, 1),
    padding-bottom 250ms cubic-bezier(0.4, 0, 0.2, 1),
    margin-bottom 250ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* Transition state class used by Javascript */

.sidebar-nav-list .nested-menu.is-collapsed {
  max-height: 0 !important;
  opacity: 0 !important;
  margin-bottom: 0 !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  border-left-color: transparent;
}

.sidebar-nav-list .nested-menu li {
  border-top: none;
  padding: 0;
  margin: 0;
}

.sidebar-nav-list .nested-menu a {
  display: block;
  color: var(--brand-text);
  text-decoration: none;
  font-size: 1.03rem;
  line-height: 1.4;
  padding: 9px 42px 9px 14px;
  border-left: none;
  font-weight: 400 !important;
  transition: color 160ms ease, transform 160ms ease;
}

.sidebar-nav-list .nested-menu a:hover,
.sidebar-nav-list .nested-menu a:focus-visible {
  color: var(--brand-blue, #0256a4);
  font-weight: 700 !important;
  transform: translateX(8px);
  text-decoration: none;
}

/* Active Item Style */

.sidebar-nav-list .nested-menu li.active a,
.sidebar-nav-list .nested-menu a[aria-current="page"] {
  font-weight: 700 !important;
  color: var(--brand-blue, #0256a4) !important;
}

/* ── Node: Agendas and Minutes (node--agendas-minutes.html.twig) ── */

.node-agendas-minutes .content-main .field__label,
.node-agendas-minutes .content-main .field--label-above .field__label {
  display: none !important;
}

.node-agendas-minutes .content-main .field--name-field-intro-text {
  margin: 0;
  padding: 0;
}

.node-agendas-minutes .council-calendar-embed iframe {
  display: block;
  width: 100%;
  min-height: 600px;
  border: none;
}

.node-development-application-new .page-banner {
  width: 100%;
  min-height: 220px;
  background-color: var(--brand-blue,#1a5ea8);
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  position: relative;
}

.node-development-application-new .content-layout.content-layout--full {
  grid-template-columns: 1fr;
}

.node-development-application-new .content-layout.content-layout--full .content-main {
  width: 100%;
  max-width: none;
}

.node-development-application-new .content-main {
  position: relative;
}

.event-detail-page .ed-main,
.event-detail-page .ed-sidebar {
  display: flex;
  flex-direction: column;
  gap: 20px;
  min-width: 0;
}

/* ── Node: Landing Page (node--landing-page.html.twig) ── */

.node-landing-page .page-banner {
  width: 100%;
  min-height: 220px;
  background-color: var(--brand-blue,#1a5ea8);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  position: relative;
}

.node-landing-page .content-main {
  position: relative;
}

.node-news .post-layout.content-layout--full {
  grid-template-columns: 1fr;
}

.node-typical-page-2 .page-banner {
  width: 100%;
  min-height: 220px;
  background-color: var(--brand-blue,#1a5ea8);
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  position: relative;
}

.node-typical-page-2 .content-layout.content-layout--full {
  grid-template-columns: 1fr;
}

.node-typical-page-2 .content-layout.content-layout--full .content-main {
  width: 100%;
  max-width: none;
}

.node-typical-page-2 .content-main {
  position: relative;
  padding-top: 0px;
}

.node-typical-page .content-main .field--name-body {
  display: none!important;
}

.node-typical-page .page-banner {
  width: 100%;
  min-height: 220px;
  background-color: var(--brand-blue,#1a5ea8);
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  position: relative;
}

.node-typical-page .page-banner-wrap {
  position: relative;
}

.paragraph--type--custom-embed .custom-embed-wrapper iframe {
  width: 100% !important;
  border: 0;
  display: block;
  min-height: 700px;
}

/* ==========================================================================
   08. ACCESSIBILITY & HIGH CONTRAST MODES (body.high-contrast overrides)
   ========================================================================== */

/* Footer — High Contrast */

body.high-contrast .site-footer {
  background: #001f3f !important;
}

body.high-contrast footer.site-footer,
body.high-contrast footer.site-footer * {
  color: #ffffff !important;
}

body.high-contrast footer.site-footer a:focus {
  outline: 3px solid #ffffff !important;
  outline-offset: 3px;
}

body.high-contrast .site-footer .social-icon {
  border-color: rgba(255, 255, 255, .75) !important;
}

/* Header — High Contrast */

body.high-contrast .utility-bar,
body.high-contrast .site-header,
body.high-contrast .accessibility-panel,
body.high-contrast .translation-panel,
body.high-contrast .mega-inner,
body.high-contrast .header-search-panel {
  background: #fff!important;
  color: #000!important;
  border-color: #000!important;
  box-shadow: none!important;
}

body.high-contrast .mega-inner::before {
  background: #000!important;
}

body.high-contrast .nav-link,
body.high-contrast .accessibility-message {
  color: #000!important;
}

body.high-contrast a:not(.section-link, .hero-banner-edit-btn),
body.high-contrast .accessibility-trigger,
body.high-contrast .accessibility-options button {
  color: #003b78!important;
}

body.high-contrast .section-link,
body.high-contrast .header-search-submit,
body.high-contrast .caledon-search-submit,
body.high-contrast #headerSearchBtn,
body.high-contrast .mobile-toggle,
body.high-contrast .search-toggle {
  background: #001f3f!important;
  color: #fff!important;
  border-color: #001f3f!important;
}

body.high-contrast .mobile-toggle:hover,
body.high-contrast .mobile-toggle:focus,
body.high-contrast .search-toggle:hover,
body.high-contrast .search-toggle:focus,
body.high-contrast .search-toggle.active {
  background: #000000!important;
  border-color: #000000!important;
  color: #ffffff!important;
}

body.high-contrast a:focus,
body.high-contrast button:focus,
body.high-contrast input:focus {
  outline: 3px solid #000!important;
  outline-offset: 3px;
}

/* High-contrast mode: keep the border visible against a dark page. */

body.high-contrast .content-main iframe {
  border-color: #ffffff !important;
}

body.high-contrast .translation-panel .translation-note,
body.high-contrast .drawer-qa-panel .translation-note {
  color: #000000 !important;
}

body.high-contrast .translation-panel .translation-divider,
body.high-contrast .drawer-qa-panel .translation-divider {
  border-top-color: #000000 !important;
}

body.high-contrast .table-scroll-note {
  color: #003b78 !important;
}

body.high-contrast .table-scroll-note svg {
  stroke: #003b78 !important;
}

/* Text size: 150% / 200% applied to <html> via JS — all rem values scale automatically */

body.text-large .utility-bar .container,
body.text-xlarge .utility-bar .container {
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px 16px;
}

body.text-xlarge .utility-bar {
  /* 128% Header Text Scaling for utility bar (0.9rem * 128 / 150 = 18.43px) */
  font-size: calc(0.9rem * (128 / 150)) !important;
}

body.text-large .hero h1,
body.text-xlarge .hero h1,
body.text-large .section-header h2,
body.text-xlarge .section-header h2,
body.text-large .engagement-copy h2,
body.text-xlarge .engagement-copy h2 {
  line-height: 1.2;
}

body.high-contrast {
  --brand-blue: #003b78;
  --brand-blue-dark: #001f3f;
  --brand-light: #f2f2f2;
  --brand-text: #000000;
  --brand-muted: #222222;
  --page-bg: #ffffff;
  --surface: #ffffff;
  --border: #000000;
  --shadow: none;
  color: #000000;
  background: #ffffff;
}

body.high-contrast .utility-bar,
body.high-contrast .site-header,
body.high-contrast .top-links-strip,
body.high-contrast .featured-updates,
body.high-contrast .news-notices,
body.high-contrast .news-card,
body.high-contrast .engagement-panel,
body.high-contrast .search-panel,
body.high-contrast .accessibility-panel,
body.high-contrast .translation-panel,
body.high-contrast .mega-inner {
  background: #ffffff !important;
  color: #000000 !important;
  border-color: #000000 !important;
  box-shadow: none !important;
}

body.high-contrast .have-your-say {
  background: #f2f2f2 !important;
}

body.high-contrast .site-footer {
  background: #001f3f !important;
  color: #ffffff !important;
}

body.high-contrast .site-footer a,
body.high-contrast .site-footer p,
body.high-contrast .footer-bottom {
  color: #ffffff !important;
}

body.high-contrast .hero h1 {
  color: #ffffff !important;
  text-shadow: 0 3px 8px rgba(0,0,0,0.95) !important;
}

body.high-contrast .promo-title {
  background: #000000 !important;
  color: #ffffff !important;
}

body.high-contrast .nav-link,
body.high-contrast .section-header h2,
body.high-contrast .news-card h3,
body.high-contrast .engagement-copy h2,
body.high-contrast .top-link-card h2,
body.high-contrast .news-date,
body.high-contrast .section-label,
body.high-contrast .news-card p,
body.high-contrast .engagement-copy p,
body.high-contrast .accessibility-message {
  color: #000000 !important;
}

body.high-contrast a:not(.button, .btn, .pg-item, .skip-link, .section-link, .social-link, .hero-banner-edit-btn),
body.high-contrast .accessibility-trigger,
body.high-contrast .translation-trigger,
body.high-contrast .accessibility-options button {
  color: #003b78 !important;
}

body.high-contrast .button,
body.high-contrast .btn:not(.btn-s):not(.btn-outline):not(.btn-o):not(.btn-secondary),
body.high-contrast .section-link {
  background: #001f3f !important;
  color: #ffffff !important;
}

body.high-contrast a.skip-link:not(.button):not(.section-link):not(.social-link) {
  background: #001f3f !important;
  color: #ffffff !important;
}

body.high-contrast a.skip-link:focus:not(.button):not(.section-link):not(.social-link) {
  outline: 3px solid #ffffff !important;
  outline-offset: 2px !important;
}

body.high-contrast .button:hover,
body.high-contrast .button:focus,
body.high-contrast .section-link:hover,
body.high-contrast .section-link:focus {
  background: #000000 !important;
}

body.high-contrast .top-link-card,
body.high-contrast .news-card,
body.high-contrast .promo-card,
body.high-contrast .search-panel input,
body.high-contrast .accessibility-panel,
body.high-contrast .translation-panel,
body.high-contrast .mega-inner {
  border-color: #000000 !important;
}

body.high-contrast .promo-card,
body.high-contrast .news-card,
body.high-contrast .engagement-panel {
  box-shadow: none !important;
}

body.high-contrast a:focus,
body.high-contrast button:focus,
body.high-contrast input:focus,
body.high-contrast select:focus,
body.high-contrast textarea:focus {
  outline: none !important;
}

body.high-contrast a:focus-visible,
body.high-contrast button:focus-visible,
body.high-contrast input:focus-visible,
body.high-contrast select:focus-visible,
body.high-contrast textarea:focus-visible {
  outline: 2px solid #000000 !important;
  outline-offset: 2px !important;
}

body.high-contrast .site-footer a,
body.high-contrast .site-footer .footer-grid a,
body.high-contrast .site-footer .footer-grid a:visited,
body.high-contrast .site-footer .footer-grid h3,
body.high-contrast .site-footer .footer-grid p,
body.high-contrast .site-footer .footer-bottom,
body.high-contrast .site-footer .footer-bottom a {
  color: #ffffff !important;
}

body.high-contrast .site-footer .social-icon {
  border-color: rgba(255,255,255,0.75) !important;
}

body.high-contrast footer.site-footer,
body.high-contrast footer.site-footer * {
  color: #ffffff !important;
}

body.high-contrast footer.site-footer a,
body.high-contrast footer.site-footer a:link,
body.high-contrast footer.site-footer a:visited,
body.high-contrast footer.site-footer a:hover,
body.high-contrast footer.site-footer a:focus,
body.high-contrast footer.site-footer .footer-grid a,
body.high-contrast footer.site-footer .footer-grid a:link,
body.high-contrast footer.site-footer .footer-grid a:visited,
body.high-contrast footer.site-footer a:not(.button):not(.section-link):not(.social-link),
body.high-contrast footer.site-footer a:link:not(.button):not(.section-link):not(.social-link),
body.high-contrast footer.site-footer a:visited:not(.button):not(.section-link):not(.social-link),
body.high-contrast footer.site-footer a:hover:not(.button):not(.section-link):not(.social-link),
body.high-contrast footer.site-footer a:focus:not(.button):not(.section-link):not(.social-link) {
  color: #ffffff !important;
}

body.high-contrast footer.site-footer .social-icon {
  border-color: rgba(255,255,255,0.75) !important;
}

body.high-contrast footer.site-footer a:focus {
  outline: 3px solid #ffffff !important;
  outline-offset: 3px;
}

body.high-contrast .have-your-say {
  background: #f2f2f2!important;
}

body.high-contrast .emergency-notice {
  background: #000!important;
  color: #fff!important;
  border-color: #fff!important;
}

body.high-contrast .emergency-notice * {
  color: #fff!important;
}

body.high-contrast .emergency-notice-label::before {
  background: #fff!important;
  color: #000!important;
}

body.high-contrast .public-notices,body.high-contrast .notice-card {
  background: #fff!important;
  color: #000!important;
  border-color: #000!important;
  box-shadow: none!important;
}

body.high-contrast .emergency-notice {
  background: #000000 !important;
  border-bottom: 2px solid #ffffff !important;
}

body.high-contrast .emergency-notice-label::before {
  background: #ffffff !important;
  color: #000000 !important;
}

body.high-contrast .emergency-notice {
  background: #000000 !important;
  color: #ffffff !important;
  border-bottom: 2px solid #ffffff !important;
}

body.high-contrast .emergency-notice-label,
body.high-contrast .emergency-marquee-track span {
  color: #ffffff !important;
}

body.high-contrast .emergency-notice-label::before {
  background: #ffffff !important;
  color: #000000 !important;
}

body.high-contrast .updates-hub,
body.high-contrast .featured-news-card,
body.high-contrast .mini-news-item,
body.high-contrast .notice-rail,
body.high-contrast .notice-rail-item {
  background: #ffffff !important;
  color: #000000 !important;
  border-color: #000000 !important;
  box-shadow: none !important;
}

body.high-contrast .notice-date-box {
  background: #000000 !important;
  color: #ffffff !important;
}

body.high-contrast .news-events-section,
body.high-contrast .event-date-box {
  background: #ffffff !important;
  color: #000000 !important;
}

body.high-contrast .list-panel-header,
body.high-contrast .simple-list-row,
body.high-contrast .event-list-row {
  border-color: #000000 !important;
}

body.high-contrast .list-panel-title svg {
  stroke: #000000 !important;
}

body.high-contrast .emergency-notice {
  background: #000000 !important;
  color: #ffffff !important;
  border-bottom: 2px solid #ffffff !important;
}

body.high-contrast .emergency-notice-label::before {
  background: #ffffff !important;
  color: #000000 !important;
}

body.high-contrast .mega-inner {
  border: 2px solid #000000 !important;
}

body.high-contrast .mega-support-cta {
  background: #ffffff !important;
  border: 2px solid #000000 !important;
}

body.high-contrast .mega-support-cta .mega-support-actions a.mega-support-primary {
  background: var(--brand-blue-dark) !important;
  color: #ffffff !important;
}

body.high-contrast .mega-support-secondary {
  background: #ffffff !important;
  color: #000000 !important;
  border-color: #000000 !important;
}

body.high-contrast .mega .section-link {
  color: #ffffff !important;
  border-bottom-color: rgba(255,255,255,.4) !important;
  padding-left: 12px !important;
  padding-right: 12px !important;
}

body.high-contrast .mega .sub-links a {
  color: #003b78 !important;
}

body.high-contrast .mega .sub-links a:hover,
body.high-contrast .mega .sub-links a:focus {
  color: #000000 !important;
  text-decoration: underline !important;
  text-underline-offset: 3px !important;
}

body.high-contrast .notice-date-box {
  background: #000000 !important;
  color: #ffffff !important;
}

body.high-contrast .notice-date-box span,
body.high-contrast .notice-date-box strong {
  color: #ffffff !important;
}

body.high-contrast .event-date-box {
  background: #000000 !important;
  color: #ffffff !important;
  border-color: #000000 !important;
}

body.high-contrast .event-date-box span,
body.high-contrast .event-date-box strong,
body.high-contrast .event-date-box .event-month,
body.high-contrast .event-date-box .event-day,
body.high-contrast .event-date-box .month,
body.high-contrast .event-date-box .day {
  color: #ffffff !important;
}

body.high-contrast .enews-cta,
body.high-contrast .enews-cta-card {
  background: #ffffff !important;
  color: #000000 !important;
  border-color: #000000 !important;
  box-shadow: none !important;
}

body.high-contrast .enews-benefits span {
  background: #ffffff !important;
  color: #000000 !important;
  border: 1px solid #000000 !important;
}

body.high-contrast .enews-icon {
  background: #000000 !important;
  color: #ffffff !important;
  border: 2px solid #000000 !important;
  box-shadow: none !important;
}

body.high-contrast .enews-photo {
  border-right: 1px solid #000000 !important;
}

body.high-contrast .enews-photo::after {
  display: none !important;
}

body.high-contrast .enews-photo-badge {
  background: #ffffff !important;
  color: #000000 !important;
  border: 1px solid #000000 !important;
  box-shadow: none !important;
}

body.high-contrast .page-banner {
  border-bottom: 2px solid #000000;
}

body.high-contrast .breadcrumbs a, body.high-contrast .bc a {
  color: #000 !important;
}

body.high-contrast .breadcrumbs .crumb-current, body.high-contrast .bc .cur, body.high-contrast .breadcrumbs .crumb-sep, body.high-contrast .bc .sep {
  color: #000 !important;
}

/* ---- High contrast overrides for sub-landing components ---- */

body.high-contrast .interior-hero,
body.high-contrast .content-shell,
body.high-contrast .intro-card,
body.high-contrast .contact-card,
body.high-contrast .principle-card,
body.high-contrast .service-card,
body.high-contrast .prc-mini-card,
body.high-contrast .strategy-panel,
body.high-contrast .sidebar-card,
body.high-contrast .related-card,
body.high-contrast .existing-link-card {
  background: #ffffff !important;
  color: #000000 !important;
  border-color: #000000 !important;
  box-shadow: none !important;
}

body.high-contrast .related-links {
  background: #f2f2f2 !important;
}

body.high-contrast .sidebar-card.highlight,
body.high-contrast .action-panel {
  background: #001f3f !important;
  color: #ffffff !important;
}

body.high-contrast .sidebar-card.highlight *,
body.high-contrast .action-panel * {
  color: #ffffff !important;
}

body.high-contrast .existing-promo-banner,
body.high-contrast .existing-link-card {
  border-color: #000000 !important;
  box-shadow: none !important;
}

body.high-contrast .existing-promo-banner::after {
  background: #001f3f !important;
}

body.high-contrast .existing-promo-banner *,
body.high-contrast .sidebar-card.highlight * {
  color: #ffffff !important;
}

/* ---- Text size overrides for sub-landing components ---- */

body.text-large .interior-hero p,
body.text-large .intro-card p,
body.text-large .service-card p,
body.text-large .prc-mini-card span,
body.text-large .content-section p,
body.text-large .content-section li,
body.text-large .sidebar-card p,
body.text-large .related-card span,
body.text-large .existing-link-card p {
  font-size: 1.1rem !important;
}

body.text-xlarge .interior-hero p,
body.text-xlarge .intro-card p,
body.text-xlarge .service-card p,
body.text-xlarge .prc-mini-card span,
body.text-xlarge .content-section p,
body.text-xlarge .content-section li,
body.text-xlarge .sidebar-card p,
body.text-xlarge .related-card span,
body.text-xlarge .existing-link-card p {
  font-size: 1.22rem !important;
}

body.text-xlarge .interior-hero h1,
body.text-xlarge .page-hero h1,
body.text-xlarge .event-hero h1,
body.text-xlarge .calendar-hero h1 {
  font-size: clamp(2.15rem,3.7vw,3.35rem) !important;
}

body.text-xlarge.homepage .hero .hero-content h1 {
  font-size: clamp(3.6rem, 6vw, 6rem) !important;
}

/* Top-link card: grow min-height to fit larger icon + text without changing column layout */

body.text-large .top-link-card {
  min-height: 195px !important;
}

body.text-xlarge .top-link-card {
  min-height: 215px !important;
}

body.text-xlarge .engagement-copy h2,
body.text-xlarge .enews-content h2,
body.text-xlarge .content-section h2,
body.text-xlarge .community-event-cta h2,
body.text-xlarge .event-content-section h2 {
  font-size: clamp(2.1rem, 4vw, 3.2rem) !important;
}

body.text-xlarge .migrated-body-section h2 {
  font-size: clamp(1.5rem, 3vw, 2.2rem) !important;
}

body.high-contrast .sidebar-card {
  background: #ffffff!important;
  color: #000000!important;
  border-color: #000000!important;
  box-shadow: none!important;
}

body.high-contrast .sidebar-card.highlight {
  background: #001f3f!important;
  color: #ffffff!important;
}

body.high-contrast .sidebar-card.highlight * {
  color: #ffffff!important;
}

body.high-contrast .accordion,body.high-contrast .acc-wrap {
  border-color: #000!important;
}

body.high-contrast .accordion-item,body.high-contrast .accordion-trigger,body.high-contrast .accordion-panel,body.high-contrast .acc,body.high-contrast .acc-hdr,body.high-contrast .acc-body {
  background: #fff!important;
  color: #000!important;
  border-color: #000!important;
  box-shadow: none!important;
}

body.high-contrast .acc-hdr:focus {
  outline: none !important;
}

body.high-contrast .acc-hdr:focus-visible {
  outline: 3px solid #000000 !important;
  outline-offset: -2px;
}

body.high-contrast .page-banner.foi-banner {
  border-bottom: 2px solid #000000;
}

body.high-contrast .interior-hero,body.high-contrast .foi-content-shell {
  background: #fff!important;
  color: #000!important;
  border-color: #000!important;
  box-shadow: none!important;
}

body.high-contrast .migrated-body-section {
  border-color: #000000!important;
}

body.high-contrast .tbl-wrap thead tr {
  background: #000!important;
}

body.high-contrast .tbl-wrap {
  border-color: #000!important;
}

body.high-contrast .tbl-wrap tbody td {
  border-color: #000!important;
}

body.high-contrast .cctv-map-image {
  border-color: #000000!important;
}

body.high-contrast .foi-sidebar .sidebar-card {
  background: #ffffff!important;
  color: #000000!important;
  border-color: #000000!important;
  box-shadow: none!important;
}

body.high-contrast .page-feedback-card,body.high-contrast .page-feedback-card textarea {
  background: #fff!important;
  color: #000!important;
  border-color: #000!important;
  box-shadow: none!important;
}

body.high-contrast .feedback-submit {
  background: #001f3f!important;
  color: #fff!important;
}

body.high-contrast .feedback-submit:focus,
body.high-contrast .feedback-submit:focus-visible {
  outline: 3px solid #000000 !important;
  outline-offset: 2px !important;
}

body.high-contrast .feedback-rating label {
  color: #707070 !important;
}

body.high-contrast .feedback-rating label:hover,
body.high-contrast .feedback-rating label:hover ~ label,
body.high-contrast .feedback-rating input:checked ~ label {
  color: var(--brand-highlight-green) !important;
}

body.high-contrast .page-support-banner {
  background: #ffffff!important;
  border-color: #000000!important;
}

body.high-contrast .page-support-card,body.high-contrast .page-support-card h3,body.high-contrast .page-support-card p {
  color: #000000!important;
}

body.high-contrast .page-support-icon,body.high-contrast .page-support-card a,body.high-contrast .page-support-card p strong {
  color: #003b78!important;
}

/* Preserve notification ticker original colors in high-contrast mode */

body.high-contrast .notif-ticker .notif-mtext,
body.high-contrast .toc-bnr .notif-mtext,
body.high-contrast .notif-ticker .notif-badge,
body.high-contrast .toc-bnr .toc-bnr-tag,
body.high-contrast .notif-ticker .notif-nav-btn,
body.high-contrast .toc-bnr .toc-bnr-btn,
body.high-contrast .notif-ticker .notif-marquee-item a.notif-link:not(.button):not(.section-link):not(.social-link),
body.high-contrast .toc-bnr a.notif-link:not(.button):not(.section-link):not(.social-link) {
  color: #ffffff !important;
}

body.high-contrast .notif-ticker[data-type="warning"] .notif-mtext,
body.high-contrast .toc-bnr[data-type="warning"] .notif-mtext,
body.high-contrast .notif-ticker[data-type="warning"] .notif-badge,
body.high-contrast .toc-bnr[data-type="warning"] .toc-bnr-tag,
body.high-contrast .notif-ticker[data-type="warning"] .notif-nav-btn,
body.high-contrast .toc-bnr[data-type="warning"] .toc-bnr-btn,
body.high-contrast .notif-ticker[data-type="warning"] .notif-marquee-item a.notif-link:not(.button):not(.section-link):not(.social-link),
body.high-contrast .toc-bnr[data-type="warning"] a.notif-link:not(.button):not(.section-link):not(.social-link) {
  color: #ffffff !important;
}

body.high-contrast .notif-ticker .notif-nav-btn:focus,
body.high-contrast .toc-bnr .toc-bnr-btn:focus {
  outline: none !important;
}

/* Widen accessibility panel at large text sizes */

body.text-large .accessibility-panel,
body.text-xlarge .accessibility-panel {
  width: min(380px, calc(100vw - 20px));
}

/* ============================================================
   Text size scaling — font scales via rem (set on <html>).
   Only icon px sizes are overridden here; layout stays identical.
   ============================================================ */

/* --- text-large: scale icons up proportionally --- */

body.text-large .top-link-icon {
  width: 120px;
  height: 120px;
}

body.text-large .top-link-icon img,
body.text-large .top-link-icon svg {
  width: 80px;
  height: 80px;
}

/* --- text-xlarge: scale icons up further --- */

body.text-xlarge .top-link-icon {
  width: 130px;
  height: 130px;
}

body.text-xlarge .top-link-icon img,
body.text-xlarge .top-link-icon svg {
  width: 88px;
  height: 88px;
}

/* --- override clamp/vw font sizes so they scale with HTML font-size --- */

body.text-large .simple-list-title,
body.text-large .event-list-title,
body.text-xlarge .simple-list-title,
body.text-xlarge .event-list-title {
  font-size: 1.18rem!important;
}

body.text-large .simple-list-meta,
body.text-xlarge .simple-list-meta {
  font-size: 1.05rem!important;
}

body.text-large .list-panel-title h3,
body.text-xlarge .list-panel-title h3 {
  font-size: 1.92rem!important;
}

body.text-large .promo-title,
body.text-xlarge .promo-title {
  font-size: 1rem!important;
}

body.high-contrast input:focus,
body.high-contrast input:focus-visible,
body.high-contrast select:focus,
body.high-contrast select:focus-visible,
body.high-contrast textarea:focus,
body.high-contrast textarea:focus-visible {
  outline: 1px solid #000000 !important;
  border-color: #000000 !important;
  box-shadow: none !important;
}

body.high-contrast .enews-form input.input-invalid {
  border-color: #000000 !important;
  box-shadow: none !important;
}

body.high-contrast .enews-form-error {
  color: #000000 !important;
}

/* ============================================================
   HIGH-CONTRAST MODE — Complete the utility bar color set
   contact-trigger was omitted from the #003b78 rule, leaving it
   gray (#222) while Site Map, Translate, Accessibility went dark blue.
   ============================================================ */

body.high-contrast .contact-trigger {
  color: #003b78 !important;
}

body.high-contrast .contact-trigger:hover,
body.high-contrast .contact-trigger:focus,
body.high-contrast .utility-item.open .contact-trigger {
  color: #001f3f !important;
  text-decoration: underline;
  text-underline-offset: 3px;
}

body.high-contrast .utility-bar .container > a {
  color: #003b78 !important;
}

body.high-contrast .utility-bar .container > a:hover,
body.high-contrast .utility-bar .container > a:focus {
  color: #001f3f !important;
}

/* High-contrast keyboard focus */

body.high-contrast .accessibility-options button:focus-visible {
  outline: 3px solid #000000 !important;
  outline-offset: 2px !important;
}

/* High-contrast mouse click: suppress the 3px black ring from the global rule */

body.high-contrast .accessibility-options button:focus:not(:focus-visible) {
  outline: none !important;
}

body.high-contrast .accessibility-options button.active {
  border-bottom-color: #000000 !important;
}

body.high-contrast .drawer-qa-panel .accessibility-options button.active {
  border-bottom-color: #000000 !important;
}

body.high-contrast .drawer-qa-panel .accessibility-options button:focus:not(:focus-visible) {
  outline: none !important;
}

body.high-contrast .button,
body.high-contrast a.button,
body.high-contrast button.button,
body.high-contrast .btn:not(.btn-s):not(.btn-outline):not(.btn-o):not(.btn-secondary),
body.high-contrast a.btn:not(.btn-s):not(.btn-outline):not(.btn-o):not(.btn-secondary),
body.high-contrast button.btn:not(.btn-s):not(.btn-outline):not(.btn-o):not(.btn-secondary) {
  color: #ffffff !important;
}

/* High-contrast: keep white text on dark <a> buttons.
   Selectors match the specificity (0,4,2) of the broad
   body.high-contrast a:not(.button):not(.section-link):not(.social-link) rule
   so these white-text overrides win when placed later in the file. */

body.high-contrast .contact-panel .contact-311-group a.contact-311-btn,
body.high-contrast a.contact-311-btn,
body.high-contrast .contact-311-group a.contact-311-btn,
body.high-contrast .drawer-qa-panel a.contact-311-btn {
  color: #ffffff !important;
  background: #001f3f !important;
  border-color: #001f3f !important;
}

body.high-contrast a.contact-311-btn svg,
body.high-contrast .drawer-qa-panel a.contact-311-btn svg {
  stroke: #ffffff !important;
  fill: none !important;
}

body.high-contrast .nav-wrap .mobile-menu-support-actions a.mobile-menu-support-primary {
  color: #ffffff !important;
  background: #001f3f !important;
  border-color: #001f3f !important;
}

/* Active language item in translate panel: dark blue bg with white text. */

body.high-contrast .utility-item .translation-panel a.active,
body.high-contrast .translation-panel a.active,
body.high-contrast .drawer-qa-lang-grid a.active {
  background: #001f3f !important;
  color: #ffffff !important;
}

body.high-contrast .utility-item .translation-panel a.active:hover,
body.high-contrast .utility-item .translation-panel a.active:focus,
body.high-contrast .translation-panel a.active:hover,
body.high-contrast .translation-panel a.active:focus,
body.high-contrast .drawer-qa-lang-grid a.active:hover,
body.high-contrast .drawer-qa-lang-grid a.active:focus {
  background: #000000 !important;
  color: #ffffff !important;
}

body.high-contrast .drawer-qa-item.open .drawer-qa-trigger {
  background: #001f3f !important;
  color: #ffffff !important;
}

body.high-contrast .drawer-qa-item.open .drawer-qa-plus {
  color: #ffffff !important;
}

body.high-contrast .drawer-qa-item.open .drawer-qa-icon {
  background: #ffffff !important;
}

body.high-contrast .drawer-qa-item.open .drawer-qa-icon svg {
  stroke: #001f3f !important;
}

/* ================================================================
   HIGH CONTRAST OVERRIDES for new page elements
   ================================================================ */

body.high-contrast .calendar-hero,
body.high-contrast .event-hero,
body.high-contrast .page-hero {
  background: #fff !important;
  border-color: #000 !important;
}

body.high-contrast .community-event-cta {
  background: #f0f0f0 !important;
  border-color: #000 !important;
}

body.high-contrast .month-bar,
body.high-contrast .list-month-bar {
  background: #000 !important;
  color: #fff !important;
}

/* High contrast: View Toggle (Calendar View / List View / Map View) */
body.high-contrast .view-toggle,
body.high-contrast .application-shell .view-toggle {
  background: #ffffff !important;
  border: 2px solid #000000 !important;
}

body.high-contrast .view-toggle button {
  color: #000000 !important;
  background: transparent !important;
  border: 0 !important;
  font-weight: 700 !important;
}

body.high-contrast .view-toggle button svg {
  stroke: #000000 !important;
  color: #000000 !important;
  fill: none !important;
}

body.high-contrast .view-toggle button.active {
  background: #000000 !important;
  color: #ffffff !important;
  border-color: #000000 !important;
}

body.high-contrast .view-toggle button.active svg {
  stroke: #ffffff !important;
  color: #ffffff !important;
  fill: none !important;
}

body.high-contrast .view-toggle button:hover:not(.active),
body.high-contrast .view-toggle button:focus:not(.active) {
  background: #e8e8e8 !important;
  color: #000000 !important;
}

body.high-contrast .view-toggle button:hover:not(.active) svg,
body.high-contrast .view-toggle button:focus:not(.active) svg {
  stroke: #000000 !important;
  color: #000000 !important;
}

body.high-contrast .view-toggle button.active:hover,
body.high-contrast .view-toggle button.active:focus {
  background: #000000 !important;
  color: #ffffff !important;
}

body.high-contrast .view-toggle button:focus,
body.high-contrast .view-toggle button:focus-visible {
  outline: 3px solid #000000 !important;
  outline-offset: 2px !important;
}

body.high-contrast .month-nav button,
body.high-contrast .month-nav-button {
  background: #000000 !important;
  border: 2px solid #ffffff !important;
  color: #ffffff !important;
}

body.high-contrast .month-nav button svg,
body.high-contrast .month-nav-button svg {
  stroke: #ffffff !important;
  fill: none !important;
}

body.high-contrast .month-nav button:hover,
body.high-contrast .month-nav button:focus,
body.high-contrast .month-nav-button:hover,
body.high-contrast .month-nav-button:focus {
  background: #ffffff !important;
  color: #000000 !important;
  border-color: #ffffff !important;
}

body.high-contrast .month-nav button:hover svg,
body.high-contrast .month-nav button:focus svg,
body.high-contrast .month-nav-button:hover svg,
body.high-contrast .month-nav-button:focus svg {
  stroke: #000000 !important;
}

body.high-contrast .month-nav button:focus-visible,
body.high-contrast .month-nav-button:focus-visible {
  outline: 3px solid #ffffff !important;
  outline-offset: 3px !important;
}

body.high-contrast .calendar-weekdays div {
  background: #e8e8e8 !important;
  color: #000000 !important;
  border-color: #000000 !important;
}

body.high-contrast .event-card {
  background: #ffffff !important;
  color: #000000 !important;
  border-bottom: 2px solid #000000 !important;
}

body.high-contrast .event-card:hover,
body.high-contrast .event-card:focus {
  background: #f0f0f0 !important;
  outline: 3px solid #000000 !important;
  outline-offset: -3px !important;
}

body.high-contrast .event-date {
  background: #000000 !important;
  color: #ffffff !important;
  border: 2px solid #000000 !important;
}

body.high-contrast .calendar-day {
  background: #fff !important;
  border-color: #000 !important;
}

body.high-contrast .calendar-day.muted {
  background: #e8e8e8 !important;
}

body.high-contrast .calendar-day.today .day-number {
  background: #000 !important;
  color: #fff !important;
}

body.high-contrast .event-pill {
  background: #f0f0f0 !important;
  color: #000 !important;
  border-color: #000 !important;
}

body.high-contrast .filter-panel,
body.high-contrast .filter-sidebar-card,
body.high-contrast .news-shell .news-card,
body.high-contrast .application-card,
body.high-contrast .process-card,
body.high-contrast .event-intro-card,
body.high-contrast .event-detail-card {
  background: #fff !important;
  border-color: #000 !important;
  box-shadow: none !important;
}

body.high-contrast .chip.chip-filled-primary,
body.high-contrast .event-category-tag {
  background: #000 !important;
  color: #fff !important;
}

body.high-contrast .subscribe-modal-header {
  background: #000 !important;
}

body.high-contrast .subscribe-modal-backdrop {
  background: rgba(0,0,0,.75) !important;
}

body.high-contrast .subscribe-modal {
  background: #fff !important;
  border: 2px solid #000 !important;
}

body.high-contrast .btn-p,
body.high-contrast .sidebar-button {
  background: #000 !important;
  border-color: #000 !important;
  color: #fff !important;
}

body.high-contrast .btn-s {
  background: #ffffff !important;
  border-color: #000000 !important;
  color: #000000 !important;
}

body.high-contrast .btn-s:hover,
body.high-contrast .btn-s:focus {
  background: #000000 !important;
  color: #ffffff !important;
}

body.high-contrast a.btn-p:not(.button):not(.section-link):not(.social-link) {
  background: var(--brand-blue-dark) !important;
  color: #ffffff !important;
  border-color: var(--brand-blue-dark) !important;
}

body.high-contrast a.btn-p:not(.button):not(.section-link):not(.social-link):hover,
body.high-contrast a.btn-p:not(.button):not(.section-link):not(.social-link):focus {
  background: #000000 !important;
  border-color: #000000 !important;
}

body.high-contrast .facilities-banner,
body.high-contrast .planning-banner {
  background-color: #001f3f !important;
  background-image: none !important;
}

body.high-contrast .pg-item {
  color: #003b78 !important;
  border-color: #000 !important;
}

body.high-contrast .pg-item:hover, body.high-contrast .pg-item:focus {
  background: #000 !important;
  color: #fff !important;
}

body.high-contrast .pg-item.active, body.high-contrast .pg-item[aria-current="page"] {
  background: #001f3f !important;
  color: #ffffff !important;
  border-color: #001f3f !important;
}

body.high-contrast .pg-item.disabled, body.high-contrast .pg-item[aria-disabled="true"] {
  color: #767676 !important;
  border-color: #767676 !important;
}

/* Cap sitemap toggle button size in large and x-large modes to prevent line wrapping */

body.text-large .sitemap-subpage-toggle,
body.text-xlarge .sitemap-subpage-toggle {
  font-size: 18px !important;
  width: 34px !important;
  height: 34px !important;
}

body.text-large .sitemap-subpage-toggle .accordion-icon,
body.text-xlarge .sitemap-subpage-toggle .accordion-icon {
  transform: translateY(-1px) !important;
}

body.high-contrast .sitemap-subpage-toggle,
body.high-contrast .section-card li.subpage-accordion > ul {
  background: #fff;
  color: #000;
  border-color: #000;
}

body.high-contrast .sitemap-subpage-toggle:hover,
body.high-contrast .sitemap-subpage-toggle:focus {
  background: #000;
  color: #fff;
}

body.high-contrast .sitemap-control-button {
  background: #000;
  color: #fff;
  border-color: #000;
}

body.high-contrast .sitemap-control-button-secondary {
  background: #fff;
  color: #000;
  border-color: #000;
}

/* Accessibility states */

body.text-large,
body.text-large input,
body.text-large button,
body.text-large select,
body.text-large textarea {
  font-size: 110%;
}

body.text-xlarge,
body.text-xlarge input,
body.text-xlarge button,
body.text-xlarge select,
body.text-xlarge textarea {
  font-size: 122%;
}

body.high-contrast .ckeditor-accordion-container {
  border-color: #000 !important;
}

body.high-contrast .ckeditor-accordion-container dl + dl,
body.high-contrast .ckeditor-accordion-container dl > dd {
  border-color: #000 !important;
}

/* ==========================================================================
   09. RESPONSIVE MEDIA QUERIES (Mobile, Tablet, Desktop Breakpoints)
   ========================================================================== */

/* Footer — Responsive */

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

  .footer-brand {
    grid-column: 1 / -1;
  }

  .footer-bottom {
    flex-direction: column;
  }
}

@media (max-width: 560px) {
  .footer-grid {
    grid-template-columns: 1fr;
  }

  .footer-brand {
    grid-column: unset;
  }
}

/* Header — Responsive */

@media(min-width:1200px) and (max-width:1280px) {
  .logo img {
    width: 175px;
    min-width: 160px;
  }

  .nav-link {
    padding: 14px 10px;
    font-size: .95rem;
  }
}

@media(max-width:1199.98px) {
  .main-header {
    gap: 16px;
  }

  .nav-link {
    padding: 15px 11px;
    font-size: .98rem;
  }

  .mega-grid {
    grid-template-columns: repeat(2,minmax(0,1fr));
  }

  .utility-bar .container {
    justify-content: center;
    flex-wrap: nowrap;
    text-align: center;
    gap: 10px;
    font-size: .8rem;
    white-space: nowrap;
    position: relative;
  }

  .mobile-toggle {
    display: inline-flex;
  }

  .search-toggle {
    width: 42px;
    height: 42px;
    border-radius: 50% !important;
  }

  .logo {
    min-width: 0;
    position: static !important;
    left: auto !important;
    transform: none !important;
    margin-right: auto !important;
  }

  .logo img {
    width: 145px;
    min-width: 0;
  }

  .header-actions {
    margin-left: auto;
  }

  .header-search-inner {
    grid-template-columns: 1fr auto;
    padding: 14px 0;
  }

  .nav-wrap {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: min(86vw,380px);
    transform: translateX(100%);
    transition: transform .25s ease;
    z-index: 999999 !important;
    overflow-y: auto;
    overscroll-behavior: contain;
    touch-action: pan-y;
    box-shadow: -10px 0 30px rgba(0,0,0,.18);
    background: #fff;
    display: block;
  }

  body.menu-open .nav-wrap {
    transform: translateX(0) !important;
    z-index: 999999 !important;
  }

  .drawer-close-btn {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 16px 18px;
    background: var(--brand-blue);
    border: 0;
    border-bottom: 2px solid rgba(255,255,255,.2);
    color: #fff;
    font: inherit;
    font-size: 1rem;
    font-weight: 700;
    cursor: pointer;
    letter-spacing: .04em;
    text-transform: uppercase;
    transition: background .15s;
  }

  .drawer-close-btn:hover,.drawer-close-btn:focus {
    background: #014785;
    outline: none;
  }

  .drawer-close-label {
    flex: 1;
    text-align: left;
  }

  .drawer-close-x {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: #fff;
    color: var(--brand-blue);
    transition: background .15s;
  }

  .drawer-close-btn:hover .drawer-close-x,.drawer-close-btn:focus .drawer-close-x {
    background: rgba(255,255,255,.9);
  }

  .drawer-close-x svg {
    width: 18px;
    height: 18px;
  }

  .main-nav {
    display: block;
    width: 100%;
    padding: 0;
  }

  .nav-item {
    border-left: 0;
    border-bottom: 1px solid rgba(2,86,164,.12);
  }

  .nav-link {
    display: flex;
    width: 100%;
    justify-content: space-between;
    align-items: center;
    padding: 16px 18px;
    color: var(--brand-blue);
    border-radius: 0;
    font-weight: 700 !important;
  }

  .nav-link::after {
    content: '+';
    font-size: 1.4rem;
    font-weight: 600;
    line-height: 1;
    margin-left: 18px;
  }

  .nav-item.mobile-open>.nav-link::after {
    content: '−';
  }

  .nav-item.mobile-open {
    border-bottom: 1px solid rgba(2,86,164,.12);
  }

  .nav-link:hover,.nav-item:hover>.nav-link,.nav-item:focus-within>.nav-link {
    background: rgba(2,86,164,.07);
    color: var(--brand-blue);
  }

  .main-nav .nav-item.mobile-open>.nav-link {
    background: var(--brand-blue)!important;
    color: #fff!important;
  }

  .nav-item:hover .mega,.nav-item:focus-within .mega {
    display: none;
  }

  .nav-item.mobile-open .mega {
    display: block !important;
  }

  .mega {
    position: static !important;
    padding: 0 0 12px;
  }

  .mega:before {
    display: none;
  }

  .mega-inner {
    width: 100%;
    border-radius: 0;
    box-shadow: none;
    border: 0;
    background: #fff;
    overflow: visible;
    max-height: none;
  }

  .mega-inner::before {
    display: none;
  }

  .mega-header {
    display: none;
  }

  .mega-grid {
    grid-template-columns: 1fr;
    gap: 0;
    padding: 0;
  }

  .column {
    padding: 14px 18px;
    border-bottom: 1px solid rgba(2,86,164,.1);
  }

  .column:last-child {
    border-bottom: 0;
  }

  .section-link {
    color: rgba(2,86,164,.6);
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    border-bottom: 1px solid rgba(2,86,164,.15);
    margin-bottom: 10px;
    padding-bottom: 8px;
  }

  .section-link:hover,.section-link:focus {
    color: var(--brand-blue);
  }

  .sub-links li {
    margin-bottom: 0;
  }

  .sub-links a {
    color: rgba(2,86,164,.8);
    font-size: .95rem;
    font-weight: 500;
    display: block;
    padding: 7px 0;
    transition: color .15s;
    transform: none;
  }

  .sub-links a:hover,.sub-links a:focus {
    color: var(--brand-blue);
    text-decoration: underline;
    text-decoration-skip-ink: none !important;
    text-underline-offset: 3px;
    text-decoration-thickness: 2px;
  }

  .nav-wrap .mobile-menu-support-cta {
    background: #f2f2f2!important;
    border-top: 1px solid rgba(0,0,0,.08)!important;
    border-radius: 0!important;
    margin: 0!important;
    padding: 16px 18px!important;
  }

  .nav-wrap .mobile-menu-support-copy strong {
    color: var(--brand-blue-dark)!important;
  }

  .nav-wrap .mobile-menu-support-copy span {
    color: #555!important;
  }

  .nav-wrap .mobile-menu-support-actions {
    grid-template-columns: 1fr!important;
    gap: 8px!important;
    margin-top: 12px!important;
  }

  .nav-wrap .mobile-menu-support-primary {
    background: var(--brand-blue)!important;
    color: #fff!important;
    border-color: var(--brand-blue)!important;
  }

  .nav-wrap .mobile-menu-support-secondary {
    background: #fff!important;
    color: var(--brand-blue)!important;
    border: 1px solid var(--border)!important;
  }
}

/* On narrow screens a fixed 1000px (or similar) height from the old
   source is usually too tall relative to viewport width — most
   embedded widgets (like PerfectMind's booking calendar) scroll
   internally on their own, so a shorter viewport here just means less
   scrolling to reach content below the widget, not lost content. */

@media (max-width: 600px) {
  .content-main iframe {
    height: 700px;
  }
}

@media (max-width: 768px) {
  .toc-booking-widget iframe {
    min-height: 1400px;
    /* widget often stacks taller on narrow screens */;
  }
}

@media(max-width:900px) {
  :root {
    scroll-padding-top: 80px;
  }
}

@media (max-width: 900px) {
  a:focus,
  button:focus,
  input:focus,
  select:focus,
  textarea:focus {
    scroll-margin-top: 80px;
  }
}

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

  .footer-brand {
    grid-column: 1 / -1;
  }

  .footer-bottom {
    flex-direction: column;
  }
}

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

  .footer-brand {
    grid-column: 1 / -1;
  }
}



@media(max-width:390px) {
  .utility-bar .container {
    flex-wrap: nowrap;
    gap: 6px;
    font-size: .68rem;
    justify-content: center;
  }
}

@media (max-width: 900px) {
  .top-links-strip {
    width: min(var(--max-width), calc(100% - 32px));
    padding: 32px 0 18px;
  }


  .promo-grid {
    grid-template-columns: 1fr !important;
    grid-template-rows: auto !important;
  }

  .promo-card,
  .promo-grid:has(> :nth-child(1):last-child) .promo-card,
  .promo-grid:has(> :nth-child(2):last-child) .promo-card,
  .promo-grid:has(> :nth-child(3):last-child) .promo-card,
  .promo-grid:has(> :nth-child(4):last-child) .promo-card,
  .promo-grid:has(> :nth-child(5)) .promo-card {
    grid-column: auto !important;
    grid-row: auto !important;
    height: 280px !important;
  }

  .news-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 900px) {
  .hero {
    min-height: 340px;
    background-position: center;
  }

  .hero-content {
    max-width: 100%;
    padding: 36px 0;
  }

  .hero h1 {
    max-width: 680px;
    margin-bottom: 24px;
    font-size: clamp(1.9rem, 6vw, 2.8rem);
  }

  .search-panel {
    width: 100%;
    max-width: 680px;
  }

  .top-links-strip {
    padding: 28px 0 16px;
  }

  .top-link-card {
    min-height: 145px;
    padding: 16px 12px;
  }

  .top-link-icon {
    width: 86px;
    height: 86px;
  }

  .top-link-icon img,
  .top-link-icon svg {
    width: 58px;
    height: 58px;
  }

  .featured-updates {
    padding: 28px 0 50px;
  }

  .promo-bottom {
    grid-template-columns: 1fr;
  }

  .promo-card,
  .promo-card.tall,
  .promo-card.wide {
    height: 260px;
  }

  .have-your-say {
    padding: 50px 0;
  }

  .engagement-panel {
    grid-template-columns: 1fr;
    gap: 0;
  }

  .engagement-copy {
    padding: 32px;
  }

  .engagement-image {
    min-height: 260px;
  }
}

@media (max-width: 680px) {
  .hero {
    min-height: 420px;
  }

  .hero-dots {
    bottom: 14px;
  }

  .hero h1 {
    margin-bottom: 18px;
    font-size: clamp(1.45rem, 6.2vw, 2rem);
    line-height: 1.08;
  }

  .search-panel {
    flex-direction: column;
    gap: 10px;
    padding: 10px;
  }

  .search-panel input {
    width: 100%;
    min-height: 50px;
  }

  .search-panel .button,
  .search-panel .btn {
    width: 100% !important;
    min-height: 50px !important;
  }

  .promo-card,
  .promo-card.tall,
  .promo-card.wide {
    height: 240px;
  }

  .promo-title {
    padding: 16px 18px;
  }

  .section-header {
    display: block;
  }

  .section-header h2 {
    margin-bottom: 10px;
  }

  .news-list {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 420px) {
  .hero h1 {
    font-size: clamp(1.3rem, 6vw, 1.65rem);
    line-height: 1.1;
    margin-bottom: 16px;
  }
}

@media(min-width:901px) {
  :root {
    --max-width: 1200px;
  }

  .container,
  .section-label,
  .top-links-strip {
    width: min(1400px,calc(100% - 48px)) !important;
    max-width: 1400px !important;
  }
}

@media(max-width:900px) {
  .container,
  .section-label {
    width: min(var(--max-width),calc(100% - 32px)) !important;
  }
}

@media(max-width:900px) {
  .emergency-notice-inner {
    align-items: flex-start;
    flex-direction: column;
    gap: 6px;
    padding: 10px 0 12px;
  }

  .main-nav .nav-link {
    font-size: .98rem!important;
    letter-spacing: .035em!important;
  }

  .notice-list {
    grid-template-columns: repeat(2,minmax(0,1fr));
  }
}

@media(max-width:680px) {
  .news-section {
    padding: 50px 0;
  }

  .news-section + .news-section {
    padding-top: 10px;
  }

  .notice-list {
    grid-template-columns: 1fr;
  }
}

@media(prefers-reduced-motion:reduce) {
  .emergency-marquee-track {
    animation: none !important;
    transform: none !important;
  }
}

@media(min-width:1200px) {
  .main-nav .nav-link {
    font-size: 1.08rem !important;
  }

  .main-nav .nav-item:last-child .nav-link {
    padding-right: 0 !important;
  }
}

@media(min-width:1200px) {
  .main-nav .nav-item {
    position: relative !important;
  }

  .main-nav .nav-item::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -20px;
    height: 8px;
    background: var(--brand-blue);
    opacity: 0;
    pointer-events: none;
    transition: opacity .16s ease;
  }

  .main-nav .nav-item:hover::after,
  .main-nav .nav-item:focus-within::after,
  .main-nav .nav-item.active::after {
    opacity: 1;
  }
}

@media(min-width:1200px) {
  .main-header {
    align-items: stretch !important;
  }

  .main-nav {
    align-items: stretch !important;
  }

  .main-nav .nav-item {
    position: relative !important;
    display: flex !important;
    align-items: stretch !important;
  }

  .main-nav .nav-link {
    position: relative !important;
    display: flex !important;
    align-items: center !important;
  }

  .main-nav .nav-link::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -20px;
    height: 8px;
    background: var(--brand-blue);
    opacity: 0;
    pointer-events: none;
    z-index: 5;
    transition: opacity .16s ease;
  }

  .main-nav .nav-item:hover > .nav-link::after,
  .main-nav .nav-item:focus-within > .nav-link::after,
  .main-nav .nav-item.active > .nav-link::after {
    opacity: 1;
  }

  .main-nav .nav-item::after {
    display: none !important;
  }
}

@media(min-width:1200px) {
  .main-header {
    align-items: center !important;
  }

  .main-nav {
    align-items: center !important;
  }

  .main-nav .nav-item {
    position: static !important;
    display: block !important;
  }

  .main-nav .nav-link {
    position: relative !important;
    display: inline-flex !important;
    align-items: center !important;
    box-shadow: inset 0 0 0 0 var(--brand-blue);
    transition: color .18s ease, box-shadow .16s ease;
  }

  .main-nav .nav-item:hover > .nav-link,
  .main-nav .nav-item:focus-within > .nav-link,
  .main-nav .nav-item.active > .nav-link {
    box-shadow: inset 0 -8px 0 0 var(--brand-blue);
  }

  .main-nav .nav-link::after,
  .main-nav .nav-item::after {
    display: none !important;
    content: none !important;
  }

  .mega {
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
  }
}

@media(min-width:1200px) {
  .main-nav .nav-link {
    box-shadow: none !important;
  }

  .main-nav .nav-item:hover > .nav-link,
  .main-nav .nav-item:focus-within > .nav-link,
  .main-nav .nav-item.active > .nav-link {
    box-shadow: inset 0 -8px 0 0 var(--brand-blue), 0 20px 0 0 var(--brand-blue) !important;
  }
}

@media(min-width:1200px) {
  .main-nav .nav-link {
    box-shadow: none !important;
    border-bottom: 8px solid transparent !important;
    margin-bottom: -8px !important;
  }

  .main-nav .nav-item:hover > .nav-link,
  .main-nav .nav-item:focus-within > .nav-link,
  .main-nav .nav-item.active > .nav-link {
    box-shadow: none !important;
    border-bottom-color: var(--brand-blue) !important;
  }
}

@media(min-width:1200px) {
  .main-nav .nav-link {
    border-bottom: 0 !important;
    margin-bottom: 0 !important;
    box-shadow: none !important;
    position: relative !important;
  }

  .main-nav .nav-link::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -16px;
    height: 8px;
    background: var(--brand-blue);
    opacity: 0;
    pointer-events: none;
    transition: opacity .16s ease;
  }

  .main-nav .nav-item:hover > .nav-link,
  .main-nav .nav-item:focus-within > .nav-link,
  .main-nav .nav-item.active > .nav-link {
    border-bottom-color: transparent !important;
    box-shadow: none !important;
  }

  .main-nav .nav-item:hover > .nav-link::before,
  .main-nav .nav-item:focus-within > .nav-link::before,
  .main-nav .nav-item.active > .nav-link::before {
    opacity: 1;
  }
}

@media(min-width:1200px) {
  .main-nav .nav-link::before {
    bottom: -24px !important;
    height: 8px !important;
  }
}

@media(min-width:1200px) {
  .main-nav .nav-item:last-child .nav-link {
    padding-right: 0 !important;
    margin-right: -19px !important;
  }
}

@media(min-width:901px) {
  .mega .sub-links a {
    font-size: 1rem !important;
    line-height: 1.2 !important;
  }

  .mega .sub-links li {
    margin-bottom: 5px !important;
  }
}

@media(max-width:980px) {
  .updates-hub-grid {
    grid-template-columns: 1fr;
  }
}

@media(max-width:760px) {
  .updates-hub {
    padding: 54px 0;
  }

  .updates-hub-header {
    display: block;
  }

  .updates-panel-header {
    display: block;
  }

  .updates-panel-header a {
    display: inline-block;
    margin-top: 8px;
  }

  .featured-news-card {
    grid-template-columns: 1fr;
  }

  .featured-news-image {
    min-height: 220px;
  }

  .mini-news-list {
    grid-template-columns: 1fr;
  }

  .notice-rail {
    padding: 16px;
  }
}

@media(max-width:980px) {
  .news-events-grid {
    grid-template-columns: 1fr;
    gap: 44px;
  }
}

@media(max-width:680px) {
  .news-events-section {
    padding: 54px 0 60px;
  }

  .list-panel-header {
    align-items: flex-start;
    flex-direction: column;
    gap: 10px;
  }

  .simple-list-row {
    grid-template-columns: 1fr;
    gap: 8px;
    padding: 18px 0;
  }

  .event-list-row {
    grid-template-columns: 56px 1fr;
    gap: 14px;
    padding: 14px 0;
  }

  .event-list-row .simple-list-meta {
    grid-column: 2;
    margin-top: -8px;
  }

  .simple-list-title,
  .event-list-title {
    white-space: normal;
  }
}

@media(prefers-reduced-motion:reduce) {
  .top-link-icon,
  .top-link-card h2 {
    transition: none !important;
  }

  .top-link-card:hover .top-link-icon,
  .top-link-card:focus-within .top-link-icon,
  .top-link-icon:hover,
  .top-link-icon:focus,
  .top-link-card:hover h2,
  .top-link-card:focus-within h2 {
    transform: none !important;
    filter: none !important;
  }
}

@media(max-width:900px) {
  .hero h1 {
    font-size: clamp(2.4rem,8vw,4.25rem) !important;
    line-height: .98 !important;
  }
}

@media(max-width:680px) {
  .hero h1 {
    font-size: clamp(2.15rem,10vw,3.35rem) !important;
    line-height: 1 !important;
  }
}

@media(max-width:900px) {
  .engagement-copy {
    text-align: center !important;
  }

  .engagement-copy p {
    margin-left: auto !important;
    margin-right: auto !important;
  }

  .engagement-copy .button,
  .engagement-copy .btn {
    display: inline-flex !important;
    justify-content: center !important;
    align-items: center !important;
    text-align: center !important;
  }
}

@media(max-width:680px) {
  .engagement-copy {
    padding-left: 24px !important;
    padding-right: 24px !important;
  }

  .engagement-copy .button,
  .engagement-copy .btn {
    width: auto !important;
    max-width: 100% !important;
  }
}

@media(min-width:901px) {
  .mega .sub-links a {
    font-size: 1.08rem !important;
    line-height: 1.24 !important;
  }

  .mega .sub-links li {
    margin-bottom: 6px !important;
  }
}

@media(min-width:901px) {
  .mega .sub-links a:hover,
  .mega .sub-links a:focus {
    font-weight: 600 !important;
  }
}

@media(prefers-reduced-motion:reduce) {
  .hero-video-slide video {
    display: block;
  }
}

@media(min-width:901px) {
  .container,
  .section-label,
  .top-links-strip,
  .header-search-inner {
    width: min(1400px,calc(100% - 48px)) !important;
    max-width: 1400px !important;
  }
}

@media(max-width:900px) {
  .container,
  .section-label,
  .header-search-inner,
  .caledon-search-form,
  .caledon-search-powered {
    width: min(var(--max-width),calc(100% - 32px)) !important;
  }
}

@media(min-width:1200px) and (max-width:1280px) {
  .main-nav .nav-link {
    font-size: .92rem !important;
    letter-spacing: .025em !important;
    padding-left: 10px !important;
    padding-right: 10px !important;
  }

  .logo img {
    width: 168px !important;
  }

  .main-header {
    gap: 14px !important;
  }
}

@media(min-width:1200px) {
  .main-nav .nav-item {
    position: static !important;
  }

  .main-nav .nav-link {
    position: relative !important;
  }

  .main-nav .nav-link::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -24px;
    height: 8px;
    background: var(--brand-blue);
    opacity: 0;
    pointer-events: none;
    transition: opacity .16s ease;
  }

  .main-nav .nav-item:hover > .nav-link::before,
  .main-nav .nav-item:focus-within > .nav-link::before,
  .main-nav .nav-item.active > .nav-link::before {
    opacity: 1;
  }

  .mega {
    left: 0 !important;
    right: 0 !important;
    top: 100% !important;
    width: 100% !important;
  }

  .mega-inner {
    border: 0 !important;
    box-shadow: 0 18px 45px rgba(15,45,64,.14) !important;
  }

  .mega-inner::before {
    content: "";
    display: block;
    height: 8px;
    background: linear-gradient(90deg,#0276e8 0%,#0256a4 100%);
  }

  .mega-header {
    background: #f2f2f2 !important;
    border-bottom: 0 !important;
  }

  .mega .sub-links a {
    font-size: 1.08rem !important;
    line-height: 1.24 !important;
    font-weight: 400 !important;
  }

  .mega .sub-links a:hover,
  .mega .sub-links a:focus {
    font-weight: 600 !important;
  }

  .mega .sub-links li {
    margin-bottom: 6px !important;
  }
}

@media(max-width:900px) {
  /* Both panels: absolute relative to utility-bar container, scrolls with sticky bar */

  .utility-item.contact-menu,
  .utility-item.accessibility-menu {
    position: static !important;
  }

  .contact-panel,
  .accessibility-panel {
    position: absolute !important;
    top: calc(100% + 4px) !important;
    right: 0 !important;
    left: 0 !important;
    width: auto !important;
    max-width: none !important;
    max-height: calc(100vh - 80px) !important;
    overflow-y: auto !important;
    z-index: 9999 !important;
    white-space: normal !important;
    overflow-wrap: break-word !important;
  }

  .accessibility-panel h3,
  .accessibility-message {
    max-width: 100% !important;
    white-space: normal !important;
  }

  .accessibility-options {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 14px 18px !important;
  }

  .accessibility-options button {
    white-space: nowrap !important;
  }
}

@media(max-width:900px) {
  .hero h1 {
    margin-bottom: 24px !important;
  }
}

@media(max-width:680px) {
  .hero h1 {
    margin-bottom: 24px !important;
  }
}

@media(max-width:900px) {
  .mega-support-cta {
    display: none;
    margin: 0 18px 18px;
    padding: 18px;
    background: rgba(255,255,255,.10);
    border: 1px solid rgba(255,255,255,.18);
  }

  .mega-support-copy strong,
  .mega-support-copy span {
    color: #ffffff !important;
  }

  .mega-support-actions {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
    margin-top: 14px;
  }

  .mega-support-primary,
  .mega-support-secondary {
    width: 100%;
    min-height: 44px;
  }

  .mega-support-secondary {
    background: #ffffff;
    color: var(--brand-blue-dark) !important;
    border-color: #ffffff;
  }
}

@media(max-width:900px) {
  .mega .mega-support-cta {
    display: none !important;
  }

  .mobile-menu-support-cta {
    display: block;
    margin: 18px;
    padding: 18px;
    background: rgba(255,255,255,.10);
    border: 1px solid rgba(255,255,255,.18);
    border-radius: var(--radius);
  }

  .mobile-menu-support-copy strong {
    display: block;
    margin-bottom: 5px;
    color: #ffffff !important;
    font-size: 1.05rem;
    line-height: 1.2;
    font-weight: 600 !important;
  }

  .mobile-menu-support-copy span {
    display: block;
    color: rgba(255,255,255,.9) !important;
    font-size: .96rem;
    line-height: 1.35;
    font-weight: 400 !important;
  }

  .mobile-menu-support-actions {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
    margin-top: 14px;
  }

  .mobile-menu-support-primary,
  .mobile-menu-support-secondary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 44px;
    padding: 0 16px;
    border-radius: calc(var(--radius) - 2px);
    font-size: .98rem;
    line-height: 1;
    font-weight: 600 !important;
    text-align: center;
  }

  .mobile-menu-support-primary {
    background: #ffffff;
    color: var(--brand-blue-dark) !important;
  }

  .mobile-menu-support-secondary {
    background: transparent;
    color: #ffffff !important;
    border: 1px solid rgba(255,255,255,.72);
  }

  .mobile-menu-support-primary:hover,
  .mobile-menu-support-primary:focus,
  .mobile-menu-support-secondary:hover,
  .mobile-menu-support-secondary:focus {
    text-decoration: underline;
    text-underline-offset: 3px;
  }
}

@media(max-width:900px) {
  .mobile-menu-support-cta {
    margin: 0 !important;
    padding: 18px !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    border-top: 1px solid rgba(255,255,255,.22) !important;
  }

  .mobile-menu-support-copy strong {
    font-size: 1rem !important;
  }

  .mobile-menu-support-copy span {
    font-size: .94rem !important;
  }

  .mobile-menu-support-actions {
    grid-template-columns: 1fr !important;
    gap: 8px !important;
    margin-top: 12px !important;
  }

  .mobile-menu-support-primary,
  .mobile-menu-support-secondary {
    justify-content: flex-start !important;
    width: auto !important;
    min-height: auto !important;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
    color: #ffffff !important;
    text-align: left !important;
  }

  .mobile-menu-support-primary::after,
  .mobile-menu-support-secondary::after {
    content: " →";
  }

  .mobile-menu-support-primary:hover,
  .mobile-menu-support-primary:focus,
  .mobile-menu-support-secondary:hover,
  .mobile-menu-support-secondary:focus {
    color: #ffffff !important;
    text-decoration: underline !important;
    text-underline-offset: 3px !important;
  }
}

@media(max-width:900px) {
  .mobile-menu-support-actions {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 10px !important;
    margin-top: 14px !important;
  }

  .mobile-menu-support-primary,
  .mobile-menu-support-secondary {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 10px !important;
    width: 100% !important;
    min-height: 44px !important;
    padding: 0 14px !important;
    border-radius: calc(var(--radius) - 2px) !important;
    font-size: .98rem !important;
    line-height: 1 !important;
    font-weight: 600 !important;
    text-align: left !important;
    text-decoration: none !important;
  }

  .mobile-menu-support-primary {
    background: #ffffff !important;
    color: var(--brand-blue-dark) !important;
    border: 1px solid #ffffff !important;
  }

  .mobile-menu-support-secondary {
    background: rgba(255,255,255,.12) !important;
    color: #ffffff !important;
    border: 1px solid rgba(255,255,255,.72) !important;
  }

  .mobile-menu-support-primary::before,
  .mobile-menu-support-secondary::before {
    content: "";
    width: 18px;
    height: 18px;
    flex: 0 0 18px;
    background: currentColor;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-size: 18px 18px;
    mask-size: 18px 18px;
  }

  .mobile-menu-support-primary::before {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M9.5 3a6.5 6.5 0 0 1 5.17 10.44l4.45 4.44a1 1 0 0 1-1.41 1.42l-4.45-4.45A6.5 6.5 0 1 1 9.5 3Zm0 2a4.5 4.5 0 1 0 0 9a4.5 4.5 0 0 0 0-9Zm8.2-2.3l.55 1.2l1.2.55l-1.2.55l-.55 1.2l-.55-1.2l-1.2-.55l1.2-.55l.55-1.2Zm2.6 4.6l.4.9l.9.4l-.9.4l-.4.9l-.4-.9l-.9-.4l.9-.4l.4-.9Z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M9.5 3a6.5 6.5 0 0 1 5.17 10.44l4.45 4.44a1 1 0 0 1-1.41 1.42l-4.45-4.45A6.5 6.5 0 1 1 9.5 3Zm0 2a4.5 4.5 0 1 0 0 9a4.5 4.5 0 0 0 0-9Zm8.2-2.3l.55 1.2l1.2.55l-1.2.55l-.55 1.2l-.55-1.2l-1.2-.55l1.2-.55l.55-1.2Zm2.6 4.6l.4.9l.9.4l-.9.4l-.4.9l-.4-.9l-.9-.4l.9-.4l.4-.9Z'/%3E%3C/svg%3E");
  }

  .mobile-menu-support-secondary::before {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M11 3h2v5h6v5h2v6h-6v-6h2v-3h-4v3h2v6H9v-6h2v-3H7v3h2v6H3v-6h2V8h6V3Zm0 12v2h2v-2h-2Zm6 0v2h2v-2h-2ZM5 15v2h2v-2H5Z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M11 3h2v5h6v5h2v6h-6v-6h2v-3h-4v3h2v6H9v-6h2v-3H7v3h2v6H3v-6h2V8h6V3Zm0 12v2h2v-2h-2Zm6 0v2h2v-2h-2ZM5 15v2h2v-2H5Z'/%3E%3C/svg%3E");
  }

  .mobile-menu-support-primary::after,
  .mobile-menu-support-secondary::after {
    content: none !important;
  }

  .mobile-menu-support-primary:hover,
  .mobile-menu-support-primary:focus,
  .mobile-menu-support-secondary:hover,
  .mobile-menu-support-secondary:focus {
    text-decoration: underline !important;
    text-underline-offset: 3px !important;
  }
}

@media(max-width:900px) {
  .mobile-menu-support-primary:hover,
  .mobile-menu-support-primary:focus {
    background: #ffffff !important;
    color: var(--brand-blue-dark) !important;
    border-color: #ffffff !important;
    font-weight: 600 !important;
    text-decoration: underline !important;
    text-underline-offset: 3px !important;
  }

  .mobile-menu-support-secondary:hover,
  .mobile-menu-support-secondary:focus {
    background: rgba(255,255,255,.12) !important;
    color: #ffffff !important;
    border-color: rgba(255,255,255,.72) !important;
    font-weight: 600 !important;
    text-decoration: underline !important;
    text-underline-offset: 3px !important;
  }
}

@media(min-width:901px) {
  .main-nav .nav-item {
    border-left: 2px solid var(--border) !important;
  }

  .main-nav .nav-item:first-child {
    border-left: 0 !important;
  }
}


@media(max-width:900px) {
  .mega .section-link {
    color: #ffffff !important;
    border-bottom: 2px solid rgba(255,255,255,.42) !important;
    pointer-events: none !important;
  }
}

@media(max-width:900px) {
  .nav-wrap .mega-inner {
    background: #ffffff !important;
  }

  .nav-wrap .mega-grid {
    background: #ffffff !important;
  }

  .nav-wrap .mega .section-link {
    color: var(--brand-blue-dark) !important;
    border-bottom: 2px solid var(--brand-blue-dark) !important;
    background: transparent !important;
    padding: 4px 0 12px !important;
    margin-bottom: 12px !important;
    pointer-events: none !important;
    cursor: default !important;
  }

  .nav-wrap .mega .sub-links a {
    color: #606060 !important;
  }

  .nav-wrap .mega .sub-links a:hover,
  .nav-wrap .mega .sub-links a:focus {
    color: var(--brand-blue) !important;
    text-decoration: underline !important;
    text-decoration-skip-ink: none !important;
    text-underline-offset: 3px !important;
    text-decoration-thickness: 2px !important;
  }

  body.high-contrast .nav-wrap .mega-inner,
  body.high-contrast .nav-wrap .mega-grid {
    background: #ffffff !important;
  }

  body.high-contrast .nav-wrap .mega .section-link {
    color: #000000 !important;
    border-bottom-color: #000000 !important;
  }

  body.high-contrast .nav-wrap .mega .sub-links a {
    color: #000000 !important;
  }

  body.high-contrast .nav-wrap .mega .sub-links a:hover,
  body.high-contrast .nav-wrap .mega .sub-links a:focus {
    color: #000000 !important;
  }
}

@media(max-width:900px) {
  .mega-header {
    display: none !important;
  }
}

@media(min-width:1200px) {
  .nav-wrap {
    justify-content: flex-end !important;
    margin-right: 0 !important;
    padding-right: 0 !important;
  }

  .main-nav {
    justify-content: flex-end !important;
    margin-right: 0 !important;
    padding-right: 0 !important;
  }

  .main-nav .nav-item:last-child .nav-link {
    padding-right: 0 !important;
    margin-right: 0 !important;
  }

  body.homepage .header-actions {
    width: 0 !important;
    min-width: 0 !important;
    margin-left: 0 !important;
    gap: 0 !important;
  }
}

@media(min-width:1200px) {
  .main-nav {
    transform: translateX(-40px) !important;
  }

  .mega {
    transform: translateX(40px) !important;
  }
}

@media(min-width:1200px) {
  .main-nav {
    transform: translateX(40px) !important;
  }

  .mega {
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    transform: none !important;
  }

  .mega-inner {
    width: 100% !important;
    max-width: none !important;
  }
}

@media(min-width:1200px) {
  body.homepage .header-actions {
    display: none !important;
    width: 0 !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  .nav-wrap {
    flex: 1 1 auto !important;
    justify-content: flex-end !important;
    margin-left: auto !important;
    margin-right: 0 !important;
    padding-right: 0 !important;
    transform: none !important;
  }

  .main-nav {
    justify-content: flex-end !important;
    margin-left: auto !important;
    margin-right: 0 !important;
    padding-right: 0 !important;
    transform: none !important;
  }

  .main-nav .nav-item:last-child .nav-link {
    padding-right: 0 !important;
    margin-right: 0 !important;
  }

  .mega {
    position: absolute !important;
    left: 0 !important;
    right: 0 !important;
    top: 100% !important;
    width: 100% !important;
    transform: none !important;
  }

  .mega-inner {
    width: 100% !important;
    max-width: none !important;
    transform: none !important;
  }
}

@media(max-width:1199.98px) {
  .mega-inner {
    background: #ffffff !important;
    backdrop-filter: none !important;
  }
}

@media(max-width:1199.98px) {
  .mega-inner {
    background: #ffffff !important;
    backdrop-filter: none !important;
  }
}

@media(min-width:1200px) {
  .main-nav .nav-item:last-child .nav-link {
    padding-right: 0 !important;
    margin-right: 0 !important;
  }
}

@media(min-width:1200px) {
  .main-nav {
    gap: 0 !important;
    padding-right: 0 !important;
    margin-right: 0 !important;
  }

  .main-nav .nav-item:last-child {
    margin-right: 0 !important;
    padding-right: 0 !important;
  }

  .main-nav .nav-item:last-child .nav-link {
    padding-right: 0 !important;
    margin-right: 0 !important;
  }

  .nav-wrap {
    padding-right: 0 !important;
    margin-right: 0 !important;
  }
}

@media(min-width:1200px) {
  .nav-wrap,
  .main-nav {
    margin-right: 0 !important;
    padding-right: 0 !important;
    justify-content: flex-end !important;
  }

  .main-nav .nav-item:last-child,
  .main-nav .nav-item:last-child .nav-link {
    margin-right: 0 !important;
    padding-right: 0 !important;
  }

  .main-nav .nav-item:last-child .mega,
  .mega {
    transform: none !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
  }
}

@media(max-width:900px) {
  .nav-wrap {
    background: #fff !important;
  }

  .nav-link:hover,
  .nav-item:hover > .nav-link,
  .nav-item:focus-within > .nav-link {
    background: rgba(2,86,164,.07) !important;
    color: var(--brand-blue) !important;
  }

  .mobile-menu-support-cta {
    border-top-color: rgba(2,86,164,.15) !important;
  }

  .mobile-menu-support-secondary {
    background: transparent !important;
    border-color: var(--brand-blue) !important;
    color: var(--brand-blue) !important;
  }

  .mobile-menu-support-secondary:hover,
  .mobile-menu-support-secondary:focus {
    background: rgba(2,86,164,.07) !important;
    border-color: var(--brand-blue) !important;
  }
}

@media(max-width:900px) {
  .enews-cta {
    padding: 46px 0;
  }

  .enews-cta-card {
    grid-template-columns: 1fr;
    gap: 26px;
    padding: 28px;
  }
}

@media(max-width:680px) {
  .enews-form-row {
    flex-direction: column;
    align-items: stretch;
  }

  .enews-form .button,
  .enews-form .btn {
    width: 100%;
  }
}

@media(max-width:900px) {
  .enews-cta {
    padding: 50px 0;
  }

  .enews-cta-card.enews-cta-photo-layout {
    grid-template-columns: 1fr !important;
  }

  .enews-photo {
    min-height: 280px;
  }

  .enews-content {
    padding: 32px;
  }
}

@media(max-width:680px) {
  .enews-photo {
    min-height: 230px;
  }

  .enews-content {
    padding: 26px;
  }
}

@media(max-width:680px) {
  .events-list,
  .event-list {
    gap: 0 !important;
  }

  .event-item,
  .event-row {
    display: grid !important;
    grid-template-columns: 74px minmax(0,1fr) !important;
    column-gap: 18px !important;
    align-items: start !important;
    padding: 22px 0 !important;
  }

  .event-date,
  .event-date-badge {
    width: 74px !important;
    min-width: 74px !important;
    height: 74px !important;
    align-self: start !important;
    margin-top: 0 !important;
  }

  .event-content,
  .event-details {
    padding-top: 0 !important;
    align-self: start !important;
  }

  .event-content h3,
  .event-details h3,
  .event-title {
    margin: 0 0 8px !important;
    line-height: 1.18 !important;
  }

  .event-time,
  .event-meta,
  .event-content p,
  .event-details p {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    line-height: 1.25 !important;
  }
}

@media(max-width:420px) {
  .event-item,
  .event-row {
    grid-template-columns: 68px minmax(0,1fr) !important;
    column-gap: 14px !important;
    padding: 20px 0 !important;
  }

  .event-date,
  .event-date-badge {
    width: 68px !important;
    min-width: 68px !important;
    height: 68px !important;
  }
}

@media(max-width:680px) {
  .event-item,
  .event-row {
    align-items: start !important;
  }

  .event-date,
  .event-date-badge {
    align-self: start !important;
    margin-top: 0 !important;
    transform: none !important;
  }

  .event-content,
  .event-details {
    align-self: start !important;
    padding-top: 0 !important;
    margin-top: 0 !important;
  }

  .event-content h3,
  .event-details h3,
  .event-title {
    margin-top: 0 !important;
    padding-top: 0 !important;
  }
}

@media(max-width:680px) {
  .upcoming-events .event-card,
  .upcoming-events .event-item,
  .upcoming-events .event-row,
  .events-list .event-card,
  .events-list .event-item,
  .events-list .event-row,
  .event-list .event-card,
  .event-list .event-item,
  .event-list .event-row {
    display: grid !important;
    grid-template-columns: 112px minmax(0,1fr) !important;
    column-gap: 18px !important;
    align-items: start !important;
    justify-items: start !important;
    padding-top: 24px !important;
    padding-bottom: 24px !important;
  }

  .upcoming-events .event-date,
  .upcoming-events .event-date-badge,
  .events-list .event-date,
  .events-list .event-date-badge,
  .event-list .event-date,
  .event-list .event-date-badge {
    grid-column: 1 !important;
    grid-row: 1 / span 2 !important;
    align-self: start !important;
    justify-self: start !important;
    margin: 0 !important;
    transform: none !important;
  }

  .upcoming-events .event-card > a,
  .upcoming-events .event-card > div:not(.event-date):not(.event-date-badge),
  .upcoming-events .event-content,
  .upcoming-events .event-details,
  .events-list .event-card > a,
  .events-list .event-card > div:not(.event-date):not(.event-date-badge),
  .events-list .event-content,
  .events-list .event-details,
  .event-list .event-card > a,
  .event-list .event-card > div:not(.event-date):not(.event-date-badge),
  .event-list .event-content,
  .event-list .event-details {
    grid-column: 2 !important;
    align-self: start !important;
    justify-self: start !important;
    margin-top: 0 !important;
    padding-top: 0 !important;
  }

  .upcoming-events h3,
  .upcoming-events .event-title,
  .events-list h3,
  .events-list .event-title,
  .event-list h3,
  .event-list .event-title {
    margin-top: 0 !important;
    padding-top: 0 !important;
    line-height: 1.15 !important;
  }

  .upcoming-events .event-time,
  .events-list .event-time,
  .event-list .event-time {
    grid-column: 2 !important;
    margin-top: 10px !important;
  }
}

@media(max-width:900px) {
  .hero h1 {
    font-size: clamp(2rem,6.5vw,3.25rem) !important;
    line-height: 1.04 !important;
    max-width: 720px !important;
  }
}

@media(max-width:680px) {
  .hero h1 {
    font-size: clamp(1.65rem,7vw,2.35rem) !important;
    line-height: 1.08 !important;
    max-width: 100% !important;
  }
}

@media(max-width:420px) {
  .hero h1 {
    font-size: clamp(1.45rem,6.5vw,1.9rem) !important;
    line-height: 1.1 !important;
  }
}

@media(max-width:900px) {
  .hero h1 {
    font-size: clamp(2.65rem,7.2vw,4rem) !important;
    line-height: 1.02 !important;
    max-width: 760px !important;
  }
}

@media(max-width:680px) {
  .hero h1 {
    font-size: clamp(2rem,9vw,3rem) !important;
    line-height: 1.04 !important;
    letter-spacing: -.04em !important;
    max-width: 100% !important;
  }
}

@media(max-width:420px) {
  .hero h1 {
    font-size: clamp(1.65rem,8vw,2.25rem) !important;
    line-height: 1.06 !important;
  }
}

@media(max-width:900px) {
  body.homepage .hero .hero-content h1,
  .hero .hero-content h1 {
    font-size: clamp(2.65rem,7.2vw,4rem) !important;
    line-height: 1.02 !important;
    max-width: 760px !important;
  }
}

@media(max-width:680px) {
  body.homepage .hero .hero-content h1,
  .hero .hero-content h1 {
    font-size: clamp(2rem,9vw,3rem) !important;
    line-height: 1.04 !important;
    letter-spacing: -.04em !important;
    max-width: 100% !important;
  }
}

@media(max-width:420px) {
  body.homepage .hero .hero-content h1,
  .hero .hero-content h1 {
    font-size: clamp(1.65rem,8vw,2.25rem) !important;
    line-height: 1.06 !important;
  }
}

/* =========================================================
   HOMEPAGE HERO TOP LINE REMOVED
   Drupal implementation note:
   This version removes the 8px blue brand line that sits directly
   above the homepage hero, so the hero image begins immediately below
   the header. Interior page header treatment can retain the brand line.
   ========================================================= */

/* =========================================================
   MEGA MENU ALIGNMENT WITH FINAL SITEMAP
   Drupal implementation note:
   Mega menu columns have been revised to better reflect the final
   SiteMap/IA structure. The menu now surfaces more stable sub-landing
   pages while keeping detailed child pages in the full SiteMap.
   CSS allows five logical columns on wide screens where needed.
   ========================================================= */

@media(min-width:901px) {
  .mega-grid {
    grid-template-columns: repeat(auto-fit,minmax(220px,1fr)) !important;
  }
}

@media(max-width:900px) {
  .mobile-support-inline-link {
    color: #ffffff !important;
    font-weight: 600 !important;
  }

  .mobile-support-inline-link:hover,
  .mobile-support-inline-link:focus {
    color: #ffffff !important;
  }
}

/* =========================================================
   MEGA MENU SUPPORT LINE SINGLE ROW
   Drupal implementation note:
   Keeps the mega menu support prompt and inline links on one line on
   desktop. Mobile can wrap naturally for readability.
   ========================================================= */

@media(min-width:901px) {
  .mega-support-cta {
    display: none !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 0 !important;
  }

  .mega-support-copy {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    min-width: 0 !important;
  }

  .mega-support-copy strong,
  .mega-support-copy span {
    display: inline !important;
    margin: 0 !important;
    white-space: nowrap !important;
  }
}

@media(max-width:900px) {
  .mobile-menu-support-copy strong,
  .mobile-menu-support-copy span {
    display: block !important;
  }
}

/* =========================================================
   MEGA MENU SUPPORT LINE UNIFORM FONT SIZE
   Drupal implementation note:
   Keeps the full support sentence on one line with consistent font
   sizing across the prompt text and inline links.
   ========================================================= */

@media(min-width:901px) {
  .mega-support-copy,
  .mega-support-copy strong,
  .mega-support-copy span,
  .mega-support-copy a,
  .mega-support-inline-link {
    font-size: 1rem !important;
    line-height: 1.35 !important;
  }

  .mega-support-copy strong,
  .mega-support-copy a,
  .mega-support-inline-link {
    font-weight: 600 !important;
  }

  .mega-support-copy span {
    font-weight: 400 !important;
  }
}

@media(max-width:900px) {
  .mega .mega-support-cta {
    display: none !important;
  }

  .mobile-menu-support-cta {
    display: block !important;
    margin: 0 !important;
    padding: 18px !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    border-top: 1px solid rgba(255,255,255,.22) !important;
  }

  .mobile-menu-support-copy strong {
    display: block !important;
    margin-bottom: 5px !important;
    color: #ffffff !important;
    font-size: 1rem !important;
    line-height: 1.2 !important;
    font-weight: 600 !important;
  }

  .mobile-menu-support-copy span {
    display: block !important;
    color: rgba(255,255,255,.9) !important;
    font-size: .94rem !important;
    line-height: 1.35 !important;
    font-weight: 400 !important;
  }

  .mobile-menu-support-actions {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 10px !important;
    margin-top: 14px !important;
  }

  .mobile-menu-support-primary,
  .mobile-menu-support-secondary {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    min-height: 44px !important;
    padding: 0 16px !important;
    border-radius: calc(var(--radius) - 2px) !important;
    font-size: .98rem !important;
    line-height: 1 !important;
    font-weight: 600 !important;
    text-align: center !important;
    text-decoration: none !important;
  }

  .mobile-menu-support-primary {
    background: #ffffff !important;
    color: var(--brand-blue-dark) !important;
    border: 1px solid #ffffff !important;
  }

  .mobile-menu-support-secondary {
    background: transparent !important;
    color: #ffffff !important;
    border: 1px solid rgba(255,255,255,.72) !important;
  }

  .mobile-menu-support-primary:hover,
  .mobile-menu-support-primary:focus,
  .mobile-menu-support-secondary:hover,
  .mobile-menu-support-secondary:focus {
    text-decoration: underline !important;
    text-underline-offset: 3px !important;
  }
}

@media(max-width:680px) {
  .interior-hero {
    padding: 26px 0 28px;
  }

  .interior-hero .breadcrumbs {
    margin-bottom: 14px;
  }

  .interior-hero h1 {
    margin-bottom: 0;
  }
}

@media(max-width:680px) {
  .content-shell {
    padding-top: 18px;
  }
}

@media (min-width: 1051px) {
  .sidebar, .typical-sidebar, .foi-sidebar, .list-sidebar, .post-sidebar, .applications-filter-sidebar {
    max-height: calc(100vh - 140px);
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: #c8d6e4 transparent;
  }

  .sidebar::-webkit-scrollbar, .typical-sidebar::-webkit-scrollbar, .foi-sidebar::-webkit-scrollbar, .list-sidebar::-webkit-scrollbar, .post-sidebar::-webkit-scrollbar, .applications-filter-sidebar::-webkit-scrollbar {
    width: 4px;
  }

  .sidebar::-webkit-scrollbar-thumb, .typical-sidebar::-webkit-scrollbar-thumb, .foi-sidebar::-webkit-scrollbar-thumb, .list-sidebar::-webkit-scrollbar-thumb, .post-sidebar::-webkit-scrollbar-thumb, .applications-filter-sidebar::-webkit-scrollbar-thumb {
    background: #c8d6e4;
    border-radius: 4px;
  }
}

/* Sticky top responsive: header shrinks at narrower viewports */

@media (max-width: 900px) {
  .sidebar, .typical-sidebar, .foi-sidebar,
  .right-sidebar, .post-sidebar, .event-sidebar,
  .applications-filter-sidebar, .list-sidebar {
    top: 100px;
  }
}

@media (max-width: 900px) {
  .sidebar, .typical-sidebar, .foi-sidebar,
  .right-sidebar, .post-sidebar, .event-sidebar,
  .applications-filter-sidebar, .list-sidebar {
    top: 80px;
  }
}

/* ---- Responsive overrides for sub-landing ---- */

@media(max-width:980px) {
  .content-layout,
  .prc-feature {
    grid-template-columns: 1fr;
  }

  .sidebar {
    position: static;
  }

  .contact-card-grid,
  .related-grid {
    grid-template-columns: 1fr;
  }

  .service-principles {
    grid-template-columns: 1fr;
  }

  .parks-full-width .existing-card-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media(max-width:760px) {
  .service-card-grid {
    grid-template-columns: 1fr;
  }

  .action-panel {
    grid-template-columns: 1fr;
  }

  .action-button {
    width: 100%;
  }

  .existing-promo-content {
    min-height: 220px;
    padding: 24px;
  }
}

@media(max-width:680px) {
  .existing-card-grid {
    grid-template-columns: 1fr;
  }
}

@media(max-width:680px) {
  .parks-full-width .existing-card-grid {
    grid-template-columns: 1fr;
  }
}

@media(max-width:980px) {
  .typical-content-layout {
    grid-template-columns: 1fr;
  }

  .typical-sidebar {
    position: static;
  }
}

@media(max-width:1280px) {
  .sched-widget {
    grid-template-columns: 220px 1fr;
  }
}

@media(max-width:700px) {
  .sched-widget {
    grid-template-columns: 1fr;
  }

  .sched-filters {
    border-right: none;
    border-bottom: 1px solid var(--border);
    height: auto;
    max-height: 320px;
  }

  .sched-activities {
    height: auto;
    min-height: 300px;
  }
}

@media(max-width:980px) {
  .foi-layout {
    grid-template-columns: 1fr;
  }

  .foi-sidebar {
    position: static;
  }
}

@media(max-width:760px) {
  .page-banner.foi-banner {
    height: 220px;
  }

  .interior-hero {
    padding: 26px 0 28px!important;
  }

  .foi-content-shell {
    padding-top: 18px!important;
  }
}

@media(max-width:980px) {
  .page-support-grid {
    grid-template-columns: 1fr;
    gap: 32px;
  }

  .page-support-card {
    grid-template-columns: 48px minmax(0,1fr);
    column-gap: 18px;
  }

  .page-support-card p {
    max-width: none;
  }
}

@media(max-width:520px) {
  .page-support-banner .container {
    padding-top: 38px;
    padding-bottom: 40px;
  }

  .page-support-card {
    grid-template-columns: 44px minmax(0,1fr);
    column-gap: 14px;
  }

  .page-support-icon svg {
    width: 34px;
    height: 34px;
  }

  .page-support-card h3 {
    font-size: 1.28rem;
  }
}

@media(max-width:700px) {
  .notif-message {
    justify-content: flex-start;
  }

  #notifText,.notif-link {
    font-size: .82rem;
  }

  /* Mobile: Single horizontal row layout (Notice badge, Marquee content, Pause button) */
  .notif-ticker-inner,
  .toc-bnr .notif-ticker-inner {
    display: grid !important;
    grid-template-columns: auto minmax(0, 1fr) 44px !important;
    align-items: center !important;
    gap: 9px !important;
    padding: 7px 0 !important;
    min-height: 44px !important;
    flex-wrap: nowrap !important;
  }

  .notif-badge, .toc-bnr-tag {
    order: 1 !important;
    font-size: .68rem !important;
    padding: 3px 8px !important;
    white-space: nowrap !important;
    margin: 0 !important;
  }

  .notif-marquee, .toc-bnr-msg {
    order: 2 !important;
    min-width: 0 !important;
    width: 100% !important;
    flex: 1 1 auto !important;
    margin: 0 !important;
    overflow: hidden !important;
  }

  .notice-motion-toggle,
  .notif-pause-btn,
  .toc-bnr-btn.notif-pause-btn,
  #noticeMotionToggle,
  #notifPauseBtn {
    order: 3 !important;
    width: 44px !important;
    height: 36px !important;
    min-height: 36px !important;
    margin: 0 !important;
    display: grid !important;
    place-items: center !important;
  }

  .notif-nav-btn svg, .toc-bnr-btn svg {
    width: 16px !important;
    height: 16px !important;
  }
}

@media(min-width:701px) {
  .notif-ticker-inner {
    flex-wrap: nowrap;
  }
}

/* ====================================
   MOBILE DRAWER — Quick Access
   ==================================== */

/* Hide drawer-only elements on desktop */

@media(min-width:1200px) {
  .drawer-quick-access {
    display: none !important;
  }
}

@media(max-width:1199.98px) {
  /* Hide utility bar from header on mobile */

  .utility-bar {
    display: none !important;
  }

  /* Fix last nav-item + alignment (overrides desktop padding-right:14px) */

  .nav-wrap .nav-item:last-child .nav-link {
    padding-right: 18px !important;
  }

  /* Quick Access section wrapper — divider separates from main nav */

  .drawer-quick-access {
    display: block !important;
    padding-bottom: 0;
    border-top: 1px solid rgba(2,86,164,.15);
  }

  /* Hide "QUICK ACCESS" label */

  .drawer-qa-label {
    display: none;
  }

  /* Each expandable item */

  .drawer-qa-item {
    border-bottom: 1px solid rgba(2,86,164,.12);
  }

  /* Trigger row */

  .drawer-qa-trigger {
    display: flex;
    align-items: center;
    gap: 14px;
    width: 100%;
    padding: 16px 18px;
    background: transparent;
    border: 0;
    color: var(--brand-blue);
    font: inherit;
    font-size: 1rem;
    font-weight: 700 !important;
    text-align: left;
    cursor: pointer;
    text-transform: uppercase !important;
    letter-spacing: .045em !important;
  }

  .drawer-qa-trigger:hover,
  .drawer-qa-trigger:focus {
    background: rgba(2,86,164,.07);
    outline: none;
  }

  .drawer-qa-item.open .drawer-qa-trigger {
    background: var(--brand-blue);
    color: #fff;
  }

  .drawer-qa-item.open .drawer-qa-icon {
    background: #fff;
  }

  .drawer-qa-item.open .drawer-qa-icon svg {
    stroke: var(--brand-blue);
  }

  .drawer-qa-item.open .drawer-qa-plus {
    color: #fff;
  }

  .drawer-qa-item.open {
    border-bottom: 1px solid rgba(2,86,164,.12);
  }

  /* Icon circle — blue bg, white icon */

  .drawer-qa-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: var(--brand-blue);
    flex-shrink: 0;
  }

  .drawer-qa-icon svg {
    width: 20px;
    height: 20px;
    fill: none;
    stroke: #ffffff;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    display: block;
  }

  .drawer-qa-text {
    flex: 1;
  }

  .drawer-qa-plus {
    font-size: 1.4rem;
    font-weight: 600;
    line-height: 1;
    color: var(--brand-blue);
    min-width: 20px;
    text-align: center;
    display: inline-block;
  }

  /* Expanded panel — white desktop-style */

  .drawer-qa-panel {
    display: none;
    background: #ffffff;
    padding: 22px 18px 24px;
    color: var(--brand-text);
  }

  .drawer-qa-item.open .drawer-qa-panel {
    display: block;
  }

  /* Panel headings */

  .drawer-qa-panel h3 {
    margin: 0 0 12px;
    color: #111;
    font-size: 1.05rem;
    font-weight: 600 !important;
  }

  /* Accessibility options inside panel */

  .drawer-qa-panel .accessibility-options {
    display: flex !important;
    gap: 14px !important;
    margin-bottom: 24px !important;
    flex-wrap: wrap !important;
  }

  .drawer-qa-panel .accessibility-options button {
    display: inline-flex !important;
    align-items: center !important;
    gap: 5px !important;
    border: 0 !important;
    border-bottom: 3px solid transparent !important;
    background: transparent !important;
    color: var(--brand-blue) !important;
    padding: 0 0 6px !important;
    font: inherit !important;
    font-weight: 600 !important;
    cursor: pointer !important;
  }

  .drawer-qa-panel .accessibility-options button.active {
    border-bottom-color: var(--brand-blue) !important;
  }

  .drawer-qa-panel .accessibility-message {
    margin: 0 !important;
    color: #39434d !important;
    font-size: .95rem !important;
    line-height: 1.65 !important;
    font-weight: 400 !important;
  }

  /* Language grid inside panel */

  .drawer-qa-lang-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
  }

  .drawer-qa-lang-grid a {
    display: block;
    padding: 9px 10px;
    color: var(--brand-text) !important;
    font-weight: 600 !important;
    text-decoration: none;
  }

  .drawer-qa-lang-grid a:hover,
  .drawer-qa-lang-grid a:focus {
    background: var(--brand-light) !important;
    color: var(--brand-blue) !important;
  }

  .drawer-qa-lang-grid a.active {
    background: var(--brand-blue) !important;
    color: #ffffff !important;
    font-weight: 700 !important;
  }

  .drawer-qa-lang-grid a.active:hover,
  .drawer-qa-lang-grid a.active:focus {
    background: var(--brand-blue-dark) !important;
    color: #ffffff !important;
  }

  /* Site map plain link row */

  .drawer-qa-link {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px 18px;
    color: var(--brand-blue) !important;
    font-size: 1rem;
    font-weight: 700 !important;
    text-transform: uppercase;
    letter-spacing: .045em;
    text-decoration: none;
    border-bottom: 1px solid rgba(2,86,164,.12);
  }

  .drawer-qa-link:hover,
  .drawer-qa-link:focus {
    background: rgba(2,86,164,.07);
    color: var(--brand-blue) !important;
  }
}

/* =================================================================
   TEXT SIZE: X-LARGE
   - Page Content: 150% (scaled via html root font-size in JS)
   - Header: 128% Text Scaling (adjusted so header nav never overlaps)
   - Mobile Drawer: only on ≤1280px. Desktop (≥1281px) keeps full nav.
   ================================================================= */

/* --- Mobile drawer: only when screen is narrow --- */

@media(max-width:1280px) {
  body.text-xlarge .mobile-toggle {
    display: inline-flex !important;
  }

  body.text-xlarge .utility-bar {
    display: none !important;
  }

  body.text-xlarge .header-actions {
    display: flex !important;
    align-items: center !important;
    margin-left: auto !important;
    width: auto !important;
    min-width: auto !important;
    padding: 0 !important;
    gap: 8px !important;
  }

  /* Drawer — must beat @media(min-width:901px) rules that have !important */

  body.text-xlarge .nav-wrap {
    position: fixed !important;
    top: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    height: 100% !important;
    max-height: 100vh !important;
    width: min(86vw, 380px) !important;
    transform: translateX(100%) !important;
    transition: transform .25s ease !important;
    z-index: 999999 !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    box-shadow: -10px 0 30px rgba(0,0,0,.18) !important;
    background: #fff !important;
    display: block !important;
    flex: none !important;
    margin-left: 0 !important;
  }

  body.text-xlarge.menu-open .nav-wrap {
    transform: translateX(0) !important;
    z-index: 999999 !important;
  }

  /* Close button — full blue-header styling */

  body.text-xlarge .drawer-close-btn {
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 16px 18px;
    background: var(--brand-blue) !important;
    border: 0;
    border-bottom: 2px solid rgba(255,255,255,.2);
    color: #fff !important;
    font: inherit;
    font-size: 1rem;
    font-weight: 700;
    cursor: pointer;
    letter-spacing: .04em;
    text-transform: uppercase;
    transition: background .15s;
  }

  body.text-xlarge .drawer-close-btn:hover,
  body.text-xlarge .drawer-close-btn:focus {
    background: #014785 !important;
    outline: none;
  }

  body.text-xlarge .drawer-close-label {
    flex: 1;
    text-align: left;
  }

  body.text-xlarge .drawer-close-x {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: rgba(255,255,255,.15);
    transition: background .15s;
    color: #fff;
  }

  body.text-xlarge .drawer-close-btn:hover .drawer-close-x,
  body.text-xlarge .drawer-close-btn:focus .drawer-close-x {
    background: rgba(255,255,255,.3);
  }

  body.text-xlarge .drawer-close-x svg {
    width: 18px;
    height: 18px;
  }

  /* Main nav — reset transforms that desktop rules inject */

  body.text-xlarge .main-nav {
    display: block !important;
    width: 100% !important;
    padding: 0 !important;
    transform: none !important;
    justify-content: flex-start !important;
    gap: 0 !important;
  }

  body.text-xlarge .nav-item {
    border-left: 0 !important;
    border-bottom: 1px solid rgba(2,86,164,.12) !important;
    position: static !important;
    box-shadow: none !important;
    outline: none !important;
  }

  body.text-xlarge .nav-link {
    display: flex !important;
    width: 100% !important;
    justify-content: space-between !important;
    align-items: center !important;
    padding: 16px 18px !important;
    color: var(--brand-blue) !important;
    border-radius: 0 !important;
    white-space: normal !important;
    font-size: 1.15rem !important;
    font-weight: 700 !important;
    box-shadow: none !important;
    outline: none !important;
  }

  body.text-xlarge .nav-link::after {
    content: '+' !important;
    display: inline !important;
    position: static !important;
    opacity: 1 !important;
    background: transparent !important;
    height: auto !important;
    pointer-events: auto !important;
    font-size: 1.4rem !important;
    font-weight: 600 !important;
    line-height: 1 !important;
    margin-left: 18px !important;
    color: var(--brand-blue) !important;
  }

  body.text-xlarge .nav-item::after {
    display: none !important;
    content: none !important;
  }

  body.text-xlarge .nav-item.mobile-open > .nav-link::after {
    content: '-' !important;
  }

  body.text-xlarge .nav-link:hover,
  body.text-xlarge .nav-item:hover > .nav-link,
  body.text-xlarge .nav-item.active > .nav-link,
  body.text-xlarge .nav-item:focus-within > .nav-link,
  body.text-xlarge .nav-link:focus {
    background: rgba(2,86,164,.07) !important;
    color: var(--brand-blue) !important;
    box-shadow: none !important;
    outline: none !important;
  }

  body.text-xlarge .nav-item:hover .mega,
  body.text-xlarge .nav-item:focus-within .mega {
    display: none !important;
  }

  body.text-xlarge .nav-item.mobile-open .mega {
    display: block !important;
  }

  body.text-xlarge .mega {
    position: static !important;
    padding: 0 0 12px !important;
  }

  body.text-xlarge .mega::before {
    display: none !important;
  }

  body.text-xlarge .mega-inner::before {
    display: none !important;
  }

  body.text-xlarge .mega-inner {
    width: 100% !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    border: 0 !important;
    background: var(--surface) !important;
    overflow-y: visible !important;
    max-height: none !important;
    transform: none !important;
    backdrop-filter: none !important;
  }

  body.text-xlarge .mega-header {
    display: none !important;
  }

  body.text-xlarge .mega-grid {
    grid-template-columns: 1fr !important;
    gap: 0 !important;
    padding: 0 !important;
  }

  body.text-xlarge .column {
    padding: 14px 18px !important;
    border-bottom: 1px solid rgba(2,86,164,.1) !important;
  }

  body.text-xlarge .column:last-child {
    border-bottom: 0 !important;
  }

  body.text-xlarge .section-link {
    color: rgba(2,86,164,.6) !important;
    font-size: 0.78rem !important;
    font-weight: 700 !important;
    letter-spacing: .08em !important;
    text-transform: uppercase !important;
    border-bottom: 1px solid rgba(2,86,164,.15) !important;
    margin-bottom: 10px !important;
    padding-bottom: 8px !important;
  }

  body.text-xlarge .section-link:hover,
  body.text-xlarge .section-link:focus {
    color: var(--brand-blue) !important;
  }

  body.text-xlarge .sub-links li {
    margin-bottom: 0;
  }

  body.text-xlarge .sub-links a {
    color: rgba(2,86,164,.8) !important;
    font-size: 0.95rem !important;
    font-weight: 500 !important;
    display: block !important;
    padding: 7px 0 !important;
    transition: color .15s;
    transform: none !important;
  }

  body.text-xlarge .sub-links a:hover,
  body.text-xlarge .sub-links a:focus {
    color: var(--brand-blue) !important;
    text-decoration: underline;
    text-decoration-skip-ink: none !important;
    text-underline-offset: 3px;
    text-decoration-thickness: 2px;
  }

  body.text-xlarge .mega-support-cta {
    display: none !important;
  }

  body.text-xlarge .mega-support-copy strong {
    color: var(--brand-blue) !important;
  }

  body.text-xlarge .mega-support-copy span {
    color: rgba(2,86,164,.7) !important;
  }

  body.text-xlarge .mega-support-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
  }

  body.text-xlarge .mega-support-primary {
    background: var(--brand-blue) !important;
    color: #fff !important;
    padding: 8px 16px;
    border-radius: 100px;
    font-weight: 700;
  }

  body.text-xlarge .mega-support-secondary {
    color: var(--brand-blue) !important;
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 2px;
  }

  /* Quick Access — override the min-width:901px hide rule */

  body.text-xlarge .drawer-quick-access {
    display: block !important;
    border-top: 1px solid rgba(2,86,164,.15);
    padding-bottom: 0;
  }

  body.text-xlarge .drawer-qa-label {
    display: none !important;
  }

  body.text-xlarge .drawer-qa-item {
    border-bottom: 1px solid rgba(2,86,164,.12) !important;
  }

  body.text-xlarge .drawer-qa-trigger {
    display: flex !important;
    align-items: center !important;
    gap: 14px !important;
    width: 100% !important;
    padding: 16px 18px !important;
    background: transparent !important;
    border: 0 !important;
    color: var(--brand-blue) !important;
    font: inherit !important;
    font-weight: 700 !important;
    text-align: left !important;
    cursor: pointer !important;
    text-transform: uppercase !important;
    letter-spacing: .045em !important;
  }

  body.text-xlarge .drawer-qa-trigger:hover,
  body.text-xlarge .drawer-qa-trigger:focus {
    background: rgba(2,86,164,.07) !important;
    outline: none !important;
  }

  body.text-xlarge .drawer-qa-item.open .drawer-qa-trigger {
    background: var(--brand-blue) !important;
    color: #fff !important;
  }

  body.text-xlarge .drawer-qa-item.open .drawer-qa-icon {
    background: #fff !important;
  }

  body.text-xlarge .drawer-qa-item.open .drawer-qa-icon svg {
    stroke: var(--brand-blue) !important;
  }

  body.text-xlarge .drawer-qa-item.open .drawer-qa-plus {
    color: #fff !important;
  }

  body.text-xlarge .drawer-qa-icon {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 38px !important;
    height: 38px !important;
    border-radius: 50% !important;
    background: var(--brand-blue) !important;
    flex-shrink: 0 !important;
  }

  body.text-xlarge .drawer-qa-icon svg {
    width: 20px !important;
    height: 20px !important;
    fill: none !important;
    stroke: #fff !important;
    stroke-width: 2 !important;
    stroke-linecap: round !important;
    stroke-linejoin: round !important;
    display: block !important;
  }

  body.text-xlarge .drawer-qa-text {
    flex: 1 !important;
  }

  body.text-xlarge .drawer-qa-plus {
    font-size: 1.4rem !important;
    font-weight: 600 !important;
    line-height: 1 !important;
    color: var(--brand-blue) !important;
    min-width: 20px !important;
    text-align: center !important;
    display: inline-block !important;
  }

  body.text-xlarge .drawer-qa-panel {
    display: none !important;
    background: #fff !important;
    padding: 22px 18px 24px !important;
    color: var(--brand-text) !important;
  }

  body.text-xlarge .drawer-qa-item.open .drawer-qa-panel {
    display: block !important;
  }

  body.text-xlarge .drawer-qa-panel h3 {
    margin: 0 0 12px !important;
    color: #111 !important;
    font-size: 1.05rem !important;
    font-weight: 600 !important;
  }

  body.text-xlarge .drawer-qa-panel .accessibility-options {
    display: flex !important;
    gap: 14px !important;
    margin-bottom: 24px !important;
    flex-wrap: wrap !important;
  }

  body.text-xlarge .drawer-qa-panel .accessibility-options button {
    display: inline-flex !important;
    align-items: center !important;
    gap: 5px !important;
    border: 0 !important;
    border-bottom: 3px solid transparent !important;
    background: transparent !important;
    color: var(--brand-blue) !important;
    padding: 0 0 6px !important;
    font: inherit !important;
    font-weight: 600 !important;
    cursor: pointer !important;
  }

  body.text-xlarge .drawer-qa-panel .accessibility-options button.active {
    border-bottom-color: var(--brand-blue) !important;
  }

  body.text-xlarge .drawer-qa-panel .accessibility-message {
    margin: 0 !important;
    color: #39434d !important;
    font-size: .95rem !important;
    line-height: 1.65 !important;
    font-weight: 400 !important;
  }

  body.text-xlarge .drawer-qa-lang-grid {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 0 !important;
  }

  body.text-xlarge .drawer-qa-lang-grid a {
    display: block !important;
    padding: 9px 10px !important;
    color: var(--brand-text) !important;
    font-weight: 600 !important;
    text-decoration: none !important;
  }

  body.text-xlarge .drawer-qa-lang-grid a:hover,
  body.text-xlarge .drawer-qa-lang-grid a:focus {
    background: var(--brand-light) !important;
    color: var(--brand-blue) !important;
  }

  /* CTA strip */

  body.text-xlarge .mobile-menu-support-cta {
    display: block !important;
    background: #f2f2f2 !important;
    border-top: 1px solid rgba(0,0,0,.08) !important;
    margin: 0 !important;
    padding: 16px 18px !important;
    border-radius: 0 !important;
  }

  body.text-xlarge .mobile-menu-support-copy strong {
    color: var(--brand-blue-dark) !important;
    display: block !important;
    margin-bottom: 5px !important;
    font-weight: 600 !important;
  }

  body.text-xlarge .mobile-menu-support-copy span {
    color: #555 !important;
    display: block !important;
    font-size: .96rem !important;
  }

  body.text-xlarge .mobile-menu-support-actions {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 8px !important;
    margin-top: 12px !important;
  }

  body.text-xlarge .mobile-menu-support-primary,
  body.text-xlarge .mobile-menu-support-secondary {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    min-height: 44px !important;
    padding: 0 16px !important;
    border-radius: calc(var(--radius) - 2px) !important;
    font-size: .98rem !important;
    font-weight: 600 !important;
    text-decoration: none !important;
  }

  body.text-xlarge .mobile-menu-support-primary {
    background: var(--brand-blue) !important;
    color: #fff !important;
    border: 1px solid var(--brand-blue) !important;
  }

  body.text-xlarge .mobile-menu-support-secondary {
    background: #fff !important;
    color: var(--brand-blue) !important;
    border: 1px solid var(--border) !important;
  }
}

/* --- Desktop nav at ≥1281px for xlarge --- */

@media(min-width:1281px) {
  body.text-xlarge .mobile-toggle {
    display: none !important;
  }

  body.text-xlarge .drawer-close-btn {
    display: none !important;
  }

  body.text-xlarge .mobile-backdrop {
    display: none !important;
  }

  body.text-xlarge .nav-wrap {
    position: static !important;
    transform: none !important;
    background: transparent !important;
    box-shadow: none !important;
    overflow: visible !important;
    width: auto !important;
    flex: 1 !important;
    display: flex !important;
    justify-content: flex-end !important;
  }

  body.text-xlarge .main-nav {
    display: flex !important;
    align-items: center !important;
    width: auto !important;
    padding: 0 !important;
  }

  body.text-xlarge .nav-item {
    position: static !important;
    border-left: 2px solid var(--border) !important;
    border-bottom: 0 !important;
  }

  body.text-xlarge .nav-item:first-child {
    border-left: 0 !important;
  }

  body.text-xlarge .nav-link {
    display: inline-flex !important;
    width: auto !important;
    justify-content: flex-start !important;
    align-items: center !important;
    padding: 14px 10px !important;
    /* 128% Header Text Scaling (1.08rem * 128 / 150 = 22.12px) */
    font-size: calc(1.08rem * (128 / 150)) !important;
    color: #000 !important;
    white-space: nowrap !important;
    border-radius: 0 !important;
  }

  body.text-xlarge .nav-link::after {
    content: none !important;
    display: none !important;
  }

  body.text-xlarge .nav-link:hover,
  body.text-xlarge .nav-item:hover > .nav-link,
  body.text-xlarge .nav-item:focus-within > .nav-link {
    background: transparent !important;
    color: var(--brand-blue) !important;
  }

  body.text-xlarge .nav-item:hover .mega,
  body.text-xlarge .nav-item:focus-within .mega,
  body.text-xlarge .nav-item.focus-open .mega {
    display: block !important;
  }

  body.text-xlarge .nav-item.mobile-open .mega {
    display: none !important;
  }

  body.text-xlarge .mega {
    position: absolute !important;
    left: 0 !important;
    right: 0 !important;
    top: 100% !important;
    padding: 0 0 24px !important;
  }

  body.text-xlarge .mega::before {
    display: block !important;
  }

  body.text-xlarge .mega-inner {
    background: var(--surface) !important;
    border: 1px solid var(--border) !important;
    border-top: 0 !important;
    border-radius: 0 0 18px 18px !important;
    box-shadow: 0 18px 45px rgba(15,45,64,.14) !important;
  }

  /* Mega-header hidden — matches Regular/Large behaviour */

  body.text-xlarge .mega-header {
    display: none !important;
  }

  body.text-xlarge .mega-grid {
    grid-template-columns: repeat(4,minmax(0,1fr)) !important;
    gap: 24px !important;
    padding: 24px !important;
  }

  body.text-xlarge .column {
    padding: 0 !important;
    border-bottom: 0 !important;
  }

  body.text-xlarge .sub-links a {
    color: #606060 !important;
    transform: none !important;
  }

  body.text-xlarge .sub-links a:hover,
  body.text-xlarge .sub-links a:focus {
    color: #0a6ed1 !important;
    text-decoration: underline !important;
    text-underline-offset: 3px !important;
    font-weight: 600 !important;
  }

  body.text-xlarge .logo img {
    width: 180px !important;
  }

  body.text-xlarge .mega-support-cta {
    display: none !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    background: #f2f2f2 !important;
    border-radius: var(--radius) !important;
    margin: 0 24px 24px !important;
    padding: 18px 20px !important;
    gap: 20px !important;
  }

  body.text-xlarge .mega-support-actions {
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 10px !important;
    flex-shrink: 0 !important;
  }

  /* Header grows with rem — reduce max-height so mega-inner never clips below viewport */

  body.text-xlarge .mega-inner {
    max-height: calc(100vh - 200px) !important;
    overflow-y: auto !important;
  }
}

/* At text-large the header is taller (rem-based) — reduce mega max-height so it
   stays fully within the viewport and the "Not finding" bar is always reachable */

@media(min-width:1281px) {
  body.text-large .mega-inner {
    max-height: calc(100vh - 190px) !important;
  }
}

/* Calendar responsive */

@media (max-width: 980px) {
  .list-view-panel {
    grid-template-columns: 1fr;
  }

  .list-sidebar {
    position: static;
  }

  .list-sidebar .category-filter-options {
    display: flex;
    flex-wrap: wrap;
  }

  .list-sidebar .category-option:nth-child(-n+2) {
    border-top: 0;
  }

  .event-card {
    grid-template-columns: 96px minmax(0,1fr);
    row-gap: 16px;
  }

  .event-tag {
    grid-column: 2;
  }
}

@media (max-width: 760px) {
  .community-event-cta-inner {
    flex-direction: column !important;
    align-items: flex-start !important;
    padding-top: 20px !important;
    padding-bottom: 20px !important;
    gap: 16px !important;
  }

  .community-event-submit {
    align-self: flex-start !important;
    width: auto !important;
  }

  .category-filter-options {
    display: grid;
    grid-template-columns: repeat(2, minmax(0,1fr));
    gap: 10px 14px;
  }

  .list-sidebar .category-filter-options {
    grid-template-columns: repeat(2, minmax(0,1fr));
    gap: 0 18px;
  }

  .category-option {
    width: 100%;
    align-items: center;
    min-height: 42px;
    font-size: .95rem;
    line-height: 1.15;
  }

  .category-swatch {
    width: 24px;
    height: 24px;
    flex: 0 0 24px;
  }

  .calendar-controls-panel {
    flex-direction: column;
    align-items: stretch;
  }

  .calendar-view-header {
    margin-left: 0;
  }

  .calendar-view-header, .view-toggle {
    width: 100%;
  }

  .view-toggle button {
    flex: 1;
  }

  .month-bar, .list-month-bar {
    gap: 10px;
    padding: 16px;
  }

  .month-nav button, .month-nav-button {
    min-width: 46px !important;
    width: 46px !important;
    max-width: 46px !important;
    height: 46px !important;
    border-radius: 50% !important;
    aspect-ratio: 1 / 1 !important;
    padding: 0 !important;
    flex: 0 0 46px !important;
  }

  .calendar-days {
    grid-template-columns: 1fr;
  }

  .calendar-weekdays {
    display: none;
  }

  .calendar-day {
    min-height: auto;
    border-right: 0;
  }

  .calendar-day.muted {
    display: none;
  }

  .event-card {
    grid-template-columns: 1fr;
    row-gap: 18px;
    padding: 28px 20px;
  }

  .event-date {
    width: 112px;
    min-height: 100px;
  }

  .event-details {
    padding-right: 0;
  }

  .event-tag {
    grid-column: auto;
    justify-self: start;
  }

  .list-sidebar .category-filter-options {
    gap: 0 14px;
  }

  .list-sidebar .category-option {
    font-size: .95rem;
    padding: 11px 0;
  }

  .list-sidebar .category-swatch {
    width: 22px;
    height: 22px;
    flex-basis: 22px;
  }
}

@media (max-width: 700px) {
  .page-hero {
    padding: 40px 0 34px;
  }
}

/* News and notices responsive */

@media (max-width: 1050px) {
  .news-layout {
    grid-template-columns: 1fr;
  }

  .news-layout .right-sidebar {
    position: static !important;
    /* On tablet/mobile, show sidebar above the filter panel in a row */
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 18px;
    order: -1;
  }

  .news-layout .right-sidebar .sidebar-subscribe-button {
    flex: 1 1 auto;
    min-width: 200px;
  }

  .news-layout .right-sidebar .filter-panel {
    flex: 1 1 100%;
  }

  .news-shell .news-card {
    grid-template-columns: 150px minmax(0,1fr);
  }
}

@media (max-width: 700px) {
  .subscribe-callout {
    grid-template-columns: 1fr;
  }

  .news-shell .news-card {
    grid-template-columns: 1fr;
  }

  .news-image {
    min-height: 140px;
  }

  .news-content {
    padding: 22px;
  }

  .news-toolbar {
    align-items: flex-start;
    flex-direction: column;
    gap: 12px;
  }

  .news-layout .right-sidebar {
    flex-direction: column;
  }

  .news-layout .right-sidebar .sidebar-subscribe-button {
    width: 100%;
  }

  .news-shell .container.news-layout {
    padding-top: 28px;
  }
}

/* Notification and alert tickers: prevent horizontal layout push */
.notif-ticker-inner,
.emergency-notice-inner {
  max-width: 100% !important;
  box-sizing: border-box !important;
  min-width: 0 !important;
}

.notif-marquee,
.toc-bnr-msg,
.emergency-marquee {
  min-width: 0 !important;
  overflow: hidden !important;
}

/* Guarantee News Detail (.post-shell), News listing (.news-shell) and all inner page components stay centered with equal left/right margins down to 250px, matching Homepage behavior */
.news-shell,
.post-shell,
.policies-shell,
.application-shell,
.event-shell,
.detail-shell,
.content-shell,
.node-news,
.news-shell .container,
.post-shell .container,
.policies-shell .container,
.application-shell .container,
.event-shell .container,
.detail-shell .container,
.content-shell .container,
.interior-hero,
.page-hero,
.news-layout,
.post-layout,
.policies-layout,
.applications-list-layout,
.news-main,
.post-card,
.post-content,
.right-sidebar,
.post-sidebar,
.filter-panel,
.sidebar-card,
.cu-card,
.contact-us-card,
.news-card,
.news-pagination-bar,
.post-shell form,
.news-shell form,
.post-shell .fg,
.news-shell .fg,
.input-icon-wrap,
input,
select,
button {
  max-width: 100% !important;
  box-sizing: border-box !important;
  min-width: 0 !important;
}

@media (max-width: 480px) {
  .container,
  .caledon-search-form,
  .caledon-search-powered,
  .header-search-form,
  .header-search-meta {
    width: calc(100% - 24px) !important;
    margin-left: auto !important;
    margin-right: auto !important;
    box-sizing: border-box !important;
  }

  .right-sidebar,
  .post-sidebar {
    width: 100% !important;
  }

  .filter-panel,
  .sidebar-card,
  .cu-card,
  .contact-us-card {
    width: 100% !important;
  }

  .subscribe-top-button,
  .sidebar-subscribe-button {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    min-height: 44px !important;
    padding: 10px 14px !important;
    visibility: visible !important;
    opacity: 1 !important;
    min-width: 0 !important;
  }

  .subscribe-top-button span,
  .sidebar-subscribe-button span {
    white-space: normal !important;
    word-break: break-word !important;
    overflow-wrap: break-word !important;
    min-width: 0 !important;
    flex-shrink: 1 !important;
    text-align: center !important;
  }

  .subscribe-top-button svg,
  .sidebar-subscribe-button svg {
    flex-shrink: 0 !important;
    margin-left: 8px !important;
  }

  .filter-header {
    padding: 16px 14px 0 !important;
  }

  .filter-body {
    padding: 0 14px 16px !important;
  }
}

@media (max-width: 395px) {
  .container,
  .caledon-search-form,
  .caledon-search-powered,
  .header-search-form,
  .header-search-meta {
    width: calc(100% - 20px) !important;
    margin-left: auto !important;
    margin-right: auto !important;
    box-sizing: border-box !important;
  }

  .filter-header h2 {
    font-size: 1.15rem !important;
  }

  .filter-header {
    padding: 14px 12px 0 !important;
  }

  .filter-body {
    padding: 0 12px 14px !important;
  }
}

@media (max-width: 1050px) {
  .post-layout {
    grid-template-columns: 1fr;
  }

  .post-sidebar {
    position: static;
  }
}

@media (max-width: 700px) {
  .post-shell {
    padding: 30px 0 58px;
  }
}

@media (max-width: 520px) {
  .subscribe-modal-backdrop {
    padding: 12px;
    align-items: start;
    padding-top: 20px;
  }

  .subscribe-modal {
    width: 100%;
  }

  .subscribe-modal-header, .subscribe-modal-body {
    padding: 16px;
  }

  .subscribe-modal-header h2 {
    font-size: 1.12rem;
  }

  .subscribe-modal-actions {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 980px) {
  .applications-list-layout {
    display: flex;
    flex-direction: column;
    gap: 28px;
  }

  .applications-filter-sidebar {
    order: -1;
    position: static;
    max-width: 100%;
  }

  .application-list-wrap {
    order: 2;
  }

  .applications-main-col {
    gap: 28px;
  }

  .process-grid {
    grid-template-columns: 1fr;
  }

  .results-header {
    align-items: flex-start;
    flex-direction: column;
  }

  .application-card {
    grid-template-columns: 1fr;
  }

  .application-action {
    align-self: start;
  }
}

@media (max-width: 760px) {
  .application-map-iframe {
    height: 460px;
    min-height: 460px;
  }

  .application-action.button, .application-action.btn {
    width: 100%;
    text-align: center;
  }
}

@media (max-width: 980px) {
  .detail-layout {
    grid-template-columns: 1fr;
  }

  .sidebar {
    position: static;
  }
}

@media (max-width: 760px) {
  .detail-shell {
    padding: 34px 0 58px;
  }
}

@media (max-width: 1050px) {
  .event-layout {
    grid-template-columns: 1fr;
  }

  .event-main {
    order: 1;
  }

  .event-sidebar {
    position: static;
    order: 2;
  }

  .event-details-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 700px) {
  .event-hero {
    padding: 36px 0 30px;
  }

  .event-shell {
    padding: 30px 0 58px;
  }

  .event-intro-card {
    padding: 22px;
  }

  .event-actions {
    display: grid;
  }

  .event-actions .button, .event-actions .btn {
    width: 100%;
  }

  .event-content-section li {
    font-size: 1.1rem;
    line-height: 1.58;
  }
}

@media (max-width: 760px) {
  .facilities-map-iframe {
    min-height: 420px;
  }
}

/* Responsive pagination on mobile (under 600px) */

@media (max-width: 600px) {
  .pagination {
    justify-content: center;
    gap: 6px;
    flex-wrap: nowrap !important;
  }

  .pagination .pg-text {
    display: none !important;
  }

  .pg-item {
    min-width: 40px !important;
    padding: 0 !important;
  }
}


@media (max-width: 720px) {
  .views-exposed-form {
    max-width: 100%;
  }
}

@media (max-width: 720px) {
  .policies-search-wrap {
    max-width: 100%;
  }
}

@media (max-width: 680px) {
  .policy-meta {
    grid-template-columns: 80px 1fr;
  }
}

@media (max-width: 1300px) {
  .bucket-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 760px) {
  .sitemap-note {
    grid-template-columns: 1fr;
  }

  .bucket-grid {
    grid-template-columns: 1fr;
  }

  .section-card {
    padding-bottom: 24px;
  }

  .sitemap-hero-row {
    display: block;
  }

  .sitemap-hero-row .sitemap-controls {
    justify-content: flex-start;
    margin-top: 20px;
  }
}

@media (max-width: 680px) {
  .sitemap-controls {
    flex-direction: column;
  }

  .sitemap-control-button {
    width: 100%;
  }
}

@media (max-width: 1050px) {
  .content-main {
    min-height: 0;
  }

  .right-sidebar {
    position: static !important;
  }
}

@media (max-width: 650px) {
  .contact-grid {
    grid-template-columns: 1fr;
  }
}

/* Responsive Facility Card */

@media (max-width: 850px) {
  .facility-card {
    grid-template-columns: 180px minmax(0, 1fr);
  }
}

@media (max-width: 600px) {
  .facility-card {
    grid-template-columns: 1fr;
    gap: 0;
  }

  .facility-card-image {
    height: 160px;
    min-height: auto;
  }

  .facility-card-content {
    padding: 20px;
  }
}

/* ── By-Laws & Policies: Mobile & Tablet Responsive Layout ──
   Moves the Search filter box to the VERY TOP of the page on mobile and tablet screens (<= 1050px)
   (above the Document Results List and above the Pagination). ── */

@media (max-width: 1050px) {
  .policies-layout {
    display: flex !important;
    flex-direction: column !important;
  }

  .policies-layout .right-sidebar {
    display: contents !important;
  }

  .policies-layout .filter-panel {
    order: -2 !important;
    margin-bottom: 24px !important;
    width: 100% !important;
  }

  .policies-layout .policies-main {
    order: -1 !important;
    width: 100% !important;
  }

  .policies-layout .cu-card,
  .policies-layout .right-sidebar .sidebar-card {
    order: 1 !important;
    margin-top: 24px !important;
    width: 100% !important;
  }
}

@media (max-width: 600px) {
  /* Hide redundant 'Last >>' / 'First <<' text link on narrow mobile screens so all numbers fit cleanly in 1 line */

  .policies-pagination-bar .pager__item--last,
  .policies-pagination-bar .pager__item--first,
  ul.pager__items .pager__item--last,
  ul.pager__items .pager__item--first {
    display: none !important;
  }

  .policies-pagination-bar .pager__item a,
  .policies-pagination-bar .pager__item span,
  ul.pager__items .pager__item a,
  ul.pager__items .pager__item span {
    padding: 0 6px !important;
    min-width: 32px !important;
    height: 32px !important;
    line-height: 1 !important;
    font-size: 0.85rem !important;
  }
}

@media (max-width: 420px) {
  .policies-pagination-bar .pager__items,
  ul.pager__items {
    gap: 4px !important;
    overflow-x: hidden !important;
  }

  /* On small mobile screens (<= 420px), hide extra page numbers 4 & 5 so 3 page numbers + ellipsis fit with ZERO overflow */

  .policies-pagination-bar .pager__item:nth-child(6):not(.pager__item--next):not(.pager__item--previous):not(.pager__item--ellipsis),
  .policies-pagination-bar .pager__item:nth-child(7):not(.pager__item--next):not(.pager__item--previous):not(.pager__item--ellipsis),
  ul.pager__items .pager__item:nth-child(6):not(.pager__item--next):not(.pager__item--previous):not(.pager__item--ellipsis),
  ul.pager__items .pager__item:nth-child(7):not(.pager__item--next):not(.pager__item--previous):not(.pager__item--ellipsis) {
    display: none !important;
  }
}

@media(max-width:600px) {
  .node-development-application-new .content-edit-btn {
    top: 0;
    right: 0;
    padding: 0 14px;
    font-size: .8rem;
  }

  .node-development-application-new .content-edit-btn__label {
    display: none;
  }
}

@media (max-width: 900px) {
  .event-detail-page .ed-layout {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 600px) {
  .event-detail-page .ed-card {
    padding: 16px 18px;
  }

  .event-detail-page .ed-datetime-card {
    flex-direction: column;
    align-items: flex-start;
  }

  .event-detail-page .ed-add-calendar-btn {
    width: 100%;
    justify-content: center;
  }
}

@media(max-width:900px) {
  .node-landing-page .content-main .existing-card-grid {
    grid-template-columns: repeat(2,1fr)!important;
  }
}

@media(max-width:600px) {
  .node-landing-page .content-main .existing-card-grid {
    grid-template-columns: 1fr!important;
  }
}

@media(max-width:600px) {
  .node-news .content-edit-btn {
    padding: 0 14px;
    font-size: .8rem;
  }
}

@media(max-width:600px) {
  .node-typical-page-2 .content-main {
    padding-top: 0;
  }

  .node-typical-page-2 .content-edit-btn {
    top: 0;
    right: 0;
    padding: 0 14px;
    font-size: .8rem;
  }

  .node-typical-page-2 .content-edit-btn__label {
    display: none;
  }
}

@media(max-width:640px) {
  .node-typical-page .two-col-layout {
    flex-direction: column;
  }

  .node-typical-page .two-col-left,
  .node-typical-page .two-col-right {
    min-width: 100%!important;
    flex: 1 1 100%!important;
  }
}

.node-typical-page .paragraph--type--rich-text,
.node-typical-page .paragraph--type--section-heading,
.node-typical-page .paragraph--type--cta-button,
.node-typical-page .paragraph--type--divider,
.node-typical-page .paragraph--type--image-block,
.node-typical-page .paragraph--type--banner {
  margin: 0;
  padding: 0;
}
.node-typical-page .field--name-field-accordion-content .field__label,
.node-typical-page .field--name-field-body .field__label,
.node-typical-page .field--name-field-highlight-content .field__label,
.node-typical-page .field--name-field-disclaimer-text .field__label {
  display: none;
}
.node-typical-page .content-main .field--name-body {
  display: none!important;
}
.node-typical-page .page-banner {
  width: 100%;
  min-height: 220px;
  background-color: var(--brand-blue,#1a5ea8);
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  position: relative;
}
.node-typical-page .quick-links-sidebar-card {
  background: #fff;
  border: 1px solid #e0e0e0;
  border-radius: var(--radius,6px);
  padding: 20px 20px 16px;
  margin-bottom: 20px;
}
.node-typical-page .quick-links-sidebar-card h2 {
  font-size: 1rem;
  font-weight: 700;
  color: var(--brand-blue,#1a5ea8);
  margin: 0 0 12px;
  padding-bottom: 10px;
  border-bottom: 2px solid var(--brand-blue,#1a5ea8);
}
.node-typical-page .quick-links-sidebar-card ul,
.node-typical-page .quick-links-sidebar-card .menu {
  list-style: none;
  margin: 0;
  padding: 0;
}
.node-typical-page .quick-links-sidebar-card ul li,
.node-typical-page .quick-links-sidebar-card .menu li {
  border-bottom: 1px solid #f0f0f0;
}
.node-typical-page .quick-links-sidebar-card ul li:last-child,
.node-typical-page .quick-links-sidebar-card .menu li:last-child {
  border-bottom: none;
}
.node-typical-page .quick-links-sidebar-card ul li a,
.node-typical-page .quick-links-sidebar-card .menu li a {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 4px;
  color: #1a1a1a;
  font-size: .9rem;
  text-decoration: none;
  transition: color .15s;
}
.node-typical-page .quick-links-sidebar-card ul li a::before,
.node-typical-page .quick-links-sidebar-card .menu li a::before {
  content: '';
  display: inline-block;
  width: 6px;
  height: 6px;
  border-top: 2px solid var(--brand-blue,#1a5ea8);
  border-right: 2px solid var(--brand-blue,#1a5ea8);
  transform: rotate(45deg);
  flex-shrink: 0;
}
.node-typical-page .quick-links-sidebar-card ul li a:hover,
.node-typical-page .quick-links-sidebar-card .menu li a:hover {
  color: var(--brand-blue,#1a5ea8);
  text-decoration: underline;
}
.node-typical-page .quick-links-sidebar-card .menu li.menu-item--active-trail>a,
.node-typical-page .quick-links-sidebar-card ul li a.is-active {
  color: var(--brand-blue,#1a5ea8);
  font-weight: 600;
}

.node-typical-page .page-banner-wrap {
  position: relative;
}
.node-typical-page .page-banner-edit-btn {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 10;
  display: flex;
  align-items: center;
  gap: 6px;
}
.node-typical-page .page-banner-edit-btn a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(255,255,255,0.92);
  color: var(--brand-blue, #1a5ea8);
  border: 1.5px solid var(--brand-blue, #1a5ea8);
  border-radius: 6px;
  padding: 6px 14px;
  font-size: 0.8rem;
  font-weight: 700;
  text-decoration: none;
  backdrop-filter: blur(4px);
  transition: background 0.15s, color 0.15s;
  line-height: 1;
}
.node-typical-page .page-banner-edit-btn a:hover {
  background: var(--brand-blue, #1a5ea8);
  color: #fff;
  text-decoration: none;
}
.node-typical-page .page-banner-edit-btn a svg {
  width: 13px;
  height: 13px;
  flex-shrink: 0;
}

/* ── Paragraph: Custom Embed (paragraph--custom-embed.html.twig) ── */
.paragraph--type--custom-embed .custom-embed-wrapper {
  width: 100%;
  margin: 0 0 28px;
  position: relative;
}
.paragraph--type--custom-embed .custom-embed-wrapper iframe {
  width: 100% !important;
  border: 0;
  display: block;
  min-height: 700px;
}
.paragraph--type--custom-embed .embed-placeholder {
  display: none;
  width: 100%;
  min-height: 500px;
  background: #f4f7fb;
  border: 2px dashed #c5d8ef;
  border-radius: var(--radius, 6px);
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 40px 24px;
  box-sizing: border-box;
  gap: 16px;
}
.paragraph--type--custom-embed .embed-placeholder svg {
  color: #aabdd4;
  flex-shrink: 0;
}
.paragraph--type--custom-embed .embed-placeholder h3 {
  margin: 0;
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--brand-blue-dark, #154d8e);
}
.paragraph--type--custom-embed .embed-placeholder p {
  margin: 4px 0 0;
  font-size: .88rem;
  color: #666;
  max-width: 420px;
  line-height: 1.55;
}
.paragraph--type--custom-embed .embed-placeholder .embed-open-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
  padding: 10px 22px;
  background: var(--brand-blue, #1a5ea8);
  color: #fff !important;
  font-size: .9rem;
  font-weight: 600;
  border-radius: var(--radius, 4px);
  text-decoration: none !important;
  transition: background .2s;
}
.paragraph--type--custom-embed .embed-placeholder .embed-open-btn:hover {
  background: var(--brand-blue-dark, #154d8e);
}
.paragraph--type--custom-embed .embed-placeholder .embed-dev-tag {
  font-size: .75rem;
  color: #999;
  margin-top: 4px;
}

/* ── Paragraph: Data Table (paragraph--data-table.html.twig) ── */
.data-table-paragraph .table-wrapper {
  overflow-x: auto;
}
.data-table-paragraph table {
  width: 100%;
  border-collapse: collapse;
  font-size: .9rem;
  line-height: 1.45;
  background: #fff;
}
.data-table-paragraph table tbody tr:first-child td,
.data-table-paragraph table thead th,
.data-table-paragraph table thead td {
  background: var(--brand-blue,#1a5ea8);
  color: #fff;
  font-weight: 700;
  padding: 11px 14px;
  border: 1px solid var(--brand-blue,#1a5ea8);
  text-align: left;
  vertical-align: middle;
}

.data-table-paragraph table thead th *,
.data-table-paragraph table thead td * {
  color: #fff !important;
}
.data-table-paragraph table tbody tr td {
  padding: 10px 14px;
  border: 1px solid #dde3ed;
  vertical-align: top;
  color: #1a1a1a;
}
.data-table-paragraph table tbody tr:nth-child(even) td {
  background: #f0f5fb;
}
.data-table-paragraph table tbody tr:nth-child(odd):not(:first-child) td {
  background: #fff;
}
.data-table-paragraph table tbody tr:not(:first-child):hover td {
  background: #e4edf8;
}
.data-table-paragraph .table-caption {
  font-size: .88rem;
  color: #555;
  margin-bottom: 6px;
}
.data-table-paragraph table .TextRun,
.data-table-paragraph table [class^="SCXW"],
.data-table-paragraph table [class^="BCX"] {
  font-family: inherit !important;
  font-size: inherit !important;
  color: inherit !important;
}
.table-wrapper--compact table tbody tr td,
.table-wrapper--compact table tbody tr:first-child td {
  padding: 7px 10px;
  font-size: .85rem;
}

/* ── Paragraph: Highlight Box (paragraph--highlight-box.html.twig) ── */
.highlight-box {
  margin: 0 0 28px !important;
}
.highlight-box-inner {
  padding: 24px 28px;
  border-radius: var(--radius, 6px);
}
.highlight-box-inner h2,
.highlight-box-inner h3,
.highlight-box-inner h4,
.highlight-box-inner h5 {
  margin: 0 0 10px;
  color: var(--brand-blue-dark, #154d8e);
  font-size: 1.15rem;
  font-weight: 700;
  line-height: 1.3;
}
.highlight-box-inner h5 {
  font-size: 1rem;
}
.highlight-box-inner p {
  margin: 0 0 10px;
  font-size: .92rem;
  line-height: 1.6;
}
.highlight-box-inner p:last-child {
  margin-bottom: 0;
}
.highlight-box-inner .cta-button-row,
.highlight-box-inner .button-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 18px;
}
.highlight-box-inner .btn-p,
.highlight-box-inner .btn-s,
.highlight-box-inner .cta-button-row a,
.highlight-box-inner .button-row a {
  display: inline-block;
  padding: 9px 18px;
  background: var(--brand-blue, #1a5ea8) !important;
  color: #fff !important;
  font-size: .88rem;
  font-weight: 600;
  border-radius: var(--radius, 4px);
  text-decoration: none !important;
  line-height: 1.4;
  white-space: nowrap;
  transition: background .2s;
  border: none;
  cursor: pointer;
}
.highlight-box-inner .btn-p:hover,
.highlight-box-inner .btn-s:hover,
.highlight-box-inner .cta-button-row a:hover,
.highlight-box-inner .button-row a:hover {
  background: var(--brand-blue-dark, #154d8e) !important;
  color: #fff !important;
}
.highlight-box-inner .TextRun,
.highlight-box-inner [class^="SCXW"],
.highlight-box-inner [class^="BCX"] {
  font-family: inherit !important;
  font-size: inherit !important;
  color: inherit !important;
}

/* ── Paragraph: Quick Links Bar (paragraph--quick-links-bar.html.twig) ── */
.quick-links-bar-inner {
  background: var(--brand-light, #edf4e6);
  border: 1px solid #c8dcb0;
  border-radius: var(--radius, 6px);
  padding: 18px 22px;
  margin: 0 0 28px;
}
.quick-links-bar-inner .ql-label {
  display: block;
  margin-bottom: 12px;
  color: var(--brand-blue-dark, #154d8e);
  font-size: 1rem;
  font-weight: 700;
}
.quick-links-bar-inner .ql-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.quick-links-bar-inner .btn-ql {
  display: inline-block;
  padding: 9px 18px;
  background: var(--brand-blue, #1a5ea8);
  color: #fff !important;
  font-size: .88rem;
  font-weight: 600;
  border-radius: var(--radius, 4px);
  text-decoration: none;
  line-height: 1.4;
  white-space: nowrap;
  transition: background .2s;
  cursor: pointer;
  border: none;
}
.quick-links-bar-inner .btn-ql:hover {
  background: var(--brand-blue-dark, #154d8e);
  color: #fff !important;
  text-decoration: none;
}
.quick-links-bar-inner .link-ql {
  display: inline-block;
  color: var(--brand-blue, #1a5ea8);
  font-size: .9rem;
  text-decoration: none;
  padding: 4px 0;
  border-bottom: 1px solid transparent;
  transition: border-color .15s;
}
.quick-links-bar-inner .link-ql:hover {
  border-bottom-color: var(--brand-blue, #1a5ea8);
}
.quick-links-bar-inner .pill-ql {
  display: inline-block;
  padding: 6px 16px;
  background: #e8f0fb;
  color: var(--brand-blue, #1a5ea8);
  font-size: .88rem;
  font-weight: 600;
  border-radius: 20px;
  text-decoration: none;
  transition: background .2s, color .2s;
  white-space: nowrap;
}
.quick-links-bar-inner .pill-ql:hover {
  background: var(--brand-blue, #1a5ea8);
  color: #fff;
}
.quick-links-bar nav.ql-plain {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin: 20px 0;
  border-bottom: 2px solid #e8e8e8;
  padding-bottom: 16px;
}

/* ── View: Current Development Applications (views-view--current-development-applications--page-1.html.twig) ── */
.development-applications-banner {
  width: 100%;
  min-height: 220px;
  background-color: var(--brand-blue,#1a5ea8);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  position: relative;
}
.development-applications-banner .hero-banner-edit-btn {
  position: absolute;
  top: 16px;
  right: 16px;
  z-index: 5;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 11px 20px 11px 16px;
  border-radius: 999px;
  background: var(--brand-blue,#1a5ea8);
  color: #fff!important;
  font-size: .9rem;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
  box-shadow: 0 4px 14px rgba(0,0,0,.3),0 2px 4px rgba(0,0,0,.18);
  text-decoration: none;
  forced-color-adjust: none;
  transition: background .15s ease,transform .15s ease,box-shadow .15s ease;
}
.development-applications-banner .hero-banner-edit-btn:hover,
.development-applications-banner .hero-banner-edit-btn:focus {
  background: var(--brand-blue-dark,#154d8e);
  color: #fff!important;
  text-decoration: none;
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(0,0,0,.35),0 3px 6px rgba(0,0,0,.2);
}
.development-applications-banner .hero-banner-edit-btn svg {
  width: 16px;
  height: 16px;
  fill: currentColor;
  stroke: none;
  flex-shrink: 0;
}

/* --- Highlight boxes / Emphasis blocks (Blue and Green) --- */
p.emphasis-Primary,
h2.emphasis-Primary,
h3.emphasis-Primary,
h4.emphasis-Primary,
div.emphasis-Primary,
.emphasis-Primary,
p.highlight-box-blue {
  background: #ebf3f8 !important;
  border-left: 4px solid var(--brand-blue) !important;
  padding: 14px 16px !important;
  margin: 0 0 14px !important;
  font-weight: 600 !important;
  color: var(--brand-blue) !important;
  border-radius: 0 var(--radius) var(--radius) 0 !important;
  display: block !important;
  overflow-wrap: break-word !important;
  word-break: break-word !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

p.emphasis-Secondary,
h2.emphasis-Secondary,
h3.emphasis-Secondary,
h4.emphasis-Secondary,
div.emphasis-Secondary,
.emphasis-Secondary,
p.highlight-box-green {
  background: #f6ffe4 !important;
  border-left: 4px solid #477000 !important;
  padding: 14px 16px !important;
  margin: 0 0 14px !important;
  color: #1b3800 !important;
  border-radius: 0 var(--radius) var(--radius) 0 !important;
  display: block !important;
  overflow-wrap: break-word !important;
  word-break: break-word !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

p.emphasis-Tertiary,
h2.emphasis-Tertiary,
h3.emphasis-Tertiary,
h4.emphasis-Tertiary,
div.emphasis-Tertiary,
.emphasis-Tertiary {
  background: #f2f2f2 !important;
  border-left: 4px solid #aaa !important;
  padding: 14px 16px !important;
  margin: 0 0 14px !important;
  font-weight: 700 !important;
  color: #1e293b !important;
  border-radius: 0 var(--radius) var(--radius) 0 !important;
  display: block !important;
  overflow-wrap: break-word !important;
  word-break: break-word !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

/* Paragraphs in emphasis blocks */
p.emphasis-Primary,
p.emphasis-Secondary,
p.emphasis-Tertiary,
p.highlight-box-blue,
p.highlight-box-green,
div.emphasis-Primary p,
div.emphasis-Secondary p,
div.emphasis-Tertiary p {
  font-family: var(--font-primary) !important;
  font-size: 1.125rem !important;
  line-height: 1.6875rem !important;
}

/* Headings in emphasis blocks: keep original heading font size, apply proportional line height */
h1.emphasis-Primary, h2.emphasis-Primary, h3.emphasis-Primary, h4.emphasis-Primary, h5.emphasis-Primary, h6.emphasis-Primary,
h1.emphasis-Secondary, h2.emphasis-Secondary, h3.emphasis-Secondary, h4.emphasis-Secondary, h5.emphasis-Secondary, h6.emphasis-Secondary,
h1.emphasis-Tertiary, h2.emphasis-Tertiary, h3.emphasis-Tertiary, h4.emphasis-Tertiary, h5.emphasis-Tertiary, h6.emphasis-Tertiary,
div.emphasis-Primary h1, div.emphasis-Primary h2, div.emphasis-Primary h3, div.emphasis-Primary h4, div.emphasis-Primary h5, div.emphasis-Primary h6,
div.emphasis-Secondary h1, div.emphasis-Secondary h2, div.emphasis-Secondary h3, div.emphasis-Secondary h4, div.emphasis-Secondary h5, div.emphasis-Secondary h6,
div.emphasis-Tertiary h1, div.emphasis-Tertiary h2, div.emphasis-Tertiary h3, div.emphasis-Tertiary h4, div.emphasis-Tertiary h5, div.emphasis-Tertiary h6 {
  font-family: var(--font-primary) !important;
  line-height: 1.35 !important;
}

/* Container divs / generic blocks default line height */
div.emphasis-Primary,
div.emphasis-Secondary,
div.emphasis-Tertiary,
.emphasis-Primary:not(h1):not(h2):not(h3):not(h4):not(h5):not(h6),
.emphasis-Secondary:not(h1):not(h2):not(h3):not(h4):not(h5):not(h6),
.emphasis-Tertiary:not(h1):not(h2):not(h3):not(h4):not(h5):not(h6) {
  font-family: var(--font-primary) !important;
  line-height: 1.6875rem !important;
}

/* Div container box internal paragraphs */
div.emphasis-Primary p,
div.emphasis-Secondary p,
div.emphasis-Tertiary p {
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  margin: 0 0 10px !important;
  color: inherit !important;
}
div.emphasis-Primary p:last-child,
div.emphasis-Secondary p:last-child,
div.emphasis-Tertiary p:last-child {
  margin-bottom: 0 !important;
}
div.emphasis-Primary ul, div.emphasis-Primary ol,
div.emphasis-Secondary ul, div.emphasis-Secondary ol,
div.emphasis-Tertiary ul, div.emphasis-Tertiary ol {
  color: inherit !important;
  margin: 0 0 12px 20px !important;
}

/* Strip unwanted pasted background colors from copied content inside emphasis/highlight */
.emphasis-Primary *:not(.btn):not(.btn-p):not(.btn-s):not(.button):not([class*="btn-"]),
.emphasis-Secondary *:not(.btn):not(.btn-p):not(.btn-s):not(.button):not([class*="btn-"]),
.emphasis-Tertiary *:not(.btn):not(.btn-p):not(.btn-s):not(.button):not([class*="btn-"]),
.highlight-info *:not(.btn):not(.btn-p):not(.btn-s):not(.button):not([class*="btn-"]),
.highlight-warning *:not(.btn):not(.btn-p):not(.btn-s):not(.button):not([class*="btn-"]),
.highlight-success *:not(.btn):not(.btn-p):not(.btn-s):not(.button):not([class*="btn-"]) {
  background: transparent !important;
  background-color: transparent !important;
}

/* Seamless collapse for adjacent multi-line emphasis paragraphs */
p.emphasis-Secondary + p.emphasis-Secondary,
h2.emphasis-Secondary + p.emphasis-Secondary,
h3.emphasis-Secondary + p.emphasis-Secondary,
h4.emphasis-Secondary + p.emphasis-Secondary,
.emphasis-Secondary + .emphasis-Secondary {
  margin-top: -14px !important;
  border-top-left-radius: 0 !important;
  border-top-right-radius: 0 !important;
  padding-top: 4px !important;
}
p.emphasis-Secondary:has(+ p.emphasis-Secondary),
p.emphasis-Secondary:has(+ h2.emphasis-Secondary),
p.emphasis-Secondary:has(+ h3.emphasis-Secondary),
p.emphasis-Secondary:has(+ h4.emphasis-Secondary),
.emphasis-Secondary:has(+ .emphasis-Secondary) {
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  margin-bottom: 0 !important;
  padding-bottom: 4px !important;
}

p.emphasis-Primary + p.emphasis-Primary,
h2.emphasis-Primary + p.emphasis-Primary,
h3.emphasis-Primary + p.emphasis-Primary,
h4.emphasis-Primary + p.emphasis-Primary,
.emphasis-Primary + .emphasis-Primary {
  margin-top: -14px !important;
  border-top-left-radius: 0 !important;
  border-top-right-radius: 0 !important;
  padding-top: 4px !important;
}
p.emphasis-Primary:has(+ p.emphasis-Primary),
p.emphasis-Primary:has(+ h2.emphasis-Primary),
p.emphasis-Primary:has(+ h3.emphasis-Primary),
p.emphasis-Primary:has(+ h4.emphasis-Primary),
.emphasis-Primary:has(+ .emphasis-Primary) {
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  margin-bottom: 0 !important;
  padding-bottom: 4px !important;
}

p.emphasis-Tertiary + p.emphasis-Tertiary,
h2.emphasis-Tertiary + p.emphasis-Tertiary,
h3.emphasis-Tertiary + p.emphasis-Tertiary,
h4.emphasis-Tertiary + p.emphasis-Tertiary,
.emphasis-Tertiary + .emphasis-Tertiary {
  margin-top: -14px !important;
  border-top-left-radius: 0 !important;
  border-top-right-radius: 0 !important;
  padding-top: 4px !important;
}
p.emphasis-Tertiary:has(+ p.emphasis-Tertiary),
p.emphasis-Tertiary:has(+ h2.emphasis-Tertiary),
p.emphasis-Tertiary:has(+ h3.emphasis-Tertiary),
p.emphasis-Tertiary:has(+ h4.emphasis-Tertiary),
.emphasis-Tertiary:has(+ .emphasis-Tertiary) {
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  margin-bottom: 0 !important;
  padding-bottom: 4px !important;
}

/* Ensure emphasis blocks inside columns keep exact background colors */
.advanced-column .emphasis-Secondary {
  background: #f6ffe4 !important;
  border-left: 4px solid #477000 !important;
  color: #1b3800 !important;
}
.advanced-column .emphasis-Primary {
  background: #ebf3f8 !important;
  border-left: 4px solid var(--brand-blue) !important;
  color: var(--brand-blue) !important;
}
.advanced-column .emphasis-Tertiary {
  background: #f2f2f2 !important;
  border-left: 4px solid #aaa !important;
  color: #1e293b !important;
}

/* When a container is inside an Emphasis or Highlight box */
div.emphasis-Secondary .advanced-container,
div.emphasis-Primary .advanced-container,
div.emphasis-Tertiary .advanced-container,
div.highlight-info .advanced-container,
div.highlight-warning .advanced-container,
div.highlight-success .advanced-container {
  background-color: transparent !important;
  border: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

div.emphasis-Secondary .advanced-column,
div.emphasis-Primary .advanced-column,
div.emphasis-Tertiary .advanced-column,
div.highlight-info .advanced-column,
div.highlight-warning .advanced-column,
div.highlight-success .advanced-column {
  background-color: transparent !important;
  color: inherit !important;
}

/* Fix Cludo CSS overriding form margins and breaking centering */
form.search-panel,
form.header-search-inner,
.cludo-search-form {
  margin: 0 auto !important;
  z-index: 10 !important;
  position: relative !important; /* Establishes positioning context for autocomplete */
}

/* General wrapper styling for Cludo autocomplete dropdown */
.cludo-search_autocomplete {
  z-index: 20 !important;
}

/* Premium aesthetics for Cludo suggestions box - aligned strictly to bottom of input fields */
.cludo-search_autocomplete .search_autocomplete {
  position: absolute !important;
  top: 75px !important; /* Pushes the dropdown exactly below the search inputs (no overlap/gap) */
  left: 0 !important;
  right: 0 !important;
  background-color: #ffffff !important;
  border: 1px solid #ccd6df !important;
  border-top: 0 !important; /* Joint design connecting seamlessly with the input field */
  border-radius: 0 0 8px 8px !important; /* Curved bottom corners only for a jointed dropdown card */
  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.08), 0 8px 10px -6px rgba(0, 0, 0, 0.03) !important;
  overflow: hidden !important;
  width: 100% !important; /* Matches wrapper width exactly */
  z-index: 9999999 !important;
}

/* Autocomplete Header Styling */
.cludo-search_autocomplete .search_autocomplete h3 {
  background-color: #f8fafc !important;
  color: #475569 !important;
  font-size: 0.75rem !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
  padding: 10px 16px !important;
  margin: 0 !important;
  border-bottom: 1px solid #e2e8f0 !important;
}

/* Suggestion Items */
.cludo-search_autocomplete .search_autocomplete li {
  padding: 12px 16px !important;
  background-color: #ffffff !important;
  border-bottom: 1px solid #f1f5f9 !important;
  transition: background-color 0.2s ease, padding-left 0.2s ease !important;
}

.cludo-search_autocomplete .search_autocomplete li:last-child {
  border-bottom: 0 !important;
}

/* Suggestion Hover & Active Styles - Brand Blue highlight with white text */
.cludo-search_autocomplete .search_autocomplete li:hover,
.cludo-search_autocomplete .search_autocomplete li.active {
  background-color: var(--brand-blue-dark, #02345e) !important; /* Brand-aligned dark blue highlight background */
  padding-left: 20px !important; /* Micro-interaction slide effect */
}

.cludo-search_autocomplete .search_autocomplete li a {
  color: #334155 !important;
  font-size: 0.95rem !important;
  font-weight: 500 !important;
  text-decoration: none !important;
  display: block !important;
  width: 100% !important;
}

.cludo-search_autocomplete .search_autocomplete li:hover a,
.cludo-search_autocomplete .search_autocomplete li.active a {
  color: #ffffff !important; /* Text turns white on hover/active highlight */
}

/* Autocomplete Bold Match Highlighting */
.cludo-search_autocomplete .search_autocomplete li b {
  color: #0066cc !important;
  font-weight: 700 !important;
  transition: color 0.2s ease !important;
}

.cludo-search_autocomplete .search_autocomplete li:hover b,
.cludo-search_autocomplete .search_autocomplete li.active b {
  color: #ffffff !important; /* Bold matched letters also turn white on hover/active highlight */
}

/* Responsive Autocomplete Adjustments */

@media (max-width: 680px) {
  .cludo-search_autocomplete .search_autocomplete {
    top: 62px !important;
    /* Positioned exactly touching the bottom of the stacked mobile input */
    left: 10px !important;
    /* Match left padding of search container input */
    right: 10px !important;
    /* Match right padding of search container input */
    width: auto !important;
  }
}

/* Responsive Styles for Results Modal to prevent overflow/cutoff on smaller viewports */

@media (max-width: 940px) {
  #cludo-search-results .cludo-search-modal-body {
    width: 766px !important;
    margin-left: -383px !important;
  }
}

@media (max-width: 767px) {
  #cludo-search-results .cludo-search-modal-body {
    width: 100% !important;
    margin-left: 0 !important;
    left: 0 !important;
    top: 82px !important;
    height: auto !important;
    bottom: 0 !important;
    padding: 20px !important;
  }
}

/* =================================================================
   TEXT SIZE: LARGE (125%) — mobile drawer only on ≤1280px.
   Desktop (≥1281px) keeps the full nav with compact sizing.
   ================================================================= */

/* --- Mobile drawer: only when screen is narrow --- */

@media(max-width:1280px) {
  body.text-large .mobile-toggle {
    display: inline-flex !important;
  }

  body.text-large .utility-bar {
    display: none !important;
  }

  body.text-large .header-actions {
    display: flex !important;
    align-items: center !important;
    margin-left: auto !important;
    width: auto !important;
    min-width: auto !important;
    padding: 0 !important;
    gap: 8px !important;
  }

  /* Drawer — must beat @media(min-width:901px) rules that have !important */

  body.text-large .nav-wrap {
    position: fixed !important;
    top: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    height: 100% !important;
    max-height: 100vh !important;
    width: min(86vw, 380px) !important;
    transform: translateX(100%) !important;
    transition: transform .25s ease !important;
    z-index: 999999 !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    box-shadow: -10px 0 30px rgba(0,0,0,.18) !important;
    background: #fff !important;
    display: block !important;
    flex: none !important;
    margin-left: 0 !important;
  }

  body.text-large.menu-open .nav-wrap {
    transform: translateX(0) !important;
    z-index: 999999 !important;
  }

  /* Close button — full blue-header styling */

  body.text-large .drawer-close-btn {
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 16px 18px;
    background: var(--brand-blue) !important;
    border: 0;
    border-bottom: 2px solid rgba(255,255,255,.2);
    color: #fff !important;
    font: inherit;
    font-size: 1rem;
    font-weight: 700;
    cursor: pointer;
    letter-spacing: .04em;
    text-transform: uppercase;
    transition: background .15s;
  }

  body.text-large .drawer-close-btn:hover,
  body.text-large .drawer-close-btn:focus {
    background: #014785 !important;
    outline: none;
  }

  body.text-large .drawer-close-label {
    flex: 1;
    text-align: left;
  }

  body.text-large .drawer-close-x {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: rgba(255,255,255,.15);
    transition: background .15s;
    color: #fff;
  }

  body.text-large .drawer-close-btn:hover .drawer-close-x,
  body.text-large .drawer-close-btn:focus .drawer-close-x {
    background: rgba(255,255,255,.3);
  }

  body.text-large .drawer-close-x svg {
    width: 18px;
    height: 18px;
  }

  /* Main nav — reset transforms that desktop rules inject */

  body.text-large .main-nav {
    display: block !important;
    width: 100% !important;
    padding: 0 !important;
    transform: none !important;
    justify-content: flex-start !important;
    gap: 0 !important;
  }

  body.text-large .nav-item {
    border-left: 0 !important;
    border-bottom: 1px solid rgba(2,86,164,.12) !important;
    position: static !important;
    box-shadow: none !important;
    outline: none !important;
  }

  body.text-large .nav-link {
    display: flex !important;
    width: 100% !important;
    justify-content: space-between !important;
    align-items: center !important;
    padding: 16px 18px !important;
    color: var(--brand-blue) !important;
    border-radius: 0 !important;
    white-space: normal !important;
    font-size: 1.15rem !important;
    font-weight: 700 !important;
    box-shadow: none !important;
    outline: none !important;
  }

  body.text-large .nav-link::after {
    content: '+' !important;
    display: inline !important;
    position: static !important;
    opacity: 1 !important;
    background: transparent !important;
    height: auto !important;
    pointer-events: auto !important;
    font-size: 1.4rem !important;
    font-weight: 600 !important;
    line-height: 1 !important;
    margin-left: 18px !important;
    color: var(--brand-blue) !important;
  }

  body.text-large .nav-item::after {
    display: none !important;
    content: none !important;
  }

  body.text-large .nav-item.mobile-open > .nav-link::after {
    content: '-' !important;
  }

  body.text-large .nav-link:hover,
  body.text-large .nav-item:hover > .nav-link,
  body.text-large .nav-item.active > .nav-link,
  body.text-large .nav-item:focus-within > .nav-link,
  body.text-large .nav-link:focus {
    background: rgba(2,86,164,.07) !important;
    color: var(--brand-blue) !important;
    box-shadow: none !important;
    outline: none !important;
  }

  body.text-large .nav-item:hover .mega,
  body.text-large .nav-item:focus-within .mega {
    display: none !important;
  }

  body.text-large .nav-item.mobile-open .mega {
    display: block !important;
  }

  body.text-large .mega {
    position: static !important;
    padding: 0 0 12px !important;
  }

  body.text-large .mega::before {
    display: none !important;
  }

  body.text-large .mega-inner::before {
    display: none !important;
  }

  body.text-large .mega-inner {
    width: 100% !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    border: 0 !important;
    background: var(--surface) !important;
    overflow-y: visible !important;
    max-height: none !important;
    transform: none !important;
    backdrop-filter: none !important;
  }

  body.text-large .mega-header {
    display: none !important;
  }

  body.text-large .mega-grid {
    grid-template-columns: 1fr !important;
    gap: 0 !important;
    padding: 0 !important;
  }

  body.text-large .column {
    padding: 14px 18px !important;
    border-bottom: 1px solid rgba(2,86,164,.1) !important;
  }

  body.text-large .column:last-child {
    border-bottom: 0 !important;
  }

  body.text-large .section-link {
    color: rgba(2,86,164,.6) !important;
    font-size: 0.78rem !important;
    font-weight: 700 !important;
    letter-spacing: .08em !important;
    text-transform: uppercase !important;
    border-bottom: 1px solid rgba(2,86,164,.15) !important;
    margin-bottom: 10px !important;
    padding-bottom: 8px !important;
  }

  body.text-large .section-link:hover,
  body.text-large .section-link:focus {
    color: var(--brand-blue) !important;
  }

  body.text-large .sub-links li {
    margin-bottom: 0;
  }

  body.text-large .sub-links a {
    color: rgba(2,86,164,.8) !important;
    font-size: 0.95rem !important;
    font-weight: 500 !important;
    display: block !important;
    padding: 7px 0 !important;
    transition: color .15s;
    transform: none !important;
  }

  body.text-large .sub-links a:hover,
  body.text-large .sub-links a:focus {
    color: var(--brand-blue) !important;
    text-decoration: underline;
    text-decoration-skip-ink: none !important;
    text-underline-offset: 3px;
    text-decoration-thickness: 2px;
  }

  body.text-large .mega-support-cta {
    display: none !important;
  }

  body.text-large .mega-support-copy strong {
    color: var(--brand-blue) !important;
  }

  body.text-large .mega-support-copy span {
    color: rgba(2,86,164,.7) !important;
  }

  body.text-large .mega-support-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
  }

  body.text-large .mega-support-primary {
    background: var(--brand-blue) !important;
    color: #fff !important;
    padding: 8px 16px;
    border-radius: 100px;
    font-weight: 700;
  }

  body.text-large .mega-support-secondary {
    color: var(--brand-blue) !important;
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 2px;
  }

  /* Quick Access — override the min-width:901px hide rule */

  body.text-large .drawer-quick-access {
    display: block !important;
    border-top: 1px solid rgba(2,86,164,.15);
    padding-bottom: 0;
  }

  body.text-large .drawer-qa-label {
    display: none !important;
  }

  body.text-large .drawer-qa-item {
    border-bottom: 1px solid rgba(2,86,164,.12) !important;
  }

  body.text-large .drawer-qa-trigger {
    display: flex !important;
    align-items: center !important;
    gap: 14px !important;
    width: 100% !important;
    padding: 16px 18px !important;
    background: transparent !important;
    border: 0 !important;
    color: var(--brand-blue) !important;
    font: inherit !important;
    font-weight: 700 !important;
    text-align: left !important;
    cursor: pointer !important;
    text-transform: uppercase !important;
    letter-spacing: .045em !important;
  }

  body.text-large .drawer-qa-trigger:hover,
  body.text-large .drawer-qa-trigger:focus {
    background: rgba(2,86,164,.07) !important;
    outline: none !important;
  }

  body.text-large .drawer-qa-item.open .drawer-qa-trigger {
    background: var(--brand-blue) !important;
    color: #fff !important;
  }

  body.text-large .drawer-qa-item.open .drawer-qa-icon {
    background: #fff !important;
  }

  body.text-large .drawer-qa-item.open .drawer-qa-icon svg {
    stroke: var(--brand-blue) !important;
  }

  body.text-large .drawer-qa-item.open .drawer-qa-plus {
    color: #fff !important;
  }

  body.text-large .drawer-qa-icon {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 38px !important;
    height: 38px !important;
    border-radius: 50% !important;
    background: var(--brand-blue) !important;
    flex-shrink: 0 !important;
  }

  body.text-large .drawer-qa-icon svg {
    width: 20px !important;
    height: 20px !important;
    fill: none !important;
    stroke: #fff !important;
    stroke-width: 2 !important;
    stroke-linecap: round !important;
    stroke-linejoin: round !important;
    display: block !important;
  }

  body.text-large .drawer-qa-text {
    flex: 1 !important;
  }

  body.text-large .drawer-qa-plus {
    font-size: 1.4rem !important;
    font-weight: 600 !important;
    line-height: 1 !important;
    color: var(--brand-blue) !important;
    min-width: 20px !important;
    text-align: center !important;
    display: inline-block !important;
  }

  body.text-large .drawer-qa-panel {
    display: none !important;
    background: #fff !important;
    padding: 22px 18px 24px !important;
    color: var(--brand-text) !important;
  }

  body.text-large .drawer-qa-item.open .drawer-qa-panel {
    display: block !important;
  }

  body.text-large .drawer-qa-panel h3 {
    margin: 0 0 12px !important;
    color: #111 !important;
    font-size: 1.05rem !important;
    font-weight: 600 !important;
  }

  body.text-large .drawer-qa-panel .accessibility-options {
    display: flex !important;
    gap: 14px !important;
    margin-bottom: 24px !important;
    flex-wrap: wrap !important;
  }

  body.text-large .drawer-qa-panel .accessibility-options button {
    display: inline-flex !important;
    align-items: center !important;
    gap: 5px !important;
    border: 0 !important;
    border-bottom: 3px solid transparent !important;
    background: transparent !important;
    color: var(--brand-blue) !important;
    padding: 0 0 6px !important;
    font: inherit !important;
    font-weight: 600 !important;
    cursor: pointer !important;
  }

  body.text-large .drawer-qa-panel .accessibility-options button.active {
    border-bottom-color: var(--brand-blue) !important;
  }

  body.text-large .drawer-qa-panel .accessibility-message {
    margin: 0 !important;
    color: #39434d !important;
    font-size: .95rem !important;
    line-height: 1.65 !important;
    font-weight: 400 !important;
  }

  body.text-large .drawer-qa-lang-grid {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 0 !important;
  }

  body.text-large .drawer-qa-lang-grid a {
    display: block !important;
    padding: 9px 10px !important;
    color: var(--brand-text) !important;
    font-weight: 600 !important;
    text-decoration: none !important;
  }

  body.text-large .drawer-qa-lang-grid a:hover,
  body.text-large .drawer-qa-lang-grid a:focus {
    background: var(--brand-light) !important;
    color: var(--brand-blue) !important;
  }

  /* CTA strip */

  body.text-large .mobile-menu-support-cta {
    display: block !important;
    background: #f2f2f2 !important;
    border-top: 1px solid rgba(0,0,0,.08) !important;
    margin: 0 !important;
    padding: 16px 18px !important;
    border-radius: 0 !important;
  }

  body.text-large .mobile-menu-support-copy strong {
    color: var(--brand-blue-dark) !important;
    display: block !important;
    margin-bottom: 5px !important;
    font-weight: 600 !important;
  }

  body.text-large .mobile-menu-support-copy span {
    color: #555 !important;
    display: block !important;
    font-size: .96rem !important;
  }

  body.text-large .mobile-menu-support-actions {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 8px !important;
    margin-top: 12px !important;
  }

  body.text-large .mobile-menu-support-primary,
  body.text-large .mobile-menu-support-secondary {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    min-height: 44px !important;
    padding: 0 16px !important;
    border-radius: calc(var(--radius) - 2px) !important;
    font-size: .98rem !important;
    font-weight: 600 !important;
    text-decoration: none !important;
  }

  body.text-large .mobile-menu-support-primary {
    background: var(--brand-blue) !important;
    color: #fff !important;
    border: 1px solid var(--brand-blue) !important;
  }

  body.text-large .mobile-menu-support-secondary {
    background: #fff !important;
    color: var(--brand-blue) !important;
    border: 1px solid var(--border) !important;
  }
}

/* --- Desktop nav at ≥1281px for large --- */

@media(min-width:1281px) {
  body.text-large .mobile-toggle {
    display: none !important;
  }

  body.text-large .drawer-close-btn {
    display: none !important;
  }

  body.text-large .mobile-backdrop {
    display: none !important;
  }

  body.text-large .nav-wrap {
    position: static !important;
    transform: none !important;
    background: transparent !important;
    box-shadow: none !important;
    overflow: visible !important;
    width: auto !important;
    flex: 1 !important;
    display: flex !important;
    justify-content: flex-end !important;
  }

  body.text-large .main-nav {
    display: flex !important;
    align-items: center !important;
    width: auto !important;
    padding: 0 !important;
  }

  body.text-large .nav-item {
    position: static !important;
    border-left: 2px solid var(--border) !important;
    border-bottom: 0 !important;
  }

  body.text-large .nav-item:first-child {
    border-left: 0 !important;
  }

  body.text-large .nav-link {
    display: inline-flex !important;
    width: auto !important;
    justify-content: flex-start !important;
    align-items: center !important;
    padding: 14px 10px !important;
    color: #000 !important;
    white-space: nowrap !important;
    border-radius: 0 !important;
  }

  body.text-large .nav-link::after {
    content: none !important;
    display: none !important;
  }

  body.text-large .nav-link:hover,
  body.text-large .nav-item:hover > .nav-link,
  body.text-large .nav-item:focus-within > .nav-link {
    background: transparent !important;
    color: var(--brand-blue) !important;
  }

  body.text-large .nav-item:hover .mega,
  body.text-large .nav-item:focus-within .mega,
  body.text-large .nav-item.focus-open .mega {
    display: block !important;
  }

  body.text-large .nav-item.mobile-open .mega {
    display: none !important;
  }

  body.text-large .mega {
    position: absolute !important;
    left: 0 !important;
    right: 0 !important;
    top: 100% !important;
    padding: 0 0 24px !important;
  }

  body.text-large .mega::before {
    display: block !important;
  }

  body.text-large .mega-inner {
    background: var(--surface) !important;
    border: 1px solid var(--border) !important;
    border-top: 0 !important;
    border-radius: 0 0 18px 18px !important;
    box-shadow: 0 18px 45px rgba(15,45,64,.14) !important;
  }

  body.text-large .mega-header {
    display: none !important;
  }

  body.text-large .mega-grid {
    grid-template-columns: repeat(4,minmax(0,1fr)) !important;
    gap: 24px !important;
    padding: 24px !important;
  }

  body.text-large .column {
    padding: 0 !important;
    border-bottom: 0 !important;
  }

  body.text-large .sub-links a {
    color: #606060 !important;
    transform: none !important;
  }

  body.text-large .sub-links a:hover,
  body.text-large .sub-links a:focus {
    color: #0a6ed1 !important;
    text-decoration: underline !important;
    text-underline-offset: 3px !important;
    font-weight: 600 !important;
  }

  body.text-large .mega-support-cta {
    display: none !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    background: #f2f2f2 !important;
    border-radius: var(--radius) !important;
    margin: 0 24px 24px !important;
    padding: 18px 20px !important;
    gap: 20px !important;
  }

  body.text-large .mega-support-actions {
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 10px !important;
    flex-shrink: 0 !important;
  }

  body.text-large .mega-inner {
    max-height: calc(100vh - 200px) !important;
    overflow-y: auto !important;
  }
}

/* ============================================================
   GLOBAL STICKY SIDEBAR POSITIONING OVERRIDES
   Keeps the top of the sidebar fully visible under the sticky header
   ============================================================ */

@media (min-width: 1051px) {
  .sidebar,
  .typical-sidebar,
  .foi-sidebar,
  .list-sidebar,
  .right-sidebar,
  .post-sidebar,
  .event-sidebar {
    position: sticky !important;
    top: 180px !important;
    align-self: start !important;
  }

  /* Adjust top offset when Drupal admin toolbar is active */

  body.toolbar-horizontal .sidebar,
  body.toolbar-horizontal .typical-sidebar,
  body.toolbar-horizontal .foi-sidebar,
  body.toolbar-horizontal .list-sidebar,
  body.toolbar-horizontal .right-sidebar,
  body.toolbar-horizontal .post-sidebar,
  body.toolbar-horizontal .event-sidebar {
    top: 220px !important;
  }

  body.toolbar-horizontal.toolbar-tray-open .sidebar,
  body.toolbar-horizontal.toolbar-tray-open .typical-sidebar,
  body.toolbar-horizontal.toolbar-tray-open .foi-sidebar,
  body.toolbar-horizontal.toolbar-tray-open .list-sidebar,
  body.toolbar-horizontal.toolbar-tray-open .right-sidebar,
  body.toolbar-horizontal.toolbar-tray-open .post-sidebar,
  body.toolbar-horizontal.toolbar-tray-open .event-sidebar {
    top: 260px !important;
  }
}

@media (max-width: 1050px) {
  .sidebar,
  .typical-sidebar,
  .foi-sidebar,
  .list-sidebar,
  .right-sidebar,
  .post-sidebar,
  .event-sidebar {
    position: static !important;
    top: auto !important;
  }
}

/* Responsive adjustments */

@media (max-width: 640px) {
  .step-circle {
    width: 32px;
    height: 32px;
    box-shadow: 0 0 0 3px #fff;
  }

  .step-wizard-item::after,
  .step-wizard-item::before {
    top: 16px;
  }

  .step-number {
    font-size: 0.85rem;
  }

  .step-tick {
    width: 12px;
    height: 12px;
  }

  .step-label {
    font-size: 0.68rem !important;
    max-width: 70px !important;
    margin-top: 6px !important;
    line-height: 1.2 !important;
  }
}

@media (max-width: 900px) {
  .nav-cards-3col {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

@media (max-width: 600px) {
  .nav-cards-3col {
    grid-template-columns: 1fr !important;
  }
}

@media (max-width: 900px) {
  .nav-cards-3col {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

@media (max-width: 600px) {
  .nav-cards-3col {
    grid-template-columns: 1fr !important;
  }
}

/* Responsive: stack image on top, content below, on narrow screens */

@media (max-width: 640px) {
  .existing-link-card.has-thumbnail {
    flex-direction: column;
  }

  .existing-link-card.has-thumbnail .existing-link-card-thumb {
    flex: 0 0 auto;
    max-width: 100%;
    width: 100%;
    height: 160px;
  }

  .existing-link-card.has-thumbnail .existing-link-card-content {
    flex: 0 0 auto;
    max-width: 100%;
    width: 100%;
  }
}

/* --- Quick Edit Hero Banner Modal Styles --- */

.ui-dialog .ui-dialog-titlebar {
  padding: 15px 20px !important;
  background: var(--brand-blue, #1a5ea8) !important;
  color: white !important;
  border: none !important;
  border-radius: 8px 8px 0 0 !important;
  line-height: 1.5 !important;
  height: auto !important; /* Fix for title cutting off */
  min-height: 50px !important;
  display: flex !important;
  align-items: center !important;
}

.ui-dialog .ui-dialog-title {
  margin: 0 !important;
  padding: 0 !important;
  line-height: 1.5 !important;
  display: block !important;
  white-space: normal !important;
}

.ui-dialog .ui-dialog-titlebar-close {
  top: 50% !important;
  transform: translateY(-50%) !important;
  margin: 0 !important;
  right: 15px !important;
}

.toc-hero-banner-edit-form {
  padding: 5px;
}

.toc-hero-banner-edit-form .hero-banner-preview {
  display: flex;
  justify-content: center;
  align-items: center;
}

.toc-hero-banner-edit-form .form-item-banner-image {
  margin-bottom: 20px;
}

.toc-hero-banner-edit-form .file--image {
  display: flex !important;
  align-items: center !important;
  gap: 15px !important;
  background: #f8fafc !important;
  padding: 12px 15px !important;
  border-radius: 6px !important;
  border: 1px solid #e2e8f0 !important;
  margin-bottom: 10px !important;
}

.toc-hero-banner-edit-form .file--image a {
  word-break: break-all;
  font-weight: 600;
  color: var(--brand-blue) !important;
}

.toc-hero-banner-edit-form .button.remove-button {
  margin: 0 0 0 auto !important;
  background: #e11d48 !important;
  color: white !important;
  border: none !important;
  padding: 8px 14px !important;
  font-size: 0.85rem !important;
  font-weight: 600 !important;
  border-radius: 4px !important;
  transition: background-color 0.2s !important;
}

.toc-hero-banner-edit-form .button.remove-button:hover {
  background: #be123c !important;
}

/* =========================================================
   HOMEPAGE HERO TITLE & CONTENT (Matching Reference Prototype)
   ========================================================= */

/* Hero Container */
.hero,
body.homepage .hero {
  min-height: 480px;
  background-color: var(--brand-blue-dark);
  color: #ffffff;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  position: relative !important;
  overflow: hidden !important;
  isolation: isolate !important;
}

/* Background Overlay: Black smooth horizontal gradient (34% -> 39% -> 34%) */
.hero::after,
body.homepage .hero::after {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 1 !important;
  background: linear-gradient(90deg, rgba(0, 0, 0, 0.34) 0%, rgba(0, 0, 0, 0.39) 50%, rgba(0, 0, 0, 0.34) 100%) !important;
  pointer-events: none !important;
  transition: opacity 0.3s ease !important;
}

/* Remove overlay when no headline or CTA is displayed */
.hero.no-overlay::after {
  display: none !important;
}

/* Remove 8px line on homepage header directly above hero */
body.homepage .site-header::after {
  display: none !important;
  height: 0 !important;
  background: none !important;
}

/* Images and Video fill proportionally without distortion */
.hero-carousel,
.hero-background {
  position: absolute !important;
  inset: 0 !important;
  z-index: 0 !important;
  width: 100% !important;
  height: 100% !important;
}

.hero-slide {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  background-position: center center !important;
  background-size: cover !important;
  background-repeat: no-repeat !important;
  opacity: 0;
  transition: opacity 0.45s ease !important;
}

.hero-slide.active {
  opacity: 1 !important;
}

.hero-video-slide video,
.hero-slide video {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center center !important;
  display: block !important;
}

@media (prefers-reduced-motion: reduce) {
  .hero-video-slide video {
    display: none !important;
  }
}

/* Hero Content: Centred horizontally and vertically */
.hero-content,
body.homepage .hero .hero-content {
  position: relative !important;
  z-index: 2 !important;
  max-width: 860px !important;
  padding: 42px 0 !important;
  text-align: center !important;
  margin: 0 auto !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
}

/* Hero Headline: 500 Medium weight, Myriad Pro, clamp(3.25rem, 5.25vw, 5.05rem), text-shadow */
body.homepage .hero .hero-content h1,
body.homepage .hero .hero-content h1 *,
.hero .hero-content h1,
.hero .hero-content h1 * {
  font-family: var(--font-primary) !important;
  font-weight: 500 !important;
  -webkit-text-stroke: 0 !important;
  text-shadow: 0 3px 12px rgba(0, 0, 0, 0.78), 0 1px 3px rgba(0, 0, 0, 0.68) !important;
}

body.homepage .hero .hero-content h1,
.hero .hero-content h1 {
  font-size: clamp(3.25rem, 5.25vw, 5.05rem) !important;
  line-height: 1 !important;
  letter-spacing: -0.05em !important;
  max-width: 1100px !important;
  margin: 0 !important;
  text-align: center !important;
}

/* Hero Call-to-Action (CTA) Button: 60% charcoal backing, white outline, green hover */
body.homepage .hero .hero-learn-more,
body.homepage .hero .hero-cta-btn,
.hero .hero-learn-more,
.hero .hero-cta-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 44px !important;
  padding: 12px 22px !important;
  margin-top: 18px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  border: 2px solid #ffffff !important;
  border-radius: calc(var(--radius) - 2px) !important;
  background: rgba(0, 0, 0, 0.60) !important;
  color: #ffffff !important;
  font-family: var(--font-primary) !important;
  font-size: 0.95rem !important;
  line-height: 1.2 !important;
  font-weight: 600 !important;
  text-decoration: none !important;
  text-shadow: none !important;
  box-shadow: none !important;
  cursor: pointer !important;
  transition: background 0.18s ease, border-color 0.18s ease !important;
}

body.homepage .hero .hero-learn-more:hover,
body.homepage .hero .hero-learn-more:focus,
body.homepage .hero .hero-learn-more:active,
body.homepage .hero .hero-cta-btn:hover,
body.homepage .hero .hero-cta-btn:focus,
body.homepage .hero .hero-cta-btn:active,
.hero .hero-learn-more:hover,
.hero .hero-learn-more:focus,
.hero .hero-learn-more:active,
.hero .hero-cta-btn:hover,
.hero .hero-cta-btn:focus,
.hero .hero-cta-btn:active {
  background: var(--brand-highlight-green, #438306) !important;
  border-color: var(--brand-highlight-green, #438306) !important;
  color: #ffffff !important;
  text-decoration: underline !important;
  text-underline-offset: 3px !important;
  outline: none !important;
  box-shadow: none !important;
}

body.homepage .hero .hero-learn-more:focus-visible,
body.homepage .hero .hero-cta-btn:focus-visible,
.hero .hero-learn-more:focus-visible,
.hero .hero-cta-btn:focus-visible {
  outline: none !important;
  box-shadow: none !important;
}

/* Play/Pause Control for Hero (WCAG Accessibility) */
.hero-video-toggle,
.hero-playback-toggle {
  position: absolute !important;
  bottom: 14px !important;
  right: clamp(14px, 3vw, 32px) !important;
  z-index: 5 !important;
  width: 44px !important;
  height: 44px !important;
  display: grid !important;
  place-items: center !important;
  padding: 0 !important;
  background: rgba(0, 0, 0, 0.72) !important;
  color: #ffffff !important;
  border: 2px solid #ffffff !important;
  border-radius: 6px !important;
  cursor: pointer !important;
  transition: background 0.18s ease !important;
}

.hero-video-toggle svg,
.hero-playback-toggle svg {
  width: 19px !important;
  height: 19px !important;
  fill: currentColor !important;
}

.hero-video-toggle .icon-play,
.hero-playback-toggle .hero-play-icon {
  display: none;
}

.hero-video-toggle.is-paused .icon-pause,
.hero-playback-toggle.is-paused .hero-pause-icon {
  display: none !important;
}

.hero-video-toggle.is-paused .icon-play,
.hero-playback-toggle.is-paused .hero-play-icon {
  display: block !important;
}

.hero-video-toggle:hover,
.hero-playback-toggle:hover,
.hero-video-toggle:focus,
.hero-playback-toggle:focus,
.hero-video-toggle:active,
.hero-playback-toggle:active {
  background: var(--brand-blue-dark, #014785) !important;
  border: 2px solid #ffffff !important;
  border-color: #ffffff !important;
  outline: none !important;
  box-shadow: none !important;
}

.hero-video-toggle:focus-visible,
.hero-playback-toggle:focus-visible {
  outline: none !important;
  box-shadow: none !important;
}

/* 1. Responsive Hero Heights */
/* Desktop (1200px and above): Retain existing hero height (min-height: 480px) */
@media (min-width: 1200px) {
  body.homepage .hero,
  .hero {
    min-height: 480px !important;
    height: auto;
  }
}

/* Tablet (641px–1199px): Set hero height to 400px */
@media (min-width: 641px) and (max-width: 1199.98px) {
  body.homepage .hero,
  .hero {
    height: 400px !important;
    min-height: 400px !important;
    max-height: 400px !important;
  }
}

/* Tablet Hero Typography (<=900px) */
@media (max-width: 900px) {
  body.homepage .hero .hero-content,
  .hero .hero-content {
    max-width: 100% !important;
    padding: 36px 16px !important;
  }
  body.homepage .hero .hero-content h1,
  .hero .hero-content h1 {
    font-size: clamp(2.65rem, 7.2vw, 4rem) !important;
    line-height: 1.02 !important;
    max-width: 760px !important;
  }
}

/* Mobile (640px and below): Set hero height to 250px */
@media (max-width: 640px) {
  body.homepage .hero,
  .hero {
    height: 250px !important;
    min-height: 250px !important;
    max-height: 250px !important;
  }
  body.homepage .hero .hero-content,
  .hero .hero-content {
    padding: 12px 16px !important;
    max-width: 100% !important;
  }
  body.homepage .hero .hero-content h1,
  .hero .hero-content h1 {
    font-size: clamp(2rem, 9vw, 3rem) !important;
    line-height: 1.04 !important;
    letter-spacing: -0.04em !important;
    max-width: 100% !important;
    margin: 0 !important;
  }
  body.homepage .hero .hero-learn-more,
  body.homepage .hero .hero-cta-btn,
  .hero .hero-learn-more,
  .hero .hero-cta-btn {
    margin-top: 14px !important;
    font-size: 0.9rem !important;
    min-height: 40px !important;
    padding: 8px 18px !important;
  }
  .hero-video-toggle,
  .hero-playback-toggle {
    bottom: 10px !important;
    right: 12px !important;
    width: 40px !important;
    height: 40px !important;
  }
}

@media (max-width: 420px) {
  body.homepage .hero .hero-content h1,
  .hero .hero-content h1 {
    font-size: clamp(1.65rem, 8vw, 2.25rem) !important;
    line-height: 1.06 !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero-video-toggle,
  .hero-playback-toggle {
    display: none !important;
  }
}

/* =========================================================
   TABLET PRIMARY NAVIGATION – HAMBURGER MENU (641px - 1199px)
   ========================================================= */
@media (min-width: 901px) and (max-width: 1199.98px) {
  body.homepage .header-actions {
    display: flex !important;
    align-items: center !important;
    width: auto !important;
    min-width: 0 !important;
    margin-left: auto !important;
    padding: 0 !important;
    gap: 8px !important;
  }
  .main-header .mobile-toggle { min-height: 44px; display: inline-flex !important; }
  .main-nav .nav-item { border-left: 0 !important; }
  .main-nav .nav-link::before { display: none !important; }
  .main-nav .nav-item:last-child .nav-link {
    transform: none !important;
    padding: 16px 18px !important;
  }
  .main-nav .nav-item:hover > .mega,
  .main-nav .nav-item:focus-within > .mega { display: none; }
  .main-nav .nav-item.mobile-open > .mega { display: block; }
  .mega-inner::before { display: none !important; }
}

/* =========================================================
   TABLET FEATURED / PROMOTIONAL IMAGE GRID (641px - 1199px)
   ========================================================= */
@media (min-width: 641px) and (max-width: 1199.98px) {
  .featured-updates .promo-grid,
  .promo-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    grid-template-rows: auto !important;
    gap: 20px !important;
  }

  .featured-updates .promo-right,
  .featured-updates .promo-bottom,
  .promo-right,
  .promo-bottom {
    display: contents !important;
  }

  .featured-updates .promo-card,
  .featured-updates .promo-card.tall,
  .featured-updates .promo-card.wide,
  .promo-card,
  .promo-card.tall,
  .promo-card.wide,
  .featured-updates .promo-grid > *,
  .promo-grid > *,
  .promo-grid .promo-card,
  .promo-grid:has(> :nth-child(1):last-child) .promo-card,
  .promo-grid:has(> :nth-child(2):last-child) .promo-card,
  .promo-grid:has(> :nth-child(3):last-child) .promo-card,
  .promo-grid:has(> :nth-child(3):last-child) .promo-card:nth-child(n),
  .promo-grid:has(> :nth-child(4):last-child) .promo-card,
  .promo-grid:has(> :nth-child(4):last-child) .promo-card:nth-child(n),
  .promo-grid:has(> :nth-child(5)) .promo-card,
  .promo-grid:has(> :nth-child(5)) .promo-card:nth-child(n) {
    grid-column: auto !important;
    grid-row: auto !important;
    min-width: 0 !important;
    height: 270px !important;
  }

  /* 1 card on tablet: full width */
  .promo-grid:has(> :nth-child(1):last-child) .promo-card,
  .promo-grid:has(> :nth-child(1):last-child) > :first-child {
    grid-column: 1 / -1 !important;
    height: 340px !important;
  }

  /* Any odd total card count on tablet: the final card spans full width (2 columns) */
  .promo-grid:has(> :nth-child(odd):last-child) > :last-child {
    grid-column: 1 / -1 !important;
  }
}

/* =========================================================
   MOBILE FEATURED / PROMOTIONAL IMAGE GRID (640px and below)
   ========================================================= */
@media (max-width: 640px) {
  .featured-updates {
    padding: 24px 0 36px !important;
  }

  .featured-updates .promo-grid,
  .promo-grid {
    display: grid !important;
    grid-template-columns: 1fr !important;
    grid-template-rows: auto !important;
    gap: 16px !important;
  }

  .featured-updates .promo-right,
  .featured-updates .promo-bottom,
  .promo-right,
  .promo-bottom {
    display: contents !important;
  }

  .featured-updates .promo-card,
  .featured-updates .promo-card.tall,
  .featured-updates .promo-card.wide,
  .promo-card,
  .promo-card.tall,
  .promo-card.wide,
  .featured-updates .promo-grid > *,
  .promo-grid > *,
  .promo-grid .promo-card,
  .promo-grid:has(> :nth-child(1):last-child) .promo-card,
  .promo-grid:has(> :nth-child(2):last-child) .promo-card,
  .promo-grid:has(> :nth-child(3):last-child) .promo-card,
  .promo-grid:has(> :nth-child(3):last-child) .promo-card:nth-child(n),
  .promo-grid:has(> :nth-child(4):last-child) .promo-card,
  .promo-grid:has(> :nth-child(4):last-child) .promo-card:nth-child(n),
  .promo-grid:has(> :nth-child(5)) .promo-card,
  .promo-grid:has(> :nth-child(5)) .promo-card:nth-child(n) {
    grid-column: auto !important;
    grid-row: auto !important;
    min-width: 0 !important;
    height: 240px !important;
  }

  .promo-title {
    padding: 14px 16px !important;
    font-size: 1rem !important;
  }
}

/* =========================================================
   HOMEPAGE QUICK LINKS RESPONSIVE BORDERS (Desktop, Tablet, Mobile)
   ========================================================= */

/* Desktop (1200px+): 6 items (or any count) in a single row with vertical divider lines (Image 1) */
@media (min-width: 1200px) {
  .top-links-strip {
    background: var(--surface) !important;
    border: 0 !important;
  }
  .top-links-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)) !important;
    gap: 0 !important;
    background: transparent !important;
    border: 0 !important;
  }
  .top-links-grid .top-link-card {
    border: 0 !important;
    border-right: 2px solid var(--border) !important;
    background: transparent !important;
  }
  .top-links-grid .top-link-card:last-child {
    border-right: 0 !important;
  }
}

/* Tablet (641px–1199.98px): 3 columns (Image 2) — dynamic for any number of cards */
@media (min-width: 641px) and (max-width: 1199.98px) {
  .top-links-strip {
    background: var(--surface) !important;
    border: 0 !important;
  }
  .top-links-grid {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 0 !important;
    background: transparent !important;
    border: 0 !important;
  }
  .top-links-grid .top-link-card {
    border: 0 !important;
    border-right: 2px solid var(--border) !important;
    border-bottom: 2px solid var(--border) !important;
    background: transparent !important;
  }
  /* Remove right vertical border on column 3 and last item */
  .top-links-grid .top-link-card:nth-child(3n),
  .top-links-grid .top-link-card:last-child {
    border-right: 0 !important;
  }
  /* Dynamic bottom border: whichever row is the final row has no bottom border */
  /* Default 4-6 cards (standard 6): row 2 has no bottom border */
  .top-links-grid .top-link-card:nth-child(n+4) {
    border-bottom: 0 !important;
  }
  /* If 1 to 3 cards: row 1 is the only row, no bottom border */
  .top-links-grid:not(:has(.top-link-card:nth-child(4))) .top-link-card {
    border-bottom: 0 !important;
  }
  /* If 7+ cards: row 2 needs border-bottom, row 3 has no bottom border */
  .top-links-grid:has(.top-link-card:nth-child(7)) .top-link-card:nth-child(n+4) {
    border-bottom: 2px solid var(--border) !important;
  }
  .top-links-grid:has(.top-link-card:nth-child(7)) .top-link-card:nth-child(n+7) {
    border-bottom: 0 !important;
  }
  /* If 10+ cards: row 3 needs border-bottom, row 4 has no bottom border */
  .top-links-grid:has(.top-link-card:nth-child(10)) .top-link-card:nth-child(n+7) {
    border-bottom: 2px solid var(--border) !important;
  }
  .top-links-grid:has(.top-link-card:nth-child(10)) .top-link-card:nth-child(n+10) {
    border-bottom: 0 !important;
  }
}

/* Mobile (640px and below): 2 columns (Image 3) — dynamic for any number of cards */
@media (max-width: 640px) {
  .top-links-strip {
    background: var(--surface) !important;
    border: 0 !important;
  }
  .top-links-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 0 !important;
    background: transparent !important;
    border: 0 !important;
  }
  .top-links-grid .top-link-card {
    border: 0 !important;
    border-right: 2px solid var(--border) !important;
    border-bottom: 2px solid var(--border) !important;
    background: transparent !important;
  }
  /* Remove right vertical border on column 2 and last item */
  .top-links-grid .top-link-card:nth-child(2n),
  .top-links-grid .top-link-card:last-child {
    border-right: 0 !important;
  }
  /* Dynamic bottom border: whichever row is the final row has no bottom border */
  /* Default 5-6 cards (standard 6): row 3 has no bottom border */
  .top-links-grid .top-link-card:nth-child(n+5) {
    border-bottom: 0 !important;
  }
  /* If 1-2 cards: row 1 is the only row, no bottom border */
  .top-links-grid:not(:has(.top-link-card:nth-child(3))) .top-link-card {
    border-bottom: 0 !important;
  }
  /* If 3-4 cards: row 2 has no bottom border */
  .top-links-grid:not(:has(.top-link-card:nth-child(5))) .top-link-card:nth-child(n+3) {
    border-bottom: 0 !important;
  }
  /* If 7+ cards: row 3 needs border-bottom, row 4 has no bottom border */
  .top-links-grid:has(.top-link-card:nth-child(7)) .top-link-card:nth-child(n+5) {
    border-bottom: 2px solid var(--border) !important;
  }
  .top-links-grid:has(.top-link-card:nth-child(7)) .top-link-card:nth-child(n+7) {
    border-bottom: 0 !important;
  }
  /* If 9+ cards: row 4 needs border-bottom, row 5 has no bottom border */
  .top-links-grid:has(.top-link-card:nth-child(9)) .top-link-card:nth-child(n+7) {
    border-bottom: 2px solid var(--border) !important;
  }
  .top-links-grid:has(.top-link-card:nth-child(9)) .top-link-card:nth-child(n+9) {
    border-bottom: 0 !important;
  }
}

/* Ensure sticky site-top header and all dropdown panels render cleanly above page body, site-header & search bar */
.site-top {
  position: sticky !important;
  top: 0 !important;
  z-index: 999 !important;
  background: var(--surface) !important;
}

/* When the page options bar is present on the page, offset .site-top by gin toolbar + page-opts-bar height */
body:has(.page-opts-bar-wrap) .site-top {
  top: calc(var(--gin-toolbar-secondary-height, 40px) + 48px) !important;
}

.utility-bar {
  position: relative !important;
  z-index: 1005 !important;
}

.utility-item {
  position: relative !important;
  z-index: 1010 !important;
}

.site-header {
  position: relative !important;
  z-index: 1001 !important;
}

.contact-panel,
.accessibility-panel,
.translation-panel {
  z-index: 1020 !important;
}

.main-nav ul,
.main-nav .dropdown-menu,
.main-nav [data-drupal-menu] ul {
  z-index: 1005 !important;
}

/* Multiple contacts divider in sidebar Contact Us card */
.cu-contact-entry--subsequent {
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px solid #e2e8f0;
}

/* ── Gin admin dark-mode: force white text on Edit Banner button ──
   When the Gin admin theme is in dark mode it adds .gin--dark-mode to <html>
   and applies color-scheme:dark which resets link colours, making the white
   text invisible against the navy button background. */
.gin--dark-mode .hero-banner-edit-btn,
.gin--dark-mode .hero-banner-edit-btn:hover,
.gin--dark-mode .hero-banner-edit-btn:focus,
.gin--dark-mode .hero-banner-edit-btn:visited,
.gin--dark-mode .hero-banner-edit-btn:active {
  color: #fff !important;
}

.gin--dark-mode .hero-banner-edit-btn svg {
  fill: #fff !important;
}

/* ── Gin admin dark-mode: fix secondary / outline button text visibility ──
   Uses html.gin--dark-mode body to get higher specificity than competing
   body.high-contrast rules, and hardcoded hex values to bypass any
   CSS variable resolution issues under color-scheme:dark. */
html.gin--dark-mode body .btn-s,
html.gin--dark-mode body .btn-s:hover,
html.gin--dark-mode body .btn-s:focus,
html.gin--dark-mode body .btn-s:active,
html.gin--dark-mode body .btn-outline,
html.gin--dark-mode body .btn-outline:hover,
html.gin--dark-mode body .btn-outline:focus,
html.gin--dark-mode body .btn-outline:active,
html.gin--dark-mode body .btn-o,
html.gin--dark-mode body .btn-o:hover,
html.gin--dark-mode body .btn-o:focus,
html.gin--dark-mode body .btn-o:active,
html.gin--dark-mode body .btn-secondary,
html.gin--dark-mode body .btn-secondary:hover,
html.gin--dark-mode body .btn-secondary:focus,
html.gin--dark-mode body .btn-secondary:active {
  background: #ffffff !important;
  color: #001f3f !important;
  border-color: #001f3f !important;
}

/* =========================================================
   WCAG AA Additional Accessibility Enhancements (Requirement 11)
   - Visible keyboard focus indicators across light & dark components
   - Pause states for carousels & emergency scrolling notices
   - Comprehensive reduced-motion overrides
   - Color contrast safeguards
   ========================================================= */

/* Clearly visible focus states for links, buttons & interactive controls */
a:focus-visible,
button:focus-visible,
[role="button"]:focus-visible,
[tabindex="0"]:focus-visible {
  outline: 3px solid var(--brand-blue, #0256A4) !important;
  outline-offset: 2px !important;
  box-shadow: 0 0 0 4px rgba(2, 86, 164, 0.25) !important;
}

/* Form fields focus states */
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 3px solid var(--brand-blue, #0256A4) !important;
  outline-offset: 1px !important;
  border-color: var(--brand-blue, #0256A4) !important;
  box-shadow: 0 0 0 3px rgba(2, 86, 164, 0.2) !important;
}

/* AI Search input-field textarea focus reset (prevents double outline inside rounded input-field container) */
.input-field textarea:focus,
.input-field textarea:focus-visible,
#standalone-input:focus,
#standalone-input:focus-visible {
  outline: none !important;
  outline-offset: 0 !important;
  box-shadow: none !important;
  border: none !important;
}

/* High-contrast focus state on dark backgrounds */
.hero a:focus-visible,
.hero button:focus-visible,
.site-footer a:focus-visible,
.site-footer button:focus-visible,
.utility-bar a:focus-visible,
.utility-bar button:focus-visible,
.emergency-notice a:focus-visible,
.emergency-notice button:focus-visible,
.toc-bnr a:focus-visible,
.toc-bnr button:focus-visible,
.support-banner a:focus-visible,
.support-banner button:focus-visible {
  outline: 3px solid #FFFFFF !important;
  outline-offset: 2px !important;
  box-shadow: 0 0 0 4px rgba(0, 0, 0, 0.5) !important;
}

/* Notification & emergency pause button focus indicators */
.notif-pause-btn:focus-visible,
.toc-bnr-btn:focus-visible,
.emergency-pause-btn:focus-visible {
  outline: 3px solid #FFFFFF !important;
  outline-offset: 2px !important;
  box-shadow: 0 0 0 4px rgba(0, 0, 0, 0.45) !important;
}

/* Global Reduced Motion Compliance */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  .notif-marquee-track,
  .emergency-marquee-track {
    animation: none !important;
    transform: none !important;
  }

  .hero-slide {
    transition: none !important;
  }
}


/* ==========================================================================
   Admin Navigation Tooltip, Flyout & Sidebar Stacking Fix for Frontend Website
   The site-header, alert banners, and utility bar have high z-indexes (up to 1020).
   The admin toolbar, flyout menus, and tooltips must always sit on top.
   ========================================================================== */
.admin-toolbar {
  z-index: 2000 !important;
}

.cloned-flyout,
[data-toolbar-popover-wrapper],
[data-drupal-admin-styles] [data-toolbar-popover-wrapper] {
  z-index: 2050 !important;
}

.gin-tooltip-navigation,
.cloned-gin-tooltip-navigation,
.admin-toolbar__tooltip,
.toolbar-tooltip,
[data-drupal-admin-styles] .toolbar-tooltip,
:is(#extra-specificity-hack, [data-drupal-admin-styles]) .toolbar-tooltip,
:is(#extra-specificity-hack, [data-drupal-admin-styles]) .gin-tooltip-navigation,
:is(#extra-specificity-hack, [data-drupal-admin-styles]) .cloned-gin-tooltip-navigation {
  z-index: 999999 !important;
  background-color: var(--gin-tooltip-bg, #0f172a) !important;
  color: #ffffff !important;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35) !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
}