/*
Theme Name: Oskar Seeman
Theme URI: https://oskarseeman.ee/
Description: Child theme of Twenty Twenty-Five for oskarseeman.ee (Lavastus "Refrään"). Design tokens live in theme.json, layout of the sections is in this file (see docs/design-tokens.md).
Author: Tom Liske
Template: twentytwentyfive
Version: 1.2.1
Requires at least: 6.7
Requires PHP: 8.1
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: oskarseeman
*/

/*
 * How the sizes work
 * ------------------
 * The Figma frame "Veeb" is 4425 px wide. 1 Figma px = --fx, which scales with the screen width
 * (capped at 1600 px, see settings.custom in theme.json). "calc(var(--fx) * 258)" = 258 Figma px.
 * Every value has a max(<phone minimum>, …) so phones stay readable.
 * Colours and font sizes come from theme.json presets; this file only does layout.
 */
body {
	--fx: var(--wp--custom--fx);
	--edge: var(--wp--custom--edge);
	--line: var(--wp--custom--line);
	--black: var(--wp--preset--color--contrast);
	--white: var(--wp--preset--color--base);
}

/* Sections sit directly on top of each other; the black lines separate them. */
body .wp-site-blocks > * + *,
body .wp-block-post-content > * {
	margin-block: 0;
}

strong,
b {
	font-weight: 600;
}

.rf-section {
	box-sizing: border-box;
	border-bottom: var(--line) solid var(--black);
}

.rf-section p,
.rf-section h1,
.rf-section h2,
.rf-section figure {
	margin: 0;
}

/* ---------- Buttons (blue, square) ---------- */
.rf-btn .wp-block-button__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	min-width: calc(var(--fx) * 848);
	min-height: calc(var(--fx) * 243);
	padding: max(10px, calc(var(--fx) * 60)) max(16px, calc(var(--fx) * 80));
	font-size: var(--wp--preset--font-size--button);
	text-decoration: none;
	white-space: nowrap;
}

.rf-btn--small .wp-block-button__link {
	min-width: calc(var(--fx) * 611);
	min-height: calc(var(--fx) * 175);
	padding: max(8px, calc(var(--fx) * 40)) max(14px, calc(var(--fx) * 60));
	font-size: var(--wp--preset--font-size--button-small);
}

/* ---------- Header (parts/header.html) ---------- */
.rf-header {
	box-sizing: border-box;
	gap: 12px;
	padding:
		max(10px, calc(var(--fx) * 59))
		calc(var(--edge) + max(16px, calc(var(--fx) * 178)))
		max(10px, calc(var(--fx) * 64))
		calc(var(--edge) + max(16px, calc(var(--fx) * 79)));
	border-bottom: var(--line) solid var(--black);
}

.rf-header .wp-block-site-title {
	margin: 0;
}

/* ---------- 1. Tutvustus ---------- */
.rf-tutvustus {
	padding:
		max(40px, calc(var(--fx) * 258))
		calc(var(--edge) + max(20px, calc(var(--fx) * 276)))
		max(40px, calc(var(--fx) * 205))
		calc(var(--edge) + max(20px, calc(var(--fx) * 206)));
}

.rf-tutvustus .wp-block-columns {
	gap: calc(var(--fx) * 437);
	align-items: flex-start;
	margin: 0;
}

.rf-tutvustus .wp-block-columns > .wp-block-column.rf-tutvustus__text {
	flex: 0 0 calc(var(--fx) * 1675);
}

.rf-tutvustus .wp-block-columns > .wp-block-column.rf-tutvustus__poster {
	flex: 0 0 calc(var(--fx) * 1831);
	margin-top: calc(var(--fx) * 399);
}

.rf-tutvustus h1 + p {
	margin-top: max(20px, calc(var(--fx) * 160));
}

.rf-tutvustus p + p {
	margin-top: 1.09em;
}

.rf-poster img {
	display: block;
	width: 100%;
	height: auto;
}

/* ---------- 2. Piletid ---------- */
.rf-piletiriba {
	padding: max(12px, calc(var(--fx) * 70)) 20px;
	background: var(--white);
}

.rf-piletiriba .wp-block-buttons {
	justify-content: center;
}

.rf-piletid {
	padding:
		max(40px, calc(var(--fx) * 183))
		calc(var(--edge) + 20px)
		max(32px, calc(var(--fx) * 83));
	text-align: center;
}

.rf-piletid p {
	max-width: calc(var(--fx) * 2199);
	margin-inline: auto;
}

.rf-piletid p + p {
	margin-top: 1.09em;
}

/* ---------- 3. Lõpeta lause (form) ---------- */
.rf-lause {
	--box-h: max(180px, calc(var(--fx) * 867));
	--btn-w: max(90px, calc(var(--fx) * 336));
	--btn-h: max(36px, calc(var(--fx) * 134));
	--btn-right: max(12px, calc(var(--fx) * 107));
	--btn-bottom: max(12px, calc(var(--fx) * 73));
	padding:
		max(40px, calc(var(--fx) * 169))
		calc(var(--edge) + max(20px, calc(var(--fx) * 378)))
		max(40px, calc(var(--fx) * 239))
		calc(var(--edge) + max(20px, calc(var(--fx) * 286)));
}

.rf-lause .wp-block-columns {
	gap: calc(var(--fx) * 557);
	align-items: flex-start;
	margin: 0;
}

.rf-lause .wp-block-columns > .wp-block-column.rf-lause__text {
	flex: 0 0 calc(var(--fx) * 1506);
	padding-top: calc(var(--fx) * 84);
}

