/* =============================================================================
   FOKUS MENSCH SHOP — CI-Styling
   Einzige Quelle für Theme-Anpassungen. KEINE Customizer-CSS.
   Browser-Target: Safari 16.5+ / Chrome/FF aktuell.
   ============================================================================= */

/* -------------------------------------------------------------------------- *
 * 1. Design-Token (1:1 aus fokusmensch.info)
 * -------------------------------------------------------------------------- */
:root {
	--primary:        #ca1517;
	--secondary:      #109ed1;
	--tertiary:       #e7bf47;
	--quaternary:     #bfd544;
	--gray:           #e3e3e3;
	--lightGray:      #f3f3f3;
	--white:          #ffffff;

	--fontColor:      #000000;
	--fontColorLight: #ffffff;
	--linkColor:      #000000;
	--linkColorDark:  #941D81;

	--navigationBg:   #ffffff;
	--footerBg:       #ca1517;

	--btnPrimary:     #960f11;
	--btnSecondary:   #00487e;
	--btnTertiary:    #ffdf4c;
	--btnQuaternary:  #91a233;
	--btnWhite:       #f2f2f2;
	--btnBlack:       #262626;

	--btnPrimaryInactive:    #ca1517;
	--btnSecondaryInactive:  #109ed1;
	--btnTertiaryInactive:   #e7bf47;
	--btnQuaternaryInactive: #bfd544;
	--btnWhiteInactive:      #ffffff;
	--btnBlackInactive:      #000000;

	/* Aliase für Theme-/Woo-Code */
	--fm-color-bg:           var(--white);
	--fm-color-text:         var(--fontColor);
	--fm-color-text-invert:  var(--fontColorLight);
	--fm-color-link:         var(--linkColor);
	--fm-color-link-hover:   var(--linkColorDark);
	--fm-color-accent:       var(--primary);
	--fm-color-accent-hover: var(--btnPrimary);
	--fm-color-focus:        var(--tertiary);

	--fm-font-sans:    "Inter", "Helvetica Neue", "Arial", system-ui, sans-serif;
	--fm-font-heading: "Inter", "Helvetica Neue", "Arial", system-ui, sans-serif;
	--fm-font-weight-body:  400;
	--fm-font-weight-bold:  700;
	--fm-font-weight-black: 900;
	--fm-letterspacing-heading: 0.01em;

	--fm-space-1:  0.25rem;
	--fm-space-2:  0.5rem;
	--fm-space-3:  0.75rem;
	--fm-space-4:  1rem;
	--fm-space-6:  1.5rem;
	--fm-space-8:  2rem;
	--fm-space-12: 3rem;
	--fm-space-16: 4rem;

	--fm-radius-0:    0;
	--fm-radius-1:    4px;
	--fm-radius-pill: 999px;

	/* Layout */
	--fm-content-max: 1290px;
	--fm-content-pad: clamp(1rem, 4vw, 3rem);
}

/* -------------------------------------------------------------------------- *
 * 2. Basis: Body, Headings, Links
 * -------------------------------------------------------------------------- */
html, body { font-family: var(--fm-font-sans); }

body {
	color: var(--fm-color-text);
	background: var(--fm-color-bg);
	font-weight: var(--fm-font-weight-body);
	line-height: 1.55;
}

h1, h2, h3, h4, h5, h6,
.entry-title,
.wp-block-heading {
	font-family: var(--fm-font-heading);
	font-weight: var(--fm-font-weight-black);
	letter-spacing: var(--fm-letterspacing-heading);
	color: var(--fm-color-text);
	text-transform: none;
}

.fm-uppercase,
.has-fm-uppercase { text-transform: uppercase; letter-spacing: 0.02em; }

a {
	color: var(--linkColor);
	text-decoration: underline;
	text-underline-offset: 0.15em;
	text-decoration-thickness: 0.08em;
}
a:hover,
a:focus-visible { color: var(--linkColorDark); }

/* -------------------------------------------------------------------------- *
 * 3. Focus-Indicator (WCAG 2.4.7 / 2.4.11)
 * -------------------------------------------------------------------------- */
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
	outline: 3px solid var(--fm-color-focus);
	outline-offset: 2px;
	border-radius: var(--fm-radius-1);
}

