/* ============================================================
   PVS Forge — Documentation theme
   Brand continuity with https://pvs-forge.com
   See DESIGN-SPEC.md before changing anything in this file.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,600;0,700;0,800;1,700&display=swap');

/* ---------- Brand tokens (single source of truth) ---------- */
:root {
  --pvs-navy-900:#161c28;
  --pvs-navy-800:#1b2230;   /* header / hero base */
  --pvs-navy-700:#232c3d;
  --pvs-orange:#F5A623;     /* accent — matches pvs-forge-schriftzug.svg */
  --pvs-orange-bright:#ffb845;
  --pvs-offwhite:#F2F2F8;

  --pvs-serif:'Playfair Display', Georgia, 'Times New Roman', serif;
}

/* ---------- Map brand onto Material variables ---------- */
/* Header = navy in BOTH light and dark, with an orange underline. */
[data-md-color-scheme="default"],
[data-md-color-scheme="slate"] {
  --md-primary-fg-color:        var(--pvs-navy-800);
  --md-primary-fg-color--light: var(--pvs-navy-700);
  --md-primary-fg-color--dark:  var(--pvs-navy-900);
  --md-primary-bg-color:        var(--pvs-offwhite);
  --md-primary-bg-color--light: #c4ccd8;

  --md-accent-fg-color:         var(--pvs-orange);
  --md-accent-fg-color--transparent: rgba(245,166,35,.12);
}

/* Light mode link/accent text needs a darker orange for contrast on white. */
[data-md-color-scheme="default"] {
  --md-typeset-a-color: #c07d10;
}
[data-md-color-scheme="slate"] {
  --md-typeset-a-color: var(--pvs-orange);
  --md-default-bg-color: #141a24;
  --md-default-bg-color--light: #1a212d;
}

/* ---------- Header ---------- */
.md-header {
  border-bottom: 3px solid var(--pvs-orange);
}
.md-header__title { font-weight: 600; }

/* Larger brand logo in the header */
.md-header__button.md-logo { padding: .1rem .2rem; }
.md-header__button.md-logo img,
.md-header__button.md-logo svg {
  height: 1.85rem;
  width: auto;
}

/* Brand text beside the PF emblem logo: the emblem carries no lettering, so
   the title topic shows the full localized brand ("PVS Forge – Documentation";
   site_name stays full for <title>/SEO). Only the site-name topic (first) is
   replaced; the scrolled page-title topic
   ([data-md-component="header-topic"]) is left untouched. */
.md-header__ellipsis .md-header__topic:first-child .md-ellipsis {
  font-size: 0;
}
.md-header__ellipsis .md-header__topic:first-child .md-ellipsis::after {
  content: "PVS Forge – Documentation";
  font-size: .8rem;
  font-weight: 600;
  letter-spacing: .01em;
}
[lang="de"] .md-header__ellipsis .md-header__topic:first-child .md-ellipsis::after {
  content: "PVS Forge – Dokumentation";
}

/* ---------- Segmented EN|DE and Light|Dark pills (header-controls.js) ---------- */
/* Hide Material's default palette icon + language dropdown; we replace them. */
.md-header [data-md-component="palette"] > label { display: none; }
.md-header .md-select { display: none; }

