/*
	Theme Name: Envision - Child
	Description: Child Theme
	Author: Orkun Gursel
	Template: envision
	Version: 1.2
*/
/** Add your custom css */

/** Dosis (variable font, self-hosted instead of Google Fonts) */
@font-face {
	font-family: 'Dosis';
	font-style: normal;
	font-weight: 200 800;
	font-display: swap;
	src: url('fontface/dosis/dosis-v34-variable.woff2') format('woff2');
}

/**
 * Envision hides the whole page until jQuery "ready" fires in the footer
 * (html.html-loading body {position:relative; left:-100%}, at the latest after
 * 6 s via app.min.js). That delays the first paint until every footer script
 * has loaded. Show the content right away; the final layout is unchanged.
 */
html.html-loading body {
	left: 0;
}

/**
 * Mobile menu toggle: Envision hides its "Navigation" label with display:none,
 * which leaves the link without an accessible name. Keep it invisible but
 * readable for screen readers.
 */
.ui--mobile-navigation-style-default .header-navigation-toogle-text {
	display: inline-block;
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/** Sans-serif fallback for the Dosis body font set in the Envision skin */
html:root body,
html:root #bbpress-forums {
	font-family: 'Dosis', 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

/** Gutenberg details block (FAQ accordion) */
.wp-block-details {
	border-bottom: 1px solid rgba(0, 0, 0, 0.12);
	padding: 0.75em 0;
}
.wp-block-details summary {
	cursor: pointer;
	font-weight: 600;
}
.wp-block-details summary:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 2px;
}
.wp-block-details > :not(summary) {
	margin-top: 0.75em;
}

/**
 * FAQ CTA (Gutenberg button with class frk-button-senden) in the site's rosé.
 * The parent theme colours every block button blue with
 * "#page-content .wp-block-button:not(.is-style-outline) .wp-block-button__link"
 * (and dark grey on hover); these selectors repeat it plus our class, so each
 * state wins by exactly one class without !important.
 * #9c5b72 = darkened accent #bb7a8f, white text 5.1:1; hover #864a5f 6.7:1.
 */
#page-content .wp-block-button.frk-button-senden {
	margin-bottom: 1.5em;
}
#page-content .wp-block-button.frk-button-senden:not(.is-style-outline) .wp-block-button__link {
	padding: 0.7em 1.6em;
	font-family: inherit;
	font-size: 1em;
	font-weight: 600;
	line-height: 1.4;
	letter-spacing: 0.03em;
	color: #fff;
	text-decoration: none;
	background: #9c5b72;
	border: 0;
	border-radius: 4px;
}
#page-content .wp-block-button.frk-button-senden:not(.is-style-outline):hover .wp-block-button__link:hover,
#page-content .wp-block-button.frk-button-senden:not(.is-style-outline) .wp-block-button__link:focus-visible {
	color: #fff;
	text-decoration: none;
	background: #864a5f;
}
#page-content .wp-block-button.frk-button-senden:not(.is-style-outline) .wp-block-button__link:focus-visible {
	outline: 2px solid #bb7a8f;
	outline-offset: 3px;
}

/**
 * Contact Form 7 submit ("Senden", /kontakt and /en/contact-me) in the same
 * look as the FAQ CTA above. The parent theme styles every submit with
 * "button,input[type=submit]" (grey gradient, 1px border, 12px font) plus
 * "color:#7c7c7c!important" and ":hover/:focus{color:#333!important}"; the
 * skin adds "html input[type=submit]{font-size:14px}". With [type=submit] each
 * selector below outranks the matching parent state (also :focus/:active) by
 * one class, independent of load order; only the text colour needs !important
 * to beat the parent's !important.
 */
