/* Joe's Live Trainings: the least a training page needs. Themes style the
   rest; the popup's look comes from these custom properties, so a theme can
   set them on :root (or .joes-training-popup) instead of overriding rules. */

:root {
	--joes-training-accent: #f5c518;          /* the progress bar */
	--joes-training-popup-bg: #fff;
	--joes-training-popup-text: inherit;
	--joes-training-popup-muted: #5f5f5f;
	--joes-training-popup-radius: 1.25rem;
	--joes-training-popup-width: 30rem;
	--joes-training-popup-padding: 2.75rem 2.25rem 2.25rem;
	--joes-training-backdrop: rgba(27, 27, 27, 0.7);
}

/* What shows in each state: data-joes-training-show="open in" shows while open or signed up. */
body[data-joes-training-state="open"] [data-joes-training-show]:not([data-joes-training-show~="open"]),
body[data-joes-training-state="in"] [data-joes-training-show]:not([data-joes-training-show~="in"]),
body[data-joes-training-state="past"] [data-joes-training-show]:not([data-joes-training-show~="past"]),
body[data-joes-training-state="watch"] [data-joes-training-show]:not([data-joes-training-show~="watch"]) { display: none !important; }
/* Until the script has run (a theme without wp_body_open): the server's view. */
body.joes-training--open:not([data-joes-training-state]) [data-joes-training-show]:not([data-joes-training-show~="open"]),
body.joes-training--past:not([data-joes-training-state]) [data-joes-training-show]:not([data-joes-training-show~="past"]) { display: none !important; }
[data-joes-training-link][hidden] { display: none !important; }

/* The popup */
.joes-training-popup { width: min(100% - 2rem, var(--joes-training-popup-width)); max-width: none; padding: 0; border: 0; border-radius: var(--joes-training-popup-radius); background: var(--joes-training-popup-bg); color: var(--joes-training-popup-text); box-shadow: 0 1.5rem 4rem rgba(0, 0, 0, 0.4); overflow: hidden; }
.joes-training-popup::backdrop { background: var(--joes-training-backdrop); }
.joes-training-popup__card { position: relative; padding: var(--joes-training-popup-padding); }
.joes-training-popup__progress { position: absolute; inset: 0 0 auto; height: 0.5rem; background: rgba(0, 0, 0, 0.06); }
.joes-training-popup__progress i { display: block; width: 50%; height: 100%; background: var(--joes-training-accent); }
.joes-training-popup__close { position: absolute; top: 1rem; right: 1rem; width: 2.25rem; height: 2.25rem; padding: 0; border: 0; background: none; color: #999; font-size: 1.75rem; line-height: 1; cursor: pointer; }
.joes-training-popup__title { margin: 0; padding-right: 2rem; }
.joes-training-popup__sub { margin: 0.6rem 0 1.5rem; color: var(--joes-training-popup-muted); }
.joes-training-popup__fine { margin: 0.75rem 0 0; font-size: 0.8125rem; color: var(--joes-training-popup-muted); }
.joes-training-popup .joes-form button[type="submit"] { width: 100%; }
@media (max-width: 767px) {
	.joes-training-popup__card { padding: 2.5rem 1.5rem 1.5rem; }
}

/* The plugin's own pages (a theme with its own templates doesn't use these) */
.joes-training-page { max-width: 46rem; margin: 0 auto; padding: 3rem 1rem 4rem; }
.joes-training-page__label { font-weight: 700; margin: 0 0 0.75rem; }
.joes-training-page__sub { font-size: 1.25rem; }
.joes-training-page__time { font-weight: 600; }
.joes-training-page__hosts { display: flex; flex-wrap: wrap; gap: 1.5rem; margin: 2rem 0; }
.joes-training-page__hosts figure { margin: 0; width: 10rem; }
.joes-training-page__hosts img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 1rem; display: block; }
.joes-training-page__hosts figcaption { margin-top: 0.6rem; font-size: 0.9375rem; line-height: 1.35; }
.joes-training-page__hosts figcaption b { display: block; }
.joes-training-page__section { margin-top: 3rem; }
.joes-training-countdown { display: flex; gap: 1.5rem; margin-top: 1.5rem; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.08em; }
.joes-training-countdown b { display: block; font-size: 2rem; line-height: 1.1; text-transform: none; letter-spacing: 0; }
.joes-training-calendar { display: flex; flex-wrap: wrap; gap: 0.75rem 1.25rem; }
.joes-training-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 2rem; }
.joes-training-list h3 { margin: 0 0 0.35rem; }