/* =============================================================================
   Nicolas Cachanosky — Personal Website styles-utep.css
   UTEP 2026 brand palette · Same structure as styles.css (EO version)

   Fonts (same as EO — now official UTEP fonts)
     Body/UI     Inter          (Google Fonts) → sans-serif
     Headings    Crimson Pro    (Google Fonts) → serif

   UTEP Palette
     Midnight Pick   #041E42   navbar, body text, headings
     Miner Blaze     #F48220   primary accent — links, active states, borders
     Desert Dust     #D9D9D6   light neutral
     Borderland Azul #1CA6DF   link hover, callout-note
     Mesa Mist       #B1B3B3   secondary neutral
     Desert Gold     #FFD500   tertiary accent
     Mineral Gris    #4E4B48   dark neutral

   Neutrals
     Dark bg         #0a1525   dark-mode background
     Muted-text      #8a9ba8   captions, secondary text
============================================================================= */

/* ── Google Fonts ─────────────────────────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Crimson+Pro:ital,wght@0,400;0,600;0,700;1,400&family=Inter:wght@400;500;600;700&display=swap');


/* =============================================================================
   1. CSS VARIABLES
============================================================================= */

:root {
  --utep-blue: #041E42;
  --utep-orange: #F48220;
  --utep-azul: #1CA6DF;
  --utep-dust: #D9D9D6;
  --utep-mist: #B1B3B3;
  --utep-gold: #FFD500;
  --utep-gris: #4E4B48;
  --eo-muted: #8a9ba8;
  --background-color: #FFFFFF;
  --text-color: #041E42;
}

/* Dark mode overrides */
[data-bs-theme="dark"] {
  --background-color: #0a1525;
  --text-color: #d6dde2;
}

/* Smooth transitions for theme changes */
html, body, a, a:hover {
  transition:
    background-color 0.4s ease-in-out,
    color 0.4s ease-in-out;
}


/* =============================================================================
   2. BODY & PAGE BACKGROUND
============================================================================= */

body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  background-color: var(--background-color);
  color: var(--text-color);
  line-height: 1.6;
  font-size: 18px;
  text-align: left;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Override Quarto justify defaults — scoped to content areas only */
main.content,
.about-contents,
.quarto-about-trestles .about-contents,
.quarto-about-trestles .about-contents p,
.quarto-about-trestles .about-contents h2,
.quarto-about-trestles .about-contents h3 {
  text-align: left;
}


/* =============================================================================
   3. HEADINGS
============================================================================= */

h1, h2, h3, h4, h5, h6 {
  color: var(--utep-blue);
  font-family: 'Crimson Pro', Georgia, serif;
  font-weight: 700;
}

h2 {
  border-bottom: 2px solid var(--utep-orange);
  padding-bottom: 0.25em;
  margin-top: 2em;
}

h3 {
  font-weight: 400;
}

/* Suppress h2 underline on landing page (about template) */
.quarto-about-trestles .about-contents h2,
.quarto-about-solana .about-contents h2,
.quarto-about-jolla .about-contents h2 {
  border-bottom: none;
  padding-bottom: 0;
}

/* Italic emphasis inside headings renders in orange */
h1 em, h2 em, h3 em {
  font-style: italic;
  color: var(--utep-orange);
}

.quarto-section-identifier {
  color: var(--utep-orange);
}

/* Blockquote — orange left border, muted italic intro text */
blockquote {
  border-left: 3px solid var(--utep-orange);
  margin: 1.5em 0;
  padding: 0.6em 1.2em;
  color: var(--eo-muted);
  font-style: italic;
  background: transparent;
}

blockquote p {
  margin: 0;
  color: inherit;
  font-style: inherit;
}

/* Subtitle / description lines → Inter */
.quarto-about-trestles .about-entity .about-description,
.quarto-about-solana .about-description,
.quarto-about-jolla .about-description,
.about-entity .about-description,
.about-entity p,
#title-block-header .description,
#title-block-header .quarto-title .quarto-categories,
.quarto-title-meta,
.quarto-title p {
  font-family: 'Inter', sans-serif !important;
  font-size: 0.95rem;
}


/* =============================================================================
   4. LINKS — Orange, no underline; Azul on hover
============================================================================= */

a {
  text-decoration: none;
  color: var(--utep-orange);
  transition: color 0.15s ease;
}

a:hover {
  color: var(--utep-azul);
}

a:focus-visible {
  outline: 2px solid var(--utep-orange);
  outline-offset: 2px;
}


