/*
Theme Name: Gasthaus Synderhauf
Description: Ein angepasstes block theme von Alex und Studio Code.
Requires at least: 6.7
Tested up to: 6.9
Requires PHP: 7.2
Author: Alexander Heinz
Author URI: www.heinzedv.de
Version: 1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: synderhauf
Tags: full-site-editing, block-patterns, block-styles, wide-blocks, accessibility-ready, style-variations
*/

/* WordPress inserts a margin-block-start equal to the block gap (24px unless
   theme.json sets styles.spacing.blockGap) between the template's top-level
   sections (header part, main, footer part) — a gap that exists even when no
   markup asks for it. Zero it so sections butt edge-to-edge and own their
   vertical rhythm via padding; this does not affect block gaps inside nested
   layouts. */
.wp-site-blocks > * + * {
	margin-block-start: 0;
}

/* With that gap gone, main carries its own vertical padding so templates this
   theme does not author (WooCommerce shop, product, cart…) still clear the
   header and footer. A descendant selector, not a child one: WooCommerce wraps
   the single-product main in an extra group. Templates built from full-bleed
   sections opt out with is-flush and let the sections own the rhythm. */
.wp-site-blocks main {
	padding-block: var(--wp--preset--spacing--60) var(--wp--preset--spacing--70);
}
.wp-site-blocks main.is-flush {
	padding-block: 0;
}

:root {
	--site-bg: var( --wp--preset--color--background );
	--site-text: var( --wp--preset--color--text );
	--site-primary: var( --wp--preset--color--primary );
	--site-gold: var( --wp--preset--color--gold );
	--site-pine: var( --wp--preset--color--pine );
	--site-walnut: var( --wp--preset--color--walnut );
}

/* === header === */
.site-header {
	background: var( --site-bg );
	border-bottom: 1px solid color-mix(in srgb, var(--site-gold) 45%, transparent);
}
.site-header-inner {
	min-height: 84px;
}
.site-header .wp-block-navigation {
	font-family: var(--wp--preset--font-family--alegreya-sans);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	font-size: 0.875rem;
}
.site-header .wp-block-navigation a {
	color: inherit;
	text-decoration: none;
}
.site-header .wp-block-navigation a:hover {
	color: var(--site-primary);
}

