/*
Theme Name: Stadlbauer Supervision
Theme URI: https://www.jpw-office.at/
Description: Child-Theme von Inspiro Blocks für die Praxis Mag. Tanja Stadlbauer. Startseite mit bewegtem Ozean als Hintergrund (WebGL, ohne Video) und Schwerpunkt Supervision.
Author: JPW Büroservice
Template: inspiro-blocks
Version: 1.2.0
Requires at least: 6.1
Tested up to: 6.8
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: stadlbauer-inspiro
*/

/* Ozean-Hero ------------------------------------------------------------ */
.ocean-hero {
	min-height: 100vh;
	overflow: hidden;
}

.ocean-hero .ocean-canvas {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	z-index: 0;
	pointer-events: none;
}

/* Sobald der Ozean läuft, Standbild ausblenden (bleibt als Fallback ohne WebGL) */
.ocean-hero.has-ocean .wp-block-cover__image-background {
	opacity: 0;
}

/* Logo im Kopfbereich (ersetzt den Seitentitel) */
.stadlbauer-logo {
	margin: 0;
	line-height: 0;
}

.stadlbauer-logo img {
	width: 440px;
	max-width: 68vw;
	height: auto;
}

@media (max-width: 600px) {
	.stadlbauer-logo img {
		width: 270px;
	}
}

/* Drei-Striche-Menü mit transparentem Milchglas-Overlay ------------------- */
.stadlbauer-menu .wp-block-navigation__responsive-container-open {
	color: #fff;
	width: 48px;
	height: 48px;
	display: grid;
	place-items: center;
	border-radius: 50%;
	background: rgba(255, 255, 255, .08);
	border: 1px solid rgba(255, 255, 255, .35);
	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);
	transition: background .25s ease, transform .25s ease;
}

.stadlbauer-menu .wp-block-navigation__responsive-container-open:hover,
.stadlbauer-menu .wp-block-navigation__responsive-container-open:focus-visible {
	background: rgba(255, 255, 255, .22);
	transform: scale(1.05);
}

.stadlbauer-menu .wp-block-navigation__responsive-container-open svg {
	width: 30px !important;
	height: 30px !important;
}

.stadlbauer-menu .wp-block-navigation__responsive-container.is-menu-open {
	background: rgba(8, 28, 34, .55) !important;
	backdrop-filter: blur(18px) saturate(140%);
	-webkit-backdrop-filter: blur(18px) saturate(140%);
	color: #fff !important;
	animation: stadlbauer-menu-in .35s ease both;
}

.stadlbauer-menu .is-menu-open .wp-block-navigation__responsive-close,
.stadlbauer-menu .is-menu-open .wp-block-navigation__responsive-dialog {
	height: 100%;
}

.stadlbauer-menu .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
	align-items: center !important;
	justify-content: center !important;
	min-height: calc(100vh - 80px);
	padding-top: 0 !important;
}

.stadlbauer-menu .is-menu-open .wp-block-navigation__container {
	gap: clamp(10px, 2.2vh, 22px) !important;
	align-items: center !important;
	justify-content: center !important;
}

.stadlbauer-menu .is-menu-open .wp-block-navigation-item__content {
	font-size: clamp(26px, 4.2vw, 46px);
	font-weight: 300;
	letter-spacing: 1px;
	color: #fff !important;
	text-decoration: none;
	padding: 4px 8px !important;
	position: relative;
	opacity: 0;
	animation: stadlbauer-item-in .5s ease forwards;
}

.stadlbauer-menu .is-menu-open .wp-block-navigation-item__content::after {
	content: "";
	position: absolute;
	left: 50%;
	bottom: -2px;
	width: 0;
	height: 2px;
	background: #0bb4aa;
	transition: width .3s ease, left .3s ease;
}

.stadlbauer-menu .is-menu-open .wp-block-navigation-item__content:hover::after,
.stadlbauer-menu .is-menu-open .wp-block-navigation-item__content:focus-visible::after {
	width: 100%;
	left: 0;
}