.button:focus-visible,
.wp-element-button:focus-visible,
.wp-block-button__link:focus-visible {
	outline: 3px solid var(--fm-color-focus);
	outline-offset: 3px;
	box-shadow: 0 0 0 5px var(--btnBlack);
}

/* -------------------------------------------------------------------------- *
 * 4. Buttons — SVG-Mask wie Hauptseite, mit Pill-Fallback
 * -------------------------------------------------------------------------- *
 *  Strategie:
 *    - mask-image: SVG aus assets/img/button-bg-*.svg
 *    - Background-color = Buttonfarbe → durch Mask wird Pille-Form sichtbar.
 *    - Fallback: border-radius:pill für Browser ohne Mask (alt) und Mobil
 *      (per @media auf mobile wieder Pille statt schräge Maske, weil das
 *      SVG nur in Breitformat sauber aussieht).
 *    - Padding leicht erhöht, weil die Wellen-Maske oben/unten knapp wird.
 * -------------------------------------------------------------------------- */

/* Gemeinsamer Button-Reset */
.button,
button.button,
.wp-block-button__link,
input[type="submit"],
.wp-element-button,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt,
.woocommerce #respond input#submit {
	display: inline-block;
	padding: 0.9rem 2rem;
	font-weight: var(--fm-font-weight-bold);
	font-family: var(--fm-font-sans);
	text-decoration: none;
	cursor: pointer;
	border: 0;
	background-color: var(--btnPrimaryInactive);
	color: var(--fontColorLight);
	border-radius: var(--fm-radius-pill);
	line-height: 1.2;
	text-align: center;
	transition: background-color 0.15s ease, color 0.15s ease;
}

/* Default-Hover (primary) */
.button:hover,
.button:focus-visible,
button.button:hover,
.wp-block-button__link:hover,
.wp-block-button__link:focus-visible,
.wp-element-button:hover,
.wp-element-button:focus-visible,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover {
	background-color: var(--btnPrimary);
	color: var(--fontColorLight);
}

/* Mask-Image (nur Desktop ≥ 768px, weil das Wellen-SVG bei schmalen
   Buttons unsauber wirkt) */
@supports (mask-image: url('')) {
	@media (min-width: 768px) {
		.button,
		.wp-block-button__link,
		.wp-element-button,
		.woocommerce a.button,
		.woocommerce button.button,
		.woocommerce input.button,
		.woocommerce a.button.alt,
		.woocommerce button.button.alt {
			-webkit-mask-image: url('../img/button-bg-primary.svg');
			        mask-image: url('../img/button-bg-primary.svg');
			-webkit-mask-repeat: no-repeat;
			        mask-repeat: no-repeat;
			-webkit-mask-position: center center;
			        mask-position: center center;
			-webkit-mask-size: 100% 100%;
			        mask-size: 100% 100%;
			border-radius: 0;          /* Mask übernimmt Form */
			padding: 1.1rem 2.4rem;    /* mehr Luft wegen Wellen-Top/Bottom */
		}
	}
}

/* Sekundär — blau */
.is-style-fm-secondary > .wp-block-button__link,
.button.is-style-fm-secondary,
a.button.fm-secondary,
.wp-element-button.fm-secondary {
	background-color: var(--btnSecondaryInactive);
	color: var(--fontColorLight);
}
.is-style-fm-secondary > .wp-block-button__link:hover,
.button.is-style-fm-secondary:hover,
a.button.fm-secondary:hover {
	background-color: var(--btnSecondary);
	color: var(--fontColorLight);
}

/* Tertiär — gelb (schwarzer Text) */
.is-style-fm-tertiary > .wp-block-button__link,
.button.is-style-fm-tertiary,
a.button.fm-tertiary {
	background-color: var(--btnTertiaryInactive);
	color: var(--fontColor);
}
.is-style-fm-tertiary > .wp-block-button__link:hover,
.button.is-style-fm-tertiary:hover {
	background-color: var(--btnTertiary);
	color: var(--fontColor);
}

