/*
Theme Name: Iten-Hof Child
Theme URI: https://itenhof.ch
Description: Child-Theme für Divi 5. Website des Iten-Hofs, Steinhausen.
Author: iten.digital
Template: Divi
Version: 0.1.0
Text Domain: itenhof-child
*/

/*
 * Eigenes CSS nur hier oder in assets/. Keine Hardcodes für Farben, Schriften
 * oder Abstände: dafür Divi-Design-Variablen und Presets verwenden.
 * Selektoren vor dem Einsatz am Divi-5-Markup prüfen.
 */

/* --------------------------------------------------------------------------
 * Schriften: variable Fonts mit Gewichtsbereich.
 * Divi lädt die hochgeladenen Schriften «Iten Serif» und «Iten Sans» selbst
 * (@font-face ohne font-weight-Bereich). Diese Regeln ergänzen den Bereich,
 * damit Browser die Achse nutzen statt Fettung zu synthetisieren, und liefern
 * die Kursive für Iten Sans, die Divi nicht pro Familie verwalten kann.
 * Quellen und Lizenzen: media/fonts/README.md
 * -------------------------------------------------------------------------- */
@font-face {
	font-family: "Iten Serif";
	font-style: normal;
	font-weight: 300 800;
	font-display: swap;
	src: url("/wp-content/uploads/et-fonts/iten-serif-fraunces-var.woff2") format("woff2");
}
@font-face {
	font-family: "Iten Sans";
	font-style: normal;
	font-weight: 200 900;
	font-display: swap;
	src: url("/wp-content/uploads/et-fonts/iten-sans-sourcesans3-var.woff2") format("woff2");
}
@font-face {
	font-family: "Iten Display";
	font-style: normal;
	font-weight: 200 800;
	font-display: swap;
	src: url("/wp-content/uploads/et-fonts/iten-display-bricolage-var.woff2") format("woff2");
}
@font-face {
	font-family: "Iten Sans";
	font-style: italic;
	font-weight: 200 900;
	font-display: swap;
	src: url("assets/fonts/iten-sans-sourcesans3-italic-var.woff2") format("woff2");
}

/* Überschriften: optische Grösse dem Browser überlassen, Silbentrennung
 * (lang="de-CH"), damit lange Wörter in schmalen Spalten sauber trennen. */
h1, h2, h3, h4, .et_pb_module_header {
	font-optical-sizing: auto;
	hyphens: auto;
	-webkit-hyphens: auto;
}

/* --------------------------------------------------------------------------
 * Kontaktformular (Contact Form 7 im Divi-Modul). Der Button kommt aus dem
 * Preset «Standard» des Moduls. Für die Felder hat Divi 5 keine Preset-Attribute,
 * darum hier, mit höherer Spezifität als Divis Standardregel
 * (.et_pb_contact_form_7 input …). Radius klein, Rand Sand, Fokus Hofgrün.
 * -------------------------------------------------------------------------- */
.et_pb_contact_form_7 .itenhof-form p {
	margin-bottom: var(--gvid-abstand-s);
}
.et_pb_contact_form_7 .itenhof-form label {
	display: block;
	font-weight: 600;
	color: var(--gcid-rinde);
}
.et_pb_contact_form_7 .itenhof-form input:not([type="radio"]):not([type="checkbox"]):not([type="submit"]),
.et_pb_contact_form_7 .itenhof-form textarea,
.et_pb_contact_form_7 .itenhof-form select {
	width: 100%;
	margin-top: var(--gvid-abstand-xs);
	padding: 14px 16px;
	font: inherit;
	font-size: 17px;
	color: var(--gcid-rinde);
	background-color: var(--gcid-weiss);
	border: 1px solid #D9D8CF;
	border-radius: var(--gvid-radius-klein);
	box-sizing: border-box;
	-webkit-appearance: none;
	appearance: none;
}
.et_pb_contact_form_7 .itenhof-form select {
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'><path fill='none' stroke='%231E2A21' stroke-width='1.6' d='M3 6l5 5 5-5'/></svg>");
	background-repeat: no-repeat;
	background-position: right 14px center;
	padding-right: 40px;
}
.et_pb_contact_form_7 .itenhof-form textarea {
	min-height: 160px;
}
.et_pb_contact_form_7 .itenhof-form input:focus,
.et_pb_contact_form_7 .itenhof-form select:focus,
.et_pb_contact_form_7 .itenhof-form textarea:focus {
	outline: 2px solid var(--gcid-hofgruen);
	outline-offset: 1px;
	border-color: var(--gcid-hofgruen);
}
.et_pb_contact_form_7 .itenhof-form .wpcf7-not-valid {
	border-color: var(--gcid-tomate);
}
.et_pb_contact_form_7 .itenhof-form .wpcf7-not-valid-tip {
	color: var(--gcid-tomate);
	font-size: 15px;
	margin-top: var(--gvid-abstand-xs);
}
.et_pb_contact_form_7 .itenhof-form__hinweis {
	font-size: 15px;
	color: var(--gcid-stein);
}
.et_pb_contact_form_7 .itenhof-form .wpcf7-spinner {
	display: none;
}
.et_pb_contact_form_7 .itenhof-form .wpcf7-response-output {
	margin: var(--gvid-abstand-m) 0 0;
	padding: 14px 16px;
	border: 1px solid var(--gcid-sand);
	border-radius: var(--gvid-radius-klein);
	background: var(--gcid-sand);
}
.et_pb_contact_form_7 .itenhof-form .wpcf7-form.sent .wpcf7-response-output {
	border-color: var(--gcid-hofgruen);
	background: var(--gcid-apfel);
	color: var(--gcid-rinde);
}

