/*
Theme Name: AMS Tradings
Theme URI: https://amstradings.lk
Author: AMS Tradings
Author URI: https://amstradings.lk
Description: A modern, Tailwind-style block theme for AMS Tradings — Sri Lanka's personal vehicle import company. Child theme of Twenty Twenty-Five with full block editing, a sticky animated header, demo vehicle imagery, and mobile-responsive layouts.
Template: twentytwentyfive
Version: 0.7.2
Requires at least: 6.6
Tested up to: 6.7
Requires PHP: 7.2
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: ams-tradings
Tags: block-theme, full-site-editing, automotive, business, blog
*/

/* ============================================================
   1. STICKY ANIMATED HEADER
   ============================================================ */
/* Make the header's DIRECT child wrapper sticky. This targets whichever
   <header> is the direct child of .wp-site-blocks (the template-part wrapper
   OR the .ams-header itself) so sticky has the full page as its scroll context. */
.wp-site-blocks > header {
	position: -webkit-sticky;
	position: sticky;
	top: 0;
	z-index: 100;
}

.wp-site-blocks .ams-header {
	animation: ams-header-in 0.55s cubic-bezier(0.16, 1, 0.3, 1) both;
	transition: padding 0.3s ease, box-shadow 0.3s ease, background-color 0.3s ease, backdrop-filter 0.3s ease;
}

/* Remove the header's 1px bottom hairline so it meets the hero seamlessly. */
.ams-header {
	border-bottom: 0 !important;
}

/* Remove the block-gap WordPress inserts between the header and the page
   content, so the hero (and inner-page headers) sit flush under the menu
   with no white sliver above them. */
.wp-site-blocks > main {
	margin-top: 0 !important;
	margin-block-start: 0 !important;
}

/* Shrinks + frosts once the page is scrolled (class toggled by JS) */
.wp-site-blocks .ams-header.is-scrolled {
	padding-top: 0.5rem !important;
	padding-bottom: 0.5rem !important;
	background-color: rgba(255, 255, 255, 0.82) !important;
	-webkit-backdrop-filter: saturate(180%) blur(12px);
	backdrop-filter: saturate(180%) blur(12px);
	box-shadow: 0 6px 24px rgba(11, 13, 18, 0.08);
}

/* While the mobile menu is open, drop the header's backdrop-filter INSTANTLY
   (transition:none). backdrop-filter creates a containing block that clips the
   full-screen fixed overlay; if it fades out over time the overlay stays
   trapped behind the hero for that duration, causing an ugly flash. */
body.ams-nav-open .ams-header,
body.ams-nav-open .ams-header.is-scrolled {
	transition: none !important;
	-webkit-backdrop-filter: none !important;
	backdrop-filter: none !important;
	background-color: transparent !important;
	box-shadow: none !important;
}

.ams-header .wp-block-site-logo img,
.ams-header .wp-block-site-title {
	transition: transform 0.3s ease;
}
.ams-header.is-scrolled .wp-block-site-logo img {
	transform: scale(0.9);
}

/* Header layout — explicit flex so the logo-left / menu-right arrangement works
   even when the header is rendered outside the block template (e.g. on plugin
   pages via get_header(), where WordPress's generated layout CSS isn't printed). */
.ams-header > .wp-block-group.alignwide {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: nowrap;
	gap: 1.5rem;
	max-width: 1280px;
	margin-left: auto;
	margin-right: auto;
}
.ams-header > .wp-block-group.alignwide > .wp-block-group {
	display: flex;
	align-items: center;
	gap: 2rem;
	margin: 0;
}

/* Brand logo in the header (!important so plugin stylesheets can't oversize it) */
.ams-header .ams-logo {
	margin: 0;
	line-height: 0;
}
.ams-header .ams-logo img {
	height: 48px !important;
	width: auto !important;
	max-width: 240px !important;
	display: block;
	transition: height 0.3s ease;
}
.ams-header.is-scrolled .ams-logo img {
	height: 40px !important;
}
@media (max-width: 600px) {
	.ams-header .ams-logo img {
		height: 38px !important;
	}
}

