/* ==========================================================================
   Pittsburgh Opera Design System — tokens.css (v4, synced 2026-07-17)
   Source of truth for the homepage concept and WordPress build.
   v4 adds --po-accent-deep (WCAG AA contrast remediation): accent as TEXT
   is black-canvas-only; white surfaces use accent-deep; slate surfaces use
   white text with accent reserved for non-text decoration.
   v3 synced comments with the rules as built (amended gradient rule, footer
   button exception). v2 added: giving red (restricted), button standard,
   link arrow standard, nav/mega menu treatments.
   Rules: no drop shadows. Gradients remain banned on all UI surfaces
   (buttons, panels, tiles, chrome); photographic scrims where an image
   meets the canvas are permitted (amended July 9, 2026).
   ========================================================================== */

/* Load Proxima Nova via the Opera's Adobe Fonts kit (qtp2hjl):
   <link rel="stylesheet" href="https://use.typekit.net/qtp2hjl.css">        */

:root {
  /* ---- Color: brand ---- */
  --po-canvas: #000000;        /* page background */
  --po-accent: #40AEF0;        /* accent blue: links, primary buttons, hovers.
                                  As TEXT: black canvas only (9.5:1 there).
                                  Fails AA on white (2.2:1) and slate (4.43:1)
                                  — on white use --po-accent-deep; on slate
                                  text is white, accent only as NON-TEXT
                                  decoration (underlines, indicator bars,
                                  which clear the 3:1 non-text minimum). */
  --po-accent-deep: #0B72B5;   /* the accent's dark sibling for TEXT and UI
                                  glyphs on WHITE surfaces: 5.1:1 on white
                                  (AA). Never on the black canvas — it's only
                                  4.06:1 there; black-canvas accent text stays
                                  #40AEF0. Added 2026-07-17 (AA remediation). */
  --po-slate: #3B4550;         /* body ink on light backgrounds (mega menu) */
  --po-white: #FFFFFF;

  /* ---- Color: greys ---- */
  --po-grey-100: #D0D0D0;      /* light grey: footer links, hairlines on white */
  --po-grey-200: #999999;
  --po-grey-300: #666666;
  --po-grey-400: #4E4C4D;
  --po-rule-dark: #1C1C1C;     /* hairline dividers and tile borders on the
                                  black canvas; folded back from the approved
                                  homepage design (generated token set, July 8) */

  /* ---- Color: restricted ---- */
  --po-giving-red: #B50404;    /* RESTRICTED: donation/giving CTAs only
                                  (GIVE NOW, GIVE MONTHLY in Support/giving
                                  contexts). Never ticketing, navigation, or
                                  general CTAs. Header GIVE NOW stays standard. */

  /* ---- Type ---- */
  --po-font: "proxima-nova", sans-serif;
  --po-weight-light: 300;
  --po-weight-regular: 400;
  --po-weight-bold: 700;
  --po-weight-extrabold: 800;
  /* Display headings are uppercase. */

  /* ---- Radius ---- */
  --po-radius-control: 8px;    /* buttons, form inputs */
  --po-radius-panel: 16px;     /* panels, tiles, cards */
  --po-radius-band: 0;         /* structural bands and heroes stay square */

  /* ---- Scrim ---- */
  --po-scrim: rgba(0, 0, 0, 0.55);  /* flat translucent black over imagery;
                                       solid color at reduced opacity.
                                       Legibility scrims stay flat; only
                                       photographic canvas-blend fades may
                                       use gradients (amended rule above) */
  --po-scrim-panel: rgba(0, 0, 0, 0.72);      /* heavier flat panel scrim:
                                       contained dark panel behind footer
                                       link columns over the stage photo */
  --po-hairline-faint: rgba(208, 208, 208, 0.28); /* grey-100 at 28%: subdued
                                       hairline dividers over imagery
                                       (e.g. footer copyright rule) */
}

/* ==========================================================================
   Base
   ========================================================================== */

body {
  background: var(--po-canvas);
  color: var(--po-white);
  font-family: var(--po-font);
  font-weight: var(--po-weight-regular);
}

