/*
Theme Name: Havlik Werbung
Theme URI: https://www.havlik-werbung.de/
Author: Havlik Werbung & Beschriftung
Description: Block-Theme für Havlik Werbung & Beschriftung, Magdeburg. Nach der Aktivierung richtet ein Klick unter „Design → Havlik Einrichtung“ alle Seiten, Bilder und das Menü ein.
Version: 1.2.0
Requires at least: 6.6
Tested up to: 6.9
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: havlik
*/

/* ---------- Grundlagen ---------- */
html { scroll-behavior: smooth; }
body { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
:where(h1, h2, h3) { text-wrap: balance; }
:where(p) { text-wrap: pretty; }
img { height: auto; }

:focus-visible { outline: 3px solid var(--wp--preset--color--magenta); outline-offset: 3px; }

/* ---------- CMYK-Farbleiste (Druckkontrollstreifen) ---------- */
.havlik-cmyk {
	height: 6px;
	background: linear-gradient(90deg,
		var(--wp--preset--color--cyan) 0 25%,
		var(--wp--preset--color--magenta) 25% 50%,
		var(--wp--preset--color--gelb) 50% 75%,
		var(--wp--preset--color--tinte) 75% 100%);
}

/* ---------- Header ---------- */
.havlik-header { position: sticky; top: 0; z-index: 50; backdrop-filter: saturate(1.4) blur(10px); background: color-mix(in srgb, var(--wp--preset--color--papier) 88%, transparent) !important; }
.admin-bar .havlik-header { top: 32px; }
@media (max-width: 782px) { .admin-bar .havlik-header { top: 0; position: relative; } }
.havlik-header .wp-block-navigation a { text-decoration: none; font-weight: 600; letter-spacing: .01em; }
.havlik-header .wp-block-navigation-item__content { padding-block: .35em; background-image: linear-gradient(var(--wp--preset--color--magenta), var(--wp--preset--color--magenta)); background-size: 0 2px; background-repeat: no-repeat; background-position: 0 100%; transition: background-size .25s ease; }
.havlik-header .wp-block-navigation-item__content:hover,
.havlik-header .current-menu-item > .wp-block-navigation-item__content { background-size: 100% 2px; }
.havlik-header .wp-block-site-logo img { transition: transform .4s ease; }
.havlik-header .wp-block-site-logo:hover img { transform: rotate(-12deg); }

/* ---------- Überschriften-Akzent ---------- */
.havlik-eyebrow { text-transform: uppercase; letter-spacing: .14em; font-weight: 700; }
.havlik-eyebrow::before { content: ""; display: inline-block; width: 1.6em; height: 3px; margin-right: .6em; vertical-align: middle; background: currentColor; }

/* ---------- Karten ---------- */
.havlik-card { transition: transform .25s ease, box-shadow .25s ease; height: 100%; }
.havlik-card:hover { transform: translateY(-4px); box-shadow: 0 18px 40px -18px rgb(22 22 26 / .35); }
.havlik-card .wp-block-image { margin: 0; overflow: hidden; }
.havlik-card .wp-block-image img { aspect-ratio: 4 / 3; object-fit: cover; width: 100%; transition: transform .5s ease; }
.havlik-card:hover .wp-block-image img { transform: scale(1.04); }
.havlik-card .wp-block-image.is-logo img { object-fit: contain; background: #fff; padding: 1rem; }

/* ---------- Bilder ---------- */
.havlik-foto img { aspect-ratio: 4 / 3; object-fit: cover; width: 100%; }
.havlik-foto--hoch img { aspect-ratio: 4 / 5; }

/* ---------- Kundenlogos ---------- */
.havlik-logos { display: grid !important; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 1rem !important; }
.havlik-logos > .wp-block-image { margin: 0; background: #fff; border: 1px solid var(--wp--preset--color--linie); border-radius: 4px; padding: .75rem; display: flex; align-items: center; justify-content: center; aspect-ratio: 7 / 5; transition: border-color .2s ease; }
.havlik-logos > .wp-block-image:hover { border-color: var(--wp--preset--color--magenta); }
.havlik-logos > .wp-block-image img { max-height: 100%; width: 100%; object-fit: contain; filter: grayscale(1); opacity: .8; transition: filter .3s ease, opacity .3s ease; }
.havlik-logos > .wp-block-image:hover img { filter: none; opacity: 1; }

/* ---------- Kennzahlen ---------- */
.havlik-fakten > .wp-block-column { border-top: 3px solid var(--wp--preset--color--tinte); padding-top: 1rem; }
.havlik-fakten > .wp-block-column:nth-child(1) { border-color: var(--wp--preset--color--cyan); }
.havlik-fakten > .wp-block-column:nth-child(2) { border-color: var(--wp--preset--color--magenta); }
.havlik-fakten > .wp-block-column:nth-child(3) { border-color: var(--wp--preset--color--gelb); }

/* ---------- Leistungsliste (Leistungen-Seite) ---------- */
.havlik-leistung .havlik-nummer { font-family: var(--wp--preset--font-family--archivo); font-variation-settings: "wdth" 75; font-weight: 800; line-height: 1; color: var(--wp--preset--color--magenta); }

/* ---------- Zitat ---------- */
.havlik-zitat { border-left: 6px solid var(--wp--preset--color--magenta) !important; }

/* ---------- Footer ---------- */
.havlik-footer a { text-decoration: none; }
.havlik-footer a:hover { text-decoration: underline; text-underline-offset: .2em; }

/* ---------- Preisanfrage-Formular ---------- */
.havlik-form { display: grid; gap: 1.1rem; }
.havlik-form .reihe { display: grid; gap: 1.1rem; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.havlik-form label { display: block; font-weight: 600; font-size: .92rem; margin-bottom: .35rem; }
.havlik-form input[type="text"], .havlik-form input[type="email"], .havlik-form input[type="tel"], .havlik-form textarea {
	width: 100%; box-sizing: border-box; font: inherit; padding: .8rem .9rem; border: 1.5px solid var(--wp--preset--color--linie); border-radius: 4px; background: #fff; color: var(--wp--preset--color--tinte); transition: border-color .2s ease, box-shadow .2s ease;
}
.havlik-form input:focus, .havlik-form textarea:focus { outline: none; border-color: var(--wp--preset--color--magenta); box-shadow: 0 0 0 3px color-mix(in srgb, var(--wp--preset--color--magenta) 20%, transparent); }
.havlik-form textarea { min-height: 160px; resize: vertical; }
.havlik-form .pflicht { color: var(--wp--preset--color--magenta); }
.havlik-form .checkbox { display: flex; gap: .6rem; align-items: flex-start; font-size: .92rem; }
.havlik-form .checkbox input { margin-top: .3rem; accent-color: var(--wp--preset--color--magenta); }
.havlik-form .checkbox label { font-weight: 400; margin: 0; }
.havlik-form .hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }
.havlik-form button { justify-self: start; font: inherit; font-weight: 700; cursor: pointer; border: 0; border-radius: 4px; padding: .95rem 1.8rem; background: var(--wp--preset--color--magenta); color: #fff; transition: background .2s ease, transform .2s ease; }
.havlik-form button:hover { background: var(--wp--preset--color--tinte); transform: translateY(-1px); }
.havlik-meldung { padding: 1rem 1.2rem; border-radius: 4px; margin-bottom: 1.5rem; font-weight: 600; }
.havlik-meldung.ok { background: #e3f6f1; color: #0b5a48; border-left: 5px solid #13a07f; }
.havlik-meldung.fehler { background: #fde8f1; color: #8a0047; border-left: 5px solid var(--wp--preset--color--magenta); }

/* ---------- Google-Maps (Zwei-Klick-Lösung) ---------- */
.havlik-karte { position: relative; aspect-ratio: 16 / 9; background: var(--wp--preset--color--tinte) repeating-linear-gradient(45deg, transparent 0 22px, rgb(255 255 255 / .04) 22px 44px); color: #fff; display: grid; place-items: center; text-align: center; border-radius: 4px; overflow: hidden; }
.havlik-karte .inhalt { max-width: 34rem; padding: 1.5rem; }
.havlik-karte p { font-size: .9rem; opacity: .85; }
.havlik-karte button { font: inherit; font-weight: 700; cursor: pointer; border: 2px solid #fff; background: transparent; color: #fff; border-radius: 4px; padding: .75rem 1.4rem; margin-top: .5rem; }
.havlik-karte button:hover { background: #fff; color: var(--wp--preset--color--tinte); }
.havlik-karte iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* ---------- Bewegung reduzieren ---------- */
@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}

/* ---------- Header auf kleinen Bildschirmen ---------- */
@media (max-width: 900px) { .havlik-header .wp-block-site-tagline { display: none; } }
@media (max-width: 600px) {
	.havlik-header .havlik-header-cta { display: none; }
	.havlik-header .wp-block-site-title { font-size: 1.05rem !important; }
}

/* ---------- Schneidmarken um Bilder (Druck-Detail) ---------- */
.havlik-marken { position: relative; padding: 14px; color: var(--wp--preset--color--grafit); }
.havlik-marken::before {
	content: ""; position: absolute; inset: 0; pointer-events: none;
	--m: linear-gradient(currentColor, currentColor);
	background:
		var(--m) 0 14px / 9px 1px no-repeat, var(--m) 14px 0 / 1px 9px no-repeat,
		var(--m) 100% 14px / 9px 1px no-repeat, var(--m) calc(100% - 14px) 0 / 1px 9px no-repeat,
		var(--m) 0 calc(100% - 14px) / 9px 1px no-repeat, var(--m) 14px 100% / 1px 9px no-repeat,
		var(--m) 100% calc(100% - 14px) / 9px 1px no-repeat, var(--m) calc(100% - 14px) 100% / 1px 9px no-repeat;
}
.havlik-marken img { display: block; }

/* ---------- Abstände zwischen Abschnitten ---------- */
.wp-site-blocks > * + * { margin-block-start: 0; }
.wp-block-post-content > .alignfull + .alignfull { margin-block-start: 0; }
.havlik-card { overflow: hidden; }
main > .wp-block-post-content > .havlik-aufruf:last-child { margin-bottom: calc(-1 * var(--wp--preset--spacing--60)); }

/* ---------- Korrekturen nach Vorschau ---------- */
.havlik-card > .wp-block-image { width: 100%; max-width: none; margin: 0 !important; }
.havlik-card > .wp-block-image img { display: block; }
.havlik-footer hr.wp-block-separator { width: 100% !important; max-width: none; border: 0; height: 1px; margin-block: var(--wp--preset--spacing--50) var(--wp--preset--spacing--30); opacity: .6; }
.wp-block-group.havlik-card.has-background { padding: 0; }

/* ---------- Seitenübergänge (View Transitions) ----------
   Beim Wechsel zwischen Seiten bleibt die Kopfzeile stehen,
   der Inhalt blendet weich über. Browser ohne Unterstützung
   wechseln die Seite wie gewohnt. */
@view-transition { navigation: auto; }

.havlik-header { view-transition-name: havlik-kopf; }
#wpadminbar { view-transition-name: havlik-adminbar; }

::view-transition-group(havlik-kopf),
::view-transition-group(havlik-adminbar) { animation: none; }

::view-transition-old(root) {
	animation: havlik-raus .18s ease-in both;
}
::view-transition-new(root) {
	animation: havlik-rein .38s cubic-bezier(.2, .7, .2, 1) .06s both;
}
@keyframes havlik-raus { to { opacity: 0; } }
@keyframes havlik-rein { from { opacity: 0; transform: translateY(14px); } }

@media (prefers-reduced-motion: reduce) {
	@view-transition { navigation: none; }
}