/*
Theme Name: Parr Child
Theme URI: https://klostermann-design.de
Description: Child theme of Parr for klostermann-design.de. Custom styles and functionality live here so the parent theme stays untouched and updatable.
Author: Klostermann Design
Template: parr
Version: 1.0.21
Requires at least: 6.9
Requires PHP: 7.2
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: parr-child
*/

/* Custom styles for klostermann-design.de go below. */

/* Front page height fix: parr's front-page pattern gives the left
   column group min-height 100dvh AND stacks the menu toggle (~40px)
   above an inner group that is itself 100dvh tall, so the page always
   overflows by the menu height. Let the inner group fill the remaining
   space instead. */
body.home .wp-block-column > .wp-block-group[style*="100dvh"] {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
}

/* WP's constrained layout centers children via auto margins with
   !important; pin them to the right edge instead. */
body.home .wp-block-column > .wp-block-group[style*="100dvh"] > * {
	margin-left: auto !important;
	margin-right: 0 !important;
}

body.home .wp-block-column > .wp-block-group[style*="100dvh"] > .wp-block-group[style*="100dvh"] {
	min-height: 0 !important;
	flex: 1;
}

/* Logged-in views: the admin bar pushes the page down, so full-height
   blocks overflow by its height. Subtract it. */
body.admin-bar.home .wp-site-blocks > .wp-block-group[style*="100dvh"],
body.admin-bar.home .wp-block-column > .wp-block-group[style*="100dvh"] {
	min-height: calc(100dvh - var(--wp-admin--admin-bar--height, 32px)) !important;
}

body.admin-bar.home .wp-block-cover[style*="100vh"] {
	min-height: calc(100vh - var(--wp-admin--admin-bar--height, 32px)) !important;
}