/* Quaternär — grün */
.is-style-fm-quaternary > .wp-block-button__link,
.button.is-style-fm-quaternary,
a.button.fm-quaternary {
	background-color: var(--btnQuaternaryInactive);
	color: var(--fontColor);
}
.is-style-fm-quaternary > .wp-block-button__link:hover,
.button.is-style-fm-quaternary:hover {
	background-color: var(--btnQuaternary);
	color: var(--fontColor);
}

/* Weiß */
.is-style-fm-white > .wp-block-button__link,
.button.is-style-fm-white,
a.button.fm-white {
	background-color: var(--btnWhiteInactive);
	color: var(--fontColor);
}
.is-style-fm-white > .wp-block-button__link:hover,
.button.is-style-fm-white:hover {
	background-color: var(--btnWhite);
	color: var(--fontColor);
}

/* Schwarz */
.is-style-fm-black > .wp-block-button__link,
.button.is-style-fm-black,
a.button.fm-black {
	background-color: var(--btnBlackInactive);
	color: var(--fontColorLight);
}
.is-style-fm-black > .wp-block-button__link:hover,
.button.is-style-fm-black:hover {
	background-color: var(--btnBlack);
	color: var(--fontColorLight);
}

/* Mask je Variante (Desktop) */
@supports (mask-image: url('')) {
	@media (min-width: 768px) {
		.is-style-fm-secondary > .wp-block-button__link,
		.button.is-style-fm-secondary,
		a.button.fm-secondary {
			-webkit-mask-image: url('../img/button-bg-secondary.svg');
			        mask-image: url('../img/button-bg-secondary.svg');
		}
		.is-style-fm-tertiary > .wp-block-button__link,
		.button.is-style-fm-tertiary,
		a.button.fm-tertiary {
			-webkit-mask-image: url('../img/button-bg-tertiary.svg');
			        mask-image: url('../img/button-bg-tertiary.svg');
		}
		.is-style-fm-quaternary > .wp-block-button__link,
		.button.is-style-fm-quaternary,
		a.button.fm-quaternary {
			-webkit-mask-image: url('../img/button-bg-quaternary.svg');
			        mask-image: url('../img/button-bg-quaternary.svg');
		}
		.is-style-fm-white > .wp-block-button__link,
		.button.is-style-fm-white,
		a.button.fm-white {
			-webkit-mask-image: url('../img/button-bg-white.svg');
			        mask-image: url('../img/button-bg-white.svg');
		}
		.is-style-fm-black > .wp-block-button__link,
		.button.is-style-fm-black,
		a.button.fm-black {
			-webkit-mask-image: url('../img/button-bg-black.svg');
			        mask-image: url('../img/button-bg-black.svg');
		}
	}
}

/* -------------------------------------------------------------------------- *
 * 5. Farbsektionen (CSS-Klasse am Gruppen-Block)
 * -------------------------------------------------------------------------- */
.fm-section {
	padding-block: var(--fm-space-12);
	padding-inline: var(--fm-content-pad);
}
.fm-section--primary   { background: var(--primary);    color: var(--fontColorLight); }
.fm-section--secondary { background: var(--secondary);  color: var(--fontColorLight); }
.fm-section--tertiary  { background: var(--tertiary);   color: var(--fontColor); }
.fm-section--quaternary{ background: var(--quaternary); color: var(--fontColor); }
.fm-section--light     { background: var(--lightGray);  color: var(--fontColor); }
.fm-section--dark      { background: var(--fontColor);  color: var(--fontColorLight); }

.fm-section--primary a,
.fm-section--secondary a,
.fm-section--dark a       { color: var(--fontColorLight); }
.fm-section--tertiary a,
.fm-section--quaternary a,
.fm-section--light a      { color: var(--fontColor); }

/* Headings im farbigen Block farblich übernehmen, sonst kommen sie schwarz */
.fm-section--primary :is(h1,h2,h3,h4,h5,h6),
.fm-section--secondary :is(h1,h2,h3,h4,h5,h6),
.fm-section--dark :is(h1,h2,h3,h4,h5,h6) {
	color: var(--fontColorLight);
}

/* Inhalts-Container in fm-section */
.fm-section > * {
	max-width: var(--fm-content-max);
	margin-inline: auto;
}

/* -------------------------------------------------------------------------- *
 * 6. Header / Navigation
 * -------------------------------------------------------------------------- */
