/*
 * TownsUp — event agenda as a timeline.
 *
 * Loaded on the front end and as an editor style, so the editor shows the same
 * layout that visitors get. It is kept apart from townsup.css for that reason:
 * the editor gets only these rules, not the header and navigation ones. The
 * brand variables therefore carry their own fallbacks.
 *
 * The timeline is the brand's dotted stem turned into a schedule: times sit in
 * their own column, the lime dotted line runs down between time and session,
 * and each session hangs off it on a lime node. Everything is plain paragraphs,
 * so editors only ever type text:
 *
 *   p.townsup-agenda-day              day heading, full width
 *   p.townsup-agenda-venue            optional venue line under it
 *   .townsup-agenda                   one day (group)
 *     .townsup-agenda__item           one session (group)
 *       p.townsup-agenda__time        "10:30"
 *       p.townsup-agenda__title       session title
 *       any further p / ul            speakers, venue, visits — in muted text,
 *                                     where <strong> (Ctrl+B) marks a name
 *   .townsup-agenda__item.is-break    coffee, meals: lighter, smaller node
 *
 * Contrast: titles and names are teal #00313B on cream (13.3:1), details are
 * muted #4F6B71 (5.4:1, AA at any size). Lime is decorative only.
 */

.townsup-agenda {
	--townsup-agenda-time: 3.5rem;
	--townsup-agenda-gap: 1.75rem;
	--townsup-agenda-stem: calc(var(--townsup-agenda-time) + var(--townsup-agenda-gap) / 2);
	position: relative;
}

@media (min-width: 600px) {
	.townsup-agenda {
		--townsup-agenda-time: 4rem;
		--townsup-agenda-gap: 2.5rem;
	}
}

/* The stem: one dotted line for the whole day, from the first node to the
   last session's text. */
.townsup-agenda::before {
	content: "";
	position: absolute;
	top: 0.85em;
	bottom: 0.5em;
	left: var(--townsup-agenda-stem);
	border-left: var(--townsup-rule, 3px) dotted var(--townsup-dot, var(--wp--preset--color--lime));
	transform: translateX(-50%);
}

.townsup-agenda > .townsup-agenda__item {
	position: relative;
	display: grid;
	grid-template-columns: var(--townsup-agenda-time) minmax(0, 1fr);
	column-gap: var(--townsup-agenda-gap);
	row-gap: 0.3rem;
	align-items: baseline;
}

.townsup-agenda > .townsup-agenda__item + .townsup-agenda__item {
	margin-block-start: var(--wp--preset--spacing--40);
}

/* The node, centred on the stem and on the first line of the title. The cream
   ring cuts a clean gap in the dotted line around it. */
.townsup-agenda > .townsup-agenda__item::before {
	content: "";
	position: absolute;
	top: calc(0.85em - 0.35rem);
	left: var(--townsup-agenda-stem);
	width: 0.7rem;
	height: 0.7rem;
	border-radius: 50%;
	background: var(--wp--preset--color--lime);
	box-shadow: 0 0 0 4px var(--wp--preset--color--cream);
	transform: translateX(-50%);
}

.townsup-agenda .townsup-agenda__item > * {
	grid-column: 2;
	margin: 0;
	color: var(--wp--preset--color--teal-muted);
	font-size: var(--wp--preset--font-size--sm);
	line-height: 1.6;
}

.townsup-agenda .townsup-agenda__item > .townsup-agenda__time {
	grid-column: 1;
	grid-row: 1;
	text-align: right;
	color: var(--wp--preset--color--teal);
	font-size: var(--wp--preset--font-size--md);
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	line-height: 1.7;
	white-space: nowrap;
}

.townsup-agenda .townsup-agenda__item > .townsup-agenda__title {
	color: var(--wp--preset--color--teal);
	font-size: var(--wp--preset--font-size--md);
	font-weight: 700;
	line-height: 1.7;
	text-wrap: pretty;
}

/* A bolded name stands out from the muted role that follows it. */
.townsup-agenda .townsup-agenda__item strong {
	color: var(--wp--preset--color--teal);
	font-weight: 600;
}

.townsup-agenda .townsup-agenda__title strong {
	font-weight: inherit;
}

.townsup-agenda .townsup-agenda__item a {
	color: inherit;
}

.townsup-agenda .townsup-agenda__item > ul {
	padding-inline-start: 1.1em;
}

.townsup-agenda .townsup-agenda__item > ul > li + li {
	margin-block-start: 0.15rem;
}

/* Breaks and meals: same rhythm, less weight, so the sessions carry the eye. */
.townsup-agenda > .townsup-agenda__item.is-break::before {
	top: calc(0.85em - 0.225rem);
	width: 0.45rem;
	height: 0.45rem;
}

.townsup-agenda .townsup-agenda__item.is-break > .townsup-agenda__time,
.townsup-agenda .townsup-agenda__item.is-break > .townsup-agenda__title {
	color: var(--wp--preset--color--teal-muted);
	font-weight: 500;
}

/* ------------------------------------------------------------- day head ---- */

.townsup-agenda-day {
	margin-block-start: var(--wp--preset--spacing--60);
	padding-block-end: var(--wp--preset--spacing--20);
	border-bottom: 1px dotted var(--wp--preset--color--teal-line);
	color: var(--wp--preset--color--teal);
	font-size: var(--wp--preset--font-size--sm);
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	/* Uppercase Romanian carries breves and circumflexes; keep them clear. */
	line-height: 1.6;
}

.townsup-agenda-venue {
	margin-block-start: var(--wp--preset--spacing--20);
	color: var(--wp--preset--color--teal-muted);
	font-size: var(--wp--preset--font-size--sm);
}

.townsup-agenda-venue a {
	color: inherit;
}

.townsup-agenda-day + .townsup-agenda,
.townsup-agenda-venue + .townsup-agenda {
	margin-block-start: var(--wp--preset--spacing--40);
}

/* Whatever follows the last day (here, the registration form's heading) gets
   clear air, so it does not read as one more session. */
.townsup-agenda + :not(.townsup-agenda-day) {
	margin-block-start: var(--wp--preset--spacing--60);
}

/* ----------------------------------------------------------- jump links ---- */

/* A row of buttons that jumps to each day and to the form. The targets carry
   an HTML anchor; the margin keeps them off the top edge after the jump. */
.townsup-agenda-nav .wp-block-button__link {
	padding: 0.55rem 0.9rem;
	font-size: var(--wp--preset--font-size--xs);
	letter-spacing: 0.05em;
	text-transform: uppercase;
	line-height: 1.6;
}

.townsup-agenda-nav .is-style-outline > .wp-block-button__link {
	border: 2px solid var(--wp--preset--color--teal);
	background: transparent;
	color: var(--wp--preset--color--teal);
}

.townsup-agenda-nav .is-style-outline > .wp-block-button__link:hover,
.townsup-agenda-nav .is-style-outline > .wp-block-button__link:focus {
	background: var(--wp--preset--color--teal);
	color: var(--wp--preset--color--lime);
}

.wp-block-post-content [id] {
	scroll-margin-top: var(--wp--preset--spacing--40);
}

@media (prefers-reduced-motion: no-preference) {
	html:has(.townsup-agenda-nav) {
		scroll-behavior: smooth;
	}
}