/* v16.6 Theme Toggle — restored inner icon circles, darker icons, visible moon */

/* ---- Tunable colors ---- */
:root {
  --toggle-selected: #f59e0b;                  /* selected ring */
  --toggle-selected-bg: rgba(245,158,11,.15);  /* selected fill */
  --toggle-icon: #2d2d2d;                      /* darker gray for all icons */
  --toggle-group-outline: rgba(17,24,39,.18);  /* outer pill outline */
  --toggle-group-bg: #ffffff;                  /* pill background (always light) */
}

/* ---- Outer pill ---- */
.theme-toggle {
  display:inline-flex; gap:0px; align-items:center;
  padding:0 !important;
  border:1px solid var(--toggle-group-outline);
  border-radius:9999px;
  background:var(--toggle-group-bg) !important;
  box-shadow:none;
  outline:none !important;
}

/* ---- Buttons ---- */
.theme-toggle button {
  height:31px; width:31px; border-radius:9999px;
  display:inline-flex; align-items:center; justify-content:center;
  border:none; background:transparent;
  color:var(--toggle-icon);
  box-shadow:none; outline:none !important;
  position:relative;
}

/* Kill browser focus outlines */
.theme-toggle button:focus,
.theme-toggle button:focus-visible {
  outline:none !important;
  box-shadow:none !important;
}

/* Selected: amber ring + subtle fill */
.theme-toggle button[aria-pressed="true"] {
  background:var(--toggle-selected-bg);
  box-shadow:0 0 0 2px var(--toggle-selected);
  color:var(--toggle-icon);
  border:none;
}

/* ---- SVG icon cleanup ---- */
.theme-toggle button svg {
  width:18px; height:18px;
  display:block; pointer-events:none;
  fill:none !important;
  stroke:currentColor !important;
  stroke-width:1.5;
}

/* Bring back inner icon circles — these are part of the glyphs */
.theme-toggle button svg circle {
  display:inline !important;
  stroke:currentColor !important;
  fill:none !important;
  opacity:0.9;
}

/* Remove ONLY the giant outer ring path if present */
.theme-toggle button svg > path:first-child {
  stroke:none !important;
  fill:none !important;
  opacity:0 !important;
}

/* Ensure moon (dark mode) icon always visible */
.theme-toggle button svg path[d*="M21"],
.theme-toggle button svg path[d*="A9"],
.theme-toggle button svg path[d*="a9"],
.theme-toggle button svg path[d*="M9"] {
  stroke:currentColor !important;
  fill:none !important;
  opacity:1 !important;
}

/* Dark scheme compatibility */
@media (prefers-color-scheme: dark) {
  .theme-toggle {
    background:#ffffff !important;
    border-color:rgba(17,24,39,.28);
  }
  .theme-toggle button {
    color:#1a1a1a; /* darker for better contrast */
    background:transparent;
  }
  .theme-toggle button[aria-pressed="true"] {
    background:rgba(245,158,11,.18);
    box-shadow:0 0 0 2px var(--toggle-selected);
    color:#000;
  }
}


/* v12 mobile gutter fix: keep same reduced gutter from 620px down */
@media (max-width: 620px){
  .ddtd-hero .container,
  .ddtd-section .container,
  .ddtd-page .container,
  .site-header .container,
  .site-header .container.header-inner{
    width: calc(100% - 18px) !important;
    max-width: none !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
}
@media (max-width: 560px){
  .ddtd-hero .container,
  .ddtd-section .container,
  .ddtd-page .container,
  .site-header .container,
  .site-header .container.header-inner{
    width: calc(100% - 18px) !important;
    max-width: none !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
}