/* ==========================================================================
   GPG seminar system.
   Loads on top of the main site's style.css and uses its variables, so the
   palette lives in one place. Only the surfaces the seminar system adds are
   defined here.

   Audience note: this is built for people in their sixties and seventies on
   a phone or an iPad. Controls are large, contrast is strong, and nothing
   important is smaller than 17px.
   ========================================================================== */

/* The main site's header is transparent over a coloured band and turns solid
   on scroll via its own JS. The microsite has no band and does not load that
   script, so the header is solid from the start. */
.header--solid {
  position: sticky;
  top: 0;
  height: auto;
  min-height: 88px;
  background: var(--sage-dark);
  border-bottom: 1px solid var(--rule-light);
}
.header--solid .header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 14px 24px;
  height: auto;
}
/* style.css parks this lockup with position:absolute, top:50% and a
   translateY(-50%) to centre it. Switching it back to static kills the top
   offset but NOT the transform, which applies to any element however it is
   positioned, so the mark and wordmark were being dragged up by half their own
   height and clipped against the top of the header while the phone number,
   which has no transform, stayed put and read as sitting too low. Cancel the
   transform explicitly. */
.header--solid .brand-inline {
  opacity: 1;
  pointer-events: auto;
  position: static;
  transform: none;
}
.header--solid .header__brand { width: auto; height: auto; }
.header--solid .header__phone { white-space: nowrap; }

/* style.css hides the inline lockup below 880px because the main site swaps to
   its stacked mark there. This microsite has no stacked mark, so that rule left
   the header with no logo at all on a phone, which is most of this audience. */
@media (max-width: 880px) {
  .header--solid .brand-inline { display: flex; }
}

/* On a narrow phone the mark, the wordmark and the phone number cannot all sit
   on one row without crushing. The phone number is the one Tim asked to keep
   visible everywhere, so the wordmark steps aside and the mark carries the
   brand. */
@media (max-width: 600px) {
  .header--solid { min-height: 72px; }
  .header--solid .brand-inline__text { display: none; }
  .header--solid .brand-inline img { height: 44px; }
  .header--solid .header__inner { padding: 12px 18px; gap: 14px; }
  .header--solid .header__phone { font-size: 17px; }
}

/* --- page hero ------------------------------------------------------------
   style.css pads .page-hero with calc(var(--header-h) + 70px) on top, which is
   254px, because the main site's header is transparent and overlays its hero.
   This microsite's header is solid and sticky (see .header--solid above), so it
   already occupies that space and the inherited padding left roughly 250px of
   dead olive band above the title. Reset it here rather than in style.css,
   which is a synced copy of the main site's and must not be forked. */
.page-hero {
  position: relative;
  overflow: hidden;
  padding: 78px 0 86px;
}

/* The engraved stag as a quiet watermark, the same treatment the main site
   gives its homepage hero. Without it this band is a flat slab of olive, which
   is exactly how it read on 2026-09-04. Content sits above it at z-index 2. */
.page-hero::before {
  content: '';
  position: absolute;
  top: 50%;
  right: max(2vw, 20px);
  transform: translateY(-52%);
  width: min(40vw, 520px);
  aspect-ratio: 320 / 173;
  background: url('../img/brand/gpg-mark-cream.webp') no-repeat center / contain;
  opacity: 0.15;
  pointer-events: none;
}
.page-hero > .container { position: relative; z-index: 2; }

/* Below the point where the stag would sit behind the text rather than beside
   it. Cream on olive at 0.15 is quiet, but not quiet enough under body copy. */
@media (max-width: 900px) {
  .page-hero::before { display: none; }
  .page-hero { padding: 56px 0 62px; }
}

/* --- empty state ----------------------------------------------------------
   Shown when no event is open. It was a bare paragraph in a tall cream void,
   which reads as a page that failed to load rather than a deliberate state.
   This is also the page an invited client lands on, so it carries the mark and
   a real call to action. */
