/* ============================================================
   The Pitlane Post — style.css

   Table of Contents
   ─────────────────
   1.  Imports
   2.  Custom Properties
       2a. Structural Constants
       2b. Default Theme Tokens (dark)
       2c. System Light Mode Fallback
   3.  Theme Overrides
       3a. Color Mode (Light / Dark)
       3b. Logo Inversion
       3c. Visual Themes
   4.  Base & Reset
   5.  Typography
   6.  Layout
   7.  Navigation
       7a. Desktop Nav & Brand
       7b. Dropdown
       7c. Mobile Menu
       7d. Theme Toggle Button
   8.  Components
       8a. Banner
       8b. News Ticker
       8c. Article Cards
       8d. Reading Settings Panel
       8e. Search
       8f. Tags List
       8g. Footnotes
       8h. F1 Driver Names & Cards
   9.  Utilities
   10. Responsive Overrides
   11. Reduced Motion

   ─────────────────
   Token renames from previous version:
     --bg            → --color-bg
     --content-color → --color-text
     --black         → removed (was unused)
     --white         → removed (was unused)

   Attribute renames (also reflected in script.js and head.liquid):
     data-theme="light|dark"  → data-color-mode="light|dark"
     data-theme (new purpose) → visual theme name (e.g. "default", "retro")
   ============================================================ */


/* ── 1. Imports ─────────────────────────────────────────────── */

/* Material Icons — used by the banner close button */
@import url("https://fonts.googleapis.com/icon?family=Material+Icons");

/* Visual themes */
@import "themes/material/light.css";
@import "themes/material/dark.css";
@import "themes/frutigeraero/light.css";
@import "themes/frutigeraero/dark.css";

/* ── 2. Custom Properties ───────────────────────────────────── */

/* 2a. Structural Constants — never change between themes */
:root {
  /* Typography */
  --font-body: "mozilla-text", sans-serif;
  --font-ui:   "aileron", sans-serif;

  /* Shape */
  --border-width:  2px;
  --border-radius: 2px;

  /* Motion */
  --duration-base: 0.25s;
  --duration-slow: 0.3s;
  --ease-base:     ease;
  --transition-base: var(--duration-base) var(--ease-base);
  --transition-slow: var(--duration-slow) var(--ease-base);
}

/* 2b. Default Theme Tokens — dark by default */
:root {
  --color-bg:          #000000;
  --color-text:        #ffffff;
  --color-border:      #ffffff;
  --color-surface:     #000000;
  --color-accent:      #ffffff;
  --color-accent-text: #000000;
  --color-cover-backdrop: #14161c;

  /* Pagefind inherits from our tokens */
  --pagefind-ui-primary:             var(--color-text);
  --pagefind-ui-text:                var(--color-text);
  --pagefind-ui-background:          var(--color-bg);
  --pagefind-ui-border:              var(--color-border);
  --pagefind-ui-tag:                 var(--color-bg);
  --pagefind-ui-border-width:        var(--border-width);
  --pagefind-ui-border-radius:       var(--border-radius);
  --pagefind-ui-image-border-radius: var(--border-radius);
  --pagefind-ui-font:                var(--font-ui);

  color-scheme: dark;
}

/* 2c. System Light Mode Fallback — for no-JS or no stored preference */
@media (prefers-color-scheme: light) {
  :root {
    --color-bg:          #ffffff;
    --color-text:        #000000;
    --color-border:      #000000;
    --color-surface:     #ffffff;
    --color-accent:      #000000;
    --color-accent-text: #ffffff;
    color-scheme: light;
  }
}


/* ── 3. Theme Overrides ─────────────────────────────────────── */

/* 3a. Color Mode — explicit JS-set attribute always wins over the media query */
html[data-color-mode="dark"] {
  --color-bg:          #000000;
  --color-text:        #ffffff;
  --color-border:      #ffffff;
  --color-surface:     #000000;
  --color-accent:      #ffffff;
  --color-accent-text: #000000;
  color-scheme: dark;
}

html[data-color-mode="light"] {
  --color-bg:          #ffffff;
  --color-text:        #000000;
  --color-border:      #000000;
  --color-surface:     #ffffff;
  --color-accent:      #000000;
  --color-accent-text: #ffffff;
  color-scheme: light;
}

/* 3b. Logo Inversion
   The site logos are white SVGs on transparent backgrounds.
   Invert them in light mode so they read as black. */
html[data-color-mode="light"] .logo,
html[data-color-mode="light"] .navlogo,
html[data-color-mode="light"] .biglogo,
html[data-color-mode="light"] .headerlogo {
  filter: invert(100%);
}

