/*
 * DEOS e.V. — Theme styles
 * Loaded both in the front-end and the block editor.
 * Only contains styles that can't be expressed via theme.json.
 */

:root {
	--deos-bg:          var(--wp--preset--color--bg, #fbfaf7);
	--deos-cream:       var(--wp--preset--color--cream, #f4f1ea);
	--deos-paper:       var(--wp--preset--color--paper, #ffffff);
	--deos-ink:         var(--wp--preset--color--ink, #1f3050);
	--deos-ink-soft:    var(--wp--preset--color--ink-soft, #4b5b75);
	--deos-hair:        var(--wp--preset--color--hair, #e7e1d5);
	--deos-red:         var(--wp--preset--color--deos-red, #d8533a);
	--deos-green:       var(--wp--preset--color--deos-green, #1f9b6b);
	--deos-blue:        var(--wp--preset--color--deos-blue, #2b8cd1);
	--deos-yellow:      var(--wp--preset--color--deos-yellow, #f2c44a);
	--deos-teal:        var(--wp--preset--color--deos-teal, #2f9a9a);
	/* Max width of the centered content column on desktop; sections stay
	   full-bleed for backgrounds but their content stops here. */
	--deos-max: 1400px;
	--deos-gutter: max(clamp(24px, 5vw, 64px), calc(50% - (var(--deos-max) / 2)));
}
/* Overrides a block's own inline side-padding to cap it at --deos-max. */
.deos-contain {
	padding-left:  var(--deos-gutter) !important;
	padding-right: var(--deos-gutter) !important;
}

body {
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

/* ─────────────────────────────────────────────
 * SITE HEADER
 * ───────────────────────────────────────────── */
.deos-header {
	padding-top: 28px;
	padding-bottom: 20px;
	padding-left:  var(--deos-gutter);
	padding-right: var(--deos-gutter);
}
.deos-header .wp-block-site-logo img,
.deos-header img.custom-logo {
	height: 112px !important;
	width: auto !important;
	max-width: none !important;
}
.deos-header .wp-block-site-title a {
	font-size: 22px;
	font-weight: 600;
	letter-spacing: -0.01em;
	text-decoration: none;
	color: var(--deos-ink);
}
.deos-header .wp-block-navigation {
	gap: 32px !important;
}
.deos-header .wp-block-navigation a {
	font-size: 15px;
	font-weight: 500;
	color: var(--deos-ink);
	text-decoration: none;
	transition: color 0.2s ease, background-color 0.2s ease;
}

/* Hover: nudge toward the same red as the active pill. */
.deos-header .wp-block-navigation .wp-block-navigation-item:not(.current-menu-item):not(.deos-member-btn) > a:hover {
	color: var(--deos-red);
}

/* Active nav item: deos-red pill */
.deos-header .wp-block-navigation .current-menu-item > a,
.deos-header .wp-block-navigation .current-page-ancestor > a {
	background: var(--deos-red);
	color: var(--deos-paper) !important;
	padding: 8px 16px;
	border-radius: 999px;
}

/* Mitgliederbereich: always-pill */
.deos-header .deos-member-btn > a {
	background: var(--deos-ink);
	color: var(--deos-paper) !important;
	padding: 10px 18px;
	border-radius: 999px;
}
.deos-header .deos-member-btn > a:hover {
	background: var(--deos-red);
}


/* ─────────────────────────────────────────────
 * POLAROID ROW — hanging photos in the wind
 * Each image is a regular Image block; CSS does
 * the line, clothespin, tilt, sway animation.
 * ───────────────────────────────────────────── */
.deos-polaroid-row {
	padding-top: 24px;
	padding-bottom: 0;
	padding-left:  var(--deos-gutter);
	padding-right: var(--deos-gutter);
}
.deos-clothesline {
	position: relative;
	display: grid;
	grid-template-columns: repeat(6, 1fr);
	gap: 18px;
	padding-top: 30px;
	margin-top: 12px;
}
/* The line itself */
.deos-clothesline::before {
	content: '';
	position: absolute;
	left: -32px;
	right: -32px;
	top: 28px;
	height: 2px;
	background: linear-gradient(90deg,
		transparent 0, var(--deos-ink) 6%, var(--deos-ink) 94%, transparent 100%);
	opacity: 0.55;
	transform: rotate(-0.4deg);
	border-radius: 2px;
	pointer-events: none;
}
/* Subtle SVG sag could be added if needed — keeping CSS-only for now. */

.deos-clothesline > .wp-block-image,
.deos-clothesline > figure {
	position: relative;
	margin: 0;
	background: #fefdf9;
	padding: 10px 10px 36px;
	border-radius: 3px;
	box-shadow:
		0 1px 0 rgba(0,0,0,0.04),
		0 16px 28px -16px rgba(31,48,80,0.35),
		0 2px 6px rgba(31,48,80,0.08);
	transform-origin: top center;
	animation: deos-sway 6.5s ease-in-out infinite;
	will-change: transform;
}
.deos-clothesline > .wp-block-image img,
.deos-clothesline > figure img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 1 / 1.05;
	object-fit: cover;
	background: #ece7d8;
	border-radius: 1px;
}
/* Clothespin (top center) */
.deos-clothesline > .wp-block-image::before,
.deos-clothesline > figure::before {
	content: '';
	position: absolute;
	top: -14px;
	left: 50%;
	width: 16px;
	height: 26px;
	background: linear-gradient(180deg, #e9d9b8 0%, #cdb88a 60%, #b89c6a 100%);
	border-radius: 3px 3px 4px 4px;
	transform: translateX(-50%) rotate(var(--peg-rot, 0deg));
	box-shadow: 0 1px 2px rgba(0,0,0,0.15), inset 0 -3px 0 rgba(0,0,0,0.08);
	z-index: 2;
}
.deos-clothesline > .wp-block-image::after,
.deos-clothesline > figure::after {
	content: '';
	position: absolute;
	top: -2px;
	left: 50%;
	width: 2px;
	height: 4px;
	background: rgba(0,0,0,0.25);
	transform: translateX(-50%);
	z-index: 2;
}
/* Per-polaroid tilt + animation phase (nth-child 1..6) */
.deos-clothesline > *:nth-child(1) { --base: -4deg; --y: 12px; --sway: 2deg;  --peg-rot:  2deg; animation-delay: 0s;    }
.deos-clothesline > *:nth-child(2) { --base:  3deg; --y:  0px; --sway: -2deg; --peg-rot: -1.5deg; animation-delay: -0.4s; }
.deos-clothesline > *:nth-child(3) { --base: -2deg; --y: 14px; --sway: 2deg;  --peg-rot:  1deg; animation-delay: -0.9s; }
.deos-clothesline > *:nth-child(4) { --base:  4deg; --y:  4px; --sway: -2deg; --peg-rot: -2deg; animation-delay: -1.3s; }
.deos-clothesline > *:nth-child(5) { --base: -3deg; --y: 18px; --sway: 2deg;  --peg-rot:  1.5deg; animation-delay: -1.7s; }
.deos-clothesline > *:nth-child(6) { --base:  2deg; --y:  6px; --sway: -2deg; --peg-rot: -1deg; animation-delay: -2.1s; }

@keyframes deos-sway {
	0%, 100% { transform: rotate(var(--base, 0deg)) translateY(var(--y, 0px)); }
	50%      { transform: rotate(calc(var(--base, 0deg) + var(--sway, 2deg))) translateY(calc(var(--y, 0px) - 2px)); }
}

/* Respect users who prefer no motion */
@media (prefers-reduced-motion: reduce) {
	.deos-clothesline > .wp-block-image,
	.deos-clothesline > figure {
		animation: none;
		transform: rotate(var(--base, 0deg)) translateY(var(--y, 0px));
	}
}

/* On smaller screens the row breaks: 3+3, then 2+2+2 */
@media (max-width: 900px) {
	.deos-clothesline { grid-template-columns: repeat(3, 1fr); }
	.deos-clothesline::before { display: none; }
}
@media (max-width: 540px) {
	.deos-clothesline { grid-template-columns: repeat(2, 1fr); gap: 14px; }
	.deos-clothesline > *:nth-child(5),
	.deos-clothesline > *:nth-child(6) { display: none; }
}

/* ─────────────────────────────────────────────
 * EYEBROW + HERO TEXT
 * ───────────────────────────────────────────── */
.deos-eyebrow {
	font-size: 12px;
	font-weight: 500;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--deos-ink-soft);
	display: inline-flex;
	align-items: center;
	gap: 10px;
}
.deos-eyebrow::before {
	content: '';
	width: 24px;
	height: 1px;
	background: var(--deos-ink-soft);
}
.deos-accent-highlight {
	background: linear-gradient(180deg, transparent 62%, rgba(47,154,154,0.25) 62%);
	padding: 0 4px;
}

/* ─────────────────────────────────────────────
 * STAT PILLS
 * ───────────────────────────────────────────── */
.deos-pill {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 8px 14px;
	border: 1px solid var(--deos-hair);
	border-radius: 999px;
	background: var(--deos-paper);
	font-size: 13px;
	font-weight: 500;
}
.deos-pill::before {
	content: '';
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--pill-dot, var(--deos-teal));
	display: inline-block;
}
.deos-pill.is-red    { --pill-dot: var(--deos-red); }
.deos-pill.is-green  { --pill-dot: var(--deos-green); }
.deos-pill.is-blue   { --pill-dot: var(--deos-blue); }
.deos-pill.is-yellow { --pill-dot: var(--deos-yellow); }
.deos-pill.is-teal   { --pill-dot: var(--deos-teal); }

/* Extra breathing room between the "Über uns" text and the stats column. */
.deos-about-columns {
	column-gap: 64px;
	row-gap: 32px;
}

/* ─────────────────────────────────────────────
 * EDITORIAL CONTENT PAGES (e.g. "Wer wir sind")
 * ───────────────────────────────────────────── */
.deos-editorial-row {
	display: grid;
	grid-template-columns: 240px 1fr;
	gap: 12px 56px;
	align-items: start;
}
.deos-editorial-row > .wp-block-heading {
	grid-column: 1;
	grid-row: 1 / -1;
	position: relative;
	padding-left: 18px;
	margin: 0 !important;
	font-size: clamp(22px, 2.4vw, 28px);
	overflow-wrap: break-word;
}
.deos-editorial-row > .wp-block-heading::before {
	content: '';
	position: absolute;
	left: 0;
	top: 6px;
	bottom: 6px;
	width: 3px;
	background: var(--deos-red);
	border-radius: 2px;
}
.deos-editorial-row.is-alt > .wp-block-heading::before {
	background: var(--deos-teal);
}
.deos-editorial-row > p {
	grid-column: 2;
	max-width: 72ch;
}
@media (max-width: 780px) {
	.deos-editorial-row {
		grid-template-columns: 1fr;
	}
	.deos-editorial-row > .wp-block-heading {
		grid-row: auto;
	}
	.deos-editorial-row > p {
		grid-column: 1;
	}
}

/* Handwritten-style pull-quote, breaks up long-form text. */
.deos-pullquote {
	font-family: var(--wp--preset--font-family--caveat);
	font-size: clamp(28px, 4vw, 40px);
	font-weight: 700;
	color: var(--deos-red);
	text-align: center;
	max-width: 620px;
	margin: 56px auto 8px;
	line-height: 1.25;
	transform: rotate(-1deg);
}
.deos-pullquote.is-alt {
	color: var(--deos-teal);
	transform: rotate(1deg);
}

/* Colored-dot section divider, echoes the footer. */
.deos-divider-dots {
	display: flex;
	justify-content: center;
	gap: 8px;
	margin: 8px 0 40px;
}
.deos-divider-dots span {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	display: inline-block;
}

/* Arrow link — "Mehr über uns" style CTA under a text block. */
.deos-link-arrow {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin-top: 24px;
	font-size: 15px;
	font-weight: 600;
	color: var(--deos-ink);
	text-decoration: none;
	padding-bottom: 3px;
	border-bottom: 1px solid var(--deos-hair);
	transition: color 0.2s ease, border-color 0.2s ease;
}
.deos-link-arrow svg {
	transition: transform 0.2s ease;
}
.deos-link-arrow:hover {
	color: var(--deos-red);
	border-color: var(--deos-red);
}
.deos-link-arrow:hover svg {
	transform: translateX(4px);
}

/* ─────────────────────────────────────────────
 * LOGIN BOX
 * ───────────────────────────────────────────── */
.deos-login-box {
	background: var(--deos-paper);
	border: 1px solid var(--deos-hair);
	border-radius: 16px;
	padding: 32px;
	margin-top: 48px;
}
/* Cap the login card's width on desktop so it doesn't stretch full-width;
   phones/tablets keep it at 100% since there's no room to spare there. */
@media (min-width: 900px) {
	.deos-login-box {
		width: 40%;
		min-width: 320px;
		max-width: 480px;
	}
}

/* Sit beside the "Über uns" columns instead of centered below them.
   Scoped to the exact section (not all .deos-contain) via :has(). */
.deos-contain:has(> .deos-login-box) {
	position: relative;
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	gap: 40px 80px;
}
/* The "Über uns" eyebrow lives inside the first column (baked into page
   content, not editable here) but should read as a full-width label above
   both the text+pills row and the login card. Pull it out visually. */
.deos-contain:has(> .deos-login-box) > .wp-block-columns > .wp-block-column:first-child > .deos-eyebrow {
	position: absolute;
	top: 0;
	left: var(--deos-gutter);
	margin: 0;
}
.deos-contain:has(> .deos-login-box) > .wp-block-columns {
	flex: 1 1 760px;
}
.deos-contain:has(> .deos-login-box) > .deos-login-box {
	flex: 0 1 400px;
	margin-top: 0;
}
/* Inside that row, give the text column more room than the pills column
   (they'd otherwise split 50/50 and wrap the heading awkwardly). */
.deos-contain:has(> .deos-login-box) > .wp-block-columns > .wp-block-column:first-child {
	flex: 2 1 0%;
}
.deos-contain:has(> .deos-login-box) > .wp-block-columns > .wp-block-column:last-child {
	flex: 1 1 0%;
}
.deos-login-box h3 {
	display: flex;
	align-items: center;
	gap: 10px;
	font-size: 18px;
	margin: 0 0 4px 0;
}
.deos-login-box h3::before {
	content: '';
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--deos-green);
	display: inline-block;
}
.deos-login-box .deos-login-form input[type="text"],
.deos-login-box .deos-login-form input[type="email"],
.deos-login-box .deos-login-form input[type="password"] {
	display: block;
	width: 100%;
	border: 1px solid var(--deos-hair);
	border-radius: 10px;
	padding: 12px 14px;
	background: var(--deos-bg);
	font: inherit;
	font-size: 14px;
	margin-bottom: 14px;
	color: var(--deos-ink);
}
.deos-login-box .deos-login-form input::placeholder { color: #a5acba; }
.deos-login-box .deos-login-form button {
	width: 100%;
	background: var(--deos-ink);
	color: #fff;
	border: 0;
	border-radius: 10px;
	padding: 12px 14px;
	font: inherit;
	font-weight: 500;
	font-size: 14px;
	cursor: pointer;
	margin-top: 6px;
}
.deos-login-box .deos-login-meta {
	display: flex;
	justify-content: space-between;
	font-size: 12px;
	color: var(--deos-ink-soft);
	margin-top: 14px;
}

/* ─────────────────────────────────────────────
 * MEMBER GRID (homepage)
 * ───────────────────────────────────────────── */
.deos-map-link {
	color: var(--deos-teal);
	font-weight: 600;
	text-decoration: none;
	border-bottom: 1px solid currentColor;
}
.deos-member-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 14px;
	margin-bottom: 32px;
}
.deos-member-card {
	display: flex;
	flex-direction: column;
	gap: 4px;
	padding: 16px 18px;
	border: 1px solid var(--deos-hair);
	border-radius: 12px;
	background: var(--deos-paper);
}
.deos-member-card strong {
	font-size: 14px;
	color: var(--deos-ink);
	font-weight: 600;
}
.deos-member-card span {
	font-size: 12.5px;
	color: var(--deos-ink-soft);
}
@media (max-width: 900px) {
	.deos-member-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 540px) {
	.deos-member-grid { grid-template-columns: 1fr; }
}

/* ─────────────────────────────────────────────
 * CONTACT TEASER (homepage)
 * ───────────────────────────────────────────── */
.deos-contact-block {
	background: var(--deos-paper);
	border: 1px solid var(--deos-hair);
	border-radius: 16px;
	padding: 40px;
	width: 100%;
}
.deos-contact-email {
	display: flex;
	align-items: center;
	gap: 12px;
	font-size: 20px;
	font-weight: 700;
	color: var(--deos-ink);
	text-decoration: none;
	transition: color 0.2s ease;
}
.deos-contact-email svg {
	flex: none;
	color: var(--deos-red);
}
.deos-contact-email:hover {
	color: var(--deos-red);
}
.deos-contact-divider {
	height: 1px;
	background: var(--deos-hair);
	margin: 24px 0;
}
.deos-contact-row {
	display: flex;
	align-items: flex-start;
	gap: 12px;
}
.deos-contact-row svg {
	flex: none;
	margin-top: 2px;
	color: var(--deos-teal);
}
.deos-contact-row p {
	font-size: 14px;
	color: var(--deos-ink-soft);
	line-height: 1.7;
	margin: 0;
}

/* ─────────────────────────────────────────────
 * FOOTER
 * ───────────────────────────────────────────── */
.deos-footer {
	border-top: 1px solid var(--deos-hair);
	margin-left:  var(--deos-gutter);
	margin-right: var(--deos-gutter);
	padding: 24px 0 40px;
	color: var(--deos-ink-soft);
	font-size: 13px;
}
.deos-footer-col {
	display: flex;
	flex-direction: column;
	gap: 4px;
}
.deos-footer-col a {
	color: var(--deos-ink-soft);
}
.deos-footer-col a:hover {
	color: var(--deos-red);
}
.deos-footer-col-right {
	text-align: right;
}
@media (max-width: 640px) {
	.deos-footer-col-right { text-align: left; }
}
.deos-footer-dots {
	display: inline-flex;
	gap: 6px;
	align-items: center;
}
.deos-footer-dots i {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	display: inline-block;
}