/*
  Two distinct color themes, following the site's existing light/dark
  toggle (see themes/hugo-theme-cleanwhite/static/css/theme-variables.css
  for the full variable list this overrides):

    - Light theme: cream background (#FDFBD4), black text
    - Dark theme:  navy background (#0a1f44), light parchment text (#FDFBF7)

  Nearly every background and text color in the theme is driven by these
  CSS custom properties, so overriding them here — rather than hunting
  down individual selectors — recolors the whole site consistently (nav,
  panels, pagination, comments, etc.), not just <body>.

  :root holds the light-theme values as the default/fallback, for the
  brief moment before the toggle script runs and for no-JS visitors.
  The prefers-color-scheme block covers no-JS visitors whose OS prefers
  dark, so they see the dark theme instead of the light default.
*/

:root,
[data-theme="light"] {
  --color-bg: #FDFBD4;
  --color-text-main: #000000;
  --color-text-secondary: #4a4a3a;
  --color-text-muted: #5a5a4a;
  --color-primary: #0085a1;
  --color-primary-light: #337ab7;
  --color-border: #e0ddc0;
  --color-border-light: #ece9d0;
  --color-border-dark: #d5d2b5;

  --bg-input: #fffef5;
  --bg-tag-cloud: #ece9d0;
  --bg-catalog-active: #f5f3df;
  --bg-mobile-menu: #FDFBD4;
  --bg-tag-active: rgba(0, 0, 0, 0.06);
  --bg-tag-invert: rgba(0, 0, 0, 0.05);
  --bg-pager: #FDFBD4;
  --bg-disabled: #ddd8b8;

  --sidebar-text: #4a4a3a;
  --sidebar-heading: #222222;

  --navbar-text: #000000;
  --navbar-text-hover: #0085a1;
  --navbar-toggle-icon-invert: #000000;

  --link-color: #000000;
  --link-color-post: #337ab7;
  --link-hover: #0085a1;
}

[data-theme="dark"] {
  --color-bg: #0a1f44;
  --color-text-main: #FDFBF7;
  --color-text-secondary: #cfcabe;
  --color-text-muted: #a9a48f;
  --color-primary: #7fb4ff;
  --color-primary-light: #9ec5ff;
  --color-border: rgba(253, 251, 247, 0.16);
  --color-border-light: rgba(253, 251, 247, 0.08);
  --color-border-dark: rgba(253, 251, 247, 0.22);

  --bg-input: #12295a;
  --bg-tag-cloud: rgba(18, 41, 90, 0.75);
  --bg-catalog-active: rgba(18, 41, 90, 0.78);
  --bg-mobile-menu: rgba(10, 31, 68, 0.92);
  --bg-tag-active: rgba(253, 251, 247, 0.12);
  --bg-tag-invert: rgba(253, 251, 247, 0.08);
  --bg-pager: rgba(18, 41, 90, 0.78);
  --bg-disabled: rgba(18, 41, 90, 0.68);

  --sidebar-text: #cfcabe;
  --sidebar-heading: #FDFBF7;

  --navbar-text: #FDFBF7;
  --navbar-text-hover: #7fb4ff;
  --navbar-toggle-icon-invert: #FDFBF7;

  --link-color: #7fb4ff;
  --link-color-post: #9ec5ff;
  --link-hover: #9ec5ff;
}

/* No-JS visitors whose OS prefers dark: fall back to the dark theme
   instead of the :root (light) default. Mirrors [data-theme="dark"]
   above; kept in sync manually since custom properties can't be
   referenced across selectors. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    --color-bg: #0a1f44;
    --color-text-main: #FDFBF7;
    --color-text-secondary: #cfcabe;
    --color-text-muted: #a9a48f;
    --color-primary: #7fb4ff;
    --color-primary-light: #9ec5ff;
    --color-border: rgba(253, 251, 247, 0.16);
    --color-border-light: rgba(253, 251, 247, 0.08);
    --color-border-dark: rgba(253, 251, 247, 0.22);

    --bg-input: #12295a;
    --bg-tag-cloud: rgba(18, 41, 90, 0.75);
    --bg-catalog-active: rgba(18, 41, 90, 0.78);
    --bg-mobile-menu: rgba(10, 31, 68, 0.92);
    --bg-tag-active: rgba(253, 251, 247, 0.12);
    --bg-tag-invert: rgba(253, 251, 247, 0.08);
    --bg-pager: rgba(18, 41, 90, 0.78);
    --bg-disabled: rgba(18, 41, 90, 0.68);

    --sidebar-text: #cfcabe;
    --sidebar-heading: #FDFBF7;

    --navbar-text: #FDFBF7;
    --navbar-text-hover: #7fb4ff;

    --link-color: #7fb4ff;
    --link-color-post: #9ec5ff;
    --link-hover: #9ec5ff;
  }
}

/* Native form controls / scrollbars follow whichever theme is active */
html[data-theme="dark"] {
  color-scheme: dark;
}
html[data-theme="light"],
html:not([data-theme]) {
  color-scheme: light;
}