/* =============================================================================
   5. NAVBAR
============================================================================= */

/* Keep navbar UTEP Blue in both modes */
.navbar {
  background-color: var(--utep-blue) !important;
  border-bottom: 2px solid var(--utep-orange);
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  min-height: 60px;
}

/* Make navbar icons & text light */
.navbar a,
.navbar .nav-link,
.navbar .navbar-brand,
.navbar .quarto-color-scheme-toggle,
.navbar .quarto-search {
  color: white !important;
  font-family: 'Inter', sans-serif;
}

.navbar .quarto-color-scheme-toggle svg,
.navbar .quarto-search svg {
  fill: white !important;
}

/* Hover color for navbar links */
.navbar a.nav-link:hover {
  color: var(--utep-orange) !important;
}

/* Dropdown menu background to match navbar */
.navbar .dropdown-menu {
  background-color: #041E42 !important;
  border: none !important;
  box-shadow: 0 4px 8px rgba(0,0,0,0.15);
  transform: translateY(10px);
  transition: opacity 0.25s ease, transform 0.25s ease;
  will-change: opacity, transform;
}

.navbar .dropdown.show .dropdown-menu {
  display: block;
  opacity: 1;
  transform: translateY(0);
}

/* Dropdown menu links */
.navbar .dropdown-menu a.dropdown-item {
  color: #d6dde2 !important;
  font-family: 'Inter', sans-serif;
}

.navbar .dropdown-menu a.dropdown-item:hover,
.navbar .dropdown-menu a.dropdown-item:focus {
  color: #F48220 !important;
  background-color: transparent !important;
}


/* =============================================================================
   6. ABOUT / LANDING PAGE
============================================================================= */

/* ── Headshot — orange border + soft shadow ──────────────────────────────── */
.quarto-about-trestles .about-entity .about-image,
.quarto-about-solana .about-image,
.quarto-about-jolla .about-image,
#about img.about-image,
img.rounded-circle {
  border: 3px solid var(--utep-orange);
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.10);
}

/* ── Icon buttons (email, CV, GitHub, LinkedIn, X) ──────────────────────── */
.about-links a,
.about-link,
#about .links a {
  min-width: 2.6rem;
  min-height: 2.6rem;
  padding: 0.4rem 0.55rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  transition: all 0.15s ease;
}

.about-links a svg,
.about-link svg,
#about .links a svg {
  transition: fill 0.15s ease;
}

.about-links a:hover,
.about-link:hover,
#about .links a:hover {
  background-color: var(--utep-orange) !important;
  border-color: var(--utep-orange) !important;
  color: #FFFFFF !important;
}

.about-links a:hover svg,
.about-link:hover svg,
#about .links a:hover svg {
  fill: #FFFFFF !important;
}


/* =============================================================================
   7. BUTTONS
============================================================================= */

a.button-link {
  display: inline-block;
  padding: 0.2rem 0.4rem;
  color: var(--utep-orange);
  border: 2px solid var(--utep-orange);
  border-radius: 6px;
  font-size: 14px;
  font-family: 'Inter', sans-serif;
  background-color: transparent;
  transition: all 0.3s ease-in-out;
}

a.button-link:hover {
  background-color: var(--utep-orange);
  color: white;
  border-color: var(--utep-orange);
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}


/* =============================================================================
   8. PUBLICATION ENTRIES
============================================================================= */

/* DOI lines — muted color, same size */
.doi {
  display: block;
  font-family: 'Inter', sans-serif;
  color: var(--eo-muted);
}

[data-bs-theme="dark"] .doi {
  color: #6a8090;
}


/* =============================================================================
   9. CALLOUT BOXES
============================================================================= */

.callout-note {
  border-left-color: var(--utep-azul) !important;
  background-color: rgba(28, 166, 223, 0.05);
}

.callout-tip {
  border-left-color: #87A96B !important;
  background-color: rgba(135, 169, 107, 0.05);
}

.callout-warning {
  border-left-color: var(--utep-orange) !important;
  background-color: rgba(255, 130, 0, 0.05);
}

.callout-important {
  border-left-color: #C74B4B !important;
  background-color: rgba(199, 75, 75, 0.05);
}

