/* =========================================================================
   CHS Metallbau – Verhaltens-Layer (nur Frontend)

   Alles, was JavaScript-Zustaende (body.chs-js / body.is-scrolled /
   body.has-transparent-header), echtes Scrollen, Hover-Bewegung oder das
   mobile Menue-Overlay voraussetzt. Im Block-Editor ist davon nichts
   sinnvoll darstellbar – deshalb hier getrennt von blocks.css.
   ========================================================================= */

body { overflow-x: hidden; }

/* =========================================================================
   STICKY-HEADER + SCROLL-ZUSTAENDE
   ========================================================================= */

.chs-header {
	position: sticky;
	top: 0;
	z-index: 100;
	transition: background-color 0.3s var(--chs-ease), box-shadow 0.3s var(--chs-ease), padding 0.3s var(--chs-ease);
	border-bottom: 1px solid transparent;
}
.admin-bar .chs-header { top: 32px; }
@media (max-width: 782px) {
	.admin-bar .chs-header { top: 46px; }
}

body.has-transparent-header:not(.is-scrolled) .chs-header .wp-block-site-logo img {
	filter: brightness(0) invert(1) drop-shadow(0 2px 10px rgba(10, 12, 14, 0.6));
}

/* Transparenter Header ueber dem Hero */
body.has-transparent-header .chs-header {
	position: fixed;
	left: 0;
	right: 0;
	background-color: transparent !important;
}
body.has-transparent-header .chs-header::before {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(21, 24, 28, 0.55), rgba(21, 24, 28, 0));
	pointer-events: none;
	transition: opacity 0.3s var(--chs-ease);
}
body.is-scrolled .chs-header,
body:not(.has-transparent-header) .chs-header {
	background-color: var(--chs-ink) !important;
	border-bottom-color: var(--chs-line);
	box-shadow: 0 10px 30px -16px rgba(0, 0, 0, 0.6);
}
body.is-scrolled.has-transparent-header .chs-header::before { opacity: 0; }
body.is-scrolled .chs-header__bar { padding-top: 0.6rem; padding-bottom: 0.6rem; }
body.is-scrolled .chs-header__logo img { width: 142px; }

/* =========================================================================
   NAVIGATION – Interaktion
   ========================================================================= */

.chs-nav a,
.chs-nav .wp-block-navigation-item__content { transition: color 0.2s var(--chs-ease); }
.chs-nav > .wp-block-navigation__container > .wp-block-navigation-item > a::after,
.chs-nav > .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: -6px;
	height: 2px;
	background: var(--chs-accent);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform 0.25s var(--chs-ease);
}
.chs-nav .wp-block-navigation-item:hover > a::after,
.chs-nav .wp-block-navigation-item:focus-within > a::after,
.chs-nav .current-menu-item > a::after { transform: scaleX(1); }
.chs-nav a:hover,
.chs-nav .wp-block-navigation-item:focus-within > a { color: var(--chs-accent); }

/* Submenu dropdown */
.chs-nav .wp-block-navigation-submenu .wp-block-navigation__submenu-container {
	background: var(--chs-ink);
	border: 1px solid var(--chs-line);
	padding: 0.4rem 0;
	min-width: 250px;
	box-shadow: 0 24px 48px -18px rgba(0, 0, 0, 0.7);
}
.chs-nav .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	padding: 0.6rem 1.25rem;
}
.chs-nav .wp-block-navigation__submenu-container .wp-block-navigation-item:hover {
	background: var(--chs-steel-900);
}

