/*
Theme Name:        Central Auto Body
Theme URI:         https://centralabc.com/
Description:       Block theme for Central Auto Body Collision of Westchester. Recreates the original CentralABC.com (Cherry Framework) layout — centered logo header, full-width hero slider, parallax bands and a content + sidebar page layout — with no dependency on Cherry Framework or the Cherry plugins.
Author:            Central Auto Body Collision
Version:           1.0.3
Requires at least: 6.6
Tested up to:      7.1
Requires PHP:      7.4
License:           GNU General Public License v2 or later
License URI:       https://www.gnu.org/licenses/gpl-2.0.html
Text Domain:       central-auto-body
Tags:              block-patterns, full-site-editing, custom-logo, custom-menu, featured-images, one-column, two-columns, right-sidebar, wide-blocks, translation-ready
*/

/*
 * Most styling lives in theme.json. This file only covers what theme.json
 * cannot express: focus visibility, header/footer details, sidebar layout,
 * and reduced-motion handling.
 */

/* ---------- Accessibility ---------- */

:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
	outline: 3px solid var(--wp--preset--color--brand);
	outline-offset: 2px;
}

.has-brand-background-color :where(a, button):focus-visible,
.wp-block-cover :where(a, button):focus-visible {
	outline-color: var(--wp--preset--color--base);
}

/* Links inside running text are underlined so they are not identified by color alone. */
.entry-content :where(p, li, dd, td) a:not(.wp-element-button) {
	text-decoration: underline;
	text-underline-offset: 0.15em;
}

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		scroll-behavior: auto !important;
		transition-duration: 0.01ms !important;
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
	}

	.wp-block-cover.has-parallax,
	.cab-parallax {
		background-attachment: scroll !important;
	}
}

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

.cab-header .wp-block-site-logo {
	text-align: center;
}

.cab-header .wp-block-site-logo img,
.cab-header .cab-logo img {
	width: min(100%, 1140px);
	height: auto;
}

.cab-header .wp-block-navigation-item__content {
	padding: 0.5em 0.25em;
}

/* 44px touch targets for the mobile menu open/close buttons. */
.cab-header .wp-block-navigation__responsive-container-open,
.cab-header .wp-block-navigation__responsive-container-close {
	padding: 10px;
}

/* "Menu ⌄" text button (markup from cab_navigation_menu_button()). */
.wp-block-navigation__responsive-container-open:has(.cab-menu-button__label) {
	align-items: center;
	gap: 0.35em;
	min-height: 44px;
	padding: 10px 14px;
	font-size: 1rem;
	font-weight: 700;
	line-height: 1;
}

.cab-menu-button__chevron {
	flex: none;
	width: 1em;
	height: 1em;
}

/* aria-current only: menus converted from classic menus can carry a stale "current-menu-item" class. */
.cab-header .wp-block-navigation-item__content[aria-current="page"] {
	color: var(--wp--preset--color--contrast);
	text-decoration: underline;
	text-underline-offset: 0.3em;
}

/* ---------- Page banner (replaces the old breadcrumb band) ---------- */

.cab-page-banner {
	/* White wash keeps the charcoal title well above 4.5:1 over every part of the photo. */
	background:
		linear-gradient(rgb(255 255 255 / 0.55), rgb(255 255 255 / 0.55)),
		url("assets/images/page-banner.webp") center / cover no-repeat,
		#e9e9e9;
}

.cab-page-banner :where(h1, p) {
	margin: 0;
}

/* ---------- Hero / parallax text ---------- */

.wp-block-cover .has-base-color {
	text-shadow: 0 2px 6px rgb(0 0 0 / 0.6);
}

/* ---------- Content + sidebar ---------- */

.cab-sidebar .wp-block-quote {
	margin-block: 0 var(--wp--preset--spacing--40);
}

@media (max-width: 781px) {
	.cab-layout-with-sidebar > .wp-block-column.cab-sidebar {
		border-top: 1px solid var(--wp--preset--color--muted);
		padding-top: var(--wp--preset--spacing--50);
	}
}

/* ---------- Testimonials ---------- */

.cab-testimonial {
	height: 100%;
	margin: 0;
}

.cab-testimonial p {
	margin-bottom: 0.5rem;
}

