/* ============================================
   University of Glasgow Brand Styling
   MVLS LTS Network Outputs Website
   ============================================ */

/* ---- UofG Brand Colour Variables ---- */
:root {
  /* Primary colours */
  --uofg-blue: #003865;
  --uofg-burgundy: #7D2239;
  --uofg-cobalt: #0075B0;
  --uofg-lavender: #5B4D94;
  --uofg-leaf: #006630;
  --uofg-moss: #385A4F;
  --uofg-pillarbox: #B30C00;
  --uofg-rust: #9A3A06;
  --uofg-sandstone: #52473B;
  --uofg-sky-blue: #005398;
  --uofg-slate: #4F5961;
  --uofg-thistle: #951272;
  
  /* Secondary colours (use sparingly, avoid for white text) */
  --uofg-turquoise: #00B5D1;
  --uofg-rose: #B06C96;
  --uofg-pumpkin: #FFB948;
  --uofg-sunshine: #FFDC36;
  --uofg-mocha: #AA8066;
  
  /* Neutral tones */
  --uofg-white: #FFFFFF;
  --uofg-light-grey: #F5F5F5;
  --uofg-mid-grey: #E0E0E0;
  --uofg-dark-grey: #333333;
}

/* ---- Typography ---- */
/* Import Noto Sans and Noto Serif from Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500&family=Noto+Serif:ital,wght@0,400;0,500;0,600;0,700;1,400&display=swap');

body {
  font-family: 'Noto Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  color: var(--uofg-dark-grey);
}

h1, h2, h3, h4, h5, h6 {
  font-family: 'Noto Sans', sans-serif;
  font-weight: 600;
  color: var(--uofg-blue);
}

/* ---- Navbar Styling ---- */
/* Override Bootstrap/Flatly theme with high specificity */
.navbar,
.navbar.navbar-expand-lg,
.navbar.bg-primary,
nav.navbar,
header .navbar,
#quarto-header .navbar,
.quarto-navigation-tool {
  background-color: #003865 !important;
  background: #003865 !important;
  border-bottom: 3px solid #951272;
}

/* Navbar container background */
#quarto-header,
header#quarto-header {
  background-color: #003865 !important;
  background: #003865 !important;
}

.navbar-brand,
.navbar-nav .nav-link,
.navbar .navbar-brand,
.navbar .nav-link,
#quarto-header .navbar-brand,
#quarto-header .nav-link {
  color: #FFFFFF !important;
  font-weight: 500;
}

.navbar-nav .nav-link:hover,
.navbar-nav .nav-link:focus,
.navbar .nav-link:hover,
.navbar .nav-link:focus {
  color: #951272 !important;
}

.navbar-nav .nav-link.active {
  color: #FFFFFF !important;
  border-bottom: 2px solid #951272;
}

/* Navbar icons and buttons */
.navbar .bi,
.navbar .navbar-toggler,
.quarto-navigation-tool,
.quarto-navigation-tool i {
  color: #FFFFFF !important;
}

/* ---- Page Title and Headers ---- */
.quarto-title h1.title {
  color: var(--uofg-blue);
  font-weight: 700;
}

.quarto-title .subtitle {
  color: var(--uofg-slate);
  font-weight: 400;
}

/* ---- Links ---- */
a {
  color: var(--uofg-cobalt);
  text-decoration: none;
}

a:hover,
a:focus {
  color: var(--uofg-blue);
  text-decoration: underline;
}

/* ---- Callout Boxes ---- */
.callout-note {
  border-left: 4px solid var(--uofg-thistle) !important;
  background-color: rgba(0, 117, 176, 0.05);
}

.callout-note .callout-header {
  background-color: rgba(0, 117, 176, 0.1);
}

.callout-tip {
  border-left: 4px solid var(--uofg-leaf) !important;
  background-color: rgba(0, 102, 48, 0.05);
}

.callout-tip .callout-header {
  background-color: rgba(0, 102, 48, 0.1);
}

.callout-warning {
  border-left: 4px solid var(--uofg-pumpkin) !important;
  background-color: rgba(255, 185, 72, 0.1);
}

.callout-important {
  border-left: 4px solid var(--uofg-thistle) !important;
  background-color: rgba(125, 34, 57, 0.05);
}

/* Statistics callout on homepage */
.callout-note .callout-body {
  font-size: 1.1em;
}

/* ---- Data Tables ---- */
.dataTables_wrapper {
  font-size: 0.9em;
}

