/*
Theme Name: Bohrboot
Theme URI: https://bohrboot.ch
Author: Bohrboot GmbH
Description: Massgeschneidertes Block-Theme für die Bohrboot GmbH, Altendorf (Erdbohrungen, Heizung, Sanitär, Klima, Beratung). Alle Seiten, Header und Footer sind im Block-Editor (Gutenberg) bzw. Website-Editor bearbeitbar. Bei der ersten Aktivierung werden die Seiten, das Menü und das Logo automatisch angelegt.
Requires at least: 6.6
Tested up to: 7.1
Requires PHP: 7.4
Version: 1.0.1
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: bohrboot
Tags: full-site-editing, block-patterns, custom-colors, custom-logo, editor-style
*/

/* ---------- Grundlagen ---------- */

.wp-site-blocks > * + * {
	margin-block-start: 0;
}

.wp-block-post-content > .alignfull {
	margin-block-start: 0;
	margin-block-end: 0;
}

:where(.wp-site-blocks) a:focus-visible,
:where(.wp-site-blocks) button:focus-visible,
:where(.wp-site-blocks) input:focus-visible,
:where(.wp-site-blocks) select:focus-visible,
:where(.wp-site-blocks) textarea:focus-visible {
	outline: 2px solid #0F2F57;
	outline-offset: 2px;
}

.bb-lead {
	font-size: var(--wp--preset--font-size--large);
	color: #3E5068;
}

/* ---------- Überzeile (Blockstil Absatz) ---------- */

.is-style-eyebrow {
	display: flex;
	align-items: center;
	gap: 12px;
	font-size: 14px;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: #1F5FA8;
}

.is-style-eyebrow::before {
	content: "";
	flex: none;
	width: 32px;
	height: 3px;
	background: #FF951F;
}

/* ---------- Header ---------- */

.bb-topbar {
	font-size: 13px;
	padding-top: 8px;
	padding-bottom: 8px;
}

.bb-topbar p {
	margin: 0;
}

.bb-topbar a {
	color: #FFFFFF;
	text-decoration: none;
}

.bb-topbar a.bb-accent,
.bb-topbar a[href^="mailto:"] {
	color: #FF951F;
}

.bb-header {
	position: relative;
	z-index: 50;
	border-bottom: 1px solid #E1E8F1;
	padding-top: 14px;
	padding-bottom: 14px;
}

.bb-header .wp-block-site-logo img {
	height: auto;
	max-height: 50px;
	width: auto;
}

.bb-header .wp-block-navigation a {
	text-decoration: none;
	color: #13233A;
}

.bb-header .wp-block-navigation .wp-block-navigation-item__content {
	padding-top: 10px;
	padding-bottom: 10px;
}

.bb-header .wp-block-navigation .current-menu-item > a,
.bb-header .wp-block-navigation .current-menu-ancestor > a,
.bb-header .wp-block-navigation a[aria-current="page"] {
	color: #1F5FA8;
	font-weight: 600;
	box-shadow: inset 0 -3px 0 #FF951F;
}

/* Pfeil beim Untermenü: kein Unterstrich, gleiche Farbe wie der Text */
.bb-header .wp-block-navigation .wp-block-navigation__submenu-icon {
	box-shadow: none !important;
	background: none;
	color: inherit;
}

.bb-header .wp-block-navigation .current-menu-ancestor > .wp-block-navigation__submenu-icon {
	color: #1F5FA8;
}

.bb-header .wp-block-navigation .wp-block-navigation__submenu-container {
	border: 1px solid #DCE4EF !important;
	border-top: 4px solid #FF951F !important;
	border-radius: 6px;
	box-shadow: 0 16px 40px rgba(15, 47, 87, 0.16);
	padding: 8px;
	min-width: 240px !important;
}

.bb-header .wp-block-navigation .wp-block-navigation__submenu-container a {
	border-radius: 4px;
	padding: 10px 14px !important;
	box-shadow: none !important;
}

.bb-header .wp-block-navigation .wp-block-navigation__submenu-container a:hover {
	background: #FFF4E8;
}

.bb-header .wp-block-navigation__responsive-container.is-menu-open {
	padding: 24px;
}

.bb-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container {
	border: 0 !important;
	box-shadow: none;
	padding: 0 0 0 16px;
}

