/* Google Fonts Import */
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&family=Source+Sans+3:wght@300;400;500;600;700;800&family=IBM+Plex+Sans:wght@300;400;500;600;700&display=swap");

/* Style Tokens & Variables */
:root {
      --deep-navy: #172b4d;
      --california-gold: #d4af37;
      --patriot-red: #b22234;
      --warm-sand: #f7f3ea;
      --color-maca-gold: #d4af37;
      --white: #ffffff;
      --dark-text: #2d3748;
      --light-gray: #edf2f7;
      --transition-speed: 0.3s;
      --font-primary: "Inter", "Source Sans 3", Aptos, "IBM Plex Sans", sans-serif;
      --bs-primary-rgb: 23, 43, 77 !important;
}
.text-warning,
.text-maca-gold,
.text-brand-gold {
      color: var(--color-maca-gold) !important;
}
.bg-brand-gold {
      background-color: var(--color-maca-gold) !important;
}
.text-navy {
      color: var(--deep-navy) !important;
}
.text-red {
      color: var(--patriot-red) !important;
}
.bg-brand-red {
      background-color: var(--patriot-red) !important;
}
.bg-brand-blue,
.bg-navy,
.bg-maca-navy {
      background-color: var(--deep-navy) !important;
}

/* Core Element Styling */
body {
      font-family: var(--font-primary);
      background-color: #f7f3ea;
      /* background-color: whitesmoke; */
      color: var(--dark-text);
      line-height: 1.6;
}

.text-xs {
      font-size: 0.75rem !important;
}

h1,
h2,
h3,
h4,
h5,
h6 {
      font-weight: 800;
      color: var(--deep-navy);
}

/* Header & Footer Custom Rules */
.navbar-custom {
      background-color: var(--white);
      border-bottom: 3px solid var(--california-gold);
      box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}

.brand-title {
      /* color: var(--deep-navy) !important; */
      font-weight: 800;
      letter-spacing: -0.5px;
}

.brand-subtext {
      font-size: 0.75rem;
      color: var(--california-gold);
      font-weight: 600;
      text-transform: uppercase;
}

.nav-link-custom {
      /* color: var(--deep-navy) !important; */
      font-weight: 600;
      transition: color var(--transition-speed);
      font-size: 15px;
      position: relative;
      padding: 0.5rem 1rem !important;
}

.nav-link-custom:hover,
.nav-link-custom.active {
      color: var(--california-gold) !important;
}

.nav-link-custom.active::after {
      content: "";
      position: absolute;
      bottom: 0;
      left: 1rem;
      right: 1rem;
      height: 3px;
      background-color: var(--california-gold);
      border-radius: 2px;
}

/* Buttons and Hitboxes (Accessibility Target: Min 44px Height) */
.btn-patriot {
      background-color: var(--patriot-red);
      color: var(--white);
      font-weight: 700;
      border: 2px solid var(--patriot-red);
      transition: all var(--transition-speed);
}

.btn-patriot:hover {
      background-color: var(--deep-navy);
      border-color: var(--deep-navy);
      color: var(--white);
}

.btn-gold-outline {
      background-color: transparent;
      color: var(--california-gold);
      border: 2px solid var(--california-gold);
      font-weight: 700;
      transition: all var(--transition-speed);
}

.btn-gold-outline:hover {
      background-color: var(--california-gold);
      color: var(--deep-navy);
}

.btn-navy {
      background-color: var(--deep-navy);
      color: var(--white);
      border: 2px solid var(--deep-navy);
      font-weight: 700;
      transition: all var(--transition-speed);
}

.btn-navy:hover {
      background-color: transparent;
      color: var(--deep-navy);
}

.btn,
.form-control,
.form-select {
      min-height: 44px; /* Accessibility Hit-box limit */
      border-radius: 6px;
      padding: 0.5rem 1.25rem;
      font-size:16px;
}

/* Hero Section Flag Watermark Overlay */
.hero-section {
      position: relative;
      /* background-color: var(--warm-sand); */
      padding: 6rem 0;
      overflow: hidden;
}

.hero-section .card h3 {
      font-size: 25px;
}

.crisis-section .card-body a {
      font-size: 18px;
}
.crisis-section .card-body small {
      font-size: 14px;
}

/* Warm Sand Alternating Rows */
.row-alternate:nth-child(even) {
      background-color: var(--warm-sand);
}

/* Tabbed Pillar Design */
.policy-sidebar {
      border-right: 3px solid var(--warm-sand);
}

.policy-tab-link {
      color: var(--deep-navy);
      font-weight: 700;
      padding: 1rem;
      border-radius: 6px;
      margin-bottom: 0.5rem;
      transition: all var(--transition-speed);
      border-left: 4px solid transparent;
}

.policy-tab-link:hover {
      background-color: var(--warm-sand);
      color: var(--deep-navy);
}

.policy-tab-link.active {
      background-color: var(--warm-sand);
      color: var(--deep-navy);
      border-left-color: var(--california-gold);
}

.callout-box {
      background-color: var(--warm-sand);
      border-left: 5px solid var(--california-gold);
      border-radius: 4px;
      padding: 1.5rem;
      margin-top: 1.5rem;
      margin-bottom: 1.5rem;
}