/* Back-to-top button, injected via wp_footer in functions.php. */
.kd-back-to-top {
	position: fixed;
	right: 1.25rem;
	bottom: 1.25rem;
	z-index: 90;
	width: 3rem;
	height: 3rem;
	display: grid;
	place-items: center;
	font-size: 1.4rem;
	line-height: 1;
	color: var(--wp--preset--color--theme-3, #ffffff);
	background: var(--wp--preset--color--theme-5, #000000);
	border: 1px solid var(--wp--preset--color--theme-5, #000000);
	border-radius: 0;
	cursor: pointer;
	opacity: 0;
	visibility: hidden;
	transform: translateY(0.5rem);
	transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s, background-color 0.15s ease, border-color 0.15s ease;
}

.kd-back-to-top.is-visible {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

.kd-back-to-top:hover,
.kd-back-to-top:focus-visible {
	background: var(--wp--preset--color--theme-2, #1c39db);
	border-color: var(--wp--preset--color--theme-2, #1c39db);
}

.kd-back-to-top:focus-visible {
	outline: 2px solid var(--wp--preset--color--theme-2, #1c39db);
	outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
	.kd-back-to-top {
		transition: none;
		transform: none;
	}
}

/* Overlay menu: render the close control as a cross instead of the
   "schließen" text label. The label stays in the DOM for screen
   readers; it is collapsed via font-size and a glyph drawn instead.
   The class is tripled to out-rank core's tripled-selector rule that
   sets font-size: inherit on this button. */
.wp-block-navigation__responsive-container-close.wp-block-navigation__responsive-container-close.wp-block-navigation__responsive-container-close {
	font-size: 0;
}

/* U+2715 is not in Mouse Memoirs, so it falls back to a system font
   and keeps a light, hairline stroke regardless of the menu weight. */
.wp-block-navigation__responsive-container-close::before {
	content: "\2715";
	display: block;
	font-size: calc(var(--wp--preset--font-size--x-large, 2rem) * 1.6);
	font-weight: 400;
	line-height: 1;
	margin-bottom: 1.5rem;
}

/* Loved by the King ships an unusually wide space glyph; pull word
   gaps back to a normal rhythm. Set on body so all body copy inherits
   it, and reset for elements that use other fonts. */
body {
	word-spacing: -0.2em;
}
h1, h2, h3, h4, h5, h6,
.wp-block-navigation,
.wp-block-site-title {
	word-spacing: normal;
}

/* Front page: the vertical site title's line box is taller than the
   glyphs (line height 1em + 0.5rem), so the ink ends ~0.16em left of
   the element's right edge while the "menü" label above has no such
   bearing. Shift the glyphs right so both visual right edges line up.
   em-based so it tracks the fluid font size; transform so layout is
   untouched. */
.wp-block-site-title[style*="vertical-rl"] {
	transform: translateX(0.16em);
}

/* Mouse Memoirs only ships weight 400; some site-title blocks carry
   an inline font-weight (700/900) saved in template content, which
   would trigger blurry synthetic bolding. Clamp to the real maximum. */
.wp-block-site-title,
.wp-block-site-title a {
	font-weight: 400 !important;
}

/* ----------------------------------------------------------------
   Masonry galleries (Masonry.js)
   Core lays gallery images out as equal-height flex rows; instead
   masonry-gallery.js runs DeSandro's Masonry (bundled with WP core)
   over the block. The column width and gutter come from the sizer
   elements the script injects, so the responsive behavior (3/2/1
   columns) stays in CSS. Landscape images get .kd-landscape and a
   two-column width. Core sizes the figures with an ID-level
   specificity hack (:not(#individual-image)), hence the !important
   overrides.
   ---------------------------------------------------------------- */

.wp-block-gallery.has-nested-images {
	display: block !important;
}

.wp-block-gallery.has-nested-images .kd-gallery-sizer,
.wp-block-gallery.has-nested-images figure.wp-block-image {
	width: calc((100% - 2 * 1rem) / 3) !important;
}

.wp-block-gallery.has-nested-images .kd-gallery-gutter {
	width: 1rem;
}

.wp-block-gallery.has-nested-images figure.wp-block-image.kd-landscape {
	width: calc((100% - 2 * 1rem) / 3 * 2 + 1rem) !important;
}

/* The page template's post-content layout defines contentSize 800px
   without a wideSize, so its generated container CSS caps .alignwide
   at 800px too. Give wide galleries the theme's real wide size. */
.wp-block-post-content > .wp-block-gallery.alignwide {
	max-width: var(--wp--style--global--wide-size, 1376px);
}

/* Core backs its overlay captions with a frosted-glass strip: a
   ::before pseudo-element at the bottom of every captioned figure
   carrying backdrop-filter: blur(3px). With the captions moved below
   the image that invisible strip sits exactly on the caption text
   and blurs it — remove the pseudo-element entirely. */
.wp-block-gallery.has-nested-images figure.wp-block-image:has(figcaption)::before {
	content: none;
}

/* Core overlays gallery captions on the image bottom with a dark
   gradient scrim; put them back into the flow below the image. The
   extra .wp-element-caption class out-ranks core's rule regardless
   of load order. */
.wp-block-gallery.has-nested-images figure.wp-block-image figcaption.wp-element-caption {
	position: static;
	background: none;
	color: inherit;
	padding: 0;
	margin: 0.5em 0 0;
	max-height: none;
	overflow: visible;
	/* Core's gallery rule also shrinks captions to .8em; re-assert
	   the theme size (body size: large * 1.2) at this rule's higher
	   specificity. */
	font-size: calc(var(--wp--preset--font-size--large, 1.375rem) * 1.2);
	line-height: 1.5;
	/* Core sets will-change: transform, which puts the caption on its
	   own compositing layer; at the fractional offsets the masonry
	   grid produces, that layer is rasterized off the pixel grid and
	   the text goes blurry. */
	will-change: auto;
	/* Core also gives the (originally white-on-image) caption a black
	   0 0 1.5px glow shadow for legibility on photos. Below the image
	   on a white page it just smears the black text — drop it. */
	text-shadow: none;
}

.wp-block-gallery.has-nested-images figure.wp-block-image {
	display: block !important;
	margin: 0 0 1rem !important;
}

.wp-block-gallery.has-nested-images figure.wp-block-image img {
	width: 100% !important;
	height: auto;
}

@media (max-width: 899px) {
	.wp-block-gallery.has-nested-images .kd-gallery-sizer,
	.wp-block-gallery.has-nested-images figure.wp-block-image {
		width: calc((100% - 1rem) / 2) !important;
	}

	.wp-block-gallery.has-nested-images figure.wp-block-image.kd-landscape {
		width: 100% !important;
	}
}

@media (max-width: 599px) {
	.wp-block-gallery.has-nested-images .kd-gallery-sizer,
	.wp-block-gallery.has-nested-images figure.wp-block-image,
	.wp-block-gallery.has-nested-images figure.wp-block-image.kd-landscape {
		width: 100% !important;
	}
}

/* ----------------------------------------------------------------
   Text alignment
   Captions are always centered, body copy always flush left.
   ---------------------------------------------------------------- */

figcaption.wp-element-caption {
	text-align: center;
	/* Core shrinks captions to 13px; the handwriting body font renders
	   with a small apparent size, so captions match the body size
	   (large preset * 1.2, ~26px at desktop width). */
	font-size: calc(var(--wp--preset--font-size--large, 1.375rem) * 1.2);
	line-height: 1.5;
	/* parr sets text-rendering: geometricprecision globally, which
	   turns off pixel-grid snapping of glyphs; at caption sizes that
	   reads as blur. Restore the browser default for captions. */
	text-rendering: auto;
}

.wp-block-post-content p {
	text-align: left;
}

/* On phones the fluid `large` preset bottoms out at 1.1rem and the
   handwriting body font reads too small, so body copy (and captions,
   which mirror the body size) get one extra point. :root body outranks
   the global-styles selector `:root :where(body)`. */
@media (max-width: 599px) {
	:root body,
	figcaption.wp-element-caption {
		font-size: calc(var(--wp--preset--font-size--large, 1.375rem) * 1.2 + 1pt);
	}
}

/* ----------------------------------------------------------------
   Contact Form 7 styling
   Uses parr's design tokens (wp presets) with fallbacks.
   ---------------------------------------------------------------- */

.wpcf7 {
	--kd-ink: var(--wp--preset--color--theme-5, #000000);
	--kd-paper: var(--wp--preset--color--theme-3, #ffffff);
	--kd-accent: var(--wp--preset--color--theme-2, #1c39db);
	--kd-error: var(--wp--preset--color--custom-color-6, #e24f2f);
	--kd-muted: var(--wp--preset--color--theme-4, #555555);
}

.wpcf7-form p {
	margin-block: 0 1.5rem;
}

.wpcf7-form label {
	display: block;
	font-weight: 600;
}

.wpcf7-form .wpcf7-form-control-wrap {
	display: block;
	margin-top: 0.4rem;
}

.wpcf7-form input[type="text"],
.wpcf7-form input[type="email"],
.wpcf7-form input[type="tel"],
.wpcf7-form input[type="url"],
.wpcf7-form textarea {
	width: 100%;
	box-sizing: border-box;
	font: inherit;
	color: inherit;
	background: var(--kd-paper);
	border: 1px solid var(--kd-ink);
	border-radius: 0;
	padding: 0.75rem 1rem;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.wpcf7-form input:focus,
.wpcf7-form textarea:focus {
	outline: none;
	border-color: var(--kd-accent);
	box-shadow: inset 0 0 0 1px var(--kd-accent);
}

.wpcf7-form textarea {
	min-height: 11rem;
	resize: vertical;
}

.wpcf7-form input[type="submit"] {
	font: inherit;
	font-weight: 600;
	color: var(--kd-paper);
	background: var(--kd-ink);
	border: 1px solid var(--kd-ink);
	border-radius: 0;
	padding: 0.8rem 2.5rem;
	cursor: pointer;
	transition: background-color 0.15s ease, border-color 0.15s ease;
}

.wpcf7-form input[type="submit"]:hover,
.wpcf7-form input[type="submit"]:focus-visible {
	background: var(--kd-accent);
	border-color: var(--kd-accent);
}

.wpcf7-form input[type="submit"]:focus-visible {
	outline: 2px solid var(--kd-accent);
	outline-offset: 2px;
}

/* Validation and response messages */

.wpcf7-form .wpcf7-not-valid {
	border-color: var(--kd-error);
}

.wpcf7-form .wpcf7-not-valid-tip {
	color: var(--kd-error);
	font-size: 0.875em;
	margin-top: 0.35rem;
}

.wpcf7 .wpcf7-response-output {
	margin: 2rem 0 0;
	padding: 0.9rem 1.25rem;
	border: 1px solid var(--kd-muted);
}

.wpcf7 form.sent .wpcf7-response-output {
	border-color: var(--kd-accent);
	color: var(--kd-accent);
}

.wpcf7 form.invalid .wpcf7-response-output,
.wpcf7 form.unaccepted .wpcf7-response-output,
.wpcf7 form.failed .wpcf7-response-output,
.wpcf7 form.aborted .wpcf7-response-output {
	border-color: var(--kd-error);
	color: var(--kd-error);
}