/* ==========================================================================
   RLEDC — Accessibility layer (WCAG 2.1 Level AA)
   Rural Labor & Economic Development Corporation
   Loaded after all other stylesheets so these rules win.
   ========================================================================== */

/* -- 1. Visible keyboard focus (WCAG 2.4.7 Focus Visible) ----------------- */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible,
[role="button"]:focus-visible {
  outline: 3px solid #FFC845 !important;
  outline-offset: 3px !important;
  border-radius: 2px;
}
/* dark surfaces get a light halo so the ring is always visible */
nav a:focus-visible,
footer a:focus-visible,
.mobile-nav a:focus-visible,
#mobile-menu-btn:focus-visible {
  outline: 3px solid #FFD97A !important;
  outline-offset: 2px !important;
  background: rgba(255, 217, 122, 0.16) !important;
}

/* -- 2. Skip link (WCAG 2.4.1 Bypass Blocks) ------------------------------ */
.rledc-skip {
  position: absolute;
  left: 8px;
  top: -60px;
  z-index: 10000;
  background: #14263A;
  color: #FFFFFF;
  padding: 12px 20px;
  font-weight: 700;
  text-decoration: none;
  border: 2px solid #FFC845;
  border-radius: 3px;
  transition: top 0.2s ease;
}
.rledc-skip:focus { top: 8px; }

