/* ========================================
   OLDER PAGES -> NEWER PAGE STYLE (2026-10-26)
   Carries the P2P/WDB look (navy #2b3a67, teal var(--primary),
   orange #f7941d) over the original block set without touching
   content. Each old block prints its own inline <style> in the body,
   which loads after this file, so every rule here is one element
   type more specific (div.heading vs .heading) to win cleanly
   without !important.
   Enqueued after wdb.css, before a11y.css. filemtime-versioned.
   ======================================== */

/* ── PHASE 1: PAGE HEROES ────────────────
   .heading is the title band shared by herocommittee, maddyhero,
   defaulthero, committee and workforce. Same treatment as .p2p-hero. */

div.heading {
  background: linear-gradient(135deg, #1e2a4a 0%, #2b3a67 40%, #007265 80%, var(--primary) 100%);
  padding: 64px 0 60px;
  overflow: hidden;
}

/* Swap the floating-triangle texture for the P2P hero's soft glow. */
div.heading::before {
  top: -50%;
  right: -20%;
  width: 600px;
  height: 600px;
  opacity: 1;
  background: radial-gradient(circle, rgba(0, 147, 127, 0.15) 0%, transparent 70%);
  border-radius: 50%;
  pointer-events: none;
}

div.heading::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, #f7941d, var(--secondary), var(--primary));
}

div.heading .container {
  position: relative;
  z-index: 2;
}

div.heading h1 {
  font-family: var(--font1);
  font-size: 44px;
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: #fff;
}

div.heading h1::after {
  content: '';
  display: block;
  width: 64px;
  height: 3px;
  margin-top: 18px;
  background: linear-gradient(90deg, #f7941d, transparent);
  border-radius: 2px;
}

/* ── brokenout: the page title is a card in the left column, not a band ── */

div.brokenout-block div.brokenout-heading {
  padding: 40px 0 44px;
  background: linear-gradient(135deg, #1e2a4a 0%, #2b3a67 45%, #007265 100%);
  border-radius: 8px;
  overflow: hidden;
}

div.brokenout-block div.brokenout-heading::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, #f7941d, var(--secondary), var(--primary));
}

div.brokenout-block div.brokenout-heading h1 {
  padding: 0 32px;
  font-family: var(--font1);
  font-size: 34px;
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: -0.02em;
}

/* ── herocommittee: intro copy + link tiles under the band ── */

/* The whitesmoke panel reached up behind the header; drop it. */
div.default-hero-2-container {
  padding: 72px 0;
  background: #fff;
}

div.default-hero-2-container::after { display: none; }

div.default-hero-2 .leftHero2 p {
  font-size: 17px;
  font-weight: 400;
  line-height: 1.75;
  color: #4a4a5a;
}

div.default-hero-2 .rightHero2 { gap: 14px; justify-content: flex-start; }

div.default-hero-2 .rightHero2 a {
  width: calc(50% - 7px);
  height: auto;
  min-height: 56px;
  margin: 0;
  padding: 14px 24px;
  font-family: var(--font1);
  font-size: 16px;
  font-weight: 600;
  line-height: 1.3;
  background: linear-gradient(135deg, #2b3a67, #007265);
  border-radius: 5px;
  transition: box-shadow 0.25s ease, transform 0.2s ease;
}

div.default-hero-2 .rightHero2 a:hover,
div.default-hero-2 .rightHero2 a:focus-visible {
  background: linear-gradient(135deg, #2b3a67, #007265);
  color: #fff;
  box-shadow: 0 6px 24px rgba(43, 58, 103, 0.25);
  transform: translateY(-2px);
}

div.default-hero-2 .rightHero2 a:focus-visible { outline: 2px solid #f7941d; outline-offset: 3px; }

/* ── omjhero: photo hero, navy overlay instead of flat teal ── */

div.omjhero-block.theme-teal .omjhero-overlay {
  background: linear-gradient(135deg, #1e2a4a 0%, #2b3a67 45%, #007265 100%);
}

div.omjhero-block { overflow: hidden; }

div.omjhero-block::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 3;
  height: 4px;
  background: linear-gradient(90deg, #f7941d, var(--secondary), var(--primary));
}

div.omjhero-block .omjhero-eyebrow {
  font-family: var(--font1);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.12em;
  opacity: 1;
}

div.omjhero-block .omjhero-headline {
  font-family: var(--font1);
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -0.02em;
}

div.omjhero-block .omjhero-headline::after {
  content: '';
  display: block;
  width: 64px;
  height: 3px;
  margin-top: 20px;
  background: linear-gradient(90deg, #f7941d, transparent);
  border-radius: 2px;
}

div.omjhero-block .omjhero-cta .btn {
  font-family: var(--font1);
  border-radius: 5px;
  transition: box-shadow 0.25s ease, transform 0.2s ease, background-color 0.2s ease, color 0.2s ease;
}

div.omjhero-block .omjhero-cta .btn-primary { color: #2b3a67; }

div.omjhero-block .omjhero-cta .btn-primary:hover,
div.omjhero-block .omjhero-cta .btn-primary:focus-visible {
  background: #fff;
  color: #2b3a67;
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.3);
  transform: translateY(-2px);
}

div.omjhero-block .omjhero-cta .btn-primary:focus-visible { outline: 2px solid #f7941d; outline-offset: 3px; }

/* ── RESPONSIVE ─────────────────────── */

@media (max-width: 1199px) {
  div.default-hero-2-container { padding: 56px 0; }
  div.default-hero-2 .rightHero2 { margin-top: 32px; }
  div.default-hero-2 .rightHero2 a { width: 100%; }
}

@media (max-width: 991px) {
  div.heading { padding: 52px 0 48px; }
  div.heading h1 { font-size: 36px; }
}

@media (max-width: 767px) {
  div.heading { padding: 40px 0 38px; }
  div.heading h1 { font-size: 30px; }
  div.heading h1::after { margin-top: 14px; }
  div.brokenout-block div.brokenout-heading { padding: 30px 0 34px; }
  div.brokenout-block div.brokenout-heading h1 { padding: 0 22px; font-size: 26px; }
  div.default-hero-2-container { padding: 44px 0; }
}

@media (prefers-reduced-motion: reduce) {
  div.default-hero-2 .rightHero2 a,
  div.omjhero-block .omjhero-cta .btn { transition: none; }
  div.default-hero-2 .rightHero2 a:hover,
  div.omjhero-block .omjhero-cta .btn-primary:hover { transform: none; }
}
