/* South Bay Family Finds — Design System v1 Foundations
   Shared production visual system. Event Card information structure remains unchanged. */

:root {
  --sbff-blue-600: #235ce8;
  --sbff-blue-700: #174ed9;
  --sbff-navy-900: #17243f;
  --sbff-coral-500: #ff7462;
  --sbff-yellow-400: #ffd760;
  --sbff-bg: #f5f7fb;
  --sbff-surface: #ffffff;
  --sbff-cream: #fffdf7;
  --sbff-mint: #eff5ef;
  --sbff-success: #37765c;
  --sbff-border: #e1e6ee;
  --sbff-muted: #65738b;
  --sbff-radius-control: 12px;
  --sbff-radius-card: 18px;
  --sbff-radius-panel: 28px;
  --sbff-shadow-1: 0 7px 20px rgba(32,62,116,.05);
  --sbff-shadow-2: 0 16px 34px rgba(32,62,116,.10);
  --sbff-shadow-3: 0 24px 52px rgba(32,84,180,.16);
}

/* Foundation */
.home-page,
.collection-page,
.legal-body {
  background: var(--sbff-bg);
  color: var(--sbff-navy-900);
  font-family: "DM Sans", "Noto Sans SC", sans-serif;
}

.home-page h1,
.home-page h2,
.home-page h3,
.collection-page h1,
.collection-page h2,
.collection-page h3,
.legal-body h1,
.legal-body h2,
.legal-body h3 {
  font-family: "DM Sans", "Noto Sans SC", sans-serif;
}

.home-page .eyebrow,
.collection-page .eyebrow,
.legal-body .eyebrow {
  color: #647899;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.7px;
}

/* Shared brand shell */
.home-page .nav,
.site-page .site-nav {
  min-height: 72px;
}

.site-page .site-nav {
  align-items: center;
  border-bottom: 1px solid var(--sbff-border);
  display: flex;
  justify-content: space-between;
}

.site-page .site-nav > div {
  align-items: center;
  display: flex;
  gap: 24px;
}

.home-page .nav-links a,
.site-page .site-nav a:not(.brand) {
  color: #5d6780;
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
}

.home-page .nav-links a:hover,
.site-page .site-nav a:not(.brand):hover,
.site-page .site-nav a[aria-current="page"] {
  color: var(--sbff-blue-600);
}

.brand .brand-name .brand-accent {
  color: var(--sbff-blue-600);
}

.home-page .saved-button {
  background: var(--sbff-surface);
  border-color: #cfd8e8;
  color: var(--sbff-navy-900);
  min-height: 42px;
}

/* Homepage — preserve current structure */
.home-page .hero {
  box-shadow: var(--sbff-shadow-3);
}

.home-page .hero-search {
  border-color: #dbe3ef;
  border-radius: var(--sbff-radius-control);
  box-shadow: 0 12px 28px rgba(26,62,124,.08);
}

.home-page .hero-search:focus-within {
  border-color: #7f9fe8;
  box-shadow: 0 0 0 4px rgba(35,92,232,.10), 0 12px 28px rgba(26,62,124,.10);
}

.home-page .hero-search button {
  background: var(--sbff-blue-600);
}

.home-page .hero-search button:hover {
  background: var(--sbff-blue-700);
}

.home-page .hero-quick-actions button {
  border-color: #d7dfed;
  border-radius: var(--sbff-radius-control);
  color: var(--sbff-navy-900);
}

.home-page .hero-quick-actions button.active {
  background: #edf3ff;
  border-color: #abc0f6;
  color: var(--sbff-blue-600);
}

.home-page .collection-home-card,
.home-page .filter-area {
  border-radius: var(--sbff-radius-panel);
}

.home-page .collection-home-heading h2,
.home-page .section-heading h2,
.home-page .how h2 {
  color: var(--sbff-navy-900);
  font-weight: 700;
}

.home-page .collection-home-heading > div > p:not(.eyebrow),
.home-page .result-count {
  color: var(--sbff-muted);
}