.sem-empty {
  max-width: 720px;
  margin: 0 auto;
  padding: 44px 40px 46px;
  text-align: center;
  background: var(--paper-soft);
  border: 1px solid var(--paper-line);
  border-radius: 6px;
}
.sem-empty__mark {
  width: 148px;
  height: auto;
  opacity: 0.5;
  margin-bottom: 18px;
}
.sem-empty h2 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 30px;
  margin-bottom: 12px;
}
.sem-empty p {
  color: var(--ink-mute);
  font-size: 18px;
  max-width: 46ch;
  margin: 0 auto 26px;
}

@media (max-width: 600px) {
  .sem-empty { padding: 32px 22px 34px; }
  .sem-empty h2 { font-size: 25px; }
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--brass);
  color: var(--paper);
  padding: 12px 18px;
  z-index: 100;
}
.skip-link:focus { left: 8px; top: 8px; }

.visually-hidden {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

/* The hidden attribute is only a user agent rule of display:none, so any
   element that sets its own display beats it and stays on screen. That is
   what kept the player poster sitting on top of the playing video. This makes
   hidden mean hidden, whatever else an element asks for. */
[hidden] { display: none !important; }

/* Visible focus everywhere. Half this audience navigates by keyboard without
   thinking of it as navigating by keyboard. */
a:focus-visible, button:focus-visible, input:focus-visible, [tabindex]:focus-visible {
  outline: 3px solid var(--brass);
  outline-offset: 2px;
}

.container.narrow, .narrow { max-width: 760px; }

.lead { font-size: 20px; line-height: 1.6; margin-bottom: 20px; }
.muted { color: var(--ink-mute); }

.sem-split {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
  gap: 48px;
  align-items: start;
}

.event-aside {
  background: var(--paper-soft);
  border: 1px solid var(--paper-line);
  border-radius: 6px;
  padding: 24px;
}
.event-aside img { width: 100%; height: auto; border-radius: 4px; margin-bottom: 16px; }
.event-aside h3 { font-family: var(--font-display); font-size: 24px; margin-bottom: 4px; }
.event-aside p { margin-bottom: 12px; }
.event-aside__when {
  font-family: var(--font-display);
  font-size: 19px;
  color: var(--sage-deep);
  margin: 16px 0;
}

/* --- seminar list --------------------------------------------------------- */

.seminar-list { display: grid; gap: 24px; }
.seminar-card {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(240px, 1fr);
  gap: 32px;
  align-items: center;
  border: 1px solid var(--paper-line);
  border-radius: 6px;
  padding: 28px;
  background: var(--paper-soft);
}
.seminar-card h2 { font-family: var(--font-display); font-size: 28px; margin-bottom: 6px; }
.seminar-card__sub { color: var(--ink-mute); margin-bottom: 10px; }
.seminar-card__when {
  font-family: var(--font-display);
  font-size: 19px;
  color: var(--sage-deep);
  margin-bottom: 12px;
}
.seminar-card__actions { display: grid; gap: 12px; }

/* --- forms ---------------------------------------------------------------- */

.form { max-width: 620px; }
.form__row { margin-bottom: 22px; }
.form__row label {
  display: block;
  font-weight: 500;
  font-size: 18px;
  margin-bottom: 8px;
}
.form__row input {
  width: 100%;
  font-family: var(--font-body);
  font-size: 19px;
  padding: 14px 16px;
  border: 2px solid var(--paper-line);
  border-radius: 4px;
  background: #fff;
  color: var(--ink);
}
.form__row input:focus { border-color: var(--sage); }
.form__hint { font-size: 16px; color: var(--ink-mute); margin-top: 6px; }

.form__check {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  margin: 24px 0;
  font-size: 17px;
}
.form__check input {
  width: 24px; height: 24px; margin-top: 2px; flex: 0 0 auto;
  accent-color: var(--sage-deep);
}

.form-error {
  background: #fbe9e7;
  border-left: 4px solid #a33;
  color: #7a1f16;
  padding: 14px 18px;
  margin-bottom: 24px;
  font-size: 17px;
}

.privacy-note {
  background: var(--paper-soft);
  border: 1px solid var(--paper-line);
  border-radius: 6px;
  padding: 20px 24px;
  margin: 28px 0;
  font-size: 16px;
}
.privacy-note h2 { font-size: 18px; margin-bottom: 8px; font-family: var(--font-body); }
.privacy-note p { margin-bottom: 10px; }

/* Honeypot: off screen rather than display:none, because some bots skip
   fields that are explicitly hidden. */
.hp { position: absolute; left: -5000px; width: 1px; height: 1px; overflow: hidden; }

.btn--large { font-size: 19px; padding: 18px 34px; }
.btn--block { display: block; width: 100%; text-align: center; }

/* --- watch page ----------------------------------------------------------- */

.watch-page { background: var(--paper); }
.panel { padding: 48px 0 64px; }
.panel--player { padding: 24px 0 48px; background: var(--sage-dark); }
.panel--thanks { padding: 72px 0 96px; }

.watch__sub { font-size: 19px; color: var(--ink-mute); margin-bottom: 8px; }
.waiting__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
  gap: 48px;
  align-items: start;
  margin-top: 24px;
}
.waiting__when {
  font-family: var(--font-display);
  font-size: 24px;
  color: var(--sage-deep);
  margin-bottom: 20px;
}
.waiting__status { font-size: 18px; margin: 20px 0; }

