/* ============================================================
   LGPS site styles
   - Global section: site chrome + interior pages (Pelican-based)
   - Scoped section (.explore-page): the Explore tool's own styles
   ============================================================ */

html {
  font-size: 14px;
}

@media (min-width: 768px) {
  html {
    font-size: 16px;
  }
}

html {
  margin: 0;
  padding: 0;
  height: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0 !important;
  padding: 0 !important;
  background-color: #ffffff !important;
  display: flex !important;
  flex-direction: column !important;
  min-height: 100vh;
}

main {
  display: flex;
  flex-direction: column;
  flex: 1 0 auto;
}

/* Skip Navigation Link - WCAG Level A Requirement */
.skip-link {
  position: absolute;
  top: -40px;
  left: 0;
  background: #000;
  color: #fff;
  padding: 8px 12px;
  text-decoration: none;
  z-index: 1000;
  font-weight: 600;
  transition: top 0.2s ease, background-color 0.2s ease;
}

.skip-link:focus {
  top: 0;
  background: #003166;
  outline: 3px solid #fdb714;
  outline-offset: 2px;
}

/* Remove dotted underline from abbreviations */
abbr,
abbr[title] {
  text-decoration: none !important;
  border-bottom: none !important;
  cursor: inherit !important;
}

/* AAA Visual Presentation - Paragraph Spacing and Line Length */
p {
  margin-bottom: 1em;
  line-height: 1.5;
}

.content-wrapper,
.container p {
  max-width: 80ch;
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

/* Menu Button Accessibility - Line Height Fix */
.navbar-toggler {
  line-height: 1.5;
}

/* Official Banner - icons and readable text width */
.banner-icon {
  width: 20px;
  height: 20px;
}

.official-banner p {
  max-width: 75ch;
}

.content-container {
  min-height: 100%;
  box-shadow: none !important;
}

/* Utility classes (replace former inline styles, keeps CSP strict) */
.content-pad {
  margin-top: 0;
  padding-top: 3rem;
  padding-bottom: 3rem;
}

.content-pad-top {
  margin-top: 0;
  padding-top: 3rem;
}

.about-col {
  max-width: 750px;
}

.surface-card {
  background-color: #f8f9fa;
}

/* ===== DUAL PANE HERO ===== */
.hero-dual-pane {
  background-size: cover !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  background-color: transparent !important;
  margin: 0 0 -1px 0 !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  position: relative !important;
  isolation: isolate;
  flex: 1 0 auto !important;
  min-height: 0 !important;
}

.hero-capitol {
  background-image: url('/img/state_capitol.jpg');
}

.hero-dual-pane .container {
  padding-top: 2.5rem !important;
  padding-bottom: 2.5rem !important;
  position: relative !important;
  z-index: 3 !important;
}

/* Remove gap between hero and footer */
footer.footer,
footer.footer-basic {
  position: static !important;
  margin-top: 0 !important;
  transform: none !important;
  padding-bottom: 0 !important;
  bottom: auto !important;
  flex-shrink: 0 !important;
}

.footer-basic .links-wrapper {
  padding-top: 0 !important;
}

.hero-dual-pane > .overlay {
  position: absolute !important;
  top: 0;
  bottom: 0;
  width: 50%;
  z-index: 1;
  pointer-events: none;
}

.hero-dual-pane .overlay-left {
  left: 0 !important;
  background-color: rgba(0, 40, 85, 0.85) !important;
}

.hero-dual-pane .overlay-right {
  left: auto !important;
  right: 0 !important;
  background-color: rgba(0, 130, 130, 0.85) !important;
}

@media (max-width: 991px) {
  .hero-dual-pane .overlay {
    width: 100%;
  }

  .hero-dual-pane .overlay-right {
    display: none;
  }
}

/* Hero Text Styling */
.hero-big-text {
  font-size: 2rem;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0.02em;
  color: #ffffff;
  margin-bottom: 2em;
  position: relative;
  padding-left: 1rem;
  border-left: 4px solid #fdb714;
}

.hero-subtitle {
  font-size: 1.5rem;
  font-weight: 600;
  color: #ffffff;
  border-left: 4px solid #fdb714;
  margin-bottom: 2em;
  letter-spacing: 0.05em;
  padding-left: 1rem;
  line-height: 1.5;
}

.hero-description {
  font-size: 1rem;
  line-height: 1.5;
  color: #ffffff;
  margin-bottom: 0.75rem;
  padding-left: 1rem;
}

@media (min-width: 768px) {
  .hero-big-text { font-size: 2.5rem; }
  .hero-subtitle { font-size: 1.75rem; }
  .hero-description { font-size: 1.125rem; }
}

@media (min-width: 992px) {
  .hero-big-text { font-size: 2.75rem; }
}

/* ===== NAVIGATION POLISH ===== */
.navbar-basic .navbar-nav,
.navbar-nav-left {
  margin-left: 0 !important;
}

.navbar-nav .nav-link {
  position: relative;
  transition: color 0.3s ease;
}

.navbar-nav .nav-link::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 0;
  height: 2px;
  background: currentColor;
  transition: width 0.3s ease, left 0.3s ease;
}