.pvs-controls {
  display: flex;
  align-items: center;
  gap: .7rem;
  margin: 0 .3rem 0 .15rem;
}
.pvs-seg {
  display: inline-flex;
  border: 1px solid rgba(255,255,255,.13);
  border-radius: 7px;
  overflow: hidden;
}
.pvs-seg__btn {
  appearance: none;
  background: transparent;
  border: 0;
  color: #aab3c2;
  font: 500 .66rem/1 var(--md-text-font, Inter), sans-serif;
  letter-spacing: .03em;
  padding: .3rem .52rem;
  cursor: pointer;
  text-decoration: none;
  transition: background .12s ease, color .12s ease;
}
.pvs-seg__btn:hover { color: #fff; }
.pvs-seg__btn.is-active {
  background: var(--pvs-orange);
  color: #1a1205;
}
.pvs-seg__btn.is-active:hover { color: #1a1205; }

/* Theme switch: "Theme" label + Light|Dark inside a subtle rounded box */
.pvs-theme {
  display: inline-flex;
  align-items: center;
  gap: .42rem;
}
.pvs-theme__label {
  color: #828b9a;
  font: 500 .66rem/1 var(--md-text-font, Inter), sans-serif;
  letter-spacing: .02em;
}
.pvs-seg--box {
  background: rgba(0,0,0,.22);
  border-color: rgba(255,255,255,.08);
  border-radius: 8px;
  padding: 2px;
  gap: 2px;
  overflow: visible;
}
.pvs-seg--box .pvs-seg__btn {
  border-radius: 6px;
  padding: .3rem .56rem;
}

@media screen and (max-width: 44.9em) {
  .pvs-controls { gap: .4rem; }
  .pvs-seg__btn { padding: .28rem .44rem; }
  .pvs-theme__label { display: none; }
}

/* ---------- Top-level tabs (navigation.tabs) ---------- */
.md-tabs {
  background: var(--pvs-navy-900);
}
.md-tabs__link { opacity: .85; font-weight: 500; }
.md-tabs__link--active,
.md-tabs__link:hover { opacity: 1; }
.md-tabs__item--active .md-tabs__link {
  border-bottom: 2px solid var(--pvs-orange);
}

/* ---------- Typography: serif display headings ---------- */
.md-typeset h1,
.md-typeset h2,
.md-typeset h3,
.md-typeset h4 {
  font-family: var(--pvs-serif);
  font-weight: 700;
  letter-spacing: -.01em;
}
.md-typeset h1 { font-weight: 800; }
.md-typeset h2 {
  margin-top: 2.2em;
  padding-top: .4em;
  border-top: 1px solid var(--md-default-fg-color--lightest);
}

/* ---------- Active sidebar item gets an orange marker ---------- */
.md-nav__link--active,
.md-nav__item .md-nav__link--active {
  color: var(--md-typeset-a-color);
  font-weight: 600;
}

/* ---------- Feature cards (grid cards) ---------- */
.md-typeset .grid.cards > ul > li,
.md-typeset .grid > .card {
  border: 1px solid var(--md-default-fg-color--lightest);
  border-radius: 13px;
  padding: 1.1rem 1.2rem;
  box-shadow: 0 1px 3px rgba(20,28,40,.05), 0 6px 22px rgba(20,28,40,.05);
  transition: transform .15s ease, border-color .15s ease;
}
.md-typeset .grid.cards > ul > li:hover,
.md-typeset .grid > .card:hover {
  transform: translateY(-3px);
  border-color: var(--pvs-orange);
}
.md-typeset .grid.cards > ul > li > hr { display: none; }
/* Card icon accent */
.md-typeset .grid.cards .twemoji,
.md-typeset .grid.cards svg {
  color: var(--pvs-orange);
}

/* ---------- Buttons (.md-button) in brand ---------- */
.md-typeset .md-button {
  border-radius: 9px;
  font-weight: 600;
}
.md-typeset .md-button--primary {
  background: var(--pvs-orange);
  border-color: var(--pvs-orange);
  color: #1a1205;
}
.md-typeset .md-button--primary:hover {
  background: var(--pvs-orange-bright);
  border-color: var(--pvs-orange-bright);
  color: #1a1205;
}

/* ---------- Admonitions: note (blue) + tip/warning (orange) ---------- */
.md-typeset .admonition,
.md-typeset details {
  border-radius: 9px;
  border-left-width: 4px;
}
.md-typeset .admonition.tip,
.md-typeset .admonition.hint,
.md-typeset details.tip {
  border-color: var(--pvs-orange);
}
.md-typeset .tip > .admonition-title,
.md-typeset .hint > .admonition-title {
  background: rgba(245,166,35,.12);
}
.md-typeset .tip > .admonition-title::before,
.md-typeset .hint > .admonition-title::before {
  background-color: var(--pvs-orange);
}

/* ---------- Code blocks ---------- */
.md-typeset pre > code { border-radius: 0 0 8px 8px; }
.md-typeset .highlight > .filename,
.md-typeset code { font-feature-settings: "liga" 0; }

/* ---------- HERO (home page) — class used in index.md ---------- */
.pvs-hero {
  margin: -1rem -1.2rem 2rem;
  padding: 3.4rem 2.6rem 3rem;
  border-radius: 0;
  color: var(--pvs-offwhite);
  background:
    radial-gradient(1100px 380px at 80% -40%, rgba(245,166,35,.16), transparent 60%),
    linear-gradient(160deg, var(--pvs-navy-800), var(--pvs-navy-900));
  position: relative;
  overflow: hidden;
}
.pvs-hero .pvs-kicker {
  display: inline-block;
  font-size: .72rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--pvs-orange);
  font-weight: 700;
  border: 1px solid rgba(245,166,35,.4);
  padding: .25rem .8rem;
  border-radius: 30px;
  margin-bottom: 1rem;
}
.md-typeset .pvs-hero h1 {
  color: #fff;
  font-size: 2.6rem;
  line-height: 1.15;
  margin: 0 0 .5rem;
  border: 0;
}
.md-typeset .pvs-hero h1 em { color: var(--pvs-orange); font-style: italic; }
.pvs-hero p {
  color: #c2cad6;
  font-size: 1.08rem;
  max-width: 60ch;
  margin: 0 0 1.4rem;
}
.pvs-hero .md-button {
  margin-right: .6rem;
  margin-top: .3rem;
}
/* Ghost button inside the dark hero */
.pvs-hero .md-button:not(.md-button--primary) {
  color: #e7ebf1;
  border-color: rgba(255,255,255,.28);
}
.pvs-hero .md-button:not(.md-button--primary):hover {
  background: rgba(255,255,255,.10);
  border-color: rgba(255,255,255,.4);
}

@media screen and (max-width: 44.9em) {
  .pvs-hero { padding: 2.2rem 1.2rem 2rem; }
  .md-typeset .pvs-hero h1 { font-size: 2rem; }
}