/* A light palette for the neighborhood hub, with the site's existing shapes and type. */
body.neighborhood-insights-page {
  --bg: #f9f9f7;
  --text: #121316;
  --muted: #4f554f;
  background: var(--bg);
  color-scheme: light;
}

.neighborhood-insights-page .footer,
.neighborhood-insights-page .divider-wrapper {
  background: var(--bg);
}

.neighborhood-insights-page #neighborhoods {
  padding: 0 0 clamp(40px, 6vw, 72px);
}

.neighborhood-insights-page #neighborhoods,
.neighborhood-insights-page #neighborhood-quiz {
  background: #ffffff;
}

.neighborhood-insights-page #neighborhoods h2,
.neighborhood-insights-page #neighborhoods .neighborhoods-group {
  padding: 0;
  background: none;
  color: #ffffff;
  text-shadow: none;
}

.neighborhood-insights-page #neighborhoods > .wrap {
  display: grid;
  gap: 32px;
  width: calc(100% - 2 * var(--gutter));
  margin-inline: auto;
  padding: 0;
}

.neighborhood-insights-page .neighborhood-panel {
  min-width: 0;
  padding: 40px clamp(24px, 4.5vw, 56px);
  border-radius: 10px;
  background: #24343e;
}

.neighborhood-insights-page #neighborhoods :is(#seattle-neighborhoods, #eastside-neighborhoods, #san-juan-neighborhoods) {
  margin-top: 0;
  font-size: clamp(2rem, 3vw, 2.75rem);
  text-transform: none;
}

.neighborhood-insights-page #neighborhoods .neighborhood-panel > h2 {
  margin-bottom: 30px;
}

.neighborhood-insights-page .header,
.neighborhood-insights-page .header.is-scrolled {
  background: #ffffff;
  color-scheme: light;
}

.neighborhood-insights-page .neighborhood-hero {
  background: #ffffff;
  color: var(--text);
  color-scheme: light;
}

body.neighborhood-insights-page .header.header--inverse .brand,
body.neighborhood-insights-page .header.header--inverse .brand-name,
body.neighborhood-insights-page .header.header--inverse .nav a,
body.neighborhood-insights-page .header.header--inverse .nav a:hover {
  color: var(--text);
}

body.neighborhood-insights-page .header.header--inverse .nav a:hover {
  border-bottom-color: #2a6a63 !important;
}

body.neighborhood-insights-page .header.header--inverse .brand-divider {
  background: rgba(18, 19, 22, .35);
}

body.neighborhood-insights-page .header.header--inverse .brand-mark.mark-blue {
  display: block;
}

body.neighborhood-insights-page .header.header--inverse .brand-mark.mark-white {
  display: none;
}

.neighborhood-insights-page .neighborhood-hero .kicker {
  color: var(--muted);
}

.neighborhood-search {
  position: relative;
  width: min(100%, 560px);
  margin-top: clamp(18px, 3vw, 26px);
}

.neighborhood-search input {
  width: 100%;
  min-height: 52px;
  padding: 13px 48px 13px 46px;
  border: 1px solid #d5dad3;
  border-radius: 10px;
  background: #ffffff;
  color: var(--text);
  font: inherit;
  font-size: 1rem;
  box-shadow: 0 5px 16px rgba(15, 23, 42, .06);
  transition: border-color .2s ease, box-shadow .2s ease;
  appearance: none;
  -webkit-appearance: none;
}

.neighborhood-search input::placeholder {
  color: var(--muted);
}

.neighborhood-search input:focus {
  border-color: #2a6a63;
  outline: none;
  box-shadow: 0 0 0 3px rgba(42, 106, 99, .14), 0 5px 16px rgba(15, 23, 42, .06);
}

.neighborhood-search input::-webkit-search-cancel-button {
  display: none;
}

.neighborhood-search-icon {
  position: absolute;
  top: 50%;
  left: 16px;
  width: 20px;
  height: 20px;
  transform: translateY(-50%);
  fill: none;
  stroke: #2a6a63;
  stroke-linecap: round;
  stroke-width: 1.8;
  pointer-events: none;
}

.neighborhood-search-clear {
  position: absolute;
  top: 50%;
  right: 8px;
  width: 36px;
  height: 36px;
  padding: 0;
  transform: translateY(-50%);
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-size: 1.45rem;
  line-height: 1;
  cursor: pointer;
}

.neighborhood-search-clear:hover,
.neighborhood-search-clear:focus-visible {
  background: rgba(42, 106, 99, .09);
  color: #2a6a63;
  outline: none;
}

.neighborhood-search-status {
  min-height: 1.4em;
  margin: 8px 0 0;
  color: var(--muted);
  font-size: .9rem;
}

/* Editorial carousel rows; keep all cards reachable by touch, keyboard, and arrows. */
.neighborhood-insights-page .neighborhood-row {
  min-width: 0;
}

.neighborhood-insights-page .neighborhood-row + .neighborhood-row {
  margin-top: 32px;
}

.neighborhood-insights-page .neighborhood-row__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 40px;
  margin-bottom: 12px;
}

.neighborhood-insights-page .neighborhood-row__header--section {
  margin-bottom: 26px;
}

.neighborhood-insights-page #neighborhoods .neighborhood-row__header > h2,
.neighborhood-insights-page #neighborhoods .neighborhood-row__header > h3 {
  min-width: 0;
  margin: 0;
}

.neighborhood-insights-page #neighborhoods .neighborhoods-group {
  font-family: var(--font);
  font-size: .85rem;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: .2em;
  text-transform: uppercase;
}