.navbar-nav .nav-link:hover::after,
.navbar-nav .nav-link:focus::after {
  width: 100%;
  left: 0;
}

/* ===== BUTTON POLISH ===== */
.btn {
  transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease, border-color 0.2s ease;
  position: relative;
}

.btn:hover:not(:disabled) {
  transform: translateY(-2px);
}

.btn:active:not(:disabled) {
  transform: translateY(0);
}

.btn:focus,
.btn:active:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
  transition: box-shadow 0.2s ease;
}

.btn .fa-arrow-right,
.btn .fas.fa-arrow-right {
  transition: transform 0.2s ease;
  display: inline-block;
}

.btn:hover .fa-arrow-right,
.btn:hover .fas.fa-arrow-right {
  transform: translateX(4px);
}

/* ===== CARD INTERACTIONS ===== */
.no-shadow {
  box-shadow: none !important;
}

.card {
  transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
  border: 1px solid #dee2e6;
}

.card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
  border-color: #003166;
}

.card-body .fas,
.card-body .fa {
  transition: transform 0.3s ease, color 0.3s ease;
}

.card:hover .fas,
.card:hover .fa {
  transform: scale(1.1);
}

/* ===== FOOTER POLISH ===== */
.footer a,
.footer-basic a {
  transition: color 0.3s ease, text-decoration-color 0.3s ease;
  text-decoration: underline;
  text-decoration-color: transparent;
}

.footer a:hover,
.footer a:focus,
.footer-basic a:hover,
.footer-basic a:focus {
  text-decoration-color: currentColor;
}

.footer,
.footer-basic {
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.05);
}

/* ===== BACK TO TOP BUTTON ===== */
.back-to-top,
a[href="#main-content"].btn {
  transition: transform 0.3s ease, opacity 0.3s ease, background-color 0.3s ease;
  opacity: 0.9;
}

.back-to-top:hover,
a[href="#main-content"].btn:hover {
  transform: translateY(-3px);
  opacity: 1;
}

.back-to-top .fa-arrow-up,
a[href="#main-content"] .fa-arrow-up {
  transition: transform 0.2s ease;
}

.back-to-top:hover .fa-arrow-up,
a[href="#main-content"]:hover .fa-arrow-up {
  transform: translateY(-2px);
}

/* ===== ACCESSIBILITY FOCUS ===== */
.btn:focus,
.btn:active:focus,
.btn-link.nav-link:focus,
.form-control:focus,
.form-check-input:focus,
a:focus,
button:focus {
  transition: box-shadow 0.2s ease, outline 0.2s ease;
}

a:focus-visible {
  outline: 2px solid #258cfb;
  outline-offset: 3px;
  transition: outline-offset 0.2s ease;
}

/* ===== COLLAPSE/EXPAND ANIMATIONS ===== */
.official-banner .collapse,
.official-banner .collapsing {
  transition: height 0.35s ease;
}

.official-banner button .fa,
.official-banner button .fas {
  transition: transform 0.3s ease;
}

.official-banner button[aria-expanded="true"] .fa,
.official-banner button[aria-expanded="true"] .fas {
  transform: rotate(180deg);
}

/* ===== TYPOGRAPHY REFINEMENT ===== */
h1, h2, h3, h4, h5, h6 {
  line-height: 1.3;
}

