/* ================================
   Basic CSS with Figtree Font Styling
   ================================ */

/* Import Google Fonts (optional - you can remove or change these) */
@import url('https://fonts.googleapis.com/css2?family=Figtree:wght@300;400;500;600;700;800;900&family=Merriweather:wght@300;400;700&display=swap');

/*----------LOGO above TOC---------*/

#TOC::before {
  content: "";
  display: block;
  height: 200px;
  margin: 0px auto 0px auto;
  background-color: #1e5288 !important;
  background-image: url("./images/geodslogo25.svg");
  background-size: contain;
  background-position: center center;
  background-repeat: no-repeat;
}


/* ================================
   CSS Reset & Base Styles
   ================================ */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* ================================
   Root Variables
   ================================ */
:root {
  /* Font Families */
  --font-primary: 'Figtree', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;
  --font-serif: 'Merriweather', Georgia, 'Times New Roman', serif;
  --font-mono: 'Courier New', Consolas, 'Liberation Mono', monospace;
  
  /* Colors */
  --color-primary-blue: #1e5288;
  --color-background: #f8f9fa;
  --color-text: #333333;
  
  /* Font Sizes */
  --fs-xs: 0.75rem;      /* 12px */
  --fs-sm: 0.875rem;     /* 14px */
  --fs-base: 1rem;       /* 16px */
  --fs-lg: 1.125rem;     /* 18px */
  --fs-xl: 1.25rem;      /* 20px */
  --fs-2xl: 1.5rem;      /* 24px */
  --fs-3xl: 1.875rem;    /* 30px */
  --fs-4xl: 2.25rem;     /* 36px */
  --fs-5xl: 3rem;        /* 48px */
  
  /* Line Heights */
  --lh-tight: 1.2;
  --lh-normal: 1.5;
  --lh-relaxed: 1.75;
  --lh-loose: 2;
  
  /* Letter Spacing */
  --ls-tight: -0.025em;
  --ls-normal: 0;
  --ls-wide: 0.025em;
  --ls-wider: 0.05em;
  --ls-widest: 0.1em;
  
  /* Font Weights */
  --fw-light: 300;
  --fw-normal: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;
}

/* ================================
   Base Typography
   ================================ */
html {
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

body {
  font-family: var(--font-primary);
  font-size: var(--fs-base);
  font-weight: var(--fw-normal);
  line-height: var(--lh-normal);
  color: var(--color-text);
  background-color: var(--color-background);
}

/* ================================
   Headings - Only target main content, not TOC
   ================================ */
h1.anchored, 
h2.anchored, 
h3.anchored, 
h4.anchored, 
h5.anchored, 
h6.anchored {
  font-family: var(--font-primary);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight);
  margin-bottom: 1rem;
  color: var(--color-primary-blue);
}


/* ================================
   TOC Styling - Preserve Quarto's default behavior
   ================================ */
#TOC {
  font-family: var(--font-primary);
}

/* Ensure TOC links maintain their default behavior */
#TOC .nav-link {
  font-family: var(--font-primary);
  font-weight: var(--fw-normal);
  transition: all 0.2s ease;
}

/* Allow Quarto's active states to work properly */
#TOC .nav-link.active {
  font-weight: var(--fw-medium);
}

/* ================================
   Paragraphs & Body Text
   ================================ */
p {
  margin-bottom: 1rem;
  line-height: var(--lh-relaxed);
}

p:last-child {
  margin-bottom: 0;
}

.lead {
  font-size: var(--fs-lg);
  font-weight: var(--fw-light);
  line-height: var(--lh-relaxed);
  color: #666666;
}

/* ================================
   Links
   ================================ */
a {
  color: var(--color-primary-blue);
  text-decoration: none;
  font-weight: var(--fw-medium);
  transition: color 0.3s ease;
}

a:hover {
  color: #164a85;
  text-decoration: underline;
}

a:visited {
  color: #153e6e;
}

/* ================================
   Lists
   ================================ */
ul, ol {
  margin-bottom: 1rem;
  padding-left: 2rem;
  line-height: var(--lh-relaxed);
}

