/*
 * public-site.css — the senior-facing page chrome (header + footer) for the
 * public booking pages at /find/ and /book/.
 *
 * Copies the shell of the Bubble pages these replace (website_find_location,
 * website_book_at_venue) so the two look the same side by side while both are
 * live. Markup is injected by public-site.js.
 */
:root {
  --ys-purple: #2F2D4C;
  --ys-purple-light: #EFEEFB;
  --ys-blue: #5FA0DA;
  --ys-text: #1d1b33;
  --ys-muted: #6b6980;
  --ys-border: #e4e3ef;
}
* { box-sizing: border-box; }
html, body {
  margin: 0; padding: 0; background: #fff; color: var(--ys-text);
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  font-size: 16px; line-height: 1.5;
}
body { display: flex; flex-direction: column; min-height: 100vh; }

/* ---- header ------------------------------------------------------------- */
.ys-head {
  display: flex; align-items: center; gap: 14px;
  padding: 14px 22px; border-bottom: 1px solid #f1f0f7;
}
.ys-head img { height: 32px; width: auto; display: block; }
.ys-head .back {
  display: inline-flex; align-items: center; gap: 6px;
  background: #f2f2f6; color: var(--ys-text); text-decoration: none;
  padding: 8px 14px; border-radius: 999px; font-size: 14px; font-weight: 500;
}
.ys-head .back:hover { background: #e7e6ef; }

/* ---- page body ---------------------------------------------------------- */
.ys-main { flex: 1; padding: 26px 18px 48px; }
.ys-main h1 {
  margin: 0 auto 20px; max-width: 720px; text-align: center;
  font-size: 34px; line-height: 1.15; font-weight: 700; color: var(--ys-purple);
}
.ys-sub {
  margin: -8px auto 24px; max-width: 560px; text-align: center;
  font-size: 16px; color: var(--ys-purple);
}
@media (max-width: 560px) {
  .ys-main h1 { font-size: 26px; }
  .ys-main { padding: 20px 14px 36px; }
}

/* ---- footer ------------------------------------------------------------- */
.ys-foot { background: #1f1d33; color: #fff; padding: 40px 22px 28px; margin-top: auto; }
.ys-foot a { color: #fff; text-decoration: none; }
.ys-foot a:hover { text-decoration: underline; }
.ys-foot-cols {
  max-width: 1120px; margin: 0 auto; display: grid; gap: 30px;
  grid-template-columns: 2fr 1fr 1fr 1fr;
}
.ys-foot img.mark { height: 38px; filter: brightness(0) invert(1); }
.ys-foot .tag { margin: 14px 0 0; font-size: 15px; max-width: 300px; }
.ys-foot h2 { margin: 0 0 12px; font-size: 20px; font-weight: 500; }
.ys-foot ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; font-size: 15px; }
.ys-foot .socials { display: flex; gap: 14px; }
.ys-foot .socials svg { width: 22px; height: 22px; fill: #fff; display: block; }
.ys-foot .legal {
  max-width: 900px; margin: 34px auto 0; text-align: center;
  font-size: 14px; color: #d7d5e6; line-height: 1.6;
}
.ys-foot .legal p { margin: 0 0 12px; }
@media (max-width: 760px) {
  .ys-foot-cols { grid-template-columns: 1fr; gap: 26px; }
}