/* Controls / chips */
.home-page .filters {
  gap: 12px;
}

.home-page .select-wrap label {
  color: var(--sbff-muted);
}

.home-page .select-wrap select {
  background: var(--sbff-surface);
  border-color: var(--sbff-border);
  border-radius: var(--sbff-radius-control);
  min-height: 42px;
}

.home-page .chip {
  background: var(--sbff-surface);
  border-color: var(--sbff-border);
  color: #56657d;
  min-height: 40px;
}

.home-page .chip:hover {
  border-color: #bac9e4;
  color: var(--sbff-blue-600);
}

.home-page .chip.active,
.home-page .date-priority.is-active select {
  background: var(--sbff-blue-600);
  border-color: var(--sbff-blue-600);
  color: #fff;
}

.home-page .clear-filters {
  border-color: #cbd5e6;
  color: var(--sbff-blue-600);
}

/* Before-you-go */
.home-page .how-grid article {
  background: var(--sbff-surface);
  border: 1px solid var(--sbff-border);
  border-top: 3px solid var(--sbff-blue-600);
  border-radius: var(--sbff-radius-card);
  box-shadow: var(--sbff-shadow-1);
  padding: 22px;
}

.home-page .how-grid b {
  color: var(--sbff-coral-500);
}

.home-page .how-grid p {
  color: var(--sbff-muted);
}

/* Shared Event Card presentation.
   Keep the production information structure unchanged; Collection visually reuses the Homepage card. */
.collection-page .collection-event-grid .event-card {
  border-color: #e1e6ee;
  border-radius: 19px;
  box-shadow: 0 5px 0 rgba(32,62,116,.02);
}

.collection-page .collection-event-grid .event-card:hover {
  box-shadow: 0 18px 33px rgba(32,62,116,.11);
  transform: translateY(-5px);
}

.collection-page .collection-event-grid .card-image {
  height: 166px;
}

.collection-page .collection-event-grid .tag,
.collection-page .collection-event-grid .heart {
  box-shadow: 0 3px 12px rgba(32,62,116,.08);
}

.collection-page .collection-event-grid .card-content {
  padding: 17px 17px 19px;
}

.collection-page .collection-event-grid .card-content h3 {
  color: #1e2c46;
  font-family: "DM Sans", "Noto Sans SC", sans-serif;
  letter-spacing: -.35px;
}

.collection-page .collection-event-grid .card-facts {
  align-items: center;
  gap: 0;
  margin-top: 9px;
}

.collection-page .collection-event-grid .fact,
.collection-page .collection-event-grid .fact-cost,
.collection-page .collection-event-grid .fact-rating {
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  color: #65738b;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.45;
  padding: 0;
  white-space: nowrap;
}

.collection-page .collection-event-grid .fact-age {
  color: #465773;
  font-weight: 700;
}

.collection-page .collection-event-grid .fact-cost.is-free {
  color: #37765c;
  font-weight: 700;
}

.collection-page .collection-event-grid .fact + .fact::before {
  color: #b5bfce;
  content: "·";
  margin: 0 7px;
}

.collection-page .collection-event-grid .description {
  min-height: 42px;
  max-height: 42px;
}

.collection-page .collection-event-grid .description[hidden] {
  display: -webkit-box;
  visibility: hidden;
}

.collection-page .collection-event-grid .description.is-expanded {
  max-height: none;
  overflow: visible;
}

.collection-page .collection-event-grid .description-toggle {
  min-height: 19px;
}

.collection-page .collection-event-grid .description-toggle[hidden] {
  display: block;
  pointer-events: none;
  visibility: hidden;
}

.collection-page .collection-event-grid .details {
  margin-top: 13px;
}

.collection-page .collection-event-grid .source-link {
  color: #235ce8;
  margin-top: auto;
  padding-top: 18px;
}

.collection-page .collection-event-grid .source-link span {
  color: #ff7462;
}

