/*
Theme Name: Blindenwerk
Theme URI: https://blindenwerk-koblenz.de
Author: Marcel Kaiser
Description: Block theme for Blindenwerk-Polytec gemeinnützige GmbH, rebuilt from the previous website design.
Version: 1.1.0
Requires at least: 6.6
Tested up to: 7.1
Requires PHP: 7.4
License: GPL-2.0-or-later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: blindenwerk
Tags: block-patterns, full-site-editing, one-column, custom-logo, custom-menu
*/

:root {
	--bw-page: 958px;
	--bw-gutter: 16px;
	--bw-column-gap: 50px;
}

/* Layout */

body {
	margin: 0;
}

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

.bw-topbar,
.bw-logo,
.bw-nav,
.bw-main,
.bw-footer__columns {
	box-sizing: border-box;
	width: 100%;
	max-width: calc(var(--bw-page) + 2 * var(--bw-gutter));
	margin-inline: auto;
	padding-inline: var(--bw-gutter);
}

.bw-main {
	padding-top: 20px;
	padding-bottom: 70px;
}

.bw-main > * + * {
	margin-block-start: 8px;
}

.entry-content {
	margin-block-start: 28px;
}

/* Header */

.bw-header {
	position: relative;
	z-index: 20;
	background: #fff;
	box-shadow: 0 1px 8px rgba(0, 0, 0, 0.18);
}

.bw-topbar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	min-height: 38px;
}

.bw-topbar a,
.bw-footer a,
.bw-nav a,
.bw-breadcrumbs a {
	font-weight: 400;
	text-decoration: none;
	color: inherit;
}

.bw-topbar a:hover,
.bw-footer a:hover,
.bw-nav a:hover,
.bw-breadcrumbs a:hover {
	text-decoration: underline;
}

.bw-header .wp-block-search,
.bw-topbar .bw-menu {
	margin: 0;
}

.bw-header .wp-block-search__inside-wrapper {
	flex-direction: row-reverse;
	align-items: center;
	padding: 0;
	border: 0;
}

.bw-header .wp-block-search__input {
	width: 220px;
	padding: 4px;
	border: 0;
	background: transparent;
	color: var(--wp--preset--color--body-text);
	font-size: var(--wp--preset--font-size--normal);
}

.bw-header .wp-block-search__input::placeholder {
	color: var(--wp--preset--color--body-text);
	opacity: 1;
}

.bw-header .wp-block-search__button {
	display: flex;
	margin: 0;
	padding: 2px;
	border: 0;
	background: transparent;
	color: var(--wp--preset--color--body-text);
}

.bw-header .wp-block-search__button svg {
	width: 22px;
	height: 22px;
	transform: scaleX(-1);
}

.bw-menu ul,
.bw-nav ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

.bw-logo {
	display: flex;
	justify-content: center;
	margin-block: 18px 0;
}

.bw-logo a,
.bw-logo img {
	display: block;
}

/* Primary navigation */

.bw-nav {
	position: relative;
	margin-block-start: 20px;
}

.bw-nav__list {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	column-gap: 20px;
	min-height: 40px;
}

.bw-nav__item > a {
	display: block;
	padding-block: 8px;
	line-height: 24px;
}

.bw-nav__item.is-active > a {
	color: var(--wp--preset--color--primary-dark);
}

.bw-nav__item--home > a {
	box-sizing: content-box;
	width: 18px;
	height: 24px;
	overflow: hidden;
	color: var(--wp--preset--color--body-text);
	white-space: nowrap;
	text-indent: 100%;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 16'%3E%3Cpath fill='%235a5a5a' d='M9 0 0 7.8l1 1.1 1.3-1.1V16h5v-5h3.4v5h5V7.8L17 8.9l1-1.1-3-2.6V1h-2.4v2.1z'/%3E%3C/svg%3E") center / 18px 16px no-repeat;
}

.bw-nav__toggle {
	display: none;
}

