/* Dark Mode - Black BG, Light Grey Text, Agile Blue Accents */

body,
html,
.content {
  background-color: #000000 !important;
  color: #f5f5f5 !important;
  font-weight: normal !important;
  transition: background-color 0.2s ease, color 0.2s ease !important;
}

/* All text light grey, normal weight */
p, span, div, li, em, h1, h2, h3, h4, h5, h6, a {
  color: #f5f5f5 !important;
  font-weight: normal !important;
  transition: color 0.2s ease !important;
}

/* Explicitly set normal weight for all text elements (except strong) */
body *:not(strong), 
.content *:not(strong) {
  font-weight: normal !important;
}

/* Headlines (strong tags) - bold and same light grey as "Partners" in logo */
strong,
p strong,
.content strong {
  font-weight: bold !important;
  color: #f5f5f5 !important;
  opacity: 1 !important;
}

/* Remove hashtag from h1 */
h1::before {
  content: '' !important;
}

/* Links: light grey text, Agile Blue underline */
a, a:link, a:visited {
  color: #f5f5f5 !important;
  border-bottom: 2px solid #1976A2 !important;
  transition: background-color 0.2s ease, color 0.2s ease, outline 0.2s ease !important;
}

/* Hover: Agile Blue background + frame, black text */
a:hover, a:active, a:focus {
  color: #000000 !important;
  background-color: #1976A2 !important;
  outline: 3px solid #1976A2 !important;
  border-bottom: 2px solid #1976A2 !important;
}

/* Header link */
header a {
  color: #f5f5f5 !important;
  border-bottom: 2px solid #1976A2 !important;
}

header a:hover {
  color: #000000 !important;
  background-color: #1976A2 !important;
  outline: 3px solid #1976A2 !important;
}

/* Logo link - clean, no underline, no jump */
.main a {
  border-bottom: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

.main a:hover,
.main a:focus,
.main a:active {
  background: none !important;
  outline: none !important;
  border-bottom: none !important;
  padding: 0 !important;
  box-shadow: none !important;
}

/* Toggle button - Archie style with Agile Blue for dark mode */
#dark-mode-toggle,
.nav-toggle {
  padding: 0.5rem !important;
  border-radius: 4px !important;
  border: none !important;
  background: transparent !important;
  transition: all 0.2s ease !important;
}

#dark-mode-toggle svg,
.nav-toggle svg {
  stroke: #f5f5f5 !important;
  transition: stroke 0.2s ease !important;
}

/* Hover: Only on devices with real hover (not touch) */
@media (hover: hover) {
  #dark-mode-toggle:hover,
  .nav-toggle:hover {
    background-color: #1976A2 !important;
    outline: 2px solid #1976A2 !important;
    outline-offset: 2px !important;
  }

  #dark-mode-toggle:hover svg,
  .nav-toggle:hover svg {
    stroke: #ffffff !important;
  }
}

/* Focus/Active: completely invisible (no outlines on any device) */
#dark-mode-toggle,
#dark-mode-toggle:focus,
#dark-mode-toggle:active,
#dark-mode-toggle:focus-visible,
#dark-mode-toggle:focus-within,
.nav-toggle,
.nav-toggle:focus,
.nav-toggle:active,
.nav-toggle:focus-visible,
.nav-toggle:focus-within {
  outline: none !important;
  outline-width: 0 !important;
  outline-style: none !important;
  outline-offset: 0 !important;
  box-shadow: none !important;
  -webkit-tap-highlight-color: transparent !important;
  -webkit-touch-callout: none !important;
  -webkit-user-select: none !important;
  user-select: none !important;
}

/* Touch devices: no focus ring ever */
@media (hover: none) and (pointer: coarse) {
  #dark-mode-toggle,
  #dark-mode-toggle:focus,
  #dark-mode-toggle:active,
  .nav-toggle,
  .nav-toggle:focus,
  .nav-toggle:active {
    outline: 0 !important;
    box-shadow: none !important;
  }
}

/* Footer - same grey as everything else, no opacity */
.footer,
.footer a,
.footer p {
  color: #f5f5f5 !important;
}

/* Footer links - no underline */
.footer a {
  border-bottom: none !important;
}

.footer a:hover {
  background: none !important;
  outline: none !important;
  text-decoration: underline !important;
}

/* Logo swap to monochrome in dark mode - handled by JavaScript */

/* Selection: Agile Blue */
::selection {
  background: #1976A2 !important;
  color: #f5f5f5 !important;
}

::-moz-selection {
  background: #1976A2 !important;
  color: #f5f5f5 !important;
}

/* SVG icon sizing in dark mode */
#dark-mode-toggle svg,
.nav-toggle svg {
  width: 24px !important;
  height: 24px !important;
  inline-size: 24px !important;
  block-size: 24px !important;
  display: block !important;
}

/* Mobile optimizations for dark mode */
@media screen and (max-width: 768px) {
  #dark-mode-toggle svg,
  .nav-toggle svg {
    width: 24px !important;
    height: 24px !important;
  }
}