h1, h2, h3, .po-display {
  font-family: var(--po-font);
  font-weight: var(--po-weight-extrabold);
  text-transform: uppercase;
}

/* ==========================================================================
   Buttons — standard (sitewide)
   Primary: solid accent blue, dark text; hover inverts to outline.
   Secondary: outline; hover fills.
   Form submits are primary at input height — EXCEPT the footer E-updates GO,
   which takes the secondary treatment so all four footer-area buttons
   behave identically (decided July 9, 2026).
   Footer nav-button stack (BUY TICKETS / GIVE NOW / SUBSCRIBE): all
   secondary, identical width and height; hierarchy by order alone.
   ========================================================================== */

.po-btn {
  display: inline-block;
  font-family: var(--po-font);
  font-weight: var(--po-weight-bold);
  text-transform: uppercase;
  border-radius: var(--po-radius-control);
  padding: 0.75em 1.5em;
  border: 2px solid var(--po-accent);
  cursor: pointer;
  text-decoration: none;
}

.po-btn--primary {
  background: var(--po-accent);
  color: var(--po-canvas);
}
.po-btn--primary:hover {
  background: transparent;
  color: var(--po-accent);
}

.po-btn--secondary {
  background: transparent;
  color: var(--po-white);
}
.po-btn--secondary:hover {
  background: var(--po-accent);
  color: var(--po-canvas);
}

.po-btn--giving {                 /* restricted: giving contexts only */
  background: var(--po-giving-red);
  border-color: var(--po-giving-red);
  color: var(--po-white);
}

/* ==========================================================================
   Links — arrow standard (sitewide)
   Arrows TRAIL their labels, never lead. Arrow nudges right on hover.
   ========================================================================== */

.po-link {
  color: var(--po-accent);
  font-weight: var(--po-weight-bold);
  text-transform: uppercase;
  text-decoration: none;
}
.po-link .arrow {
  display: inline-block;
  margin-left: 0.4em;
  transition: transform 120ms ease;
}
.po-link:hover .arrow { transform: translateX(4px); }

/* ==========================================================================
   Navigation
   Main nav rollover: one sliding 3px accent indicator eases between items
   (~200ms ease-out; per-item fade under reduced motion) and marks the
   active page. The per-item underline below is the CSS-only / no-JS
   equivalent of that indicator.
   Mega menu: solid slate panel, borderless, bottom corners 16px, spanning
   the nav item list; white links that turn accent blue with underline on
   rollover. Promo image renders at native size (279px), never upscaled.
   ========================================================================== */

.po-nav a {
  color: var(--po-white);
  text-transform: uppercase;
  font-weight: var(--po-weight-bold);
  text-decoration: none;
  border-bottom: 3px solid transparent;
}
.po-nav a:hover,
.po-nav a.active { border-bottom-color: var(--po-accent); }

.po-mega {
  background: var(--po-slate);
  border-radius: 0 0 var(--po-radius-panel) var(--po-radius-panel);
}
.po-mega a { color: var(--po-white); text-decoration: none; }
/* Slate surface: hover stays white TEXT (accent is 4.43:1 on slate, below
   the 4.5:1 text minimum); the accent underline is non-text decoration and
   clears the 3:1 non-text requirement. */
.po-mega a:hover {
  color: var(--po-white);
  text-decoration: underline;
  text-decoration-color: var(--po-accent);
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}

/* ==========================================================================
   Bands, tiles, imagery
   ========================================================================== */

.po-band { border-radius: var(--po-radius-band); }         /* square */
.po-tile { border-radius: var(--po-radius-panel); overflow: hidden; }
.po-hero {
  border-radius: var(--po-radius-band);
  background-size: cover;
  background-position: center;
}
.po-hero .content { background: var(--po-scrim); }

.po-footer {
  background-size: cover;
  background-position: bottom;   /* anchor to reveal the stage, per live site */
}
.po-footer a { color: var(--po-grey-100); }
.po-footer a:hover { color: var(--po-white); }

/* ==========================================================================
   Forms
   ========================================================================== */

.po-input {
  border-radius: var(--po-radius-control);
  font-family: var(--po-font);
  border: 1px solid var(--po-grey-100);
  padding: 0.6em 0.9em;
}