/* assets/css/index.css */
:root {
  
  /* Typography (swap these names once your fonts are live) */
  --font-heading: "Factoria", "Roboto Slab", Georgia, serif;
  --font-body:    "myriad-pro", "Industry", "Inter", "Helvetica Neue", Arial, sans-serif;

  /* Optional weights */
  --fw-heading: 700;
  --fw-body:    400;

  /* Brand primary colors */
  --clr-pri-red:      #BE0000;  /* Utah Red - combine with White, Salt Flat Grey */
  --clr-pri-black:    #000;  /* Black - combine with White, Granite Peak, Wasatch Sunrise, Mountain Green, Great Salt Lake, Salt Flat Grey */
  --clr-pri-white:    #fff;     /* White - combine with Utah Red, Black, Red Rocks, Zion Cinder Cone */
  --clr-pri-gray-900: #707271;  /* Zion Cinder Cone - combine with White */
  --clr-pri-gray-700: #708E99;  /* Granite Peak - combine with Black */
  --clr-pri-gray-100: #E2E6E6;  /* Salt Flat Grey - combine with Utah Red, Black, Red Rocks */
  --clr-pri-red-900:  #890000;  /* Red Rocks - combine with White, Wasatch Sunrise, Mountain Green, Great Salt Lake, Salt Flat Grey */
  --clr-pri-green-700:#6CC24A;  /* Mountain Green - combine with Black, Red Rocks */
  --clr-pri-green-300:#3ABFC0;  /* Great Salt Lake - combine with Black, Red Rocks */
  --clr-pri-amber:    #FFB81D;  /* Wasatch Sunrise - combine with Black, Red Rocks */

  --clr-purple:       #7B3FA1;
  --clr-darker-blue:  #4484EB;

  --clr-acc-btn:      #F8F8F8;
  --clr-acc-btn-hover:#372C2C;
  --clr-acc-btn-txt:  #47494A;
  --clr-acc-btn-txt-muted: #7b7b7b;

  --form-input-bg-color: #F9F9F9;

  /* Text colors */
  --text-dark: var(--clr-pri-black);
  --text-light: var(--clr-pri-white);
  --text-accent: var(--clr-pri-red);

  /* Map marker colors */
  --marker-red: var(--clr-pri-red);
  --marker-purple: var(--clr-purple);         /* #7B3FA1 */
  --marker-green: var(--clr-pri-green-700);   /* #1E8E3E */
  --marker-blue: var(--clr-pri-green-300);    /* #1976D2 */
  --marker-blue-700: var(--clr-darker-blue);  /* #4484EB */
  --marker-orange: var(--clr-pri-amber);      /* #FB8C00 */
  --marker-gray: var(--clr-pri-gray-900);

  /* UI helpers */
  --clr-outline: rgba(0,0,0,.08);

  --btn-red-bg:var(--clr-pri-red); 
  --btn-red-bg-hover:var(--clr-pri-red-900);
  --kw-hit-bg: var(--clr-pri-green-300); 
  --kw-hit-border:var(--clr-outline);

  --focus-box-shadow:0 0 0 0.25rem rgba(253, 13, 13, 0.25);

  /* --uu-red:#BE0000; 
  --uu-red-700:#890000;
  --uu-gray-100:#f8f9fa; 
  --uu-gray-300:#dee2e6; 
  --uu-gray-700:#495057;
  --uu-dark-gray: #333333;
  --uu-black: #000000; 
  --uu-text:#212529; */
}

*, ::after, ::before {
  box-sizing: border-box;
}

body {
  background-color: var(--clr-pri-white);
  font-family: var(--font-body);
  color: var(--clr-pri-black);

}

a {
  color: var(--clr-pri-red);
  text-decoration: none;
}

a:hover, a:focus {
  color:var(--clr-pri-red-900);
}

/* Headings use Factoria */
h1, h2, h3, h4, h5, h6,
.display-1, .display-2, .display-3, .display-4 {
  font-family: var(--font-heading);
  font-weight: var(--fw-heading);
  letter-spacing: .2px;
  color: var(--clr-pri-black);
}

h1 { font-size: clamp(2.0rem, 3vw + 1rem, 3.0rem); line-height: 1.1; }
h2 { font-size: clamp(1.6rem, 2.5vw + .8rem, 2.25rem); line-height: 1.15; }
h3 { font-size: clamp(1.25rem, 1.5vw + .5rem, 1.5rem); line-height: 1.2; }
h4 { font-size: 1.25rem; line-height: 1.25; }
h5 { font-size: 1.1rem;  line-height: 1.3; }
h6 { font-size: 1rem;    line-height: 1.35; }

