/*
 * The dark look: pages using the "UP Dark" template (templates/page-dark.php, body class
 * `up-dark`). Same components, colors and controls as the light pages, on UP Black.
 *
 * - The role tokens (--up-surface, --up-ink…, design-system.css) are redefined for a dark page,
 *   so components built on them (the show sections) follow on their own.
 * - The older school components use the brand colors directly; their dark versions are below,
 *   so any .up-ds section can sit on a dark page.
 * - Salient's own page background goes dark too. The header and footer are Salient's and keep
 *   their colors until the site-wide restyle.
 *
 * Contrast (WCAG AA): white #fff and #d0d0d0 text on #141414/#1f1f1f; yellow links and focus
 * rings; UP Red only for fills behind white text and for large script text (yellow instead).
 */

body.up-dark {
	--up-page: #141414;
	--up-surface: #1f1f1f;
	--up-surface-soft: #2a2a2a;
	--up-ink: #ffffff;
	--up-muted: #d0d0d0;
	--up-line: #3d3d3d;
	--up-accent-text: var(--up-yellow);
	background: var(--up-page);
}

/* Salient's page wrappers (its own rules set white backgrounds with some weight). */
html body.up-dark #ajax-content-wrap,
html body.up-dark .container-wrap,
html body.up-dark .container-wrap .main-content,
html body.up-dark #page-header-bg {
	background-color: var(--up-page);
}

html body.up-dark .container-wrap {
	color: var(--up-muted);
}

/* ---- Base ---------------------------------------------------------------- */

body.up-dark .up-ds {
	color: var(--up-ink);
}

body.up-dark .up-ds :focus-visible {
	outline-color: var(--up-yellow);
}

body.up-dark .up-ds a:not([class]) {
	color: var(--up-yellow);
}

body.up-dark .up-ds a:not([class]):hover {
	color: var(--up-white);
}

body.up-dark .up-ds .up-script {
	color: var(--up-yellow);
}

body.up-dark .up-ds .up-small,
body.up-dark .up-ds .up-intro__text,
body.up-dark .up-ds .up-class-card__text,
body.up-dark .up-ds .up-class-option__line,
body.up-dark .up-ds .up-class-option__line a,
body.up-dark .up-ds .up-tile__text,
body.up-dark .up-ds .up-faq__answer p {
	color: var(--up-muted);
}

/* ---- Buttons, chips, tiles ----------------------------------------------- */

body.up-dark .up-ds .up-btn--secondary {
	border-color: var(--up-white);
	color: var(--up-white);
}

body.up-dark .up-ds .up-btn--secondary:hover {
	background: var(--up-white);
	color: var(--up-black);
}

body.up-dark .up-ds .up-btn--primary:hover {
	background: #e0001a;
	border-color: #e0001a;
}

body.up-dark .up-ds .up-chip {
	background: transparent;
	border-color: var(--up-white);
	color: var(--up-white);
}

body.up-dark .up-ds .up-chip:hover {
	background: var(--up-white);
	color: var(--up-black);
}

body.up-dark .up-ds .up-tile {
	background: var(--up-surface-soft);
}

html body.up-dark .up-ds .up-tile__title {
	color: var(--up-ink);
}

/* ---- Day picker (school.css) --------------------------------------------- */

body.up-dark .up-ds .up-day-picker__day {
	background: transparent;
	border-color: #8a8a8a;
	color: var(--up-white);
}

body.up-dark .up-ds .up-day-picker__day:hover {
	background: var(--up-surface-soft);
	border-color: var(--up-white);
}

body.up-dark .up-ds .up-day-picker__day[aria-pressed="true"] {
	background: var(--up-red);
	border-color: var(--up-red);
	color: var(--up-white);
}

/* ---- Show sections (shows.css) ------------------------------------------- */

body.up-dark .up-ds .up-date-chip {
	background: transparent;
	border-color: #8a8a8a;
}

body.up-dark .up-ds a.up-date-chip:hover {
	background: var(--up-red);
	border-color: var(--up-red);
}