/* ---------- Hero mit Logo-Bogen (Blockstil Gruppe) ---------- */

.is-style-hero {
	position: relative;
	overflow: hidden;
	border-bottom: 1px solid #E1E8F1;
}

.is-style-hero::before {
	content: "";
	position: absolute;
	top: -110px;
	right: -90px;
	width: 600px;
	aspect-ratio: 640 / 760;
	background: url(assets/images/ring-page.svg) no-repeat center / contain;
	pointer-events: none;
}

.is-style-hero.bb-hero-large::before {
	top: -40px;
	right: -130px;
	width: 780px;
	background-image: url(assets/images/ring-hero.svg);
}

.is-style-hero > * {
	position: relative;
}

@media (max-width: 781px) {
	.is-style-hero::before,
	.is-style-hero.bb-hero-large::before {
		width: 340px;
		top: auto;
		bottom: -180px;
		right: -140px;
		opacity: 0.55;
	}
}

.bb-breadcrumb {
	font-size: 14px;
	color: #4A5B70;
}

.bb-breadcrumb a {
	text-decoration: none;
}

/* Icon-Kachel vor der Überzeile auf Leistungsseiten */
.bb-kicker {
	gap: 16px;
}

.bb-kicker::before {
	width: 56px;
	height: 56px;
	border-radius: 6px;
	background: #FF951F var(--bb-icon) no-repeat center / 30px;
}

/* ---------- Aktionsband (Blockstil Gruppe) ---------- */

.is-style-cta {
	position: relative;
	overflow: hidden;
}

.is-style-cta::before {
	content: "";
	position: absolute;
	left: -90px;
	top: -150px;
	width: 520px;
	aspect-ratio: 640 / 760;
	background: url(assets/images/ring-cta.svg) no-repeat center / contain;
	pointer-events: none;
}

.is-style-cta > * {
	position: relative;
}

.is-style-cta :where(h1, h2, h3, h4) {
	color: #FFFFFF;
}

.is-style-cta p {
	color: #E3ECF7;
}

/* ---------- Karte (Blockstil Gruppe) ---------- */

.is-style-card {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	background-color: #FFFFFF;
	border: 1px solid #DCE4EF;
	border-top: 4px solid #FF951F;
	border-radius: 6px;
	padding: 32px;
}

.is-style-card.has-background:not(.has-white-background-color) {
	border-color: #FFD3A3;
	border-top-color: #FF951F;
}

.is-style-card > * {
	margin-block-start: 0;
	margin-block-end: 0;
}

.is-style-card > * + * {
	margin-block-start: 12px;
}

.is-style-card > .wp-block-heading + * {
	margin-block-start: 6px;
}

.is-style-card > .bb-more {
	margin-top: auto;
	padding-top: 12px;
}

.is-style-card.bb-card-media {
	padding: 0;
	overflow: hidden;
}

.is-style-card.bb-card-media > .wp-block-image {
	width: 100%;
	margin: 0;
}

.is-style-card.bb-card-media > .wp-block-image img {
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	display: block;
}

.is-style-card.bb-card-media > :not(.wp-block-image) {
	padding-left: 28px;
	padding-right: 28px;
}

.is-style-card.bb-card-media > :last-child {
	padding-bottom: 28px;
}

.is-style-card.bb-card-media > .wp-block-image + * {
	margin-top: 24px;
}

.bb-tagline {
	font-weight: 600;
	color: #1F5FA8;
}

.bb-more a {
	font-weight: 600;
	text-decoration: none;
	display: inline-flex;
	align-items: center;
	min-height: 44px;
}

/* ---------- Icons ---------- */

.bb-icon::before,
.bb-kicker::before {
	content: "";
	display: block;
	flex: none;
}

.bb-icon::before {
	width: 56px;
	height: 56px;
	margin-bottom: 24px;
	border-radius: 6px;
	background: #FFF4E8 var(--bb-icon) no-repeat center / 30px;
}

.bb-icon-erdbohrungen { --bb-icon: url(assets/icons/erdbohrungen.svg); }
.bb-icon-heizung { --bb-icon: url(assets/icons/heizung.svg); }
.bb-icon-sanitaer { --bb-icon: url(assets/icons/sanitaer.svg); }
.bb-icon-klima { --bb-icon: url(assets/icons/klima.svg); }
.bb-icon-beratung { --bb-icon: url(assets/icons/beratung.svg); }

