/* ==========================================================================
   FLL Team #76265 "Lego Legends" • BIOGLOW
   Retro NASA / 70s Heritage Space-Age MkDocs Theme Stylesheet
   Derived from mission_design_sketchpad_v2.html design language
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Caveat:wght@600;700&family=Outfit:wght@400;500;600;700;800&family=Righteous&family=Space+Grotesk:wght@500;600;700&display=swap');

:root {
  /* 70s Space-Age & NASA Heritage Palette */
  --retro-paper-bg: #FAF6EE;
  --retro-navy: #0E3B5C;
  --retro-navy-dark: #08243A;
  --retro-caramel: #B5732A;
  --retro-caramel-dark: #8F5217;
  --retro-caramel-light: #E5A85C;
  --retro-steel: #7998AB;
  --retro-steel-light: #C2D3DE;
  --retro-sand: #F2E2C8;
  --retro-sand-light: #FBF5EB;
  --retro-charcoal: #1E293B;
  --retro-muted: #576574;
  --retro-space-dark: #081524;
  --retro-grid-line: rgba(121, 152, 171, 0.22);
  --retro-grid-dot: #9E8F7A;
}

/* ==========================================================================
   MATERIAL FOR MKDOCS COLOR SYSTEM OVERRIDES
   ========================================================================== */

/* Light Mode: Warm Retro Paper Aesthetic */
[data-md-color-scheme="default"] {
  --md-default-bg-color: var(--retro-paper-bg);
  --md-default-bg-color--light: #F5EFE3;
  --md-default-bg-color--lighter: #EDE5D5;
  --md-default-fg-color: var(--retro-charcoal);
  --md-default-fg-color--light: var(--retro-muted);
  --md-default-fg-color--lighter: var(--retro-steel);
  --md-default-fg-color--lightest: var(--retro-sand);

  --md-primary-fg-color: var(--retro-navy);
  --md-primary-fg-color--light: #164E78;
  --md-primary-fg-color--dark: var(--retro-navy-dark);
  --md-primary-bg-color: #ffffff;

  --md-accent-fg-color: var(--retro-caramel);
  --md-accent-fg-color--transparent: rgba(181, 115, 42, 0.12);

  --md-typeset-a-color: var(--retro-navy);
  --md-typeset-a-color--hover: var(--retro-caramel-dark);

  --md-code-bg-color: #F3EBDD;
  --md-code-fg-color: var(--retro-charcoal);

  --md-shadow-z1: 0 4px 12px rgba(14, 59, 92, 0.08);
  --md-shadow-z2: 0 8px 24px rgba(14, 59, 92, 0.14);
}

/* Dark Mode: Deep Space Mission Control Aesthetic */
[data-md-color-scheme="slate"] {
  --md-default-bg-color: var(--retro-space-dark);
  --md-default-bg-color--light: #0C1E32;
  --md-default-bg-color--lighter: #132D48;
  --md-default-fg-color: var(--retro-sand-light);
  --md-default-fg-color--light: var(--retro-steel-light);
  --md-default-fg-color--lighter: var(--retro-steel);
  --md-default-fg-color--lightest: rgba(121, 152, 171, 0.25);

  --md-primary-fg-color: var(--retro-navy);
  --md-primary-fg-color--light: #174E78;
  --md-primary-fg-color--dark: #061928;
  --md-primary-bg-color: var(--retro-sand-light);

  --md-accent-fg-color: var(--retro-caramel-light);
  --md-accent-fg-color--transparent: rgba(229, 168, 92, 0.15);

  --md-typeset-a-color: var(--retro-caramel-light);
  --md-typeset-a-color--hover: #FFD494;

  --md-code-bg-color: #0E243B;
  --md-code-fg-color: #F8FAFC;

  --md-shadow-z1: 0 6px 18px rgba(0, 0, 0, 0.45);
  --md-shadow-z2: 0 12px 32px rgba(0, 0, 0, 0.65);
}

/* ==========================================================================
   TYPOGRAPHY (RIGHTEOUS, SPACE GROTESK, OUTFIT, CAVEAT)
   ========================================================================== */

