/* =========================================================================
   LALLPI site styles
   =========================================================================
   Backs up _brand.yml with explicit rules for the specific things that
   need to be guaranteed regardless of how completely this Quarto
   installation's _brand.yml support is implemented (per Quarto's own
   docs, brand.yml support is "not yet complete"). If _brand.yml is
   doing its job, these are redundant; if it isn't, the site still
   looks right.
   ========================================================================= */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Roboto+Condensed:wght@400;500;700&display=swap');

:root {
  --utep-orange: #FF8200;
  --utep-blue: #041E42;
  --utep-silver: #B1B3B3;
}

/* ---- Typography ---- */

html {
  font-size: 18px; /* slightly larger than Bootstrap's 16px default; cascades via rem */
}

body {
  font-family: 'Inter', Arial, Helvetica, sans-serif;
  color: var(--utep-blue);
}

/* Center figure captions -- multiple selectors since Quarto's exact
   caption markup (figcaption vs. Bootstrap .figure-caption vs. the
   numbered-figure float wrapper) can vary by version and this can't
   be render-tested here. */
figcaption,
.figure-caption,
.quarto-float-caption-fig,
.quarto-figure figcaption {
  text-align: center;
}

/* Default content tables (documentation.qmd, etc.) -- forces a shared
   width so consecutive tables with different column counts/content
   still line up on the same left/right edges, instead of each one
   auto-sizing to its own content width. Multiple selectors since the
   exact Quarto wrapper class can vary by version and this can't be
   render-tested here. */
.content table:not(.lallpi-ranking),
main table:not(.lallpi-ranking),
#quarto-document-content table:not(.lallpi-ranking) {
  width: 100% !important;
}

h1, h2, h3, h4, h5, h6,
.navbar-title, .navbar-brand {
  font-family: 'Roboto Condensed', 'Arial Narrow', Arial, sans-serif;
  font-weight: 700;
  color: var(--utep-blue);
}

/* ---- Links: no underline, UTEP Orange, subtle hover ---- */

a {
  color: var(--utep-orange);
  text-decoration: none;
}

a:hover {
  color: var(--utep-blue);
  text-decoration: none;
}

/* ---- Search (navbar) ----
   Quarto's built-in search widget (Algolia Autocomplete library UI)
   defaults to dark icon/text, designed for a light navbar. Our navbar
   is forced dark (UTEP Blue) below, which likely makes the default
   dark search icon invisible against it -- confirmed pattern: same
   root cause already found and fixed for both the 404 page and the
   footer text. Multiple selectors since the exact class Quarto/this
   Autocomplete version uses can't be verified without a real render. */
#quarto-search,
#quarto-search a,
#quarto-search button,
#quarto-search svg,
#quarto-search input,
#quarto-search i,
.aa-DetachedSearchButton,
.aa-DetachedSearchButtonPlaceholder,
.aa-DetachedSearchButtonIcon,
.aa-DetachedSearchButtonIcon svg,
.navbar #quarto-search .bi,
.navbar-nav #quarto-search {
  color: #FFFFFF !important;
  fill: #FFFFFF !important;
  border-color: #FFFFFF !important;
}

/* ---- Navbar ---- */

.navbar {
  background-color: var(--utep-blue) !important;
}

.navbar .navbar-title,
.navbar-nav .nav-link {
  color: #FFFFFF !important;
}

.navbar-nav .nav-link:hover,
.navbar-nav .nav-link.active {
  color: var(--utep-orange) !important;
}

/* ---- Codebook entries ---- */

.codebook-entry {
  border-left: 3px solid var(--utep-orange);
  padding-left: 16px;
  margin: 1.2em 0;
}

.codebook-entry h4 {
  margin-bottom: 0.3em;
  color: var(--utep-blue);
}

.codebook-entry ul {
  margin-top: 0;
  padding-left: 1.2em;
}

.codebook-entry li {
  margin-bottom: 0.2em;
}

/* ---- Footer ----
   Multiple selectors since .page-footer alone was confirmed NOT
   matching Quarto's actual generated markup -- can't render-test
   which one is correct without a real build. */
