/* Park Minigolf — legal / long-form text pages.
 *
 * Müügitingimused and Privaatsuspoliitika are the client's own pages: the text
 * is theirs, lives in WordPress, and stays editable there. This file supplies
 * only the design, so nothing here may depend on the markup being ours -- it is
 * whatever the WYSIWYG produced, which on these two pages is a flat run of
 * <p><strong>1.1</strong> ...</p> with no headings at all.
 *
 * Hence the styling is keyed on structure rather than on classes: a paragraph
 * that is nothing but a <strong> is treated as a section heading, because on
 * these pages that is exactly what it is. If the client later writes real <h2>s,
 * those are styled too and the rule below simply stops matching.
 *
 * Scoped to .pmg-text throughout -- these pages also carry base.css, which is
 * scoped to .pmg-page, and the two must not reach into each other.
 */

.pmg-text-hero {
	min-height: 300px;
	position: relative;
	display: flex;
	align-items: end;
	overflow: hidden;
	background: var(--hero-dark);
}
.pmg-text-hero img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center 55%;
	display: block;
}
.pmg-text-hero:after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(90deg, rgba(8, 38, 15, .94), rgba(8, 38, 15, .72) 45%, rgba(8, 38, 15, .16) 80%);
}
.pmg-text-hero .pmg-text-hero-inner {
	position: relative;
	z-index: 2;
	color: #fff;
	padding: var(--sp-96) 0 var(--sp-64);
}
.pmg-text-hero h1 {
	font-size: var(--fs-display);
	line-height: var(--lh-display);
	letter-spacing: -.055em;
	margin: 0;
	color: #fff;
}

.pmg-text {
	background: var(--cream);
	padding: var(--sp-64) 0 var(--sp-96);
	color: var(--ink);
	font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	line-height: var(--lh-body);
}
/* 68ch, not the full container: this is the only page on the site that is read
   rather than scanned, and 1380px of legal text is unreadable. */
.pmg-text-inner {
	width: min(68ch, calc(100% - var(--sp-48)));
	margin: auto;
}

.pmg-text p {
	font-size: var(--fs-body);
	color: var(--ink-mid);
	margin: 0 0 var(--sp-16);
}
.pmg-text a {
	color: var(--green-dark);
	text-decoration: underline;
	text-underline-offset: 3px;
}
.pmg-text a:hover { color: var(--ink); }

.pmg-text h2, .pmg-text h3 {
	font-size: var(--fs-h3);
	line-height: var(--lh-display);
	letter-spacing: -.03em;
	color: var(--ink);
	margin: var(--sp-48) 0 var(--sp-16);
}

/* The section headings these pages actually have: a paragraph holding nothing
   but bold text ("3. TASUMINE"). :has() is what makes "nothing but" testable --
   a paragraph that merely starts bold ("<strong>1.1</strong> Kirjade ...") has
   text after the <strong> and is left as body copy. */
.pmg-text p:has(> strong:only-child) {
	font-size: var(--fs-h3);
	line-height: var(--lh-display);
	letter-spacing: -.03em;
	color: var(--ink);
	margin: var(--sp-48) 0 var(--sp-16);
}
.pmg-text p:has(> strong:only-child) strong { font-weight: var(--fw-display); }
.pmg-text p:first-child:has(> strong:only-child) { margin-top: 0; }

/* Clause numbers. Bold inside a normal paragraph is the "1.1" prefix, and
   setting it in the green picks the numbering out of the wall of text. */
.pmg-text p > strong:first-child { color: var(--green-dark); }

.pmg-text ul, .pmg-text ol {
	font-size: var(--fs-body);
	color: var(--ink-mid);
	margin: 0 0 var(--sp-16);
	padding-left: var(--sp-24);
}
.pmg-text li { margin-bottom: var(--sp-8); }
.pmg-text img { max-width: 100%; height: auto; }
.pmg-text table { width: 100%; border-collapse: collapse; margin: 0 0 var(--sp-24); }
.pmg-text th, .pmg-text td {
	text-align: left;
	padding: var(--sp-8) var(--sp-16);
	border-bottom: 1px solid var(--line);
	font-size: var(--fs-body);
}

@media (max-width: 680px) {
	.pmg-text-hero { min-height: 220px; }
	.pmg-text-hero h1 { font-size: var(--fs-h1); }
	.pmg-text-hero .pmg-text-hero-inner { padding: var(--sp-64) 0 var(--sp-32); }
	.pmg-text-inner { width: calc(100% - var(--sp-24)); }
}