/* -- 3. Screen-reader-only utility ---------------------------------------- */
.rledc-sr {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* -- 4. Colour contrast corrections (WCAG 1.4.3 Contrast Minimum) --------- */
/* Navigation bar: keep an opaque dark backing behind white link text. */
#main-nav { background: rgba(17, 28, 46, 0.97) !important; }
#main-nav.scrolled { background: rgba(17, 28, 46, 0.99) !important; }
#main-nav .nav-links a { color: #FFFFFF !important; }
#main-nav .nav-links a:hover,
#main-nav .nav-links a.active { color: #7FE7DC !important; }
.mobile-nav { background: rgba(13, 24, 42, 0.99) !important; }
.mobile-nav a { color: #FFFFFF !important; }

/* Footer link and body text contrast on the near-black footer. */
footer a { color: #C9E9E4 !important; }
footer a:hover { color: #FFFFFF !important; }
footer p, footer span, footer li { color: rgba(255, 255, 255, 0.86) !important; }
footer h5 { color: #FFFFFF !important; }

/* Small print and muted labels on light backgrounds. */
.ss-page .ss-src { opacity: 1 !important; color: #4A5462 !important; }
.ss-page .ss-stat .ss-l { opacity: 1 !important; color: #3D4652 !important; }
.ss-page .ss-sub { opacity: 1 !important; color: #3D4652 !important; }
.ss-page .ss-updated { opacity: 1 !important; color: rgba(255, 255, 255, 0.82) !important; }
.ss-page [style*="opacity:.7"],
.ss-page [style*="opacity:.5"] { opacity: 1 !important; color: #4A5462 !important; }

/* Status and category badges — darkened for 4.5:1 against their fills. */
.ss-page .ss-b-avail { background: #D3EBDD !important; color: #0F5730 !important; }
.ss-page .ss-b-com   { background: #CFEAE7 !important; color: #0B4F49 !important; }
.ss-page .ss-b-ind   { background: #D6DEEC !important; color: #14294B !important; }
.ss-page .ss-b-land  { background: #E7DDCF !important; color: #4E3A26 !important; }

/* Teal call-to-action buttons: white on #1FA89C is below 4.5:1 — darken. */
.ss-page .ss-btn,
.btn-primary,
.mobile-cta { background: #10756C !important; color: #FFFFFF !important; }
.ss-page .ss-btn:hover { background: #0C5C55 !important; }


/* Subpages use a plain <nav> rather than #main-nav: give every site nav an
   opaque dark backing so white link text always clears 4.5:1. */
nav, #main-nav { background: rgba(17, 28, 46, 0.97) !important; }
nav.scrolled, #main-nav.scrolled { background: rgba(17, 28, 46, 0.99) !important; }
nav .nav-links a, nav .nav-links a.active { color: #FFFFFF !important; opacity: 1 !important; }
nav .nav-links a:hover { color: #7FE7DC !important; }
nav .nav-brand, nav .nav-name, nav .nav-name small { color: #FFFFFF !important; }

/* The brand teal (#1FA89C) fails AA as text and as a button fill.
   #0E6A62 keeps the same hue at 5.7:1 on light backgrounds and 6.5:1
   behind white text. */
.nav-cta, a.nav-cta { background: #0E6A62 !important; color: #FFFFFF !important; }
.nav-cta:hover, a.nav-cta:hover { background: #0B5C55 !important; }
.eyebrow, .ss-page .ss-eyebrow, p.eyebrow, .label { color: #0E6A62 !important; }
.btn-primary, .mobile-cta, .ss-page .ss-btn { background: #0E6A62 !important; color: #FFFFFF !important; }
.btn-primary:hover, .ss-page .ss-btn:hover { background: #0B5C55 !important; }
.breadcrumb a, .toc a { color: #14294B !important; }


/* Closed mobile menu must be hidden from keyboard and screen readers, not
   merely collapsed to zero height (WCAG 2.4.3 Focus Order / 4.1.2). */
.mobile-nav:not(.open) { visibility: hidden !important; }
.mobile-nav.open { visibility: visible !important; }

/* Subpages carry the same nav markup as the homepage but without the
   #main-nav id, so the homepage's compaction rules never reached them and
   the menu overflowed the viewport. Apply the same sizing to any site nav. */
@media (min-width: 901px) {
  nav .nav-inner { gap: 12px; }
  nav .nav-brand { flex: none; margin-right: 16px; min-width: 0; }
  nav .nav-inner { flex-wrap: nowrap; }
  nav .nav-links { gap: 12px; margin-left: auto; flex-wrap: nowrap;
                   justify-content: flex-end; min-width: 0; }
  /* Full-size brand mark. The logo already carries the RLEDC wordmark, so the
     adjacent text lockup is redundant until there is room for both. */
  nav .nav-logo-img { width: 200px !important; height: auto !important; max-height: 130px !important; }
  nav .nav-logo-mark { flex: none; }
  nav .nav-links li { white-space: nowrap; }
  nav .nav-links a { font-size: 0.67rem; letter-spacing: 0.06em; }
  nav .nav-name { max-width: 186px; }
  nav .nav-name small { font-size: 0.62rem; line-height: 1.2; }
}
/* Between 901 and 1399 px the full menu plus the organization name does not
   fit on one row. Keep the menu on one row and drop the wordmark instead of
   letting the bar wrap to two lines. */
@media (min-width: 901px) {
  /* The brand mark is displayed at its full design size, so the menu takes
     its own row beneath it rather than competing for horizontal space. */
  nav .nav-name { display: none !important; }
  nav .nav-inner { flex-wrap: wrap !important; align-items: center; row-gap: 0; padding-top: 6px; }
  nav .nav-links {
    flex-wrap: wrap !important;
    justify-content: flex-end;
    width: 100%;
    gap: 8px 13px !important;
    margin-left: 0;
    padding-bottom: 8px;
  }
  /* The homepage carries higher-specificity #main-nav rules; override them. */
  nav .nav-links a, #main-nav .nav-links a {
    font-size: 0.63rem !important;
    letter-spacing: 0.03em !important;
  }
  nav .ss-nav-dd-menu { right: auto; left: 0; }
}

/* Phones and tablets: keep the mark large and legible. */
@media (max-width: 900px) {
  nav .nav-logo-img { width: 160px !important; max-height: 104px !important; height: auto !important; }
}
@media (max-width: 560px) {
  nav .nav-logo-img { width: 132px !important; max-height: 86px !important; }
}

/* Remaining brand-teal and brand-green text set on light surfaces. */
.btn-learn, .compliance-card .sub, .sub, .stat-label,
a[class*="btn-learn"] { color: #0E6A62 !important; }
.tag-state, .fund-tag.tag-state { color: #175C3B !important; border-color: rgba(23,92,59,0.35) !important; }
.tag-workforce, .fund-tag.tag-workforce { color: #6B3A12 !important; }
.tag-deadline, .fund-tag.tag-deadline { color: #8A2118 !important; }

/* -- 5. Links distinguishable without colour (WCAG 1.4.1 Use of Colour) --- */
/* Underline links that sit inside running text. Navigation, buttons,
   badges and card links are excluded — they carry other visual affordances. */
.ss-page p a,
.ss-page li a,
.ss-page td a,
.ss-page .ss-note a,
.ss-page .ss-crumb a,
main p a, main li a, section p a, section li a {
  text-decoration: underline !important;
  text-underline-offset: 2px;
}
.ss-page p a:hover, .ss-page li a:hover, .ss-page td a:hover,
main p a:hover, section p a:hover { text-decoration-thickness: 2px !important; }

/* -- 6. Target size (WCAG 2.5.5 / 2.5.8) ---------------------------------- */
.mobile-nav a { min-height: 48px; padding-top: 12px; padding-bottom: 12px; }
#mobile-menu-btn { min-width: 48px; min-height: 48px; }
footer a { display: inline-block; padding: 3px 0; }

/* -- 7. Reduced motion (WCAG 2.3.3 Animation from Interactions) ----------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  .marquee-track, .ticker-track, [class*="marquee"] [class*="track"] {
    animation: none !important;
    transform: none !important;
  }
}
/* Honour the user's pause choice for auto-moving content (WCAG 2.2.2). */
body.rledc-motion-paused [class*="marquee"] *,
body.rledc-motion-paused [class*="ticker"] * { animation-play-state: paused !important; }

/* -- 8. Motion pause control ---------------------------------------------- */
.rledc-motion-btn {
  background: rgba(255, 255, 255, 0.14);
  color: #FFFFFF;
  border: 1px solid rgba(255, 255, 255, 0.5);
  border-radius: 999px;
  padding: 6px 14px;
  font: 700 0.72rem/1 system-ui, sans-serif;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
  min-height: 32px;
}
.rledc-motion-btn:hover { background: rgba(255, 255, 255, 0.28); }

/* Anchored inside the scrolling banner, pinned to its right edge. */
.rledc-motion-wrap { position: relative; }
.rledc-motion-btn--inline {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 5;
  /* Opaque so the scrolling text does not read through the control. */
  background: #14263A;
  border-color: rgba(255, 255, 255, 0.6);
  box-shadow: -14px 0 14px 6px #14263A;
}
.rledc-motion-btn--inline:hover { background: #23405F; box-shadow: -14px 0 14px 6px #23405F; }
/* Fallback when no banner element is found. */
.rledc-motion-btn--fixed {
  position: fixed;
  left: 16px;
  bottom: 16px;
  z-index: 9998;
  background: #14263A;
  border: 2px solid #FFC845;
  min-height: 44px;
  padding: 10px 18px;
}
@media (max-width: 640px) {
  .rledc-motion-btn--inline { right: 8px; padding: 5px 10px; font-size: 0.66rem; }
}

/* -- 9. Tables (WCAG 1.3.1 Info and Relationships) ------------------------ */
.ss-page table caption {
  caption-side: top;
  text-align: left;
  font-weight: 700;
  color: #14294B;
  padding: 0 0 8px;
}

/* -- 10. Forms ------------------------------------------------------------ */
.ss-page label { color: #14294B !important; }
.ss-page input:focus, .ss-page select:focus, .ss-page textarea:focus {
  border-color: #10756C !important;
}
.rledc-required { color: #A3271F; font-weight: 700; }

/* -- 11. Partner logo grid ------------------------------------------------ */
.partner-featured-head {
  font-family: 'Barlow Condensed', system-ui, sans-serif;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #3D4652;
  margin: 0 0 14px;
}
.partner-featured + .partner-featured-head { margin-top: 30px; }
.partner-featured {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 18px;
  margin-bottom: 22px;
}
.partner-card {
  display: flex;
  align-items: center;
  gap: 16px;
  background: #FFFFFF;
  border: 1px solid rgba(74, 68, 64, 0.14);
  border-left: 3px solid #10756C;
  border-radius: 3px;
  padding: 18px 20px;
  text-decoration: none;
  transition: box-shadow 0.3s, transform 0.3s;
}
.partner-card:hover {
  box-shadow: 0 8px 28px rgba(36, 65, 107, 0.14);
  transform: translateY(-2px);
}
.partner-card img {
  width: 68px; height: 68px;
  object-fit: contain;
  flex: none;
  background: #FFFFFF;
}
.partner-card .pc-name {
  font-family: 'Barlow Condensed', system-ui, sans-serif;
  font-size: 1.12rem;
  font-weight: 700;
  text-transform: uppercase;
  color: #14294B;
  line-height: 1.2;
}
.partner-card .pc-text { min-width: 0; }
.partner-card .pc-url {
  display: block;
  overflow-wrap: anywhere;
  word-break: break-word;
  font-family: system-ui, sans-serif;
  font-size: 0.82rem;
  font-weight: 400;
  text-transform: none;
  color: #10756C;
  margin-top: 4px;
  text-decoration: underline;
  text-underline-offset: 2px;
}
@media (max-width: 560px) {
  .partner-card { flex-direction: column; text-align: center; padding: 16px 14px; }
  .partner-card .pc-name { font-size: 1.02rem; }
}

/* -- 12. Reflow at 320 px (WCAG 1.4.10) ----------------------------------- */
/* Content must reflow to a 320 px viewport without a horizontal scrollbar. */
/* overflow-x:clip contains stray horizontal offsets without creating a scroll
   container, so position:sticky navigation keeps working. */
body { overflow-x: clip; }
.marquee, [class*="marquee"] { overflow: hidden !important; max-width: 100%; }

@media (max-width: 900px) {
  /* Slide-in animations park their element 40 px to the right until the
     scroll observer fires, which widens the document on small screens. */
  .slide-right, .slide-left { transform: none !important; }
  .footer-bottom, .footer-bottom-links, .footer-top { max-width: 100%; }
  /* Footer link rows are single-line flex containers; let them wrap. */
  .footer-links, .footer-bottom-links { flex-wrap: wrap !important; row-gap: 4px; max-width: 100%; }
}

@media (max-width: 640px) {
  /* Definition lists laid out as two fixed columns squeeze the value column
     below its minimum width — stack them instead. */
  dl { display: block !important; grid-template-columns: 1fr !important; }
  dl dt, dl dd { width: auto !important; max-width: 100% !important; margin-left: 0 !important; }
  dl dd { margin-bottom: 12px; }

  /* Data tables: fix the layout and let long source citations wrap. */
  table { table-layout: fixed !important; width: 100% !important; max-width: 100% !important; }
  th, td { word-break: break-word; overflow-wrap: anywhere; padding-left: 8px !important; padding-right: 8px !important; }
  .ss-page table { font-size: 0.86rem; }

  /* Buttons with long labels must wrap rather than force the page wider. */
  .btn, .btn-primary, .btn-outline, .btn-outline-white, .btn-ghost, .ss-btn {
    max-width: 100%; white-space: normal !important; text-align: center;
  }
  .btn-group { flex-wrap: wrap; }

  /* Long unbroken strings (URLs, emails, EIN lines) */
  p, li, dd, td, th, h1, h2, h3, h4 { overflow-wrap: break-word; }
}

@media (max-width: 460px) {
  /* Two-across partner tiles do not fit a 320 px viewport. */
  .partner-grid { grid-template-columns: 1fr !important; }
  .partner-featured { grid-template-columns: 1fr !important; }
  .container, .wrap, .ss-wrap, .page-hero-inner { padding-left: 14px !important; padding-right: 14px !important; }
  .cta-banner, .cta-banner > div { padding-left: 14px !important; padding-right: 14px !important; }
}

/* -- 13. Accessibility badge ---------------------------------------------- */
.rledc-a11y-badge {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 9px 16px 9px 12px;
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 999px;
  color: #FFFFFF !important;
  text-decoration: none !important;
  background: rgba(255, 255, 255, 0.06);
  transition: background 0.25s, border-color 0.25s;
  flex: none;
  order: -1;
}
.rledc-a11y-badge:hover {
  background: rgba(255, 255, 255, 0.13);
  border-color: #FFC845;
}
.rledc-a11y-badge svg { flex: none; color: #FFFFFF; }
.rledc-a11y-badge-txt {
  display: flex;
  flex-direction: column;
  line-height: 1.25;
  text-align: left;
}
.rledc-a11y-badge-txt strong {
  font-family: 'Barlow Condensed', system-ui, sans-serif;
  font-size: 0.86rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #FFFFFF !important;
}
.rledc-a11y-badge-txt span {
  font-family: system-ui, sans-serif;
  font-size: 0.7rem;
  color: rgba(255, 255, 255, 0.82) !important;
}
/* Footers that are not dark (rare) still need readable contrast. */
.rledc-a11y-badge:focus-visible { outline: 3px solid #FFC845 !important; outline-offset: 3px !important; }
@media (max-width: 640px) {
  .rledc-a11y-badge { width: 100%; justify-content: center; }
  .rledc-a11y-badge-txt { text-align: left; }
}


/* -- 14. Fallback mobile navigation --------------------------------------- */
.rledc-mobbtn { display: none; }
.rledc-mobnav { display: none; }

@media (max-width: 900px) {
  .rledc-mobbtn {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    margin-left: auto;
    min-width: 48px;
    min-height: 48px;
    padding: 12px;
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.4);
    border-radius: 3px;
    cursor: pointer;
    flex: none;
  }
  .rledc-mobbtn span {
    display: block;
    width: 22px;
    height: 2px;
    background: #FFFFFF;
    transition: transform 0.25s, opacity 0.25s;
  }
  .rledc-mobbtn.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .rledc-mobbtn.open span:nth-child(2) { opacity: 0; }
  .rledc-mobbtn.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

  .rledc-mobnav {
    display: none;
    background: #0D182A;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
    padding: 8px 0 14px;
  }
  .rledc-mobnav.open { display: block; }
  .rledc-mobnav a {
    display: flex;
    align-items: center;
    min-height: 48px;
    padding: 10px 20px;
    color: #FFFFFF !important;
    text-decoration: none;
    font-size: 0.94rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    border-bottom: 1px solid rgba(255, 255, 255, 0.07);
  }
  .rledc-mobnav a:last-child { border-bottom: 0; }
  .rledc-mobnav a.rledc-mobnav-sub { padding-left: 38px; font-weight: 400; font-size: 0.88rem; color: #D6E4E2 !important; }
  .rledc-mobnav a.rledc-mobnav-cta { background: #0E6A62; margin: 10px 20px 0; border-radius: 3px; justify-content: center; }
  .rledc-mobnav a:hover, .rledc-mobnav a:focus { background: rgba(255, 255, 255, 0.09); }
}


/* -- 15. Accessibility notice bar (fixed to the top of every page) --------- */
.rledc-topbar {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 10001;
  background: #0B1728;
  border-bottom: 1px solid rgba(255, 200, 69, 0.45);
  min-height: 38px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 18px;
  padding: 4px 22px;
  font-family: system-ui, -apple-system, sans-serif;
}
.rledc-topbar a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #FFFFFF !important;
  text-decoration: none !important;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  min-height: 30px;
  padding: 2px 4px;
}
.rledc-topbar a:hover { color: #FFD97A !important; text-decoration: underline !important; }
.rledc-topbar a:focus-visible { outline: 3px solid #FFC845 !important; outline-offset: 2px !important; }
.rledc-topbar svg { flex: none; color: #FFC845; }
.rledc-topbar .rledc-topbar-std {
  color: rgba(255, 255, 255, 0.72);
  font-size: 0.72rem;
  font-weight: 400;
  letter-spacing: 0.04em;
}

/* Push the page down by the bar height and re-anchor fixed/sticky navigation. */
body.rledc-has-topbar { padding-top: 38px; }
body.rledc-has-topbar nav,
body.rledc-has-topbar #main-nav { top: 38px !important; }
body.rledc-has-topbar .rledc-skip { top: -60px; }
body.rledc-has-topbar .rledc-skip:focus { top: 46px; }

@media (max-width: 700px) {
  .rledc-topbar { justify-content: center; padding: 4px 12px; gap: 10px; }
  .rledc-topbar .rledc-topbar-std { display: none; }
  .rledc-topbar a { font-size: 0.74rem; }
}

/* -- 15b. Compact header on scroll ----------------------------------------
   The full-size logo and the accessibility bar are useful when a visitor
   arrives. Once they start reading they cost vertical space, so both retract
   on the first scroll and return at the top of the page. Desktop only: on
   narrow screens the header is already compact and a moving header is more
   disruptive than helpful. */
@media (min-width: 901px) {
  .rledc-topbar {
    transition: transform 220ms ease, opacity 180ms ease;
    will-change: transform;
  }
  nav .nav-logo-img,
  #main-nav .nav-logo-img {
    transition: width 220ms ease, max-height 220ms ease;
  }
  nav, #main-nav { transition: top 220ms ease, padding 220ms ease; }

  /* Retract the accessibility bar out of view and reclaim its 38px. */
  body.rledc-scrolled .rledc-topbar {
    transform: translateY(-100%);
    opacity: 0;
    pointer-events: none;
  }
  body.rledc-scrolled.rledc-has-topbar { padding-top: 0 !important; }
  body.rledc-scrolled.rledc-has-topbar nav,
  body.rledc-scrolled.rledc-has-topbar #main-nav { top: 0 !important; }

  /* Subpages set a fixed banner height on the nav element itself. */
  body.rledc-scrolled nav,
  body.rledc-scrolled #main-nav {
    min-height: 0 !important;
    height: auto !important;
  }

  /* Retire the whole brand row — logo and organisation name — once reading
     begins. The links row remains, and it carries a Home link, so nothing
     becomes unreachable. Everything returns at the top of the page. */
  body.rledc-scrolled nav .nav-brand,
  body.rledc-scrolled #main-nav .nav-brand,
  body.rledc-scrolled nav .brand,
  body.rledc-scrolled #main-nav .brand {
    display: none !important;
  }

  /* Belt and braces: if a page marks its logo up differently, shrink it. */
  body.rledc-scrolled nav .nav-logo-img,
  body.rledc-scrolled #main-nav .nav-logo-img {
    width: 74px !important;
    max-height: 48px !important;
    height: auto !important;
  }

  /* Tighten the bar itself so the saved height is not spent on padding. */
  body.rledc-scrolled nav .nav-inner,
  body.rledc-scrolled #main-nav .nav-inner {
    height: auto !important;      /* the page sets a fixed 168px banner height */
    min-height: 0 !important;
    padding-top: 3px !important;
    padding-bottom: 3px !important;
    gap: 0 13px !important;
  }
  body.rledc-scrolled nav .nav-links,
  body.rledc-scrolled #main-nav .nav-links {
    justify-content: center !important;
  }
}

/* Honour a reduced-motion preference: still compact, but without animation. */
@media (prefers-reduced-motion: reduce) {
  .rledc-topbar,
  nav .nav-logo-img,
  #main-nav .nav-logo-img,
  nav, #main-nav { transition: none !important; }
}

/* -- 16. Community Profile hub cards -------------------------------------- */
.ss-hub-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 20px; }
.ss-page .ss-hub-card {
  display: flex;
  flex-direction: column;
  text-decoration: none !important;
  border-left: 3px solid #0E6A62;
  transition: box-shadow 0.3s, transform 0.3s;
}
.ss-page .ss-hub-card:hover { box-shadow: 0 8px 28px rgba(36, 65, 107, 0.16); transform: translateY(-2px); }
.ss-page .ss-hub-card h3 { color: #14294B !important; }
.ss-page .ss-hub-card p { flex: 1; }
.ss-page .ss-hub-go {
  margin-top: 14px;
  font-family: 'Barlow Condensed', system-ui, sans-serif;
  font-size: 0.86rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #0E6A62;
}

/* -- 17. Hero call-to-action buttons -------------------------------------- */
.ss-page .ss-hero .ss-btn {
  display: inline-block;
  background: #FFC845 !important;
  color: #12233A !important;
  font-family: 'Barlow Condensed', system-ui, sans-serif;
  font-size: 0.92rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 13px 26px;
  border-radius: 3px;
  text-decoration: none !important;
  min-height: 44px;
  margin: 6px 6px 0 0;
}
.ss-page .ss-hero .ss-btn:hover { background: #FFD97A !important; }
.ss-page .ss-hero .ss-btn-alt {
  background: transparent !important;
  color: #FFFFFF !important;
  border: 2px solid rgba(255, 255, 255, 0.55);
}
.ss-page .ss-hero .ss-btn-alt:hover { background: rgba(255, 255, 255, 0.14) !important; border-color: #FFC845; }

/* -- 18. Partner card role line and wide logo variant --------------------- */
.partner-card .pc-role {
  display: block;
  font-family: system-ui, sans-serif;
  font-size: 0.8rem;
  font-weight: 400;
  text-transform: none;
  color: #3D4652;
  line-height: 1.45;
  margin-top: 5px;
}
.partner-card img.pc-wide {
  width: 108px !important;
  height: auto !important;
  max-height: 76px;
  object-fit: contain;
}
.partner-featured { align-items: stretch; }
.partner-card { align-items: flex-start; }
.partner-card img { margin-top: 2px; }


/* -- 19. Sub-site pages (Data Centers, RecoveryReady, GrantStats) ---------- */
/* These sections were built separately and carry their own palettes. The rules
   below lift the failing values to WCAG AA without changing the designs. */

/* Data Centers */
.brand-sub { color: #A7B4C4 !important; }
.tag { color: #7A5A0C !important; }
.tag, span.tag { background: #FBF3DE !important; }

/* RecoveryReady */
.pill.g { color: #1D6B45 !important; background: #E2EFE7 !important; }
#demo-msg.ok, .ok { color: #14653A !important; }

/* `.sub` appears on both light body copy and the dark GrantStats sidebar,
   so the default is a dark readable grey and only the dark panel is lightened. */
.sub { color: #3D4652 !important; }
.ss-page .sub, .compliance-card .sub { color: #0E6A62 !important; }
.side .sub, .brand .sub, .side .brand .sub { color: #9FD8D2 !important; }


/* -- 20. Badge fallback container for pages with no footer ---------------- */
.rledc-a11y-footfallback {
  background: #0D182A;
  padding: 18px 16px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  margin-top: 32px;
}
body.rledc-has-footfallback { flex-wrap: wrap !important; align-content: flex-start; }
.rledc-a11y-footfallback { flex: 1 0 100% !important; }
.rledc-a11y-footfallback .rledc-a11y-badge { max-width: 100%; }
.rledc-a11y-badge { max-width: 100%; box-sizing: border-box; }
.rledc-a11y-badge-txt { min-width: 0; }