/* Shared site chrome: used by both React and server-rendered pages. */
@font-face {
  font-family: Manrope;
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("/fonts/manrope-latin-variable.woff2") format("woff2");
}

:root {
  --site-header-logo-height: 64px;
  --site-header-logo-width: 270px;
}

.home-header {
  align-items: center;
  backdrop-filter: blur(18px);
  background: linear-gradient(90deg, rgba(238, 248, 245, .96), rgba(255, 255, 255, .98) 38%, rgba(250, 252, 251, .98));
  border-bottom: 1px solid #d5e4e0;
  box-shadow: 0 9px 30px rgba(18, 67, 60, .08);
  display: flex;
  gap: 24px;
  justify-content: flex-start;
  min-height: 82px;
  padding: 9px clamp(20px, 5vw, 76px);
  position: sticky;
  top: 0;
  z-index: 50;
  font-family: Manrope, system-ui, sans-serif;
  font-synthesis: none;
  line-height: normal;
}

/* 2026 professional chrome: quieter navigation, clearer active state. */
.home-header.site-header {
  background: rgba(250, 252, 252, .97);
  border-bottom-color: #dbe5e3;
  box-shadow: 0 1px 0 rgba(17, 51, 47, .04), 0 10px 30px rgba(17, 51, 47, .05);
  gap: clamp(16px, 2vw, 30px);
  min-height: 76px;
  padding-block: 7px;
}

.home-header.site-header .home-nav {
  background: transparent;
  border: 0;
  border-radius: 0;
  gap: 4px;
  padding: 0;
}

.home-header.site-header .home-nav > a,
.home-header.site-header .site-menu--nav > summary {
  background: transparent;
  border: 0;
  border-radius: 8px;
  box-shadow: none;
  color: #344b50;
  min-height: 42px;
  position: relative;
}

.home-header.site-header .home-nav > a::after,
.home-header.site-header .site-menu--nav > summary::after {
  background: #0b766b;
  border-radius: 999px;
  bottom: 1px;
  content: "";
  height: 2px;
  left: 14px;
  opacity: 0;
  position: absolute;
  right: 14px;
  transform: scaleX(.55);
  transition: opacity 150ms ease, transform 150ms ease;
}

.home-header.site-header .home-nav > a:hover,
.home-header.site-header .site-menu--nav > summary:hover {
  background: #edf4f2;
  box-shadow: none;
  color: #0b6f65;
}

.home-header.site-header .home-nav > a.is-active,
.home-header.site-header .site-menu--nav.is-active > summary {
  background: #e8f2f0;
  box-shadow: none;
  color: #075f57;
}

.home-header.site-header .home-nav > a.is-active::after,
.home-header.site-header .site-menu--nav.is-active > summary::after {
  opacity: 1;
  transform: scaleX(1);
}

.home-header.site-header .site-menu:not(.site-menu--nav) > summary {
  border-color: #d8e3e0;
  border-radius: 9px;
  min-height: 40px;
}

.wildfire-sticky-site-top {
  flex: 0 0 auto;
  position: sticky;
  top: 0;
  width: 100%;
  z-index: 1200;
}

.wildfire-sticky-site-top > .site-header { position: relative; top: auto; }

.wildfire-evacuation-banner {
  align-items: center;
  background: #b91c1c;
  border-bottom: 1px solid #7f1d1d;
  box-sizing: border-box;
  color: #fff;
  display: flex;
  flex: 0 0 auto;
  font-family: Manrope, system-ui, sans-serif;
  font-size: .82rem;
  height: 37px;
  line-height: 1.2;
  overflow: hidden;
  padding: 0;
  position: relative;
  white-space: normal;
  width: 100%;
  z-index: 1200;
}

