/*
 * Meltingplot — Custom CSS
 * For edge cases that theme.json cannot handle.
 */

/* ================================================================
   CARDS: Light cards on dark backgrounds
   ================================================================ */

/* Cards with light background inside dark sections inherit
   the parent's light text color. Reset to dark foreground. */
.has-secondary-background-color .has-surface-background-color,
.has-secondary-background-color .has-background-background-color,
.has-primary-background-color .has-surface-background-color,
.has-primary-background-color .has-background-background-color {
	color: var(--wp--preset--color--foreground);
}

.has-secondary-background-color .has-surface-background-color h1,
.has-secondary-background-color .has-surface-background-color h2,
.has-secondary-background-color .has-surface-background-color h3,
.has-secondary-background-color .has-surface-background-color h4,
.has-secondary-background-color .has-surface-background-color h5,
.has-secondary-background-color .has-surface-background-color h6,
.has-primary-background-color .has-surface-background-color h1,
.has-primary-background-color .has-surface-background-color h2,
.has-primary-background-color .has-surface-background-color h3,
.has-primary-background-color .has-surface-background-color h4,
.has-primary-background-color .has-surface-background-color h5,
.has-primary-background-color .has-surface-background-color h6 {
	color: var(--wp--preset--color--primary);
}

/* ================================================================
   LAYOUT: Consistent image sizing in card grids
   ================================================================ */

/* Product/use-case cards: consistent image sizing
   (exclude dark sections like footer + split layouts) */
.wp-block-columns .wp-block-column .wp-block-image img:not([src*="logo"]) {
	width: 100%;
	height: 220px;
	object-fit: contain;
	background: var(--wp--preset--color--surface);
	border-radius: var(--wp--custom--border-radius--small);
	padding: 1rem;
}

/* Material section, split layouts & footer/dark sections: natural image flow */
.wp-block-columns.are-vertically-aligned-center .wp-block-image img,
.wp-block-columns .wp-block-column[style*="flex-basis"] .wp-block-image img,
.has-secondary-background-color .wp-block-columns .wp-block-column .wp-block-image img,
.has-primary-background-color .wp-block-columns .wp-block-column .wp-block-image img {
	height: auto !important;
	object-fit: cover !important;
	background: transparent !important;
	padding: 0 !important;
}

/* Product images in hero: natural sizing, no card constraints */
.wp-block-cover .wp-block-image img {
	height: auto !important;
	max-height: none !important;
	width: 100% !important;
	object-fit: contain !important;
	background: transparent !important;
	padding: 0 !important;
}

/* Hero cover: ensure full coverage */
.wp-block-cover__image-background {
	object-fit: cover;
}

/* Mobile: reduce hero cover height to minimize image decode area.
   85vh on mobile = ~717px paint area. 50vh = ~422px — 40% less decode work.
   Also limit the absolute-positioned image to the cover bounds. */
@media (max-width: 781px) {
	.wp-block-cover[style*="min-height:85vh"],
	.wp-block-cover[style*="min-height: 85vh"] {
		min-height: 50vh !important;
	}

	.wp-block-cover[style*="min-height:70vh"],
	.wp-block-cover[style*="min-height: 70vh"] {
		min-height: 45vh !important;
	}
}

/* Consistent section spacing */
.alignfull > .wp-block-group__inner-container,
.alignfull > .wp-block-cover__inner-container {
	max-width: var(--wp--style--global--wide-size);
	margin-left: auto;
	margin-right: auto;
}

/* ================================================================
   HEADER: Clean navigation alignment
   ================================================================ */

/* Logo sizing — SVG needs explicit dimensions */
.wp-block-site-logo img {
	max-height: 44px;
	width: auto;
	min-width: 120px;
	height: 44px;
}

/* Hamburger menu: replace WP's 2-line SVG with standard 3-line icon */
button.wp-block-navigation__responsive-container-open {
	position: relative;
}

button.wp-block-navigation__responsive-container-open svg {
	display: none !important;
}

button.wp-block-navigation__responsive-container-open::after {
	content: "☰";
	font-size: 28px;
	line-height: 1;
	color: var(--wp--preset--color--foreground);
}