/* ===== INTERIOR PAGE HEADERS ===== */
.interior-hero {
  background: linear-gradient(135deg, #003166 0%, #005a8c 100%);
  padding: 3rem 0;
  margin-bottom: 3rem;
  position: relative;
}

.interior-hero::after {
  content: '';
  position: absolute;
  bottom: -1px;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, #fdb714 0%, #f58220 100%);
}

.interior-hero h1 {
  color: #ffffff;
  font-size: 2.5rem;
  font-weight: 700;
  margin-bottom: 0.5rem;
}

.interior-hero p {
  color: rgba(255, 255, 255, 0.9);
  font-size: 1.125rem;
  margin-bottom: 0;
  max-width: 70ch;
}

@media (max-width: 767px) {
  .interior-hero {
    padding: 2rem 0;
    margin-bottom: 2rem;
  }

  .interior-hero h1 { font-size: 1.75rem; }
  .interior-hero p { font-size: 1rem; }
}

/* ===== MICRO-INTERACTIONS ===== */
.navbar-toggler {
  transition: transform 0.2s ease;
}

.navbar-toggler:hover {
  transform: scale(1.05);
}

.fa, .fas, .far {
  transition: transform 0.2s ease;
}

img {
  transition: transform 0.3s ease, opacity 0.3s ease;
}

a:hover img {
  transform: scale(1.02);
}

/* ===== REDUCED MOTION SUPPORT - WCAG 2.2 AAA (2.3.3) ===== */
@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;
  }

  .btn:hover,
  .card:hover,
  .back-to-top:hover {
    transform: none !important;
  }
}

/* ============================================================
   EXPLORE TOOL — Pelican/Bootstrap-skinned. Only small touches
   here; the bulk of the styling comes from the Pelican CSS.
   ============================================================ */

/* The filter card sits just under the interior hero, which has a
   3rem bottom margin; pull the filter bar up to tighten the gap.
   position/z-index keep the open filter dropdowns painting above the
   results content below (native <select> popups didn't need this, but
   the custom Bootstrap dropdown menus are in-flow DOM elements). */
.explore-filter-wrap {
  margin-top: -1.5rem;
  position: relative;
  z-index: 1030;
}

.pm-card {
  transition: box-shadow 0.2s ease, border-color 0.2s ease;
}

.pm-card:hover {
  box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.1) !important;
  transform: none;
}

.form-control-lg {
  font-size: 1.25rem;
  padding: 0.5rem 1rem;
}

input[type="search"] {
  -webkit-appearance: none;
  appearance: none;
}

/* Indicator data: header bar of the Performance Data / Quarterly Notes cards
   (moved out of inline styles to keep the strict CSP — no 'unsafe-inline'). */
.data-card-header {
  background: #e9ecef;
  border-radius: calc(0.5rem - 1px) calc(0.5rem - 1px) 0 0;
}

/* Separated borders so the sticky header's divider travels with it
   (collapsed borders are painted table-level and let rows bleed through). */
.perf-table {
  border-collapse: separate;
  border-spacing: 0;
}

.perf-table thead th {
  background-color: #e9ecef;
  box-shadow: inset 0 -2px 0 #adb5bd;
  position: sticky;
  top: 0;
  z-index: 2;
}

/* "Show all years" view scrolls within a fixed height. */
.perf-scroll {
  max-height: 400px;
  overflow-y: auto;
}

/* Performance chart: wrapper scrolls horizontally on desktop when there are many
   bars; the canvas wrapper height/min-width are set per-render via the CSSOM. */
.chart-scroll-x {
  overflow-x: auto;
  overflow-y: hidden;
}

.chart-canvas-wrap {
  position: relative;
}

/* Filter dropdowns (Fiscal Year, Department, Agency, Program) are custom
   Bootstrap dropdowns rather than native <select> so they always open
   downward (data-bs-flip="false"). This caps the menu height and scrolls
   long option lists — replaces the old inline style to keep the strict CSP. */
.explore-menu-scroll {
  max-height: 300px;
  overflow-y: auto;
}

/* Disabled pagination text (Previous/Next/ellipsis): darken from the theme default
   (#5c6a6e on #d8dddf = 4.09:1, below AA) to meet WCAG 1.4.3 (>=4.5:1). The disabled
   Previous/Next are rendered as non-focusable <span> in the markup, so they are not
   reachable by keyboard either (WCAG 2.4.3). */
.pagination .page-item.disabled .page-link,
.pagination .page-link[aria-disabled="true"] {
  color: #495057;
}

/* WCAG 2.2 2.5.8 Target Size (Minimum): the alert close button is ~21px at the mobile
   14px root; pad its hit area to at least 24x24 CSS px. */
.btn-close {
  min-width: 24px;
  min-height: 24px;
  background-position: center;
}

/* Respect users who ask for less motion (OS "reduce motion" setting): neutralize
   non-essential transitions/animations and smooth scrolling. Honors WCAG 2.3.3. */
@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;
  }
}