.wildfire-evacuation-banner__track { align-items:center; display: flex; height:100%; width: 100%; }
.wildfire-evacuation-banner__item { align-items: center; display: inline-flex; gap: 9px; height:100%; justify-content: center; min-width: 0; padding: 0 16px; width: 100%; }
.wildfire-evacuation-banner__item[aria-hidden="true"] { display: none; }
.wildfire-evacuation-banner .material-symbols-rounded { flex: 0 0 auto; font-size: 20px; }
.wildfire-evacuation-banner strong { overflow-wrap: anywhere; }
.wildfire-evacuation-banner__content { align-items: baseline; display: flex; flex-wrap: wrap; gap: 3px 12px; justify-content: center; min-width: 0; }
.wildfire-evacuation-banner__content a { align-items: center; color: inherit; display: inline-flex; flex: 0 0 auto; font-weight: 800; gap: 4px; text-decoration: underline; text-underline-offset: 2px; white-space: nowrap; }

.seo-site-header {
  margin-bottom: 68px;
  margin-left: calc(50% - 50vw);
  width: 100vw;
}

.home-brand {
  align-items: center;
  color: inherit;
  display: flex;
  flex: 0 0 auto;
  gap: 13px;
  text-decoration: none;
}

.home-brand:not(.home-brand--footer) { display: grid; gap: 3px; width: var(--site-header-logo-width); }
.home-brand__image { display: block; height: var(--site-header-logo-height); overflow: hidden; position: relative; width: var(--site-header-logo-width); }
.home-brand__tagline {
  color: #53766f;
  font-size: 7.5px;
  font-weight: 850;
  letter-spacing: .11em;
  line-height: 1;
  text-align: center;
  text-transform: uppercase;
  white-space: nowrap;
}
.home-brand:hover { text-decoration: none; }
.home-brand:hover .home-brand__tagline {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
.home-brand__image img {
  filter: drop-shadow(0 5px 11px rgba(20, 70, 63, .12));
  height: auto;
  left: 0;
  margin: 0;
  max-width: none;
  position: absolute;
  top: 0;
  transform: none;
  width: var(--site-header-logo-width);
}

.home-brand--weatherwarning .home-brand__image {
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  height: var(--site-header-logo-height);
  padding: 0;
  width: var(--site-header-logo-width);
}

.home-brand--weatherwarning .home-brand__image img {
  display: block;
  filter: none !important;
  height: auto;
  inset: auto;
  max-width: none;
  object-fit: contain;
  object-position: left center;
  position: static;
  width: var(--site-header-logo-width);
}

.home-nav, .home-actions { align-items: center; display: flex; }
.home-nav {
  background: rgba(232, 243, 240, .72);
  border: 1px solid #d9e8e4;
  border-radius: 15px;
  gap: 3px;
  padding: 4px;
}
.home-nav a {
  border-radius: 9px;
  color: #40505b;
  font-size: 14px;
  font-weight: 700;
  padding: 9px clamp(10px, 1.2vw, 17px);
  text-decoration: none;
  transition: background 150ms ease, color 150ms ease, box-shadow 150ms ease;
}
.home-nav a:hover { background: #fff; box-shadow: 0 4px 13px rgba(20, 72, 64, .08); color: #0d7366; }
.home-nav a.is-active {
  background: #fff;
  box-shadow: 0 4px 14px rgba(20, 72, 64, .1), inset 0 -2px 0 #0c796c;
  color: #087d70;
}

.home-actions { gap: 12px; margin-left: auto; }
.site-menu { position: relative; }
.site-menu summary {
  align-items: center;
  background: #fff;
  border: 1px solid #d7e1e0;
  border-radius: 12px;
  color: #334155;
  cursor: pointer;
  display: flex;
  font-size: 13px;
  font-weight: 800;
  gap: 6px;
  list-style: none;
  min-height: 44px;
  padding: 9px 13px;
  white-space: nowrap;
}
.site-menu summary::-webkit-details-marker { display: none; }
.site-menu summary:hover, .site-menu[open] summary { border-color: #8cbdb4; color: #087d70; }
.site-menu.is-active summary { background: #e8f5f2; border-color: #75b8aa; box-shadow: inset 0 -2px 0 #0c796c; color: #087d70; }
.site-menu summary .material-symbols-rounded { font-size: 18px; }
.site-menu--nav summary:hover, .site-menu--nav[open] summary {
  box-shadow: 0 4px 13px rgba(20, 72, 64, .08);
}
.site-menu--nav .site-menu__panel { left: 0; right: auto; }
.site-menu--mobile { display: none; }

.site-menu__panel {
  background: #fff;
  border: 1px solid #d8e4e1;
  border-radius: 18px;
  box-shadow: 0 18px 48px rgba(19, 52, 48, .18);
  display: grid;
  min-width: 270px;
  padding: 10px;
  position: absolute;
  right: 0;
  top: calc(100% + 10px);
  z-index: 1200;
}
.site-menu__panel a {
  align-items: center;
  border-radius: 10px;
  color: #344b50;
  display: flex;
  font-size: 13px;
  font-weight: 750;
  gap: 10px;
  padding: 11px 12px;
  text-decoration: none;
}
.site-menu__panel a:hover { background: #edf7f4; color: #087d70; }
.site-menu__panel a.is-active { background: #e1f2ee; box-shadow: inset 3px 0 0 #0c796c; color: #087d70; }
.site-menu__panel .material-symbols-rounded { color: #58847c; font-size: 19px; }
.site-menu__divider { border-top: 1px solid #e5ecea; margin: 5px 7px; }
.site-menu__compact-only { display: none !important; }
.site-language-menu__panel { min-width: 170px; }
.site-language-menu__panel a { padding-block: 9px; }
.site-theme-menu__panel { min-width: 180px; }
.site-menu__panel button[data-theme-option] {
  align-items: center;
  background: transparent;
  border: 0;
  border-radius: 10px;
  color: #344b50;
  cursor: pointer;
  display: flex;
  font: inherit;
  font-size: 13px;
  font-weight: 750;
  gap: 10px;
  padding: 11px 12px;
  text-align: left;
  width: 100%;
}
.site-menu__panel button[data-theme-option]:hover { background: #edf7f4; color: #087d70; }
.site-menu__panel button[data-theme-option].is-active { background: #e1f2ee; box-shadow: inset 3px 0 0 #0c796c; color: #087d70; }

.site-app-buttons, .site-menu__app-buttons { display: flex; gap: 7px; }
.site-app-buttons button, .site-menu__app-buttons button {
  align-items: center;
  background: #eef1f2;
  border: 1px solid #d4dadc;
  border-radius: 10px;
  color: #7b858a;
  cursor: not-allowed;
  display: flex;
  font: inherit;
  gap: 7px;
  min-height: 44px;
  opacity: .78;
  padding: 6px 9px;
  text-align: left;
}
.site-app-buttons button > .material-symbols-rounded, .site-menu__app-buttons button > .material-symbols-rounded { color: #8d969a; font-size: 21px; }
.site-app-buttons button > span:last-child, .site-menu__app-buttons button > span:last-child { display: grid; line-height: 1.05; }
.site-app-buttons strong, .site-menu__app-buttons strong { font-size: 10px; font-weight: 850; white-space: nowrap; }
.site-app-buttons small, .site-menu__app-buttons small { font-size: 8px; font-weight: 750; margin-top: 3px; text-transform: uppercase; white-space: nowrap; }
.site-menu__app-buttons { padding: 3px 5px; }
.site-menu__app-buttons button { flex: 1; }

.button {
  align-items: center;
  border: 1px solid transparent;
  border-radius: 10px;
  display: inline-flex;
  font-size: 14px;
  font-weight: 800;
  gap: 9px;
  justify-content: center;
  min-height: 46px;
  padding: 0 19px;
  text-decoration: none;
  transition: transform 150ms ease, box-shadow 150ms ease, background 150ms ease;
}
.button:hover { transform: translateY(-1px); }
.button--small { min-height: 44px; padding-inline: 17px; }
.button--dark { background: linear-gradient(135deg, #173b37, #102d2a); box-shadow: 0 7px 18px rgba(16, 45, 42, .18); color: #fff; }
.button--dark.is-active { box-shadow: 0 0 0 3px rgba(12, 121, 108, .2), 0 7px 18px rgba(16, 45, 42, .18); }
.site-support-cta {
  background: linear-gradient(135deg, #e85d3f, #cf3f35);
  box-shadow: 0 6px 16px rgba(184, 55, 44, .2);
  color: #fff;
  gap: 7px;
  white-space: nowrap;
}
.site-support-cta:hover { box-shadow: 0 8px 20px rgba(184, 55, 44, .28); color: #fff; }
.site-support-cta .material-symbols-rounded { font-size: 18px; }

:root[data-theme="dark"] .home-header { background: linear-gradient(90deg, rgba(12,33,32,.98), rgba(10,24,25,.98) 45%, rgba(13,29,29,.98)); border-bottom-color: #294340; box-shadow: 0 9px 30px rgba(0,0,0,.28); }
:root[data-theme="dark"] .home-brand__tagline { color: #9bc2ba; }
:root[data-theme="dark"] .home-brand__image img { filter: brightness(1.65) saturate(.85) drop-shadow(0 4px 10px rgba(0,0,0,.35)); }
:root[data-theme="dark"] .home-nav { background: rgba(25,55,52,.78); border-color: #31524e; }
:root[data-theme="dark"] .home-nav a, :root[data-theme="dark"] .site-menu--nav summary { color: #c4d7d3; }
:root[data-theme="dark"] .home-nav a:hover, :root[data-theme="dark"] .home-nav a.is-active, :root[data-theme="dark"] .site-menu--nav summary:hover, :root[data-theme="dark"] .site-menu--nav[open] summary, :root[data-theme="dark"] .site-menu--nav.is-active summary { background: #1b3533; color: #73d1bf; }
:root[data-theme="dark"] .site-menu summary { background: #142827; border-color: #35504d; color: #d4e2df; }
:root[data-theme="dark"] .site-menu summary:hover, :root[data-theme="dark"] .site-menu[open] summary { border-color: #5c9288; color: #72d0be; }
:root[data-theme="dark"] .site-menu__panel { background: #122524; border-color: #35504d; box-shadow: 0 18px 48px rgba(0,0,0,.42); }
:root[data-theme="dark"] .site-menu__panel a, :root[data-theme="dark"] .site-menu__panel button[data-theme-option] { color: #d0dfdc; }
:root[data-theme="dark"] .site-menu__panel a:hover, :root[data-theme="dark"] .site-menu__panel button[data-theme-option]:hover { background: #1d3936; color: #75d2c0; }
:root[data-theme="dark"] .site-menu__panel a.is-active, :root[data-theme="dark"] .site-menu__panel button[data-theme-option].is-active { background: #21413d; color: #80dbc9; }
:root[data-theme="dark"] .site-menu__divider { border-color: #304744; }
:root[data-theme="dark"] .site-app-buttons button, :root[data-theme="dark"] .site-menu__app-buttons button { background: #1b2928; border-color: #3b4a48; color: #899794; }

@media (max-width: 1500px) {
  .home-nav { display: none; }
  .site-menu--mobile { display: block; }
  .site-menu__compact-only { display: flex !important; }
}

@media (max-width: 950px) { .site-app-buttons { display: none; } }

@media (max-width: 720px) {
  :root { --site-header-logo-height: 42px; --site-header-logo-width: 176px; }
  .home-header { gap: 8px; min-height: 68px; padding: 7px 10px; }
  .seo-site-header { margin-bottom: 44px; }
  .home-brand { gap: 8px; }
  .home-brand:not(.home-brand--footer) { gap: 2px; width: var(--site-header-logo-width); }
  .home-brand__image { height: var(--site-header-logo-height); width: var(--site-header-logo-width); }
  .home-brand__image img { margin: 0; top: 0; transform: none; width: var(--site-header-logo-width); }
  .home-brand--weatherwarning .home-brand__image,
  .home-brand--weatherwarning .home-brand__image img { width: var(--site-header-logo-width); }
  .home-brand--weatherwarning .home-brand__image { height: var(--site-header-logo-height); }
  .home-brand__tagline { font-size: 6px; letter-spacing: .08em; }
  .home-actions { gap: 6px; }
  .home-actions .button, .site-app-buttons { display: none; }
  .home-actions .site-support-cta {
    display: inline-flex;
    justify-content: center;
    min-height: 42px;
    min-width: 42px;
    padding: 8px;
  }
  .site-support-cta__label { display: none; }
  .site-menu summary { font-size: 0; gap: 0; min-height: 42px; padding-inline: 10px; }
  .site-theme-menu__label { display: none; }
  .site-menu summary .material-symbols-rounded { font-size: 20px; }
  .site-menu__panel { box-sizing: border-box; max-height: calc(100dvh - 84px); max-width: calc(100vw - 20px); overflow-y: auto; overscroll-behavior: contain; right: 0; }
  .site-menu--mobile .site-menu__panel { border-radius: 14px; left: 10px; max-width: none; min-width: 0; position: fixed; right: 10px; top: 77px; width: auto; }
  .site-menu--mobile .site-menu__panel a { min-height: 24px; }
  .site-menu__app-buttons { padding: 2px; }
  .button { animation: none; transition: none; }
}

@media (max-width: 620px) {
  .wildfire-evacuation-banner { font-size: .74rem; height:32px; padding:0; white-space: nowrap; }
  .wildfire-evacuation-banner__track { animation: wildfire-evacuation-scroll 28s linear infinite; gap: 48px; width: max-content; will-change: transform; }
  .wildfire-evacuation-banner__item { justify-content: flex-start; min-width: 100vw; padding: 0 13px; width: max-content; }
  .wildfire-evacuation-banner strong { overflow-wrap: normal; }
  .wildfire-evacuation-banner__content { flex-wrap: nowrap; justify-content: flex-start; }
  .wildfire-evacuation-banner__item[aria-hidden="true"] { display: inline-flex; }
  .wildfire-evacuation-banner:hover .wildfire-evacuation-banner__track,
  .wildfire-evacuation-banner:focus-within .wildfire-evacuation-banner__track { animation-play-state: paused; }
}

@keyframes wildfire-evacuation-scroll {
  to { transform: translateX(calc(-50% - 24px)); }
}

@media (min-width: 1101px) and (max-width: 1500px) {
  .home-header.site-header .home-nav { display: flex; }
  .home-header.site-header .site-app-buttons { display: none; }
  .home-header.site-header .site-menu--mobile { display: none; }
}

@media (max-width: 620px) and (prefers-reduced-motion: reduce) {
  .wildfire-evacuation-banner { overflow-x: auto; }
  .wildfire-evacuation-banner__track { animation: none; }
  .wildfire-evacuation-banner__item { min-width: max-content; }
  .wildfire-evacuation-banner__item[aria-hidden="true"] { display: none; }
}

@font-face {
  font-family: "Material Symbols Rounded";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/fonts/material-symbols-rounded-subset.woff2") format("woff2");
}

.material-symbols-rounded {
  direction: ltr;
  display: inline-block;
  font-family: "Material Symbols Rounded";
  font-feature-settings: "liga";
  font-size: 24px;
  font-style: normal;
  font-weight: 400;
  letter-spacing: normal;
  line-height: 1;
  text-transform: none;
  white-space: nowrap;
  word-wrap: normal;
  -webkit-font-feature-settings: "liga";
  -webkit-font-smoothing: antialiased;
}