/* ==========================================================================
   Blue masthead — The Sri COM
   --------------------------------------------------------------------------
   The header is a solid #2475e8 bar in BOTH light and dark mode, so the
   masthead looks identical whichever theme the reader picks. Everything
   inside it (logo, nav, icons, Subscribe) is retuned to sit on blue.

   Loaded LAST in default.hbs. Selectors are prefixed with
   `html[data-theme] body` so they beat the mode-specific rules already set in
   screen.css / theme-toggle.css / blue-links.css / brand-accent.css without
   needing !important. The plain-selector duplicates are a fallback for the
   split second before the inline theme script sets data-theme.

   NOTE: header rules are scoped to `.site-header` on purpose — the footer
   also uses .brand, and its logo still needs the light-mode blue tint.
   ========================================================================== */

:root {
  --masthead: #2475e8;
  --masthead-ink: #ffffff;
  --masthead-ink-dim: rgba(255, 255, 255, .86);
  --masthead-line: rgba(255, 255, 255, .18);
  --masthead-btn-text: #1a5fc4;
}

/* --- The bar -------------------------------------------------------------- */

.site-header,
html[data-theme] body .site-header {
  background: var(--masthead);
  border-bottom: 1px solid var(--masthead-line);
  box-shadow: 0 1px 20px rgba(6, 26, 60, .20);
  backdrop-filter: none;
}

/* --- Logo + wordmark ------------------------------------------------------ */

/* The PNG is white artwork, so it needs no filter on a blue bar. */
html[data-theme] body .site-header .brand img {
  filter: none;
}

html[data-theme] body .site-header .brand,
html[data-theme] body .site-header .brand span {
  color: var(--masthead-ink);
}

html[data-theme] body .site-header .brand:hover span {
  color: rgba(255, 255, 255, .80);
}

/* --- Navigation ----------------------------------------------------------- */

html[data-theme] body .site-header .site-nav a {
  color: var(--masthead-ink-dim);
}

html[data-theme] body .site-header .site-nav a:hover {
  color: var(--masthead-ink);
}

/* Current page gets a underline — a flat blue bar gives no other cue. */
html[data-theme] body .site-header .site-nav .nav-current a {
  padding-bottom: 3px;
  color: var(--masthead-ink);
  box-shadow: inset 0 -2px 0 rgba(255, 255, 255, .9);
}

/* --- Search + theme toggle ------------------------------------------------ */

html[data-theme] body .site-header .search {
  color: rgba(255, 255, 255, .9);
}

html[data-theme] body .site-header .search:hover {
  color: var(--masthead-ink);
}

html[data-theme] body .site-header .theme-toggle {
  border: 1px solid rgba(255, 255, 255, .38);
  background: transparent;
  color: var(--masthead-ink);
}

html[data-theme] body .site-header .theme-toggle:hover {
  border-color: var(--masthead-ink);
  background: rgba(255, 255, 255, .16);
  color: var(--masthead-ink);
}

/* --- Subscribe button ----------------------------------------------------- */

/* Inverted: white pill, blue label — the old #2475e8 fill would now vanish
   into the bar. Text is #1a5fc4 rather than #2475e8 for readable contrast
   at this small, bold size. */
html[data-theme] body .site-header .subscribe {
  background: #ffffff;
  color: var(--masthead-btn-text);
  box-shadow: 0 2px 10px rgba(6, 26, 60, .16);
}

html[data-theme] body .site-header .subscribe:hover {
  background: #eaf2ff;
  color: #14509f;
  transform: translateY(-1px);
}

/* --- Focus rings ---------------------------------------------------------- */

/* The global focus colour is cyan, which is weak against blue. */
html[data-theme] body .site-header a:focus-visible,
html[data-theme] body .site-header button:focus-visible {
  outline-color: #ffffff;
}

@media (prefers-reduced-motion: reduce) {
  html[data-theme] body .site-header .subscribe:hover {
    transform: none;
  }
}