@media (max-width: 760px) {
  .collection-page .collection-event-grid .card-image {
    height: 178px;
  }

  .collection-page .collection-event-grid .description {
    min-height: 0;
    max-height: 59px;
  }

  .collection-page .collection-event-grid .description[hidden] {
    min-height: 59px;
  }

  .collection-page .collection-event-grid .description.is-expanded {
    max-height: none;
  }

  .collection-page .collection-event-grid .source-link {
    padding-top: 18px;
  }
}

/* Collection — shared system + theme expression */
.collection-page .collection-main {
  padding-bottom: 88px;
}

.collection-page .collection-breadcrumbs {
  color: var(--sbff-muted);
}

.collection-page .collection-breadcrumbs a {
  color: var(--sbff-blue-600);
}

.collection-page .collection-hero {
  border-radius: var(--sbff-radius-panel);
  box-shadow: var(--sbff-shadow-3);
  min-height: 338px;
}

.collection-page .collection-hero h1 {
  font-weight: 700;
  letter-spacing: -2.5px;
}

.collection-page .collection-hero .eyebrow {
  color: var(--sbff-yellow-400);
}

.collection-page .collection-section {
  margin-top: 44px;
}

.collection-page .collection-section-heading {
  margin-bottom: 17px;
}

.collection-page .collection-section-heading .eyebrow {
  color: #647899;
  margin-bottom: 7px;
}

.collection-page .collection-section-heading h2 {
  color: var(--sbff-navy-900);
  font-weight: 700;
  letter-spacing: -1.2px;
}

.collection-page .collection-section-heading p {
  color: var(--sbff-muted);
}

.collection-page .collection-event-grid {
  gap: 20px;
}

.collection-page .festival-about {
  background: var(--sbff-surface);
  border: 1px solid var(--sbff-border);
  border-radius: var(--sbff-radius-panel);
  box-shadow: var(--sbff-shadow-1);
  overflow: hidden;
}

.collection-page .festival-about-copy h2 {
  color: var(--sbff-navy-900);
}

.collection-page .festival-about-kicker {
  color: var(--sbff-blue-600);
}

.collection-page .festival-about-copy a {
  color: var(--sbff-blue-600);
  font-weight: 800;
}

/* Quiet Brand Mode — About / Privacy / Terms */
.legal-body main {
  min-height: calc(100vh - 150px);
}

.legal-body .privacy-page.legal-page {
  background: var(--sbff-surface);
  border: 1px solid var(--sbff-border);
  border-radius: var(--sbff-radius-panel);
  box-shadow: var(--sbff-shadow-1);
  margin-bottom: 72px;
  margin-top: 28px;
  max-width: 820px;
  padding: 0 54px 56px;
}

