/* Equal outer spacing for homepage content; dialogs and the hero keep their own layout. */
@layer govtech {
  html body #homeSection {
    --home-section-space: 32px;
  }
  html body #homeSection > :is(section:not(#heroSliderContainer), #executiveSection, #home-ebook-section, .gis-wrapper, #stats-satisfaction, #systemsSection) {
    padding-top: var(--home-section-space) !important;
    padding-bottom: var(--home-section-space) !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
  }
  @media (max-width: 767px) {
    html body #homeSection { --home-section-space: 24px; }
  }

  /* The shared theme uses important inherited colors, so OIT roles belong in its layer. */
  html body #homeSection #ita-indicators h2,
  html body #homeSection #ita-indicators .oit-home-title,
  html body #homeSection #ita-indicators .oit-home-answer strong {
    color: var(--site-ink, #0f172a) !important;
    -webkit-text-fill-color: currentColor !important;
  }
  html body #homeSection #ita-indicators :is(.oit-home-kicker, .oit-home-code, .oit-home-chevron, .oit-home-answer a) {
    color: var(--site-accent, #237d38) !important;
    -webkit-text-fill-color: currentColor !important;
  }
  html body #homeSection #ita-indicators :is(.oit-home-meta, .oit-home-answer) {
    color: #475569 !important;
    -webkit-text-fill-color: currentColor !important;
  }
  html body #homeSection #ita-indicators :is(.oit-home-code, .oit-home-meta) {
    background: var(--site-soft, #edf7ee) !important;
    border-color: var(--site-soft-border, #cfe5d3) !important;
  }
  html body #homeSection #ita-indicators summary:hover,
  html body #homeSection #ita-indicators details[open] summary {
    background: var(--site-soft, #edf7ee) !important;
  }
  html body #homeSection #ita-indicators summary:hover .oit-home-title,
  html body #homeSection #ita-indicators details[open] .oit-home-title {
    color: var(--site-accent, #237d38) !important;
  }
  html body #homeSection #ita-indicators .oit-home-all {
    background: var(--site-button, #237d38) !important;
    border: 1px solid var(--site-button, #237d38) !important;
    color: #fff !important;
    -webkit-text-fill-color: #fff !important;
    text-decoration: none;
    transition: background-color .18s ease, border-color .18s ease;
  }
  html body #homeSection #ita-indicators .oit-home-all *,
  html body #homeSection #ita-indicators .oit-home-all i::before {
    color: #fff !important;
    -webkit-text-fill-color: #fff !important;
  }
  html body #homeSection #ita-indicators .oit-home-all:is(:hover, :focus-visible) {
    background: var(--site-deep, #155c2a) !important;
    border-color: var(--site-deep, #155c2a) !important;
    color: #fff !important;
  }
  html body #homeSection #ita-indicators .oit-home-all:focus-visible {
    outline: 3px solid var(--site-accent, #237d38) !important;
    outline-offset: 4px !important;
  }
}