.bw-nav .bw-nav__flyout {
	position: absolute;
	top: 100%;
	right: var(--bw-gutter);
	left: var(--bw-gutter);
	z-index: 30;
	display: flex;
	gap: 32px;
	padding: 20px 24px;
	background: #fff;
	box-shadow: 0 6px 14px rgba(0, 0, 0, 0.2);
	visibility: hidden;
	opacity: 0;
	transition: opacity 0.15s ease;
}

.bw-nav__item:hover > .bw-nav__flyout,
.bw-nav__item:focus-within > .bw-nav__flyout {
	visibility: visible;
	opacity: 1;
}

.bw-nav.is-dismissed .bw-nav__flyout {
	visibility: hidden;
	opacity: 0;
}

.bw-nav__column {
	min-width: 130px;
}

.bw-nav__column-link {
	display: block;
	color: var(--wp--preset--color--primary) !important;
	font-weight: 700 !important;
}

.bw-nav__column-link img {
	display: block;
	width: 120px;
	height: auto;
	margin-block-start: 8px;
}

.bw-nav .bw-nav__column ul {
	margin-block-start: 8px;
}

/* Hero */

.bw-hero {
	position: relative;
}

.bw-hero__viewport {
	overflow: hidden;
}

.bw-hero__track {
	display: flex;
	margin: 0;
	padding: 0;
	list-style: none;
	transition: transform 0.8s ease;
}

.bw-hero__slide {
	flex: 0 0 100%;
	min-width: 0;
	margin: 0;
}

.bw-hero__slide img {
	display: block;
	width: 100%;
	height: 320px;
	object-fit: cover;
}

.bw-hero__controls {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0;
	height: 36px;
}

.bw-hero__dot,
.bw-hero__pause {
	position: relative;
	width: 24px;
	height: 24px;
	padding: 0;
	border: 0;
	background: transparent;
	cursor: pointer;
}

.bw-hero__dot::before {
	content: "";
	position: absolute;
	top: 8px;
	left: 8px;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: #a0a0a0;
}

.bw-hero__dot.is-active::before {
	top: 6px;
	left: 6px;
	box-sizing: border-box;
	width: 12px;
	height: 12px;
	border: 2px solid var(--wp--preset--color--primary-dark);
	background: transparent;
}

.bw-hero__pause::before,
.bw-hero__pause::after {
	content: "";
	position: absolute;
	top: 8px;
	width: 2px;
	height: 8px;
	background: #6f6f6f;
}

.bw-hero__pause::before {
	left: 9px;
}

.bw-hero__pause::after {
	left: 13px;
}

.bw-hero__pause.is-paused::before {
	left: 10px;
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 4px 0 4px 7px;
	border-color: transparent transparent transparent #6f6f6f;
	background: transparent;
}

.bw-hero__pause.is-paused::after {
	display: none;
}

/* Breadcrumbs */

.bw-breadcrumbs {
	color: var(--wp--preset--color--heading);
}

.bw-breadcrumbs a,
.bw-breadcrumbs__current {
	color: #333;
}

/* Content */

.wp-block-post-title {
	margin-block: 0;
}

:where(.entry-content) :where(p, h2, h3, ul, figure) {
	margin-block: 0;
}

.entry-content > * + * {
	margin-block-start: 10px;
}

.entry-content > h2 {
	margin-block-start: 28px;
}

.entry-content > h3 {
	margin-block-start: 18px;
}

.entry-content > h2 + * {
	margin-block-start: 14px;
}

.entry-content ul:not(.bw-plain) {
	padding-inline-start: 19px;
	list-style: square;
}

.entry-content ul:not(.bw-plain) li {
	margin-block-start: 10px;
}

.entry-content ul:not(.bw-plain) li::marker {
	color: #00487c;
	font-size: 1.2em;
}

.bw-spaced {
	margin-block-start: 44px !important;
}

/* Two equal columns with the wide gap of the former layout */
.bw-cols-wide.wp-block-columns {
	gap: 100px;
}

