/* Pages written for this site rather than captured from the old one: the
   Bayfest pages and the consultation booking. Colors come from the old
   site's own theme variables, so they match everything around them. */

.vx-page { padding: 8rem 1rem 4rem; max-width: 64rem; margin: 0 auto; width: 100%; }
.vx-page h1 { font-size: clamp(2rem, 5vw, 3rem); font-weight: 700; line-height: 1.1; margin: 1rem 0; color: hsl(var(--foreground)); }
.vx-page p { color: hsl(var(--muted-foreground)); line-height: 1.6; }
.vx-hero { text-align: center; margin-bottom: 2.5rem; }
.vx-hero p { font-size: 1.125rem; max-width: 36rem; margin: 0 auto; }
.vx-hero-small { margin-bottom: 2rem; }
.vx-badge { display: inline-block; padding: .35rem .9rem; border-radius: 999px; font-size: .75rem; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase; color: hsl(var(--primary)); background: hsl(var(--primary) / .12);
  border: 1px solid hsl(var(--primary) / .3); }

.vx-photos { display: grid; grid-template-columns: repeat(2, 1fr); gap: .75rem; margin-top: 2.5rem; margin-bottom: 2.5rem; }
.vx-photo { aspect-ratio: 4 / 3; width: 100%; height: auto; border-radius: 1rem; object-fit: cover; display: block;
  border: 1px solid hsl(var(--border)); background: hsl(var(--card)); }

/* The event's own logo as the page title. */
.vx-event-logo { display: block; width: min(26rem, 85%); height: auto; margin: 0 auto .5rem; }

/* ── Event landing pages (functions/[[path]].js, set up in Omnitrak) ─────── */
.vx-hero-landing { margin-bottom: 1.5rem; }
.vx-hero-landing .vx-unlocked { color: hsl(var(--primary)); font-size: 1.15rem; font-weight: 700; line-height: 1.4;
  max-width: 34rem; margin: .75rem auto 0; }
