/*
Theme Name: Hüsli
Theme URI: https://hüsli.app
Author: STACKD
Author URI: https://stackd.ch
Description: Landingpage und Warteliste für Hüsli, die WG-App für Luzern.
Version: 1.0.0
Requires at least: 6.4
Requires PHP: 8.0
Text Domain: huesli
*/

@font-face {
	font-family: "Geist";
	src: url("assets/fonts/Geist-Variable.woff2") format("woff2");
	font-weight: 100 900;
	font-style: normal;
	font-display: swap;
}

html { scroll-behavior: smooth; }
body { margin: 0; background: #F6F5F1; -webkit-font-smoothing: antialiased; }
a { color: #2B45F5; }
a:hover { color: #1F33C4; }
a:focus-visible, button:focus-visible, input:focus-visible { outline: 3px solid #16181D; outline-offset: 3px; box-shadow: 0 0 0 3px #FFFFFF; }
input::placeholder { color: #6B6E75; }
[hidden] { display: none !important; }
img { max-width: 100%; }
.screen-reader-text { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(1px, 1px, 1px, 1px); white-space: nowrap; }

@keyframes huesli-pop { from { opacity: 0; transform: translateY(24px) scale(0.96); } to { opacity: 1; transform: none; } }
@keyframes huesli-wiggle { 0%,100% { transform: rotate(-8deg); } 50% { transform: rotate(-2deg) scale(1.06); } }
.huesli-wiggle { animation: huesli-wiggle 0.5s ease; }
@media (prefers-reduced-motion: reduce) { * { animation: none !important; scroll-behavior: auto !important; } }

@media (max-width: 560px) {
	.ck-banner { left: 12px !important; right: 12px !important; bottom: calc(12px + env(safe-area-inset-bottom)) !important; width: auto !important; max-width: none !important; max-height: calc(100% - 24px); overflow-y: auto !important; padding: 18px 16px 8px !important; gap: 12px !important; border-radius: 28px 28px 28px 10px !important; }
	.ck-row { flex-wrap: wrap !important; align-items: center !important; gap: 12px 14px !important; }
	.ck-text { display: contents !important; }
	.ck-text h2 { flex: 1 1 0; min-width: 0; }
	.ck-text p { flex: 1 1 100%; }
	.ck-more { align-self: center !important; }
}

/* Hero: auf kleinen Handys die schwebenden Elemente etwas zurücknehmen */
@media (max-width: 520px) {
	.hero-stage { min-height: 660px !important; padding-top: 72px; }
	[data-mascot] { top: 0 !important; }
	.site-nav a:not(:last-child) { display: none !important; }
	.hero-float-chip { display: none !important; }
}

/* Unterseiten (Impressum, Datenschutz) */
.huesli-page { max-width: 760px; margin: 0 auto; padding: 32px clamp(20px, 4vw, 40px) 96px; box-sizing: border-box; font-family: Geist, Inter, system-ui, sans-serif; color: #16181D; font-size: 17px; line-height: 1.6; }
.huesli-page h1 { font-weight: 700; font-size: clamp(40px, 5vw, 64px); line-height: 1; letter-spacing: -0.045em; margin: 24px 0 32px; }
.huesli-page h2 { font-weight: 700; font-size: 24px; letter-spacing: -0.02em; margin: 40px 0 8px; }
.huesli-page h3 { font-weight: 650; font-size: 19px; margin: 28px 0 6px; }
.huesli-page p, .huesli-page li { color: #33363C; }
.huesli-page .wp-block-group, .huesli-page .huesli-card { background: #FFFFFF; border-radius: 32px 32px 32px 10px; padding: 24px 28px; }