/* Main Page Titles & Headers: Righteous Retro Display */
.md-typeset h1,
.md-header__title,
.bioglow-retro-title {
  font-family: 'Righteous', 'Space Grotesk', -apple-system, sans-serif !important;
  letter-spacing: 0.6px;
  font-weight: 400;
}

/* Section Headings: Space Grotesk Clean Technical */
.md-typeset h2,
.md-typeset h3,
.md-nav__title {
  font-family: 'Space Grotesk', 'Outfit', sans-serif !important;
  font-weight: 700;
  letter-spacing: 0.3px;
}

.md-typeset h4,
.md-typeset h5,
.md-typeset h6,
.md-nav__link,
.md-button,
.md-typeset table th {
  font-family: 'Space Grotesk', 'Outfit', sans-serif !important;
}

/* Body Text: Outfit Readable Clean */
body,
.md-typeset,
.md-typeset p,
.md-typeset li {
  font-family: 'Outfit', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
  line-height: 1.65;
}

/* Handwritten Cursive Accents: Caveat */
.md-typeset blockquote,
.retro-script,
.script-note {
  font-family: 'Caveat', cursive, sans-serif !important;
  font-size: 1.15rem;
  line-height: 1.4;
}

/* ==========================================================================
   HEADER & NAVIGATION BAR STYLING
   ========================================================================== */

.md-header {
  background-color: var(--retro-navy) !important;
  border-bottom: 2px solid var(--retro-caramel) !important;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.35) !important;
  position: sticky !important;
}

.md-header::after {
  content: "";
  position: absolute;
  bottom: -2px;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(
    to right,
    var(--retro-caramel) 0%, var(--retro-caramel) 25%,
    var(--retro-steel) 25%, var(--retro-steel) 50%,
    var(--retro-sand) 50%, var(--retro-sand) 75%,
    var(--retro-navy) 75%, var(--retro-navy) 100%
  );
  z-index: 10;
}

.md-tabs {
  background-color: var(--retro-navy-dark) !important;
  border-bottom: 1.5px solid rgba(181, 115, 42, 0.45) !important;
  position: relative !important;
}

.md-tabs__link {
  font-family: 'Space Grotesk', sans-serif !important;
  font-weight: 600;
  letter-spacing: 0.4px;
  color: var(--retro-steel-light) !important;
  opacity: 0.85;
  transition: all 0.2s ease;
}

.md-tabs__link:hover {
  color: #ffffff !important;
  opacity: 1;
}

.md-tabs__item--active .md-tabs__link {
  color: var(--retro-caramel-light) !important;
  opacity: 1;
  border-bottom: 2px solid var(--retro-caramel) !important;
}

/* ==========================================================================
   CARD & BOX STYLING
   ========================================================================== */

.md-typeset .grid.cards > ul > li,
.md-typeset .card {
  border: 1.5px solid var(--retro-steel);
  border-radius: 12px;
  background: var(--md-default-bg-color);
  transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
  box-shadow: 3px 3px 0 var(--retro-steel-light);
}

[data-md-color-scheme="slate"] .md-typeset .grid.cards > ul > li {
  border-color: rgba(181, 115, 42, 0.4);
  box-shadow: 3px 3px 0 rgba(8, 36, 58, 0.8);
  background: rgba(14, 59, 92, 0.35);
}

.md-typeset .grid.cards > ul > li:hover {
  transform: translateY(-3px);
  border-color: var(--retro-caramel);
  box-shadow: 4px 6px 16px rgba(181, 115, 42, 0.25);
}

/* Buttons */
.md-button--primary {
  background-color: var(--retro-caramel) !important;
  border-color: var(--retro-caramel-dark) !important;
  color: #ffffff !important;
  font-family: 'Space Grotesk', sans-serif !important;
  font-weight: 700 !important;
  letter-spacing: 0.5px;
  border-radius: 8px !important;
  box-shadow: 2px 2px 0 var(--retro-caramel-dark) !important;
}

.md-button--primary:hover {
  background-color: var(--retro-caramel-dark) !important;
  transform: translateY(-1px);
}

