/*
 * /participant-guide/ and /vendor-guide/ -- the frame around a guide.
 * Loaded only on those two routes (inc/ppa-guide-pages.php). Bump
 * PPA_GUIDE_PAGE_VER when this file changes.
 *
 * The guides style themselves (their shortcodes carry their own CSS), so
 * everything here is the page around them: a band in the parade page's
 * aubergine under the theme header, a readable column, and a print sheet that
 * leaves only the guide.
 */

.ppa-gp {
  --ppa-gp-ink: #0f172a;
  --ppa-gp-aubergine: #2b0d38;     /* the parade page hero */
  --ppa-gp-purple: #7c3aed;        /* the guides' own accent */
  /* The theme makes every <main> a wrapping flex row, which shrinks the band
     to the width of its text and leaves the header's white menu over white. */
  display: block;
  background: #faf8fc;
  color: var(--ppa-gp-ink);
  padding-bottom: 64px;
}
.ppa-gp *,
.ppa-gp *::before,
.ppa-gp *::after { box-sizing: border-box; }

.ppa-gp-wrap {
  max-width: 1040px;
  margin: 0 auto;
  padding: 0 20px;
}

/* ---- The band: where you are, and where the personal details live ---- */
/* Groovy Menu's header is transparent and absolutely positioned over the top
   of the page -- 100px tall, 70px below its 1024px breakpoint -- with a white
   logo and menu. The band sits under it, dark, and pads its own text clear. */
.ppa-gp-band {
  background: var(--ppa-gp-aubergine);
  color: #fff;
  padding: 126px 0 24px;
}
@media (max-width: 1023px) {
  .ppa-gp-band { padding-top: 92px; }
}
.ppa-gp-crumbs {
  /* Site-wide Yellow Pencil CSS gives every <nav> a fixed 119px height with
     !important on phones (it was written for the menu); only !important on a
     class selector gets the breadcrumb its own height back. */
  height: auto !important;
  padding-top: 0 !important;
  margin: 0 0 14px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .7);
}
/* The theme colours and underlines every link; these sit on a dark band. */
.ppa-gp-crumbs a {
  color: #fff !important;
  text-decoration: none !important;
}
.ppa-gp-crumbs a:hover,
.ppa-gp-crumbs a:focus-visible { text-decoration: underline !important; }
.ppa-gp-crumbs-sep { margin: 0 8px; opacity: .5; }

.ppa-gp-tools {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 14px 28px;
}
.ppa-gp-portal {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  flex: 1 1 420px;
  max-width: 70ch;
  margin: 0;
  font-size: 15px;
  line-height: 1.55;
  color: rgba(255, 255, 255, .86);
}
.ppa-gp-portal strong { color: #fff; }
.ppa-gp-portal .dashicons { flex: none; margin-top: 2px; color: #e9d5ff; }
.ppa-gp-portal-link {
  color: #fff !important;
  font-weight: 700;
  text-decoration: underline !important;
  text-underline-offset: 3px;
}
.ppa-gp-portal-link:hover { color: #e9d5ff !important; }

.ppa-gp-print {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex: none;
  margin: 0;
  padding: 10px 18px;
  border: 2px solid rgba(255, 255, 255, .55);
  border-radius: 999px;
  background: transparent;
  color: #fff;
  font: inherit;
  font-size: 14px;
  font-weight: 800;
  line-height: 1.2;
  cursor: pointer;
  transition: border-color .15s ease, background-color .15s ease;
}
.ppa-gp-print:hover { border-color: #fff; background: rgba(255, 255, 255, .1); }
.ppa-gp-print:focus-visible { outline: 3px solid #c4b5fd; outline-offset: 2px; }

.ppa-gp-body { padding-top: 28px; }

/* ---- The vendor guide's heading (the participant guide brings its own) - */
.ppa-gp-hero {
  margin: 0 0 22px;
  border-radius: 18px;
  overflow: hidden;
  background: linear-gradient(135deg, #2d0054 0%, #4c1d95 45%, #7c3aed 100%);
  color: #fff;
}
.ppa-gp-hero-bar {
  height: 6px;
  background: linear-gradient(90deg, #E40303, #FF8C00, #FFED00, #008026, #24408E, #732982);
}
.ppa-gp-hero-in { padding: 30px 28px; }
.ppa-gp-kicker {
  margin: 0 0 6px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #e9d5ff;
}
.ppa-gp-hero h1 {
  margin: 0 0 8px;
  font-size: clamp(26px, 3.6vw, 40px);
  line-height: 1.15;
  color: #fff;
}
.ppa-gp-lede { margin: 0; max-width: 62ch; font-size: 16px; line-height: 1.6; color: #ede9fe; }

@media (max-width: 640px) {
  .ppa-gp-band { padding-bottom: 20px; }
  .ppa-gp-print { width: 100%; justify-content: center; }
  .ppa-gp-hero-in { padding: 24px 20px; }
  .ppa-gp-body { padding-top: 20px; }
}

/* ---- Print: the guide, and only the guide ------------------------------ */
@media print {
  body.ppa-guide-page .navigation-menu,
  body.ppa-guide-page .transition-overlay,
  body.ppa-guide-page .gm-navbar,
  body.ppa-guide-page .pcc-skip-link,
  body.ppa-guide-page footer,
  body.ppa-guide-page #wpadminbar,
  .ppa-gp-band { display: none !important; }

  body.ppa-guide-page { background: #fff !important; }
  .ppa-gp { background: #fff; padding: 0; }
  .ppa-gp-wrap { max-width: none; padding: 0; }
  .ppa-gp-body { padding-top: 0; }

  /* Keep the colour bands: they are the guides' headings, not decoration. */
  .ppa-guide-hero, .ppa-gp-hero, .ppa-guide-hero-bar, .ppa-gp-hero-bar,
  .ppa-guide-rules li::before, .ppa-guide-hold, .ppa-vg-card.is-warn {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
  .ppa-guide-card, .ppa-vg-card { box-shadow: none !important; }
  /* Whole cards are allowed to split: the supplies and signage cards are most
     of a page each, and keeping them whole left half-empty sheets behind. */
  .ppa-guide-products li, .ppa-guide-rules li, .ppa-vg-rules li, .ppa-guide-lastfig { break-inside: avoid; }
  .ppa-guide h2, .ppa-vg-card h2 { break-after: avoid; }
  /* A scrolling strip prints as the first two photographs and a cut-off third. */
  .ppa-guide-lastrow { flex-wrap: wrap; overflow: visible; }
}