/* 3c. Visual Themes */
/* ---> relocated to top of file */

/* ── 4. Base & Reset ────────────────────────────────────────── */

html {
  background-color: var(--color-bg);
  color:            var(--color-text);
  font-size:        1rem;
  height:           100%;
  width:            100%;
  overflow-y:       scroll;
  overflow-x:       hidden;
  scroll-behavior:  smooth;
  transition: background-color var(--transition-base), color var(--transition-base);
}

body {
  display:         flex;
  flex-direction:  column;
  align-items:     stretch;
  justify-content: flex-start;
  min-height:      100vh;
  width:           100%;
  margin:          0;
  padding:         2%;
  box-sizing:      border-box;
  font-family:     var(--font-body);
  font-style:      normal;
  transition: background-color var(--transition-base), color var(--transition-base);
}

/* Shared transitions for interactive elements */
a,
button,
hr,
img,
svg,
input,
select,
.nav-item,
.nav-dropdown__link,
.nav-dropdown__menu,
.nav-dropdown__chevron,
.box,
.boxed,
ul.tagslist li {
  transition-property:        background-color, border-color, color, filter, fill, stroke;
  transition-duration:        var(--duration-base);
  transition-timing-function: var(--ease-base);
}


/* ── 5. Typography ──────────────────────────────────────────── */

p {
  font-family: var(--font-ui);
  font-weight: 400;
  font-style:  normal;
}

a {
  color:           var(--color-text);
  text-decoration: underline;
}

blockquote {
  margin-left:  4%;
  border-left:  4px solid var(--color-border);
  padding-left: 1.5%;
}

/* Article text — controlled via data-article-* attributes set by reading settings */
main p,
main li {
  font-size:   var(--article-text-size, 1rem);
  line-height: var(--article-line-height, normal);
}

main p {
  margin-block: var(--article-paragraph-gap, 1em);
}

html[data-article-text-size="large"] { --article-text-size: 1.125rem; }
html[data-article-text-size="extra"] { --article-text-size: 1.25rem;  }

html[data-article-line-spacing="relaxed"] {
  --article-line-height:    1.65;
  --article-paragraph-gap: 1.15em;
}

html[data-article-line-spacing="loose"] {
  --article-line-height:    1.9;
  --article-paragraph-gap: 1.3em;
}


/* ── 6. Layout ──────────────────────────────────────────────── */

.border-wrapper {
  border:          var(--border-width) solid var(--color-border);
  padding:         2%;
  flex:            1 1 auto;
  width:           100%;
  display:         flex;
  flex-direction:  column;
  align-items:     center;
  justify-content: center;
  box-sizing:      border-box;
  transition:      border-color var(--transition-base);
}

main,
.main {
  flex:  1 1 auto;
  width: 85%;
}

html[data-article-width="wide"] main,
html[data-article-width="wide"] .main {
  width: 94%;
}

hr {
  width:            98%;
  height:           var(--border-width);
  background-color: var(--color-border);
  border:           none;
}

.nav-hr     { height: 4px; }
.section-hr { margin: auto auto auto 2px; height: 6px; }
.red-hr     { background-color: red; }

picture {
  display:        flex;
  flex-direction: column;
  margin:         1% auto;
}

.biglogo {
  width:  500px;
  height: auto;
  margin: 3% auto;
}

.titlelogo  { width: 600px !important; }
.headerlogo { width: 200px; height: auto; }

.page-logo-box {
  display:         flex;
  flex-direction:  row;
  justify-content: center;
  align-items:     center;
  margin-bottom:   2%;
  margin-top:      1%;
  scale:           1.8;
  padding:         1%;
}

.page-logo-box h1 {
  margin:      auto 4% auto auto;
  white-space: nowrap;
}

.page-logo-box picture {
  padding-left:  4%;
  margin-bottom: -1.5%;
  border-left:   var(--border-width) solid var(--color-border);
}

footer,
.footer {
  font-size:       0.7rem;
  margin-top:      auto;
  margin-bottom:   -1.5%;
  display:         flex;
  flex-direction:  row;
  justify-content: center;
  align-items:     center;
  gap:             8px;
}

.horizontal-boxes {
  display:         flex;
  flex-wrap:       wrap;
  gap:             16px;
  width:           100%;
  padding:         1%;
  align-items:     flex-start;
  justify-content: center;
}

.visually-hidden {
  position:   absolute;
  width:       1px;
  height:      1px;
  padding:     0;
  margin:      -1px;
  overflow:    hidden;
  clip:        rect(0, 0, 0, 0);
  white-space: nowrap;
  border:      0;
}


