/*
Theme Name: Hafen
Theme URI: https://hafenstudios.com/hafen/
Author: hafenstudios
Author URI: https://hafenstudios.com/
Description: Das AI-native WordPress-Block-Theme von hafenstudios. Liefert schnelles, barrierefreies, maschinenlesbares Markup und ist der Heimathafen für die Plugins Linkjet, MemberJet und Adjet. Präsentationsschicht; die AI-Funktionen (Schema, llms.txt, Answer-Blöcke, KI) leben im Companion-Plugin "Hafen Core".
Requires at least: 6.4
Tested up to: 6.7
Requires PHP: 7.4
Version: 0.1.5
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: hafen
Tags: blog, portfolio, one-column, block-styles, wide-blocks, full-site-editing, custom-colors, custom-menu, editor-style, featured-images, threaded-comments, translation-ready, accessibility-ready
*/

/* =========================================================
   HAFEN — Front-end + Editor supplemental styles.
   Das Meiste kommt aus theme.json. Hier nur, was theme.json
   (noch) nicht ausdrücken kann: Sticky-Header-Politur,
   Answer-Block-Styles, Reveal-Enhancement, Skip-Link.
   ========================================================= */

/* ---------- Skip-Link (a11y) ---------- */
.hafen-skip-link {
	position: absolute; left: -9999px; top: 12px; z-index: 300;
	background: var(--wp--preset--color--brand-dark); color: #fff;
	padding: 11px 18px; border-radius: 10px; font-weight: 700; text-decoration: none;
}
.hafen-skip-link:focus { left: 12px; }

/* ---------- Sticky header ---------- */
.hafen-header {
	position: sticky; top: 0; z-index: 60;
	background: rgba(255, 255, 255, .8);
	-webkit-backdrop-filter: saturate(180%) blur(16px);
	backdrop-filter: saturate(180%) blur(16px);
	border-bottom: 1px solid transparent;
	transition: border-color .25s ease, box-shadow .25s ease;
}
.hafen-header.is-scrolled {
	border-bottom-color: var(--wp--preset--color--border);
	box-shadow: 0 1px 2px rgba(12,27,46,.06), 0 2px 6px rgba(12,27,46,.06);
}
.hafen-header { padding-block: 0.85rem; }
.hafen-header .hafen-brand { gap: 0.6rem; }
.hafen-header .wp-block-site-title { margin: 0; }
.hafen-header .wp-block-site-title a { font-weight: 900; letter-spacing: -.03em; text-decoration: none; color: var(--wp--preset--color--contrast); }