.bw-cols-wide {
	margin-block-start: 22px;
}

.bw-cols-wide + p,
.bw-cols + p {
	margin-block-start: 22px;
}

.bw-contact-row {
	margin-block-start: 90px !important;
}

.bw-cols + .bw-cols {
	margin-block-start: 26px;
}

.bw-cols-wide figure img {
	display: block;
	max-width: 100%;
	height: auto;
}

.bw-cols-wide figcaption {
	margin: 12px 0 0;
	font-size: inherit;
	text-align: left;
	color: inherit;
}

.bw-cols.wp-block-columns {
	gap: var(--bw-column-gap);
}

.bw-cols .wp-block-column > * + * {
	margin-block-start: 6px;
}

.bw-subhead {
	color: var(--wp--preset--color--primary) !important;
	font-family: var(--wp--preset--font-family--open-sans) !important;
	font-size: var(--wp--preset--font-size--medium) !important;
	font-weight: 700 !important;
}

.bw-address {
	line-height: 2.1;
}

/* Front page cards */

.bw-cards.wp-block-columns {
	gap: var(--bw-column-gap);
	margin-block-start: 48px;
}

.bw-card {
	box-sizing: border-box;
	height: 100%;
	padding: 14px 15px 24px;
	border: 1px solid #d9d9d9;
	background: var(--wp--preset--color--card);
	box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.35);
}

.bw-card figure,
.bw-card figure a {
	display: block;
	margin: 0;
}

.bw-card img {
	display: block;
	width: 100%;
	height: auto;
}

.bw-card p {
	margin-block: 14px 0;
}

.bw-card .bw-card__title {
	margin-block-start: 12px;
	font-weight: 700;
}

.bw-card .bw-card__more {
	text-align: right;
}

/* Service tiles */

.bw-tiles {
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
	margin-block-start: 60px !important;
}

.bw-tile {
	position: relative;
	width: 178px;
	border: 1px solid #e4e4e4;
}

.bw-tile img {
	display: block;
	width: 100%;
	height: auto;
}

.bw-tile figcaption {
	position: absolute;
	inset: auto 0 0;
	margin: 0;
	padding: 3px 6px;
	font-size: inherit;
	background: var(--wp--preset--color--primary);
	color: #fff;
	text-align: left;
	pointer-events: none;
}

.bw-tile a {
	display: block;
}

/* Download pages */

.bw-download-title {
	font-size: var(--wp--preset--font-size--medium);
}

/* Contact */

.bw-contact-table table {
	width: 100%;
	border-collapse: collapse;
}

.bw-contact-table td {
	padding: 4px 8px 4px 0;
	border: 0;
	vertical-align: top;
}

.bw-contact-table td:first-child {
	width: 150px;
	font-weight: 700;
}

.bw-form-row {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	margin-block-end: 10px;
}

.bw-form-row > label,
.bw-form-label {
	flex: 0 0 140px;
	padding-block-start: 6px;
	font-weight: 700;
}

.bw-form-row > .wpcf7-form-control-wrap {
	flex: 1 1 200px;
	min-width: 0;
}

.bw-form-row input[type="text"],
.bw-form-row input[type="email"],
.bw-form-row input[type="tel"],
.bw-form-row select,
.bw-form-row textarea {
	box-sizing: border-box;
	width: 100%;
	padding: 6px 8px;
	border: 1px solid #8c8c8c;
	font: inherit;
	color: inherit;
	background: #fff;
}

.bw-form-row textarea {
	height: 150px;
}

.bw-form-row .wpcf7-list-item {
	margin: 0;
}

.bw-form-note {
	margin-block-end: 12px !important;
	font-size: var(--wp--preset--font-size--small);
}

.wpcf7-submit {
	padding: 8px 22px;
	border: 0;
	background: var(--wp--preset--color--primary);
	color: #fff;
	font: inherit;
	font-weight: 700;
	cursor: pointer;
}