.md-button {
  border-radius: 8px !important;
  font-family: 'Space Grotesk', sans-serif !important;
  font-weight: 600 !important;
}

/* Table Enhancements */
.md-typeset table:not([class]) {
  border: 1.5px solid var(--retro-steel);
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 2px 2px 0 var(--retro-steel-light);
}

.md-typeset table:not([class]) th {
  background-color: var(--retro-navy);
  color: var(--retro-sand);
  font-weight: 700;
  letter-spacing: 0.4px;
}

/* Admonitions (Callouts) */
.md-typeset .admonition {
  border-radius: 10px;
  border-left-width: 6px !important;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.08);
}

.md-typeset .admonition.note,
.md-typeset .admonition.info {
  border-left-color: var(--retro-navy) !important;
}

.md-typeset .admonition.tip {
  border-left-color: var(--retro-caramel) !important;
}

.md-typeset .admonition.important {
  border-left-color: var(--retro-caramel-dark) !important;
}

/* Custom Emblem Badge for Team 76265 Lego Legends */
.retro-emblem-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  background: var(--retro-navy);
  color: #ffffff;
  border: 2px solid var(--retro-caramel);
  padding: 0.35rem 0.85rem;
  border-radius: 10px;
  box-shadow: 2px 2px 0 var(--retro-caramel);
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 700;
  font-size: 0.85rem;
  letter-spacing: 0.5px;
}

.retro-emblem-badge .badge-tag {
  color: var(--retro-sand);
  text-transform: uppercase;
  font-size: 0.72rem;
  letter-spacing: 1px;
}

.retro-emblem-badge .badge-name {
  color: #ffffff;
  font-family: 'Righteous', sans-serif;
  font-size: 1.05rem;
}

/* ==========================================================================
   SEARCH BAR STYLING
   ========================================================================== */

.md-search__inner {
  border-radius: 8px;
}

.md-search__input {
  background-color: rgba(255, 255, 255, 0.12) !important;
  border: 1px solid var(--retro-steel) !important;
  border-radius: 8px !important;
  color: #ffffff !important;
  font-family: 'Space Grotesk', sans-serif !important;
}

.md-search__input::placeholder {
  color: var(--retro-sand) !important;
  opacity: 0.85;
}

/* ==========================================================================
   FOOTER STYLING
   ========================================================================== */

.md-footer {
  background-color: var(--retro-navy-dark) !important;
  border-top: 2px solid var(--retro-caramel) !important;
  position: relative !important;
}

.md-footer::before {
  content: "";
  display: block;
  height: 4px;
  width: 100%;
  background: linear-gradient(
    to right,
    var(--retro-caramel) 0%, var(--retro-caramel) 25%,
    var(--retro-steel) 25%, var(--retro-steel) 50%,
    var(--retro-sand) 50%, var(--retro-sand) 75%,
    var(--retro-navy) 75%, var(--retro-navy) 100%
  );
}

.md-footer-meta {
  background-color: var(--retro-space-dark) !important;
}

/* ==========================================================================
   SIDEBAR NAVIGATION POLISH
   ========================================================================== */

.md-nav__link--active {
  color: var(--retro-caramel) !important;
  font-weight: 700 !important;
}

[data-md-color-scheme="default"] .md-nav__link--active {
  color: var(--retro-caramel-dark) !important;
}

[data-md-color-scheme="slate"] .md-nav__link--active {
  color: var(--retro-caramel-light) !important;
}

/* ==========================================================================
   HERITAGE RACING RIBBON UTILITIES
   ========================================================================== */

.racing-ribbon {
  display: flex;
  height: 4px;
  width: 100%;
  border-radius: 2px;
  overflow: hidden;
  margin: 1.25rem 0;
}

.racing-ribbon .bar-caramel { background: var(--retro-caramel); flex: 1; }
.racing-ribbon .bar-steel { background: var(--retro-steel); flex: 1; }
.racing-ribbon .bar-sand { background: var(--retro-sand); flex: 1; }
.racing-ribbon .bar-navy { background: var(--retro-navy); flex: 1; }