.callout-note      .callout-title { color: var(--utep-azul); font-family: 'Inter', sans-serif; }
.callout-tip       .callout-title { color: #87A96B;          font-family: 'Inter', sans-serif; }
.callout-warning   .callout-title { color: var(--utep-orange); font-family: 'Inter', sans-serif; }
.callout-important .callout-title { color: #C74B4B;          font-family: 'Inter', sans-serif; }


/* =============================================================================
   10. TABLES
============================================================================= */

table {
  border-collapse: collapse;
  width: 100%;
  font-family: 'Inter', sans-serif;
  font-size: 0.92rem;
  margin: 1.5em 0;
}

thead tr th {
  background-color: #041E42 !important;
  color: #FFFFFF !important;
  padding: 0.6em 0.9em;
  text-align: left;
  font-weight: 600;
  letter-spacing: 0.02em;
  border-bottom: 2px solid var(--utep-orange);
}

tbody tr td {
  padding: 0.5em 0.9em;
  border-bottom: 1px solid #e8e8e4;
  color: #041E42;
  vertical-align: top;
}

tbody tr:nth-child(even) {
  background-color: rgba(255, 130, 0, 0.03);
}

tbody tr:hover {
  background-color: rgba(255, 130, 0, 0.07);
}


/* =============================================================================
   11. CODE BLOCKS
============================================================================= */

pre, code {
  font-size: 0.87em;
  border-radius: 4px;
}

pre {
  border-left: 3px solid var(--utep-orange);
  padding-left: 1em;
}


/* =============================================================================
   12. FIGURES & CAPTIONS
============================================================================= */

figcaption,
.figure-caption,
.quarto-float-caption {
  font-family: 'Inter', sans-serif;
  font-size: 0.83rem;
  color: var(--eo-muted);
  text-align: center;
  margin-top: 0.5em;
  font-style: italic;
}


/* =============================================================================
   13. MATH
============================================================================= */

.math.display {
  margin: 1.2em 0;
  overflow-x: auto;
}


/* =============================================================================
   14. FOOTER
============================================================================= */

.nav-footer,
footer {
  font-family: 'Inter', sans-serif;
  font-size: 0.82rem;
  color: var(--eo-muted);
  border-top: 1px solid rgba(4, 30, 66, 0.10);
}

.nav-footer a {
  color: var(--utep-orange) !important;
}

.nav-footer a:hover {
  color: var(--utep-azul) !important;
}


/* =============================================================================
   15. DARK MODE
============================================================================= */

[data-bs-theme="dark"] body {
  background-color: #0a1525;
  color: #d6dde2;
}

[data-bs-theme="dark"] h1,
[data-bs-theme="dark"] h2,
[data-bs-theme="dark"] h3,
[data-bs-theme="dark"] h4,
[data-bs-theme="dark"] h5,
[data-bs-theme="dark"] h6 {
  color: #d6dde2;
}

[data-bs-theme="dark"] h1 em,
[data-bs-theme="dark"] h2 em,
[data-bs-theme="dark"] h3 em {
  color: #F48220;
}

[data-bs-theme="dark"] h2 {
  border-bottom-color: var(--utep-orange);
}

[data-bs-theme="dark"] blockquote {
  border-left-color: #F48220;
  color: #6a8090;
}

/* Links */
[data-bs-theme="dark"] a {
  color: #FF9A33;
}

[data-bs-theme="dark"] a:hover {
  color: #5DC0F0;
}

[data-bs-theme="dark"] a:focus-visible {
  outline-color: #FF9A33;
}

/* Headshot */
[data-bs-theme="dark"] .quarto-about-trestles .about-entity .about-image,
[data-bs-theme="dark"] .quarto-about-solana .about-image,
[data-bs-theme="dark"] .quarto-about-jolla .about-image,
[data-bs-theme="dark"] img.rounded-circle {
  border-color: #FF9A33;
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.30);
}

/* About icon buttons */
[data-bs-theme="dark"] .about-links a,
[data-bs-theme="dark"] .about-link,
[data-bs-theme="dark"] #about .links a {
  color: #d6dde2 !important;
  border-color: #d6dde2;
}

[data-bs-theme="dark"] .about-links a svg,
[data-bs-theme="dark"] .about-link svg,
[data-bs-theme="dark"] #about .links a svg {
  fill: #d6dde2 !important;
}

[data-bs-theme="dark"] .about-links a:hover,
[data-bs-theme="dark"] #about .links a:hover {
  background-color: #FF9A33 !important;
  border-color: #FF9A33 !important;
  color: #0a1525 !important;
}

[data-bs-theme="dark"] .about-links a:hover svg,
[data-bs-theme="dark"] #about .links a:hover svg {
  fill: #0a1525 !important;
}

/* Tables */
[data-bs-theme="dark"] thead tr th {
  background-color: #0d2240 !important;
  border-bottom-color: var(--utep-orange);
}

