/* =====================================================
   THEME VARIABLES
   ===================================================== */

/* Dark (default) */
:root,
html[data-theme="dark"]{
  --nav-bg: #0a0a0a;
  --nav-fg: #fff;
  --nav-accent: #ff4d00;
  --drawer-bg: rgba(10,10,10,.96);
  --page-bg: #0f0f10;
  --page-fg: #f3f3f3;
  --ring: rgba(255,255,255,.2);
  --tick: rgba(255,255,255,.35);
  --pointer: #fff;
}

/* Light */
html[data-theme="light"]{
  --nav-bg: #f5f5f7;
  --nav-fg: #111;
  --nav-accent: #ff4d00;
  --drawer-bg: rgba(255,255,255,.95);
  --page-bg: #ffffff;
  --page-fg: #111;
  --ring: rgba(0,0,0,.2);
  --tick: rgba(0,0,0,.35);
  --pointer: #000;
}

/* Global usage */
body{
  background: var(--page-bg);
  color: var(--page-fg);
}

/* =====================================================
   HEADER
   ===================================================== */
.site-header{
  position: sticky;
  top: 0;
  z-index: auto; /* drawer will float above */
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: .75rem 1rem;
  background: var(--nav-bg);
  color: var(--nav-fg);
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.site-title{
  text-decoration: none;
  color: var(--nav-fg);
  font-weight: 700;
  letter-spacing: .02em;
}

/* =====================================================
   CONTROLS (theme + menu) – always visible
   ===================================================== */
.header-controls{
  position: fixed;      /* keep above drawer */
  top: .75rem;
  right: 1rem;
  display: flex;
  align-items: center;
  gap: .5rem;
  z-index: 100005;      /* above drawer(100002) and scrim(100001) */
  pointer-events: auto;
}

.site-header{
  padding-right: 120px;
}

/* Buttons (shared) */
.pot-toggle,
.theme-toggle{
  position: relative;
  z-index: 100006;  /* keep them clickable */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  cursor: pointer;
}
.pot-toggle:focus-visible,
.theme-toggle:focus-visible{
  outline: 2px solid var(--nav-accent);
  outline-offset: 2px;
  border-radius: 999px;
}

/* Knob visuals (shared) */
.pot-knob,
.theme-knob{
  width: 100%;
  height: 100%;
  display: block;
  transform: rotate(-110deg);
  transition: transform .25s cubic-bezier(.2,.8,.2,1);
}
.pot-ring{
  fill: none;
  stroke: var(--ring);
  stroke-width: 2;
}
.pot-tick{
  stroke: var(--tick);
  stroke-width: 2;
  stroke-linecap: round;
}
.pot-pointer,
.theme-knob .pot-pointer{
  stroke: var(--pointer);
  stroke-width: 3;
  stroke-linecap: round;
}

/* =====================================================
   DRAWER NAVIGATION (all sizes)
   ===================================================== */
.primary-nav{
  --drawer: 360px;
  position: fixed;
  inset: 0 0 0 auto;
  width: min(100%, var(--drawer));
  background: var(--drawer-bg);
  backdrop-filter: blur(6px);
  transform: translateX(110%);
  transition: transform .35s cubic-bezier(.2,.8,.2,1);
  padding: 5rem 1.25rem 2rem;
  display: flex;
  align-items: flex-start;
  z-index: 100002;  /* below knobs, above scrim */
  pointer-events: auto;
}
.primary-nav.open{
  transform: translateX(0);
}

/* Menu list */
.primary-nav .menu{
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: .5rem;
  margin: 0;
  padding: 20px;
  width: 100%;
}
.primary-nav .menu a{
  color: var(--nav-fg);
  text-decoration: none;
  padding: .5rem .75rem;
  border-radius: 999px;
  transition: background .2s ease, color .2s ease;
  position: relative;
  z-index: 1;
  pointer-events: auto;
	font-family: "Courier New", ui-monospace, monospace;
}
.primary-nav .menu a:hover,
.primary-nav .menu a:focus-visible{
  /* use simple hover to avoid rgba(var()) problems */
  background: rgba(255,255,255,.08);
}
html[data-theme="light"] .primary-nav .menu a:hover,
html[data-theme="light"] .primary-nav .menu a:focus-visible{
  background: rgba(0,0,0,.05);
}
.primary-nav .menu a.is-active{
  background: var(--nav-accent);
  color: #000;
}

.primary-nav,
.primary-nav *{
  pointer-events: auto;
}

/* =====================================================
   SCRIM + SCROLL LOCK
   ===================================================== */
body::after{
  content: "";
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0);
  transition: background .25s ease;
  z-index: 100001;       /* under drawer, above page */
  pointer-events: none;
}
body.menu-open::after{
  background: rgba(0,0,0,.35);
  pointer-events: auto;  /* click-outside to close */
}
body.no-scroll{
  overflow: hidden;
}

/* =====================================================
   RESPONSIVE
   ===================================================== */
@media (min-width: 900px){
  .primary-nav{
    --drawer: 420px;
    padding-top: 6rem;
  }
}

/* Small fade on theme change */
html, body, .site-header, .primary-nav{
  transition: background-color .25s ease, color .25s ease;
}

/* =====================================================
   PARTNERS — logos adapt to theme
   ===================================================== */

/* Base */
.mud-logos img { max-height:20px; width:auto; display:block; transition:filter .2s ease; }

/* WHITE mono logos (class="logo-mono")
   Light → turn to black; Dark → keep white */
html[theme="light"] .mud-logos img.logo-mono,
html[data-theme="light"] .mud-logos img.logo-mono {
  filter: brightness(0.5) contrast(1.1) !important; /* BLACK */
}
html[theme="dark"] .mud-logos img.logo-mono,
html[data-theme="dark"] .mud-logos img.logo-mono {
  filter: none !important; /* WHITE as source */
}

/* COLOUR logos (no .logo-mono)
   Light → keep colour; Dark → fade to white */
html[theme="light"] .mud-logos img:not(.logo-mono),
html[data-theme="light"] .mud-logos img:not(.logo-mono) {
  filter: none !important;
}
html[theme="dark"] .mud-logos img:not(.logo-mono),
html[data-theme="dark"] .mud-logos img:not(.logo-mono) {
  filter: grayscale(1) brightness(3.5) contrast(1.2) !important; /* white-ish */
  opacity:.95;
}

/* Opt-out */
.mud-logo.no-invert img { filter:none !important; opacity:1 !important; }