/* ---------- Footer (neutral, per CSS gestylt) ---------- */
.hafen-footer {
	background: var(--wp--preset--color--deep); color: #b9c7cf;
	padding-block: var(--wp--preset--spacing--60) var(--wp--preset--spacing--50);
}
.hafen-footer .hafen-brand { gap: 0.6rem; margin-bottom: 0.9rem; }
.hafen-footer .wp-block-site-title { margin: 0; }
.hafen-footer .wp-block-site-title a { color: #fff; font-weight: 900; letter-spacing: -.03em; text-decoration: none; }
.hafen-footer .wp-block-site-tagline { color: #8ea3ad; font-size: 0.95rem; margin: 0 0 1.5rem; max-width: 340px; }
.hafen-footer .hafen-footer-copy { margin: 0; padding-top: 1.4rem; border-top: 1px solid rgba(255,255,255,.1); color: #7c9099; font-size: 0.85rem; }
.hafen-footer .hafen-footer-credit { margin: 0.4rem 0 0; color: #7c9099; font-size: 0.8rem; }
.hafen-footer .hafen-footer-credit a { color: #b9c7cf; text-decoration: none; }
.hafen-footer .hafen-footer-credit a:hover { color: #fff; }
.hafen-footer a { color: #cfe0e6; }
.hafen-footer a:hover { color: #fff; }

/* ---------- Mobile-Menü: WordPress-Standard-Hamburger ist ein blankes,
   leicht zu übersehendes 24px-Icon. Wir machen daraus einen klaren,
   tippbaren „Menü"-Button (44px Touch-Ziel) und vergrößern die
   Overlay-Links. Label über --hafen-menu-label überschreibbar. ---------- */
@media (max-width: 600px) {
	.hafen-header .wp-block-navigation__responsive-container-open:not(.always-shown) {
		display: flex; align-items: center; gap: 0.45rem;
		min-height: 44px; padding: 0.35rem 0.8rem;
		border: 1.5px solid var(--wp--preset--color--border); border-radius: 999px;
		background: #fff; color: var(--wp--preset--color--brand-dark);
	}
	.hafen-header .wp-block-navigation__responsive-container-open:not(.always-shown)::after {
		content: var(--hafen-menu-label, "Menü");
		font-size: 0.95rem; font-weight: 700; letter-spacing: -0.01em;
	}
	.hafen-header .wp-block-navigation__responsive-container-open svg { width: 22px; height: 22px; }

	.hafen-header .wp-block-navigation__responsive-container.is-menu-open { padding-top: 1rem; }
	.hafen-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container { gap: 0.25rem; }
	.hafen-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item a { font-size: 1.2rem; padding-block: 0.5rem; }
}

/* ---------- Brand mark ---------- */
.hafen-brand-mark {
	display: inline-grid; place-items: center; width: 40px; height: 40px;
	border-radius: 12px; color: #fff;
	background: var(--wp--preset--gradient--brand);
	box-shadow: 0 8px 18px -8px rgba(14,147,132,.7);
}
.hafen-tag {
	font-size: 11px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase;
	color: var(--wp--preset--color--ai-dark); background: var(--wp--preset--color--ai-light);
	padding: 4px 8px; border-radius: 7px;
}

/* ---------- Eyebrow ---------- */
.hafen-eyebrow {
	display: inline-flex; align-items: center; gap: 9px;
	font-size: 13px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase;
	color: var(--wp--preset--color--brand-dark);
}
.hafen-eyebrow.is-ai { color: var(--wp--preset--color--ai-dark); }
.hafen-eyebrow::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; box-shadow: 0 0 0 4px color-mix(in srgb, currentColor 18%, transparent); }

/* =========================================================
   Answer-engine block styles (rein visuell, aus Core-Blöcken).
   Die echten schema-emittierenden Custom-Blöcke kommen in
   "Hafen Core". Hier: Gruppen-/Details-Styles für denselben Look.
   ========================================================= */
.wp-block-group.is-style-hafen-tldr,
.wp-block-group.is-style-hafen-definition,
.wp-block-group.is-style-hafen-steps {
	border: 1px solid var(--wp--preset--color--border);
	border-left: 4px solid var(--wp--preset--color--brand);
	border-radius: var(--wp--preset--spacing--radius, 18px);
	padding: clamp(1.1rem, 3vw, 1.5rem);
	background: #fff;
	box-shadow: 0 1px 2px rgba(12,27,46,.06), 0 2px 6px rgba(12,27,46,.06);
}
.wp-block-group.is-style-hafen-definition { border-left-color: var(--wp--preset--color--ai); }
.wp-block-group.is-style-hafen-steps { border-left-color: var(--wp--preset--color--adjet); }

.wp-block-group.is-style-hafen-card {
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--wp--preset--spacing--radius, 18px);
	padding: clamp(1.4rem, 3vw, 1.9rem);
	background: #fff;
	box-shadow: 0 1px 2px rgba(12,27,46,.06), 0 2px 6px rgba(12,27,46,.06);
	height: 100%;
	transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.wp-block-group.is-style-hafen-card:hover {
	transform: translateY(-6px);
	box-shadow: 0 16px 38px -16px rgba(12,27,46,.22);
	border-color: color-mix(in srgb, var(--wp--preset--color--brand) 40%, var(--wp--preset--color--border));
}

/* Details block styled as FAQ item */
.wp-block-details.is-style-hafen-faq {
	border-bottom: 1px solid var(--wp--preset--color--border);
	padding: 4px 0;
}
.wp-block-details.is-style-hafen-faq summary { font-weight: 700; cursor: pointer; padding: 10px 0; }

/* ---------- Reveal enhancement (progressive) ----------
   Default: sichtbar. Erst wenn JS die Klasse .hafen-anim setzt,
   wird versteckt + animiert. So bleibt der Inhalt ohne JS da. */
.hafen-reveal { transition: opacity .7s cubic-bezier(.16,.8,.3,1), transform .7s cubic-bezier(.16,.8,.3,1); }
.hafen-anim .hafen-reveal { opacity: 0; transform: translateY(24px); }
.hafen-anim .hafen-reveal.is-in { opacity: 1; transform: none; }

/* ---------- Icon-ish list markers for feature lists ---------- */
.hafen-checklist { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; }
.hafen-checklist li { position: relative; padding-left: 30px; }
.hafen-checklist li::before {
	content: ""; position: absolute; left: 0; top: .35em; width: 18px; height: 18px;
	border-radius: 6px; background: var(--wp--preset--color--brand-light);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230d7d6e' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
	background-size: 13px; background-repeat: no-repeat; background-position: center;
}

/* =========================================================
   Utility-Klassen für die Patterns (was Core-Blöcke nicht können)
   ========================================================= */

/* Gradient-Text für Headline-Akzente */
.hafen-grad-text {
	background: linear-gradient(115deg, #14b8a6 10%, #6d5efc 90%);
	-webkit-background-clip: text; background-clip: text;
	-webkit-text-fill-color: transparent; color: transparent;
}

/* Hero-Hintergrund: sanftes Mesh + feines Raster */
.hafen-hero { position: relative; isolation: isolate; overflow: hidden; }
.hafen-hero::before {
	content: ""; position: absolute; inset: 0; z-index: -2;
	background:
		radial-gradient(1100px 540px at 82% -14%, rgba(20,184,166,.16), transparent 60%),
		radial-gradient(780px 500px at 4% 8%, rgba(109,94,252,.13), transparent 58%);
}
.hafen-hero::after {
	content: ""; position: absolute; inset: 0; z-index: -2; opacity: .5;
	background-image: linear-gradient(rgba(12,27,46,.035) 1px, transparent 1px), linear-gradient(90deg, rgba(12,27,46,.035) 1px, transparent 1px);
	background-size: 34px 34px;
	-webkit-mask-image: radial-gradient(860px 520px at 60% 18%, #000, transparent 75%);
	mask-image: radial-gradient(860px 520px at 60% 18%, #000, transparent 75%);
}

/* Badge-Pille (Hero-Eyebrow als Chip) */
.hafen-chip {
	display: inline-flex; align-items: center; gap: 8px;
	padding: 7px 15px; border-radius: 999px; font-size: 0.85rem; font-weight: 700;
	background: #fff; border: 1px solid var(--wp--preset--color--border);
	box-shadow: 0 1px 2px rgba(12,27,46,.06), 0 2px 6px rgba(12,27,46,.06);
	color: var(--wp--preset--color--text-soft);
}

/* Zitat-Pille im AI-Panel */
.hafen-cited {
	display: inline; font-weight: 700; color: var(--wp--preset--color--ai-dark);
	background: var(--wp--preset--color--ai-light); padding: 1px 8px; border-radius: 6px;
	box-decoration-break: clone; -webkit-box-decoration-break: clone;
}

/* Kleiner Marker-Punkt für Panel-Kopfzeilen */
.hafen-panel-tag {
	font-size: 0.75rem; font-weight: 700; color: var(--wp--preset--color--brand-dark);
	background: var(--wp--preset--color--brand-light); padding: 4px 10px; border-radius: 999px;
}

/* Feature-/Panel-Icon-Box */
.hafen-ic {
	display: inline-grid; place-items: center; width: 48px; height: 48px; flex: none;
	border-radius: 13px; color: #fff; background: var(--wp--preset--gradient--brand);
}
.hafen-ic svg { width: 24px; height: 24px; }
.hafen-ic.is-ai { background: var(--wp--preset--gradient--ai); }
.hafen-ic.is-adjet { background: var(--wp--preset--gradient--adjet); }
.hafen-ic.is-memberjet { background: var(--wp--preset--gradient--memberjet); }

/* Große Kennzahl (Performance) */
.hafen-stat { font-size: clamp(2.75rem, 6vw, 3.75rem); font-weight: 900; letter-spacing: -.03em; line-height: 1; }

/* Hero-Trust-Zeile */
.hafen-trust { color: var(--wp--preset--color--muted); font-size: 0.9rem; font-weight: 600; }
.hafen-trust p { margin: 0; }

/* Hero-KI-Panel (Boxen per Klasse, damit das Block-Markup gültig bleibt) */
.hafen-ml-auto { margin-left: auto; }
.hafen-qbubble { background: var(--wp--preset--color--surface); border-radius: 14px; padding: 0.8rem 1rem; }
.hafen-qbubble p { margin: 0; }
.hafen-src { padding: 0.75rem 0.9rem; border: 1px dashed var(--wp--preset--color--brand); border-radius: 12px; background: var(--wp--preset--color--brand-light); }
.hafen-src-text p { margin: 0; }
.hafen-ic-sm { width: 34px; height: 34px; border-radius: 9px; }
.hafen-ic-sm svg { width: 18px; height: 18px; }

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