.dataTables_filter input {
  border: 1px solid var(--uofg-mid-grey);
  border-radius: 4px;
  padding: 5px 10px;
}

.dataTables_filter input:focus {
  border-color: var(--uofg-thistle);
  outline: none;
  box-shadow: 0 0 0 2px rgba(0, 117, 176, 0.2);
}

/* Table header styling */
.dataTable thead th {
  background-color: var(--uofg-blue) !important;
  color: var(--uofg-white) !important;
  font-weight: 600;
  border-bottom: 2px solid var(--uofg-thistle) !important;
}

/* Table row styling */
.dataTable tbody tr:nth-child(even) {
  background-color: var(--uofg-light-grey);
}

.dataTable tbody tr:hover {
  background-color: rgba(0, 117, 176, 0.1) !important;
}

/* Publication links in tables */
.dataTable a {
  color: var(--uofg-cobalt);
  text-decoration: none;
  border-bottom: 1px dotted var(--uofg-cobalt);
}

.dataTable a:hover {
  color: var(--uofg-blue);
  border-bottom-color: var(--uofg-blue);
  border-bottom-style: solid;
}

/* ---- SoTL Badge Styling ---- */
.badge.bg-success {
  background-color: var(--uofg-leaf) !important;
  font-size: 0.75em;
  font-weight: 500;
  padding: 0.3em 0.6em;
}

.badge.bg-primary {
  background-color: var(--uofg-cobalt) !important;
}

.badge.bg-secondary {
  background-color: var(--uofg-slate) !important;
}

/* ---- Buttons ---- */
.btn-primary {
  background-color: var(--uofg-blue);
  border-color: var(--uofg-blue);
}

.btn-primary:hover,
.btn-primary:focus {
  background-color: var(--uofg-thistle);
  border-color: var(--uofg-thistle);
}

.btn-secondary {
  background-color: var(--uofg-slate);
  border-color: var(--uofg-slate);
}

/* ---- Footer Styling ---- */
.nav-footer {
  background-color: var(--uofg-blue);
  color: var(--uofg-white);
  font-size: 0.85em;
  padding: 1.5em 0;
  border-top: 3px solid var(--uofg-thistle);
}

.nav-footer a {
  color: var(--uofg-turquoise) !important;
}

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

/* ---- Charts and Visualisations ---- */
.cell-output-display {
  margin-top: 1em;
}

/* ---- Code Blocks ---- */
pre {
  background-color: var(--uofg-light-grey);
  border-left: 3px solid var(--uofg-thistle);
  border-radius: 0 4px 4px 0;
}

code {
  color: var(--uofg-thistle);
}

/* ---- Table of Contents ---- */
.sidebar nav[role="doc-toc"] a {
  color: var(--uofg-slate);
}

.sidebar nav[role="doc-toc"] a:hover,
.sidebar nav[role="doc-toc"] a.active {
  color: var(--uofg-blue);
  font-weight: 500;
}

/* ---- Dark Mode Adjustments ---- */
[data-bs-theme="dark"] {
  --uofg-blue: #4A90C2;
  --uofg-cobalt: #5AADE0;
  --uofg-light-grey: #2D2D2D;
  --uofg-dark-grey: #E0E0E0;
}

[data-bs-theme="dark"] body {
  background-color: #1a1a1a;
}

[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: var(--uofg-blue);
}

[data-bs-theme="dark"] .navbar {
  background-color: #001F3F !important;
}

[data-bs-theme="dark"] .dataTable thead th {
  background-color: #001F3F !important;
}

[data-bs-theme="dark"] .dataTable tbody tr:nth-child(even) {
  background-color: #2D2D2D;
}

[data-bs-theme="dark"] pre {
  background-color: #2D2D2D;
}

/* ---- Responsive Adjustments ---- */
@media (max-width: 768px) {
  .dataTables_wrapper {
    font-size: 0.8em;
  }
  
  .dataTable td {
    padding: 0.5em;
  }
  
  h1 {
    font-size: 1.75rem;
  }
  
  h2 {
    font-size: 1.5rem;
  }
}

/* ---- Mermaid Diagrams ---- */
.mermaid {
  text-align: center;
  margin: 2em 0;
}

/* ---- Horizontal Rules ---- */
hr {
  border-top: 2px solid var(--uofg-mid-grey);
  margin: 2em 0;
}

/* ---- Selection Highlighting ---- */
::selection {
  background-color: rgba(0, 117, 176, 0.3);
}

::-moz-selection {
  background-color: rgba(0, 117, 176, 0.3);
}