/* ===========================================================================
   Frontiers Engine theme
   ---------------------------------------------------------------------------
     1. Color tokens (dark + light)
     2. Typography
     3. Background texture (subtle parchment dots)
     4. Header: three-zone, big logo, centered sections
     5. Mobile header: taller bar, integrated logo, social by the hamburger
     6. Flat sidebar (image 2 style) + injected section title
     7. Right-column table of contents
     8. Content + misc polish
   =========================================================================== */


/* 1. COLOR TOKENS ========================================================== */

/* ---- Dark (default) ---- */
[data-md-color-scheme="slate"] {
  --fe-bg:           #211c17;
  --fe-surface:      #2a241d;
  --fe-surface-2:    #322b22;
  --fe-header:       #2b251e;
  --fe-text:         #ece2cf;
  --fe-text-muted:   #b9ad97;
  --fe-gold:         #d4a24c;
  --fe-gold-bright:  #e6b863;
  --fe-border:       rgba(212, 162, 76, 0.18);
  --fe-border-soft:  rgba(236, 226, 207, 0.08);
  --fe-dot:          rgba(236, 226, 207, 0.045);

  --md-default-bg-color:            var(--fe-bg);
  --md-default-fg-color:            var(--fe-text);
  --md-default-fg-color--light:     var(--fe-text-muted);
  --md-default-fg-color--lighter:   rgba(236, 226, 207, 0.32);
  --md-default-fg-color--lightest:  rgba(236, 226, 207, 0.12);

  --md-primary-fg-color:            var(--fe-header);
  --md-primary-bg-color:            var(--fe-text);
  --md-primary-bg-color--light:     var(--fe-text-muted);

  --md-accent-fg-color:             var(--fe-gold);
  --md-typeset-a-color:             var(--fe-gold-bright);

  --md-code-bg-color:               #2a241d;
  --md-code-fg-color:               #e7dcc7;

  --md-footer-bg-color:             #1b1712;
  --md-footer-bg-color--dark:       #16120e;
}

/* ---- Light ---- */
[data-md-color-scheme="default"] {
  --fe-bg:           #f5eede;
  --fe-surface:      #fbf6ea;
  --fe-surface-2:    #f0e7d4;
  --fe-header:       #43382c;
  --fe-text:         #2a231b;
  --fe-text-muted:   #6b5d49;
  --fe-gold:         #a9762a;
  --fe-gold-bright:  #8f6220;
  --fe-border:       rgba(67, 56, 44, 0.16);
  --fe-border-soft:  rgba(67, 56, 44, 0.08);
  --fe-dot:          rgba(67, 56, 44, 0.06);

  --md-default-bg-color:            var(--fe-bg);
  --md-default-fg-color:            var(--fe-text);
  --md-default-fg-color--light:     var(--fe-text-muted);
  --md-default-fg-color--lighter:   rgba(42, 35, 27, 0.42);
  --md-default-fg-color--lightest:  rgba(42, 35, 27, 0.12);

  --md-primary-fg-color:            var(--fe-header);
  --md-primary-bg-color:            #f5eede;
  --md-primary-bg-color--light:     rgba(245, 238, 222, 0.7);

  --md-accent-fg-color:             var(--fe-gold);
  --md-typeset-a-color:             var(--fe-gold-bright);

  --md-code-bg-color:               #efe7d6;
  --md-code-fg-color:               #3a3024;

  --md-footer-bg-color:             #43382c;
  --md-footer-bg-color--dark:       #382e23;
}


/* 2. TYPOGRAPHY ============================================================ */
/* Body + UI use Inter (mkdocs.yml). Headings use a dignified serif.
   To audition another, change BOTH the @import name and the font-family below.
   Curated picks (all on Google Fonts):
     Libre Baskerville  (current) classic, sturdy, traditional serifs
     Playfair Display   editorial, high contrast, dramatic
     EB Garamond        elegant old-style, lighter
     Source Serif 4     clean and authoritative
     Zilla Slab         slab serif, blocky and bold (most "serif-y") */