/* --------------------------------------------------------------------------
 * Hero mit Hintergrundvideo (Sektion mit CSS-Klasse «itenhof-hero»).
 * Divi 5 rendert das Video als <span class="et-pb-background-video"> mit
 * stummem Autoplay in Schleife, aber ohne Poster und ohne Abschaltung auf
 * kleinen Geräten. Das Posterbild liegt als Hintergrundbild der Sektion
 * darunter. Overlay für Lesbarkeit als ::after der Sektion, zwischen Video
 * (z-index -1) und Inhalt (z-index 1). Auf Handys, bei reduzierter Bewegung
 * und im Datensparmodus bleibt nur das Poster (siehe assets/hero-video.js).
 * -------------------------------------------------------------------------- */
.itenhof-hero.et_pb_section {
	position: relative;
	background-color: var(--gcid-hofgruen-dunkel);
}
.itenhof-hero.et_pb_section::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 0;
	background: rgba(30, 42, 33, 0.45);
	background: color-mix(in srgb, var(--gcid-rinde) 45%, transparent);
	pointer-events: none;
}
.itenhof-hero > .et_pb_row {
	position: relative;
	z-index: 1;
}
/* Divi blendet Inhalte über Hintergrundvideos erst ein, wenn das Video spielen kann.
 * Der Hero-Text soll sofort über dem Poster lesbar sein. */
.itenhof-hero.et_pb_preload > div {
	visibility: visible;
}
/* Buttons im Hero nie über eine Transition ein- oder ausblenden. */
.itenhof-hero .et_pb_button {
	visibility: visible !important;
	transition-property: color, background-color, border-color, box-shadow;
}
@media (max-width: 767px), (prefers-reduced-motion: reduce), (prefers-reduced-data: reduce) {
	.itenhof-hero .et-pb-background-video {
		display: none;
	}
}

/* Schwebende Freisteller (Bildmodul mit Preset «Freisteller», absolut positioniert). */
.itenhof-schwebend {
	pointer-events: none;
}
.et_pb_section {
	overflow: visible;
}
/* Freisteller dürfen über den Rand ragen, ohne horizontales Scrollen auszulösen.
 * «clip» erzeugt keinen Scroll-Container und stört den Sticky-Header nicht. */
html, body {
	overflow-x: clip;
}

/* Tabellen im Textmodul (z. B. Saisonkalender). */
.et_pb_text table {
	width: 100%;
	border-collapse: collapse;
	margin-bottom: var(--gvid-abstand-m);
}
.et_pb_text th,
.et_pb_text td {
	padding: 12px 0;
	border-bottom: 1px solid var(--gcid-sand);
	text-align: left;
	vertical-align: top;
}
.et_pb_text th {
	font-weight: 600;
	color: var(--gcid-stein);
	font-size: 15px;
	text-transform: uppercase;
	letter-spacing: 0.08em;
}
.et_pb_text ul {
	padding-left: 1.2em;
	margin-bottom: var(--gvid-abstand-m);
}
.et_pb_text li {
	margin-bottom: var(--gvid-abstand-xs);
}