/* ---------- Fotos ---------- */

.bb-photo img {
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	border-radius: 6px;
	display: block;
}

/* ---------- Checkliste (Blockstil Liste) ---------- */

.is-style-checklist {
	list-style: none;
	padding-left: 0;
}

.is-style-checklist li {
	position: relative;
	padding-left: 34px;
	margin-bottom: 10px;
}

.is-style-checklist li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 2px;
	width: 22px;
	height: 22px;
	background: url(assets/icons/check.svg) no-repeat center / contain;
}

/* ---------- Ablauf-Schritte ---------- */

.bb-step {
	border-top: 3px solid #FF951F;
	padding-top: 24px;
}

.bb-step > * {
	margin-block: 0;
}

.bb-step > * + * {
	margin-block-start: 8px;
}

.bb-step-num {
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 700;
	font-size: 15px;
	color: #1F5FA8;
}

.bb-step h3 {
	font-family: var(--wp--preset--font-family--body);
	font-size: 21px;
	font-weight: 600;
	color: #13233A;
}

.bb-step p:not(.bb-step-num) {
	font-size: 16px;
	color: #4A5B70;
}

/* ---------- Weitere Leistungen (Kacheln) ---------- */

.bb-tile {
	margin: 0;
}

.bb-tile a {
	display: flex;
	align-items: center;
	justify-content: space-between;
	min-height: 64px;
	padding: 0 24px;
	background: #FFFFFF;
	border: 1px solid #DCE4EF;
	border-radius: 6px;
	text-decoration: none;
	color: #0F2F57;
	font-weight: 600;
}

.bb-tile a::after {
	content: "";
	width: 20px;
	height: 20px;
	background: url(assets/icons/arrow.svg) no-repeat center / contain;
}

.bb-tile a:hover {
	border-color: #FF951F;
}

/* ---------- Überschrift mit Unterstrich ---------- */

.bb-underline::after {
	content: "";
	display: block;
	width: 56px;
	height: 4px;
	margin-top: 14px;
	background: #FF951F;
}

/* ---------- Kontakt-Karte ---------- */

.bb-contact-card {
	border-radius: 6px;
	padding: 32px;
}

.bb-contact-card > * {
	margin-block: 0;
}

.bb-contact-card > * + * {
	margin-block-start: 16px;
}

.bb-contact-card a {
	color: #0F2F57;
	font-weight: 600;
	text-decoration: none;
}

.bb-line {
	position: relative;
	padding-left: 36px;
}

.bb-line::before {
	content: "";
	position: absolute;
	left: 0;
	top: 3px;
	width: 22px;
	height: 22px;
	background: var(--bb-icon) no-repeat center / contain;
}

.bb-line-pin { --bb-icon: url(assets/icons/pin.svg); }
.bb-line-phone { --bb-icon: url(assets/icons/phone.svg); }
.bb-line-mail { --bb-icon: url(assets/icons/mail.svg); }

/* ---------- Footer ---------- */

.bb-footer {
	border-top: 8px solid #FF951F;
	font-size: 15px;
}

.bb-footer a {
	color: #C9D6E8;
	text-decoration: none;
}

.bb-footer a:hover {
	color: #FFFFFF;
	text-decoration: underline;
}

.bb-footer p {
	margin-block: 0;
}

.bb-footer p + p {
	margin-block-start: 8px;
}

.bb-footer-title {
	color: #FF951F;
	font-weight: 600;
	margin-bottom: 14px !important;
}

.bb-footer-strong {
	color: #FFFFFF;
	font-weight: 600;
}

.bb-footer-logo img {
	height: 44px;
	width: auto;
}

.bb-footer-bottom {
	border-top: 1px solid #24476F;
	font-size: 13px;
	padding-top: 20px;
	padding-bottom: 20px;
}

.bb-footer-bottom a {
	text-decoration: underline;
}

/* ---------- Kontaktformular ---------- */

.bb-form {
	display: flex;
	flex-wrap: wrap;
	gap: 24px;
}