.callout-title {
      color: var(--deep-navy);
      font-weight: 800;
      font-size: 1.1rem;
}

.callout-amount {
      font-size: 2rem;
      font-weight: 800;
      color: var(--patriot-red);
}

/* Map Hub Styles */
.map-container {
      background: var(--warm-sand);
      border-radius: 12px;
      padding: 1.5rem;
      border: 2px solid var(--deep-navy);
      box-shadow: inset 0 2px 10px rgba(0, 0, 0, 0.05);
}

.california-map-svg {
      filter: drop-shadow(0 4px 10px rgba(23, 43, 77, 0.15));
}

.county-boundary,
.county-part {
      fill: var(--white);
      stroke: var(--deep-navy);
      stroke-width: 0.15;
      transition:
            fill var(--transition-speed),
            stroke var(--transition-speed);
      cursor: pointer;
}

.county-boundary:hover,
.county-boundary:hover .county-part {
      fill: var(--california-gold) !important;
      stroke: var(--deep-navy);
}

.county-boundary.active,
.county-boundary.active .county-part {
      fill: var(--deep-navy) !important;
      stroke: var(--california-gold);
      stroke-width: 0.3;
}

.info-panel {
      border: 2px solid var(--deep-navy);
      border-radius: 12px;
      background-color: var(--white);
      box-shadow: 0 8px 16px rgba(23, 43, 77, 0.08);
}

.info-header {
      background-color: var(--deep-navy);
      color: var(--white);
      padding: 1rem 1.5rem;
      border-top-left-radius: 10px;
      border-top-right-radius: 10px;
}

/* Scorecard Badge Styles */
.score-badge {
      display: inline-block;
      padding: 0.4rem 0.8rem;
      border-radius: 30px;
      font-weight: 800;
      font-size: 0.9rem;
      text-align: center;
      width: 75px;
}

.score-high {
      color: #198754;
      border: 2px solid #198754;
      background-color: rgba(25, 135, 84, 0.1);
}

.score-medium {
      color: var(--california-gold);
      border: 2px solid var(--california-gold);
      background-color: rgba(212, 175, 55, 0.1);
}

.score-low {
      color: var(--patriot-red);
      border: 2px solid var(--patriot-red);
      background-color: rgba(178, 34, 52, 0.1);
}

/* Donation preset cards styling */
.donation-btn-card {
      border: 2px solid var(--deep-navy);
      border-radius: 8px;
      padding: 1.2rem;
      text-align: center;
      cursor: pointer;
      font-weight: 800;
      font-size: 1.25rem;
      color: var(--deep-navy);
      background-color: var(--white);
      transition: all var(--transition-speed);
      display: flex;
      justify-content: center;
      align-items: center;
      height: 60px;
}

.donation-btn-card:hover {
      background-color: var(--warm-sand);
}

.donation-btn-card.active {
      background-color: var(--patriot-red);
      color: var(--white);
      border-color: var(--patriot-red);
}

/* Toggle Switch Styling */
.switch-field {
      display: flex;
      overflow: hidden;
      border: 2px solid var(--deep-navy);
      border-radius: 8px;
      max-width: fit-content;
      margin: 0 auto;
}

.switch-field input {
      position: absolute !important;
      clip: rect(0, 0, 0, 0);
      height: 1px;
      width: 1px;
      border: 0;
      overflow: hidden;
}

.switch-field label {
      background-color: var(--white);
      color: var(--deep-navy);
      font-weight: 700;
      padding: 0.5rem 1.5rem;
      text-align: center;
      margin-right: -1px;
      border-right: 1px solid var(--deep-navy);
      transition: all 0.1s ease-in-out;
      cursor: pointer;
      margin-bottom: 0;
      min-height: 44px;
      display: inline-flex;
      align-items: center;
}

.switch-field label:last-child {
      border-right: none;
}

.switch-field input:checked + label {
      background-color: var(--deep-navy);
      color: var(--white);
      box-shadow: none;
}

/* Legal Footer block */
.footer-disclaimer-box {
      border: 1px solid var(--california-gold);
      padding: 0.75rem 1.5rem;
      margin-top: 2rem;
      display: inline-block;
}

.footer-disclaimer-text {
      font-size: 0.8rem;
      letter-spacing: 0.5px;
      font-weight: 600;
      color: var(--white);
      text-transform: uppercase;
}

/* Accordion Custom Styling */
.accordion-button:not(.collapsed) {
      color: var(--deep-navy);
      background-color: var(--warm-sand);
}

.accordion-button:focus {
      border-color: var(--california-gold);
      box-shadow: 0 0 0 0.25rem rgba(212, 175, 55, 0.25);
}

@media only screen and (max-width: 1400px) {
      .navbar .nav-link {
            font-size: 13px !important;
      }
      .navbar .btn-patriot,
      .navbar .btn-gold-outline {
            font-size: 13px !important;
      }
      .crisis-section .card-body a {
            font-size: 10px;
      }
      .crisis-section .card-body small {
            font-size: 12px;
            display: block;
            width: 65%;
      }
}

@media only screen and (max-width: 992px) {
      .navbar-nav {
            display: none;
      }
      .navbar-collapse.collapse.show {
            visibility: visible;
      }
}