/* ============================================================
   Foxtrot November — MkDocs Material Theme Overrides
   Brand: Dark navy + FN Orange + FN Green
   Source: Figma Landing Page (node 357-196)
   ============================================================ */

/* ── Brand Tokens ───────────────────────────────────────────── */
:root {
  --fn-navy:        #1B1B2F;
  --fn-navy-light:  #252542;
  --fn-navy-mid:    #2D2D4A;
  --fn-orange:      #FC8006;
  --fn-orange-light:#FFA033;
  --fn-green:       #6AB04C;
  --fn-green-light: #7EC864;
  --fn-white:       #FFFFFF;
  --fn-gray-100:    #F5F5F7;
  --fn-gray-200:    #E8E8EC;
  --fn-gray-600:    #8888A0;
  --fn-gray-800:    #44445A;
}

/* ── Dark Scheme (default) ──────────────────────────────────── */
[data-md-color-scheme="slate"] {
  --md-primary-fg-color:         var(--fn-navy);
  --md-primary-bg-color:         var(--fn-white);
  --md-accent-fg-color:          var(--fn-orange);
  --md-default-bg-color:         #0F0F1E;
  --md-default-fg-color:         var(--fn-gray-100);
  --md-default-fg-color--light:  var(--fn-gray-600);
  --md-typeset-a-color:          var(--fn-orange);
  --md-code-bg-color:            var(--fn-navy-light);
  --md-code-fg-color:            var(--fn-gray-100);
  --md-footer-bg-color:          var(--fn-navy);
  --md-footer-fg-color:          var(--fn-gray-200);
}

/* ── Light Scheme ───────────────────────────────────────────── */
[data-md-color-scheme="default"] {
  --md-primary-fg-color:         var(--fn-navy);
  --md-primary-bg-color:         var(--fn-white);
  --md-accent-fg-color:          var(--fn-orange);
  --md-typeset-a-color:          #C47420;
  --md-code-bg-color:            var(--fn-gray-100);
}

/* ── Header / Nav Bar ───────────────────────────────────────── */
.md-header {
  background: var(--fn-navy) !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

.md-header__title {
  font-weight: 700;
  letter-spacing: 0.02em;
}

/* Tabs bar */
.md-tabs {
  background: var(--fn-navy-light) !important;
}

.md-tabs__link--active,
.md-tabs__link:hover {
  color: var(--fn-orange) !important;
}

/* ── Sidebar / Navigation ───────────────────────────────────── */
.md-nav__link:hover,
.md-nav__link--active {
  color: var(--fn-orange) !important;
}

.md-nav__item--active > .md-nav__link {
  color: var(--fn-orange);
  font-weight: 600;
}

/* ── Content Area ───────────────────────────────────────────── */
.md-typeset h1 {
  color: var(--fn-orange);
  font-weight: 800;
  letter-spacing: -0.01em;
  border-bottom: 2px solid var(--fn-orange);
  padding-bottom: 0.3em;
}

.md-typeset h2 {
  color: var(--fn-orange-light);
  font-weight: 700;
  margin-top: 2em;
}

.md-typeset h3 {
  font-weight: 600;
}

/* Links */
.md-typeset a:hover {
  color: var(--fn-orange-light) !important;
  text-decoration: underline;
}

/* Code blocks */
.md-typeset code {
  border-radius: 4px;
  font-size: 0.85em;
}

.md-typeset pre {
  border-radius: 8px;
  border-left: 3px solid var(--fn-orange);
}

/* Tables */
.md-typeset table:not([class]) th {
  background: var(--fn-navy) !important;
  color: var(--fn-white) !important;
  font-weight: 600;
}

[data-md-color-scheme="default"] .md-typeset table:not([class]) th {
  background: var(--fn-navy) !important;
  color: var(--fn-white) !important;
}

.md-typeset table:not([class]) tr:nth-child(even) {
  background: rgba(27, 27, 47, 0.05);
}

[data-md-color-scheme="slate"] .md-typeset table:not([class]) tr:nth-child(even) {
  background: rgba(255, 255, 255, 0.03);
}

/* ── Images (guide screenshots) ─────────────────────────────── */
.md-typeset img {
  border-radius: 8px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
  margin: 1em 0;
  max-width: 100%;
  border: 1px solid rgba(232, 145, 58, 0.15);
}

[data-md-color-scheme="slate"] .md-typeset img {
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
  border: 1px solid rgba(232, 145, 58, 0.25);
}

/* ── Admonitions ────────────────────────────────────────────── */
.md-typeset .admonition,
.md-typeset details {
  border-radius: 8px;
  border-left: 4px solid var(--fn-orange);
}

/* ── Footer ─────────────────────────────────────────────────── */
.md-footer {
  background: var(--fn-navy) !important;
}

.md-footer-meta {
  background: rgba(0, 0, 0, 0.2) !important;
}

/* ── Search ─────────────────────────────────────────────────── */
.md-search__input {
  background: var(--fn-navy-light) !important;
}

[data-md-color-scheme="default"] .md-search__input {
  background: var(--fn-gray-100) !important;
}

/* ── Scrollbar (dark mode) ──────────────────────────────────── */
[data-md-color-scheme="slate"] ::-webkit-scrollbar {
  width: 8px;
}

[data-md-color-scheme="slate"] ::-webkit-scrollbar-track {
  background: var(--fn-navy);
}

[data-md-color-scheme="slate"] ::-webkit-scrollbar-thumb {
  background: var(--fn-gray-800);
  border-radius: 4px;
}

[data-md-color-scheme="slate"] ::-webkit-scrollbar-thumb:hover {
  background: var(--fn-orange);
}

/* ── Logo ───────────────────────────────────────────────────── */
.md-header__button.md-logo img,
.md-header__button.md-logo svg {
  height: 32px;
  width: auto;
}