/* ============================================================
   Public marketing site (/home/) — standalone stylesheet.

   This file is deliberately independent of the ticketing app's
   CSS (base_common.css, customer.css, ...). Everything here is
   namespaced with a `ps-` prefix so nothing leaks either way.
   Front-end devs: this + templates/public_site/ + js/images in
   static/public_site/ are the whole surface of the public site.
   ============================================================ */

/* ---- reset (scoped, minimal) ---- */
.ps-body, .ps-body * { box-sizing: border-box; }
.ps-body {
  margin: 0;
  font-family: 'Source Sans 3', 'Segoe UI', Arial, sans-serif;
  font-size: 17px;
  line-height: 1.6;
  color: var(--ps-ink);
  background: var(--ps-paper);
}
.ps-body img { max-width: 100%; height: auto; display: block; }

/* ---- palette ---- */
:root {
  --ps-ink: #23212c;
  --ps-hover-text: #fafafa;
  --ps-ink-soft: #5a5666;
  --ps-paper: #fafafa;
  --ps-panel: #fafafa;
  --ps-brand: #8B0000;        /* maroon */
  --ps-brand-dark: #350000;
  --ps-accent: #E3AA38;       /* warm gold */
  --ps-accent-soft: #f3e9c8;
  --ps-line: #e4dfd4;
  --ps-serif: 'EB Garamond', Georgia, 'Times New Roman', serif;
}

/* ---- type ---- */
.ps-body h1, .ps-body h2, .ps-body h3 {
  font-family: var(--ps-serif);
  line-height: 1.2;
  color: var(--ps-brand-dark);
  margin: 0 0 .5em;
}
.ps-body h1 { font-size: 2.4rem; }
.ps-body h2 { font-size: 1.7rem; margin-top: 1.6em; }
.ps-body h3 { font-size: 1.25rem; margin-top: 1.2em; }
.ps-body a { color: var(--ps-brand); }
/* Links sit on light panels almost everywhere, so hover darkens them; the
   near-white hover colour is reserved for links on the dark nav and footer
   (below), where the previous page-wide rule came from -- on a light card
   it made the Contact page's email and phone vanish on hover. */
.ps-body a:hover { color: var(--ps-brand-dark); }
.ps-nav-menu > li > a:hover, .ps-nav-sub-toggle:hover, .ps-footer a:hover { color: var(--ps-hover-text); }

