/*
Theme Name: agentur360
Theme URI: https://www.agentur360.at/
Description: Child-Theme von Ollie für Agentur360 (Netzwerkagentur mit KI-Schwerpunkt).
Template: ollie
Author: Agentur360
Version: 1.0.0
Text Domain: agentur360
*/

/* Sichtbarer Fokus für Tastaturnutzer */
:where(a, button, input, textarea, select, summary):focus-visible {
	outline: 3px solid var(--wp--preset--color--accent);
	outline-offset: 3px;
}

/* Sprungmarken unter dem fixierten Header nicht verdecken */
html {
	scroll-padding-top: 5rem;
}

/* Balancierte Überschriften */
h1, h2, h3 {
	text-wrap: balance;
}

/* Hero-Überschrift */
.a360-hero-title {
	letter-spacing: -0.02em;
	line-height: 1.05;
}

/* Inhaltsbreite: 1000 px, mittig (Startseite und Unterseiten) */
body .wp-block-group.alignfull > .alignwide,
body .wp-block-group.alignfull > .wp-block-group.alignwide {
	max-width: 1000px !important;
	margin-left: auto !important;
	margin-right: auto !important;
}

body main.wp-block-group.alignfull > * {
	max-width: 1000px !important;
	margin-left: auto !important;
	margin-right: auto !important;
}

/* Lesetexte auf Unterseiten: Zeilenlänge begrenzen, linksbündig im 1000-px-Raster */
body main.wp-block-group.alignfull > p,
body main.wp-block-group.alignfull > ul,
body main.wp-block-group.alignfull > ol,
body main.wp-block-group.alignfull > h2,
body main.wp-block-group.alignfull > h3 {
	max-width: 46rem !important;
	margin-left: max(0px, calc((100% - 1000px) / 2)) !important;
	margin-right: auto !important;
}

/* Kleine Überzeile über Überschriften */
.a360-eyebrow {
	font-size: 0.875rem;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--wp--preset--color--accent);
}

.has-dark-background-color .a360-eyebrow,
.a360-on-dark .a360-eyebrow {
	color: var(--wp--preset--color--accent-light);
}

/* Karten */
.a360-card {
	background: var(--wp--preset--color--white);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 18px;
}

/* Branchen-Chips */
.a360-chips {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 0.625rem;
}

.a360-chips li {
	padding: 0.5rem 1rem;
	border: 1px solid var(--wp--preset--color--line-strong);
	border-radius: 999px;
	font-size: 0.9375rem;
}

/* Teamliste: zwei gleich breite Spalten */
.a360-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	column-gap: 2rem;
}

@media (max-width: 560px) {
	.a360-list {
		grid-template-columns: 1fr;
	}
}

/* Startseite, Abschnitt Netzwerk: drei gleiche Spalten.
   Spalte 1 = Text, Spalte 2 und 3 = Namensliste in zwei Spalten. */
@media (min-width: 900px) {
	#netzwerk > .alignwide {
		grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
		column-gap: 2rem !important;
	}

	#netzwerk > .alignwide > .a360-list {
		grid-column: 2 / span 2;
	}
}

.a360-list li {
	padding: 0.875rem 0;
	border-bottom: 1px solid var(--wp--preset--color--line);
}

/* Ablauf: große Ziffern */
.a360-step-number {
	font-family: var(--wp--preset--font-family--space-grotesk);
	font-size: 2.75rem;
	font-weight: 700;
	line-height: 1;
	color: var(--wp--preset--color--accent);
	margin: 0;
}

/* Buttons: Mindesthöhe für Touch-Ziele */
.wp-block-button__link {
	min-height: 44px;
	display: inline-flex;
	align-items: center;
}

@media (max-width: 720px) {
	.a360-hero-title {
		font-size: 2.75rem !important;
	}
}