/* ============================================================
   RaceLink — Material for MkDocs theme
   Repo: PSi86/RaceLink_Docs   ·   path: docs/assets/racelink-theme.css
   (mkdocs.yml already points extra_css here — just drop this in.)

   Brand-matched documentation styling.

   Strategy: override Material's CSS custom properties per colour
   scheme so the whole theme recolours itself, then add a few
   targeted polish rules.

     [data-md-color-scheme="default"]  -> LIGHT  (clean, readable)
     [data-md-color-scheme="slate"]    -> DARK   (matches racelink.dev)

   The header stays dark in BOTH modes for brand consistency.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Chakra+Petch:wght@500;600;700&family=Sora:wght@400;500;600&family=JetBrains+Mono:wght@400;500;600&display=swap');

/* ---------- typography (both schemes) ---------- */
:root{
  --rl-cyan:#1fe6d6;
  --rl-pink:#ff2e6e;
  --rl-amber:#ffb23e;
  --rl-grad:linear-gradient(100deg,var(--rl-pink),var(--rl-cyan));
  --md-text-font:"Sora";
  --md-code-font:"JetBrains Mono";
}
body,input,.md-typeset{font-family:"Sora",-apple-system,system-ui,sans-serif;}
.md-typeset code,.md-typeset pre,.md-typeset kbd{
  font-family:"JetBrains Mono",ui-monospace,SFMono-Regular,monospace;
}
.md-typeset h1,.md-typeset h2,.md-typeset h3,.md-typeset h4,.md-typeset h5,
.md-header__title,.md-nav__title,.md-tabs__link,.md-typeset .tabbed-labels>label{
  font-family:"Chakra Petch",sans-serif;letter-spacing:-.01em;
}
.md-typeset h1{font-weight:700;letter-spacing:-.02em;}
.md-typeset h2{font-weight:700;}
.md-typeset h3{font-weight:600;}

/* ============================================================
   LIGHT SCHEME
   ============================================================ */
