/*
Theme Name:        Couleurredoute (Twenty Twenty-Five)
Theme URI:         https://couleurredoute.at/
Author:            Sofia
Description:       Child-Theme von Twenty Twenty-Five nach dem Mini-Design-Manual 2027: 
Template:          twentytwentyfive
Version:           1.0.0
Requires at least: 6.7
Requires PHP:      7.4
License:           GNU General Public License v2 or later
License URI:       https://www.gnu.org/licenses/gpl-2.0.html
Text Domain:       couleurredoute-tt5
*/

/* =============================================================
   Farben kommen aus der Palette (Design → Editor → Stile → Farben):
   accent-1 = Couleurgrün, accent-2 = Couleurgelb, accent-3 = Grün dunkel
   ============================================================= */
:root {
	--cr-green: var(--wp--preset--color--accent-1, #24664b);
	--cr-green-dark: var(--wp--preset--color--accent-3, #1b4f3a);
	--cr-yellow: var(--wp--preset--color--accent-2, #f4c000);
	--cr-black: var(--wp--preset--color--contrast, #000);
	--cr-white: var(--wp--preset--color--base, #fff);
	--cr-diag: clamp(56px, 9vw, 140px);
}

/* ---------- Links im Text: gelbe Unterstreichung ---------- */
a { text-decoration-color: var(--cr-yellow); text-decoration-thickness: 2px; text-underline-offset: 3px; }
:focus-visible { outline: 3px solid var(--cr-yellow); outline-offset: 3px; }
::selection { background: var(--cr-yellow); color: var(--cr-black); }

/* ---------- Buttons ---------- */
.wp-element-button, .wp-block-button__link { transition: background-color .2s, transform .2s; }
.wp-element-button:hover, .wp-block-button__link:hover { transform: translateY(-2px); }
.is-style-cr-gelb .wp-block-button__link,
.wc-block-components-button.contained,
.single_add_to_cart_button {
	background-color: var(--cr-yellow) !important;
	color: var(--cr-black) !important;
}
.is-style-cr-gelb .wp-block-button__link:hover,
.single_add_to_cart_button:hover { filter: brightness(.93); }

/* ---------- Überschrift mit gelbem Balken (Versalien) ---------- */
.is-style-cr-balken {
	display: block;
	width: fit-content;
	max-width: 100%;
	text-transform: uppercase;
	line-height: 1.05 !important;
	padding-right: .5em;
	border-right: 5px solid var(--cr-yellow);
}
.is-style-cr-balken.has-text-align-center { margin-inline: auto !important; }
.is-style-cr-balken.has-text-align-right { margin-left: auto !important; }

/* ---------- Gruppe: grüne Fläche mit diagonaler Oberkante ---------- */
.is-style-cr-diagonale-gruen {
	color: var(--cr-white);
	padding-top: calc(var(--cr-diag) + 3.5rem) !important;
	padding-bottom: clamp(3rem, 6vw, 5rem) !important;
	background:
		linear-gradient(to top left, var(--cr-green) 50%, transparent calc(50% + 1px)) top / 100% var(--cr-diag) no-repeat,
		linear-gradient(var(--cr-green), var(--cr-green)) 0 var(--cr-diag) / 100% calc(100% - var(--cr-diag)) no-repeat !important;
}
.is-style-cr-diagonale-gruen :is(h1, h2, h3, h4) { color: var(--cr-yellow) !important; }
.is-style-cr-diagonale-gruen :is(p, li) { color: var(--cr-white); }
.is-style-cr-diagonale-gruen a:not(.wp-element-button) { color: var(--cr-white); }
.is-style-cr-diagonale-gruen .is-style-cr-balken { border-right-color: var(--cr-white); }
.is-style-cr-diagonale-gruen .wp-block-button__link { background-color: var(--cr-yellow) !important; color: var(--cr-black) !important; }

/* ---------- Gruppe: weiß mit Diagonalen-Ecken ("geöffneter Vorhang") ---------- */
.is-style-cr-vorhang {
	padding-top: clamp(5rem, 12vw, 9rem) !important;
	padding-bottom: clamp(5rem, 12vw, 9rem) !important;
	background:
		linear-gradient(to bottom right, var(--cr-green) 50%, transparent calc(50% + 1px)) top left / 38% 30% no-repeat,
		linear-gradient(to top left, var(--cr-yellow) 50%, transparent calc(50% + 1px)) bottom right / 42% 38% no-repeat,
		var(--cr-white) !important;
}
@media (max-width: 767px) {
	.is-style-cr-vorhang {
		background:
			linear-gradient(to bottom right, var(--cr-green) 50%, transparent calc(50% + 1px)) top left / 55% 9% no-repeat,
			linear-gradient(to top left, var(--cr-yellow) 50%, transparent calc(50% + 1px)) bottom right / 50% 9% no-repeat,
			var(--cr-white) !important;
	}
	.is-style-cr-balken { border-right-width: 4px; }
}

/* ---------- Schriftzug mit gelbem Balken rechts (Kopf- und Fußbereich) ---------- */
.cr-brand { align-items: stretch !important; gap: .8rem !important; }
.cr-brand::after { content: ""; width: 4px; background: var(--cr-yellow); flex: none; }
.cr-brand .wp-block-site-logo img { display: block; height: auto; }
.cr-brand:has(.wp-block-site-logo img) .wp-block-site-title { display: none; }   /* Logo vorhanden → Titel ausblenden */
.cr-brand .wp-block-site-title { display: flex; align-items: center; }

/* ---------- Kopfbereich ---------- */
.cr-header .wp-block-navigation-item__content { padding: .45rem 0; border-bottom: 3px solid transparent; transition: border-color .2s; }
.cr-header .wp-block-navigation-item__content:hover,
.cr-header .current-menu-item > .wp-block-navigation-item__content,
.cr-header .wp-block-navigation-item__content[aria-current="page"] { border-bottom-color: var(--cr-yellow); }
.cr-header .wp-block-navigation__submenu-container { border-top: 3px solid var(--cr-green) !important; box-shadow: 0 10px 30px rgba(0,0,0,.12); }
.cr-header .wp-block-navigation__submenu-container .wp-block-navigation-item__content { border-bottom: 0; font-weight: 400; padding: .55rem 1rem; }
.cr-header .cr-cta .wp-block-button__link { font-size: .95rem; padding: .75em 1.4em; }
.cr-header .wp-block-navigation__responsive-container-open svg { fill: var(--cr-green); }

/* Handy-Menü ("geöffneter Vorhang") */
.wp-block-navigation__responsive-container.is-menu-open {
	background:
		linear-gradient(to bottom right, var(--cr-green) 50%, transparent calc(50% + 1px)) top left / 62% 16% no-repeat,
		linear-gradient(to top left, var(--cr-yellow) 50%, transparent calc(50% + 1px)) bottom right / 58% 14% no-repeat,
		var(--cr-white) !important;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content { padding-top: 6rem; }
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
	font-family: var(--wp--preset--font-family--richmond);
	font-weight: 400;
	font-size: clamp(1.8rem, 7vw, 2.6rem);
	color: var(--cr-green) !important;
	border: 0;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	font-family: var(--wp--preset--font-family--montserrat);
	font-size: 1rem;
	font-weight: 600;
	color: var(--cr-black) !important;
}
.wp-block-navigation__responsive-container-close { background: var(--cr-white); padding: .3rem; }
.wp-block-navigation__responsive-container-close svg { fill: var(--cr-green); width: 32px; height: 32px; }
@media (max-width: 599px) {
	.cr-header .wp-block-site-logo img { width: 150px !important; }
	.cr-header .cr-cta .wp-block-button__link { font-size: .85rem; padding: .6em 1em; }
}

/* ---------- Fußbereich: grüne Fläche mit Diagonale ---------- */
.cr-footer {
	--cr-diag: clamp(48px, 7vw, 110px);
	color: var(--cr-white);
	padding-top: calc(var(--cr-diag) + clamp(2.5rem, 5vw, 4rem)) !important;
	padding-bottom: 1.8rem !important;
	background:
		linear-gradient(to top left, var(--cr-green) 50%, transparent calc(50% + 1px)) top / 100% var(--cr-diag) no-repeat,
		linear-gradient(var(--cr-green), var(--cr-green)) 0 var(--cr-diag) / 100% calc(100% - var(--cr-diag)) no-repeat !important;
}
.cr-footer .wp-block-site-logo img { filter: brightness(0) invert(1); }   /* Logo automatisch weiß */
.cr-footer .wp-block-site-title, .cr-footer .wp-block-site-title a { color: var(--cr-white) !important; }
.cr-footer a, .cr-footer .wp-block-navigation-item__content { color: var(--cr-white) !important; text-decoration: none; border-bottom: 1px solid transparent; }
.cr-footer a:hover, .cr-footer .wp-block-navigation-item__content:hover { border-bottom-color: var(--cr-yellow); }
.cr-footer .wp-block-navigation { font-weight: 400; }
.cr-footer-info { margin-top: 1.2rem !important; font-size: .95rem; }
.cr-footer-bottom { margin-top: 3rem !important; padding-top: 1.3rem; border-top: 1px solid rgba(255,255,255,.25); font-size: .85rem; }
.cr-footer-bottom p { margin: 0; }
@media (max-width: 767px) {
	.cr-footer-bottom { flex-direction: column; align-items: flex-start !important; gap: .6rem !important; }
}

/* ---------- Vorlage "Volle Breite (ohne Titel)" ---------- */
.cr-main-full { margin-block-start: 0 !important; }
.cr-main-full > .wp-block-post-content > * { margin-block-start: 0; }
.wp-site-blocks > .cr-main-full + * { margin-block-start: 0; }

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