legend { font-size: var(--bs-body-font-size);}

.is-hidden { display: none; }

.lead { font-family: var(--font-body); }
.badge.bg-secondary { background: var(--clr-pri-gray-700) !important; }

.btn-danger, .btn-outline-danger { 
  --bs-btn-bg: var(--clr-pri-white); 
  --bs-btn-hover-bg: var(--clr-pri-red);
}

.text-accent {
  color: var(--text-accent);
}

.search-section {
  background-color: var(--clr-pri-gray-900);
  color: var(--text-light);
  padding-bottom: 2rem;
}
  
/* Search button */
.red-button {
  display:inline-block;
  background:var(--clr-pri-red);
  color:var(--clr-pri-white);
  border:0;
  padding:.5rem 1rem;
  border-radius:.25rem
}
.red-button:hover,.red-button:focus {
  background:var(--clr-pri-red-900);
  color:var(--text-light);
}

/* Clear Button */
.clear-button {
  display:inline-block;
  background:var(--clr-pri-gray-100);
  color:var(--clr-pri-red);
  border:0;
  padding:.5rem 1rem;
  border-radius:.25rem
}
.clear-button:hover, .clear-button:focus {
  background:var(--clr-pri-white);
  color:var(--clr-pri-red-900);
}

/* mark.js highlight */
.kw-hit {
  background:var(--kw-hit-bg);
  padding: 0 0.8em;
  box-shadow:0 0 0 2px var(--kw-hit-border) inset;
  border-radius: 2px;
}

/* Footer */
.sticky-footer {
  text-align:center;
  padding:1rem 0;
  background:var(--clr-pri-black);
  color:var(--text-light);
}

/* Counters (animate once on view) */
.stat-number {
  color:var(--clr-pri-red);
  font-family: var(--font-heading);
  font-weight:800;
  font-size:clamp(1.75rem,3vw,2.75rem);
}

/* Choices*/
.choices__list--multiple .choices__item {
  background-color:var(--clr-pri-gray-100);
  border-color:var(--clr-outline);
  color: var(--text-dark);
}

.choices[data-type*=select-multiple] .choices__button,
.choices[data-type*=text] .choices__button {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' class='bi bi-x-lg' viewBox='0 0 16 16'%3E%3Cpath d='M2.146 2.854a.5.5 0 1 1 .708-.708L8 7.293l5.146-5.147a.5.5 0 0 1 .708.708L8.707 8l5.147 5.146a.5.5 0 0 1-.708.708L8 8.707l-5.146 5.147a.5.5 0 0 1-.708-.708L7.293 8z'/%3E%3C/svg%3E");
}

.choices__item {
  color: var(--text-dark);
}

/* Hide the empty-value option inside the dropdown list */
.choices__list--dropdown .choices__item[data-value=""] {
  display: none;
}

.navbar {
  background-color: var(--clr-pri-black);
  color: var(--text-light);
  font-weight: bold;
}

.navbar-brand, 
.nav-link {
  color: var(--text-light);
}

.form-text {
  color: var(--text-light);
}

.custom-tooltip {
  --bs-tooltip-bg: var(--clr-pri-gray-700);
  --bs-tooltip-color: var(--text-light);
}

.navbar {
  --bs-nav-link-hover-color: var(--clr-pri-white);
}

.navbar-nav > .nav-item:hover {
  background-color: var(--clr-pri-red-900);
}

.nav {
  --bs-nav-link-hover-color: var(--clr-pri-white);
}

.nav-tabs {
  --bs-nav-tabs-link-active-bg: var(--clr-pri-red);
  --bs-nav-tabs-link-active-color: var(--clr-pri-white);
  --bs-nav-link-color: var(--text-light);
  border-bottom: none;
}

.nav-link.active {
  font-weight: bold;
}

.nav-link:focus, 
.nav-link:hover {
  --bs-nav-link-hover-color: var(--clr-pri-white);
}

.navbar-brand:focus, 
.navbar-brand:hover {
  --bs-navbar-brand-hover-color: var(--clr-pri-white);
}

.search-tab {
  background-color: var(--clr-pri-gray-900);
}

.nav-tabs .nav-link.active {
  border: 1px solid var(--clr-pri-red-900);
}

/* .search-tab.active {
  border: 1px solid var(--clr-pri-red);
  border-color: var(--clr-pri-red);
} */
.search-tab:not(.active){
  border: 1px solid var(--clr-pri-gray-700);
}

.profile-card {
  background-color: var(--clr-pri-gray-100);
  border-radius: 1rem;
  color: var(--text-dark);
  box-shadow: 0 0 1rem rgba(0, 0, 0, 0.1);
}