/* ── 7. Navigation ──────────────────────────────────────────── */

/* 7a. Desktop Nav & Brand */
nav {
  width:           100%;
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  max-width:       98%;
  position:        relative;
}

.nav-brand {
  display:         inline-flex;
  align-items:     center;
  flex:            0 0 auto;
  text-decoration: none;
}

.nav-brand picture {
  width:  auto;
  margin: 1% auto;
}

.navlogo {
  height:        42px;
  margin-top:    -1%;
  margin-bottom: 5%;
  transition:    transform var(--transition-slow);
}

.nav-right {
  display:     flex;
  align-items: center;
  gap:         7px;
}

.nav-item {
  padding-left:    7px;
  padding-right:   8px;
  border-right:    var(--border-width) solid var(--color-border);
  text-decoration: none;
  color:           var(--color-text);
}

.nav-item:hover {
  text-decoration: underline;
}

/* 7b. Dropdown */
.nav-dropdown,
.nav-dropdown-mobile {
  position:    relative;
  display:     inline-flex;
  align-items: center;
}

.nav-dropdown__toggle {
  appearance:  none;
  background:  transparent;
  border:      0;
  color:       inherit;
  cursor:      pointer;
  display:     inline-flex;
  align-items: center;
  gap:         6px;
  font:        inherit;
}

.nav-dropdown__toggle.nav-item {
  border-right: none;
}

.nav-dropdown__chevron {
  width:         6px;
  height:        6px;
  display:       inline-block;
  border-right:  var(--border-width) solid var(--color-border);
  border-bottom: var(--border-width) solid var(--color-border);
  transform:     rotate(45deg);
  margin-top:    -2px;
}

.nav-dropdown__menu {
  position:       absolute;
  top:            100%;
  left:           0;
  min-width:      160px;
  background:     var(--color-bg);
  border:         var(--border-width) solid var(--color-border);
  padding:        6px 0;
  display:        none;
  flex-direction: column;
  gap:            2px;
  z-index:        10;
}

.nav-dropdown:hover        .nav-dropdown__menu,
.nav-dropdown:focus-within .nav-dropdown__menu,
.nav-dropdown-mobile:hover        .nav-dropdown__menu,
.nav-dropdown-mobile:focus-within .nav-dropdown__menu {
  display: flex;
}

.nav-dropdown__link {
  padding:         6px 12px;
  text-decoration: none;
  color:           var(--color-text);
  white-space:     nowrap;
}

.nav-dropdown__link:hover,
.nav-dropdown__link:focus-visible {
  text-decoration: underline;
}

/* 7c. Mobile Menu */
.nav-menu-button {
  appearance:      none;
  height:          30px;
  padding:         0 8px;
  border:          var(--border-width) solid var(--color-border);
  border-radius:   var(--border-radius);
  background:      var(--color-bg);
  color:           var(--color-text);
  cursor:          pointer;
  display:         inline-flex;
  align-items:     center;
  justify-content: center;
  gap:             8px;
  font:            inherit;
  line-height:     1;
  text-transform:  uppercase;
  transition:
    background-color var(--transition-base),
    color            var(--transition-base),
    border-color     var(--transition-base),
    transform        0.18s var(--ease-base);
}

.nav-menu-button:hover,
.nav-menu-button:focus-visible,
.nav-menu-button[aria-expanded="true"] {
  background: var(--color-text);
  color:      var(--color-bg);
}

.nav-menu-button:active { transform: translateY(1px); }

.nav-menu-button:focus-visible {
  outline:        2px solid var(--color-border);
  outline-offset: 2px;
}

.nav-menu-button__label {
  font-size:      0.78rem;
  font-weight:    bold;
  letter-spacing: 0;
}

.nav-menu-button__icon {
  width:           13px;
  height:          11px;
  display:         inline-flex;
  flex-direction:  column;
  justify-content: space-between;
}

.nav-menu-button__icon span {
  width:      100%;
  height:     2px;
  background: currentColor;
}

.mobile-menu {
  display: none;
}

.mobile-menu__link {
  color:           var(--color-text);
  text-decoration: none;
}

/* 7d. Theme Toggle Button */
.theme-toggle {
  position:        relative;
  width:           30px;
  height:          30px;
  display:         flex;
  align-items:     center;
  justify-content: center;
}

.theme-toggle__button {
  appearance:    none;
  border:        var(--border-width) solid var(--color-border);
  background:    var(--color-bg);
  color:         var(--color-text);
  width:         30px;
  height:        30px;
  padding:       0;
  display:       grid;
  place-items:   center;
  border-radius: var(--border-radius);
  cursor:        pointer;
  transition:
    background-color var(--transition-base),
    color            var(--transition-base),
    border-color     var(--transition-base),
    transform        0.18s var(--ease-base);
}

