/* Siska Skywarn News: colors from Daniel's supplied banner. */
:root {
  --navy: #071747;
  --ink: #101e43;
  --blue: #0754b0;
  --muted: #4d5f7b;
  --paper: #f5f8ff;
  --line: #d8e2f3;
  --brand-gold: #ffc533;
  --brand-red: #ba2019;
  --green: #0754b0;
  --cream: #fff;
  --orange: #ffc533;
  --drop-ink: #101e43;
  --drop-cream: #fff;
  --drop-rust: #0754b0;
  --drop-line: #d8e2f3;
}

body { background: #fff; color: var(--ink); }
h1, h2, h3 { color: inherit; }
.eyebrow { color: #114e99; }

.masthead {
  position: relative;
  overflow: hidden;
  background: radial-gradient(ellipse at 35% 12%, #165eb4 0, transparent 58%), linear-gradient(115deg, #092e71, #040d36 88%) !important;
  color: #fff !important;
  border: 0;
}
.masthead::after {
  content: '';
  position: absolute;
  inset: auto 0 0;
  height: 4px;
  background: linear-gradient(90deg, #a30b10 0%, #e62d12 40%, #ffc533 76%, #ffdb72 100%);
}
.masthead .wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 13px;
  padding: 22px 0 20px;
  border: 0;
}
.masthead .refreshed-brand.ssn-banner-brand {
  display: block;
  width: min(940px, 100%);
  max-width: 100%;
  height: auto;
  margin: 0;
  padding: 0;
  flex: none;
  background: transparent;
}
.ssn-logo-window {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 1447 / 400;
  overflow: hidden;
}
.masthead .ssn-banner-brand .site-wordmark {
  position: absolute;
  inset: auto 0 0;
  display: block;
  width: 100% !important;
  height: auto !important;
  max-width: none !important;
  max-height: none !important;
  margin: 0;
  padding: 0;
  object-fit: initial;
  transform: none !important;
}
.masthead .tagline {
  display: block;
  width: auto;
  max-width: none;
  margin: 0;
  text-align: center;
  font-size: 13px;
  line-height: 1.5;
  letter-spacing: .025em;
  color: #e4ecff !important;
}
.masthead .tagline br { display: none; }
.masthead .tagline strong { margin-left: .5em; color: #fff; }

.drop-announcement { background: #071747; color: #fff; }
.local-navigation {
  position: relative;
  width: 100%;
  max-width: none;
  padding-inline: max(16px, calc((100% - 1160px) / 2));
  background: #071747;
  border-top: 0;
  border-bottom: 1px solid #203a73;
}
.local-navigation .nav { border: 0; background: transparent; }
.local-navigation .nav > a,
.local-navigation .nav > a.merch-nav-link,
.local-navigation .site-more > summary,
.local-navigation .city-menu > summary { color: #fff !important; }
.local-navigation .nav > a:hover,
.local-navigation .nav > a.merch-nav-link:hover,
.local-navigation .site-more > summary:hover,
.local-navigation .city-menu > summary:hover { color: #ffcf4b !important; }
.local-navigation .nav > a[aria-current=page],
.local-navigation .nav > a.merch-nav-link[aria-current=page] { color: #fff !important; background: transparent !important; box-shadow: inset 0 -3px #ffc533; }
.hamburger-icon i { background: #fff; }
.nav-drop-badge { background: #ffc533; color: #071747; }
.local-navigation .more-menu,
.local-navigation .city-dropdown { border-top-color: #ffc533; color: #101e43; background: #fff; }
.local-navigation .more-menu { left: max(16px, calc((100% - 1160px) / 2)); }
.local-navigation .more-menu a,
.local-navigation .city-dropdown a { color: #102656; }
.local-navigation .more-menu a:hover,
.local-navigation .city-dropdown a:hover { color: #06499c; background: #edf3ff; }
.local-utility-links { border-bottom-color: #d8e2f3; }
.local-utility-links a { color: #34527e; }
.local-utility-links a:hover { color: #0754b0; text-decoration: underline; }

.local-home .resident-weather,
.local-home .resident-day-plan,
.local-home .drop-news-route,
.local-home .resident-shortcuts,
.local-home .home-work,
.home-guide-promo { border-top-color: #0754b0; }
.local-home .today-answer,
.home-guide-promo { background: #f0f5ff; }
.local-home .today-quick-routes a { border-top-color: #0754b0; }
.shop-button,
.merch-button,
.resident-town-picker button { background: #0754b0; border-color: #0754b0; color: #fff; }
.shop-button:hover,
.merch-button:hover,
.resident-town-picker button:hover { background: #063d84; border-color: #063d84; color: #fff; }
.shop-section-heading,
.shop-help,
.guide-outline { border-color: #d8e2f3; }
button:focus-visible, a:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible { outline-color: #1766c8; }
.local-navigation a:focus-visible,
.local-navigation summary:focus-visible,
.masthead a:focus-visible { outline-color: #ffc533; }

@media (max-width: 700px) {
  .masthead .wrap { gap: 10px; padding: 18px 0 17px; }
  .masthead .refreshed-brand.ssn-banner-brand { width: 100%; max-width: 100%; height: auto; }
  .masthead .tagline { font-size: 11px; letter-spacing: 0; }
  .masthead .tagline br { display: block; }
  .masthead .tagline strong { margin-left: 0; }
  .local-navigation { padding-inline: 14px; }
  .local-navigation .more-menu { left: 0; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}