body.up-dark .up-ds .up-date-chip--closed {
	border-color: #6a6a6a;
}

body.up-dark .up-ds .up-poster--black {
	background: #000;
	box-shadow: inset 0 0 0 2px var(--up-line);
}

/* ---- School sections (school.css, sections.css, catalog.css) -------------- */

body.up-dark .up-ds .up-class-card {
	background: var(--up-surface);
	border-color: var(--up-line);
}

body.up-dark .up-ds .up-class-option__summary,
body.up-dark .up-ds .up-class-option--empty {
	background: var(--up-surface-soft);
}

body.up-dark .up-ds .up-class-option__when {
	color: var(--up-ink);
}

body.up-dark .up-ds .up-hero__panel,
body.up-dark .up-ds .up-path__panel {
	background: var(--up-surface);
	color: var(--up-ink);
}

body.up-dark .up-ds .up-hero__text,
body.up-dark .up-ds .up-path__pitch {
	color: var(--up-muted);
}

body.up-dark .up-ds .up-hero__back {
	color: var(--up-yellow);
}

body.up-dark .up-ds .up-step--black,
body.up-dark .up-ds .up-path--black {
	box-shadow: inset 0 0 0 2px var(--up-line);
}

body.up-dark .up-ds .up-chips__chip--butter,
body.up-dark .up-ds .up-chips__chip--blush {
	background: var(--up-surface-soft);
	color: var(--up-ink);
}

body.up-dark .up-ds .up-faq__item {
	background: var(--up-surface);
}

body.up-dark .up-ds .up-faq__question button {
	color: var(--up-ink);
}

body.up-dark .up-ds .up-faq__sign {
	color: var(--up-yellow);
}

body.up-dark .up-ds a.up-faq__link {
	color: var(--up-yellow);
}

/* The butter link band becomes a slightly lighter dark band. */
body.up-dark .up-ds.up-links {
	background: var(--up-surface);
	border-top: 2px solid var(--up-line);
	border-bottom: 2px solid var(--up-line);
}

/* A black band on a black page: set it apart. */
body.up-dark .up-ds.up-band--black {
	background: #000;
	border-top: 2px solid var(--up-line);
}

/* ---- A show's own page (/shows/{slug}/) -----------------------------------
 * UPTimePress's fallback template (.uptimepress-event) until the theme has its own
 * uptimepress/single-show.php. Salient's heading and text colors win over plain selectors,
 * hence the html body prefix. Keep in step with salient-child/style.css. */

body.up-dark .uptimepress-event {
	--uptimepress-text: var(--up-ink);
	--uptimepress-accent: var(--up-red);
	--uptimepress-accent-hover: #e0001a;
	--uptimepress-accent-text: var(--up-white);
	--uptimepress-closed-bg: var(--up-surface-soft);
	--uptimepress-closed-text: var(--up-muted);
	color: var(--up-muted);
}

html body.up-dark .uptimepress-event h1,
html body.up-dark .uptimepress-event h2,
html body.up-dark .uptimepress-event h3,
html body.up-dark .uptimepress-event h4,
html body.up-dark .uptimepress-event h5,
html body.up-dark .uptimepress-event h6,
html body.up-dark .uptimepress-event strong,
html body.up-dark .uptimepress-event b,
html body.up-dark .uptimepress-event .uptimepress-event-date-label {
	color: var(--up-ink);
}

html body.up-dark .uptimepress-event p,
html body.up-dark .uptimepress-event li,
html body.up-dark .uptimepress-event .uptimepress-event-venue {
	color: var(--up-muted);
}

html body.up-dark .uptimepress-event-description a {
	color: var(--up-yellow);
}

html body.up-dark .uptimepress-event-description a:hover {
	color: var(--up-white);
}

html body.up-dark .uptimepress-event :focus-visible {
	outline: 2px solid var(--up-yellow);
	outline-offset: 2px;
}

html body.up-dark .uptimepress-event .uptimepress-event-date + .uptimepress-event-date {
	border-top: 1px solid var(--up-line);
}