/* Mainsail News — dark mode + shared logo / responsive helpers.
 *
 * Refresh routine: copy this file into the site root as /dark-mode.css and
 * also copy /workspace/mainsail-shared/dark-mode.js as /dark-mode.js.
 * In every page <head> (after the page <style> block, before </head>):
 *   <link rel="stylesheet" href="/dark-mode.css">
 *   <script src="/dark-mode.js"></script>
 * Include the moon/sun <button class="theme-toggle"> in the site nav
 * (see nav-snippet.html). Do not inline a second copy of these rules.
 *
 * Behavior: the first paint follows prefers-color-scheme (dark when the
 * OS is in dark mode) unless the reader has toggled a preference, which
 * is stored in localStorage under the key "mainsail-theme".
 */

:root {
  --m-bg: #f5f5f5;
  --m-paper: #ffffff;
  --m-text: #000000;
  --m-muted: #444444;
  --m-rule: #dddddd;
  --m-link: #000000;
  --m-link-hover: #0000ff;
  --m-footer: #444444;
  --m-kicker: #555555;
  --m-btn-bg: #a9a9a9;
  --m-btn-fg: #000000;
  --m-toggle-border: #cccccc;
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  html:not([data-theme="light"]) {
    --m-bg: #161513;
    --m-paper: #22211e;
    --m-text: #f0ece4;
    --m-muted: #b5b0a6;
    --m-rule: #3d3b36;
    --m-link: #f0ece4;
    --m-link-hover: #8cb4ff;
    --m-footer: #b5b0a6;
    --m-kicker: #b5b0a6;
    --m-btn-bg: #3d3b36;
    --m-btn-fg: #f0ece4;
    --m-toggle-border: #5a5750;
    color-scheme: dark;
    background: #161513;
  }
}

html[data-theme="dark"] {
  --m-bg: #161513;
  --m-paper: #22211e;
  --m-text: #f0ece4;
  --m-muted: #b5b0a6;
  --m-rule: #3d3b36;
  --m-link: #f0ece4;
  --m-link-hover: #8cb4ff;
  --m-footer: #b5b0a6;
  --m-kicker: #b5b0a6;
  --m-btn-bg: #3d3b36;
  --m-btn-fg: #f0ece4;
  --m-toggle-border: #5a5750;
  color-scheme: dark;
  background: #161513;
}

html, body {
  max-width: 100%;
  overflow-x: hidden;
  background: var(--m-bg);
  color: var(--m-text);
}

.header,
.headerb,
.card,
.masthead,
.site-nav {
  background: var(--m-paper);
  color: var(--m-text);
}

.site-nav {
  border-top: 1px solid var(--m-rule);
}

a:link,
a:visited,
.site-nav a,
.site-footer a,
footer a {
  color: var(--m-link);
}

a:hover,
.site-nav a:hover,
.site-nav a[aria-current="page"],
.site-footer a:hover {
  color: var(--m-link-hover);
}

.site-footer,
footer {
  color: var(--m-footer);
}

.kicker {
  color: var(--m-kicker);
}

#myBtn {
  background-color: var(--m-btn-bg);
  color: var(--m-btn-fg);
}

img, picture, video {
  max-width: 100%;
  height: auto;
}

.site-logo {
  display: block;
  max-width: 100%;
  line-height: 0;
}

.site-logo picture,
.site-logo img {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
}

.logo-dark {
  display: none !important;
}

@media (prefers-color-scheme: dark) {
  html:not([data-theme="light"]) .logo-light {
    display: none !important;
  }
  html:not([data-theme="light"]) .logo-dark {
    display: block !important;
  }
}

html[data-theme="dark"] .logo-light {
  display: none !important;
}

html[data-theme="dark"] .logo-dark {
  display: block !important;
}

.lead-photo {
  width: 400px;
  max-width: 100%;
  height: auto;
  display: block;
  margin: 0 auto;
}

.theme-toggle-wrap {
  display: flex;
  align-items: center;
  margin-left: 2px;
}

.theme-toggle {
  appearance: none;
  -webkit-appearance: none;
  background: transparent;
  border: 1px solid var(--m-toggle-border);
  border-radius: 50%;
  width: 32px;
  height: 32px;
  padding: 0;
  margin: 4px 6px 6px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--m-text);
  line-height: 0;
}

.theme-toggle:hover {
  border-color: var(--m-link-hover);
  color: var(--m-link-hover);
}

.theme-toggle svg {
  width: 16px;
  height: 16px;
  display: block;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.theme-toggle .theme-icon-moon svg {
  fill: currentColor;
  stroke: none;
}

.theme-toggle .theme-icon-sun {
  display: none;
}

.theme-toggle .theme-icon-moon {
  display: block;
}

@media (prefers-color-scheme: dark) {
  html:not([data-theme="light"]) .theme-toggle .theme-icon-sun {
    display: block;
  }
  html:not([data-theme="light"]) .theme-toggle .theme-icon-moon {
    display: none;
  }
}

html[data-theme="dark"] .theme-toggle .theme-icon-sun {
  display: block;
}

html[data-theme="dark"] .theme-toggle .theme-icon-moon {
  display: none;
}

@media screen and (max-width: 800px) {
  .leftcolumn,
  .rightcolumn {
    width: 100%;
    padding: 0;
    float: none;
  }
}

@media screen and (max-width: 420px) {
  body {
    padding: 10px;
  }
  .card {
    padding: 14px 16px 22px;
  }
  .site-nav {
    font-size: 13px;
  }
  .site-nav a {
    padding: 8px 6px;
  }
  .headerb {
    font-size: 20px;
  }
  .theme-toggle {
    width: 30px;
    height: 30px;
    margin: 0;
  }
}

@media screen and (max-width: 600px) {
  .site-nav {
    position: relative;
    padding-right: 38px;
  }
  .theme-toggle-wrap {
    position: absolute;
    right: 4px;
    top: 50%;
    transform: translateY(-50%);
    margin: 0;
  }
  .theme-toggle {
    margin: 0;
  }
}