/* METEOROLOGOS — simple, old-school personal-homepage styling */

body {
  background-color: #fdf6e3;
  color: #222222;
  font-family: "Times New Roman", Times, serif;
  font-size: 17px;
  max-width: 700px;
  margin: 30px auto;
  padding: 0 16px;
  line-height: 1.5;
}

a:link { color: #0000ee; }
a:visited { color: #551a8b; }
a:hover { color: #cc0000; }

h1, h2, h3 {
  font-family: "Times New Roman", Times, serif;
  font-weight: bold;
}

h1 {
  font-size: 1.8em;
  margin-bottom: 0;
}

.tagline {
  color: #555555;
  font-style: italic;
  margin-top: 4px;
}

.masthead {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 24px;
}

.masthead .logo {
  flex: none;
}

.masthead h1 {
  margin-top: 0;
}

.masthead .tagline {
  margin-bottom: 0;
}

figure.map {
  margin: 20px 0;
}

figure.map img {
  max-width: 100%;
  height: auto;
  display: block;
}

figure.map figcaption {
  font-size: 0.85em;
  color: #666666;
  font-style: italic;
  margin-top: 4px;
}

nav {
  margin: 14px 0;
  padding: 6px 0;
  border-top: 1px solid #999999;
  border-bottom: 1px solid #999999;
}

nav ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

nav ul li {
  display: inline;
  margin-right: 14px;
}

nav ul li.unit-toggle {
  float: right;
  margin-right: 0;
  color: #999999;
}

.unit-toggle a.active {
  font-weight: bold;
  color: #222222;
  text-decoration: none;
  cursor: default;
}

.post-list {
  list-style: none;
  padding: 0;
}

.post-list li {
  border-bottom: 1px solid #dddddd;
  padding: 6px 0;
}

.post-date {
  font-family: "Courier New", monospace;
  color: #666666;
  margin-right: 10px;
}

/* Per-post weather summary in the archive lists */

.post-wx {
  float: right;
  font-size: 0.9em;
  white-space: nowrap;
}

.post-wx .wx-icon svg {
  display: inline-block;
  width: 18px;
  height: 18px;
  margin: 0 4px -3px 0;
}

.post-wx .wx-lo {
  margin-left: 4px;
}

.post-wx-rating {
  color: #666666;
  margin-left: 8px;
}

.today-tldr {
  font-style: italic;
  color: #555555;
  margin-top: 2px;
}

/* The homepage intro, moved below the forecasts */

.site-about {
  border-top: 1px solid #cccccc;
  margin-top: 22px;
  padding-top: 6px;
  font-size: 0.95em;
}

/* Extreme-heat strip (rendered by baseof.html from site data) */

.heat-banner {
  border: 1px solid #b58900;
  border-left-width: 6px;
  background-color: #f6ecca;
  padding: 8px 12px;
  margin: 12px 0;
  font-size: 0.95em;
}

.heat-banner-danger {
  border-color: #dc322f;
  background-color: #f6dcda;
}

.justify-container h2 {
  border-bottom: 1px solid #cccccc;
  padding-bottom: 2px;
}

footer {
  font-size: 0.85em;
  color: #777777;
  border-top: 1px solid #999999;
  padding-top: 10px;
  margin-top: 30px;
}

/* Forecast day-card strips: homepage three-day widget (full size) and the
   strips embedded in daily posts (full size) / weekly posts (compact). */

.wx-strip {
  display: flex;
  gap: 10px;
  margin: 12px 0 4px;
}

.wx-card {
  flex: 1 1 0;
  border: 1px solid #cccccc;
  padding: 8px 6px 10px;
  text-align: center;
}

.wx-label {
  font-weight: bold;
}

.wx-date {
  font-family: "Courier New", monospace;
  color: #666666;
  font-size: 0.8em;
}

.wx-icon svg {
  display: block;
  width: 44px;
  height: 44px;
  margin: 8px auto 2px;
}

.wx-condition {
  font-style: italic;
  color: #555555;
  font-size: 0.9em;
}

.wx-temps {
  font-size: 1.2em;
  margin: 4px 0;
}

.wx-hi {
  color: #cb4b16;
  font-weight: bold;
}

.wx-lo {
  color: #268bd2;
  margin-left: 6px;
}

.wx-facts {
  list-style: none;
  padding: 0;
  margin: 6px 0 0;
  font-size: 0.82em;
  color: #444444;
}

.wx-facts li {
  padding: 1px 0;
}

.wx-pm-elevated { color: #b58900; font-weight: bold; }
.wx-pm-high { color: #cb4b16; font-weight: bold; }
.wx-pm-very-high { color: #dc322f; font-weight: bold; }

.wx-rating {
  font-size: 0.85em;
  margin-top: 6px;
  padding-top: 5px;
  border-top: 1px solid #dddddd;
}

.three-day-issued {
  font-size: 0.8em;
  color: #777777;
  font-style: italic;
  margin-top: 4px;
}

/* Compact variant: the weekly outlook's 7-day strip */

.wx-strip-compact {
  gap: 5px;
}

.wx-strip-compact .wx-card {
  padding: 5px 2px 7px;
}

.wx-strip-compact .wx-label {
  font-size: 0.85em;
}

.wx-strip-compact .wx-date {
  font-size: 0.7em;
}

.wx-strip-compact .wx-icon svg {
  width: 30px;
  height: 30px;
  margin: 5px auto 1px;
}

.wx-strip-compact .wx-temps {
  font-size: 1em;
  margin: 3px 0;
}

.wx-strip-compact .wx-lo {
  margin-left: 3px;
}

.wx-strip-compact .wx-facts {
  font-size: 0.72em;
  margin-top: 3px;
}

.wx-strip-compact .wx-rating {
  font-size: 0.75em;
  margin-top: 4px;
  padding-top: 3px;
}

@media (max-width: 560px) {
  .wx-strip {
    flex-direction: column;
  }
  .wx-strip-compact {
    flex-direction: row;
    flex-wrap: wrap;
  }
  .wx-strip-compact .wx-card {
    flex: 1 1 23%;
  }
}

table.forecast-table {
  width: 100%;
  border-collapse: collapse;
  margin: 12px 0;
}

table.forecast-table, table.forecast-table th, table.forecast-table td {
  border: 1px solid #cccccc;
}

table.forecast-table th {
  background-color: #eee8d5;
}

table.forecast-table td {
  padding: 4px 8px;
}

/* Dark mode: solarized dark, the natural twin of the cream theme above.
   Accent colors (#cb4b16 / #268bd2 / #b58900 / #dc322f) are shared between
   both solarized palettes and stay as-is; only backgrounds, text, borders,
   and the neutral chrome inside inline SVGs (selected by their authored
   fill/stroke attributes) get retinted. */

@media (prefers-color-scheme: dark) {
  body {
    background-color: #002b36;
    color: #a7b6b6;
  }

  a:link { color: #268bd2; }
  a:visited { color: #6c71c4; }
  a:hover { color: #dc322f; }

  .tagline,
  .post-date,
  .wx-date,
  .post-wx-rating,
  footer {
    color: #839496;
  }

  .today-tldr,
  .wx-condition,
  .three-day-issued {
    color: #93a1a1;
  }

  nav,
  footer {
    border-color: #586e75;
  }

  .post-list li {
    border-bottom-color: #073642;
  }

  .site-about {
    border-top-color: #586e75;
  }

  .justify-container h2 {
    border-bottom-color: #586e75;
  }

  table.forecast-table,
  table.forecast-table th,
  table.forecast-table td {
    border-color: #586e75;
  }

  table.forecast-table th {
    background-color: #073642;
  }

  .wx-card {
    border-color: #586e75;
  }

  .wx-facts {
    color: #93a1a1;
  }

  .wx-rating {
    border-top-color: #073642;
  }

  nav ul li.unit-toggle {
    color: #586e75;
  }

  .unit-toggle a.active {
    color: #eee8d5;
  }

  .heat-banner {
    background-color: #073642;
    color: #c9d4d4;
  }

  .heat-banner-danger {
    background-color: #3a1615;
  }

  /* Inline SVG chrome: chart gridlines/labels and icon cloud bodies. */
  svg text[fill="#657b83"] { fill: #839496; }
  svg line[stroke="#ded8c3"] { stroke: #073642; }
  svg line[stroke="#657b83"] { stroke: #586e75; }
  svg path[fill="#eee8d5"] { fill: #073642; }
  svg path[stroke="#657b83"] { stroke: #839496; }
}