[data-md-color-scheme="default"]{
  --md-default-bg-color:#ffffff;
  --md-default-fg-color:#15171f;
  --md-default-fg-color--light:rgba(21,23,31,.66);
  --md-default-fg-color--lighter:rgba(21,23,31,.34);
  --md-default-fg-color--lightest:rgba(21,23,31,.07);

  --md-typeset-color:#23262f;
  --md-typeset-a-color:#0c8f86;            /* deep teal: AA on white */

  --md-accent-fg-color:#e0245e;            /* magenta accent */
  --md-accent-fg-color--transparent:rgba(224,36,94,.1);

  --md-code-bg-color:#f4f5f8;
  --md-code-fg-color:#27313b;

  --md-footer-bg-color:#0b0c12;
  --md-footer-bg-color--dark:#07080d;
  --md-footer-fg-color:#f3f5fa;
  --md-footer-fg-color--light:rgba(243,245,250,.72);
  --md-footer-fg-color--lighter:rgba(243,245,250,.45);

  --rl-surface:#f7f8fb;
  --rl-border:rgba(21,23,31,.1);
  --rl-link:#0c8f86;
  --rl-link-soft:rgba(12,143,134,.34);
}
[data-md-color-scheme="default"] body{background:#fbfbfd;}

/* ============================================================
   DARK SCHEME  (1:1 with racelink.dev)
   ============================================================ */
[data-md-color-scheme="slate"]{
  --md-hue:232;

  --md-default-bg-color:#07080D;
  --md-default-fg-color:#F3F5FA;
  --md-default-fg-color--light:rgba(243,245,250,.72);
  --md-default-fg-color--lighter:rgba(243,245,250,.42);
  --md-default-fg-color--lightest:rgba(243,245,250,.12);

  --md-typeset-color:#d5d9e3;
  --md-typeset-a-color:#1fe6d6;            /* cyan links */

  --md-accent-fg-color:#ff2e6e;            /* magenta accent */
  --md-accent-fg-color--transparent:rgba(255,46,110,.14);

  --md-code-bg-color:#12141f;
  --md-code-fg-color:#e4e7f0;

  --md-footer-bg-color:#07080d;
  --md-footer-bg-color--dark:#050609;
  --md-footer-fg-color:#f3f5fa;
  --md-footer-fg-color--light:rgba(243,245,250,.7);
  --md-footer-fg-color--lighter:rgba(243,245,250,.42);

  --rl-surface:#12141f;
  --rl-border:rgba(255,255,255,.1);
  --rl-link:#1fe6d6;
  --rl-link-soft:rgba(31,230,214,.32);
}
[data-md-color-scheme="slate"]{
  background:
    radial-gradient(900px 520px at 12% -3%,rgba(255,46,110,.10),transparent 60%),
    radial-gradient(820px 600px at 92% 4%,rgba(31,230,214,.09),transparent 58%),
    #07080D;
  background-attachment: fixed;
  background-repeat: no-repeat;
}
[data-md-color-scheme="slate"] .md-main__inner{background:transparent;}

/* ============================================================
   HEADER + TABS — dark in BOTH schemes (brand identity)
   ============================================================ */
.md-header{
  background:rgba(7,8,13,.86);color:#F3F5FA;
  backdrop-filter:saturate(160%) blur(14px);
  -webkit-backdrop-filter:saturate(160%) blur(14px);
  border-bottom:1px solid rgba(255,255,255,.09);box-shadow:none;
}
.md-header::after{                                   /* gradient hairline */
  content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;
  background:var(--rl-grad);opacity:.9;
}
.md-tabs{
  background:rgba(7,8,13,.6);color:#F3F5FA;
  border-bottom:1px solid rgba(255,255,255,.07);
}
/* Brand-Block im Header: ● RACE LINK Documentation

   Important: Material gives .md-header__title its vertical centering
   via `line-height: 2.4rem`. We MUST leave that alone — no
   `display: inline-flex` or `line-height: 1` on the brand, otherwise
   the line-box collapses and everything floats to the top of the
   header. We just style four inline spans; the inherited line-height
   keeps them vertically centred. */
.md-header__title .rl-brand{
  font-family:"Chakra Petch",sans-serif;
  font-weight:700;
  font-size:21px;
  letter-spacing:.06em;
  /* Material's .md-ellipsis class sets overflow:hidden for ellipsis
     truncation. Our brand text is fixed-length, so override that —
     otherwise the dot's box-shadow glow gets clipped on the left. */
  overflow:visible;
}
.md-header__title .rl-brand__dot{
  display:inline-block;
  vertical-align:middle;
  width:9px;height:9px;border-radius:50%;
  background:var(--rl-grad);
  box-shadow:0 0 14px var(--rl-pink);
  margin-right:9px;
  /* nudge up so the dot's optical centre sits at the text x-height */
  position:relative;top:-2px;
}
.md-header__title .rl-brand__race{
  color:#F3F5FA;
}
.md-header__title .rl-brand__link{
  /* match the website's display:flex + gap:9px between RACE and LINK */
  margin-left:9px;
  background:var(--rl-grad);
  -webkit-background-clip:text;background-clip:text;
  color:transparent;
}
.md-header__title .rl-brand__sub{
  margin-left:12px;
  font-family:"Chakra Petch",sans-serif;
  font-size:14px;font-weight:500;letter-spacing:.04em;
  color:rgba(243,245,250,.55);
}
/* On narrow viewports drop the tagline so the brand block keeps
   space for the search / hamburger / palette buttons. */
@media (max-width:720px){
  .md-header__title .rl-brand__sub{display:none;}
}
.md-header__button,.md-tabs__link{color:#F3F5FA;}
.md-tabs__link{opacity:.72;font-size:.74rem;}
.md-tabs__link:hover,.md-tabs__link--active{opacity:1;}
.md-tabs__link--active{position:relative;}
.md-tabs__link--active::after{
  content:"";position:absolute;left:0;right:0;bottom:-2px;height:2px;
  border-radius:2px;background:var(--rl-grad);
}

/* header search — dark in both modes (header is dark) */
.md-search__form{
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.12);border-radius:10px;
}
.md-search__form:hover{background:rgba(255,255,255,.12);}
.md-search__input{color:#F3F5FA;}
.md-search__input::placeholder{color:rgba(243,245,250,.55);}
.md-search__icon{color:rgba(243,245,250,.7);}
[data-md-color-scheme="default"] .md-search__output,
[data-md-color-scheme="default"] .md-search__scrollwrap{color:var(--md-default-fg-color);}

/* ============================================================
   CONTENT POLISH (uses scheme variables -> auto-adapts)
   ============================================================ */

.md-typeset a{
  text-decoration:none;border-bottom:1px solid var(--rl-link-soft);
  transition:color .15s ease,border-color .15s ease;
}
.md-typeset a:hover{color:var(--md-accent-fg-color);border-bottom-color:var(--md-accent-fg-color);}

.md-typeset h1{padding-bottom:.3em;border-bottom:2px solid transparent;border-image:var(--rl-grad) 1;}
.md-typeset h2{margin-top:2.4em;}

/* code */
.md-typeset code{border-radius:6px;}
.md-typeset pre>code{border-radius:12px;border:1px solid var(--rl-border);}
.md-typeset .highlight{border-radius:12px;}
.md-clipboard:hover{color:var(--rl-link);}

/* blockquotes / admonitions / details */
.md-typeset blockquote{
  border-left:3px solid;border-image:var(--rl-grad) 1;
  background:rgba(31,230,214,.06);border-radius:0 10px 10px 0;
}
.md-typeset .admonition,.md-typeset details{
  border-radius:12px;border-width:1px;
  border-left:3px solid var(--md-accent-fg-color);
}
.md-typeset .admonition-title,.md-typeset summary{
  font-family:"Chakra Petch",sans-serif;font-weight:600;
}
.md-typeset .admonition.note,.md-typeset .admonition.info,
.md-typeset .admonition.tip,.md-typeset .admonition.abstract,
.md-typeset details.note,.md-typeset details.tip,.md-typeset details.info{
  border-left-color:var(--rl-cyan);
}
.md-typeset .note>.admonition-title,.md-typeset .info>.admonition-title,
.md-typeset .tip>.admonition-title,.md-typeset .abstract>.admonition-title,
.md-typeset .note>summary,.md-typeset .tip>summary,.md-typeset .info>summary{
  background:rgba(31,230,214,.14);
}
.md-typeset .admonition.warning,.md-typeset .admonition.caution,
.md-typeset .admonition.danger,.md-typeset details.warning{
  border-left-color:var(--rl-amber);
}
.md-typeset .warning>.admonition-title,.md-typeset .caution>.admonition-title,
.md-typeset .danger>.admonition-title,.md-typeset .warning>summary{
  background:rgba(255,178,62,.16);
}

/* tables */
.md-typeset table:not([class]){
  border:1px solid var(--rl-border);border-radius:12px;overflow:hidden;
}
.md-typeset table:not([class]) th{
  font-family:"Chakra Petch",sans-serif;font-weight:600;background:var(--rl-surface);
}

/* horizontal rule */
.md-typeset hr{
  border:none;height:1px;
  background:linear-gradient(90deg,transparent,var(--rl-border) 20%,var(--rl-border) 80%,transparent);
}

/* nav + TOC active states */
.md-nav__link--active,.md-nav__link:focus,.md-nav__link:hover{color:var(--rl-link);}
.md-nav__item .md-nav__link--active{
  font-weight:600;border-left:2px solid;border-image:var(--rl-grad) 1;padding-left:.6rem;
}
.md-nav__title{color:var(--md-default-fg-color--light);letter-spacing:.06em;}
.md-nav--secondary .md-nav__link--active{color:var(--rl-link);font-weight:600;}

/* ============================================================
   Primary palette override + mobile drawer (≤76.1875em)

   Material uses --md-primary-fg-color for several pieces — most
   notably the title bar of the mobile navigation drawer. With the
   default "deep orange" preset removed from mkdocs.yml we must
   define brand-dark values explicitly here, otherwise Material's
   own fallback (indigo) would show.
   ============================================================ */
:root,
[data-md-color-scheme="default"],
[data-md-color-scheme="slate"]{
  --md-primary-fg-color:#07080D;
  --md-primary-fg-color--light:#12141F;
  --md-primary-fg-color--dark:#05060A;
  --md-primary-bg-color:#F3F5FA;
  --md-primary-bg-color--light:rgba(243,245,250,.72);
}

/* Mobile drawer (closed on desktop, slid-in on mobile) */
@media screen and (max-width:76.1875em){
  /* The drawer body itself */
  .md-sidebar--primary{
    background-color:var(--md-default-bg-color);
    color:var(--md-default-fg-color);
  }
  /* Drawer header bar — was the orange strip */
  .md-nav--primary > .md-nav__title{
    background:rgba(7,8,13,.96);
    color:#F3F5FA;
    box-shadow:none;
    border-bottom:1px solid rgba(255,255,255,.09);
    position:relative;
  }
  .md-nav--primary > .md-nav__title::after{
    /* same gradient hairline as the desktop header */
    content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;
    background:var(--rl-grad);opacity:.9;
  }
  /* The "back" arrow icon when navigating into a section */
  .md-nav--primary .md-nav__button.md-logo,
  .md-nav--primary > .md-nav__title .md-nav__icon{
    color:#F3F5FA;
  }
  /* Section titles when the drawer is open (collapsed sub-navs) */
  .md-nav--primary .md-nav__title[for]{
    color:var(--md-default-fg-color);
    background:var(--md-default-bg-color);
  }
  /* Drawer link rows */
  .md-nav--primary .md-nav__item .md-nav__link{
    color:var(--md-default-fg-color);
  }
  .md-nav--primary .md-nav__item .md-nav__link:hover,
  .md-nav--primary .md-nav__item .md-nav__link--active{
    color:var(--rl-link);
  }
}

/* content tabs (pymdownx.tabbed, alternate_style) */
.md-typeset .tabbed-labels>label:hover{color:var(--rl-link);}
.md-typeset .tabbed-labels>input:checked+label{color:var(--md-accent-fg-color);}

/* mermaid diagrams — sit in a branded card; Material auto-themes the
   diagram itself per colour scheme */
.md-typeset .mermaid{
  background:var(--rl-surface);border:1px solid var(--rl-border);
  border-radius:12px;padding:14px;
}

/* search highlight / mark */
.md-search-result__teaser mark,.md-typeset mark{
  background:rgba(31,230,214,.30);color:inherit;border-radius:3px;
}

/* md-button (attr_list + md_in_html already enabled in this repo) */
.md-typeset .md-button{
  border-radius:10px;font-family:"Chakra Petch",sans-serif;font-weight:600;
  border:1px solid var(--rl-border);transition:transform .15s ease;
}
.md-typeset .md-button:hover{transform:translateY(-2px);}
.md-typeset .md-button--primary{background:var(--rl-grad);color:#07080D;border:none;}
.md-typeset .md-button--primary:hover{color:#07080D;}

/* footer */
.md-footer{border-top:1px solid rgba(255,255,255,.08);}
.md-footer-meta{background:var(--md-footer-bg-color--dark);}
.md-footer__title{font-family:"Chakra Petch",sans-serif;}
.md-footer__link:hover{opacity:1;}

/* misc */
::selection{background:rgba(255,46,110,.45);color:#fff;}
.md-header [data-md-component="palette"] .md-icon:hover{color:var(--rl-cyan);}
[data-md-color-scheme="slate"] ::-webkit-scrollbar{width:11px;height:11px;}
[data-md-color-scheme="slate"] ::-webkit-scrollbar-track{background:#07080d;}
[data-md-color-scheme="slate"] ::-webkit-scrollbar-thumb{
  background:#262a38;border-radius:6px;border:2px solid #07080d;
}
[data-md-color-scheme="slate"] ::-webkit-scrollbar-thumb:hover{background:#33384a;}

@media (prefers-reduced-motion:reduce){
  .md-typeset a,.md-typeset .md-button{transition:none;}
}