@keyframes ams-header-in {
	from { opacity: 0; }
	to   { opacity: 1; }
}

/* Remove the default (black) focus outline on nav links; keep an accessible
   ring only for keyboard navigation. */
.ams-header .wp-block-navigation-item__content:focus,
.ams-header .wp-block-navigation-item__content:focus:not(:focus-visible) {
	outline: none;
	box-shadow: none;
}
.ams-header .wp-block-navigation-item__content:focus-visible {
	outline: 2px solid var(--wp--preset--color--accent);
	outline-offset: 3px;
	border-radius: 4px;
}

/* Animated underline on nav links */
.ams-header .wp-block-navigation-item__content {
	position: relative;
	transition: color 0.2s ease;
}
.ams-header .wp-block-navigation-item__content::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: -5px;
	height: 2px;
	border-radius: 2px;
	background: var(--wp--preset--color--accent);
	transform: scaleX(0);
	transform-origin: left center;
	transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1);
}
.ams-header .wp-block-navigation-item:hover .wp-block-navigation-item__content::after,
.ams-header .wp-block-navigation-item .wp-block-navigation-item__content:focus::after {
	transform: scaleX(1);
}

/* CTA button lift */
.ams-header .wp-block-button__link {
	transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
}
.ams-header .wp-block-button__link:hover {
	transform: translateY(-2px);
	box-shadow: 0 10px 22px rgba(245, 137, 31, 0.35);
}

/* ============================================================
   1b. HERO — designed background + layered animations
   ============================================================ */
.ams-hero {
	position: relative;
	overflow: hidden;
	isolation: isolate;
	background-color: #070a12;
}
/* Background scene (image + dark overlay) with a slow Ken-Burns drift */
.ams-hero::before {
	content: "";
	position: absolute;
	inset: -4%;
	z-index: -2;
	background:
		linear-gradient(180deg, rgba(7, 10, 18, 0.60) 0%, rgba(7, 10, 18, 0.55) 50%, rgba(7, 10, 18, 0.82) 100%),
		url("assets/images/hero-showroom.jpg") center center / cover no-repeat;
	animation: ams-hero-pan 26s ease-in-out infinite alternate;
}
/* Drifting accent glow */
.ams-hero::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background:
		radial-gradient(620px circle at 18% 28%, rgba(245, 166, 35, 0.28), transparent 60%),
		radial-gradient(520px circle at 82% 72%, rgba(237, 122, 28, 0.20), transparent 60%);
	animation: ams-hero-glow 12s ease-in-out infinite alternate;
}
.ams-hero > * {
	position: relative;
	z-index: 1;
}

@keyframes ams-hero-pan {
	from { transform: scale(1.02) translate3d(0, 0, 0); }
	to   { transform: scale(1.12) translate3d(0, -1.5%, 0); }
}
@keyframes ams-hero-glow {
	from { opacity: 0.55; transform: translateY(0); }
	to   { opacity: 1;    transform: translateY(-22px); }
}