.site-header,
.site-header-row,
.site-header-row-container-inner,
#main-header {
	background: var(--navigationBg);
	color: var(--fontColor);
}

.site-branding img,
.custom-logo {
	max-height: 90px;
	width: auto;
}

.site-header-item.site-header-focus-item.site-header-item-main-right,
.site-header-main-section-right {
	justify-content: flex-end;
}

/* Hauptnavigation */
.main-navigation .primary-menu-container > ul > li.menu-item > a,
.header-navigation-style-standard .header-menu-container ul.menu > li.menu-item > a {
	font-family: var(--fm-font-heading);
	font-weight: var(--fm-font-weight-bold);
	font-size: 1.05rem;
	color: var(--fontColor);
	text-decoration: none;
	padding: 0.6em 1em;
	border-radius: 0;
	position: relative;
	transition: color 0.15s ease;
	box-shadow: none;
}

/* Hover-Effekt: lila Schrift, kein BG, kein Underline */
.main-navigation .primary-menu-container > ul > li.menu-item > a:hover,
.main-navigation .primary-menu-container > ul > li.menu-item > a:focus-visible,
.header-navigation-style-standard .header-menu-container ul.menu > li.menu-item > a:hover,
.header-navigation-style-standard .header-menu-container ul.menu > li.menu-item > a:focus-visible {
	color: var(--linkColorDark);
	background: transparent;
	box-shadow: none;
}

/* Aktiver Menüpunkt: roter Underline-Balken unter dem Text */
.main-navigation .primary-menu-container > ul > li.menu-item.current-menu-item > a,
.main-navigation .primary-menu-container > ul > li.menu-item.current-menu-ancestor > a,
.main-navigation .primary-menu-container > ul > li.menu-item.current_page_item > a,
.main-navigation .primary-menu-container > ul > li.menu-item.current-menu-parent > a,
.header-navigation .current-menu-item > a,
.header-navigation .current-menu-ancestor > a,
.header-navigation .current_page_item > a,
.header-navigation .current-menu-parent > a {
	color: var(--fontColor);
	background: transparent;
	box-shadow: inset 0 -4px 0 0 var(--primary);
}

.main-navigation .primary-menu-container > ul > li.menu-item.current-menu-item > a:hover,
.header-navigation .current-menu-item > a:hover {
	color: var(--linkColorDark);
	box-shadow: inset 0 -4px 0 0 var(--primary);
}

/* Dropdown */
.header-navigation .header-menu-container ul ul.sub-menu,
.header-navigation .header-menu-container ul ul.submenu {
	background: var(--white);
	border: 1px solid var(--gray);
	box-shadow: 0 6px 16px rgba(0,0,0,0.08);
}
.header-navigation .header-menu-container ul ul li.menu-item > a {
	color: var(--fontColor);
	font-weight: var(--fm-font-weight-bold);
	background: var(--white);
}
.header-navigation .header-menu-container ul ul li.menu-item > a:hover,
.header-navigation .header-menu-container ul ul li.menu-item > a:focus-visible {
	background: var(--lightGray);
	color: var(--linkColorDark);
}

/* Mobile-Toggle */
.menu-toggle-open,
.mobile-toggle-open-container .menu-toggle-open { color: var(--fontColor); }
.menu-toggle-open:hover,
.mobile-toggle-open-container .menu-toggle-open:hover,
.mobile-toggle-open-container .menu-toggle-open:focus-visible {
	color: var(--primary);
}

/* -------------------------------------------------------------------------- *
 * 7. Footer — Layout wie Hauptseite: 4 Spalten (Social / Links / Kontakt / Logo)
 * -------------------------------------------------------------------------- */
.site-footer,
.site-footer-row-container,
#colophon { background: var(--footerBg); color: var(--fontColorLight); }

.site-footer a {
	color: var(--fontColorLight);
	text-decoration: underline;
}
.site-footer a:hover,
.site-footer a:focus-visible {
	color: var(--tertiary);
}

.site-footer h1, .site-footer h2, .site-footer h3, .site-footer h4 {
	color: var(--fontColorLight);
	font-size: 1.1rem;
	font-weight: var(--fm-font-weight-black);
	margin-bottom: var(--fm-space-3);
	text-transform: none;
}