.stadlbauer-menu .is-menu-open .wp-block-navigation-item:nth-child(n+6) .wp-block-navigation-item__content {
	font-size: clamp(15px, 1.5vw, 18px);
	letter-spacing: 3px;
	text-transform: uppercase;
	font-weight: 500;
	opacity: 0;
}

.stadlbauer-menu .is-menu-open .wp-block-navigation-item:nth-child(6) {
	margin-top: clamp(16px, 4vh, 40px);
}

.stadlbauer-menu .is-menu-open .wp-block-navigation-item:nth-child(1) .wp-block-navigation-item__content { animation-delay: .05s; }
.stadlbauer-menu .is-menu-open .wp-block-navigation-item:nth-child(2) .wp-block-navigation-item__content { animation-delay: .10s; }
.stadlbauer-menu .is-menu-open .wp-block-navigation-item:nth-child(3) .wp-block-navigation-item__content { animation-delay: .15s; }
.stadlbauer-menu .is-menu-open .wp-block-navigation-item:nth-child(4) .wp-block-navigation-item__content { animation-delay: .20s; }
.stadlbauer-menu .is-menu-open .wp-block-navigation-item:nth-child(5) .wp-block-navigation-item__content { animation-delay: .25s; }
.stadlbauer-menu .is-menu-open .wp-block-navigation-item:nth-child(6) .wp-block-navigation-item__content { animation-delay: .32s; }
.stadlbauer-menu .is-menu-open .wp-block-navigation-item:nth-child(7) .wp-block-navigation-item__content { animation-delay: .36s; }

.stadlbauer-menu .wp-block-navigation__responsive-container-close {
	color: #fff;
	top: 28px !important;
	right: 30px !important;
	width: 48px;
	height: 48px;
	border-radius: 50%;
	border: 1px solid rgba(255, 255, 255, .35);
	display: grid;
	place-items: center;
}

.stadlbauer-menu .wp-block-navigation__responsive-container-close svg {
	width: 30px !important;
	height: 30px !important;
}

@keyframes stadlbauer-menu-in {
	from { opacity: 0; }
	to   { opacity: 1; }
}

@keyframes stadlbauer-item-in {
	from { opacity: 0; transform: translateY(14px); }
	to   { opacity: 1; transform: none; }
}

/* Fallback ohne WebGL: Standbild als langsamer Wellengang */
@keyframes stadlbauer-swell {
	0%   { transform: scale(1.08) translate3d(0, 0, 0); }
	50%  { transform: scale(1.14) translate3d(-1.5%, 1.2%, 0); }
	100% { transform: scale(1.08) translate3d(0, 0, 0); }
}

.ocean-hero.ocean-fallback .wp-block-cover__image-background {
	opacity: 1;
	animation: stadlbauer-swell 14s ease-in-out infinite;
	transform-origin: 50% 60%;
}

/* Umriss-Button auf dem Ozean hell darstellen */
.ocean-hero .wp-block-button.is-style-outline .wp-block-button__link {
	color: #fff;
	border-color: rgba(255, 255, 255, .85);
	background: transparent;
}

.ocean-hero .wp-block-button.is-style-outline .wp-block-button__link:hover,
.ocean-hero .wp-block-button.is-style-outline .wp-block-button__link:focus-visible {
	background: #fff;
	color: #101010;
}

/* Supervision-Kacheln */
.stadlbauer-card {
	height: 100%;
	transition: transform .3s ease, box-shadow .3s ease;
}

.stadlbauer-card:hover {
	transform: translateY(-4px);
	box-shadow: 0 16px 36px rgba(16, 16, 16, .08);
}

.stadlbauer-eyebrow {
	letter-spacing: 3px;
	text-transform: uppercase;
}

@media (prefers-reduced-motion: reduce) {
	.stadlbauer-card,
	.stadlbauer-card:hover {
		transition: none;
		transform: none;
	}
}