.theme-toggle__button:hover,
.theme-toggle__button:focus-visible {
  background: var(--color-text);
  color:      var(--color-bg);
}

.theme-toggle__button:active { transform: translateY(1px); }

.theme-toggle__button:focus-visible {
  outline:        2px solid var(--color-border);
  outline-offset: 2px;
}

.theme-toggle__icon {
  font-size:   16px;
  line-height: 1;
  display:     block;
  user-select: none;
}

/* Show the moon in light mode (click → go dark), sun in dark mode (click → go light) */
html[data-color-mode="light"] .theme-toggle__icon--sun  { display: none; }
html[data-color-mode="dark"]  .theme-toggle__icon--moon { display: none; }

/* Fallback for when no data-color-mode is set yet (pre-JS) */
@media (prefers-color-scheme: light) {
  html:not([data-color-mode]) .theme-toggle__icon--sun  { display: none; }
}
@media (prefers-color-scheme: dark) {
  html:not([data-color-mode]) .theme-toggle__icon--moon { display: none; }
}


/* ── 8. Components ──────────────────────────────────────────── */

/* 8a. Banner
   (absorbed from banner.css — Material Icons import is at the top of this file) */
.banner {
  background-color: var(--color-text);
  color:            var(--color-bg);
  width:            104%;
  margin-bottom:    10px;
  margin-left:      -2%;
  margin-top:       -2%;
  min-height:       20%;
  text-align:       center;
  padding:          1% 0;
  position:         relative;
}

.banner-message {
  display:   inline-block;
  max-width: calc(100% - 4rem);
}

.banner-close {
  font-family:    "Material Icons";
  font-weight:    normal;
  font-style:     normal;
  font-size:      24px;
  line-height:    1;
  letter-spacing: normal;
  text-transform: none;
  display:        inline-flex;
  white-space:    nowrap;
  direction:      ltr;
  position:       absolute;
  right:          1%;
  top:            50%;
  transform:      translateY(-50%);
  border:         0;
  background:     transparent;
  color:          inherit;
  cursor:         pointer;
  padding:        0;
}

.noshow {
  visibility: hidden !important;
  padding:    0 !important;
  margin:     0 !important;
  height:     0 !important;
}

/* 8b. News Ticker */
.news-container {
  width:         98%;
  overflow:      hidden;
  background:    var(--color-bg);
  padding:       10px 0;
  position:      relative;
  border-radius: 5px;
}

.news-title {
  position:       absolute;
  left:           10px;
  top:            50%;
  transform:      translateY(-50%);
  font-size:      16px;
  font-weight:    bold;
  color:          var(--color-bg);
  background:     var(--color-text);
  padding:        5px 10px;
  border-radius:  3px;
}

.news-ticker-wrapper {
  display:  flex;
  overflow: hidden;
  width:    100%;
}

.news-ticker {
  display:    flex;
  white-space: nowrap;
  animation:  scroll linear infinite;
}

.news-ticker span {
  padding:      0 20px;
  color:        var(--color-text);
  font-size:    16px;
  border-right: 3px solid var(--color-border);
}

@keyframes scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* 8c. Article Cards */
.article-box {
  display:        flex;
  flex-direction: column;
  align-content:  center;
  text-align:     center;
  gap:            0.75rem;
  flex:           0 0 calc(25% - 20px);
  box-sizing:     border-box;
}

.article-box p   { margin: 0; }
.article-box > a { display: block; width: 100%; }

.article-box:hover .thumb-img { transform: scale(1.05); }

.box {
  width:           100%;
  aspect-ratio:    16 / 9;
  overflow:        hidden;
  background:      var(--color-surface);
  display:         flex;
  align-items:     center;
  justify-content: center;
  border:          var(--border-width) solid var(--color-border);
}

/* Force a dark backing behind transparent covers in light color-mode
   so the baked-in white text/logo stays legible. Only applies while
   the transparent image is actually loaded — fallback covers already
   carry their own background and are left alone. */
html[data-color-mode="light"] .box:has(.thumb-img--transparent) {
  background: var(--color-cover-backdrop);
}

.thumb-img {
  width:           100%;
  height:          100%;
  object-fit:      cover;
  object-position: center;
  transition:      transform var(--transition-slow);
}

.placeholder-box {
  width:           100%;
  height:          100%;
  display:         flex;
  align-items:     center;
  justify-content: center;
  padding:         1rem;
  box-sizing:      border-box;
}