/*
  Header (hero) text override.

  The theme hardcodes this text white — with the intro-header rule itself
  in hugo-theme-cleanwhite.css, and again (still white, just reinforced)
  in theme-variables.css's [data-theme="dark"] .intro-header * block —
  because it's designed to sit over a photo background regardless of
  theme. With a plain color background, or a lighter photo, that white
  text can disappear. This makes it follow the active theme like the rest
  of the page instead.

  Uses `.intro-header *` (matching the theme's own dark-mode override) so
  it also catches the post byline, subheading, and prev/next links inside
  the header — not just the <h1>.
*/

[data-theme="light"] .intro-header,
[data-theme="light"] .intro-header * {
  color: #000000 !important;
}
[data-theme="light"] .intro-header .tags a,
[data-theme="light"] .intro-header .tags .tag {
  color: #000000 !important;
  border-color: rgba(0, 0, 0, 0.5) !important;
}
[data-theme="light"] .intro-header .tags a:hover,
[data-theme="light"] .intro-header .tags .tag:hover {
  background-color: rgba(0, 0, 0, 0.08) !important;
}

[data-theme="dark"] .intro-header,
[data-theme="dark"] .intro-header * {
  color: #FDFBF7 !important;
}
[data-theme="dark"] .intro-header .tags a,
[data-theme="dark"] .intro-header .tags .tag {
  color: #FDFBF7 !important;
  border-color: rgba(253, 251, 247, 0.6) !important;
}
[data-theme="dark"] .intro-header .tags a:hover,
[data-theme="dark"] .intro-header .tags .tag:hover {
  background-color: rgba(253, 251, 247, 0.12) !important;
}

/* Fallback for the moment before the toggle script runs, and for no-JS
   visitors (mirrors the light/dark blocks above). */
:root:not([data-theme]) .intro-header,
:root:not([data-theme]) .intro-header * {
  color: #000000 !important;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) .intro-header,
  :root:not([data-theme]) .intro-header * {
    color: #FDFBF7 !important;
  }
}

/*
  Header overlay.

  A semi-transparent scrim behind the header text, tinted to match the
  active theme, so the text stays readable against a background image
  regardless of how bright/busy that image is. Skipped on `.style-text`
  headers (e.g. the About page) since those have no background image to
  begin with — an overlay there would just look like a mystery box.

  Implementation: `.intro-header` gets `position: relative` and a
  `::before` pseudo-element covers it with `position: absolute; inset: 0`.
  The pseudo is given `z-index: 0` and the heading `.container` is given
  `z-index: 1`, so the overlay sits between the background image (which
  paints as part of .intro-header's own box, always at the very bottom)
  and the actual heading text.
*/

.intro-header {
  position: relative;
}
.intro-header:not(.style-text)::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}
.intro-header > .container {
  position: relative;
  z-index: 1;
}

[data-theme="light"] .intro-header:not(.style-text)::before {
  background-color: rgba(253, 251, 212, 0.55);
}
[data-theme="dark"] .intro-header:not(.style-text)::before {
  background-color: rgba(10, 31, 68, 0.55);
}
:root:not([data-theme]) .intro-header:not(.style-text)::before {
  background-color: rgba(253, 251, 212, 0.55);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) .intro-header:not(.style-text)::before {
    background-color: rgba(10, 31, 68, 0.55);
  }
}

/*
  Top navigation bar: semi-transparent overlay + theme-following text, at
  every scroll position — not just once scrolled.

  The theme hardcodes the nav transparent with white text by default, and
  ships an extensive dark-mode-only override (theme-variables.css, "Navbar
  - Dark Mode Styling") that forces it white-on-transparent at the top and
  a hardcoded near-white bar with near-black text once scrolled
  (`.is-fixed`), regardless of the toggle. Light mode has no equivalent
  section at all, which is why the nav previously stayed white always.

  These rules mirror the theme's own selectors (`:not(.is-fixed)` /
  `.is-fixed`, same specificity) so they win by loading later, and add a
  parallel light-mode section.
*/

/* --- Light theme --- */
[data-theme="light"] .navbar-custom:not(.is-fixed),
[data-theme="light"] .navbar-default:not(.is-fixed) {
  background-color: rgba(253, 251, 212, 0.6) !important;
}
[data-theme="light"] .navbar-custom:not(.is-fixed) .navbar-brand,
[data-theme="light"] .navbar-custom:not(.is-fixed) .navbar-nav > li > a,
[data-theme="light"] .navbar-custom:not(.is-fixed) .nav li a,
[data-theme="light"] .navbar-custom:not(.is-fixed) #theme-toggle {
  color: rgba(0, 0, 0, 0.85) !important;
}
[data-theme="light"] .navbar-custom:not(.is-fixed) .navbar-brand:hover,
[data-theme="light"] .navbar-custom:not(.is-fixed) .navbar-nav > li > a:hover,
[data-theme="light"] .navbar-custom:not(.is-fixed) .nav li a:hover,
[data-theme="light"] .navbar-custom:not(.is-fixed) #theme-toggle:hover {
  color: #000000 !important;
}
[data-theme="light"] .navbar-custom:not(.is-fixed) .navbar-toggle .icon-bar {
  background-color: #000000 !important;
}
[data-theme="light"] .navbar-custom:not(.is-fixed) #theme-toggle i {
  color: rgba(0, 0, 0, 0.85) !important;
}