.wpcf7-submit:hover {
	background: var(--wp--preset--color--primary-dark);
}

/* Boxed text (AGB form) */

.bw-box {
	padding: 16px 18px;
	border: 1px solid #d9d9d9;
	background: var(--wp--preset--color--card);
}

.bw-box > * + * {
	margin-block-start: 10px !important;
}

/* Map */

.bw-map__stage {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 12px;
	box-sizing: border-box;
	height: 320px;
	padding: 16px;
	background: var(--wp--preset--color--footer);
	text-align: center;
}

.bw-map__stage p {
	margin: 0;
}

.bw-map__stage button {
	padding: 8px 22px;
	border: 0;
	background: var(--wp--preset--color--primary);
	color: #fff;
	font: inherit;
	font-weight: 700;
	cursor: pointer;
}

.bw-map__stage iframe {
	display: block;
	width: 100%;
	height: 320px;
	margin: -16px;
	border: 0;
}

.bw-map__stage:has(iframe) {
	padding: 0;
}

.bw-map__stage:has(iframe) iframe {
	margin: 0;
}

.bw-map__link {
	margin-block: 8px 0;
}

/* Sitemap */

.bw-sitemap ul {
	margin: 0;
	padding-inline-start: 20px;
	line-height: 26px;
	list-style: square;
}

.bw-sitemap > ul {
	padding-inline-start: 18px;
}

/* Footer */

.bw-footer {
	padding-block: 40px 28px;
	background: var(--wp--preset--color--footer);
}

.bw-footer__columns {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	column-gap: 40px;
}

.bw-footer__logo,
.bw-footer__logo img {
	display: block;
	margin: 0;
}

.bw-footer__title {
	margin: 0 0 8px;
	color: #303030;
	font-size: var(--wp--preset--font-size--normal);
}

.bw-footer .bw-menu {
	margin: 0;
}

.bw-footer .bw-menu li {
	line-height: 20px;
}

.bw-footer__copyright {
	margin-block: 48px 0;
	padding-inline: var(--bw-gutter);
	color: var(--wp--preset--color--primary);
}

/* Focus */

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
	outline: 2px solid var(--wp--preset--color--accent);
	outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
	.bw-hero__track,
	.bw-nav__flyout {
		transition: none;
	}
}

/* Small screens */

@media (max-width: 782px) {
	.bw-hero__slide img {
		height: 200px;
	}

	.wp-block-post-title,
	.bw-main h1 {
		font-size: 2rem;
	}

	.bw-cols-wide.wp-block-columns {
		gap: 20px;
	}

	.bw-cards.wp-block-columns {
		gap: 24px;
	}

	.bw-nav__toggle {
		display: block;
		width: 100%;
		padding: 10px;
		border: 0;
		background: var(--wp--preset--color--primary);
		color: #fff;
		font: inherit;
		font-weight: 700;
		cursor: pointer;
	}

	.bw-nav {
		margin-block-end: 8px;
	}

	.bw-nav__list {
		display: none;
		flex-direction: column;
		align-items: stretch;
	}

	.bw-nav.is-open .bw-nav__list {
		display: flex;
	}

	.bw-nav__item--home > a {
		width: auto;
		height: auto;
		padding-inline-start: 26px;
		text-indent: 0;
		background-position: left center;
	}

	.bw-nav .bw-nav__flyout {
		position: static;
		display: block;
		padding: 0 0 8px 16px;
		box-shadow: none;
		visibility: visible;
		opacity: 1;
	}

	.bw-nav__column-link {
		padding-block: 6px;
		font-weight: 400 !important;
	}

	.bw-nav__column-link img {
		display: none;
	}

	.bw-nav .bw-nav__column ul {
		margin: 0;
		padding-inline-start: 16px;
	}

	.bw-nav__column ul a {
		display: block;
		padding-block: 6px;
	}

	.bw-footer__columns {
		grid-template-columns: 1fr;
		row-gap: 24px;
	}
}