.cab-testimonial cite {
	display: block;
	margin-top: 0;
	font-style: normal;
	font-weight: 700;
}

/* ---------- Classic editor images and [caption] (content from the old theme) ---------- */

/* [caption] prints <figure style="width: 1024px">; keep it inside its column. */
.wp-caption {
	max-width: 100%;
	margin-block: 0 var(--wp--preset--spacing--40);
}

.wp-caption.aligncenter,
img.aligncenter {
	display: block;
	margin-inline: auto;
}

/* Classic <img width height> must scale down with its container, keeping its proportions. */
:where(.wp-block-post-content, .cab-row) img:not(.wp-block-cover__image-background) {
	max-width: 100%;
	height: auto;
}

.wp-caption-text {
	margin-top: 0.5rem;
	font-size: var(--wp--preset--font-size--small);
	text-align: center;
}

/* ---------- Logo strip (#certlogos or .cab-logo-marquee) ---------- */

/* Before/without JavaScript, and with reduced motion: one row at a uniform height, scrollable by hand. */
#certlogos,
.cab-logo-marquee {
	--cab-logo-height: clamp(44px, 6vw, 70px);
	--cab-logo-gap: clamp(1.5rem, 4vw, 3rem);
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
	gap: var(--cab-logo-gap);
	overflow-x: auto;
	padding-block: var(--wp--preset--spacing--30);
}

#certlogos br,
.cab-logo-marquee br {
	display: none;
}

/* Same height for every logo; very wide banner-style logos are capped and scaled down inside that box. */
#certlogos img,
.cab-logo-marquee img {
	flex: none;
	width: auto;
	max-width: min(260px, 60vw);
	height: var(--cab-logo-height);
	margin: 0;
	object-fit: contain;
}

/* Animated (set up by assets/js/logo-marquee.js). */
#certlogos.is-marquee,
.cab-logo-marquee.is-marquee {
	display: block;
	overflow: hidden;
}

.cab-marquee__viewport {
	overflow: hidden;
	-webkit-mask-image: linear-gradient(to right, transparent, #000 4%, #000 96%, transparent);
	mask-image: linear-gradient(to right, transparent, #000 4%, #000 96%, transparent);
}

.cab-marquee__track {
	display: flex;
	width: max-content;
	animation: cab-marquee var(--cab-marquee-duration, 40s) linear infinite;
}

/* Trailing padding equals the gap, so the two halves join seamlessly at -50%. */
.cab-marquee__group {
	display: flex;
	flex: none;
	align-items: center;
	gap: var(--cab-logo-gap);
	padding-inline-end: var(--cab-logo-gap);
}

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

/* Hover/focus pause applies to the logos only, so focusing the play button does not keep it paused. */
.cab-marquee__viewport:hover .cab-marquee__track,
.cab-marquee__viewport:focus-within .cab-marquee__track,
.is-marquee.is-paused .cab-marquee__track,
.is-marquee.is-offscreen .cab-marquee__track {
	animation-play-state: paused;
}

.cab-marquee__toggle {
	display: grid;
	place-items: center;
	width: 32px;
	height: 32px;
	margin: var(--wp--preset--spacing--20) 0 0 auto;
	padding: 0;
	border: 2px solid var(--wp--preset--color--contrast);
	border-radius: 50%;
	background: var(--wp--preset--color--base);
	color: var(--wp--preset--color--contrast);
	cursor: pointer;
}

.cab-marquee__toggle:hover {
	border-color: var(--wp--preset--color--brand);
	color: var(--wp--preset--color--brand);
}

.cab-marquee__icon-play,
.is-paused .cab-marquee__icon-pause {
	display: none;
}

.is-paused .cab-marquee__icon-play {
	display: block;
}

/* ---------- Full-width parallax bands on sub pages ---------- */

/* Bands moved out of the sidebar column (inc/legacy-shortcodes.php): edge to edge, touching the page banner. */
.cab-hoisted-bands {
	margin-block: 0 !important;
}

.cab-hoisted-bands .cab-parallax {
	margin-block: 0;
}

.cab-hoisted-bands--after {
	margin-block-start: 0 !important;
}

/* ---------- Posts grid ---------- */

.cab-post-card .wp-block-post-featured-image img {
	aspect-ratio: 570 / 396;
	object-fit: cover;
}