.page-footer,
.page-footer a,
.page-footer i,
.page-footer svg,
.page-footer .bi,
#quarto-footer,
#quarto-footer a,
#quarto-footer i,
#quarto-footer svg,
footer.footer,
footer.footer a,
footer.footer i,
.nav-footer,
.nav-footer a,
.nav-footer i {
  color: #FFFFFF !important;
  fill: #FFFFFF !important;
}

.page-footer a:hover,
.page-footer a:hover i,
.page-footer a:hover svg {
  color: var(--utep-orange) !important;
  fill: var(--utep-orange) !important;
}

/* ---- Minimalist spacing ---- */

.content {
  max-width: 900px;
}

h1, h2 {
  margin-top: 1.8em;
  margin-bottom: 0.6em;
}

/* ---- Buttons (e.g. "Download the data", "View on GitHub") ---- */

.btn-primary {
  background-color: var(--utep-orange);
  border-color: var(--utep-orange);
  color: #FFFFFF !important;
  text-decoration: none;
}

.btn-primary:hover {
  background-color: var(--utep-blue);
  border-color: var(--utep-blue);
  color: #FFFFFF !important;
}


/* =========================================================================
   LALLPI ranking table (home page + documentation page)
   ========================================================================= */

table.lallpi-ranking {
  width: 100%;
  border-collapse: collapse;
  margin: 1.5em 0;
}

table.lallpi-ranking thead tr {
  background-color: var(--utep-blue);
  color: white;
  font-weight: bold;
}

table.lallpi-ranking th,
table.lallpi-ranking td {
  padding: 8px 12px;
  text-align: left;
}

table.lallpi-ranking tbody tr:nth-child(even) {
  background-color: #f9f9f9;
}

table.lallpi-ranking .flag {
  width: 30px;
  height: 20px;
  margin-right: 8px;
  vertical-align: middle;
}

table.lallpi-ranking .country {
  display: flex;
  align-items: center;
  gap: 8px;
}


/* =========================================================================
   C4FE logo footer (home page)
   ========================================================================= */

.lallpi-footer-logo {
  text-align: center;
  margin-top: 4em;
  padding: 2em 0;
}

.lallpi-footer-logo img {
  max-width: 320px;
  width: 100%;
  height: auto;
}


/* =========================================================================
   Team page (pages/people.qmd)
   ========================================================================= */

.team-row {
  display: flex;
  align-items: center;
  gap: 2em;
  padding: 1.5em 0;
  border-bottom: 1px solid #e0e0e0;
}

.team-row:last-of-type {
  border-bottom: none;
}

@media (max-width: 600px) {
  .team-row {
    flex-direction: column;
    text-align: center;
  }
}

.team-row > img {
  width: 100px;
  height: 100px;
  object-fit: cover;
  border-radius: 50%;
  flex-shrink: 0;
}

.team-info h3 {
  margin-bottom: 0.25em;
}

.team-info a {
  font-size: 1.3em;
  margin-right: 0.6em;
  color: var(--utep-blue);
}

.team-info a:hover {
  color: var(--utep-orange);
}

/* File-format icons (data.qmd download list) */
.fa-file-excel,
.fa-file-csv,
li i.fa-solid.fa-file {
  color: var(--utep-blue);
  width: 1.3em;
  margin-right: 0.4em;
  text-align: center;
}
/* Country page stat row (pages/countries/*.qmd) */

.lallpi-stat-row {
  display: flex;
  gap: 12px;
  margin: 1.5em 0;
}

.lallpi-stat-row > div {
  background: #F2F2F2;
  border-radius: 6px;
  padding: 12px 20px;
  text-align: center;
  flex: 1;
}

.lallpi-stat-row .stat-value {
  display: block;
  font-size: 26px;
  font-weight: bold;
  color: var(--utep-orange);
}

.lallpi-stat-row .stat-label {
  display: block;
  font-size: 12px;
  color: var(--utep-blue);
}