.neighborhood-insights-page .neighborhood-row__viewport {
  min-width: 0;
}

.neighborhood-insights-page #neighborhoods .cards {
  --card-gap: 24px;
  display: grid;
  grid-template-columns: none;
  grid-auto-flow: column;
  grid-auto-columns: calc((100% - 2 * var(--card-gap)) / 3);
  align-items: stretch;
  gap: var(--card-gap);
  margin: 0;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: 0;
  scrollbar-width: none;
  padding: 4px 0;
}

.neighborhood-insights-page #neighborhoods .cards::-webkit-scrollbar {
  display: none;
}

.neighborhood-insights-page #neighborhoods .card {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 8px;
  min-width: 0;
  min-height: 120px;
  padding: clamp(15px, 1.4vw, 20px) 20px;
  border: 1px solid rgba(31, 41, 55, .06);
  border-radius: 10px;
  background: #ffffff;
  box-shadow: 0 2px 4px rgba(0, 0, 0, .05);
  scroll-snap-align: start;
  transition: transform .2s ease, box-shadow .2s ease;
}

.neighborhood-insights-page #neighborhoods .card:hover {
  transform: translateY(-3px);
  background: #ffffff;
  border-color: rgba(31, 41, 55, .12);
  box-shadow: 0 5px 10px rgba(0, 0, 0, .1);
}

.neighborhood-insights-page #neighborhoods .card h3,
.neighborhood-insights-page #neighborhoods .card:hover h3 {
  align-self: stretch;
  margin: 0;
  padding: 0;
  border: 0;
  color: #1f2937;
  font-size: 1.1rem;
  font-weight: 700;
  line-height: 1.3;
  overflow-wrap: anywhere;
}

.neighborhood-insights-page #neighborhoods .card p {
  margin: 0;
  color: #626b74;
  font-size: .9rem;
  line-height: 1.55;
  overflow-wrap: anywhere;
}

.neighborhood-insights-page .neighborhood-row__controls {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 10px;
}

.neighborhood-insights-page .neighborhood-row__arrow {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 50%;
  background: rgba(255, 255, 255, .08);
  color: #ffffff;
  cursor: pointer;
  transition: background .2s ease, border-color .2s ease, opacity .2s ease;
}

.neighborhood-insights-page .neighborhood-row__arrow:hover:not(:disabled) {
  background: rgba(255, 255, 255, .16);
  border-color: rgba(255, 255, 255, .3);
}

.neighborhood-insights-page .neighborhood-row__arrow:disabled {
  opacity: .4;
  cursor: default;
}

.neighborhood-insights-page .neighborhood-row__arrow svg {
  width: 20px;
  height: 20px;
}

.neighborhood-insights-page #neighborhoods .cards:focus-visible,
.neighborhood-insights-page .neighborhood-row__arrow:focus-visible {
  outline: 2px solid #ffffff;
  outline-offset: 3px;
}

.neighborhood-insights-page #neighborhoods .card:focus-visible {
  outline: 2px solid #2a6a63;
  outline-offset: -4px;
}

.neighborhood-insights-page #neighborhood-quiz .quiz-inline-toggle {
  color: var(--text);
}

@media (max-width: 980px) {
  .neighborhood-insights-page #neighborhoods .cards {
    --card-gap: 20px;
    grid-auto-columns: calc((100% - var(--card-gap)) / 2);
  }
}

@media (max-width: 600px) {
  .neighborhood-insights-page #neighborhoods > .wrap {
    width: calc(100% - 32px);
  }

  .neighborhood-insights-page #neighborhoods .cards {
    --card-gap: 16px;
    grid-auto-columns: 100%;
  }

  .neighborhood-insights-page #neighborhoods .neighborhoods-group {
    font-size: .78rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .neighborhood-insights-page #neighborhoods .card,
  .neighborhood-insights-page .neighborhood-row__arrow {
    transition: none;
  }

  .neighborhood-insights-page #neighborhoods .card:hover {
    transform: none;
  }
}

.neighborhood-insights-page #neighborhoods [hidden] {
  display: none;
}

.neighborhood-insights-page #neighborhood-quiz .quiz-inline-toggle:hover,
.neighborhood-insights-page #neighborhood-quiz .quiz-inline-toggle:focus-visible {
  color: #2a6a63;
}

body.neighborhood-insights-page .divider-wrapper path:first-child,
body.neighborhood-insights-page .divider-wrapper path:last-child {
  fill: var(--bg) !important;
}

.neighborhood-insights-page .footer-heading,
.neighborhood-insights-page .footer-brand h3 {
  color: var(--muted);
}

.neighborhood-insights-page .footer,
.neighborhood-insights-page .footer a,
.neighborhood-insights-page .footer-column h4 {
  color: var(--text);
}

.neighborhood-insights-page .footer-copy {
  color: var(--muted);
}

.neighborhood-insights-page .footer a:hover {
  color: #2a6a63;
  border-bottom-color: #2a6a63;
}

/* Keep the existing light questionnaire dialog and its controls readable. */
.neighborhood-insights-page #quiz-modal {
  --text: #121316;
  --muted: #3f444d;
  color: var(--text);
  color-scheme: light;
}

@media (max-width: 980px) {
  body.neighborhood-insights-page .header .nav {
    background: #ffffff !important;
    border-bottom-color: rgba(18, 19, 22, .15) !important;
  }

  body.neighborhood-insights-page .header .menu-toggle::before {
    filter: none;
  }
}