@import url("export.oswald.css");

/* =========================
   Global layout + header CSS
   (Leaflet-specific rules removed)
   ========================= */

/* ---------- spacing variables ---------- */
:root{
  --nav-height: 8rem;
  --pad-xs: 1rem;     /* <576 px */
  --pad-sm: 1.5rem;   /* ≥576 px */
  --pad-md: 3rem;     /* ≥768 px */
  --pad-lg: 8rem;    /* ≥992 px */
  --pad-xl: 10rem;    /* ≥1400 px */
  --pad-xxl: 20rem;   /* ≥1600 px */
  --bs-primary: #1b5e20;
  --bs-primary-rgb: 27, 94, 32;
  --bs-link-color: #1b5e20;
  --bs-link-hover-color: #154a19;
}

/* ---------- base body padding ---------- */
body{
  padding-top: 0;
  padding-left: var(--pad-xs);
  padding-right: var(--pad-xs);
}

input[type="checkbox"],
input[type="radio"],
.form-check-input {
  accent-color: #1b5e20;
}

.form-check-input:checked {
  background-color: #1b5e20;
  border-color: #1b5e20;
}

.form-check-input:focus {
  border-color: #1b5e20;
  box-shadow: 0 0 0 0.2rem rgba(27, 94, 32, 0.25);
}

.form-check-input:indeterminate {
  background-color: #1b5e20;
  border-color: #1b5e20;
}

@media (min-width: 576px){
  body{ padding-left: var(--pad-sm); padding-right: var(--pad-sm); }
}
@media (min-width: 768px){
  body{ padding-left: var(--pad-md); padding-right: var(--pad-md); }
}
@media (min-width: 992px){
  body{ padding-left: var(--pad-lg); padding-right: var(--pad-lg); }
}
@media (max-width: 1229px){
  :root{ --nav-height: 6.5rem; }
}
@media (min-width: 1600px){
  body{ padding-left: var(--pad-xl); padding-right: var(--pad-xl); }
}
@media (min-width: 1800px){
  body{ padding-left: var(--pad-xxl); padding-right: var(--pad-xxl); }
}

/* ---------- header container paddings ---------- */
.navbar.container-pad{
  padding-left: var(--pad-xs);
  padding-right: var(--pad-xs);
}
@media (min-width: 576px){
  .navbar.container-pad{ padding-left: var(--pad-sm); padding-right: var(--pad-sm); }
}
@media (min-width: 850px){
  .navbar.container-pad{ padding-left: var(--pad-md); padding-right: var(--pad-md); }
}
@media (min-width: 992px){
  .navbar.container-pad{ padding-left: 5rem; padding-right: 5rem; }
}
@media (min-width: 1400px){
  .navbar.container-pad{ padding-left: 6rem; padding-right: 6rem; }
}

/* ---------- shared footer ---------- */
.site-map.paint-bleed {
  position: relative;
  color: #fff;
}
.site-map.paint-bleed::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 0;
  bottom: 0;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
  width: 100vw;
  background: #1b5e20;
  border-top: 1px solid rgba(255,255,255,.16);
}
.site-map .site-map-feature {
  background: #154a19;
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 0.5rem;
  padding: 0.9rem 1rem;
}
.site-map h3 {
  letter-spacing: .04em;
  opacity: .95;
  font-size: 0.92rem;
}
.site-map .site-map-title {
  display: block;
  width: 100%;
  max-width: 12rem;
  padding-bottom: 0.25rem;
  border-bottom: 1px solid rgba(255,255,255,.55);
}
.site-map .site-map-link {
  color: #fff;
  text-decoration: none;
  font-size: 0.96rem;
  line-height: 1.25;
  transition: opacity .15s ease-in-out, text-decoration-color .15s;
}
.site-map li.mb-2 {
  margin-bottom: 0.35rem !important;
}
.site-map .site-map-link:hover,
.site-map .site-map-link:focus {
  color: #fff;
  text-decoration: underline;
  text-underline-offset: 2px;
  opacity: 1;
}
.site-map .site-map-funding {
  font-size: 0.92rem;
  line-height: 1.3;
  font-style: italic;
  opacity: .92;
}
#site-map { scroll-margin-top: 80px; }
@media (max-width: 991.98px) {
  .site-map .site-map-funding {
    text-align: center;
  }
  .site-map .site-map-feature {
    padding: 0.85rem 0.9rem;
  }
}
@media (min-width: 1500px){
  .navbar.container-pad{ padding-left: 10rem; padding-right: 10rem; }
}
@media (min-width: 1600px){
  .navbar.container-pad{ padding-left: 15rem; padding-right: 15rem; }
}
@media (min-width: 1800px){
  .navbar.container-pad{ padding-left: 20rem; padding-right: 20rem; }
}

/* ---------- title centering (wide) / left-align (narrow) ---------- */
.navbar-title-wrapper{
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  text-align: center;
  white-space: nowrap;
}
@media (max-width: 1300px){
  .logo-icon{ display:none !important; }
  .navbar-title-wrapper{
    position: static;
    transform: none;
    margin: 0;
    text-align: left;
  }
}

/* ---------- typography ---------- */
.navbar-title-text{ font-size: 1rem; }
.navbar-title-wrapper small{ font-size: 0.7rem; }
@media (min-width: 576px){
  .navbar-title-text{ font-size: 1.1rem; }
  .navbar-title-wrapper small{ font-size: 0.9rem; }
}
@media (min-width: 992px){
  .navbar-title-text{ font-size: 1.2rem; }
  .navbar-title-wrapper small{ font-size: 1rem; }
}
@media (min-width: 1231px){
  .navbar-title-text{ font-size: 1.3rem; }
}
@media (min-width: 1450px){
  .navbar-title-wrapper small{ font-size: 1.1rem; }
}

