/* ==========================================================================
   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; }
  nav .nav-logo-img { width: 46px !important; height: auto !important; }
  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) and (max-width: 1399px) {
  nav .nav-name { display: none !important; }
  nav .nav-links { gap: 11px; }
  nav .nav-links a { font-size: 0.65rem; letter-spacing: 0.04em; }
}
@media (min-width: 1400px) {
  nav .nav-links a { font-size: 0.71rem; letter-spacing: 0.08em; }
  nav .nav-links { gap: 16px; }
  nav .nav-name { max-width: 210px; }
}

/* 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); }
}