/* ------------------------------
   Global accessibility defaults
   ------------------------------ */

:root {
  /* Existing palette (kept) */
  --gad-dark-grey: #00212E;
  --gad-light-blue: #C5EFF7;
  --gad-lilac: #B85FB1;
  --gad-dark-purple: #44163E;
  --gad-sea-green: #3E8989;
  --gad-green: #50E28D;
  --gad-yellow: #F1BE46;
  --gad-orange: #DD852C;
  --gad-red: #E54A72;
  --gad-blue-grey: #2E5266;
  --gad-blue: #42A1DB;
  --gad-light-grey: #8F8E8F;

  /* Accessibility tokens */
  --focus-ring: #F1BE46; /* high salience */
  --focus-ring-offset: 3px;
  --focus-ring-width: 3px;

  /* Ensure focus ring contrast against dark nav and light surfaces */
  --focus-ring-shadow: 0 0 0 2px #00212E;

  /* Minimum target size (2.5.8) */
  --min-target: 24px;
}

/* Respect user preferences for reduced motion (2.3.3 advisory; good practice) */
@media (prefers-reduced-motion: reduce) {
  * {
    scroll-behavior: auto !important;
    transition: none !important;
    animation: none !important;
  }
}

/* Improve in-page anchor behaviour with sticky header (2.4.11 risk reduction) */
html {
  scroll-padding-top: 140px;
}

/* Provide a visible focus indicator everywhere (2.4.7) */
:focus {
  outline: none;
}

:focus-visible {
  outline: var(--focus-ring-width) solid var(--focus-ring);
  outline-offset: var(--focus-ring-offset);
}

/* Ensure focus ring is not lost on dark backgrounds */
.nav-link:focus-visible,
.calc_btn:focus-visible,
.res_btn:focus-visible,
button:focus-visible,
[role="button"]:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
a:focus-visible {
  box-shadow: var(--focus-ring-shadow);
}

/* Make focus visible for elements that are styled with border-radius */
.nav-link:focus-visible,
.calc_btn:focus-visible,
.res_btn:focus-visible,
button:focus-visible,
a:focus-visible {
  border-radius: 12px;
}

/* ------------------------------
   Skip link (2.4.1 Bypass Blocks)
   ------------------------------ */

/*
  Requires a corresponding element in layout, e.g.
  <a class="skip-link" href="#Home">Skip to main content</a>
*/
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 20000;
  padding: 10px 14px;
  background: #ffffff;
  color: #000000;
  border: 2px solid var(--gad-dark-grey);
  border-radius: 10px;
  text-decoration: none;
  font-family: arial;
  font-size: 1rem;
  line-height: 1.2;
}

.skip-link:focus,
.skip-link:focus-visible {
  left: 10px;
  top: 10px;
}

/* ------------------------------
   Date picker
   ------------------------------ */

/* No border on DateRangePicker */
.SingleDatePickerInput {
  border: 0px;
  background-color: transparent;
  border-color: transparent;
  box-shadow: transparent;
}

/* Fix box width of datepicker to be 100% of parent container*/
.DateInput, .DateInput_1 {
  width: 100%; /* replace with whatever length you prefer */
  height: 40px; /* fixed unit to avoid invalid CSS */
  background-color: transparent;
  border-color: transparent;
  box-shadow: transparent;
}

.DateInput_input, .DateInput_input_1 {
  text-align: center;
  font-family: arial;
  font-size: 0.8rem;
  font-weight: 400;
  background-color: transparent;
  color: black;
  margin: 0px;
  border-color: transparent;
  box-shadow: transparent;
}

/* Ensure date input has a visible focus ring (2.4.7) */
.DateInput_input:focus-visible,
.DateInput_input_1:focus-visible {
  outline: var(--focus-ring-width) solid var(--focus-ring) !important;
  outline-offset: var(--focus-ring-offset) !important;
}

/* ------------------------------
   Navigation links
   ------------------------------ */

/* Make links yellow and underlined on hover */
/* Need to use !important so that it overrides css in python code */
.nav-link:hover {
  color: var(--gad-yellow) !important;
  text-decoration-line: underline !important;
  text-decoration-color: var(--gad-yellow) !important;
}

/* Ensure keyboard users get the same affordance as hover (2.4.7, 1.4.1) */
.nav-link:focus-visible {
  color: var(--gad-yellow) !important;
  text-decoration-line: underline !important;
  text-decoration-color: var(--gad-yellow) !important;
}

/* Increase hit area for nav links (2.5.8) */
.nav-link {
  display: inline-block;
  min-height: var(--min-target);
  padding: 6px 8px;
}