.faculty-name {
  color: var(--text-dark);
}

.img-fluid {
  max-width: 100%;
  height: auto;
}

.act-card {
  background-color: var(--clr-pri-white);
  border-radius: 1rem;
  padding: 1.5rem;
  box-shadow: 0 0 1rem rgba(0, 0, 0, 0.1);
}

.stats-container {
  background-color: var(--clr-pri-gray-100);
  color: var(--text-dark);
  padding: 1rem 0;
}

.stats-container h2 { font-family: var(--font-heading); }

.stat-card {
  box-shadow: 0 0 1rem rgba(0, 0, 0, 0.1);
  --bs-card-border-width: 0px;
}

.breadcrumb-container {
  background-color: var(--clr-pri-gray-100);
  color: var(--text-dark);
}

/* Map legend & dots */
.giu-dot { 
  width:12px; 
  height:12px; 
  border-radius:6px; 
  background:var(--clr-pri-red); 
  display:inline-block; 
  border:1px solid var(--clr-pri-white); 
  box-shadow:0 0 0 1px rgba(0,0,0,.15); 
}
.giu-legend { 
  background:var(--clr-pri-white); 
  padding:6px 8px; 
  font:12px/1.2 sans-serif; 
  box-shadow:0 1px 4px rgba(0,0,0,.2); 
  border-radius:4px; 
}
.giu-legend .entry { 
  display:flex; 
  align-items:center; 
  margin-bottom:4px; 
}
.giu-legend .entry:last-child { 
  margin-bottom:0; 
}
.giu-legend .swatch { 
  width:12px; 
  height:12px; 
  border-radius:6px; 
  margin-right:6px; 
  border:1px solid var(--clr-pri-gray-700); 
  box-shadow:0 0 0 1px rgba(0,0,0,.05); 
}

/* Map sizing */
.giu-map {
  height: 720px;                  /* desktop default */
  background: var(--clr-pri-gray-100);
}
/* On mobile, cap height to a portion of the viewport */
@media (max-width: 767.98px) {
  .giu-map {
    height: 60svh;                /* ≈60% of the small viewport height */
    max-height: 100svh;           /* never exceed visible viewport */
  }
}

.giu-back-to-top {
  position: fixed;
  font-size: 24px;
  right: 16px;
  bottom: 16px;
  z-index: 1040;
  padding: 15px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px; height: 40px;
  border-radius: 2px;
  border: none;
  background: var(--clr-pri-white);      
  color: var(--text-dark);
  box-shadow: 0 2px 8px rgba(0,0,0,.15);
  opacity: 0; pointer-events: none;
  transition: opacity .2s ease-in-out, transform .2s ease-in-out;
}
.giu-back-to-top:hover { transform: translateY(-2px); }
.giu-back-to-top.show { opacity: 0.8; pointer-events: auto; }

.banner {
  background: var(--clr-pri-amber); 
  color: var(--text-dark); 
  border-bottom:1px solid rgba(0,0,0,.08);
  position:relative; 
  z-index: 1029;
}

.world-map {
  height: 520px; 
  background: var(--clr-pri-gray-100);
}

.country-map, .profile-map {
  height:360px;
  background:var(--clr-pri-gray-100);
}

.country-chart {
  height:360px;
}

.loading-overlay {
  display:none; 
  position:fixed; 
  inset:0; 
  background:rgba(255,255,255,.6); 
  z-index:1050;
}

.loading-div {
  position:absolute; 
  top:50%; 
  left:50%; 
  transform:translate(-50%, -50%);
}

.accordion {
  background-color: var(--clr-pri-white);
}
.accordion-button {
  background-color: var(--clr-acc-btn);
  color: var(--clr-acc-btn-txt);
  font-weight: 700;
}
.accordion-button:hover {
  /* background-color: var(--clr-acc-btn-hover); */
  color: var(--clr-pri-red);
}
.accordion-button:not(.collapsed) {
  background-color: var(--clr-acc-btn);
  color: var(--clr-pri-red);
}
.accordion-button:focus {
  box-shadow: var(--focus-box-shadow);
}
.accordion-button::after {
  filter: invert(1);
}
.accordion-button .text-muted {
  color: var(--clr-pri-gray-900) !important;
}
.accordion-body {
  background-color: var(--clr-pri-white);
  color: var(--clr-pri-black);
}

/* Normalize plain text inputs to match Choices fields */
input.form-control[type="text"] {
  font-size: 14px;
  min-height: 44px;
  border: 1px solid #ddd;
  border-radius: 2.5px;
  background-color: var(--form-input-bg-color);
}

.faq-img {
  max-width: 50%;
  height: auto;
  margin: 2rem;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.2);
}