[data-theme="light"] .navbar-custom.is-fixed {
  background-color: rgba(253, 251, 212, 0.92) !important;
}
[data-theme="light"] .navbar-custom.is-fixed .navbar-brand,
[data-theme="light"] .navbar-custom.is-fixed .navbar-nav > li > a,
[data-theme="light"] .navbar-custom.is-fixed .nav li a {
  color: #000000 !important;
}
[data-theme="light"] .navbar-custom.is-fixed .navbar-brand:hover,
[data-theme="light"] .navbar-custom.is-fixed .navbar-brand:focus,
[data-theme="light"] .navbar-custom.is-fixed .navbar-nav > li > a:hover,
[data-theme="light"] .navbar-custom.is-fixed .navbar-nav > li > a:focus,
[data-theme="light"] .navbar-custom.is-fixed .nav li a:hover,
[data-theme="light"] .navbar-custom.is-fixed .nav li a:focus {
  color: rgba(0, 0, 0, 0.65) !important;
}
[data-theme="light"] .navbar-custom.is-fixed .navbar-toggle .icon-bar {
  background-color: #000000 !important;
}
[data-theme="light"] .navbar-custom.is-fixed #theme-toggle,
[data-theme="light"] .navbar-custom.is-fixed #theme-toggle i {
  color: #000000 !important;
}
[data-theme="light"] .navbar-custom.is-fixed #theme-toggle:hover,
[data-theme="light"] .navbar-custom.is-fixed #theme-toggle:focus {
  color: rgba(0, 0, 0, 0.65) !important;
}

/* --- Dark theme (overrides the theme's own hardcoded white/near-black) --- */
[data-theme="dark"] .navbar-custom:not(.is-fixed),
[data-theme="dark"] .navbar-default:not(.is-fixed) {
  background-color: rgba(10, 31, 68, 0.6) !important;
}
[data-theme="dark"] .navbar-custom:not(.is-fixed) .navbar-brand,
[data-theme="dark"] .navbar-custom:not(.is-fixed) .navbar-nav > li > a,
[data-theme="dark"] .navbar-custom:not(.is-fixed) .nav li a,
[data-theme="dark"] .navbar-custom:not(.is-fixed) #theme-toggle {
  color: rgba(253, 251, 247, 0.92) !important;
}
[data-theme="dark"] .navbar-custom:not(.is-fixed) .navbar-brand:hover,
[data-theme="dark"] .navbar-custom:not(.is-fixed) .navbar-nav > li > a:hover,
[data-theme="dark"] .navbar-custom:not(.is-fixed) .nav li a:hover,
[data-theme="dark"] .navbar-custom:not(.is-fixed) #theme-toggle:hover {
  color: #FDFBF7 !important;
}
[data-theme="dark"] .navbar-custom:not(.is-fixed) .navbar-toggle .icon-bar {
  background-color: #FDFBF7 !important;
}
[data-theme="dark"] .navbar-custom:not(.is-fixed) #theme-toggle i {
  color: rgba(253, 251, 247, 0.92) !important;
}

[data-theme="dark"] .navbar-custom.is-fixed {
  background-color: rgba(10, 31, 68, 0.92) !important;
}
[data-theme="dark"] .navbar-custom.is-fixed .navbar-brand,
[data-theme="dark"] .navbar-custom.is-fixed .navbar-nav > li > a,
[data-theme="dark"] .navbar-custom.is-fixed .nav li a {
  color: #FDFBF7 !important;
}
[data-theme="dark"] .navbar-custom.is-fixed .navbar-brand:hover,
[data-theme="dark"] .navbar-custom.is-fixed .navbar-brand:focus,
[data-theme="dark"] .navbar-custom.is-fixed .navbar-nav > li > a:hover,
[data-theme="dark"] .navbar-custom.is-fixed .navbar-nav > li > a:focus,
[data-theme="dark"] .navbar-custom.is-fixed .nav li a:hover,
[data-theme="dark"] .navbar-custom.is-fixed .nav li a:focus {
  color: rgba(253, 251, 247, 0.75) !important;
}
[data-theme="dark"] .navbar-custom.is-fixed .navbar-toggle .icon-bar {
  background-color: #FDFBF7 !important;
}
[data-theme="dark"] .navbar-custom.is-fixed #theme-toggle,
[data-theme="dark"] .navbar-custom.is-fixed #theme-toggle i {
  color: #FDFBF7 !important;
}
[data-theme="dark"] .navbar-custom.is-fixed #theme-toggle:hover,
[data-theme="dark"] .navbar-custom.is-fixed #theme-toggle:focus {
  color: rgba(253, 251, 247, 0.75) !important;
}