/*
Theme Name: Elektro Ostermayr
Description: Block-Theme für Elektro Ostermayr (basiert auf Comaris Base). Design über theme.json.
Author: Comaris
Author URI: https://comaris.de
Requires at least: 6.7
Requires PHP: 7.4
Version: 0.1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: elektro-ostermayr
*/

/* Nur das, was theme.json nicht kann. */

a {
	text-decoration-thickness: 1px !important;
	text-underline-offset: .1em;
}

:where(.wp-site-blocks *:focus) {
	outline-width: 2px;
	outline-style: solid;
}

.wp-block-navigation .wp-block-navigation-item .wp-block-navigation-item__content {
	outline-offset: 4px;
}

.wp-block-navigation .wp-block-navigation-item ul.wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	outline-offset: 0;
}

h1, h2, h3, h4, h5, h6, blockquote, caption, figcaption, p {
	text-wrap: pretty;
}

.more-link {
	display: block;
}

:where(pre) {
	overflow-x: auto;
}

/* Raster: Tablet 2 Spalten, Handy 1 Spalte. */
@media (max-width: 1000px) {
	.wp-block-group.is-layout-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
	}
}

@media (max-width: 640px) {
	.wp-block-group.is-layout-grid {
		grid-template-columns: 1fr !important;
	}
}

/* Keine Lücken zwischen vollbreiten Abschnitten, Header und Footer. */
.wp-site-blocks > * + * {
	margin-block-start: 0;
}

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

/* FAQ: kein Fokusrahmen nach Mausklick, Tastatur-Fokus bleibt sichtbar. */
.wp-block-details summary:focus {
	outline: none;
}

.wp-block-details summary:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: -4px;
}

/* Grüne Akzentlinie unter Überschriften. */
.wp-block-separator.accent-bar {
	width: 64px;
	height: 4px;
	margin-inline: auto;
	border: 0;
	background: var(--wp--preset--color--primary);
	opacity: 1;
}

/* Karten mit grüner Oberkante. */
.accent-card {
	overflow: hidden;
	border-top: 4px solid var(--wp--preset--color--primary);
	border-radius: 8px;
}

.accent-card .wp-block-image {
	margin: 0;
}

.accent-card .wp-block-image img {
	display: block;
	width: 100%;
}

/* Zeitstrahl. */
.timeline {
	position: relative;
}

.timeline::before {
	content: "";
	position: absolute;
	top: 0.5rem;
	bottom: 0.5rem;
	left: 7px;
	width: 2px;
	background: var(--wp--preset--color--primary);
	opacity: 0.4;
}

.timeline-item {
	position: relative;
	padding-left: 2.75rem;
}

.timeline-item::before {
	content: "";
	position: absolute;
	top: 0.3rem;
	left: 0;
	width: 16px;
	height: 16px;
	border-radius: 50%;
	background: var(--wp--preset--color--primary);
	box-shadow: 0 0 0 4px var(--wp--preset--color--surface);
}

.timeline-year {
	display: inline-block;
	padding: 0.1rem 0.8rem;
	border-radius: 999px;
	background: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--contrast);
	font-weight: 600;
}

.wp-block-column > .accent-card {
	height: 100%;
}

/* Handy: Telefon-Button im Header über die volle Breite. */
@media (max-width: 600px) {
	header .wp-block-buttons {
		width: 100%;
	}

	header .wp-block-button {
		flex: 1;
	}

	header .wp-block-button__link {
		width: 100%;
		text-align: center;
	}
}