[data-bs-theme="dark"] tbody tr td {
  border-bottom-color: rgba(255, 255, 255, 0.08);
  color: #d6dde2;
}

[data-bs-theme="dark"] tbody tr:nth-child(even) {
  background-color: rgba(255, 130, 0, 0.06);
}

/* Callouts */
[data-bs-theme="dark"] .callout-note      { background-color: rgba(28,  166, 223, 0.10); }
[data-bs-theme="dark"] .callout-tip       { background-color: rgba(135, 169, 107, 0.10); }
[data-bs-theme="dark"] .callout-warning   { background-color: rgba(255, 130,   0, 0.10); }
[data-bs-theme="dark"] .callout-important { background-color: rgba(199,  75,  75, 0.10); }

/* Code */
[data-bs-theme="dark"] pre {
  border-left-color: var(--utep-orange);
}

/* Footer */
[data-bs-theme="dark"] .nav-footer,
[data-bs-theme="dark"] footer {
  border-top-color: rgba(255, 255, 255, 0.08);
  color: #6a8090;
}

[data-bs-theme="dark"] .nav-footer a {
  color: #FF9A33 !important;
}

/* Buttons */
[data-bs-theme="dark"] a.button-link {
  color: #FF9A33;
  border-color: #FF9A33;
}

[data-bs-theme="dark"] a.button-link:hover {
  background-color: #FF9A33;
  color: #0a1525;
  border-color: #FF9A33;
}


/* =============================================================================
   16. PRINT STYLESHEET
============================================================================= */

@media print {

  .navbar,
  .nav-footer,
  footer,
  #quarto-sidebar,
  .sidebar.sidebar-navigation,
  #quarto-margin-sidebar,
  #TOC,
  nav[role="doc-toc"],
  .page-navigation,
  .chapter-nav,
  #quarto-search,
  .quarto-search,
  .sidebar-toggle,
  .quarto-sidebar-toggle,
  .btn-quarto,
  .repo-action-links,
  .quarto-other-formats {
    display: none !important;
  }

  #quarto-content,
  .quarto-container,
  main,
  .content,
  article {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  body {
    font-family: 'Inter', sans-serif;
    font-size: 10pt;
    line-height: 1.5;
    color: #000000;
    background: #ffffff;
  }

  h1, h2, h3, h4, h5, h6 {
    font-family: 'Crimson Pro', Georgia, serif;
    color: #000000;
    page-break-after: avoid;
  }

  h1 { font-size: 18pt; margin-top: 0; }
  h2 { font-size: 14pt; border-bottom: 1pt solid #000000; padding-bottom: 0.2em; }
  h3 { font-size: 12pt; }

  p, li, td {
    font-size: 10pt;
    line-height: 1.5;
    color: #000000;
  }

  a {
    color: #000000 !important;
    text-decoration: none;
  }

  .callout-note,
  .callout-tip,
  .callout-warning,
  .callout-important {
    border-left-width: 3pt;
    background-color: transparent !important;
    page-break-inside: avoid;
  }

  .callout-note      { border-left-color: #1CA6DF; }
  .callout-tip       { border-left-color: #87A96B; }
  .callout-warning   { border-left-color: #F48220; }
  .callout-important { border-left-color: #C74B4B; }

  table {
    border-collapse: collapse;
    width: 100%;
    font-size: 9pt;
    page-break-inside: auto;
  }

  thead tr th {
    background-color: #041E42 !important;
    color: #ffffff !important;
    border-bottom: 1.5pt solid #F48220;
    padding: 0.4em 0.6em;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

  tbody tr td {
    padding: 0.35em 0.6em;
    border-bottom: 0.5pt solid #cccccc;
    color: #000000;
  }

  tbody tr:nth-child(even) {
    background-color: #f5f5f5 !important;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

  tr { page-break-inside: avoid; }

  figure, img {
    max-width: 100%;
    page-break-inside: avoid;
  }

  figcaption, .figure-caption {
    font-size: 8pt;
    color: #444444;
    text-align: center;
    font-style: italic;
  }

  .math.display {
    margin: 1em 0;
    overflow-x: visible;
  }

  pre, code {
    font-size: 8pt;
    border: 0.5pt solid #cccccc;
    border-left: 2pt solid #F48220;
    background-color: #f8f8f8 !important;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
    page-break-inside: avoid;
  }

  h2, h3 { page-break-after: avoid; }

  @page {
    margin: 2.5cm 2cm;
    size: A4;
  }

  @page :first {
    margin-top: 3cm;
  }
}