@import url('https://fonts.googleapis.com/css2?family=Libre+Baskerville:wght@400;700&display=swap');

.md-typeset h1,
.md-typeset h2,
.md-typeset h3,
.md-typeset h4 {
  font-family: "Libre Baskerville", Georgia, "Times New Roman", serif;
  letter-spacing: 0.1px;
}
.md-typeset h1 {
  font-weight: 700;
  color: var(--fe-text);
}
.md-typeset h2 {
  font-weight: 700;
}


/* 3. BACKGROUND TEXTURE ==================================================== */
.md-main {
  background-color: var(--md-default-bg-color);
  background-image: radial-gradient(circle, var(--fe-dot) 1px, transparent 1px);
  background-size: 24px 24px;
}


/* 4. HEADER ================================================================ */

.fe-header {
  background-color: var(--fe-header);
  border-bottom: 1px solid var(--fe-border);
}

/* Three zones so the centered sections never overlap the logo or search. */
.fe-header__inner {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  min-height: 4.5rem;        /* DESKTOP bar thickness */
}

.fe-header__left {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex: 0 0 auto;
}

.fe-header__center {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
}

.fe-header__right {
  display: flex;
  align-items: center;
  gap: 0.2rem;
  flex: 0 0 auto;
}

/* ---- Logo ----
   Two logos share the same artwork: desktop (left zone) and mobile (center
   zone). Edit the heights to resize. !important beats Material's built-in logo
   height; width:auto preserves the aspect ratio, so only change height. */
.fe-logo { padding: 0; margin: 0; }

.fe-logo--desktop img {
  height: 6rem !important;   /* <- DESKTOP logo size */
  width: auto !important;
  display: block;
}

.fe-logo--mobile {
  display: none;             /* shown only on mobile, see section 5 */
  align-items: center;
}
.fe-logo--mobile img {
  width: auto !important;
  display: block;
}

/* Divider + social cluster */
.fe-social--header {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  margin-left: 0.9rem;   /* clean separation from the logo (replaces old divider) */
}
.fe-social__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.7rem;
  height: 1.7rem;
  border-radius: 6px;
  opacity: 0.85;
  transition: opacity 0.15s ease, background-color 0.15s ease, transform 0.15s ease;
}
.fe-social__link:hover {
  opacity: 1;
  background: var(--fe-border-soft);
  transform: translateY(-1px);
}
.fe-social__link img {
  width: 1.2rem;
  height: 1.2rem;
  display: block;
}

/* Section links, centered, normal case. Smaller now to relieve tightness. */
.fe-sections {
  display: flex;
  align-items: center;
  gap: 0.05rem;
  flex-wrap: nowrap;
}
.fe-sections__link {
  color: var(--md-primary-bg-color);
  font-size: 0.7rem;         /* <- tab name size */
  font-weight: 500;
  letter-spacing: 0.1px;
  padding: 0.3rem 0.4rem;
  border-radius: 6px;
  border-bottom: 2px solid transparent;
  text-decoration: none;
  white-space: nowrap;
  transition: color 0.15s ease, border-color 0.15s ease, background-color 0.15s ease;
}
.fe-sections__link:hover {
  color: var(--fe-gold-bright);
  background: var(--fe-border-soft);
}
.fe-sections__link--active {
  color: var(--fe-gold);
  border-bottom-color: var(--fe-gold);
}

.md-tabs { display: none !important; }