/* ------------------------------
   Inputs and controls
   ------------------------------ */

/* Make inputs yellow when hovered over */
.inp:hover {
  background-color: var(--gad-yellow) !important;
}

/* Ensure focus state is visible on the input container too (2.4.7) */
.inp:focus-within {
  background-color: #ffffff !important;
  box-shadow: 0 0 0 3px var(--focus-ring) !important;
}

/* Ensure non-text contrast for input boundaries (1.4.11)
   - Many inputs remove their own borders; the parent .inp provides the boundary.
   - This enforces a consistent visible boundary even if inline styles change.
*/
.inp {
  border-color: var(--gad-dark-purple) !important;
}

/* Improve disabled appearance contrast (1.4.3 / 1.4.11 risk reduction)
   - Disabled controls should still be perceivable.
*/
button:disabled,
.calc_btn:disabled,
.res_btn:disabled {
  background-color: #6f6f6f !important; /* darker than #8F8E8F for better contrast with white */
  border-color: #6f6f6f !important;
  color: #ffffff !important;
  opacity: 1 !important; /* avoid low-contrast opacity */
}

/* Ensure minimum target size for small icon-like buttons (2.5.8)
   - Applies to the repeated "i" buttons and other small buttons.
*/
button,
.calc_btn,
.res_btn {
  min-width: var(--min-target);
  min-height: var(--min-target);
}

/* Make button shade change when hovered over */
.calc_btn:hover {
  background-color: var(--gad-blue-grey) !important;
  border-color: var(--gad-blue-grey) !important;
}

.res_btn:hover {
  background-color: var(--gad-blue-grey) !important;
  border-color: var(--gad-blue-grey) !important;
}

/* Ensure keyboard focus gets a clear state on buttons (2.4.7) */
.calc_btn:focus-visible,
.res_btn:focus-visible,
button:focus-visible {
  outline: var(--focus-ring-width) solid var(--focus-ring) !important;
  outline-offset: var(--focus-ring-offset) !important;
}

/* Target the checkbox input on hover */
.checkbox_inp:hover {
  box-shadow: 0 0 0 2px var(--gad-yellow) !important;
}

/* Ensure checkbox/radio focus is visible (2.4.7) */
.checkbox_inp:focus-visible {
  outline: var(--focus-ring-width) solid var(--focus-ring) !important;
  outline-offset: 2px !important;
}

/* ------------------------------
   Range slider (rc-slider)
   ------------------------------ */

/* Slider rail (background) */
.inp-range .rc-slider-rail {
  background-color: #e9ecef !important;
}

/* Slider handles */
.inp-range .rc-slider-handle {
  border: 2px solid var(--gad-dark-purple) !important;
  background-color: white !important;

  /* Increase handle size to meet 2.5.8 target size minimum */
  width: 24px !important;
  height: 24px !important;
  margin-top: -10px !important; /* keep aligned with track */
}

/* Handle on hover */
.inp-range .rc-slider-handle:hover {
  border-color: var(--gad-yellow) !important;
}

/* Handle on keyboard focus */
.inp-range .rc-slider-handle:focus-visible {
  outline: var(--focus-ring-width) solid var(--focus-ring) !important;
  outline-offset: 2px !important;
  box-shadow: var(--focus-ring-shadow) !important;
}

/* Tooltip */
.inp-range .rc-slider-tooltip-inner {
  background-color: var(--gad-dark-purple) !important;
  color: white !important;
}

/* Tooltip triangle/arrow */
.inp-range .rc-slider-tooltip-arrow {
  border-top-color: var(--gad-dark-purple) !important; /* Match tooltip background */
}

/* ------------------------------
   Details/Summary accordions
   ------------------------------ */

/* Ensure summary is clearly focusable and has adequate target size (2.4.7, 2.5.8) */
summary {
  min-height: 44px;
  padding-left: 12px;
  padding-right: 12px;
}

summary:focus-visible {
  outline: var(--focus-ring-width) solid var(--focus-ring) !important;
  outline-offset: var(--focus-ring-offset) !important;
}

/* ------------------------------
   Tables
   ------------------------------ */

/* Improve table readability and focus navigation */
table {
  border-collapse: collapse;
}

th, td {
  padding: 8px;
}

/* Ensure header cells are visually distinct without relying on colour alone */
th {
  font-weight: 700;
}

/* Allow keyboard users to see focus if table cells become focusable in future */
th:focus-visible,
 td:focus-visible {
  outline: var(--focus-ring-width) solid var(--focus-ring);
  outline-offset: 2px;
}