/*
Theme Name: SIRACO
Theme URI: https://siraco.de
Description: Child theme of Twenty Twenty-Five for SIRACO — special medical technologies and services. Brand color #fd6900 as surface, #b34a00 for accessible orange text; Open Sans self-hosted; full-width, WCAG 2.2 AA focused.
Author: SIRACO
Template: twentytwentyfive
Version: 1.1.1
Requires at least: 6.7
Tested up to: 7.0
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: siraco
*/

/* Visible focus indicator on all interactive elements (WCAG 2.4.7).
   Brand-aligned accessible dark orange, offset so it cannot be mistaken
   for the element border. */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
	outline: 3px solid var(--wp--preset--color--accent-2);
	outline-offset: 2px;
	border-radius: 2px;
}

/* Make the skip link clearly visible as soon as it receives focus. */
.skip-link.screen-reader-text:focus {
	background-color: var(--wp--preset--color--accent-1);
	color: var(--wp--preset--color--contrast);
	outline-color: var(--wp--preset--color--contrast);
	font-weight: 600;
}

/* Zero gap at the root level only (header ↔ main ↔ footer) so the
   full-width color bands join seamlessly. Block-internal gaps
   (navigation!) remain untouched. */
.wp-site-blocks > * + * {
	margin-block-start: 0;
}

/* Product cards: columns as flex column so the "More …" link always sits
   flush at the bottom regardless of text length. */
.siraco-produktkarten .wp-block-column {
	display: flex;
	flex-direction: column;
	position: relative; /* reference box for the stretched link */
}

.siraco-produktkarten .wp-block-column > :last-child {
	margin-top: auto;
	padding-top: var(--wp--preset--spacing--30);
}

/* Stretched link: the "More …" link covers the whole card — image and
   text become clickable, yet it stays ONE link (one tab stop). */
.siraco-produktkarten .wp-block-column > :last-child a::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
}

/* Visual feedback that the entire card is interactive. */
.siraco-produktkarten .wp-block-column:hover,
.siraco-produktkarten .wp-block-column:focus-within {
	box-shadow: 0 6px 20px rgba(0, 0, 0, 0.14);
}

.siraco-produktkarten .wp-block-column:focus-within {
	outline: 3px solid var(--wp--preset--color--accent-2);
	outline-offset: 2px;
}

/* ---------- Search overlay (assets/js/search-overlay.js) ---------- */

/* Trigger in the header: round icon button, pill family like the
   language switcher. */
/* Matches the language switcher pill: same border, color and height. */
.siraco-suche-oeffnen {
	display: grid;
	place-items: center;
	width: 36px;
	height: 36px;
	background: none;
	border: 2px solid var(--wp--preset--color--accent-2);
	border-radius: 999px;
	color: var(--wp--preset--color--accent-2);
	cursor: pointer;
	transition: background-color 0.15s ease, color 0.15s ease;
}

.siraco-suche-oeffnen:hover {
	background-color: var(--wp--preset--color--accent-2);
	color: var(--wp--preset--color--base);
}

/* Overlay: card in the upper third on a blurred, dimmed backdrop —
   zero header layout shift. */

/* The display:grid below would override the [hidden] attribute (author CSS
   beats the UA stylesheet) — without this rule the invisible overlay covers
   the whole page and swallows every click. */
.siraco-suche-overlay[hidden] {
	display: none;
}

.siraco-suche-overlay {
	position: fixed;
	inset: 0;
	z-index: 100001; /* above the admin bar */
	background: rgba(35, 32, 29, 0.55);
	-webkit-backdrop-filter: blur(4px);
	backdrop-filter: blur(4px);
	display: grid;
	justify-items: center;
	align-items: start;
	padding: clamp(1rem, 12vh, 8rem) 1.5rem 1.5rem;
	opacity: 0;
	transition: opacity 0.25s ease;
}

.siraco-suche-overlay.ist-offen {
	opacity: 1;
}

.siraco-suche-karte {
	position: relative;
	box-sizing: border-box;
	background: var(--wp--preset--color--base);
	border-radius: 12px;
	padding: 2.75rem 3rem 3rem;
	width: min(720px, 100%);
	box-shadow: 0 24px 70px rgba(0, 0, 0, 0.35);
	transform: translateY(-14px);
	transition: transform 0.25s ease;
}

.siraco-suche-overlay.ist-offen .siraco-suche-karte {
	transform: none;
}

