/*
 * Clickservice — global component layer.
 * Design tokens (color, type, spacing) come from theme.json as CSS custom
 * properties (--wp--preset--*). This file holds component rules theme.json
 * cannot express. Kept lean to protect Core Web Vitals.
 */

/* ------------------------------------------------------------------ *
 * Top bar
 * ------------------------------------------------------------------ */
.cs-topbar__text {
	margin: 0;
	letter-spacing: 0.01em;
}

/* ------------------------------------------------------------------ *
 * Header
 * ------------------------------------------------------------------ */
.cs-header {
	position: sticky;
	top: 0;
	z-index: 100;
	border-bottom: 1px solid var(--wp--preset--color--border);
}

.cs-header__inner {
	gap: var(--wp--preset--spacing--40);
	align-items: center;
	width: 100%;
	max-width: var(--wp--style--global--wide-size, 1240px);
	margin-inline: auto;
}

.cs-logo {
	display: inline-flex;
	align-items: center;
	flex: 0 0 auto;
	line-height: 0;
}
/* "a.cs-logo img" outranks WooCommerce's ".woocommerce-page img
   { height:auto; max-width:100% }" which otherwise blows the logo up to
   its natural 1125px on store pages. */
a.cs-logo img {
	height: 48px;
	width: auto;
	max-width: none;
	display: block;
}
a.cs-logo--footer img { height: 52px; }

/* Navigation */
.cs-nav {
	flex: 0 1 auto;
	gap: clamp(0.9rem, 1.6vw, 1.75rem);
}
.cs-nav .wp-block-navigation-item { white-space: nowrap; }
.cs-nav .wp-block-navigation-item__content {
	color: var(--wp--preset--color--contrast);
	font-weight: 500;
	padding: 0.25rem 0;
	border-bottom: 2px solid transparent;
	transition: color 0.15s ease, border-color 0.15s ease;
}
.cs-nav .wp-block-navigation-item__content:hover,
.cs-nav .current-menu-item .wp-block-navigation-item__content,
.cs-nav .wp-block-navigation-item__content[aria-current],
.cs-nav .wp-block-navigation-item__content.is-active {
	color: var(--wp--preset--color--primary);
	border-bottom-color: var(--wp--preset--color--primary);
}

/* Dropdown (Shop -> categories) */
.cs-nav .wp-block-navigation__submenu-container {
	min-width: 230px !important;
	padding: 0.45rem !important;
	border: 1px solid var(--wp--preset--color--border) !important;
	border-radius: 12px;
	background: #fff !important;
	box-shadow: 0 14px 34px rgba(14, 27, 46, 0.14);
	z-index: 110;
}
.cs-nav .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	padding: 0.55rem 0.8rem;
	border-bottom: none;
	border-radius: 8px;
	color: var(--wp--preset--color--contrast);
	font-weight: 500;
	white-space: nowrap;
}
.cs-nav .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover {
	background: var(--wp--preset--color--sky);
	color: var(--wp--preset--color--primary);
}
/* Inside the mobile overlay the dropdown renders inline — undo the card look. */
.cs-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container {
	min-width: 0 !important;
	padding: 0 0 0 0.9rem !important;
	border: none !important;
	box-shadow: none;
	background: transparent !important;
}

/* Header actions (search + cart) */
.cs-header__actions {
	gap: var(--wp--preset--spacing--30);
	align-items: center;
	flex: 0 0 auto;
}

/* Search */
.cs-search .wp-block-search__inside-wrapper {
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 999px;
	background: var(--wp--preset--color--muted);
	padding: 0.15rem 0.15rem 0.15rem 1rem;
	min-width: 230px;
}
.cs-search .wp-block-search__input {
	border: none;
	background: transparent;
	font-size: 0.9rem;
}
.cs-search .wp-block-search__input:focus { outline: none; }
.cs-search .wp-block-search__button {
	border-radius: 999px;
	background: var(--wp--preset--color--primary);
	color: #fff;
	margin: 0;
	padding: 0.5rem 0.7rem;
}

