/*
Theme Name: Bajric
Theme URI: https://hbajric.de
Author: Fachbetrieb H. Bajric
Description: Block-Theme für den Maurer- und Fliesenfachbetrieb H. Bajric. Alle Texte und Bilder im Website-Editor bearbeitbar.
Version: 1.0.2
Requires at least: 6.6
Requires PHP: 7.4
License: GPL v2 or later
Text Domain: bajric
*/

:root {
	--bj-ink: var(--wp--preset--color--ink);
	--bj-blue: var(--wp--preset--color--primary);
	--bj-line: var(--wp--preset--color--line);
	--bj-muted: var(--wp--preset--color--muted);
	--bj-brass: var(--wp--preset--color--brass);
	--bj-soft: var(--wp--preset--color--primary-soft);
	--bj-tiles: linear-gradient(rgb(255 255 255 / 6%) 1px, transparent 1px), linear-gradient(90deg, rgb(255 255 255 / 6%) 1px, transparent 1px);
}

body { -webkit-font-smoothing: antialiased; }
h1, h2, h3 { text-wrap: balance; }
.bj-main > * { margin-block: 0; }
.wp-site-blocks > * { margin-block-start: 0; }

/* ---------- Flächen ---------- */
.bj-dark, .bj-blue { color: #fff; background-image: var(--bj-tiles); background-size: 56px 56px; }
.bj-dark { background-color: var(--bj-ink); }
.bj-blue { background-color: var(--bj-blue); }
.bj-dark a:where(:not(.wp-element-button)), .bj-blue a:where(:not(.wp-element-button)) { color: #fff; }
.bj-stone { background: var(--wp--preset--color--stone); }
.bj-section { padding-block: clamp(4rem, 8vw, 7rem); }
.bj-hero { padding-block: clamp(4rem, 9vw, 7rem); position: relative; overflow: hidden; }
.bj-hero h1 { max-width: 16ch; }
.bj-narrow { max-width: 760px; }

/* ---------- Typo-Bausteine ---------- */
.bj-eyebrow { display: flex; align-items: center; gap: .75rem; font-size: .75rem !important; font-weight: 600; letter-spacing: .22em; text-transform: uppercase; color: var(--bj-blue); }
.bj-eyebrow::before { content: ""; width: 1.5rem; height: 2px; background: var(--bj-brass); flex: none; }
.bj-dark .bj-eyebrow, .bj-blue .bj-eyebrow { color: rgb(255 255 255 / 70%); }
.bj-lead { font-size: var(--wp--preset--font-size--large); color: var(--bj-muted); max-width: 40rem; }
.bj-dark .bj-lead, .bj-blue p { color: rgb(255 255 255 / 78%); }
.bj-note { color: var(--bj-muted); font-size: .9rem; }
.bj-more { margin-top: 2rem; font-weight: 600; }
.bj-more a, .bj-dark a, .bj-footer a { text-decoration: none; }

/* ---------- Buttons ---------- */
.wp-element-button { transition: background-color .15s, color .15s; }
.bj-btn-ghost .wp-element-button { background: transparent; color: #fff; border: 1px solid rgb(255 255 255 / 35%); }
.bj-btn-ghost .wp-element-button:hover { background: rgb(255 255 255 / 10%); }
.bj-btn-light .wp-element-button { background: #fff; color: var(--bj-blue); }
.bj-btn-light .wp-element-button:hover { background: rgb(255 255 255 / 90%); color: var(--bj-blue); }

/* ---------- Kopfzeile ---------- */
.bj-header-wrap { position: sticky; top: 0; z-index: 50; background: rgb(250 249 246 / 92%); backdrop-filter: blur(10px); border-bottom: 1px solid var(--bj-line); }
.admin-bar .bj-header-wrap { top: var(--wp-admin--admin-bar--height, 0); }
.bj-header { min-height: 4.5rem; gap: 1.5rem; }
.bj-logo { display: block; line-height: 0; }
.bj-logo-svg { display: block; height: 52px; width: auto; font-family: var(--wp--preset--font-family--archivo); }
.bj-logo-sub { fill: var(--bj-blue); }
.bj-logo-footer .bj-logo-svg { height: 52px; }
.bj-logo-footer .bj-logo-sub { fill: rgb(255 255 255 / 75%); }
.bj-nav { font-size: .9rem; font-weight: 500; }
.bj-nav .wp-block-navigation-item__content { color: var(--bj-muted); padding: .5rem .25rem; }
.bj-nav .wp-block-navigation-item__content:hover { color: var(--bj-blue); }
.bj-header-cta { gap: 1.25rem; align-items: center; }
.bj-phone { margin: 0; font-weight: 600; white-space: nowrap; }
.bj-phone a { color: inherit; text-decoration: none; }
.bj-header-cta .wp-element-button { padding: .6rem 1rem; font-size: .9rem; }
@media (max-width: 1080px) { .bj-header-cta { display: none !important; } }
/* aktive Seite */
.home .bj-nav a[href="/"],
.page-ueber-uns .bj-nav a[href$="/ueber-uns/"], .page-leistungen .bj-nav a[href$="/leistungen/"],
.page-galerie .bj-nav a[href$="/galerie/"], .page-kontakt .bj-nav a[href$="/kontakt/"] { color: var(--wp--preset--color--contrast); box-shadow: inset 0 -2px var(--bj-blue); }

/* ---------- Startseite: Hero ---------- */
.bj-hero-cols { align-items: center !important; gap: clamp(2rem, 5vw, 4rem); }
.bj-hero .wp-block-buttons { margin-top: 2rem; }
.bj-facts { margin-top: 3rem; padding-top: 1.5rem; border-top: 1px solid rgb(255 255 255 / 15%); max-width: 32rem; gap: 1rem; }
.bj-facts > * > p, .bj-factgrid p { margin: 0; }
.bj-num { font-size: clamp(2rem, 3.5vw, 2.5rem); font-weight: 700; line-height: 1.1; }
.bj-num-label { font-size: .875rem; color: rgb(255 255 255 / 60%); }
.bj-factgrid .bj-num { color: var(--bj-blue); }
.bj-factgrid .bj-num-label { color: var(--bj-muted); font-size: 1rem; }
.bj-frame { position: relative; margin: 0 1rem 1rem 0; }
.bj-frame::before { content: ""; position: absolute; inset: 1rem -1rem -1rem 1rem; border: 2px solid rgb(217 144 31 / 60%); border-radius: 8px; }
.bj-frame img { position: relative; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 8px; box-shadow: 0 25px 50px rgb(0 0 0 / 35%); }
.bj-cover { margin: 0; }
.bj-cover img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 8px; }
.bj-why .bj-cover img { aspect-ratio: 5 / 6; }
.bj-why { align-items: center !important; gap: clamp(2rem, 6vw, 5rem); }

/* ---------- Kacheln (Fliesenspiegel mit 1px-Fuge) ---------- */
.bj-tilegrid { gap: 1px !important; background: var(--bj-line); border: 1px solid var(--bj-line); border-radius: 8px; overflow: hidden; margin-top: 3rem; counter-reset: bj; }
.bj-tilegrid > * { background: #fff; margin: 0 !important; }
.bj-cards { gap: 1.5rem !important; margin-top: 3rem; counter-reset: bj; }
.bj-cards > .bj-card { border: 1px solid var(--bj-line); border-radius: 8px; background: #fff; margin: 0 !important; transition: box-shadow .2s; }
.bj-cards > .bj-card:hover { box-shadow: 0 12px 30px rgb(13 27 44 / 8%); }
.bj-card { position: relative; padding: 2rem; counter-increment: bj; }
.bj-card h3 { margin: 0 0 .5rem; }
.bj-card p { margin: 0; color: var(--bj-muted); }
.bj-card::before { content: ""; display: block; width: 48px; height: 48px; margin-bottom: 2rem; border-radius: 6px; background: var(--bj-soft) var(--bj-icon, none) center / 24px no-repeat; transition: background-color .2s; }
.bj-card::after { content: counter(bj, decimal-leading-zero); position: absolute; top: 2.9rem; right: 2rem; font: .875rem ui-monospace, monospace; color: #8a909a; }
.bj-nonum .bj-card::after { content: none; }
.bj-tilegrid .bj-card:hover { background: #fbfaf8; }
.bj-factgrid .bj-fact { padding: 2rem; }
.bj-chips { display: flex; flex-wrap: wrap; gap: .5rem; list-style: none; padding: 0; margin: 1.5rem 0 0; }
.bj-chips li { background: var(--wp--preset--color--stone); border-radius: 999px; padding: .25rem .75rem; font-size: .875rem; font-weight: 500; }

/* Icons (Farbe steckt in den SVG-Dateien) */
.bj-i-home { --bj-icon: url(assets/icons/home.svg); } .bj-i-grid { --bj-icon: url(assets/icons/grid.svg); }
.bj-i-layers { --bj-icon: url(assets/icons/layers.svg); } .bj-i-hammer { --bj-icon: url(assets/icons/hammer.svg); }
.bj-i-brush { --bj-icon: url(assets/icons/brush.svg); } .bj-i-shield { --bj-icon: url(assets/icons/shield.svg); }
.bj-i-building { --bj-icon: url(assets/icons/building.svg); } .bj-i-wrench { --bj-icon: url(assets/icons/wrench.svg); }
.bj-i-key { --bj-icon: url(assets/icons/key.svg); } .bj-i-briefcase { --bj-icon: url(assets/icons/briefcase.svg); }
.bj-i-award { --bj-icon: url(assets/icons/award.svg); } .bj-i-target { --bj-icon: url(assets/icons/target.svg); }
.bj-i-heart { --bj-icon: url(assets/icons/heart.svg); } .bj-i-users { --bj-icon: url(assets/icons/users.svg); }
.bj-i-phone { --bj-icon: url(assets/icons/phone.svg); } .bj-i-mail { --bj-icon: url(assets/icons/mail.svg); }
.bj-i-pin { --bj-icon: url(assets/icons/pin.svg); } .bj-i-clock { --bj-icon: url(assets/icons/clock.svg); }

/* ---------- Ablauf ---------- */
.bj-steps { gap: 2rem !important; margin-top: 3rem; }
.bj-step { border-top: 2px solid var(--bj-blue); padding-top: 1.5rem; margin: 0 !important; }
.bj-step p, .bj-step h3 { margin: 0 0 .5rem; }
.bj-step p:not(.bj-step-no) { color: var(--bj-muted); }
.bj-step-no { font-size: .875rem; font-weight: 600; color: var(--bj-blue); }

/* ---------- Listen ---------- */
.bj-checks { list-style: none; padding: 0; display: grid; gap: 1rem; font-size: 1.125rem; }
.bj-checks li { display: flex; gap: .75rem; align-items: center; }
.bj-checks li::before { content: ""; flex: none; width: 22px; height: 22px; background: url(assets/icons/check.svg) center / contain no-repeat; }
.bj-plain { list-style: none; padding: 0; display: grid; gap: .6rem; }
.bj-big { font-size: 1.125rem; font-weight: 600; }

/* ---------- Galerie ---------- */
.bj-gallery { column-gap: 2rem !important; row-gap: 3.5rem !important; }
.bj-project { margin: 0 !important; }
.bj-project .bj-eyebrow { margin-top: 1.25rem; }
.bj-project h2 { font-size: 1.5rem; margin: .5rem 0 .25rem; }
.bj-project p:last-child { color: var(--bj-muted); margin: 0; }
.bj-project img { transition: transform .7s; }
.bj-project .bj-cover { overflow: hidden; border-radius: 8px; }
.bj-project:hover img { transform: scale(1.03); }
@media (min-width: 800px) { .bj-project:nth-child(even) { margin-top: 4rem !important; } }
.bj-gallery + .bj-note { text-align: center; margin: 4rem auto 0; max-width: 40rem; }

/* ---------- Aufruf ---------- */
.bj-cta-wrap { padding-top: 0; }
.bj-stone + .bj-cta-wrap, .bj-cta-wrap:first-child { padding-top: clamp(4rem, 8vw, 7rem); }
.bj-cta { border-radius: 8px; padding: clamp(2.5rem, 5vw, 4rem) clamp(1.5rem, 5vw, 3.5rem); }
.bj-cta h2 { margin: 0 0 .75rem; font-size: clamp(1.75rem, 3vw, 2.5rem); }
.bj-cta p { margin: 0 0 2rem; font-size: 1.125rem; max-width: 36rem; }

/* ---------- Kontakt ---------- */
.bj-contact { gap: clamp(2rem, 5vw, 4rem); }
.bj-contact h2 { font-size: clamp(1.5rem, 2.5vw, 1.875rem); }
.bj-contactlist { border: 1px solid var(--bj-line); border-radius: 8px; background: #fff; margin-top: 2rem; }
.bj-ci { display: flex; gap: 1rem; padding: 1.25rem 1.5rem; margin: 0 !important; }
.bj-ci + .bj-ci { border-top: 1px solid var(--bj-line); }
.bj-ci::before { content: ""; flex: none; width: 44px; height: 44px; border-radius: 6px; background: var(--bj-soft) var(--bj-icon) center / 22px no-repeat; }
.bj-ci p { margin: 0; color: var(--bj-muted); font-size: .875rem; }
.bj-ci p span { display: block; }
.bj-ci p a, .bj-ci p strong { display: block; font-size: 1.1rem; font-weight: 600; color: var(--wp--preset--color--contrast); text-decoration: none; }
.bj-formcard { border: 1px solid var(--bj-line); border-radius: 8px; background: #fff; padding: clamp(1.5rem, 4vw, 2.5rem); box-shadow: 0 1px 2px rgb(0 0 0 / 4%); }
.bj-formcard > h2 { margin-top: 0; }

.bj-form { display: grid; gap: 1.25rem; }
.bj-form .bj-row { display: grid; gap: 1.25rem; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); }
.bj-form label { display: grid; gap: .4rem; font-size: .9rem; font-weight: 500; }
.bj-form input:not([type=checkbox]), .bj-form textarea { font: inherit; font-size: 1rem; padding: .75rem; min-height: 48px; box-sizing: border-box; width: 100%; border: 1px solid #cfc9bd; border-radius: 6px; background: var(--wp--preset--color--base); color: inherit; }
.bj-form input:focus, .bj-form textarea:focus { outline: 2px solid var(--bj-blue); outline-offset: 1px; border-color: transparent; }
.bj-form .bj-consent { display: flex; gap: .75rem; align-items: flex-start; font-weight: 400; color: var(--bj-muted); line-height: 1.5; }
.bj-form .bj-consent input { width: 18px; height: 18px; margin-top: .15rem; flex: none; accent-color: var(--bj-blue); }
.bj-form button { font: inherit; font-weight: 500; font-size: 1rem; min-height: 48px; border: 0; border-radius: 6px; background: var(--bj-blue); color: #fff; cursor: pointer; }
.bj-form button:hover { background: #024a80; }
.bj-form button[disabled] { opacity: .6; cursor: wait; }
.bj-form .bj-hp { position: absolute; left: -9999px; }
.bj-form small { color: var(--bj-muted); }
.bj-msg { padding: 1rem; border-radius: 6px; font-size: .95rem; }
.bj-msg[hidden] { display: none; }
.bj-msg.is-error { background: #fdf2f2; border: 1px solid #f3c4c4; color: #9b1c1c; }
.bj-msg.is-ok { background: var(--bj-soft); border: 1px solid #b9d5ee; color: var(--wp--preset--color--contrast); font-size: 1.05rem; }

/* ---------- Rechtstexte ---------- */
.bj-prose h2 { font-size: 1.5rem; margin-top: 2.5rem; }
.bj-prose h3 { font-size: 1.1rem; margin-top: 1.5rem; }
.bj-prose p, .bj-prose li { color: #3d4654; }

/* ---------- Fußzeile ---------- */
.bj-footer { padding-block: clamp(3.5rem, 6vw, 5rem) 2.5rem; color: rgb(255 255 255 / 75%); }
.bj-footer .wp-block-columns { gap: 2.5rem; }
.bj-footer .bj-eyebrow { color: rgb(255 255 255 / 60%); }
.bj-footer .bj-eyebrow::before { background: var(--bj-brass); }
.bj-footer a:hover { color: rgb(255 255 255 / 80%) !important; }
.bj-footer-bottom { margin-top: 3rem; padding-top: 2rem; border-top: 1px solid rgb(255 255 255 / 10%); font-size: .875rem; color: rgb(255 255 255 / 50%); }
.bj-footer-bottom p { margin: 0; }

/* ---------- Mobile Schnellkontakt ---------- */
.bj-mobilebar { display: none; }
@media (max-width: 1080px) {
	.bj-mobilebar { position: fixed; inset: auto 0 0; z-index: 60; display: grid; grid-template-columns: 1fr 1fr; background: rgb(250 249 246 / 96%); backdrop-filter: blur(10px); border-top: 1px solid var(--bj-line); }
	.bj-mobilebar a { display: flex; align-items: center; justify-content: center; gap: .5rem; height: 4rem; font-weight: 600; text-decoration: none; color: var(--wp--preset--color--contrast); }
	.bj-mobilebar a::before { content: ""; width: 20px; height: 20px; background: url(assets/icons/phone.svg) center / contain no-repeat; }
	.bj-mobilebar a + a { background: var(--bj-blue); color: #fff; }
	.bj-mobilebar a + a::before { background-image: url(assets/icons/send-white.svg); }
	body { padding-bottom: 4rem; }
}

@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }

/* ---------- Layout-Korrekturen ---------- */
/* WordPress zentriert schmale Elemente in "constrained"-Layouts, wir wollen sie linksbündig in der Inhaltsspalte */
.is-layout-constrained > :is(.bj-lead, .bj-narrow, h1):not(.alignfull) { margin-left: max(0px, (100% - var(--wp--style--global--content-size)) / 2) !important; }
.bj-header { padding-inline: var(--wp--style--root--padding-left) var(--wp--style--root--padding-right); }
/* feste Spaltenzahl auf dem Desktop, damit keine leeren Kacheln entstehen */
@media (min-width: 900px) {
	.bj-tilegrid:not(.bj-nonum) { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
	.bj-tilegrid.bj-nonum:not(.bj-factgrid) { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }
	.bj-factgrid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
	.bj-cards.bj-nonum { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }
}

/* Kennzahlen im Hero: feste Reihe statt Auto-Raster, Zahlen brechen nie um */
.bj-facts { display: flex !important; flex-wrap: wrap; gap: 1.5rem clamp(1.5rem, 4vw, 3rem) !important; }
.bj-facts > * { flex: 0 1 auto; }
.bj-num { white-space: nowrap; }
.bj-num-label { overflow-wrap: normal; word-break: normal; hyphens: manual; }
@media (max-width: 600px) {
	.bj-facts { display: grid !important; grid-template-columns: repeat(3, auto); justify-content: start; gap: 1.25rem !important; }
}