.site-footer .widget { margin-bottom: var(--fm-space-6); }

/* Social-Links Reihe */
.fm-footer-social {
	display: flex;
	flex-wrap: wrap;
	gap: var(--fm-space-3);
	list-style: none;
	padding: 0;
	margin: 0;
}
.fm-footer-social li { margin: 0; }
.fm-footer-social a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.5rem;
	height: 2.5rem;
	border-radius: var(--fm-radius-pill);
	background: rgba(255,255,255,0.15);
	color: var(--fontColorLight);
	text-decoration: none;
	font-weight: var(--fm-font-weight-bold);
	transition: background-color 0.15s ease;
}
.fm-footer-social a:hover,
.fm-footer-social a:focus-visible {
	background: var(--fontColorLight);
	color: var(--primary);
}

/* Footer-Logo */
.fm-footer-logo img {
	max-width: 180px;
	height: auto;
}

/* Footer-Newsletter-Row */
.fm-footer-newsletter {
	background: rgba(0,0,0,0.10);
	padding: var(--fm-space-6) var(--fm-content-pad);
	text-align: center;
}
.fm-footer-newsletter input[type="email"] {
	max-width: 320px;
	width: 100%;
	color: var(--fontColor);
}

/* Bottom-Copyright-Row */
.site-bottom-footer-wrap {
	background: rgba(0,0,0,0.15);
}

/* -------------------------------------------------------------------------- *
 * 8. Forms
 * -------------------------------------------------------------------------- */
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="search"],
input[type="number"],
input[type="password"],
input[type="url"],
textarea,
select {
	border: 2px solid var(--gray);
	border-radius: var(--fm-radius-1);
	padding: 0.6rem 0.8rem;
	background: var(--white);
	color: var(--fontColor);
	font-family: inherit;
}
input:focus-visible,
textarea:focus-visible,
select:focus-visible { border-color: var(--secondary); }

label {
	font-weight: var(--fm-font-weight-bold);
	display: inline-block;
	margin-bottom: var(--fm-space-1);
}

/* -------------------------------------------------------------------------- *
 * 9. Skip-Link
 * -------------------------------------------------------------------------- */
.skip-link:focus,
.skip-link:focus-visible {
	background: var(--fm-color-focus);
	color: var(--fontColor);
	padding: var(--fm-space-3) var(--fm-space-6);
	font-weight: var(--fm-font-weight-bold);
	z-index: 100000;
}

/* -------------------------------------------------------------------------- *
 * 10. Hero / Cover-Block fullwidth (für Startseite)
 * -------------------------------------------------------------------------- */
.fm-hero {
	position: relative;
	min-height: clamp(360px, 60vh, 640px);
	display: flex;
	align-items: flex-end;
	color: var(--fontColorLight);
	background: var(--primary);
	padding: var(--fm-space-12) var(--fm-content-pad);
}
.fm-hero__inner {
	max-width: var(--fm-content-max);
	margin: 0 auto;
	width: 100%;
}
.fm-hero h1, .fm-hero h2 {
	color: var(--fontColorLight);
	font-size: clamp(2rem, 5vw, 3.75rem);
	line-height: 1.05;
	margin: 0 0 var(--fm-space-4);
}
.fm-hero p { font-size: clamp(1rem, 2vw, 1.25rem); max-width: 60ch; }
.fm-hero .wp-block-buttons { margin-top: var(--fm-space-6); }

/* -------------------------------------------------------------------------- *
 * 11. Content-Padding (Body-Default)
 * -------------------------------------------------------------------------- */
.content-area,
.entry-content,
.page-content {
	padding-inline: 0; /* fm-section bringt eigenes Padding mit */
}

/* WP-Innenpadding für Boxen ohne fm-section-Klasse */
.entry-content > .wp-block-group:not([class*="fm-section"]),
.entry-content > .wp-block-cover:not([class*="fm-section"]) {
	padding-inline: var(--fm-content-pad);
}

/* -------------------------------------------------------------------------- *
 * 12. Reduced Motion
 * -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		animation-duration: 0.001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.001ms !important;
		scroll-behavior: auto !important;
	}
}