/* 5. MOBILE HEADER ========================================================= */
@media screen and (max-width: 76.1875em) {

  .fe-header__inner {
    min-height: 8.4rem;        /* <- MOBILE bar height */
  }

  .fe-hamburger {
    display: inline-flex;
  }

  /* Bigger icons across the mobile bar (hamburger, search, toggle) */
  .fe-header .md-header__button.md-icon svg {
    width: 1.5rem;
    height: 1.5rem;
  }

  /* Swap which logo is visible */
  .fe-logo--desktop { display: none; }
  .fe-logo--mobile { display: flex; }
  .fe-logo--mobile img {
    height: 7.8rem !important; /* <- MOBILE logo size */
  }

  /* Larger social icons on mobile */
  .fe-social--header { gap: 0.7rem; margin-left: 0.5rem; }
  .fe-social__link {
    width: 2.2rem;
    height: 2.2rem;
  }
  .fe-social__link img {
    width: 1.6rem;
    height: 1.6rem;
  }

  /* Keep the search box vertically centered in the taller bar
     (no forced height, that was knocking it off center) */
  .fe-header__right .md-search { align-self: center; }

  /* --- Left drawer ~50% wider on mobile ---
     Width alone is not enough: Material slides the drawer open by a fixed
     distance, so a wider drawer leaves its left edge (the nav) off-screen.
     We pin the position and drive the open/closed slide ourselves. */
  .md-sidebar--primary {
    width: 18rem !important;
    left: 0 !important;
    transform: translateX(-100%) !important;   /* closed: fully off-screen left */
  }
  [data-md-toggle="drawer"]:checked ~ .md-container .md-sidebar--primary,
  [data-md-toggle="drawer"]:checked ~ .md-main .md-sidebar--primary {
    transform: translateX(0) !important;        /* open: flush to the left edge */
  }

  /* --- Mobile body text + spacing --- */
  .md-typeset { font-size: 1.15rem; }   /* main body text, near the callout size */

  /* Softer spacing before headings (less dramatic section breaks) */
  .md-typeset h2 { margin-top: 1.1em; }
  .md-typeset h3 { margin-top: 0.9em; }

  /* A little breathing room on the content edges */
  .md-content { padding-left: 0.8rem; padding-right: 0.8rem; }

  /* These carry their own font-size in Material, so scale them too */
  .md-typeset .admonition,
  .md-typeset details,
  .md-typeset .admonition-title,
  .md-typeset summary,
  .md-typeset table:not([class]) { font-size: 1.05rem; }

  /* Drawer nav: larger text, roomier rows.
     Material sets its own nav font-size that was outranking the earlier rule,
     so this uses higher specificity (html ... .md-nav ...) plus !important,
     and forces the inner text span too. */
  html .md-sidebar--primary .md-nav .md-nav__link,
  html .md-sidebar--primary .md-nav label.md-nav__link {
    font-size: 1.35rem !important;
    padding: 0.7rem 1rem !important;
    line-height: 1.4 !important;
  }
  html .md-sidebar--primary .md-nav .md-nav__link .md-ellipsis {
    font-size: inherit !important;
  }
  html .md-sidebar--primary .md-nav__title:not([for="__drawer"]) {
    font-size: 1.3rem !important;
  }
  html .md-sidebar--primary .md-nav__icon svg {
    width: 1.45rem !important;
    height: 1.45rem !important;
  }

  .md-sidebar--secondary .md-nav__title,
  .md-sidebar--secondary .md-nav__link { font-size: 1.1rem; }

  /* Sections live in the drawer on mobile */
  .fe-sections { display: none; }

  /* ---- Drawer (hamburger menu) ---- */

  /* Drawer header: centered, enlarged logo with a roomy top band.
     Logo is a plain block (not inline-block) to avoid a baseline quirk that
     was pinning it to the top edge. */
  .md-nav--primary > .md-nav__title[for="__drawer"] {
    display: block !important;
    height: auto !important;      /* release Material's fixed title height */
    font-size: 0;                 /* hide the site-name text */
    padding: 2.5rem 1rem 2rem !important;
  }
  .md-nav--primary > .md-nav__title[for="__drawer"] .md-logo {
    display: block !important;
    float: none !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  .md-nav--primary > .md-nav__title[for="__drawer"] .md-logo img {
    height: 7.2rem !important;   /* <- DRAWER logo size */
    width: auto !important;
    display: block;
    margin: 0 auto !important;   /* center the logo */
  }

  /* Put the back arrow on the same line as the section title.
     Material positions the arrow absolutely, so it must be forced static. */
  .md-sidebar--primary .md-nav__title {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 0.4rem;
  }
  .md-sidebar--primary .md-nav__title .md-nav__icon {
    position: static !important;
    margin: 0 !important;
    top: auto !important;
    left: auto !important;
    flex: 0 0 auto;
  }
}


@media screen and (min-width: 76.25em) {
  .fe-hamburger { display: none; }
}


/* 6. FLAT SIDEBAR (image 2 style) ========================================= */

.md-sidebar--primary {
  background: transparent;
}

/* Injected section title, e.g. "Releases" (desktop only) */
.fe-nav-title {
  display: none;
}
@media screen and (min-width: 76.25em) {
  .fe-nav-title {
    display: block;
    color: var(--fe-gold);
    font-weight: 700;
    font-size: 0.84rem;
    letter-spacing: 0.2px;
    padding: 0.1rem 0.8rem 0.65rem;
  }
}

/* Flat rows, no cards */
.md-sidebar--primary .md-nav__link {
  display: flex;
  align-items: center;
  padding: 0.38rem 0.8rem;
  margin: 0;
  border: none;
  border-radius: 0;
  background: none;
  color: var(--fe-text-muted);
  font-size: 0.8rem;
  line-height: 1.35;
  transition: color 0.12s ease;
}
.md-sidebar--primary .md-nav__link:hover {
  background: none;
  color: var(--fe-gold-bright);
  transform: none;
}
.md-sidebar--primary .md-nav__link--active,
.md-sidebar--primary .md-nav__item--active > .md-nav__link {
  background: none;
  border: none;
  color: var(--fe-gold);
  font-weight: 600;
}
.md-sidebar--primary .md-nav__link--active::before {
  content: none;
}

/* Indentation without guide lines */
.md-sidebar--primary .md-nav__item .md-nav {
  margin-left: 0;
  padding-left: 0.7rem;
  border-left: none;
}

/* Collapsible group labels in normal case */
.md-sidebar--primary label.md-nav__link {
  color: var(--fe-text);
  font-weight: 600;
  text-transform: none;
  letter-spacing: 0;
  font-size: 0.8rem;
}

/* Right-aligned chevron */
.md-sidebar--primary .md-nav__icon {
  margin-left: auto;
  color: var(--fe-text-muted);
}
.md-sidebar--primary .md-nav__item--active > label.md-nav__link .md-nav__icon,
.md-sidebar--primary label.md-nav__link:hover .md-nav__icon {
  color: var(--fe-gold);
}


/* Desktop: compact, lined sidebar (CustomMill / TOC feel) */
@media screen and (min-width: 76.25em) {
  .md-sidebar--primary .md-nav__link,
  .md-sidebar--primary label.md-nav__link {
    padding: 0.2rem 0.55rem;
    font-size: 0.72rem;
    line-height: 1.45;
  }

  /* Nested-level indentation (no guide line) */
  .md-sidebar--primary .md-nav__item .md-nav {
    margin-left: 0.6rem;
    padding-left: 0.6rem;
  }

  /* Active row: inset gold marker on the left, like the TOC */
  .md-sidebar--primary .md-nav__link--active {
    box-shadow: inset 2px 0 0 var(--fe-gold);
  }

  /* Tighten the gap under the injected section title */
  .fe-nav-title { padding-bottom: 0.45rem; }
}


/* 7. RIGHT-COLUMN TABLE OF CONTENTS ======================================= */

.md-sidebar--secondary .md-nav__title {
  color: var(--fe-text-muted);
  font-weight: 700;
  text-transform: none;
  letter-spacing: 0.2px;
  font-size: 0.78rem;
}
.md-sidebar--secondary .md-nav__link--active {
  color: var(--fe-gold);
  font-weight: 600;
}
.md-sidebar--secondary .md-nav__link:hover {
  color: var(--fe-gold-bright);
}


/* 8. CONTENT + MISC POLISH ================================================ */

.md-typeset a {
  text-decoration-color: var(--fe-border);
}
.md-typeset a:hover {
  color: var(--fe-gold);
}

::selection {
  background: rgba(212, 162, 76, 0.28);
}

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

.md-typeset pre > code {
  border: 1px solid var(--fe-border-soft);
  border-radius: 8px;
}

.md-footer {
  background: var(--md-footer-bg-color);
}