/* Staggered entrance for the hero content */
.ams-hero-inner > * {
	opacity: 0;
	animation: ams-rise 0.9s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
.ams-hero-inner > *:nth-child(1) { animation-delay: 0.15s; }
.ams-hero-inner > *:nth-child(2) { animation-delay: 0.30s; }
.ams-hero-inner > *:nth-child(3) { animation-delay: 0.45s; }
.ams-hero-inner > *:nth-child(4) { animation-delay: 0.62s; }
.ams-hero-inner > *:nth-child(5) { animation-delay: 0.80s; }

@keyframes ams-rise {
	from { opacity: 0; transform: translateY(28px); }
	to   { opacity: 1; transform: none; }
}

/* Hero CTA buttons: lift on hover */
.ams-hero .wp-block-button__link {
	transition: transform 0.2s ease, box-shadow 0.25s ease;
}
.ams-hero .wp-block-button__link:hover {
	transform: translateY(-3px);
	box-shadow: 0 14px 30px rgba(245, 137, 31, 0.4);
}

/* Animated stat counters: subtle pulse-in handled by the rise above */

/* ============================================================
   BLOG: post list + global sidebar
   ============================================================ */
/* Sticky sidebar on desktop */
@media (min-width: 782px) {
	.ams-sidebar-col {
		position: -webkit-sticky;
		position: sticky;
		top: 96px;
		align-self: flex-start;
	}
}

.ams-widget {
	box-shadow: var(--wp--preset--shadow--soft);
}
.ams-widget__title {
	font-weight: 800;
	margin: 0 0 0.25rem;
	color: var(--wp--preset--color--contrast);
}

/* Search widget */
.ams-widget .wp-block-search__input {
	border-radius: 10px;
	border: 1px solid var(--wp--preset--color--line);
	background: var(--wp--preset--color--base);
}

/* Recent posts widget (core latest-posts, image floated left) */
.ams-recent {
	list-style: none;
	margin: 0;
	padding: 0;
}
.ams-recent li {
	padding: 0.75rem 0;
	border-bottom: 1px solid var(--wp--preset--color--line);
	overflow: hidden; /* clearfix for the floated image */
}
.ams-recent li:first-child {
	padding-top: 0;
}
.ams-recent li:last-child {
	border-bottom: 0;
	padding-bottom: 0;
}
.ams-recent .wp-block-latest-posts__featured-image.alignleft {
	margin: 0 0.85rem 0 0;
}
.ams-recent .wp-block-latest-posts__featured-image img {
	width: 64px;
	height: 64px;
	object-fit: cover;
	border-radius: 10px;
	display: block;
}
.ams-recent .wp-block-latest-posts__post-title {
	display: block;
	font-weight: 700;
	font-size: 0.95rem;
	line-height: 1.3;
	text-decoration: none;
	color: var(--wp--preset--color--contrast);
}
.ams-recent .wp-block-latest-posts__post-title:hover {
	color: var(--wp--preset--color--accent);
}
.ams-recent .wp-block-latest-posts__post-date {
	display: block;
	margin-top: 0.25rem;
	font-size: 0.78rem;
	color: var(--wp--preset--color--muted);
}

/* Tag cloud pills */
.ams-tagcloud a {
	display: inline-block;
	font-size: 0.8rem !important;
	line-height: 1;
	padding: 0.45rem 0.75rem;
	margin: 0 0.4rem 0.5rem 0;
	background: var(--wp--preset--color--base);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 9999px;
	color: var(--wp--preset--color--contrast);
	text-decoration: none;
	transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.ams-tagcloud a:hover {
	background: var(--wp--preset--color--accent);
	border-color: var(--wp--preset--color--accent);
	color: #fff;
}

/* Post list: titles + read-more */
.ams-postlist .wp-block-post-title a {
	text-decoration: none;
	color: var(--wp--preset--color--contrast);
	transition: color 0.2s ease;
}
.ams-postlist .wp-block-post-title a:hover {
	color: var(--wp--preset--color--accent);
}
.ams-postlist .wp-block-post-excerpt__more-link {
	display: inline-block;
	margin-top: 0.6rem;
	font-weight: 700;
	color: var(--wp--preset--color--accent);
	text-decoration: none;
}
.ams-postlist .wp-block-post-excerpt__more-link:hover {
	text-decoration: underline;
}
.ams-postlist .wp-block-post-featured-image {
	border-radius: 16px;
	overflow: hidden;
}

/* Plugin single templates (rendered via get_header/get_footer) */
.ams-plugin-main {
	padding-top: var(--wp--preset--spacing--50);
	padding-bottom: var(--wp--preset--spacing--70);
}

/* Plugin showcase shortcode on the home page: the plugin markup isn't a
   recognized block, so it never receives the theme's root padding and spills
   to the screen edges. Constrain it to the site container (1280px) with the
   same 1.5rem side padding every other section uses. Higher specificity
   (.wp-site-blocks .ams-showcase) + !important beats the plugin's own rule. */
.wp-site-blocks .ams-showcase {
	max-width: 1280px !important;
	margin-left: auto !important;
	margin-right: auto !important;
	padding-left: 1.5rem !important;
	padding-right: 1.5rem !important;
	box-sizing: border-box;
}
@media (max-width: 781px) {
	.wp-site-blocks .ams-showcase {
		padding-left: 1.1rem !important;
		padding-right: 1.1rem !important;
	}
}

/* FAQ accordion (About page) */
.ams-faq {
	background: var(--wp--preset--color--base);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 14px;
	padding: 1.1rem 1.35rem;
	margin-bottom: 0.85rem;
	box-shadow: var(--wp--preset--shadow--soft);
	transition: box-shadow 0.2s ease;
}
.ams-faq summary {
	font-weight: 700;
	font-size: 1.08rem;
	color: var(--wp--preset--color--contrast);
	cursor: pointer;
	list-style: none;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
}
.ams-faq summary::-webkit-details-marker {
	display: none;
}
.ams-faq summary:focus {
	outline: none;
}
.ams-faq summary:focus-visible {
	outline: 2px solid var(--wp--preset--color--accent);
	outline-offset: 4px;
	border-radius: 8px;
}
.ams-faq summary::after {
	content: "+";
	font-size: 1.5rem;
	font-weight: 400;
	line-height: 1;
	color: var(--wp--preset--color--accent);
	transition: transform 0.25s ease;
}
.ams-faq[open] summary::after {
	transform: rotate(45deg);
}
.ams-faq[open] {
	box-shadow: var(--wp--preset--shadow--card);
}
.ams-faq p {
	margin: 0.85rem 0 0;
	color: var(--wp--preset--color--muted);
	line-height: 1.65;
}

/* Contact icon chips */
.ams-ico {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	border-radius: 12px;
	background: var(--wp--preset--color--accent-soft);
	color: var(--wp--preset--color--accent-dark);
}
.ams-ico svg {
	display: block;
}

/* Contact map frame */
.ams-map {
	border-radius: 20px;
	overflow: hidden;
	box-shadow: var(--wp--preset--shadow--card);
	line-height: 0;
}
.ams-map iframe {
	width: 100%;
	display: block;
	filter: grayscale(0.15);
}

/* Browser-frame wrapper (live auction screenshot) */
.ams-frame {
	overflow: hidden;
}
.ams-frame .wp-block-image {
	margin: 0;
}

/* ============================================================
   2. SCROLL-REVEAL ANIMATIONS (class added by JS)
   ============================================================ */
.ams-reveal {
	opacity: 0;
	transform: translateY(28px);
	transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
	will-change: opacity, transform;
}
.ams-reveal.is-visible {
	opacity: 1;
	transform: none;
}

/* ============================================================
   PAGE-LOAD / ENTRANCE ANIMATIONS — DISABLED SITE-WIDE
   The scroll-reveal (.ams-reveal), the hero's staggered entrance
   (.ams-hero-inner) and the header fade-in were causing content to flash or
   stay hidden (notably long text pages on mobile). Everything now renders
   immediately, fully visible — no fade, no slide, nothing can get stuck.
   This wins even if an older cached theme.js still adds the .ams-reveal class.
   ============================================================ */
.ams-reveal,
.ams-reveal.is-visible,
.ams-hero-inner > * {
	opacity: 1 !important;
	transform: none !important;
	animation: none !important;
	transition: none !important;
}
/* Header keeps its hover / scroll-shrink transitions — only the load fade goes. */
.wp-site-blocks .ams-header {
	animation: none !important;
}

/* ============================================================
   3. CARD HOVER LIFT (featured stock cards on the home page only)
   ============================================================ */
.wp-block-column > .wp-block-group.has-base-background-color {
	transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.28s ease;
}
.wp-block-column > .wp-block-group.has-base-background-color:hover {
	transform: translateY(-6px);
	box-shadow: 0 18px 44px rgba(11, 13, 18, 0.14);
}
/* Zoom the card image slightly on hover */
.wp-block-column > .wp-block-group.has-base-background-color .wp-block-image {
	overflow: hidden;
}
.wp-block-column > .wp-block-group.has-base-background-color .wp-block-image img {
	transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}
.wp-block-column > .wp-block-group.has-base-background-color:hover .wp-block-image img {
	transform: scale(1.05);
}

/* ============================================================
   4. MOBILE RESPONSIVE
   ============================================================ */
/* Post grids: 3 -> 2 -> 1 columns */
@media (max-width: 1023px) {
	.wp-block-post-template.is-layout-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
	}
}
@media (max-width: 781px) {
	.wp-block-post-template.is-layout-grid {
		grid-template-columns: 1fr !important;
	}
	/* Tighten big section side padding on phones (overrides inline 4rem) */
	.wp-site-blocks .wp-block-group.alignfull {
		padding-left: 1.1rem !important;
		padding-right: 1.1rem !important;
	}
	/* Reduce oversized hero/section vertical padding */
	main > .wp-block-group[style*="--wp--preset--spacing--80"],
	main .wp-block-group[style*="padding-top:var(--wp--preset--spacing--80)"] {
		padding-top: 4rem;
		padding-bottom: 4rem;
	}
}

/* ------------------------------------------------------------
   Mobile navigation — show hamburger up to 900px (WP defaults to
   600px which lets the links overflow on phones/tablets).
   ------------------------------------------------------------ */
/* Custom hamburger button (hidden on desktop) */
.ams-burger {
	display: none;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	gap: 6px;
	width: 44px;
	height: 44px;
	padding: 0;
	background: none;
	border: 0;
	cursor: pointer;
	position: relative;
	z-index: 1000;
	-webkit-tap-highlight-color: transparent;
}
.ams-burger:focus {
	outline: none;
}
.ams-burger:focus-visible {
	outline: 2px solid var(--wp--preset--color--accent);
	outline-offset: 2px;
	border-radius: 6px;
}
.ams-burger span {
	display: block;
	width: 26px;
	height: 2.5px;
	border-radius: 2px;
	background: var(--wp--preset--color--contrast);
	transition: transform 0.3s ease, opacity 0.2s ease, background-color 0.3s ease;
}

@media (max-width: 900px) {
	.ams-burger {
		display: flex;
	}
	/* Full-screen light overlay panel (fades in) */
	.ams-header .ams-mobilenav {
		position: fixed;
		inset: 0;
		z-index: 999;
		background-color: #ffffff;
		background-image:
			radial-gradient(540px circle at 115% -8%, var(--wp--preset--color--accent-soft), transparent 60%),
			radial-gradient(420px circle at -10% 108%, var(--wp--preset--color--accent-soft), transparent 55%);
		padding: 5.5rem 1.4rem 2.25rem;
		opacity: 0;
		visibility: hidden;
		pointer-events: none;
		transition: opacity 0.28s ease, visibility 0.28s ease;
		overflow-y: auto;
		-webkit-overflow-scrolling: touch;
	}
	/* Small "Menu" label, top-left */
	.ams-header .ams-mobilenav::before {
		content: "Menu";
		position: absolute;
		top: 1.7rem;
		left: 1.65rem;
		font-size: 0.72rem;
		font-weight: 800;
		letter-spacing: 0.18em;
		text-transform: uppercase;
		color: var(--wp--preset--color--accent);
	}
	.ams-header .ams-mobilenav .wp-block-navigation__container {
		display: flex !important;
		flex-direction: column !important;
		flex-wrap: nowrap !important;
		align-items: stretch !important;
		justify-content: flex-start !important;
		gap: 0.35rem !important;
		width: 100%;
	}
	.ams-header .ams-mobilenav .wp-block-navigation-item {
		width: 100%;
		border: 0;
		border-radius: 14px;
		opacity: 0;
		transform: translateY(14px);
		transition: opacity 0.5s cubic-bezier(0.16, 1, 0.3, 1),
			transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
	}
	/* Staggered entrance once the menu opens */
	body.ams-nav-open .ams-header .ams-mobilenav .wp-block-navigation-item {
		opacity: 1;
		transform: none;
	}
	.ams-header .ams-mobilenav .wp-block-navigation-item:nth-child(1) { transition-delay: 0.05s; }
	.ams-header .ams-mobilenav .wp-block-navigation-item:nth-child(2) { transition-delay: 0.10s; }
	.ams-header .ams-mobilenav .wp-block-navigation-item:nth-child(3) { transition-delay: 0.15s; }
	.ams-header .ams-mobilenav .wp-block-navigation-item:nth-child(4) { transition-delay: 0.20s; }
	.ams-header .ams-mobilenav .wp-block-navigation-item:nth-child(5) { transition-delay: 0.25s; }
	.ams-header .ams-mobilenav .wp-block-navigation-item:nth-child(6) { transition-delay: 0.30s; }

	.ams-header .ams-mobilenav .wp-block-navigation-item__content {
		display: flex !important;
		align-items: center;
		justify-content: space-between;
		width: 100%;
		padding: 1rem 1.15rem;
		font-size: 1.3rem;
		font-weight: 700;
		color: #11151c;
		letter-spacing: -0.01em;
		border-radius: 14px;
		transition: background-color 0.2s ease, color 0.2s ease;
	}
	/* Repurpose the underline pseudo as a chevron pushed to the right */
	.ams-header .ams-mobilenav .wp-block-navigation-item__content::after {
		content: "\203A";
		display: inline-block !important;
		position: static !important;
		width: auto !important;
		height: auto !important;
		background: none !important;
		border-radius: 0 !important;
		transform: translateX(-4px) !important;
		transition: transform 0.2s ease, color 0.2s ease, opacity 0.2s ease !important;
		font-size: 1.4rem;
		line-height: 1;
		color: var(--wp--preset--color--accent);
		opacity: 0.35;
	}
	.ams-header .ams-mobilenav .wp-block-navigation-item__content:hover,
	.ams-header .ams-mobilenav .current-menu-item > .wp-block-navigation-item__content,
	.ams-header .ams-mobilenav .wp-block-navigation-item__content[aria-current] {
		background: var(--wp--preset--color--accent-soft);
		color: var(--wp--preset--color--accent-dark);
	}
	.ams-header .ams-mobilenav .wp-block-navigation-item__content:hover::after,
	.ams-header .ams-mobilenav .current-menu-item > .wp-block-navigation-item__content::after,
	.ams-header .ams-mobilenav .wp-block-navigation-item__content[aria-current]::after {
		transform: translateX(0) !important;
		opacity: 1;
	}

	/* Open state */
	body.ams-nav-open {
		overflow: hidden;
	}
	body.ams-nav-open .ams-header .ams-mobilenav {
		opacity: 1;
		visibility: visible;
		pointer-events: auto;
	}
	/* Hamburger morphs into a dark X (light panel behind it) */
	body.ams-nav-open .ams-burger span {
		background: #11151c;
	}
	body.ams-nav-open .ams-burger span:nth-child(1) {
		transform: translateY(8.5px) rotate(45deg);
	}
	body.ams-nav-open .ams-burger span:nth-child(2) {
		opacity: 0;
	}
	body.ams-nav-open .ams-burger span:nth-child(3) {
		transform: translateY(-8.5px) rotate(-45deg);
	}
}
@media (max-width: 600px) {
	/* Headings scale already fluid; nudge hero stat gap */
	.wp-block-columns:not(.is-not-stacked-on-mobile) > .wp-block-column {
		margin-bottom: 1.25rem;
	}
}

/* ============================================================
   5. ACCESSIBILITY: respect reduced motion
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
	.ams-header,
	.ams-reveal,
	.ams-hero::before,
	.ams-hero::after,
	.ams-hero-inner > *,
	.wp-block-column > .wp-block-group.has-base-background-color,
	.wp-block-post-template > li > .wp-block-group,
	.wp-block-image img {
		animation: none !important;
		transition: none !important;
		opacity: 1 !important;
		transform: none !important;
	}
}

/* ============================================================
   99. GLOBAL FOCUS HANDLING (site-wide)
   Removes the stray focus ring that appears when clicking a link,
   button, card or menu item with the MOUSE (this showed as a white
   border on dark backgrounds). Keyboard users still get a clear,
   accessible focus ring via :focus-visible, in the brand accent.
   ============================================================ */
:where(a, button, summary, input, select, textarea, [tabindex],
       .wp-element-button, .wp-block-navigation-item__content,
       .wp-block-button__link):focus:not(:focus-visible) {
	outline: none !important;
	box-shadow: none !important;
}
:where(a, button, summary, .wp-element-button, .wp-block-button__link):focus-visible {
	outline: 2px solid var(--wp--preset--color--accent, #2563eb);
	outline-offset: 2px;
	border-radius: 4px;
}
/* Remove the grey/white tap flash on touch devices. */
html {
	-webkit-tap-highlight-color: transparent;
}

/* ============================================================
   CUSTOMER DELIVERIES — animated photo reel + lightbox
   Works automatically on the home page's ".marquee-container" strip, or add
   the CSS class "ams-deliveries" to any other block that holds photos
   (Gallery, Row/Group of images…) in the editor: Block → Advanced →
   Additional CSS class(es). theme.js turns it into a looping reel.
   Without JS, or before it runs, the original block shows as normal.
   ============================================================ */
.ams-deliveries.ams-dlv-ready > :not(.ams-dlv),
.marquee-container.ams-dlv-ready > :not(.ams-dlv) {
	display: none !important;
}
/* The home-page Custom HTML strip: let the reel handle spacing. */
.marquee-container.ams-dlv-ready {
	padding: 0 !important;
	overflow: visible !important;
}
.ams-dlv {
	--dlv-h: clamp(220px, 26vw, 340px);
	--dlv-gap: 14px;
	position: relative;
	width: 100%;
	overflow: hidden;
	padding-block: 30px 34px;
	-webkit-mask-image: linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%);
	mask-image: linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%);
}
.ams-dlv-track {
	display: flex;
	gap: var(--dlv-gap);
	width: max-content;
	animation: ams-dlv-scroll var(--dlv-duration, 60s) linear infinite;
	will-change: transform;
}
.ams-dlv:hover .ams-dlv-track,
.ams-dlv:focus-within .ams-dlv-track,
.ams-dlv.is-offscreen .ams-dlv-track,
.ams-dlv.is-held .ams-dlv-track {
	animation-play-state: paused;
}
@keyframes ams-dlv-scroll {
	from { transform: translate3d(0, 0, 0); }
	to   { transform: translate3d(calc(-50% - var(--dlv-gap) / 2), 0, 0); }
}