@media (max-width: 781px) {
	/* Mobile: Logo(0) left — then push icons group + burger to the right.
	   The right group (.is-content-justification-right) contains search+account+cart.
	   We push it right with margin-left:auto and order it before burger. */
	.is-content-justification-space-between > .is-content-justification-right {
		margin-left: auto;
		order: 99;
	}

	.is-content-justification-space-between > .wp-block-navigation {
		order: 100;
	}

	/* Hide search inside the right group on mobile (it's in burger) */
	.is-content-justification-right .wp-block-search {
		display: none;
	}

	/* Logo: readable on mobile */
	.wp-block-site-logo img {
		max-height: 32px !important;
		width: auto !important;
		min-width: 100px;
	}
}

/* Navigation links: visually distinct as menu */
.wp-block-navigation .wp-block-navigation-item a {
	text-transform: uppercase;
	letter-spacing: 0.5px;
	font-size: 0.8rem;
	padding: 0.5rem 0.75rem;
	border-radius: var(--wp--custom--border-radius--small);
	transition: all 0.15s ease;
}

.wp-block-navigation .wp-block-navigation-item a:hover {
	background-color: var(--wp--preset--color--surface);
	color: var(--wp--preset--color--accent);
	text-decoration: none;
}

/* Search inside navigation: only visible in mobile overlay */
.wp-block-navigation .wp-block-search {
	display: none;
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-search {
	display: block;
	width: 100%;
	margin-top: 1rem;
}

/* Header icons: consistent 20px sizing for account + mini-cart */
.wp-block-woocommerce-customer-account svg,
.wp-block-woocommerce-customer-account img {
	width: 20px !important;
	height: 20px !important;
}

.wp-block-woocommerce-customer-account a {
	text-decoration: none;
	color: inherit;
}

.wp-block-woocommerce-mini-cart .wc-block-mini-cart__button {
	padding: 0;
}

.wp-block-woocommerce-mini-cart svg,
.wc-block-mini-cart__icon {
	width: 20px !important;
	height: 20px !important;
}

.wc-block-mini-cart__badge {
	font-size: 10px;
	background-color: var(--wp--preset--color--accent);
}

/* Trust bar: smaller on mobile */
@media (max-width: 781px) {
	.wp-block-columns.are-vertically-aligned-center .has-large-font-size {
		font-size: var(--wp--preset--font-size--medium) !important;
	}
}

/* ================================================================
   CARDS: Elevated card style with hover
   ================================================================ */

/* Product/use-case cards: subtle shadow + lift on hover */
.wp-block-column.has-border-color,
.has-surface-background-color > .wp-block-columns > .wp-block-column.has-background-color {
	box-shadow: var(--wp--custom--box-shadow--small);
	transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.wp-block-column.has-border-color:hover,
.has-surface-background-color > .wp-block-columns > .wp-block-column.has-background-color:hover {
	box-shadow: var(--wp--custom--box-shadow--medium);
	transform: translateY(-2px);
}

/* Process step cards: no lift, just subtle shadow */
.has-secondary-background-color > .wp-block-columns > .wp-block-column.has-surface-background-color {
	box-shadow: var(--wp--custom--box-shadow--small);
	transition: box-shadow 0.2s ease;
}

/* PA6 CF HT box: constrain sample image height */
.has-accent-border-color .is-vertically-aligned-center .wp-block-image img {
	max-height: 140px;
	width: auto !important;
	height: auto !important;
	object-fit: contain !important;
	margin: 0 auto;
	display: block;
}

/* ================================================================
   TESTIMONIAL: Quote decoration
   ================================================================ */

/* Constrain the accent separator line in testimonial */
.wp-block-separator.has-accent-background-color {
	width: 60px;
	margin-left: auto;
	margin-right: auto;
	border: none;
	height: 3px;
}

/* ================================================================
   GERMANIZED
   ================================================================ */

.wc-gzd-additional-info {
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--muted);
}

/* ================================================================
   WOOCOMMERCE
   ================================================================ */

.wc-block-mini-cart__badge {
	background-color: var(--wp--preset--color--accent);
}

/* Constrained columns (max wideSize) */
.mp-constrained {
	max-width: var(--wp--style--global--wide-size, 1200px);
	margin-left: auto;
	margin-right: auto;
}

/* ================================================================
   FOOTER
   ================================================================ */

/* Links: set a CSS custom property per background context.
   Light bg → accent, dark bg → accent-light.
   Links inherit via var(--mp-link-color). */
body {
	--mp-link-color: var(--wp--preset--color--accent);
	--mp-link-hover: var(--wp--preset--color--primary);
}

.has-secondary-background-color,
.has-primary-background-color,
.wp-block-cover {
	--mp-link-color: var(--wp--preset--color--accent-light);
	--mp-link-hover: #FFFFFF;
}

/* Light cards inside dark containers: reset back to dark-on-light */
.has-surface-background-color,
.has-background-background-color,
.has-neutral-200-background-color {
	--mp-link-color: var(--wp--preset--color--accent);
	--mp-link-hover: var(--wp--preset--color--primary);
}

/* Link colors: theme.json sets a { color: var(--mp-link-color) } globally.
   The cascade variables are set per background context above.
   Only add underline-offset and transition here. */
a {
	text-underline-offset: 2px;
	transition: color 0.15s ease;
}

/* Links in muted/neutral text: handled by --mp-link-color cascade.
   No overrides needed — links get accent-light on dark bg automatically. */

/* ================================================================
   TOUCH TARGETS — WCAG 2.5.8 / Google PageSpeed minimum 48x48px
   ================================================================ */

/* Social links in footer: ensure 48px touch targets with spacing */
.wp-block-social-links .wp-block-social-link {
	min-width: 44px;
	min-height: 44px;
}

.wp-block-social-links .wp-block-social-link-anchor {
	min-width: 44px;
	min-height: 44px;
	display: flex;
	align-items: center;
	justify-content: center;
}

/* Ensure gap between social icons on mobile */
@media (max-width: 781px) {
	.wp-block-social-links {
		gap: 0.5rem;
	}
}

/* ================================================================
   UTILITY
   ================================================================ */

/* ================================================================
   SCROLL ANIMATIONS
   ================================================================ */

/* Reveal: elements slide up on scroll (no opacity change for WCAG compliance) */
.mp-reveal {
	transform: translateY(20px);
	transition: transform 0.6s ease;
}

.mp-reveal.mp-visible {
	transform: translateY(0);
}

/* Respect reduced motion preference */
@media (prefers-reduced-motion: reduce) {
	.mp-reveal {
		transform: none;
		transition: none;
	}
}

/* Cover parallax: prevent overflow from scaled image */
.wp-block-cover {
	overflow: hidden;
}

/* Card columns: equal height with button at bottom (only pricing cards) */
.has-accent-background-color > .wp-block-columns.alignwide > .wp-block-column,
.wp-block-column.has-border-color.has-surface-border-color {
	display: flex;
	flex-direction: column;
}

.has-accent-background-color > .wp-block-columns.alignwide > .wp-block-column > .wp-block-buttons,
.wp-block-column.has-border-color.has-surface-border-color > .wp-block-buttons {
	margin-top: auto !important;
}

/* WCAG 1.4.1: Links in text blocks must be distinguishable by more than color */
.wp-block-paragraph a,
.wp-block-list a,
.has-muted-color a,
details a {
	text-decoration: underline;
	text-underline-offset: 2px;
}

/* Smooth scroll */
html {
	scroll-behavior: smooth;
}

/* Remove default list bullets in pattern cards */
.is-style-no-bullets {
	list-style: none;
	padding-left: 0;
}

/* ================================================================
   PRINT STYLES — Druckoptimiertes Layout für Datenblätter
   ================================================================ */

@media print {
	/* Hide interactive/chrome elements only */
	.wp-block-cover__background,
	.wp-block-cover__image-background,
	.wp-block-navigation,
	.wp-block-search,
	.wc-block-mini-cart,
	.wp-block-woocommerce-customer-account,
	.wp-block-social-links,
	.mp-scroll-progress,
	.mp-loupe,
	.mp-cf7-form,
	.mp-print-hide,
	.wp-block-buttons {
		display: none !important;
	}

	/* Hide header bar, footer, CTA banner */
	header, footer,
	.has-primary-background-color[style*="padding-top:var(--wp--preset--spacing--10)"],
	.has-accent-background-color[style*="padding-top:var(--wp--preset--spacing--80)"] {
		display: none !important;
	}

	/* Reset backgrounds and text for print */
	* {
		box-shadow: none !important;
		transition: none !important;
		animation: none !important;
	}

	body,
	.wp-block-group,
	.wp-block-cover,
	.wp-block-column,
	.has-secondary-background-color,
	.has-surface-background-color,
	.has-background-background-color,
	.has-accent-background-color,
	.has-primary-background-color {
		background: #FFFFFF !important;
		color: #1D1D1B !important;
	}

	/* Force ALL nested text dark */
	.has-secondary-background-color *,
	.has-accent-background-color *,
	.has-background-color,
	.has-background-color.has-text-color,
	p, h1, h2, h3, h4, li, td, th, span, strong {
		color: #1D1D1B !important;
	}

	.has-accent-color,
	.has-accent-color.has-text-color,
	.has-accent-light-color {
		color: #004276 !important; /* CI Deep Navy for print */
	}

	.has-muted-color {
		color: #555 !important;
	}

	/* Accent-bordered cards: keep border for structure */
	.has-accent-border-color {
		border: 2px solid #006D9E !important;
		padding: 0.5rem !important;
		border-radius: 4px !important;
	}

	/* Surface cards: light border */
	.has-surface-background-color,
	.has-surface-border-color {
		border: 1px solid #E0E0E0 !important;
		border-radius: 4px !important;
	}

	/* Cover/hero: compact */
	.wp-block-cover {
		min-height: auto !important;
		padding: 1.5rem 0 !important;
	}

	/* Reduce section spacing */
	.alignfull {
		padding-top: 1.5rem !important;
		padding-bottom: 1.5rem !important;
	}

	/* Tables: bordered for print */
	.wp-block-table table {
		border-collapse: collapse;
		width: 100%;
	}

	.wp-block-table td {
		border: 1px solid #CCC;
		padding: 0.3rem 0.5rem;
		font-size: 0.8rem;
	}

	/* Page breaks: avoid inside cards, allow between sections */
	.wp-block-column {
		break-inside: avoid;
	}

	.alignfull {
		break-before: auto;
	}

	/* Print header: show */
	.mp-print-header {
		display: block !important;
		text-align: center;
		margin-bottom: 1rem;
		padding-bottom: 0.75rem;
		border-bottom: 2px solid #006D9E;
	}

	/* Full width */
	.wp-block-group, .wp-block-columns {
		max-width: 100% !important;
	}

	/* Keep columns side-by-side (flex) by default */
	.wp-block-columns {
		display: flex !important;
		flex-wrap: wrap !important;
		gap: 0.5rem !important;
	}

	.wp-block-column {
		flex: 1 1 0 !important;
		min-width: 0 !important;
		margin-bottom: 0.5rem;
	}

	/* Split layouts (50/50, 40/60 etc): stack vertically */
	.wp-block-column[style*="flex-basis:50%"],
	.wp-block-column[style*="flex-basis:55%"],
	.wp-block-column[style*="flex-basis:45%"],
	.wp-block-column[style*="flex-basis:40%"],
	.wp-block-column[style*="flex-basis:60%"] {
		flex-basis: 100% !important;
		width: 100% !important;
	}

	/* Images: compact, no clipping */
	.wp-block-image img {
		max-height: 150px !important;
		max-width: 100% !important;
		width: auto !important;
		height: auto !important;
		object-fit: contain !important;
		display: block;
		margin: 0 auto;
	}

	/* Site logo in print header */
	.mp-print-header img {
		max-height: 30px !important;
	}

	@page {
		margin: 1.5cm;
		size: A4;
	}
}