li {
  margin-bottom: 0.5rem;
}

li:last-child {
  margin-bottom: 0;
}

/* ================================
   Blockquotes
   ================================ */
blockquote {
  font-family: var(--font-serif);
  font-size: var(--fs-lg);
  font-style: italic;
  line-height: var(--lh-relaxed);
  color: #555555;
  border-left: 4px solid var(--color-primary-blue);
  padding-left: 1.5rem;
  margin: 2rem 0;
}

blockquote cite {
  display: block;
  font-size: var(--fs-sm);
  font-style: normal;
  font-weight: var(--fw-medium);
  margin-top: 0.5rem;
  color: #777777;
}

/* ================================
   Code & Preformatted Text
   ================================ */
code {
  font-family: var(--font-mono);
  font-size: 0.9em;
  background-color: #e9ecef;
  padding: 0.2em 0.4em;
  border-radius: 3px;
  color: #d14;
}

pre {
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  background-color: #ffffff;
  border: 1px solid #dee2e6;
  border-radius: 4px;
  padding: 1rem;
  overflow-x: auto;
  line-height: var(--lh-normal);
  margin-bottom: 1rem;
}

pre.sourceCode.python {
  background-color: #fdfdfd;
  border: 1px solid #ddd;
  border-left: 4px solid #1e5288; /* blue left bar */
  border-radius: 6px;
  padding: 1rem;
  font-size: var(--fs-sm);
}

pre code {
  background-color: transparent;
  padding: 0;
  color: inherit;
}

/* ================================
   Text Utilities
   ================================ */
.text-small {
  font-size: var(--fs-sm);
}

.text-large {
  font-size: var(--fs-lg);
}

.text-muted {
  color: #777777;
}

.text-center {
  text-align: center;
}

.text-left {
  text-align: left;
}

.text-right {
  text-align: right;
}

.text-justify {
  text-align: justify;
}

.text-uppercase {
  text-transform: uppercase;
  letter-spacing: var(--ls-wider);
}

.text-lowercase {
  text-transform: lowercase;
}

.text-capitalize {
  text-transform: capitalize;
}

.font-light {
  font-weight: var(--fw-light);
}

.font-normal {
  font-weight: var(--fw-normal);
}

.font-medium {
  font-weight: var(--fw-medium);
}

.font-semibold {
  font-weight: var(--fw-semibold);
}

.font-bold {
  font-weight: var(--fw-bold);
}

.font-serif {
  font-family: var(--font-serif);
}

.font-mono {
  font-family: var(--font-mono);
}

/* ================================
   Emphasis & Highlighting
   ================================ */
strong, b {
  font-weight: var(--fw-bold);
}

em, i {
  font-style: italic;
}

mark {
  background-color: #ffeb3b;
  padding: 0.2em 0.4em;
  border-radius: 2px;
}

del {
  text-decoration: line-through;
  color: #999999;
}

ins {
  text-decoration: underline;
  text-decoration-style: wavy;
  text-underline-offset: 2px;
}

/* ================================
   Responsive Typography
   ================================ */
@media (max-width: 768px) {
  html {
    font-size: 15px;
  }
  
  .quarto-document-content h1 {
    font-size: var(--fs-4xl);
  }
  
  .quarto-document-content h2 {
    font-size: var(--fs-3xl);
  }
  
  .quarto-document-content h3 {
    font-size: var(--fs-2xl);
  }
  
  .quarto-document-content h4 {
    font-size: var(--fs-xl);
  }
  
  .quarto-document-content h5 {
    font-size: var(--fs-lg);
  }
  
  .quarto-document-content h6 {
    font-size: var(--fs-base);
  }
}

@media (max-width: 480px) {
  html {
    font-size: 14px;
  }
  
  body {
    line-height: var(--lh-normal);
  }
  
  .quarto-document-content h1 {
    font-size: var(--fs-3xl);
  }
  
  .quarto-document-content h2 {
    font-size: var(--fs-2xl);
  }
}

.title {
  color: var(--color-primary-blue) !important;
}