.countdown {
  display: flex;
  gap: 12px;
  margin: 8px 0 4px;
}
.countdown > div {
  background: var(--sage-deep);
  color: var(--paper);
  border-radius: 6px;
  padding: 14px 10px;
  min-width: 84px;
  text-align: center;
}
.countdown span {
  display: block;
  font-family: var(--font-display);
  font-size: 34px;
  line-height: 1.1;
}
.countdown small {
  display: block;
  font-size: 13px;
  letter-spacing: .08em;
  text-transform: uppercase;
  opacity: .85;
}

/* --- player --------------------------------------------------------------- */

.player { max-width: 1100px; margin: 0 auto; }
.player__frame {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: #000;
  border-radius: 6px;
  overflow: hidden;
}
.player__frame iframe,
.player__frame video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  /* contain, not cover: a talking head must never be cropped to fit. */
  object-fit: contain;
  background: #000;
}
.player__poster {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  gap: 20px;
  align-items: center;
  justify-content: center;
  background: var(--sage-dark);
  color: var(--paper);
  text-align: center;
  padding: 24px;
  z-index: 2;
}
.player__poster p { font-size: 20px; }

.player__poster[hidden] { display: none; }

.player__bar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 4px 0;
  color: var(--paper);
  flex-wrap: wrap;
}
.player__btn {
  font-family: var(--font-body);
  font-size: 17px;
  padding: 12px 20px;
  min-height: 48px;
  border: 2px solid var(--paper);
  border-radius: 4px;
  background: transparent;
  color: var(--paper);
  cursor: pointer;
}
.player__btn:hover { background: var(--paper); color: var(--sage-dark); }
.player__btn--right { margin-left: auto; }
.player__vol input { width: 140px; height: 32px; accent-color: var(--brass-light); }
.player__live {
  font-size: 14px;
  letter-spacing: .1em;
  padding: 6px 12px;
  border-radius: 3px;
  background: #8f2f24;
  color: #fff;
}
.player__status { color: var(--paper); font-size: 17px; margin-top: 12px; min-height: 24px; }

.thanks__contact { margin-top: 28px; font-size: 18px; }

/* --- responsive ----------------------------------------------------------- */

@media (max-width: 900px) {
  .sem-split, .waiting__grid, .seminar-card { grid-template-columns: 1fr; gap: 28px; }
  .countdown > div { min-width: 0; flex: 1; }
  .countdown span { font-size: 28px; }
  .panel { padding: 32px 0 48px; }
  .player__btn { flex: 1 1 auto; }
  .player__btn--right { margin-left: 0; }
}

@media (max-width: 420px) {
  .countdown { gap: 8px; }
  .countdown > div { padding: 10px 6px; }
  .countdown span { font-size: 24px; }
  .btn--large { width: 100%; text-align: center; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}