.wpcf7 input.wpcf7-submit[type=submit] {
	-webkit-appearance: none;
	appearance: none;
	padding: 0.7em 1.6em;
	font-family: inherit;
	font-size: 1em;
	font-weight: 600;
	line-height: 1.4;
	letter-spacing: 0.03em;
	color: #fff !important;
	text-shadow: none;
	background: #9c5b72;
	border: 0;
	border-radius: 4px;
	box-shadow: none;
}
.wpcf7 input.wpcf7-submit[type=submit]:hover,
.wpcf7 input.wpcf7-submit[type=submit]:focus-visible {
	background: #864a5f;
}
.wpcf7 input.wpcf7-submit[type=submit]:focus-visible {
	outline: 2px solid #bb7a8f;
	outline-offset: 3px;
}
/* no parent focus ring after a mouse click; keyboard focus keeps the outline above */
.wpcf7 input.wpcf7-submit[type=submit]:focus:not(:focus-visible) {
	outline: 0;
}

/**
 * CF7 response box for input the visitor has to fix ("Ein oder mehrere Felder
 * sind fehlerhaft …"): rosé like the submit instead of CF7's yellow #ffb900
 * from ".wpcf7 form.invalid .wpcf7-response-output" (same group: unaccepted,
 * payment-required). The extra .wpcf7-form class wins by one class without
 * !important. sent (green), spam (orange), failed/aborted (red) stay as is.
 */
.wpcf7 form.wpcf7-form.invalid .wpcf7-response-output,
.wpcf7 form.wpcf7-form.unaccepted .wpcf7-response-output,
.wpcf7 form.wpcf7-form.payment-required .wpcf7-response-output {
	padding: 0.6em 1em;
	background: #faf3f5;
	border-color: #9c5b72;
	border-radius: 4px;
}

/**
 * Page hero: same image size and title position on all pages that start with
 * the composer sequence image → space → title (Freie Trauung, Über mich,
 * Leistungen, FAQ and their English versions). Images further down, galleries
 * and pages without a hero (Kontakt, Impressum, Datenschutz) are not matched.
 * 18:5 = ratio of the widest hero (mainslider.jpg, 1082×300); narrower images
 * are cropped slightly at top/bottom instead of rendering taller.
 * Browsers without :has() ignore these rules and keep the original look.
 */
body.page #the-content > .ui--image-wrap:first-child:has(+ .ui--space + .ui--title) {
	display: block;
}
body.page #the-content > .ui--image-wrap:first-child:has(+ .ui--space + .ui--title) > img.ui--image {
	display: block;
	box-sizing: border-box;
	width: 100%;
	aspect-ratio: 18 / 5;
	object-fit: cover;
	object-position: 50% 50%;
}

/**
 * Notice box at the bottom of the front page ("Hinweis:" / "Note:" on
 * /en/custom-wedding), a composer tagline box: rosé like the CF7 response box
 * above instead of white with a 1px #bb7a8f border. Envision prints the
 * colours as "html #tagline-1 {…}" and "html #tagline-1 >
 * .ui--tagline-background-overlay {background-color:#fff}" (dynamic-css);
 * body.home + #page-content outranks both. The overlay is made transparent so
 * the box background also fills the corners; ".radius-3px" carries
 * !important in the parent, so the radius needs it too.
 * Only the front page has tagline boxes; other pages are not matched.
 */
body.home #page-content .ui--tagline-box {
	padding: 0.9em 1em;
	color: #333;
	background: #faf3f5;
	border: 2px solid #9c5b72;
	border-radius: 4px !important;
}
body.home #page-content .ui--tagline-box > .ui--tagline-background-overlay {
	background-color: transparent;
}
body.home #page-content .ui--tagline-content p:first-child {
	margin-bottom: 0.4em;
}
body.home #page-content .ui--tagline-content p:last-child {
	margin-bottom: 0;
}
@media (min-width: 768px) {
	body.home #page-content .ui--tagline-box {
		padding: 1.1em 1.5em;
	}
}

/**
 * Boxed layout on smartphones: the skin (Default-Skin_*.css, generated from
 * the Envision theme options) sets "html .layout--boxed #page-wrap
 * {margin-top:100px}" for every width. On desktop the background image fills
 * that gap; on phones it is an empty white strip above the page frame. The
 * skin loads after this file, so the selector adds "body" to outrank it.
 * Deliberately max-width: only phones change, tablet and desktop keep the
 * value from the theme options. Bottom margin unchanged.
 */
@media (max-width: 767px) {
	html body.layout--boxed #page-wrap {
		margin-top: 0;
	}
}