/* === hero === */
.home-hero {
	position: relative;
	color: #fff;
}
.home-hero .wp-block-cover__background {
	opacity: 0.55;
	background: var(--site-pine);
}
.hero-eyebrow {
	color: var(--site-gold);
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

/* === section headers / eyebrows === */
.eyebrow {
	color: var(--site-primary);
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	font-size: 0.9rem;
}
.gold-rule {
	border-color: var(--site-gold);
}

/* === sections === */
.section-cream { background: var(--site-bg); }
.section-pine {
	background: var(--site-pine);
	color: #FDFAF3;
}
.section-pine .wp-block-heading { color: #fff; }
.section-pine .eyebrow { color: var(--site-gold); }

/* === cards === */
.is-style-card {
	background: var(--site-bg);
	border-radius: var(--wp--custom--rounded--md);
	border: 2px solid rgb(43 42 38 / 0.08);
    box-shadow: 0 4px 16px rgba(201, 162, 75, 0.25);
	padding: var(--wp--preset--spacing--lg);
	height: 100%;
}
.section-pine .is-style-card {
	background: color-mix(in srgb, var(--site-pine) 70%, #000 0%);
	box-shadow: 0 4px 16px rgba(201, 162, 75, 0.25);
	border: 1px solid rgb(255 255 255 / 0.12);
	color: #FDFAF3;
}
.is-style-card .pdf-name {
	color: var(--site-primary);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	font-size: 0.9rem;
}
/* On the dark pine cards, the deep-green pdf-name would vanish into the
   background; switch it to a readable light tone there. */
.section-pine .is-style-card .pdf-name {
	color: #FDFAF3;
}

/* === buttons === */
.is-style-button-outline .wp-element-button {
	background: transparent;
	color: var(--site-primary);
	border: 2px solid var(--site-primary);
}
.is-style-button-outline .wp-element-button:hover {
	background: var(--site-primary);
	color: var(--site-bg);
}

/* Core outline buttons (is-style-outline) inherit the theme's white-on-green
   styling; give them a readable treatment on the pine cover and dark sections. */
.wp-block-cover .is-style-outline .wp-element-button {
	background: transparent;
	color: #fff;
	border: 2px solid #fff;
}
.wp-block-cover .is-style-outline .wp-element-button:hover {
	background: #fff;
	color: var(--site-pine);
}
.section-pine .is-style-outline .wp-element-button {
	background: transparent;
	color: #FDFAF3;
	border: 2px solid #FDFAF3;
}
.section-pine .is-style-outline .wp-element-button:hover {
	background: #FDFAF3;
	color: var(--site-pine);
}

/* === footer === */
.site-footer {
	background: var(--site-pine);
	color: #FDFAF3;
	padding-top: var(--wp--preset--spacing--xl);
}
.site-footer .wp-block-heading,
.site-footer .wp-block-site-title a {
	color: #fff;
}
.site-footer a {
	color: var(--site-gold);
	text-decoration: none;
}
.site-footer a:hover {
	color: #fff;
}
.footer-heading {
	font-size: 1rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--site-gold);
}
.site-footer .footer-heading {
	color: var(--site-gold);
}
.footer-copyright {
	font-size: 0.85rem;
	opacity: 0.85;
}

/* === forms === */
.wp-block-jetpack-contact-form input[type="text"],
.wp-block-jetpack-contact-form input[type="email"],
.wp-block-jetpack-contact-form input[type="tel"],
.wp-block-jetpack-contact-form textarea {
	border-radius: var(--wp--custom--rounded--sm);
	border: 1px solid color-mix(in srgb, var(--site-gold) 40%, transparent);
	font-family: var(--wp--preset--font-family--alegreya-sans);
	color: var(--site-text);
}
.wp-block-jetpack-contact-form input:focus,
.wp-block-jetpack-contact-form textarea:focus {
	outline: none;
	border-color: var(--site-gold);
	box-shadow: 0 0 0 2px color-mix(in srgb, var(--site-gold) 35%, transparent);
}
.section-pine .wp-block-jetpack-contact-form .wp-block-button__link {
	background: var(--site-gold);
	color: var(--site-pine);
}
.section-pine .wp-block-jetpack-contact-form .wp-block-button__link:hover {
	filter: brightness(1.06);
}

/* === gallery === */
.wp-block-gallery {
	gap: 16px;
}

/* === slim custom PDF viewer === */
.synderhauf-pdf {
	border: 1px solid color-mix(in srgb, var(--site-gold) 45%, transparent);
	border-radius: var(--wp--custom--rounded--md);
	overflow: hidden;
}
.section-pine .synderhauf-pdf {
	border-color: rgb(255 255 255 / 0.2);
}
.synderhauf-pdf__bar {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 10px 14px;
	background: var(--site-primary);
	color: var(--site-bg);
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	font-size: 0.75rem;
	line-height: 1.2;
}
.section-pine .synderhauf-pdf__bar {
	background: color-mix(in srgb, var(--site-primary) 85%, #000 0%);
}
.synderhauf-pdf__name {
	display: none;
}
.synderhauf-pdf__pager {
	flex: 1 1 auto;
	font-weight: 400;
	letter-spacing: 0.04em;
	opacity: 0.85;
}
.synderhauf-pdf__bar .wp-element-button {
	font-size: 0.65rem;
	padding: 5.6px 11.2px;
	margin: 0;
	line-height: 1;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}
.synderhauf-pdf__open.wp-element-button {
	background: transparent;
	color: var(--site-bg);
	border: 1px solid color-mix(in srgb, var(--site-bg) 50%, transparent);
}
.synderhauf-pdf__open.wp-element-button:hover {
	background: var(--site-bg);
	color: var(--site-primary);
}
.synderhauf-pdf__download.wp-element-button {
	background: var(--site-gold);
	color: var(--site-pine);
}
.synderhauf-pdf__download.wp-element-button:hover {
	filter: brightness(1.06);
}
.synderhauf-pdf__canvas {
	background: #fff;
	text-align: center;
}
.synderhauf-pdf__canvas canvas {
	display: block;
	max-width: 100%;
	height: auto;
	background: #fff;
}
.synderhauf-pdf__fallback {
	padding: 48px 16px;
	color: var(--site-text);
}
.synderhauf-pdf__fallback a {
	color: var(--site-primary);
}
@media (max-width: 781px) {
	.synderhauf-pdf__bar {
		flex-wrap: wrap;
		gap: 8px;
	}
}

/* === responsive === */
/* Full-bleed section bands butt edge to edge: the block gap WordPress inserts
   between consecutive top-level alignfull siblings in the flow would otherwise
   show as a sliver of the page background between cream and pine bands. */
.wp-block-post-content > .alignfull + .alignfull {
	margin-block-start: 0;
}

@media (max-width: 781px) {
	/* PDF cards should be edge-to-edge, so the file embed below can span the
	   full viewport rather than the card's padded content box. Only cards that
	   contain a PDF card (the menu cards) are affected; text cards on other
	   pages keep their inset look. */
	.is-style-card:has(.wp-block-file) {
		margin-inline: calc(50% - 50vw);
		width: 100vw;
		border-radius: 0;
		max-width: none;
	}

	/* Every PDF embed spans the full viewport width on mobile, breaking out of
	   the card padding and any content gutters, so the embedded viewer is as
	   wide as the window. */
	.wp-block-file {
		width: 100vw;
		max-width: none;
		position: relative;
		left: 50%;
		transform: translateX(-50%);
	}

	.site-header-inner {
		min-height: 68px;
	}
	.site-footer-grid {
		grid-template-columns: 1fr !important;
		gap: 2rem;
	}
}

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		animation: none !important;
		transition: none !important;
		scroll-behavior: auto !important;
	}
}