/* Cart pill — the blue "Warenkorb" button from the mockup */
.cs-cart {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	background: var(--wp--preset--color--primary);
	color: #fff;
	border-radius: 999px;
	padding: 0.6rem 1.1rem;
	font-weight: 600;
	font-size: 0.9rem;
	text-decoration: none;
	white-space: nowrap;
	transition: background 0.15s ease;
}
.cs-cart:hover { background: var(--wp--preset--color--primary-dark); color: #fff; }
.cs-cart__icon-wrap { display: inline-flex; }
.cs-cart__count {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 1.35rem;
	height: 1.35rem;
	padding: 0 0.35rem;
	background: #fff;
	color: var(--wp--preset--color--primary);
	border-radius: 999px;
	font-size: 0.78rem;
	font-weight: 700;
}

/* ------------------------------------------------------------------ *
 * Buttons (shared)
 * ------------------------------------------------------------------ */
.cs-btn {
	display: inline-block;
	padding: 0.9rem 1.6rem;
	border-radius: 10px;
	font-weight: 600;
	font-size: 0.95rem;
	text-decoration: none;
	text-align: center;
	border: 1px solid transparent;
	cursor: pointer;
	transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.cs-btn--primary {
	background: var(--wp--preset--color--primary);
	color: #fff;
	box-shadow: 0 6px 16px rgba(20, 120, 212, 0.25);
}
.cs-btn--primary:hover { background: var(--wp--preset--color--primary-dark); color: #fff; }
.cs-btn--ghost {
	background: #fff;
	color: var(--wp--preset--color--contrast);
	border-color: var(--wp--preset--color--border);
}
.cs-btn--ghost:hover { border-color: var(--wp--preset--color--primary); color: var(--wp--preset--color--primary); }

/* ------------------------------------------------------------------ *
 * Footer
 * ------------------------------------------------------------------ */
/* Navy wave that leads into the footer (present on every Figma frame).
   The SVG holds two identical wave periods and is 200% wide inside an
   overflow-clipped strip; sliding it left by exactly one period gives a
   seamless, GPU-only (transform) water motion — no layout, no repaint. */
/* -1px pulls the footer up over the hairline seam between the wave strip and
   the footer (both navy) — otherwise a light line shows at the join. */
.cs-footer-wave { line-height: 0; overflow: hidden; margin-bottom: -1px; }
.cs-footer-wave svg {
	display: block;
	width: 200%;
	height: 78px;
	animation: cs-wave-drift 9s linear infinite;
}
@keyframes cs-wave-drift { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
	.cs-footer-wave svg { animation: none; }
}

/* Mockup column titles are plain white title-case ("Produkte"). */
.cs-footer__title {
	font-size: 0.95rem;
	font-weight: 700;
	color: #fff;
	margin-bottom: 1rem;
}
.cs-footer__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 0.6rem;
}
.cs-footer__list a {
	color: rgba(255, 255, 255, 0.82);
	text-decoration: none;
}
.cs-footer__list a:hover { color: #fff; }
/* Highlight the "Bestellung widerrufen" entry as a small pill so the action
   stands out from the plain footer links. The negative left margin cancels the
   pill's own left padding so the label lines up flush with the links above. */
.cs-footer__list a.cs-footer__cta {
	display: inline-block;
	margin-top: 0.35rem;
	margin-left: -0.9rem;
	padding: 0.4rem 0.9rem;
	border: 1px solid rgba(255, 255, 255, 0.5);
	border-radius: 999px;
	color: #fff;
	font-weight: 600;
	line-height: 1.2;
	transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.cs-footer__list a.cs-footer__cta:hover {
	background: #fff;
	border-color: #fff;
	color: var(--wp--preset--color--primary);
}
/* Core gives .wp-block-column word-break:break-word, which splits long German
   words ("Komplettsysteme") mid-word in narrow columns — keep words intact. */
.cs-footer__list li { word-break: normal; overflow-wrap: normal; }
.cs-footer__tagline {
	color: rgba(255, 255, 255, 0.7);
	margin-top: 1rem;
	max-width: 34ch;
}
.cs-footer__bar { opacity: 0.7; }
.cs-footer__bar p { margin: 0; }

/* Tablet: four columns in one row leave the link columns too narrow for the
   longest labels. Wrap the brand column onto its own full row (core forces
   flex-wrap:nowrap !important above 782px, hence the !important). */
@media (min-width: 782px) and (max-width: 1023px) {
	/* Must out-specify core's .wp-block-columns:not(.is-not-stacked-on-mobile). */
	.cs-footer .wp-block-columns.cs-footer__top { flex-wrap: wrap !important; }
	.cs-footer .wp-block-columns.cs-footer__top > .wp-block-column:first-child { flex-basis: 100% !important; }
}

/* Phone: stack the footer columns centered. */
@media (max-width: 781px) {
	.cs-footer__top { text-align: center; }
	.cs-footer .cs-logo--footer { justify-content: center; }
	.cs-footer__tagline { max-width: none; margin-inline: auto; }
	.cs-footer__list { align-items: center; }
	.cs-footer__bar { flex-direction: column; align-items: center; gap: 0.4rem; text-align: center; }
}
.cs-heart { color: var(--wp--preset--color--sale); }
.cs-footer__made a { color: rgba(255, 255, 255, 0.9); text-decoration: none; }
.cs-footer__made a:hover { color: #fff; }

/* ------------------------------------------------------------------ *
 * Shared section furniture (used on the front page and content pages)
 * ------------------------------------------------------------------ */
/* Mockup eyebrows are title-case ("Sortiment", "So funktioniert's"). */
.cs-eyebrow {
	margin: 0 0 0.4rem;
	font-size: 0.8rem;
	font-weight: 700;
	letter-spacing: 0.01em;
	color: var(--wp--preset--color--primary);
}
.cs-h2 {
	margin: 0;
	font-size: clamp(1.6rem, 2.6vw, 2.1rem);
	font-weight: 800;
	line-height: 1.15;
	color: var(--wp--preset--color--contrast);
}
.cs-section-head {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 1rem;
	margin-bottom: 2rem;
}
.cs-more {
	font-weight: 600;
	text-decoration: none;
	white-space: nowrap;
}

.cs-catgrid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 1.15rem;
}
.cs-catcard {
	display: block;
	background: #fff;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 14px;
	padding: 1.5rem 1.5rem 1.3rem;
	text-decoration: none;
	color: var(--wp--preset--color--contrast);
	transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.cs-catcard:hover {
	transform: translateY(-3px);
	box-shadow: 0 12px 28px rgba(14, 27, 46, 0.1);
}
.cs-catcard img {
	display: block;
	margin-inline: auto;
	width: 100%;
	height: 128px;
	object-fit: contain; /* never crop the category photo */
	mix-blend-mode: multiply;
}
.cs-catcard h3 { margin: 1rem 0 0.2rem; font-size: 1.02rem; font-weight: 700; }
.cs-catcard p { margin: 0; font-size: 0.85rem; color: var(--wp--preset--color--text-muted); }

@media (max-width: 900px) {
	.cs-catgrid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
	.cs-catgrid { grid-template-columns: 1fr; }
	.cs-section-head { flex-direction: column; align-items: flex-start; gap: 0.4rem; }
}

/* ------------------------------------------------------------------ *
 * Forms (contact page + newsletter) & notices
 * ------------------------------------------------------------------ */
.cs-form { display: flex; flex-direction: column; gap: 0.9rem; max-width: 34rem; }
.cs-form label { font-weight: 600; font-size: 0.9rem; }
.cs-form input[type="text"],
.cs-form input[type="email"],
.cs-form input[type="date"],
.cs-form textarea {
	box-sizing: border-box; /* width:100% must include padding or it overflows 16px */
	width: 100%;
	max-width: 100%;
	padding: 0.75rem 0.95rem;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 10px;
	background: #fff;
	font: inherit;
	font-size: 0.95rem;
}
.cs-form textarea { min-height: 9rem; resize: vertical; }
.cs-form .cs-btn { align-self: flex-start; }
/* Make the form's primary action stand out a little more: larger tap target,
   bolder label and a stronger lift. */
.cs-form button.cs-btn--primary {
	margin-top: 0.35rem;
	padding: 1rem 2.5rem;
	font-size: 1.05rem;
	font-weight: 700;
	letter-spacing: 0.01em;
	box-shadow: 0 10px 22px rgba(20, 120, 212, 0.35);
}
.cs-form button.cs-btn--primary:hover {
	box-shadow: 0 12px 26px rgba(20, 120, 212, 0.42);
	transform: translateY(-1px);
}
@media (max-width: 560px) {
	.cs-form button.cs-btn--primary { width: 100%; padding-inline: 1rem; }
}

/* Revocation form: a little wider, address as a shorter box, and paired
   date/order fields laid out two-up on wider screens. */
.cs-form--widerruf { max-width: 42rem; }
.cs-form--widerruf textarea.cs-form__short { min-height: 5rem; }
.cs-form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 0.9rem; }
.cs-form__field { display: flex; flex-direction: column; gap: 0.4rem; }
@media (max-width: 560px) {
	.cs-form__row { grid-template-columns: 1fr; }
}
/* Honeypot — visually gone, still in the DOM for bots. */
/* Honeypot — hidden via clip (NOT left:-9999px, which extends the page and
   triggers a horizontal scrollbar on mobile/iPad). !important beats the form
   input width:100%. */
.cs-hp {
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	padding: 0 !important;
	margin: -1px !important;
	border: 0 !important;
	overflow: hidden !important;
	clip: rect(0, 0, 0, 0) !important;
	clip-path: inset(50%) !important;
	white-space: nowrap !important;
}

.cs-notice {
	padding: 0.85rem 1.1rem;
	border-radius: 10px;
	font-size: 0.92rem;
	font-weight: 500;
}
.cs-notice--ok { background: #e4f4e4; color: #14522e; border: 1px solid #bfe3bf; }
.cs-notice--err { background: #fdeaea; color: #7a1f1f; border: 1px solid #f2c4c4; }

/* ------------------------------------------------------------------ *
 * Cookie banner (Complianz) — match the shop's design language
 * ------------------------------------------------------------------ */
.cmplz-cookiebanner {
	border-radius: 14px !important;
	border: 1px solid var(--wp--preset--color--border);
	box-shadow: 0 16px 40px rgba(14, 27, 46, 0.18) !important;
	font-family: inherit !important;
}
.cmplz-cookiebanner .cmplz-title { font-weight: 700; }
.cmplz-cookiebanner .cmplz-btn {
	border-radius: 10px !important;
	font-weight: 600 !important;
	font-family: inherit !important;
}
.cmplz-cookiebanner .cmplz-btn.cmplz-accept {
	background-color: var(--wp--preset--color--primary) !important;
	color: #fff !important;
}
.cmplz-cookiebanner .cmplz-btn.cmplz-accept:hover { background-color: var(--wp--preset--color--primary-dark) !important; }
.cmplz-cookiebanner .cmplz-btn.cmplz-deny,
.cmplz-cookiebanner .cmplz-btn.cmplz-view-preferences,
.cmplz-cookiebanner .cmplz-btn.cmplz-save-preferences {
	background: #fff !important;
	border: 1px solid var(--wp--preset--color--border) !important;
	color: var(--wp--preset--color--contrast) !important;
}
.cmplz-cookiebanner .cmplz-links a,
.cmplz-cookiebanner a { color: var(--wp--preset--color--primary) !important; }
#cmplz-manage-consent .cmplz-manage-consent {
	background-color: var(--wp--preset--color--navy) !important;
	border-radius: 10px 10px 0 0 !important;
	color: #fff !important;
	font-size: 0.8rem !important;
}

/* ------------------------------------------------------------------ *
 * Content pages (imported legal texts) & global overflow safety
 * ------------------------------------------------------------------ */
body { overflow-x: clip; }

/* Consistent title scale across ALL pages. The shop archive title
   (.woocommerce-products-header__title) is the reference size; page/post
   H1 matches it, and in-content H2/H3 step down proportionally so the
   second-level headings aren't nearly H1-sized (was theme.json xx-large). */
.wp-block-post-title,
.woocommerce-products-header__title {
	font-size: clamp(1.7rem, 3vw, 2.2rem);
	font-weight: 800;
	line-height: 1.15;
	overflow-wrap: break-word;
	hyphens: auto;
}
.wp-block-post-content h2 {
	font-size: clamp(1.25rem, 2.2vw, 1.5rem);
	line-height: 1.25;
}
.wp-block-post-content h3 {
	font-size: clamp(1.05rem, 1.8vw, 1.2rem);
	line-height: 1.3;
}
.wp-block-post-content a { overflow-wrap: anywhere; }
/* The imported Impressum sits in a <pre>/<code> block — render it like normal
   body text instead of monospace. */
.wp-block-post-content pre,
.wp-block-post-content pre.wp-block-code,
.wp-block-post-content .wp-block-code,
.wp-block-post-content .wp-block-code code {
	font-family: inherit;
	font-size: inherit;
	line-height: 1.6;
	white-space: pre-wrap;
	overflow-wrap: anywhere;
	background: none;
	border: none;
	padding: 0;
	margin: 0 0 1rem;
	color: inherit;
}

/* ------------------------------------------------------------------ *
 * Accessibility
 * ------------------------------------------------------------------ */
:where(a, button, input, select, textarea):focus-visible {
	outline: 2px solid var(--wp--preset--color--primary);
	outline-offset: 2px;
}

/* ------------------------------------------------------------------ *
 * Responsive
 * ------------------------------------------------------------------ */
/* Tablet and below: hide the inline search and force the nav into its
   hamburger overlay (five items + search + cart wrap to two rows on iPad). */
@media (max-width: 1100px) {
	.cs-search { display: none; }
	.cs-header__inner { gap: var(--wp--preset--spacing--30); }
	.cs-nav .wp-block-navigation__responsive-container-open { display: flex; }
	.cs-nav .wp-block-navigation__responsive-container:not(.is-menu-open) { display: none !important; }
}

/* Phone: tighten the cart pill to an icon + count. */
@media (max-width: 599px) {
	.cs-topbar__text { font-size: 0.72rem; }
	.cs-header__actions { gap: 0.5rem; }
	.cs-cart { padding: 0.5rem 0.75rem; }
	.cs-cart__label { display: none; }
}