/* Default text everywhere */
html, body {
  font-family: Arial, Helvetica, sans-serif;
}

/* Headings only */
h1, h2, h3, h4, h5, h6 {
  font-family: "Oswald", Arial, Helvetica, sans-serif;
}

/* ---------- dropdown UX ---------- */
.landscape-header .nav-link,
.landscape-header .navbar-nav .nav-link.show,
.landscape-header .navbar-nav .show > .nav-link,
.landscape-header .dropdown-toggle {
  color: var(--bs-link-color);
}

.landscape-header .nav-link:hover,
.landscape-header .nav-link:focus,
.landscape-header .dropdown-toggle:hover,
.landscape-header .dropdown-toggle:focus {
  color: var(--bs-link-hover-color);
}

.landscape-header .nav-link.active {
  color: var(--bs-link-color);
}

.dropdown-menu .dropdown-item:hover {
  background-color: #1b5e20;
  color: #fff !important;
  border-color: #145214;
}
.dropdown-menu .dropdown-item { border: 1px solid transparent; }

/* allow wrapping in menus */
.dropdown-menu { max-width: 150px; white-space: normal; }
.dropdown-item { white-space: normal !important; overflow-wrap: break-word; }

/* Scrollable dropdowns for specific menus */
:root{ --dropdown-item-h: 2.25rem; }
#dataDropdown + .dropdown-menu,
#toolsDropdown + .dropdown-menu{
  max-height: calc(var(--dropdown-item-h) * 15);
  overflow-y: auto;
  overscroll-behavior: contain;
}
#dataDropdown + .dropdown-menu .collapse,
#toolsDropdown + .dropdown-menu .collapse{
  max-height: calc(var(--dropdown-item-h) * 15);
  overflow-y: auto;
}
#dataDropdown + .dropdown-menu .collapse.show,
#toolsDropdown + .dropdown-menu .collapse.show{ display: block; }

/* ---------- navbar + banner ---------- */
.landscape-header{
  display: flex;
  flex-direction: column;
}
.prelim-banner{
  background-color: #f8f9fa;
  color: #dc3545;
  text-align: center;
  font-weight: 600;
  padding: 0.25rem 0;
  border-top: 1px solid #dee2e6;
  width: 100%;
}

/* ---------- utilities / colors / components ---------- */
.text-orange { color: #cc5500; }
.text-purple { color: purple; }
.text-blue   { color: #003366; }

.img-fluid-temp { max-width: 90%; }

.download-section{
  background-color: #f8f9fa;
  border: 1px solid #e0e0e0;
  border-radius: .25rem;
  padding: 1rem;
  height: 100%;
}
.download-section h5{ margin-bottom: .75rem; }
#downloads .btn{ display:block; width:100%; }

.downloads-side{ min-width: 200px; text-align: center }
@media (min-width: 992px){ .flex-lg-gap{ column-gap: 1rem; } .downloads-side{ border-left: 1px solid #ced4da; padding-left: 1rem; } }
@media (max-width: 991.98px){ .downloads-side{ border-top: 1px solid #ced4da; padding-top: 1rem; } }

[aria-expanded="true"] .toggle-icon{ transform: rotate(180deg); }

.btn-darkgreen{ background-color:#1b5e20; color:#fff; border:1px solid #145214; }
.btn-darkgreen:hover{ background-color:#104110; color:#fff; }
.btn-all{ background-color:#e8efe9; color:#000; }

.map-border-green{ border:2px solid #1b5e20; }
.alert-info-green{ background-color:#e8efe9; border:1px solid #326e36; }
.text-darkgreen{ color:#1b5e20 !important; }

.loader{
  position: fixed;
  inset: 0;
  background: #fff;
  z-index: 2000;
}
#map.hidden-until-ready{ visibility: hidden; }

/* anchor headings visible below navbar */
:where(h1,h2,h3,h4,h5,h6)[id]{ scroll-margin-top: 1rem; }

/* map container height (agnostic: works with OpenLayers) */
#map{ height: 75vh; }

/* thumbnails */
.thumb{
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

/* make sure later sections don't float beside flex blocks */
#state-map{ clear: both; margin-top: 1rem; }

/* tabs with green accent */
.green-nav{ color:#1b5e20 !important; border:1px solid; }
.green-nav:hover{ color:#104100 !important; border-color:#145214 !important; }
.nav-tabs .nav-link.green-nav.active,
.nav-tabs .nav-link.green-nav.active:hover{
  color:#fff !important; background-color:#1b5e20 !important; border-color:#145214 !important;
}
/* section anchors with scroll margin using nav height variable */
#about, #cool-air, #next-steps { scroll-margin-top: 1rem; }

/* ---------- Generic legend box (OL-friendly) ---------- */
.info.legend{
  background:#fff;
  padding:10px;
  line-height:1.4em;
  box-shadow:0 0 15px rgba(0,0,0,0.2);
  border-radius:4px;
  font-size:13px;
}
.info.legend h4{ margin:0 0 5px; font-weight:bold; }
.info.legend .bar{ margin:4px 0 6px 0; }
.info.legend .tick{ display:flex; justify-content:space-between; font-family:monospace; }
.info.legend .tick-container{ display:flex; justify-content:space-between; width:240px; margin-top:4px; }
.info.legend .tick-label{ font-family:monospace; font-size:12px; text-align:center; }