/* Controls: theme toggle and small interactive controls */
:root{
  /* Per-control image/shape rendering controls. Set these where you load theme overrides. */
  --hamburger-image-rendering: auto;
  --hamburger-shape-rendering: auto;
  --theme-image-rendering: auto;
  --theme-shape-rendering: auto;
  --social-image-rendering: auto;
  --social-shape-rendering: auto;
}

.theme-toggle{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:34px;
  height:31px;
  background: color-mix(in srgb, var(--social-card) 18%, transparent);
  border:1px solid color-mix(in srgb, var(--social-text) 8%, transparent);
  color:var(--social-text);
  padding:3px;
  border-radius:7px;
  cursor:pointer;
  transition: border-color 180ms ease, box-shadow 180ms ease;
  vertical-align:middle;
  line-height:0;
  box-sizing:border-box;
}

.theme-toggle[aria-pressed="true"]{
  color:var(--social-accent);
  border-color:color-mix(in srgb, var(--social-accent) 18%, transparent);
}
.theme-toggle svg{width:19px;height:19px;display:inline-block;image-rendering:var(--theme-image-rendering,auto);shape-rendering:var(--theme-shape-rendering,auto);vertical-align:middle}

/* Slight vertical nudge for the crescent moon so it visually centers on the button */
.theme-toggle.icon-moon svg{transform:translateY(1.5px);}

/* Glow only on mouse hover to match hamburger/menu styling */
.theme-toggle:hover{
  border-color:color-mix(in srgb, var(--social-accent) 18%, transparent);
  box-shadow:
    0 0 0 var(--glow-ring-spread) var(--social-gist-glow-soft),
    0 0 var(--glow-soft-blur) 0 color-mix(in srgb, var(--social-gist-glow) 55%, transparent),
    0 0 var(--glow-strong-blur) var(--glow-strong-spread) var(--social-gist-glow);
}

/* Keyboard users get a focus-visible outline instead of the glow */
.theme-toggle:focus-visible{
  outline:2px solid color-mix(in srgb, var(--social-accent) 25%, transparent);
  outline-offset:2px;
  box-shadow:none;
}

/* Dismiss button for the site-notice; styled to match the theme toggle */
.site-notice .callout{position:relative}
.site-notice-dismiss{
  position:absolute;
  top:8px;
  right:8px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:34px;
  height:31px;
  background: color-mix(in srgb, var(--social-card) 10%, transparent);
  border:1px solid color-mix(in srgb, var(--social-text) 8%, transparent);
  color:var(--social-text);
  padding:3px;
  border-radius:7px;
  cursor:pointer;
  transition: border-color 180ms ease, box-shadow 180ms ease, background 120ms ease;
  vertical-align:middle;
  line-height:0;
  box-sizing:border-box;
  font-size:14px;
}
.site-notice-dismiss:hover{
  border-color:color-mix(in srgb, var(--social-accent) 18%, transparent);
  box-shadow:
    0 0 0 var(--glow-ring-spread) var(--social-gist-glow-soft),
    0 0 var(--glow-soft-blur) 0 color-mix(in srgb, var(--social-gist-glow) 55%, transparent),
    0 0 var(--glow-strong-blur) var(--glow-strong-spread) var(--social-gist-glow);
}
.site-notice-dismiss:hover .site-notice-dismiss-icon{ color: #ff4d4d; }
.site-notice-dismiss:focus-visible{
  outline:2px solid color-mix(in srgb, var(--social-accent) 25%, transparent);
  outline-offset:2px;
  box-shadow:none;
}

/* Nudge the glyph inside the dismiss button slightly upward for visual centering */
.site-notice-dismiss-icon{display:inline-block;transform:translateY(-1.5px);line-height:1}

/* Social link (e.g., Bluesky) styled to match theme-toggle */
.social-link{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:34px;
  height:31px;
  background:transparent;
  border:1px solid transparent; /* visually invisible by default */
  color:inherit;
  padding:3px;
  border-radius:7px;
  cursor:pointer;
  transition: border-color 180ms ease, box-shadow 180ms ease;
  text-decoration:none;
  vertical-align:middle;
  line-height:0;
  box-sizing:border-box;
}
.social-link .social-icon{display:inline-block;width:19px;height:19px;image-rendering:var(--social-image-rendering,auto);shape-rendering:var(--social-shape-rendering,auto);vertical-align:middle}
.social-link .social-svg{display:inline-block;width:19px;height:19px;image-rendering:var(--social-image-rendering,auto);shape-rendering:var(--social-shape-rendering,auto);vertical-align:middle}
.social-link:hover{
  border-color:color-mix(in srgb, var(--social-accent) 18%, transparent);
  box-shadow:
    0 0 0 var(--glow-ring-spread) var(--social-gist-glow-soft),
    0 0 var(--glow-soft-blur) 0 color-mix(in srgb, var(--social-gist-glow) 55%, transparent),
    0 0 var(--glow-strong-blur) var(--glow-strong-spread) var(--social-gist-glow);
}

/* Footer and responsive tweaks */
footer{margin-top:28px;color:var(--footer-text);font-size:.85rem;text-align:center}

@media (max-width:520px){
  .header-left{--avatar-size:48px}
  .header-left h1{font-size:1.125rem;line-height:1.1}
}

/* Tooltip shown for the site-notice dismiss button. Positioned and
   placed via JS to appear at the bottom-left of the cursor so it
   remains visible and doesn't get clipped by viewport edges. */
.site-notice-tooltip{
  position:fixed;
  z-index:9999;
  pointer-events:none;
  background:color-mix(in srgb, var(--social-card) 94%, black);
  color:var(--social-text);
  padding:6px 8px;
  border-radius:6px;
  border:1px solid color-mix(in srgb, var(--social-text) 6%, transparent);
  font-size:0.85rem;
  line-height:1;
  box-shadow:0 6px 18px rgba(0,0,0,0.18);
  white-space:nowrap;
}