/* elastic-script custom styles */

:root {
  --md-primary-fg-color: #673ab7;
  --md-primary-fg-color--light: #9575cd;
  --md-primary-fg-color--dark: #512da8;
  --md-accent-fg-color: #ffc107;
}

/* ============================================
   WIDE SCREEN OPTIMIZATION (1440p+)
   ============================================ */

/* Expand content area for large screens */
@media screen and (min-width: 1440px) {
  .md-grid {
    max-width: 1600px;
  }
  
  .md-main__inner {
    max-width: 1600px;
  }
  
  /* Reduce base font size slightly for large screens */
  .md-typeset {
    font-size: 0.85rem;
    line-height: 1.6;
  }
  
  /* Increase content area width */
  .md-content {
    max-width: 1100px;
  }
  
  /* Widen the sidebar */
  .md-sidebar--primary {
    width: 14rem;
  }
  
  .md-sidebar--secondary {
    width: 14rem;
  }
}

/* Extra wide screens (2560px+) */
@media screen and (min-width: 2000px) {
  .md-grid {
    max-width: 1800px;
  }
  
  .md-main__inner {
    max-width: 1800px;
  }
  
  .md-typeset {
    font-size: 0.8rem;
    line-height: 1.65;
  }
  
  .md-content {
    max-width: 1300px;
  }
  
  /* Better table layout on wide screens */
  .md-typeset table:not([class]) {
    display: table;
    width: 100%;
  }
  
  /* Code blocks use more horizontal space */
  .md-typeset pre {
    max-width: 100%;
  }
}

/* ============================================
   TYPOGRAPHY ADJUSTMENTS
   ============================================ */

/* Slightly smaller headings for better proportion */
.md-typeset h1 {
  font-size: 1.8em;
  margin-bottom: 0.8em;
}

.md-typeset h2 {
  font-size: 1.4em;
  margin-top: 1.2em;
}

.md-typeset h3 {
  font-size: 1.15em;
}

/* Tighter paragraph spacing */
.md-typeset p {
  margin-bottom: 0.8em;
}

/* Code blocks - slightly smaller font */
.md-typeset code {
  font-size: 0.82em;
  background-color: rgba(103, 58, 183, 0.1);
  border-radius: 4px;
}

.md-typeset pre code {
  font-size: 0.8em;
}

/* ============================================
   NAVIGATION & LAYOUT
   ============================================ */

/* Tighter nav items */
.md-nav__item {
  padding: 0;
}

.md-nav__link {
  padding: 0.4rem 0.6rem;
  font-size: 0.75rem;
}

/* Table of contents - tighter */
.md-nav--secondary .md-nav__link {
  font-size: 0.7rem;
  padding: 0.3rem 0.6rem;
}

/* Tab navigation - more compact */
.md-tabs__link {
  font-size: 0.75rem;
  padding: 0 1rem;
}

/* ============================================
   SYNTAX HIGHLIGHTING
   ============================================ */

/* SQL syntax highlighting in code blocks */
.highlight .k,
.highlight .kd,
.highlight .kn,
.highlight .kp,
.highlight .kr,
.highlight .kt {
  color: #673ab7;
  font-weight: bold;
}

/* String literals */
.highlight .s,
.highlight .s1,
.highlight .s2 {
  color: #558b2f;
}

/* Numbers */
.highlight .mi,
.highlight .mf {
  color: #1976d2;
}

/* Comments */
.highlight .c,
.highlight .c1,
.highlight .cm {
  color: #757575;
  font-style: italic;
}

/* ============================================
   COMPONENTS
   ============================================ */

/* Home page cards */
.md-typeset .grid.cards > ul > li {
  border: 1px solid rgba(103, 58, 183, 0.2);
  border-radius: 8px;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.md-typeset .grid.cards > ul > li:hover {
  border-color: rgba(103, 58, 183, 0.5);
  box-shadow: 0 4px 12px rgba(103, 58, 183, 0.15);
}

/* Admonitions - more compact */
.md-typeset .admonition,
.md-typeset details {
  font-size: 0.85em;
  margin: 1em 0;
}

.md-typeset .admonition.tip,
.md-typeset details.tip {
  border-color: #4caf50;
}

.md-typeset .admonition.warning,
.md-typeset details.warning {
  border-color: #ff9800;
}

/* Tables - more compact */
.md-typeset table:not([class]) {
  font-size: 0.85em;
}

.md-typeset table:not([class]) th {
  background-color: rgba(103, 58, 183, 0.1);
  padding: 0.6em 0.8em;
}

.md-typeset table:not([class]) td {
  padding: 0.5em 0.8em;
}

/* Header */
.md-header {
  background-color: #673ab7;
}

/* Footer links */
.md-footer-meta__inner {
  padding: 1rem;
}

/* ============================================
   DARK MODE
   ============================================ */

[data-md-color-scheme="slate"] {
  --md-default-bg-color: #1e1e2e;
  --md-default-fg-color: #cdd6f4;
}

[data-md-color-scheme="slate"] .md-typeset code {
  background-color: rgba(205, 214, 244, 0.1);
}

/* ============================================
   BUTTONS
   ============================================ */

.md-typeset .md-button {
  font-size: 0.75rem;
  padding: 0.5em 1.2em;
}