.vx-hero-landing .vx-valid { color: #fff; font-size: .95rem; margin-top: .4rem; }
/* Two cards side by side at every width, phones included, and the Hometown
   Hero card across both underneath. The two cards share a row, so the grid
   stretches the shorter one to the taller one's height: always the same
   length. minmax(0, 1fr) and min-width: 0 hold each to half the row. */
.vx-offers { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem; margin-bottom: 2rem; }
.vx-offer { min-width: 0; display: flex; flex-direction: column; gap: .6rem; padding: .9rem .8rem;
  border-radius: 1rem; background: hsl(var(--card)); border: 1px solid hsl(var(--primary) / .45);
  color: inherit; text-decoration: none; transition: border-color .15s, transform .15s; }
/* The Solar and Referral cards are links: Solar books a consultation,
   Referral opens the referral form. */
a.vx-offer:hover, a.vx-offer:focus-visible { border-color: hsl(var(--primary)); transform: translateY(-1px); }
.vx-offer h2 { display: flex; align-items: center; justify-content: center; gap: .45rem; text-align: center;
  font-size: 1.05rem; font-weight: 800; line-height: 1.2; color: hsl(var(--primary)); margin: 0; }
/* The palm-tree badge from the Mission Bayfest logo, as a round stamp. */
.vx-stamp { flex: none; width: 2.1rem; height: 2.1rem; border-radius: 50%; }
.vx-page .vx-offer-line { display: flex; gap: .45rem; align-items: flex-start; margin: 0;
  font-size: .8rem; line-height: 1.4; color: hsl(var(--foreground)); }
.vx-offer-icon { flex: none; display: flex; color: hsl(var(--primary)); margin-top: .05rem; }
.vx-offer-hero { grid-column: 1 / -1; }
.vx-offer-hero .vx-flag { flex: none; width: 2.1rem; height: auto; border-radius: 2px; }
.vx-offer-hero-lines { display: grid; gap: .6rem; }
@media (min-width: 640px) {
  .vx-offers { gap: .9rem; }
  .vx-offer { padding: 1.25rem; }
  .vx-offer h2 { font-size: 1.3rem; }
  .vx-stamp { width: 2.6rem; height: 2.6rem; }
  .vx-page .vx-offer-line { font-size: .95rem; }
  .vx-offer-hero-lines { grid-template-columns: 1fr 1fr; gap: 1.25rem; }
}
/* Buy Merch and We're Hiring!: title-only cards, centered in the outline. */
.vx-offer-short { justify-content: center; }
/* The ended page's referral card: the standard bonus under its title. */
.vx-page .vx-offer-line-center { justify-content: center; text-align: center; }
/* Cash App's logo is a square app icon, so it keeps an app icon's corners
   rather than the palm stamp's circle. */
.vx-stamp-square { border-radius: 22%; }
/* The landing page ends at its photos: the photos sit one card-gap below the
   cards, and the page stops just under them instead of leaving a tall empty
   band above the footer. */
.vx-page-landing { padding-bottom: 1.5rem; }
.vx-page-landing .vx-offers { margin-bottom: 0; }
.vx-page-landing .vx-photos { margin: .6rem 0 0; gap: .6rem; }
@media (min-width: 640px) { .vx-page-landing .vx-photos { margin-top: .9rem; gap: .9rem; } }

/* ── Flyer and RSVP form (an event page set up for RSVPs, e.g. Beach Day) ── */
.vx-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.vx-flyer { margin: 0 auto 1.5rem; max-width: 34rem; }
.vx-flyer img { display: block; width: 100%; height: auto; border-radius: 1rem; border: 1px solid hsl(var(--border)); }
.vx-rsvp { max-width: 34rem; margin: 0 auto 2rem; padding: 1.25rem; border-radius: 1rem;
  background: hsl(var(--card)); border: 1px solid hsl(var(--primary) / .45); }
.vx-rsvp h2 { font-size: 1.5rem; font-weight: 800; color: hsl(var(--primary)); text-align: center; margin: 0; }
.vx-page .vx-rsvp-by { text-align: center; color: hsl(var(--foreground)); font-size: .95rem; margin: .25rem 0 .75rem; }
.vx-page .vx-rsvp-closed, .vx-page .vx-rsvp-done { text-align: center; color: hsl(var(--foreground)); font-size: 1.05rem;
  margin: .75rem 0 0; }
.vx-page .vx-rsvp-done { color: hsl(var(--primary)); font-weight: 700; font-size: 1.15rem; }
.vx-rsvp-form .vx-button { width: 100%; font-size: 1.05rem; }
/* The +1: one tap, and the single person becomes two. */
.vx-hero-form .vx-plusone { display: flex; align-items: center; gap: .6rem; padding: .65rem .8rem; border-radius: .75rem;
  border: 1px solid hsl(var(--border)); background: hsl(var(--background)); cursor: pointer; font-weight: 500;
  user-select: none; transition: border-color .15s, background .15s; }
.vx-hero-form .vx-plusone input { position: absolute; opacity: 0; width: 1px; height: 1px; padding: 0; border: 0; }
.vx-plusone-icon { display: flex; color: hsl(var(--muted-foreground)); }
.vx-plusone-icon svg { width: 1.6rem; height: 1.6rem; }
.vx-plusone-on { display: none; }
.vx-plusone:has(input:checked) { border-color: hsl(var(--primary)); background: hsl(var(--primary) / .12); }
.vx-plusone:has(input:checked) .vx-plusone-off { display: none; }
.vx-plusone:has(input:checked) .vx-plusone-on { display: flex; color: hsl(var(--primary)); }
.vx-plusone:has(input:focus-visible) { outline: 2px solid hsl(var(--ring)); outline-offset: 2px; }
.vx-plusone-text b { color: hsl(var(--primary)); margin-right: .25rem; }

/* ── "Let's connect" card ─────────────────────────────────────────────────── */
.vx-page .vx-connect-sub { text-align: center; color: hsl(var(--foreground)); font-size: .95rem; margin: .25rem 0 .9rem; }
/* Big tap targets: people fill this in standing up at an event. */
.vx-connect-form input:not([type=checkbox]) { min-height: 3rem; font-size: 1rem; }
/* "I'm interested in…": quiet chips, optional. */
.vx-chips { border: 0; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: .4rem; }
.vx-chips legend { font-size: .8rem; font-weight: 500; color: hsl(var(--muted-foreground)); margin-bottom: .45rem; padding: 0; }
.vx-chips legend span { opacity: .7; }
.vx-hero-form .vx-chip { display: inline-flex; gap: 0; font-size: .8rem; font-weight: 500; cursor: pointer; }
.vx-hero-form .vx-chip input { position: absolute; opacity: 0; width: 1px; height: 1px; padding: 0; border: 0; }
.vx-chip span { padding: .35rem .7rem; border-radius: 999px; border: 1px solid hsl(var(--border));
  color: hsl(var(--muted-foreground)); transition: border-color .15s, color .15s, background .15s; }
.vx-chip:has(input:checked) span { border-color: hsl(var(--primary)); color: hsl(var(--primary)); background: hsl(var(--primary) / .1); }
.vx-chip:has(input:focus-visible) span { outline: 2px solid hsl(var(--ring)); outline-offset: 2px; }
.vx-page .vx-connect-next { font-size: .9rem; font-weight: 500; color: hsl(var(--foreground)); margin-top: .5rem; }
.vx-connect-next a, .vx-legal-line a, .vx-consent a { color: hsl(var(--primary)); text-decoration: underline; }

/* The optional texting box and the line under every submit button. */
.vx-hero-form .vx-consent { display: flex; gap: .6rem; align-items: flex-start; font-size: .72rem; font-weight: 400;
  line-height: 1.45; color: hsl(var(--muted-foreground)); cursor: pointer; }
.vx-hero-form .vx-consent input { width: 1.1rem; height: 1.1rem; flex: none; margin-top: .1rem; padding: 0; accent-color: hsl(var(--primary)); }
.vx-page .vx-legal-line { font-size: .75rem; text-align: center; margin: 0; }

/* ── Privacy Policy and Terms ─────────────────────────────────────────────── */
.vx-legal { max-width: 48rem; }
.vx-legal h2 { font-size: 1.2rem; font-weight: 700; color: hsl(var(--foreground)); margin: 2rem 0 .5rem; }
.vx-legal p, .vx-legal li { font-size: .95rem; margin-bottom: .75rem; }
.vx-legal ul { list-style: disc; padding-left: 1.25rem; color: hsl(var(--muted-foreground)); }
.vx-legal a { color: hsl(var(--primary)); text-decoration: underline; }

.vx-cards { display: grid; gap: 1rem; }
.vx-card { padding: 1.5rem; border-radius: 1rem; background: hsl(var(--card)); border: 1px solid hsl(var(--border)); }
.vx-card h2, .vx-fine h2, .vx-h2 { font-size: 1.35rem; font-weight: 700; margin-bottom: .5rem; color: hsl(var(--foreground)); }
.vx-card p { margin-bottom: 1rem; }
.vx-fine { margin-top: 2rem; }
.vx-fine ul { list-style: disc; padding-left: 1.25rem; color: hsl(var(--muted-foreground)); font-size: .9rem; line-height: 1.6; }
.vx-fine li { margin-bottom: .4rem; }
.vx-back { margin-top: 2rem; }
.vx-back a { color: hsl(var(--primary)); font-weight: 600; }

.vx-button { display: inline-flex; align-items: center; justify-content: center; min-height: 2.75rem; padding: .6rem 1.25rem;
  border-radius: 999px; font-weight: 700; letter-spacing: .04em; background: hsl(var(--primary));
  color: hsl(var(--primary-foreground)); border: 0; cursor: pointer; text-decoration: none; }
.vx-button:hover { filter: brightness(1.05); }
.vx-button:disabled { opacity: .6; cursor: default; }
.vx-button-quiet { background: transparent; color: hsl(var(--foreground)); border: 1px solid hsl(var(--border)); }

.vx-booking { width: 100%; }
.vx-hero-step { padding: 1.5rem; border-radius: 1rem; background: hsl(var(--card)); border: 1px solid hsl(var(--border)); margin: 0 1rem 1rem; }
.vx-hero-q { margin-bottom: 1rem; color: hsl(var(--foreground)); }
.vx-row { display: flex; flex-wrap: wrap; gap: .75rem; }
.vx-bonus-later { margin-top: .9rem; }
.vx-linkbutton { background: none; border: 0; padding: 0; color: hsl(var(--muted-foreground)); text-decoration: underline; cursor: pointer; font: inherit; font-size: .875rem; }
.vx-hero-form { display: grid; gap: .9rem; margin-top: .5rem; }
.vx-hero-form label { display: grid; gap: .35rem; font-size: .875rem; font-weight: 600; color: hsl(var(--foreground)); }
.vx-hero-form input, .vx-hero-form select { width: 100%; padding: .55rem .8rem; border-radius: .5rem; font-weight: 400;
  background: hsl(var(--background)); color: hsl(var(--foreground)); border: 1px solid hsl(var(--border)); }
.vx-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: .9rem; }
.vx-status { font-size: .875rem; min-height: 1.25rem; }
.vx-ok { color: hsl(var(--primary)); }
.vx-err { color: #ef4444; }
.vx-cal-inline { width: 100%; min-height: 820px; overflow: hidden; }
.vx-cal-fallback { font-size: .85rem; text-align: center; padding: .75rem 1rem; }
.vx-cal-fallback a { color: hsl(var(--primary)); text-decoration: underline; }

/* A layout rule above must never beat the hidden attribute the script uses
   to show one step at a time. */
.vx-page [hidden], .vx-booking [hidden] { display: none !important; }

/* The brand gold, one value everywhere: #EEA837. The captured theme used
   43 74% 49% (#D9A520) for buttons, accents and focus rings; these
   variables recolor all of them at once, in both of its color schemes. */
:root, .light {
  --primary: 37 84% 57%;
  --accent: 37 84% 57%;
  --ring: 37 84% 57%;
  --sidebar-primary: 37 84% 57%;
  --sidebar-ring: 37 84% 57%;
}

/* The header and footer wordmark. Sized by height so its width follows the
   logo, instead of the old square box that shrank a wide logo to fit. */
.vx-logo-header, .vx-logo-footer { width: auto !important; }
.vx-logo-header { height: 44px; }
.vx-logo-footer { height: 32px; }
@media (min-width: 768px) {
  .vx-logo-header { height: 72px; }
  .vx-logo-footer { height: 40px; }
}
.vx-logo-header img, .vx-logo-footer img { height: 100%; width: auto; }

/* Pages that start under the fixed header. The header is 96px tall on a
   phone and 112px from 768px up, but the old site's pages began their content
   only 96px down (pt-24), so a page's title or badge slid under the header on
   Services, Resources, Contact, the Help Hub and the service and resource
   detail pages. Pages with a full-screen photo behind the header (home,
   careers) don't use pt-24 and are left alone. */
main > .pt-24:first-child { padding-top: 8rem; }
@media (min-width: 768px) {
  main > .pt-24:first-child { padding-top: 10rem; }
}

/* ── Home hero (build.py, hero()) ────────────────────────────────────────── */
/* The title artwork. It carries its own padding, so the quote sits close
   under it. Wider on tablets and computers than on a phone. */
.vx-hero-title { width: 100%; margin: 0 0 0.5rem; }
/* Raised a little: about 0.375in on an iPhone 17 Pro (57px). The hero keeps
   its content vertically centered, so a pull-up moves the title half as far;
   the margin is doubled for that, and the quote and buttons rise with it. */
@media (max-width: 767px) { .vx-hero-title { margin-top: -106px; } }
@media (min-width: 768px) { .vx-hero-title { margin-top: -4.5rem; } }
.vx-hero-title img { display: block; width: 100%; max-width: 56rem; height: auto; margin: 0 auto;
  filter: drop-shadow(0 2px 10px rgba(0, 0, 0, 0.5)); }
@media (min-width: 768px) { .vx-hero-title img { max-width: 64rem; } }
@media (min-width: 1280px) { .vx-hero-title img { max-width: 72rem; } }

/* The customer quote: 10% smaller type and 10% tighter lines than the
   original subtext (18/28px on a phone, 20/28px from 768px up). */
.vx-hero-figure { max-width: 42rem; margin: 0 auto 2.5rem; }
.vx-hero-quote { margin: 0; font-style: italic; color: rgb(255 255 255 / 0.9);
  text-shadow: 0 1px 5px rgba(0, 0, 0, 0.5); font-size: 16.2px; line-height: 25.2px; }
@media (min-width: 768px) { .vx-hero-quote { font-size: 18px; line-height: 25.2px; } }
.vx-hero-by { margin-top: 0.75rem; display: flex; align-items: center; justify-content: center; gap: 0.65rem;
  font-size: 0.95rem; color: rgb(255 255 255 / 0.9); text-shadow: 0 1px 5px rgba(0, 0, 0, 0.5); }
.vx-hero-name { font-weight: 700; letter-spacing: 0.02em; }
.vx-hero-sep { width: 1px; height: 1em; background: hsl(var(--primary)); }
.vx-hero-place { font-weight: 400; color: rgb(255 255 255 / 0.75); }

/* ── Header logo: the full lockup ─────────────────────────────────────────── */
/* Computers (1024px and up): logo on the left, sized by height, with the
   menu links beside it. Below that the links do not fit beside the full
   lockup (they need 675 of 788px on an iPad), so phones and tablets get the
   centered logo with the menu button on the right. On a phone the logo is
   260px wide: the width the Residential & Commercial pill had on an iPhone
   17 Pro. */
@media (min-width: 1024px) {
  .vx-logo-header { height: 72px; }
}
@media (max-width: 1023px) {
  nav .container { position: relative; }
  .vx-brand { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); }
  .vx-logo-header { width: 260px !important; height: auto; }
  .vx-logo-header img { width: 100%; height: auto; }
  /* The centered logo leaves the row, so the menu button keeps the right. */
  nav .container > button { margin-left: auto; }
}
@media (min-width: 768px) and (max-width: 1023px) {
  .vx-logo-header { width: 320px !important; }
  nav > .container > .hidden.md\:flex { display: none !important; }
  nav > .container > button.md\:hidden { display: block !important; }
  nav > [data-phone-menu] { display: block !important; }
}

/* ── Financier banner (build.py, financier_banner()) ─────────────────────── */
/* White tiles so every logo shows in its own colors; the logo fills the tile
   inside a small margin. */
.vx-fin { display: flex; align-items: center; justify-content: center; flex: none;
  width: 220px; height: 88px; margin: 0 0.75rem; padding: 12px 18px; border-radius: 1rem; background: #fff; }
.vx-fin img { display: block; width: 100%; height: 100%; object-fit: contain; }
@media (max-width: 767px) { .vx-fin { width: 170px; height: 72px; padding: 10px 14px; margin: 0 0.5rem; } }