/* 8d. Reading Settings Panel */
.reading-settings {
  margin:      0.5rem 0 1.5rem;
  max-width:   620px;
  font-family: var(--font-ui);
}

.reading-settings__summary {
  display:     inline-flex;
  align-items: center;
  cursor:      pointer;
  border:      1px solid var(--color-border);
  padding:     0.45rem 0.65rem;
  font-family: var(--font-ui);
  font-size:   0.9rem;
  font-weight: 700;
  list-style:  none;
}

.reading-settings__summary::-webkit-details-marker { display: none; }

.reading-settings__summary::after                   { content: "+"; margin-left: 0.65rem; }
.reading-settings[open] .reading-settings__summary::after { content: "-"; }

.reading-settings__summary:hover,
.reading-settings__summary:focus-visible {
  background-color: var(--color-text);
  color:            var(--color-bg);
  outline:          none;
}

.reading-settings__panel {
  display:      grid;
  gap:          0.75rem;
  margin-top:   0.75rem;
  border-left:  2px solid var(--color-border);
  padding-left: 0.85rem;
}

.reading-settings__row {
  display:               grid;
  grid-template-columns: minmax(110px, 0.45fr) 1fr;
  align-items:           center;
  gap:                   0.75rem;
}

.reading-settings__label {
  font-size:   0.82rem;
  font-weight: 700;
}

.reading-settings__control {
  display: inline-flex;
  width:   fit-content;
  border:  1px solid var(--color-border);
}

.reading-settings__button {
  border:     0;
  background: transparent;
  color:      var(--color-text);
  cursor:     pointer;
  font:       inherit;
  font-size:  0.82rem;
  padding:    0.35rem 0.55rem;
}

.reading-settings__button + .reading-settings__button {
  border-left: 1px solid var(--color-border);
}

.reading-settings__button:hover,
.reading-settings__button:focus-visible,
.reading-settings__button.is-active {
  background-color: var(--color-text);
  color:            var(--color-bg);
  outline:          none;
}

/* 8e. Search */
.search {
  width:      min(760px, 90%);
  word-wrap:  break-word;
  line-break: anywhere;
  overflow-x: hidden;
  border:     3px solid var(--color-border);
  box-sizing: border-box;
  padding:    12px;
  margin:     0 auto 2rem;
  background: var(--color-bg);
}

.search-form {
  display:     flex;
  align-items: stretch;
  gap:         8px;
}

.search-form__input {
  min-width:     0;
  flex:          1 1 auto;
  border:        var(--border-width) solid var(--color-border);
  border-radius: var(--border-radius);
  background:    var(--color-bg);
  color:         var(--color-text);
  padding:       9px 10px;
  font:          inherit;
}

.search-form__input:focus,
.search-tools select:focus,
.search-form__button:focus-visible,
.search-tools__clear:focus-visible,
.search-load-more:focus-visible {
  outline:        2px solid var(--color-border);
  outline-offset: 2px;
}

.search-form__button,
.search-tools__clear,
.search-load-more {
  appearance:    none;
  border:        var(--border-width) solid var(--color-border);
  border-radius: var(--border-radius);
  background:    var(--color-bg);
  color:         var(--color-text);
  cursor:        pointer;
  font:          inherit;
  font-weight:   bold;
  padding:       0 12px;
}

.search-form__button:hover,
.search-tools__clear:hover,
.search-load-more:hover {
  background: var(--color-text);
  color:      var(--color-bg);
}

.search-tools {
  display:               grid;
  grid-template-columns: repeat(5, minmax(0, 1fr)) auto;
  gap:                   8px;
  margin-top:            10px;
}

.search-tools__field {
  display:        flex;
  flex-direction: column;
  gap:            4px;
  min-width:      0;
  font-size:      0.75rem;
  font-weight:    bold;
  text-transform: uppercase;
}

.search-tools select {
  width:          100%;
  border:         var(--border-width) solid var(--color-border);
  border-radius:  var(--border-radius);
  background:     var(--color-bg);
  color:          var(--color-text);
  padding:        7px 8px;
  font:           inherit;
  text-transform: none;
}

.search-tools__clear {
  align-self: end;
  min-height: 36px;
}

.search-status {
  margin:    12px 0 0;
  font-size: 0.9rem;
}

.search-results {
  display:        flex;
  flex-direction: column;
  gap:            10px;
  margin-top:     12px;
}

.search-result {
  display:               grid;
  grid-template-columns: 130px minmax(0, 1fr);
  gap:                   12px;
  padding:               10px;
  border:                var(--border-width) solid var(--color-border);
  box-sizing:            border-box;
}