.bb-field {
	flex: 1 1 260px;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.bb-field-full {
	flex-basis: 100%;
}

.bb-field label {
	font-size: 15px;
	font-weight: 600;
}

.bb-field input[type="text"],
.bb-field input[type="email"],
.bb-field input[type="tel"],
.bb-field select,
.bb-field textarea {
	width: 100%;
	box-sizing: border-box;
	min-height: 48px;
	padding: 0 14px;
	font: inherit;
	font-size: 16px;
	color: #13233A;
	background: #FFFFFF;
	border: 1px solid #B7C6DA;
	border-radius: 4px;
}

.bb-field textarea {
	padding: 12px 14px;
	resize: vertical;
}

.bb-field input:focus,
.bb-field select:focus,
.bb-field textarea:focus {
	border-color: #1F5FA8;
	outline: 2px solid rgba(31, 95, 168, 0.25);
	outline-offset: 0;
}

.bb-field .bb-invalid {
	border-color: #B42318;
}

.bb-error-text {
	font-size: 14px;
	color: #B42318;
	margin: 0;
}

.bb-dropzone {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px 20px;
	padding: 20px 20px 20px 64px;
	border: 2px dashed #FFB766;
	border-radius: 6px;
	background: #FFF9F2 url(assets/icons/upload.svg) no-repeat 20px center / 28px;
}

.bb-dropzone input[type="file"] {
	font: inherit;
	font-size: 15px;
	min-height: 44px;
}

.bb-hint {
	font-size: 14px;
	color: #4A5B70;
	margin: 0;
}

.bb-hp {
	position: absolute !important;
	left: -9999px !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.bb-form button[type="submit"] {
	cursor: pointer;
	border: 0;
	min-height: 52px;
}

.bb-notice {
	display: flex;
	gap: 16px;
	align-items: flex-start;
	padding: 24px 28px;
	border-radius: 6px;
	margin-bottom: 24px;
}

.bb-notice p {
	margin: 0;
}

.bb-notice-success {
	background: #FFF4E8;
	border: 1px solid #FFD3A3;
	border-top: 4px solid #FF951F;
}

.bb-notice-success::before {
	content: "";
	flex: none;
	width: 26px;
	height: 26px;
	margin-top: 2px;
	background: url(assets/icons/check.svg) no-repeat center / contain;
}

.bb-notice-error {
	background: #FEF3F2;
	border: 1px solid #FECDCA;
	border-top: 4px solid #B42318;
	color: #7A271A;
}

.bb-notice-title {
	font-weight: 600;
	font-size: 19px;
	color: #0F2F57;
}

/* Editor-Hinweis für das Formular-Kürzel */
.editor-styles-wrapper .wp-block-shortcode {
	border: 2px dashed #FFB766;
	background: #FFF9F2;
}

/* ---------- Ergänzungen ---------- */

.bb-footer {
	color: #C9D6E8;
}

.bb-footer .wp-block-columns {
	margin-bottom: var(--wp--preset--spacing--50);
}

.is-style-hero .bb-lead {
	max-width: 640px;
}

@media (min-width: 782px) {
	.bb-cta-actions .wp-block-buttons {
		justify-content: flex-end;
	}
}

.is-style-cta .wp-block-button__link {
	padding: 16px 32px;
	font-size: 17px;
}

.bb-contact-card + .wp-block-image {
	margin-top: 24px;
}

.is-style-hero h1 {
	max-width: 820px;
}

.is-style-card > .wp-block-heading + .wp-block-list,
.is-style-card > .wp-block-list + .wp-block-buttons {
	margin-block-start: 20px;
}

.bb-footer-logo {
	margin-bottom: 20px !important;
}

.bb-topbar .is-layout-flex {
	gap: 2px 24px;
}

@media (max-width: 600px) {
	.bb-header .wp-block-buttons {
		display: none;
	}
	.bb-header .wp-block-site-logo img {
		max-height: 42px;
	}
}

/* Mobiles Menü: linksbündig, grössere Schrift */
.bb-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content,
.bb-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container,
.bb-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item,
.bb-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container {
	align-items: flex-start !important;
	text-align: left;
}

.bb-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
	font-size: 20px;
	gap: 4px;
	padding-top: 24px;
}

.bb-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container {
	font-size: 17px;
	padding-left: 16px !important;
	border-left: 3px solid #FF951F !important;
	margin: 4px 0 12px;
}