.siraco-suche-karte *,
.siraco-suche-karte *::before {
	box-sizing: border-box;
}

.siraco-suche-titel {
	font-size: var(--wp--preset--font-size--x-large);
	margin: 0 0 1.25rem;
	padding-right: 2.5rem; /* clearance for the close button */
}

.siraco-suche-karte form {
	display: flex;
	gap: 0.75rem;
	flex-wrap: wrap;
}

.siraco-suche-karte input[type="search"] {
	flex: 1 1 220px;
	min-width: 0;
	font: inherit;
	font-size: var(--wp--preset--font-size--large);
	padding: 0.65em 1em;
	background: var(--wp--preset--color--accent-5);
	border: 2px solid transparent;
	border-radius: 8px;
	transition: background-color 0.15s ease, border-color 0.15s ease;
}

/* One clean focus state — suppress the global outline so the field does
   not get a double ring (border + outline). accent-2 keeps the required
   3:1 contrast for focus indicators (accent-1 on white is only 2.9:1). */
.siraco-suche-karte input[type="search"]:focus-visible {
	outline: none;
	background: var(--wp--preset--color--base);
	border-color: var(--wp--preset--color--accent-2);
}

.siraco-suche-absenden {
	background-color: var(--wp--preset--color--accent-1);
	color: var(--wp--preset--color--contrast);
	border: none;
	border-radius: 8px;
	font: inherit;
	font-size: var(--wp--preset--font-size--large);
	font-weight: 600;
	padding: 0.65em 1.6em;
	cursor: pointer;
	transition: background-color 0.15s ease, color 0.15s ease;
}

.siraco-suche-absenden:hover {
	background-color: var(--wp--preset--color--accent-2);
	color: var(--wp--preset--color--base);
}

.siraco-suche-schliessen {
	position: absolute;
	top: 1rem;
	right: 1rem;
	width: 40px;
	height: 40px;
	display: grid;
	place-items: center;
	background: none;
	border: none;
	border-radius: 999px;
	font-size: 1.2rem;
	color: var(--wp--preset--color--accent-4);
	cursor: pointer;
	transition: background-color 0.15s ease, color 0.15s ease;
}

.siraco-suche-schliessen:hover {
	color: var(--wp--preset--color--contrast);
	background: var(--wp--preset--color--accent-5);
}

@media (max-width: 600px) {
	.siraco-suche-overlay {
		padding: 5rem 1rem 1rem;
	}

	.siraco-suche-karte {
		padding: 2rem 1.5rem 1.75rem;
	}

	.siraco-suche-titel {
		font-size: var(--wp--preset--font-size--large);
	}

	/* When the button wraps below the field, span the full width. */
	.siraco-suche-absenden {
		flex: 1 1 100%;
	}
}

@media (prefers-reduced-motion: reduce) {
	.siraco-suche-overlay,
	.siraco-suche-karte {
		transition: none;
		transform: none;
	}
}

/* ---------- Mobile navigation ---------- */

/* Left-align the overlay menu. The desktop "right" justification emits an
   items-justified-right rule in the core block styles, which load AFTER
   this stylesheet — hence !important. */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content,
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container,
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item {
	align-items: flex-start !important;
	justify-content: flex-start !important;
	text-align: left;
}

/* Burger icon with THREE bars — the core SVG only has two. Hide the
   inline SVG and redraw via mask in currentColor (keeps hover/focus
   colors correct automatically). */
.wp-block-navigation__responsive-container-open svg {
	display: none;
}