.search-result--no-image { grid-template-columns: 1fr; }

.search-result__image-link {
  display:      block;
  border:       var(--border-width) solid var(--color-border);
  overflow:     hidden;
  aspect-ratio: 16 / 9;
  background:   var(--color-bg);
}

.search-result__image {
  width:      100%;
  height:     100%;
  object-fit: cover;
  display:    block;
}

.search-result__body { min-width: 0; }

.search-result__meta {
  margin:         0 0 4px;
  font-size:      0.78rem;
  font-weight:    bold;
  text-transform: uppercase;
}

.search-result__title {
  margin:      0;
  font-size:   1.05rem;
  line-height: 1.25;
}

.search-result__title a { color: var(--color-text); }

.search-result__excerpt {
  margin:      6px 0 0;
  font-size:   0.92rem;
  line-height: 1.45;
}

.search-result mark {
  background: var(--color-text);
  color:      var(--color-bg);
  padding:    0 2px;
}

.search-load-more {
  width:      100%;
  min-height: 38px;
  margin-top: 12px;
}

/* Hidden metadata block used by Pagefind filters */
.pagefind-article-data { display: none; }

/* 8f. Tags List */
ul.tagslist {
  display:             flex;
  flex-direction:      row;
  gap:                 10px;
  list-style-position: inside;
  padding-left:        0;
}

ul.tagslist li {
  display:       inline;
  padding:       0 5px 5px 5px;
  border:        var(--border-width) solid var(--color-border);
  border-radius: var(--border-radius);
}

/* 8g. Footnotes */
.footnotes,
.footnotes-list,
.footnote-item,
.footnotes p,
.footnotes li p,
.footnote-item p,
.footnotes a,
.footnotes sup {
  font-family: inherit;
}

.footnotes,
.footnotes-list {
  font-size:   0.75rem;
  line-height: 1.25;
}

.footnotes li,
.footnotes li p,
.footnote-item,
.footnote-item p {
  font-size:   0.75rem !important;
  line-height: 1.25 !important;
  margin:      0 0 0.45rem 0;
}

.footnote-backref,
.footnotes a.footnote-backref {
  font-size:       0.68rem !important;
  margin-left:     0.35rem;
  text-decoration: none;
  opacity:         0.8;
}

.footnotes-list {
  margin-top:          0.3rem;
  margin-left:         1.25rem;
  padding-left:        0;
  list-style-position: outside;
}

/* 8h. F1 Driver Names & Cards */
.f1-driver-name {
  color:           var(--color-text);
  position:        relative;
  display:         inline-block;
  text-decoration: none;
  transition:      color var(--transition-slow);
}

.f1-driver-name:hover { color: var(--driver-color); }

.f1-driver-name:focus {
  color:          var(--driver-color);
  outline:        1px solid var(--driver-color);
  outline-offset: 2px;
}

html[data-driver-color-mode="always"] .f1-driver-name {
  color:       var(--driver-color);
  font-weight: 700;
}

.f1-driver-card {
  position:         absolute;
  left:             50%;
  bottom:           calc(100% + 0.45rem);
  z-index:          10;
  width:            max-content;
  min-width:        12rem;
  max-width:        min(22rem, calc(100vw - 2rem));
  padding:          0.45rem 0.6rem;
  border:           1px solid var(--driver-color);
  background-color: var(--color-bg);
  color:            var(--color-text);
  box-shadow:       0 0 0 1px var(--color-bg);
  font-family:      var(--font-ui);
  font-size:        0.75rem;
  font-weight:      700;
  line-height:      1.2;
  overflow-wrap:    anywhere;
  white-space:      normal;
  opacity:          0;
  pointer-events:   none;
  transform:        translate(-50%, 0.25rem);
  transition:       opacity 0.2s ease, transform 0.2s ease;
}

.f1-driver-name:hover        .f1-driver-card,
.f1-driver-name:focus        .f1-driver-card,
.f1-driver-name:focus-within .f1-driver-card {
  opacity:   1;
  transform: translate(-50%, 0);
}

.f1-driver-card::after {
  content:          "";
  position:         absolute;
  left:             50%;
  top:              100%;
  width:            0.5rem;
  height:           0.5rem;
  border-right:     1px solid var(--driver-color);
  border-bottom:    1px solid var(--driver-color);
  background-color: var(--color-bg);
  transform:        translate(-50%, -50%) rotate(45deg);
}

.f1-driver-card-label {
  display:        block;
  color:          var(--driver-color);
  font-size:      0.62rem;
  text-transform: uppercase;
}