.rf-lause .wp-block-columns > .wp-block-column.rf-lause__form {
	flex: 0 0 calc(var(--fx) * 1698);
}

.rf-lause h2 + p {
	margin-top: max(14px, calc(var(--fx) * 113));
	font-weight: 200;
}

/* Contact Form 7: a white box with the black SAADA button inside, bottom right. */
.rf-lause .wpcf7 form {
	position: relative;
	margin: 0;
}

.rf-lause .wpcf7 form > p {
	margin: 0;
}

.rf-lause .wpcf7 label {
	display: block;
}

/* CF7 turns line breaks in the form template into <br>, which would push the box down
   and misplace the SAADA button (it is positioned from the top of the form). */
.rf-lause .wpcf7 form br {
	display: none;
}

.rf-lause .wpcf7 textarea {
	display: block;
	box-sizing: border-box;
	width: 100%;
	height: var(--box-h);
	margin: 0;
	padding: max(12px, calc(var(--fx) * 60)) max(12px, calc(var(--fx) * 60)) calc(var(--btn-h) + var(--btn-bottom) + 8px);
	border: 0;
	border-radius: 0;
	background: var(--white);
	color: var(--black);
	font-family: inherit;
	font-size: var(--wp--preset--font-size--medium);
	font-weight: 300;
	line-height: 1.2;
	resize: none;
}

.rf-lause .wpcf7 textarea:focus {
	outline: 3px solid var(--wp--preset--color--accent-2);
	outline-offset: 0;
}

.rf-lause .wpcf7 .wpcf7-submit {
	position: absolute;
	top: calc(var(--box-h) - var(--btn-h) - var(--btn-bottom));
	right: var(--btn-right);
	width: var(--btn-w);
	height: var(--btn-h);
	padding: 0;
	border: 0;
	border-radius: 0;
	background: var(--black);
	color: var(--white);
	font-family: inherit;
	font-size: var(--wp--preset--font-size--tiny);
	font-weight: 400;
	text-transform: uppercase;
	cursor: pointer;
}

.rf-lause .wpcf7 .wpcf7-submit:hover,
.rf-lause .wpcf7 .wpcf7-submit:focus {
	background: var(--wp--preset--color--accent-2);
}

.rf-lause .wpcf7 .wpcf7-spinner {
	position: absolute;
	top: calc(var(--box-h) - var(--btn-bottom) - var(--btn-h) / 2 - 12px);
	right: calc(var(--btn-right) + var(--btn-w) + 8px);
	margin: 0;
}

.rf-lause .wpcf7 .wpcf7-not-valid-tip {
	margin-top: 6px;
	color: var(--white);
	font-size: var(--wp--preset--font-size--small);
}

.rf-lause .wpcf7 form .wpcf7-response-output {
	margin: 12px 0 0;
	padding: 10px 14px;
	border: var(--line) solid var(--white);
	color: var(--white);
	font-size: var(--wp--preset--font-size--small);
}

/* ---------- 4. Toetajad ---------- */
.rf-section.rf-toetajad {
	gap: calc(var(--fx) * 170);
	padding:
		max(28px, calc(var(--fx) * 121))
		calc(var(--edge) + max(20px, calc(var(--fx) * 246)))
		max(28px, calc(var(--fx) * 120))
		calc(var(--edge) + max(20px, calc(var(--fx) * 183)));
}

.rf-toetajad p {
	font-size: var(--wp--preset--font-size--large);
	font-weight: 300;
	line-height: 1;
	white-space: nowrap;
}

.rf-toetajad .rf-logo {
	flex: 0 0 auto;
}

.rf-toetajad .rf-logo img {
	display: block;
	width: auto;
	height: calc(var(--fx) * 188);
}

/* ---------- 5. Pildirida: five photos edge to edge ---------- */
.rf-section.rf-pildirida {
	gap: 0;
}

.rf-pildirida .rf-pilt {
	flex: 1 1 0;
	min-width: 0;
}

.rf-pildirida .rf-pilt img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 886 / 1328;
	object-fit: cover;
}

/* ---------- Footer (parts/footer.html) ---------- */
.rf-footer {
	box-sizing: border-box;
	gap: 12px;
	padding:
		max(16px, calc(var(--fx) * 101))
		calc(var(--edge) + max(16px, calc(var(--fx) * 137)))
		max(16px, calc(var(--fx) * 87))
		calc(var(--edge) + max(16px, calc(var(--fx) * 140)));
}

.rf-footer p {
	margin: 0;
	color: var(--black);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 300;
}

/* ---------- Phones and small tablets: columns stack ---------- */
@media (max-width: 781px) {
	.rf-tutvustus .wp-block-columns,
	.rf-lause .wp-block-columns {
		gap: 32px;
	}

	.rf-tutvustus .wp-block-columns > .wp-block-column.rf-tutvustus__poster {
		margin-top: 0;
	}

	.rf-lause .wp-block-columns > .wp-block-column.rf-lause__text {
		padding-top: 0;
	}

	.rf-piletid p {
		max-width: none;
	}

	.rf-section.rf-toetajad {
		flex-wrap: wrap !important;
		gap: 18px 28px;
	}

	.rf-toetajad p {
		flex-basis: 100%;
	}

	.rf-toetajad .rf-logo img {
		height: 36px;
	}
}

/*
 * Visually hidden, but still read by search engines and screen readers
 * (e.g. the hidden "Lõpeta lause" label of the form).
 */
.visually-hidden {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* Honeypot field (inc/suggestions-form.php): off-screen for people, still visible to bots. */
.oskarseeman-hp {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}