/*
 * Component styles that theme.json cannot express. Tokens (colors, type,
 * spacing) always come from theme.json presets; no raw values for those here.
 * Loaded on the front end and in the editor (add_editor_style).
 */

/* Sections sit flush: no block gap between template areas or full-width sections. */
.wp-site-blocks > *,
.wp-block-post-content > .alignfull {
	margin-block: 0;
}

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

.drivin-header__bar {
	padding-block: 25px;
	background: var(--wp--preset--color--white);
}

.drivin-header__actions {
	gap: 40px;
}

.drivin-nav {
	gap: 32px;
	font-size: var(--wp--preset--font-size--small);
	font-weight: 500;
}

.drivin-nav a {
	color: var(--wp--preset--color--ink);
	text-decoration: none;
}

.drivin-nav a:hover,
.drivin-nav a:focus-visible {
	color: var(--wp--preset--color--primary);
}

.drivin-header__buttons {
	gap: 12px;
}

.drivin-header__buttons .wp-block-button > .wp-block-button__link {
	padding: 15px 33px;
	border-radius: 100px;
}

.drivin-header__buttons .wp-block-button.is-style-outline > .wp-block-button__link {
	padding: 12px 30px;
	border: 3px solid var(--wp--preset--color--primary);
	color: var(--wp--preset--color--primary);
	background: transparent;
}

.drivin-announce {
	padding-block: 20px;
}

.drivin-announce p {
	margin: 0;
}

.drivin-announce a {
	color: var(--wp--preset--color--primary);
}

.drivin-header__bar .wp-block-site-logo {
	flex-shrink: 0;
}

@media (max-width: 781px) {
	/* Two classes to beat core's .wp-block-buttons.is-layout-flex. */
	.wp-block-buttons.drivin-header__buttons {
		display: none;
	}

	.drivin-announce {
		font-size: var(--wp--preset--font-size--small);
	}
}

/* ---------- Button style: "Outline green" ---------- */

.wp-block-button.is-style-outline-accent > .wp-block-button__link {
	padding: 15px 53px;
	border: 2px solid var(--wp--preset--color--accent);
	border-radius: 6px;
	color: var(--wp--preset--color--ink);
	background: rgb(255 255 255 / 0.9);
	font-size: var(--wp--preset--font-size--medium);
}

/* ---------- Section: logos ---------- */

.drivin-logos {
	padding-block: 120px 80px;
}

.drivin-logos > .wp-block-heading {
	margin: 0;
}

.drivin-logos > .wp-block-gallery {
	margin-block: 116px 113px;
}

/* Gallery style "Logo strip": a centered row that wraps; logo-strip.js turns it into a marquee. */
.wp-block-gallery.is-style-logo-strip {
	justify-content: center;
	gap: 32px 64px;
}

.wp-block-gallery.is-style-logo-strip.has-nested-images figure.wp-block-image:not(#individual-image) {
	flex: 0 0 auto;
	width: auto;
	margin: 0;
}

/* :not(#individual-image) matches core's own specificity trick for gallery images. */
.wp-block-gallery.is-style-logo-strip.has-nested-images figure.wp-block-image:not(#individual-image) img {
	width: auto;
	height: 70px;
	object-fit: contain;
}

.wp-block-gallery.is-style-logo-strip.is-animated {
	flex-wrap: nowrap;
	justify-content: flex-start;
	overflow: hidden;
	mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}

/* Two copies of the logos; the track moves half its width, so the loop has no seam. */
.drivin-marquee {
	display: flex;
	gap: 96px;
	width: max-content;
	padding-inline-end: 96px;
	animation: drivin-marquee 40s linear infinite;
}

.drivin-marquee:hover {
	animation-play-state: paused;
}

@keyframes drivin-marquee {
	to {
		transform: translateX(-50%);
	}
}

/* ---------- Section: tabs ---------- */

.drivin-tabs-section {
	padding-block: 80px 114px;
}

.drivin-tabs-section > .wp-block-heading {
	margin: 0;
	line-height: 1.4;
}

.drivin-tabs-section > .drivin-kicker {
	margin-block: 14px 88px;
	color: var(--wp--preset--color--heading);
}

.drivin-tabs .wp-block-tab-list {
	justify-content: center;
	gap: 6px;
}

.drivin-tabs .wp-block-tab-list button {
	padding: 16.8px 33.6px;
	color: var(--wp--preset--color--primary);
	background: var(--wp--preset--color--primary-soft);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 400;
	line-height: 1.4;
}

.drivin-tabs .wp-block-tab-list button[aria-selected="true"] {
	color: var(--wp--preset--color--white);
	background: var(--wp--preset--color--primary);
	font-weight: 700;
}

.drivin-tabs .wp-block-tab-list button[aria-selected="true"]::before {
	content: none;
}

/* 63 + core's 24px block gap = 87px from the tabs to the image, as on driv.in. */
.drivin-tabs .wp-block-tab-panel {
	padding-top: 63px;
}

/* driv.in centers a 1193px panel and indents the image 150px inside it. */
.drivin-feature {
	box-sizing: border-box;
	gap: 70px;
	max-width: 1193px;
	margin-inline: auto;
	padding-left: 150px;
}

.drivin-feature h3 {
	margin-top: 0;
}

.drivin-feature ul {
	padding-left: 40px;
}

.drivin-feature li::marker {
	color: var(--wp--preset--color--primary);
}

.drivin-tabs-section > .wp-block-buttons {
	margin-top: 4px;
}

@media (max-width: 781px) {
	.drivin-logos {
		padding-block: 64px;
	}

	.drivin-logos > .wp-block-gallery {
		margin-block: 48px;
	}

	.drivin-tabs-section {
		padding-block: 64px;
	}

	.drivin-tabs-section > .drivin-kicker {
		margin-bottom: 40px;
	}

	.drivin-tabs .wp-block-tab-list {
		flex-wrap: nowrap;
		justify-content: flex-start;
		overflow-x: auto;
	}

	.drivin-tabs .wp-block-tab-list button {
		flex-shrink: 0;
	}

	.drivin-tabs .wp-block-tab-panel {
		padding-top: 40px;
	}

	.drivin-feature {
		gap: 32px;
		padding-left: 0;
	}

	.drivin-feature h3 {
		font-size: var(--wp--preset--font-size--x-large);
	}
}

/* ---------- Section: CTA (synced pattern) ---------- */

.drivin-cta {
	padding-block: 80px;
}

.drivin-cta > .wp-block-heading {
	margin: 0 0 40px;
}

/* ---------- Footer and inner pages ---------- */

.drivin-footer {
	padding-block: 32px;
}

.drivin-footer p {
	margin: 0;
}

.drivin-page-head {
	padding-block: 64px 32px;
}

@media (prefers-reduced-motion: reduce) {
	.drivin-marquee {
		animation: none;
	}
}