.f1-driver-card-title {
  display:        block;
  margin-bottom:  0.35rem;
  color:          var(--driver-color);
  font-size:      0.82rem;
  text-transform: uppercase;
}

.f1-driver-card-row,
.f1-driver-card-stat {
  display:    block;
  margin-top: 0.35rem;
}

.f1-driver-card-value,
.f1-driver-card-stat-value {
  display: block;
}

.f1-driver-card-list {
  display:    flex;
  flex-wrap:  wrap;
  gap:        0.25rem;
  margin-top: 0.2rem;
}

.f1-driver-card-chip {
  border:  1px solid var(--driver-color);
  padding: 0.12rem 0.3rem;
}

.f1-driver-card-grid {
  display:               grid;
  grid-template-columns: repeat(auto-fit, minmax(4.5rem, 1fr));
  gap:                   0.35rem 0.5rem;
  margin-top:            0.25rem;
}

/* 8i. Theme Picker */
.theme-picker {
  position:       fixed;
  bottom:         1%;
  right:          1%;
  z-index:        200;
  display:        flex;
  flex-direction: column;
  align-items:    flex-end;
  gap:            6px;
}

.theme-picker__trigger {
  width:           34px;
  height:          34px;
  border:          var(--border-width) solid var(--color-border);
  border-radius:   var(--border-radius);
  background:      var(--color-bg);
  color:           var(--color-text);
  cursor:          pointer;
  display:         grid;
  place-items:     center;
  transition:
    background-color var(--transition-base),
    color            var(--transition-base),
    border-color     var(--transition-base),
    transform        0.18s var(--ease-base);
}

.theme-picker__trigger:hover,
.theme-picker__trigger:focus-visible,
.theme-picker__trigger[aria-expanded="true"] {
  background: var(--color-text);
  color:      var(--color-bg);
}

.theme-picker__trigger:active { transform: translateY(1px); }

.theme-picker__trigger:focus-visible {
  outline:        2px solid var(--color-border);
  outline-offset: 2px;
}

.theme-picker__trigger .material-icons {
  font-size:   18px;
  line-height: 1;
}

.theme-picker__panel {
  background:     var(--color-bg);
  border:         var(--border-width) solid var(--color-border);
  padding:        10px;
  min-width:      180px;
  opacity:        0;
  pointer-events: none;
  transform:      translateY(6px);
  transition:     opacity 0.18s ease, transform 0.18s ease;
}

.theme-picker__panel.is-open {
  opacity:        1;
  pointer-events: auto;
  transform:      translateY(0);
}

.theme-picker__heading {
  font-family:    var(--font-ui);
  font-size:      0.7rem;
  font-weight:    700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin:         0 0 8px;
  opacity:        0.6;
}

.theme-picker__options {
  display:        flex;
  flex-direction: column;
  gap:            2px;
}

.theme-picker__option {
  display:     flex;
  align-items: center;
  gap:         8px;
  width:       100%;
  padding:     6px 8px;
  border:      1px solid transparent;
  border-radius: var(--border-radius);
  background:  transparent;
  color:       var(--color-text);
  cursor:      pointer;
  font:        inherit;
  font-family: var(--font-ui);
  font-size:   0.85rem;
  text-align:  left;
  transition:  background-color var(--transition-base), border-color var(--transition-base), color var(--transition-base);
}

.theme-picker__option:hover:not([disabled]) {
  background: var(--color-text);
  color:      var(--color-bg);
}

.theme-picker__option.is-active {
  border-color: var(--color-border);
}

.theme-picker__option[disabled] {
  opacity: 0.45;
  cursor:  not-allowed;
}

.theme-picker__swatch {
  width:         16px;
  height:        16px;
  border-radius: 50%;
  border:        1px solid var(--color-border);
  flex-shrink:   0;
}

.theme-picker__name { flex: 1 1 auto; }

.theme-picker__badge {
  font-size:      0.65rem;
  font-weight:    700;
  text-transform: uppercase;
  border:         1px solid currentColor;
  padding:        1px 4px;
  opacity:        0.6;
  flex-shrink:    0;
}

@media (max-width: 600px) {
  .theme-picker__panel { min-width: 160px; }
}

/* ── 9. Utilities ───────────────────────────────────────────── */

.active { font-weight: bold; }

.body-image {
  max-width: 30%;
  height:    auto;
  margin:    1%;
}

.float-right { float: right; }
.float-left  { float: left;  }

.boxed {
  border:     var(--border-width) solid var(--color-border);
  transition: transform var(--transition-slow);
}

.boxed:hover {
  transform:  scale(1.05);
  box-shadow: 0 0 10px var(--color-text);
}