.legal-body .legal-heading {
  background: linear-gradient(135deg, #f7faff 0%, #eef4ff 100%);
  border-bottom: 1px solid #e0e8f5;
  border-radius: var(--sbff-radius-panel) var(--sbff-radius-panel) 0 0;
  margin: 0 -54px 38px;
  padding: 50px 54px 42px;
}

.legal-body .legal-heading h1 {
  color: var(--sbff-navy-900);
  font-size: 44px;
  letter-spacing: -1.8px;
  line-height: 1.08;
  margin: 0 0 15px;
}

.legal-body .legal-heading > p:not(.eyebrow) {
  color: var(--sbff-muted);
  font-size: 16px;
  line-height: 1.7;
  margin: 0;
  max-width: 680px;
}

.legal-body .legal-page > h2 {
  border-top: 1px solid #eef1f6;
  color: var(--sbff-navy-900);
  font-size: 20px;
  letter-spacing: -.35px;
  margin: 32px 0 8px;
  padding-top: 28px;
}

.legal-body .legal-page > h2:first-of-type {
  border-top: 0;
  margin-top: 0;
  padding-top: 0;
}

.legal-body .legal-page > p {
  color: #5d6a80;
  font-size: 15px;
  line-height: 1.78;
}

.legal-body .legal-page a {
  color: var(--sbff-blue-600);
  text-decoration-color: #a9bef1;
  text-underline-offset: 3px;
}

.legal-body .legal-page > .legal-links {
  align-items: center;
  border-top: 1px solid #eef1f6;
  display: flex;
  flex-wrap: wrap;
  gap: 10px 18px;
  margin-top: 34px;
  padding-top: 24px;
}

.legal-body .legal-page > .legal-links a {
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
}

.legal-body .privacy-actions {
  gap: 10px;
}

.legal-body .privacy-actions button {
  border-radius: var(--sbff-radius-control);
  min-height: 44px;
  padding: 0 16px;
}

.legal-body .privacy-allow {
  background: var(--sbff-blue-600);
}

.legal-body .privacy-decline {
  background: #eef3fb;
  color: var(--sbff-navy-900);
}

.legal-body .privacy-status {
  color: var(--sbff-success);
}

/* Shared footer */
.home-page footer,
.collection-page footer,
.legal-body footer {
  background: var(--sbff-navy-900);
}

.home-page footer .brand,
.collection-page footer .brand,
.legal-body footer .brand {
  color: #fff;
}

.home-page footer .brand .brand-accent,
.collection-page footer .brand .brand-accent,
.legal-body footer .brand .brand-accent {
  color: #8fb2ff;
}

.home-page footer p,
.collection-page footer p,
.legal-body footer p,
.home-page footer .privacy-link,
.collection-page footer .privacy-link,
.legal-body footer .privacy-link {
  color: #b7c4dd;
}

.legal-body footer .legal-links {
  border: 0;
  display: flex;
  flex-direction: row;
  gap: 14px;
  margin: 0;
  padding: 0;
}

@media (max-width: 760px) {
  .site-page .site-nav,
  .home-page .nav {
    min-height: 64px;
  }

  .site-page .site-nav > div {
    gap: 14px;
  }

  .site-page .site-nav a:not(.brand) {
    font-size: 12px;
  }

  .home-page .hero {
    box-shadow: 0 12px 32px rgba(32,84,180,.12);
  }

  .home-page .how-grid article {
    padding: 20px;
  }

  .collection-page .collection-main {
    padding-bottom: 64px;
  }

  .collection-page .collection-hero {
    border-radius: 24px;
    min-height: 300px;
  }

  .legal-body .privacy-page.legal-page {
    border-radius: 22px;
    margin-bottom: 56px;
    margin-top: 20px;
    padding: 0 22px 38px;
  }

  .legal-body .legal-heading {
    border-radius: 22px 22px 0 0;
    margin: 0 -22px 30px;
    padding: 36px 22px 31px;
  }

  .legal-body .legal-heading h1 {
    font-size: 36px;
    letter-spacing: -1.25px;
  }

  .legal-body .legal-heading > p:not(.eyebrow) {
    font-size: 15px;
  }

  .legal-body .legal-page > .legal-links {
    align-items: flex-start;
    flex-direction: column;
    gap: 12px;
  }

  .legal-body .privacy-actions {
    display: grid;
    grid-template-columns: 1fr;
  }
}


/* Mobile Activities toolbar: reuse the live result count beside Filter. */
@media (max-width: 760px) {
  .home-page .filter-area {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    column-gap: 12px;
    align-items: center;
  }

  .home-page .section-heading {
    display: contents;
  }

  .home-page .section-heading > div {
    display: none;
  }

  .home-page .result-count {
    align-items: center;
    align-self: center;
    background: transparent;
    color: var(--sbff-muted);
    display: inline-flex;
    font-size: 13px;
    font-weight: 700;
    justify-self: start;
    margin: 0 0 16px;
    padding: 0;
    white-space: nowrap;
  }

  .home-page .mobile-quick-filters {
    grid-column: 2;
    justify-self: end;
    margin: 0 0 16px;
  }

  .home-page .filter-area > .filters,
  .home-page .filter-area > .location-status,
  .home-page .filter-area > .cards,
  .home-page .filter-area > .empty {
    grid-column: 1 / -1;
  }

  .home-page .mobile-quick-filters.is-deep-browsing {
    grid-column: auto;
  }
}