/* Hamburger-Button */
.chs-nav .wp-block-navigation__responsive-container-open {
	color: #fff;
	padding: 0.35rem;
}
.chs-nav .wp-block-navigation__responsive-container-open svg,
.chs-nav .wp-block-navigation__responsive-container-close svg { width: 30px; height: 30px; fill: currentColor; }
.chs-nav .wp-block-navigation__responsive-container-close { color: #fff; }

/* Mobile Navigation – Vollbild-Overlay des Core-Navigation-Blocks */
.chs-nav .wp-block-navigation__responsive-container.is-menu-open {
	background-color: var(--chs-ink) !important;
	padding: 5rem 1.5rem 2.5rem !important;
}
.chs-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content,
.chs-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
	width: 100%;
	align-items: stretch;
	justify-content: flex-start;
	gap: 0;
}
.chs-nav .is-menu-open .wp-block-navigation-item {
	width: 100%;
	border-bottom: 1px solid var(--chs-line);
}
.chs-nav .is-menu-open .wp-block-navigation-item__content {
	display: block;
	width: 100%;
	padding: 1rem 0.25rem !important;
	font-size: 1.35rem;
}
.chs-nav .is-menu-open .wp-block-navigation-item a::after { display: none !important; }
/* Untermenue im Overlay: statisch, ohne Kasten */
.chs-nav .is-menu-open .wp-block-navigation__submenu-container {
	position: static !important;
	opacity: 1 !important;
	visibility: visible !important;
	transform: none !important;
	width: 100% !important;
	min-width: 0 !important;
	border: 0 !important;
	background: transparent !important;
	box-shadow: none !important;
	padding: 0 0 0.5rem !important;
}
.chs-nav .is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item { border-bottom: 0; }
.chs-nav .is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	padding: 0.6rem 0.25rem 0.6rem 1.25rem !important;
	font-size: 1.05rem;
	color: var(--chs-steel-400);
}
.chs-nav .is-menu-open .wp-block-navigation-submenu__toggle { padding-right: 0.25rem; }

@media (max-width: 900px) {
	.chs-header .chs-header__cta { display: none; }
	.chs-header__bar { gap: 0.75rem; }
	.chs-header__logo img,
	.chs-header .wp-block-site-logo img { width: 140px; }
	body.is-scrolled .chs-header__logo img,
	body.is-scrolled .chs-header .wp-block-site-logo img { width: 124px; }
}
@media (max-width: 460px) {
	.chs-header__logo img,
	.chs-header .wp-block-site-logo img { width: 128px; }
}

/* =========================================================================
   HOVER-BEWEGUNG (Bildkacheln, Galerie)
   ========================================================================= */

.chs-tile__bg img { transition: transform 0.6s var(--chs-ease); }
.chs-tile:hover .chs-tile__bg img,
.chs-tile:focus-within .chs-tile__bg img { transform: scale(1.06); }
.chs-tile:hover .chs-tile__link a { color: var(--chs-accent); }

/* "Mehr dazu": Unterstrich waechst bei Hover/Fokus (statt Pfeil-Glyph). */
.chs-tile__link a { position: relative; }
.chs-tile__link a::before {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: -3px;
	height: 1px;
	background: currentColor;
	transform: scaleX(0);
	transform-origin: left;
	transition: transform 0.3s var(--chs-ease);
}
.chs-tile:hover .chs-tile__link a::before,
.chs-tile:focus-within .chs-tile__link a::before { transform: scaleX(1); }

.chs-gallery .wp-block-image img { transition: transform 0.6s var(--chs-ease); }
.chs-gallery .wp-block-image:hover img { transform: scale(1.05); }

.chs-cta__phone:hover { color: var(--chs-ink); }
.chs-footer a:hover { color: var(--chs-accent); text-decoration: none; }

/* =========================================================================
   SICHTBARKEITS-ANIMATION (nur wenn JS aktiv)
   ========================================================================= */

body.chs-js .chs-reveal {
	opacity: 0;
	transform: translateY(24px);
	transition: opacity 0.7s var(--chs-ease), transform 0.7s var(--chs-ease);
	will-change: opacity, transform;
}
body.chs-js .chs-reveal.is-visible { opacity: 1; transform: none; }

/* =========================================================================
   FOKUSZUSTAENDE
   ========================================================================= */

a:focus-visible,
button:focus-visible,
.wp-block-button__link:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
	outline: 2px solid var(--chs-accent);
	outline-offset: 2px;
}

/* =========================================================================
   REDUCED MOTION
   ========================================================================= */

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		animation-duration: 0.001ms !important;
		transition-duration: 0.001ms !important;
	}
	.chs-tile:hover .chs-tile__bg img,
	.chs-gallery .wp-block-image:hover img { transform: none; }
	body.chs-js .chs-reveal { opacity: 1; transform: none; }
}

/* Ganze Leistungs-Kachel klickbar machen (Bild + Text), 2026-09-13 */
.chs-tile__hit {
	position: absolute;
	inset: 0;
	z-index: 3;
	cursor: pointer;
}