.hoverglow:hover     { box-shadow: 0 0 10px var(--color-text); }
.hoverglow-red:hover { box-shadow: 0 0 10px red; }

.about-block { margin-bottom: 4%; }

.about-title-block {
  display:        flex;
  flex-direction: row;
  gap:            20px;
  flex-wrap:      nowrap;
  white-space:    nowrap;
  margin-bottom:  1%;
}

p#indev-footer {
  width:         80%;
  align-content: center;
  text-align:    center;
}

.indev-footer::after {
  content:   " | You're viewing a development version of this site. Expect some bugs.";
  font-size: 0.7rem;
}


/* ── 10. Responsive Overrides ───────────────────────────────── */

@media screen and (max-width: 900px) {
  .article-box { flex: 0 0 calc(50% - 20px); }

  picture { width: 80%; }

  .biglogo   { width: 86%; }
  .titlelogo { width: 86% !important; }

  .navlogo {
    margin-top:    0;
    margin-bottom: 0;
    width:         min(56vw, 210px);
    height:        auto;
  }

  .page-logo-box         { scale: 1; }
  .page-logo-box picture { display: none; }

  nav {
    flex-wrap:   wrap;
    align-items: center;
  }

  .nav-brand picture { margin: 0; }

  .nav-right {
    gap:         6px;
    margin-left: auto;
  }

  .theme-toggle { order: 1; }
  .nav-mobile   { order: 2; }

  .nav-dropdown-mobile,
  .nav-mobile {
    display: flex;
  }

  .nav-dropdown,
  .nav-desktop {
    display: none;
  }

  .mobile-menu {
    order:                 3;
    flex:                  0 0 100%;
    width:                 100%;
    margin-top:            10px;
    padding:               6px;
    border:                var(--border-width) solid var(--color-border);
    background:            var(--color-bg);
    box-sizing:            border-box;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap:                   6px;
  }

  .mobile-menu.is-open { display: grid; }

  .mobile-menu__link {
    min-height:      34px;
    padding:         7px 8px;
    border:          var(--border-width) solid var(--color-border);
    box-sizing:      border-box;
    display:         flex;
    align-items:     center;
    justify-content: center;
    text-align:      center;
  }

  .mobile-menu__link:hover,
  .mobile-menu__link:focus-visible,
  .mobile-menu__link.active {
    background:      var(--color-text);
    color:           var(--color-bg);
    text-decoration: none;
  }

  .search { width: 80% !important; }
}

@media screen and (min-width: 901px) {
  .nav-dropdown-mobile,
  .nav-mobile {
    display: none;
  }

  .nav-dropdown,
  .nav-desktop {
    display:     flex;
    align-items: center;
  }
}

@media (max-width: 768px) {
  .theme-toggle { margin-left: 0; }

  nav {
    flex-direction:  row;
    justify-content: space-between;
    gap:             10px;
  }

  .nav-right { justify-content: flex-end; }

  .search-form  { flex-direction: column; }
  .search-tools { grid-template-columns: 1fr; }

  .search-form__button,
  .search-tools__clear {
    min-height: 38px;
  }

  .search-result { grid-template-columns: 1fr; }
}

@media screen and (max-width: 640px) {
  .reading-settings { max-width: 100%; }

  .reading-settings__row {
    grid-template-columns: 1fr;
    gap:                   0.35rem;
  }

  .reading-settings__control { width: 100%; }
  .reading-settings__button  { flex: 1 1 0; }
}

@media (max-width: 600px) {
  nav { justify-content: center; }

  .nav-brand {
    justify-content: center;
    flex:            0 0 100%;
  }

  .navlogo { width: min(72vw, 210px); }

  .nav-right {
    justify-content: center;
    margin-left:     0;
    width:           100%;
  }

  .mobile-menu { margin-top: 8px; }

  .article-box {
    flex:         0 0 80%;
    margin-left:  auto;
    margin-right: auto;
  }
}

@media (max-width: 480px) {
  .footnotes,
  .footnotes-list,
  .footnote-item,
  .footnote-backref,
  .footnotes li p {
    font-size:   0.95rem !important;
    line-height: 1.35;
  }
}

@media (max-width: 360px) {
  .navlogo { width: min(78vw, 190px); }

  .nav-menu-button {
    padding-inline: 7px;
    gap:            6px;
  }
}


/* ── 11. Reduced Motion ─────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  .theme-toggle,
  .theme-toggle::before,
  .theme-toggle__button,
  .thumb-img,
  .boxed,
  .navlogo {
    transition: none;
  }

  .news-ticker { animation: none; }
}