/*
 * Text pages (imprint, privacy policy, terms) and the programme, after the Figma design
 * "Hebammenkongress.at (Copy)", frames 246:497 and 300:18 (.plan/textseiten-layout.md,
 * .plan/programmseite.md). Measures of the 1728 px desktop frame: page edge 40 px, content from
 * 180 px, time column 119 px, title column from 320 px, 534 px wide. Text on the gradient, no
 * white panel. Font: TT Commons Pro Medium from the site's Adobe Fonts kit. Header and footer of
 * all pages: layout.css.
 */

/* --text-edge, --text-start, --text-column: layout.css (shared with header and footer). */
html:has(> body.text-page) {
	background: linear-gradient(90deg, #99f 44.231%, #9bff8c 81.731%);
}

/* The frosted band behind the programme's day titles reaches across the window (100vw, scrollbar
   included): no sideways scrolling because of it. */
body.text-page {
	overflow-x: clip;
}

body.text-page {
	--text-medium: 500;

	background: linear-gradient(90deg, #99f 44.231%, #9bff8c 81.731%);
	color: #000;
	font-weight: var(--text-medium);
}

body.text-page .screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

body.text-page a:focus-visible {
	outline: 2px solid #000;
	outline-offset: 3px;
}

/* Content column */

.text-main {
	box-sizing: border-box;
	max-width: calc(var(--text-start) + var(--text-column));
	padding: 7.125rem 0 0 var(--text-start); /* first heading at 159 px, as in the frame: header 45 + 114 */
}

/* Imprint, privacy policy, terms: page title like the day headings of the programme, headings
   like its titles, text like its descriptions. */

body.text-page .entry-title {
	margin: 0 0 3.5rem;
	color: #fff;
	font-family: var(--font-base);
	font-size: 2.5rem;
	font-weight: var(--text-medium);
	line-height: 1.15;
	text-transform: uppercase;
	overflow-wrap: anywhere;
	-webkit-hyphens: auto;
	hyphens: auto;
}

body.text-page .entry-content,
body.text-page .text-content {
	font-size: 1.25rem;
	line-height: 1.75rem;
	-webkit-hyphens: auto;
	hyphens: auto;
	overflow-wrap: break-word;
}

body.text-page .entry-content :is(h2, h3) {
	margin: 2.5rem 0 1.5rem;
	font-size: 1.875rem;
	font-weight: var(--text-medium);
	line-height: 1.75rem;
	text-transform: uppercase;
}

body.text-page .entry-content h3 {
	font-size: 1.5rem;
}

body.text-page .entry-content :is(p, ul, ol) {
	margin: 0 0 1.5rem;
}

body.text-page .entry-content :is(ul, ol) {
	padding-left: 1.5em;
}

body.text-page .entry-content li + li {
	margin-top: 0.5rem;
}

body.text-page .entry-content a {
	color: inherit;
	text-decoration: underline;
}

/* Programme */

.program-day + .program-day {
	margin-top: 3.75rem;
}

/* The day title stays at the top of the window while its day scrolls by (on phones right below
   the sticky header, --site-header-bottom from assets/js/site-menu.js), on frosted glass across
   the window as the header of phones (Dennis, 13.11.). 1 rem of room above and below the text,
   taken back by the margins, so nothing moves. */
.program-day-title {
	position: sticky;
	top: var(--wp-admin--admin-bar--height, 0px);
	z-index: 4;
	margin: -1rem 0 2.75rem;
	padding: 1rem 0;
	color: #fff;
	font-size: 2.5rem;
	font-weight: var(--text-medium);
	line-height: 1.15;
	text-transform: uppercase;
}

.program-day-title::before {
	content: "";
	position: absolute;
	z-index: -1;
	top: 0;
	bottom: 0;
	left: calc(-1 * var(--text-start)); /* the left edge of the window */
	width: 100vw;
	background: linear-gradient(90deg, rgb(153 153 255 / 0.55) 44.231%, rgb(155 255 140 / 0.55) 81.731%);
	-webkit-backdrop-filter: blur(14px);
	backdrop-filter: blur(14px);
}

@media (max-width: 768px) {
	.program-day-title {
		top: var(--site-header-bottom, 0px);
	}
}

.program-day-title span {
	display: block;
}

.program-items {
	margin: 0;
	padding: 0;
	list-style: none;
	/* Chrome's scroll anchoring would shift the page back while a point grows (assets/js/details.js),
	   which makes the content below stutter. */
	overflow-anchor: none;
}

.program-item {
	display: grid;
	grid-template-columns: 7.4375rem 1fr; /* 119 px */
	column-gap: 1.375rem;                 /* 22 px: title column from 320 px */
	align-items: baseline;
}

/* 52 px between points, as between the workshops of the Präkongress in the frame (the
   Hauptkongresstag there has only 28 px; the larger one reads better, Dennis 12.11.). */
.program-item + .program-item {
	margin-top: 3.25rem;
}

.program-time {
	font-size: 1.25rem;
	line-height: 1.75rem;
	text-transform: uppercase;
}

.program-title {
	font-size: 1.875rem;
	line-height: 1.75rem;
	text-transform: uppercase;
	overflow-wrap: break-word;
	-webkit-hyphens: auto;
	hyphens: auto;
}

/* Details: title and "Details ⌄" in one row; the toggle sits at the last line of the title.
   Open, only the arrow, turned up. On phones the toggle goes below the title, right-aligned,
   there is no room beside it. */

/* The titles' line height (28 px) is below their size (30 px): umlaut dots and accents stick out
   above the box. While the box is animated it clips (assets/js/details.js), so the summary gets
   room above, taken back by the margin of the box; nothing moves. */
.program-details {
	margin-top: -0.75rem;
}

.program-details summary {
	padding-top: 0.75rem;
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 1.5rem;
	cursor: pointer;
	list-style: none;
}

.program-details summary::-webkit-details-marker {
	display: none;
}

.program-details summary .program-title {
	max-width: 29.5rem;
}

.program-toggle {
	display: inline-flex;
	flex-shrink: 0;
	gap: 0.5rem;
	align-items: center;
	font-size: 1rem;
	letter-spacing: 0.03em;
	line-height: 1.75rem;
	text-transform: uppercase;
}

.program-toggle::after {
	content: "";
	width: 1.0859rem;  /* 17.375 px */
	height: 1.0859rem;
	background: url("../img/details-arrow.svg") center / contain no-repeat;
	transition: transform 0.3s;
}

/* Open, only the arrow, as in the design. The word fades out but keeps its room, so the title
   next to it breaks the same way open and closed (and on phones the arrow stays put). */
.program-toggle-label {
	transition: opacity 0.3s, visibility 0.3s;
}

.program-details[open] .program-toggle-label {
	opacity: 0;
	visibility: hidden;
}

.program-details[open] .program-toggle::after {
	transform: rotate(180deg);
}

/* While a point folds in (assets/js/details.js), the toggle shows the closed state already. */
.program-details[open].is-closing .program-toggle-label {
	opacity: 1;
	visibility: visible;
}

.program-details[open].is-closing .program-toggle::after {
	transform: none;
}

.program-details summary:hover .program-toggle-label {
	text-decoration: underline;
}

.program-details summary:focus-visible {
	outline: 2px solid #000;
	outline-offset: 4px;
}

.program-text {
	margin-top: 1.75rem;
	font-size: 1.25rem;
	line-height: 1.75rem;
	text-transform: none;
}

.program-text p {
	margin: 0 0 1.5rem;
}

/* The descriptions are one weight, as in the design, also where bold was set in the editor. */
.program-text :is(strong, b) {
	font-weight: inherit;
}

.program-text > :last-child {
	margin-bottom: 0.5rem;
}

.program-text a {
	color: inherit;
}

/* Tablets and phones: same order, smaller type, time above the title */

@media (max-width: 900px) {
	.text-main {
		max-width: none;
		padding: 2.5rem var(--text-edge) 0;
	}

	body.text-page .entry-title,
	.program-day-title {
		margin-bottom: 2rem;
		font-size: 1.75rem;
	}

	.program-day-title {
		margin-bottom: 1rem; /* 2 rem, less the 1 rem of room below the text */
	}

	body.text-page .entry-content,
	body.text-page .text-content,
	.program-text {
		font-size: 1.0625rem;
		line-height: 1.5;
	}

	body.text-page .entry-content :is(h2, h3) {
		font-size: 1.375rem;
		line-height: 1.2;
	}

	body.text-page .entry-content h3 {
		font-size: 1.1875rem;
	}

	.program-item {
		grid-template-columns: 1fr;
	}

	.program-time {
		font-size: 1rem;
		line-height: 1.5rem;
	}

	.program-title {
		font-size: 1.375rem;
		line-height: 1.2;
	}

	.program-item + .program-item {
		margin-top: 2.25rem;
	}

	.program-day + .program-day {
		margin-top: 3rem;
	}
}

@media (max-width: 600px) {
	.program-details summary {
		flex-direction: column;
		align-items: flex-start;
		gap: 0.5rem;
	}

	.program-details summary .program-title {
		max-width: none;
	}

	.program-toggle {
		align-self: flex-end;
	}

}