/* Each photo: a gentle "wave" — alternate cards sit slightly higher and
   bob up and down, so the reel feels alive rather than a flat strip. */
.ams-dlv-item {
	position: relative;
	flex: none;
	height: var(--dlv-h);
	margin: 0;
	border: 0;
	padding: 0;
	border-radius: 18px;
	overflow: hidden;
	background: #e9e4dc;
	cursor: zoom-in;
	box-shadow: 0 10px 28px rgba(11, 13, 18, 0.12);
	transform: translateY(0);
	transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.45s ease, filter 0.45s ease;
	animation: ams-dlv-bob 7s ease-in-out infinite;
}
.ams-dlv-item:nth-child(2n) { animation-delay: -3.5s; }
.ams-dlv-item:nth-child(3n) { animation-duration: 8.5s; }
@keyframes ams-dlv-bob {
	0%, 100% { translate: 0 0; }
	50%      { translate: 0 -8px; }
}
.ams-dlv-item img {
	display: block;
	height: 100%;
	width: auto;
	max-width: none;
	object-fit: cover;
	transition: transform 0.9s cubic-bezier(0.16, 1, 0.3, 1);
}
/* Warm sweep of light across a photo on hover */
.ams-dlv-item::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(115deg, transparent 35%, rgba(255, 255, 255, 0.28) 50%, transparent 65%);
	transform: translateX(-120%);
	pointer-events: none;
}
.ams-dlv:hover .ams-dlv-item { filter: saturate(0.75) brightness(0.92); }
.ams-dlv .ams-dlv-item:hover,
.ams-dlv .ams-dlv-item:focus-visible {
	filter: none;
	transform: translateY(-10px) scale(1.035);
	box-shadow: 0 22px 48px rgba(11, 13, 18, 0.24), 0 0 0 3px var(--wp--preset--color--accent, #F5891F);
	z-index: 2;
	outline: none;
}
.ams-dlv .ams-dlv-item:hover img { transform: scale(1.08); }
.ams-dlv .ams-dlv-item:hover::after {
	transform: translateX(120%);
	transition: transform 0.9s ease;
}

/* Lightbox */
.ams-dlv-box {
	position: fixed;
	inset: 0;
	z-index: 100000;
	display: grid;
	place-items: center;
	padding: 56px 16px;
	background: rgba(11, 13, 18, 0.88);
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
	opacity: 0;
	transition: opacity 0.25s ease;
}
.ams-dlv-box.is-open { opacity: 1; }
.ams-dlv-box[hidden] { display: none !important; }
.ams-dlv-box img {
	max-width: min(92vw, 1200px);
	max-height: 82vh;
	width: auto;
	height: auto;
	border-radius: 14px;
	box-shadow: 0 30px 80px rgba(0, 0, 0, 0.5);
	transform: scale(0.94);
	transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.2s ease;
}
.ams-dlv-box.is-open img { transform: scale(1); }
.ams-dlv-box img.is-swapping { opacity: 0; transform: scale(0.97); }
.ams-dlv-box button {
	position: absolute;
	display: grid;
	place-items: center;
	width: 48px;
	height: 48px;
	border: 0;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.12);
	color: #fff;
	font-size: 24px;
	line-height: 1;
	cursor: pointer;
	transition: background 0.2s ease;
}
.ams-dlv-box button:hover,
.ams-dlv-box button:focus-visible {
	background: var(--wp--preset--color--accent, #F5891F);
	outline: none;
}
.ams-dlv-close { top: 16px; right: 16px; }
.ams-dlv-prev  { left: 16px; top: 50%; translate: 0 -50%; }
.ams-dlv-next  { right: 16px; top: 50%; translate: 0 -50%; }
.ams-dlv-count {
	position: absolute;
	bottom: 18px;
	left: 50%;
	translate: -50% 0;
	color: rgba(255, 255, 255, 0.8);
	font-size: 0.85rem;
	letter-spacing: 0.08em;
	font-variant-numeric: tabular-nums;
}

@media (max-width: 781px) {
	.ams-dlv { --dlv-h: 210px; --dlv-gap: 10px; padding-block: 12px 18px; }
	.ams-dlv-item { border-radius: 14px; }
	.ams-dlv-prev, .ams-dlv-next { top: auto; bottom: 10px; translate: none; }
}

/* Reduced motion: no auto-scroll or bobbing — swipe/scroll the row instead. */
@media (prefers-reduced-motion: reduce) {
	.ams-dlv { overflow-x: auto; scroll-snap-type: x mandatory; -webkit-mask-image: none; mask-image: none; }
	.ams-dlv-track { animation: none; }
	.ams-dlv-item { animation: none; scroll-snap-align: center; }
	.ams-dlv-item[aria-hidden="true"] { display: none; }
	.ams-dlv-item, .ams-dlv-item img, .ams-dlv-box, .ams-dlv-box img { transition: none; }
}