.ps-skip-link {
  position: absolute; left: -9999px; top: 0;
  background: var(--ps-brand-dark); color: #fff; padding: .5rem 1rem; z-index: 100;
}
.ps-skip-link:focus { left: 0; color: #fff; }

/* ---- buttons ---- */
.ps-btn {
  display: inline-block;
  padding: .55rem 1.3rem;
  border-radius: 999px;
  font-weight: 600;
  text-decoration: none;
  border: 2px solid transparent;
  transition: background .15s, color .15s, border-color .15s;
}
.ps-btn-lg { padding: .75rem 1.8rem; font-size: 1.1rem; }
/* Colour rules are qualified with .ps-body: the generic `.ps-body a:hover`
   rule (class + pseudo-class + element) outranks a bare `.ps-btn-x:hover`
   (class + pseudo-class), and was painting hovered outline buttons
   dark-maroon-on-maroon. */
.ps-body .ps-btn-primary { background: var(--ps-accent); border-color: var(--ps-accent); color: var(--ps-ink); }
.ps-body .ps-btn-primary:hover { background: #b8921d; border-color: #b8921d; color: var(--ps-ink); }
.ps-body .ps-btn-outline { background: transparent; border-color: var(--ps-brand); color: var(--ps-brand); }
.ps-body .ps-btn-outline:hover { background: var(--ps-brand); color: var(--ps-hover-text); }
.ps-body .ps-btn-ghost { background: transparent; border-color: rgba(255,255,255,.7); color: #fff; }
.ps-body .ps-btn-ghost:hover { background: rgba(255,255,255,.15); color: #fff; }

/* ---- header ---- */
.ps-header { background: var(--ps-panel); border-bottom: 1px solid var(--ps-line); }
.ps-header-inner {
  max-width: 1100px; margin: 0 auto; padding: 1.2rem 1.5rem .8rem;
  display: flex; align-items: center; gap: 1.5rem; flex-wrap: wrap;
}
.ps-logo img { width: 240px; height: auto; }
.ps-header-tagline { flex: 1; min-width: 220px; }
.ps-featuring { margin: 0; font-family: var(--ps-serif); font-size: 1.15rem; }
.ps-conductor { margin: 0.3rem 0 0; color: var(--ps-ink-soft); font-size: .95rem; line-height: 1.2; }
.ps-header-actions { display: flex; gap: .6rem; flex-wrap: wrap; }

/* ---- nav ---- */
.ps-nav { background: var(--ps-brand-dark); }
.ps-nav-toggle { display: none; }
.ps-nav-menu {
  max-width: 1100px; margin: 0 auto; padding: 0 1rem;
  list-style: none; display: flex; flex-wrap: wrap;
}
.ps-nav-menu > li { position: relative; }
.ps-nav-menu a, .ps-nav-sub-toggle {
  display: block; padding: .8rem 1.1rem;
  background: none; border: 0; cursor: pointer;
  color: #fff; font: inherit; font-weight: 600; text-decoration: none;
}
.ps-nav-menu > li > a:hover, .ps-nav-sub-toggle:hover,
.ps-nav-item-sub:focus-within > .ps-nav-sub-toggle { background: var(--ps-brand); }
.ps-nav-sub-toggle::after { content: ' ▾'; font-size: .75em; }
.ps-nav-sub {
  list-style: none; margin: 0; padding: .3rem 0;
  position: absolute; left: 0; top: 100%; min-width: 240px; z-index: 50;
  background: var(--ps-panel); border: 1px solid var(--ps-line);
  border-radius: 0 0 8px 8px; box-shadow: 0 8px 18px rgba(35,33,44,.12);
  display: none;
}
.ps-nav-item-sub:hover > .ps-nav-sub,
.ps-nav-item-sub:focus-within > .ps-nav-sub,
.ps-nav-item-sub.ps-open > .ps-nav-sub { display: block; }
.ps-nav-sub a { color: var(--ps-ink); padding: .5rem 1.1rem; font-weight: 400; }
.ps-nav-sub a:hover {
  background: var(--ps-accent-soft);
  color: var(--ps-ink);
}

/* ---- hero ---- */
.ps-hero {
  background: linear-gradient(135deg, var(--ps-brand-dark), var(--ps-brand));
  color: #fff; text-align: center; padding: 1rem 1rem;
}
.ps-hero h1 { color: #fff; font-size: 2.8rem; margin-bottom: .3em; }
/* On-sale announcement: gold letters, each with a thin black outline
   (stroke painted under the fill so it does not eat into the letterforms) */
.ps-hero p.ps-hero-onsale {
  max-width: none; margin: 0 auto .8rem;
  font-size: 1.6rem; font-weight: 700; line-height: 1.3;
  color: var(--ps-accent);
  -webkit-text-stroke: 20px #000;
  paint-order: stroke fill;
}
.ps-hero p { max-width: 650px; margin: 0 auto 1rem; font-size: 1.15rem; }
.ps-hero-actions { display: flex; gap: .8rem; justify-content: center; flex-wrap: wrap; }

/* ---- layout blocks ---- */
.ps-main { min-height: 50vh; }
.ps-section { max-width: 1100px; margin: 0 auto; padding: 2.5rem 1.5rem; }
.ps-section-narrow { max-width: 780px; }
.ps-section-alt { max-width: none; background: var(--ps-accent-soft); }
.ps-section-alt .ps-cta-row { max-width: 1100px; margin: 0 auto; }
.ps-section-lede { font-size: 1.15rem; color: var(--ps-ink-soft); }
.ps-subhead { margin-top: 2rem; font-size: 1.5rem; }
.ps-section-lede + .ps-subhead { margin-top: 1rem; }
#schedule { padding: 1.5rem 1.5rem; }
#schedule h2 { margin-top: 0; }
.ps-note {
  margin-top: 2rem; padding: 1rem 1.2rem;
  background: var(--ps-panel); border-left: 4px solid var(--ps-accent); border-radius: 0 8px 8px 0;
}

/* ---- home: schedule ---- */
.ps-schedule {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1rem; margin-top: 1rem;
}
.ps-schedule-card {
  background: var(--ps-panel); border: 1px solid var(--ps-line);
  border-top: 4px solid var(--ps-brand); border-radius: 10px; padding: 1.1rem 1.3rem;
}
.ps-schedule-card-special { border-top-color: var(--ps-accent); }
.ps-schedule-card h3 { margin: 0 0 .5rem; }
.ps-schedule-card ul { list-style: none; margin: 0; padding: 0; color: var(--ps-ink-soft); }
.ps-schedule-card li { padding: .2rem 0; line-height: 1.35; }
.ps-schedule-card li strong { display: block; color: var(--ps-ink); }

/* ---- home: programs ---- */
.ps-programs { max-width: 1100px; margin: 0 auto; }
.ps-programs h2 { margin-top: 0; }
.ps-program {
  display: grid; grid-template-columns: minmax(0, 480px) minmax(0, 1fr); gap: 1.6rem 2rem;
  align-items: start; padding: 1rem 0; border-top: 1px solid var(--ps-line);
}
.ps-program:nth-of-type(even) { grid-template-columns: minmax(0, 1fr) minmax(0, 480px); }
.ps-program:nth-of-type(even) img { order: 2; }
.ps-program img { width: 100%; border-radius: 10px; box-shadow: 0 8px 22px rgba(35,33,44,.18); }
.ps-program-body h3 { margin: 0 0 .15rem; font-size: 1.7rem; }
.ps-program-body p:last-child { margin-bottom: 0; }
.ps-program-kicker {
  margin: 0 0 .2rem; font-size: .8rem; font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase; color: var(--ps-brand);
}
.ps-program-sub { margin: 0 0 .2rem; font-family: var(--ps-serif); font-style: italic; font-size: 1.2rem; color: var(--ps-ink-soft); }
.ps-program-dates { margin: 0 0 .8rem; font-weight: 700; color: var(--ps-brand); }
.ps-programs-actions { text-align: center; margin: 2rem 0 0; }
/* Secondary button on the maroon hero. Qualified with .ps-body because the
   generic `.ps-body a` / `.ps-body a:hover` colour rules outrank a bare
   class and were painting it maroon-on-maroon (and near-white on white when
   hovered). Solid white so it reads at a glance next to the gold primary. */
.ps-body .ps-btn-on-dark { background: #fff; border-color: #fff; color: var(--ps-brand); }
.ps-body .ps-btn-on-dark:hover { background: var(--ps-accent-soft); border-color: var(--ps-accent-soft); color: var(--ps-brand-dark); }

/* ---- home: CTA row ---- */
.ps-cta-row {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1.5rem;
}
.ps-cta h2 { margin-top: 0; }

/* ---- content pages ---- */
/* ---- pricing: tier legend, price tables, SuperSaver ---- */
.ps-legend {
  display: grid; grid-template-columns: minmax(0, 300px) auto; gap: 1rem; align-items: start;
}
.ps-legend-map { width: 100%; max-width: 520px; height: auto; border: 1px solid var(--ps-line); border-radius: 8px; }
.ps-tier-key { list-style: none; margin: 0; padding: 0; font-weight: 600; }
.ps-tier-key li { display: flex; align-items: center; gap: .6rem; padding: .35rem 0; }
.ps-tier-swatch { display: inline-block; width: 1.4rem; height: 1.4rem; border-radius: 4px; border: 1px solid rgba(0,0,0,.25); }
.ps-pricing h3 { margin-top: 1.6em; margin-bottom: .1em; }
.ps-pricing h3 small { font-size: .7em; font-weight: 400; color: var(--ps-ink-soft); }
.ps-price-sub { margin: 0 0 .6rem; font-size: .9rem; letter-spacing: .03em; text-transform: uppercase; color: var(--ps-ink-soft); }
.ps-price-table { border-collapse: collapse; width: 100%; max-width: 480px; }
.ps-price-table th, .ps-price-table td { padding: .45rem .8rem; border-bottom: 1px solid var(--ps-line); text-align: right; }
.ps-price-table th[scope="row"], .ps-price-table thead th:first-child { text-align: left; }
.ps-price-table thead th { background: var(--ps-panel); font-size: .85rem; letter-spacing: .03em; text-transform: uppercase; }
.ps-price-table td:last-child { font-weight: 700; color: var(--ps-brand); }
/* The SuperSaver line between the Special Events and SuperSaver tables:
   the customer site's gold oval badge (customer.css .super-saver) */
/* Same width as the tables and flush left with them, so the badge sits
   centred under the table rather than in the middle of the page */
.ps-supersaver-hero { text-align: center; margin: 2rem 0; max-width: 480px; }
.ps-supersaver-or { margin: 0 0 .6rem; font-weight: 700; color: var(--ps-ink-soft); }
.ps-supersaver-badge {
  display: inline-block; width: 140px; height: 70px; line-height: 25px; padding: 7px 20px;
  font-family: "Helvetica Neue", Arial, Helvetica, sans-serif; font-size: 26px; font-weight: 700;
  color: var(--ps-brand); background: #F3D364; border: 3px solid var(--ps-brand);
  border-radius: 50% / 50%; transform: rotate(-10deg);
}
.ps-supersaver-text { margin: .8rem 0 0; font-size: 1.25rem; }
@media (max-width: 640px) {
  .ps-legend { grid-template-columns: 1fr; }
  .ps-tier-key { display: flex; flex-wrap: wrap; gap: .2rem 1.2rem; }
}

/* ---- our story: the founders' photo beside the heading ---- */
.ps-story-head { display: flex; align-items: center; gap: 1.5rem; flex-wrap: wrap; }
/* The heading takes the space the photo leaves and centres itself in it */
.ps-story-head h1 { margin: 0; flex: 1 1 200px; text-align: center; }
/* Black frame with a white mat between it and the photo */
.ps-story-photo {
  width: 450px; max-width: 100%; height: auto;
  padding: 6px; background: #fff; border: 2px solid #000;
}

.ps-feature-list { padding-left: 1.2rem; }
.ps-feature-list li { margin-bottom: .6rem; }

.ps-faq details {
  background: var(--ps-panel); border: 1px solid var(--ps-line);
  border-radius: 10px; margin-bottom: .7rem; padding: 0 1.2rem;
}
.ps-faq summary {
  cursor: pointer; font-weight: 600; padding: .9rem 0;
  font-family: var(--ps-serif); font-size: 1.15rem; color: var(--ps-brand-dark);
}
.ps-faq details[open] summary { border-bottom: 1px solid var(--ps-line); }
.ps-faq details > *:not(summary) { margin: .8rem 0; }

.ps-terms > li { margin-bottom: .9rem; }

/* SMS legal pages (legal_page.html): markdown output with no classes to hang
   spacing off. */
.ps-legal h1 + p em { color: var(--ps-ink-soft); }
.ps-legal h2 { margin-top: 2rem; }
.ps-legal p, .ps-legal li { line-height: 1.6; }
.ps-legal ul { margin-bottom: 1rem; }

.ps-tiers {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1rem; margin-top: 1rem;
}
.ps-tier {
  background: var(--ps-panel); border: 2px solid var(--ps-accent);
  border-radius: 10px; padding: 1.1rem 1.3rem;
}
.ps-tier h3 { margin: 0; text-transform: uppercase; letter-spacing: .05em; font-size: 1.05rem; }
.ps-tier-amount { color: var(--ps-brand); font-weight: 700; margin: .2rem 0 .6rem; }
.ps-tier ul { margin: 0; padding-left: 1.1rem; color: var(--ps-ink-soft); }
.ps-tier li { margin-bottom: .35rem; }

.ps-donor-list {
  list-style: none; padding: 0;
  font-family: var(--ps-serif); font-size: 1.3rem;
}
.ps-donor-list li { padding: .5rem 0; border-bottom: 1px solid var(--ps-line); }

.ps-contact-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 1rem; margin-top: 1.5rem;
}
.ps-contact-card {
  background: var(--ps-panel); border: 1px solid var(--ps-line);
  border-radius: 10px; padding: 1.1rem 1.3rem;
}
.ps-contact-card h2 { margin-top: 0; font-size: 1.15rem; }
/* A long email address has no break opportunity; let it wrap inside the
   card rather than run past its border (grid items also need min-width: 0
   or they refuse to shrink below the content width). */
.ps-contact-card { min-width: 0; }
.ps-contact-card p { overflow-wrap: anywhere; word-break: break-word; }

.ps-testimonial {
  margin: 0 0 1.5rem; padding: 1.5rem 1.8rem;
  background: var(--ps-panel); border-left: 4px solid var(--ps-accent); border-radius: 0 10px 10px 0;
}
.ps-testimonial blockquote {
  margin: 0; font-family: var(--ps-serif); font-size: 1.25rem; font-style: italic;
}
.ps-testimonial figcaption { margin-top: .8rem; color: var(--ps-ink-soft); font-weight: 600; }
/* Carousel (testimonials.html). Without JS every figure shows stacked; the
   script adds .ps-carousel-ready, after which only the current one is
   visible and the arrow controls appear. */
.ps-carousel-controls {
  display: none; align-items: center; justify-content: center; gap: 1rem; margin-top: .5rem;
}
.ps-carousel-ready .ps-carousel-controls { display: flex; }
/* All figures share one grid cell, so the stage is as tall as the tallest
   quote and the arrows below never move when the quote changes. Inactive
   figures are hidden, not removed, to keep that height. */
.ps-carousel-ready .ps-carousel-stage { display: grid; }
.ps-carousel-ready .ps-testimonial { grid-area: 1 / 1; margin-bottom: 0; visibility: hidden; }
.ps-carousel-ready .ps-testimonial.ps-current { visibility: visible; }
.ps-carousel-btn {
  width: 2rem; height: 2rem; border-radius: 50%; cursor: pointer;
  border: 1px solid var(--ps-brand); color: var(--ps-brand);
  font-size: 1.6rem; line-height: 1; font-family: inherit;
  transition: background .15s, color .15s;
}
.ps-carousel-btn:hover, .ps-carousel-btn:focus-visible { background: var(--ps-brand); color: var(--ps-hover-text); }
.ps-carousel-count { color: var(--ps-ink-soft); font-weight: 600; min-width: 4.5rem; text-align: center; }

/* ---- footer ---- */
.ps-footer { background: var(--ps-ink); color: #cfccd6; margin-top: 3rem; }
.ps-footer a { color: #fff; }
.ps-footer-inner {
  max-width: 1100px; margin: 0 auto; padding: 2.5rem 1.5rem 1rem;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1.5rem;
}
/* Qualified with .ps-body: the generic `.ps-body h2` colour rule outranked
   the bare class and painted these headings dark on the dark footer. */
.ps-body .ps-footer-heading {
  font-family: var(--ps-serif); color: var(--ps-accent);
  font-size: 1.15rem; margin: 0 0 .6rem;
}
.ps-social { list-style: none; margin: 0; padding: 0; }
.ps-social li { padding: .15rem 0; }
.ps-footer-legal {
  max-width: 1100px; margin: 0 auto; padding: 1rem 1.5rem 2rem;
  border-top: 1px solid rgba(255,255,255,.15);
  font-size: .8rem; line-height: 1.5;
}

/* ---- responsive ---- */
@media (max-width: 760px) {
  .ps-program, .ps-program:nth-of-type(even) { grid-template-columns: 1fr; }
  .ps-program:nth-of-type(even) img { order: 0; }
}
@media (max-width: 720px) {
  .ps-body h1 { font-size: 1.9rem; }
  .ps-hero h1 { font-size: 2.1rem; }
  .ps-header-inner { justify-content: center; text-align: center; }

  .ps-nav-toggle {
    display: flex; align-items: center; gap: .5rem;
    width: 100%; padding: .7rem 1.2rem;
    background: none; border: 0; color: #fff; font: inherit; font-weight: 600; cursor: pointer;
  }
  .ps-nav-toggle-bar { display: block; width: 20px; height: 2px; background: #fff; box-shadow: 0 6px 0 #fff, 0 -6px 0 #fff; margin: 0 2px; }
  .ps-nav-menu { display: none; flex-direction: column; padding-bottom: .5rem; }
  .ps-nav.ps-open .ps-nav-menu { display: flex; }
  .ps-nav-sub {
    position: static; display: none; box-shadow: none; border: 0; border-radius: 0;
    background: rgba(255,255,255,.08);
  }
  .ps-nav-item-sub:hover > .ps-nav-sub { display: none; }  /* touch: toggle only */
  .ps-nav-item-sub.ps-open > .ps-nav-sub { display: block; }
  .ps-nav-sub a { color: #fff; padding-left: 2.2rem; }
  .ps-nav-sub a:hover { background: var(--ps-brand); }
}