.wp-block-navigation__responsive-container-open::before {
	content: "";
	display: block;
	width: 24px;
	height: 24px;
	background-color: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 5.5h16V7H4zM4 11.25h16v1.5H4zM4 17h16v1.5H4z'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 5.5h16V7H4zM4 11.25h16v1.5H4zM4 17h16v1.5H4z'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* ---------- Subtle animations (assets/js/reveal.js) ----------
   Opacity/transform only, one-shot, with a slight cascade — and fully
   disabled with prefers-reduced-motion (the script bails out as well). */
.siraco-reveal {
	opacity: 0;
	transform: translateY(14px);
	transition: opacity 0.55s ease-out, transform 0.55s ease-out;
}

.siraco-reveal.ist-sichtbar {
	opacity: 1;
	transform: none;
}

/* Hover micro-interactions: a barely noticeable lift. */
.siraco-produktkarten .wp-block-column {
	transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.siraco-produktkarten .wp-block-column:hover,
.siraco-produktkarten .wp-block-column:focus-within {
	transform: translateY(-3px);
}

.wp-element-button {
	transition: background-color 0.15s ease, color 0.15s ease, transform 0.15s ease;
}

.wp-element-button:hover {
	transform: translateY(-1px);
}

/* Header navigation: underline grows from the left on hover. */
header .wp-block-navigation .wp-block-navigation-item__content {
	background-image: linear-gradient(var(--wp--preset--color--accent-1), var(--wp--preset--color--accent-1));
	background-repeat: no-repeat;
	background-position: left bottom;
	background-size: 0% 2px;
	transition: background-size 0.25s ease;
	padding-bottom: 2px;
}

header .wp-block-navigation .wp-block-navigation-item__content:hover,
header .wp-block-navigation .wp-block-navigation-item__content:focus-visible {
	background-size: 100% 2px;
}

@media (prefers-reduced-motion: reduce) {
	.siraco-reveal {
		opacity: 1;
		transform: none;
		transition: none;
	}

	.siraco-produktkarten .wp-block-column,
	.wp-element-button,
	header .wp-block-navigation .wp-block-navigation-item__content {
		transition: none;
	}

	.siraco-produktkarten .wp-block-column:hover,
	.wp-element-button:hover {
		transform: none;
	}
}

/* Touch targets in the footer: the small tel/mail links must be at least
   24px tall with clearance (WCAG 2.2, 2.5.8). inline-block plus vertical
   padding lifts them above the threshold. */
.has-accent-3-background-color p a {
	display: inline-block;
	padding-block: 4px;
}

/* Cookie settings trigger in the footer: a small pill matching the
   language switcher — semantically a button (action, not navigation). */
.siraco-cookie-settings {
	background: none;
	border: 1px solid var(--wp--preset--color--accent-1);
	border-radius: 999px;
	padding: 0.3em 1em;
	font: inherit;
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	color: var(--wp--preset--color--base);
	cursor: pointer;
	transition: background-color 0.15s ease, color 0.15s ease;
}

.siraco-cookie-settings:hover {
	background-color: var(--wp--preset--color--accent-1);
	color: var(--wp--preset--color--contrast);
}

/* Scroll-to-top (assets/js/scroll-top.js) */
.siraco-scroll-top {
	position: fixed;
	right: calc(1rem + env(safe-area-inset-right, 0px));
	bottom: calc(1rem + env(safe-area-inset-bottom, 0px));
	z-index: 90; /* above content, below the lightbox */
	width: 48px;
	height: 48px;
	display: grid;
	place-items: center;
	border: none;
	border-radius: 999px;
	background-color: var(--wp--preset--color--accent-1);
	color: var(--wp--preset--color--contrast);
	box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
	cursor: pointer;
	opacity: 0;
	transform: translateY(8px);
	pointer-events: none;
	transition: opacity 0.2s ease, transform 0.2s ease, background-color 0.15s ease;
}

.siraco-scroll-top.ist-sichtbar {
	opacity: 1;
	transform: none;
	pointer-events: auto;
}

.siraco-scroll-top:hover {
	background-color: var(--wp--preset--color--accent-2);
	color: var(--wp--preset--color--base);
}

@media (prefers-reduced-motion: reduce) {
	.siraco-scroll-top {
		transition: none;
	}
}

/* Galleries: a subtle frame — the product photos sit on white and would
   otherwise be indistinguishable from the page background. */
.wp-block-gallery .wp-block-image {
	border: 1px solid #e0e0e0;
	border-radius: 6px;
	overflow: hidden;
	background: #fff;
}

/* NO forced tile format: galleries run without is-cropped, every image
   keeps its natural proportions — fully visible, as large as possible,
   and the core lightbox inherits the correct (uncropped) dimensions.
   Slim caption below the image. */
.wp-block-gallery.has-nested-images figure.wp-block-image figcaption {
	position: static;
	background: var(--wp--preset--color--accent-5);
	color: var(--wp--preset--color--contrast);
	padding: 0.3em 0.6em;
	font-size: var(--wp--preset--font-size--small);
	text-shadow: none;
}

/* Lightbox zoom (assets/js/lightbox-zoom.js): zoom cursor + smooth transition. */
.wp-lightbox-overlay img {
	transition: transform 0.25s ease;
}

.wp-lightbox-overlay img.siraco-zoombar {
	cursor: zoom-in;
}

.wp-lightbox-overlay img.siraco-gezoomt {
	cursor: zoom-out;
}