/**
 * Ananyoo Accessible Card Scroller — front-end styles.
 *
 * Neutral by default (inherits the theme's fonts and colours); only the
 * structure is opinionated. The whole "cards per view" behaviour is one
 * calc() driven by two custom properties the block sets inline:
 *   --aac-per-view  (desktop column count)
 *   --aac-gap       (gap between cards, e.g. 24px)
 * Breakpoints only reassign the derived --aac-cols, so the card width
 * recomputes automatically. No JavaScript is required to scroll.
 */

/* Page-level guard: when a scroller (or the section that holds it) is placed
   full-bleed with `width: 100vw`, the 100vw INCLUDES the vertical scrollbar,
   so the page overflows horizontally by the scrollbar width (~15px) and shows
   an unwanted bottom scrollbar. Clipping the root on the X axis removes that
   phantom scrollbar without affecting vertical scrolling or sticky headers
   (clip, unlike hidden/auto, creates no scroll container). Applied only to
   the root element, so `position: sticky` navigation keeps working. */
html { overflow-x: clip; }

.aac-scroller {
	--aac-per-view: 3;
	--aac-gap: 24px;
	--aac-focus: #1a73e8;
	--aac-card-line: #e3e3e3;
	--aac-card-bg: #ffffff;
	position: relative;
	margin-block: 1.5rem;
	display: flex;
	flex-direction: column;
	/* Contain the horizontal scroll to this component. Without this, a wide
	   track can bleed past the page width and create a document-level
	   horizontal scrollbar in some theme layouts (e.g. full-site-editing
	   flow containers). The inner __viewport still scrolls on its own axis. */
	min-width: 0;
	max-width: 100%;
	overflow-x: clip;
}

/* Scroll container: native scroll + snap, keyboard-focusable on its own. */
.aac-scroller__viewport {
	--aac-cols: var( --aac-per-view );
	min-width: 0;
	overflow-x: auto;
	overflow-y: hidden;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	-webkit-overflow-scrolling: touch;
	scroll-padding-inline-start: 2px;
	padding: 0.5rem 2px 1rem;     /* room so focus rings are not clipped */
	scrollbar-width: thin;        /* a visible scrollbar is a scroll affordance */
}
.aac-scroller__viewport:focus-visible {
	outline: 3px solid var( --aac-focus );
	outline-offset: 3px;
	border-radius: 8px;
}

/* Track stays a real list so screen readers announce "list, N items". */
.aac-scroller__track {
	display: flex;
	gap: var( --aac-gap );
	list-style: none;
	margin: 0;
	padding: 0;
}

/* Responsive column count: desktop = chosen value, tablet caps at 2,
   mobile = 1. min() never increases the count on smaller screens. */
@media ( max-width: 900px ) {
	.aac-scroller__viewport { --aac-cols: min( var( --aac-per-view ), 2 ); }
}
@media ( max-width: 600px ) {
	.aac-scroller__viewport { --aac-cols: 1; }
}

.aac-scroller__card {
	flex: 0 0 auto;
	width: calc( ( 100% - ( var( --aac-cols ) - 1 ) * var( --aac-gap ) ) / var( --aac-cols ) );
	scroll-snap-align: start;
	display: flex;
	flex-direction: column;
	background: var( --aac-card-bg );
	border: 1px solid var( --aac-card-line );
	border-radius: 12px;
	overflow: hidden;
	/* Sensible default so card text doesn't inherit an oversized theme base
	   font. The block's Typography control sets font-size on this same element,
	   so it still overrides this default; the heading keeps its own size. */
	font-size: 1rem;
}

/* The card receives keyboard focus after a Previous/Next press (its tabindex
   is -1). Use an INSET outline so the ring is never clipped by the card's own
   overflow:hidden or by the viewport's horizontal scroll at the edges. */
.aac-scroller__card:focus-visible,
.aac-scroller__card:focus {
	outline: 3px solid var( --aac-focus );
	outline-offset: -3px;
}

/* Media: real <img> when supplied, neutral placeholder block otherwise. */
.aac-scroller__media {
	display: block;
	width: 100%;
	height: auto;              /* let aspect-ratio set the height even when the <img> carries width/height attributes (wp_get_attachment_image adds them); object-fit then crops to the ratio */
	aspect-ratio: 16 / 10;
	object-fit: cover;
}
.aac-scroller__media--placeholder {
	background: repeating-linear-gradient( 45deg, #ededed, #ededed 10px, #f6f6f6 10px, #f6f6f6 20px );
}

.aac-scroller__body {
	display: flex;
	flex-direction: column;
	flex: 1;
	padding: 1.25rem;
}
.aac-scroller__heading {
	margin: 0 0 0.5rem;
	font-size: 1.25rem;
	line-height: 1.2;
}
.aac-scroller__text {
	margin: 0 0 1.1rem;
	line-height: 1.5;
}

/* Link is a neutral, clearly-focusable text link by default; pin to the
   bottom so cards stay equal height. Themes can restyle it into a button. */
.aac-scroller__link {
	margin-top: auto;
	align-self: flex-start;
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	min-height: 44px;             /* WCAG 2.5.5 target size */
	padding: 0.4rem 0.2rem;
	font-weight: 600;
	text-decoration: underline;
	text-underline-offset: 3px;
	color: inherit;
}
.aac-scroller__link:focus-visible {
	outline: 3px solid var( --aac-focus );
	outline-offset: 3px;
}
.aac-scroller__arrow { transition: transform 0.15s ease; }
.aac-scroller__link:hover .aac-scroller__arrow { transform: translateX( 3px ); }

/* Previous / next controls (injected by scroller-view.js when cards overflow).
   Rendered AFTER the viewport in the DOM and below the cards, so focus order,
   DOM order and visual order all agree (WCAG 2.4.3). */
.aac-scroller__controls {
	display: flex;
	gap: 0.6rem;
	justify-content: flex-end;
	margin-top: 0.75rem;
}
.aac-scroller__btn {
	width: 48px;
	height: 48px;                 /* >= 44px target */
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border: 2px solid currentColor;
	background: transparent;
	color: inherit;
	border-radius: 50%;
	cursor: pointer;
	font-size: 1.5rem;
	line-height: 1;
}
.aac-scroller__btn:focus-visible {
	outline: 3px solid var( --aac-focus );
	outline-offset: 2px;
}
.aac-scroller__btn[disabled] {
	opacity: 0.35;
	cursor: default;
}

/* Visually hidden (distinct link context). Defined here so the stylesheet is
   self-sufficient when only the scroller is on the page. */
.aac-visually-hidden {
	position: absolute !important;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	border: 0;
	overflow: hidden;
	clip: rect( 0 0 0 0 );
	white-space: nowrap;
}

@media ( prefers-reduced-motion: reduce ) {
	.aac-scroller__viewport { scroll-behavior: auto; }
	.aac-scroller__arrow { transition: none; }
}

/* CTA rendered as a button (opt-in via the card's "Call to action style").
   Neutral defaults; the card's colour controls override these via inline
   styles. Keeps the base link's 44px target and focus ring. */
.aac-scroller__link--button {
	text-decoration: none;
	padding: 0.55rem 1.15rem;
	background: #1a1f36;
	color: #fff;
	font-weight: 600;
}
.aac-scroller__link--button:hover { filter: brightness( 0.92 ); }
.aac-scroller__link--square  { border-radius: 0; }
.aac-scroller__link--rounded { border-radius: 8px; }
.aac-scroller__link--pill    { border-radius: 999px; }
/* Button size (the base keeps a 44px target; these vary padding + text). */
.aac-scroller__link--sm { padding: 0.4rem 0.9rem;  font-size: 0.85rem; }
.aac-scroller__link--md { padding: 0.55rem 1.15rem; font-size: 0.95rem; }
.aac-scroller__link--lg { padding: 0.75rem 1.5rem; font-size: 1.1rem; }

/* --- Windows High Contrast / forced-colors (WCAG 1.4.1, 2.4.7) -------- *
 * Keep the card, viewport and control focus rings visible when the OS
 * overrides colours. */
@media ( forced-colors: active ) {
	.aac-scroller__viewport:focus-visible,
	.aac-scroller__card:focus-visible,
	.aac-scroller__btn:focus-visible,
	.aac-scroller__link:focus-visible,
	.aac-scroller__link--button:focus-visible {
		outline: 3px solid Highlight;
		outline-offset: 2px;
	}
}

/* --- WooCommerce "Featured products" cards (added by the [ananyoo_featured_products]
   shortcode; these classes are harmless when the shortcode is not used). The badge
   background is set inline per category and is always picked to meet WCAG 1.4.3
   contrast (>= 4.5:1) with white text. --- */
/* --- Product card: full-cover "Option B" layout. The ENTIRE card is a single
   link (.aac-pf-cardlink wraps the cover image AND the text band), so every
   pixel of the card navigates to the product — not only the title. This is the
   robust, unambiguous way to make a whole card clickable: a real anchor, not a
   stretched pseudo-element (which only ever covered the bottom band).
   Accessibility: the cover image is decorative (alt="") and the category chip
   is aria-hidden, so the link's accessible name is just the product title;
   one link per card, no nested interactive elements. The dark band keeps white
   text >= 15:1 over any cover art (WCAG 1.4.3, verified).
   The cover fills the card via position:absolute, so the card carries an
   explicit 3:4 portrait ratio (suits book/magazine covers, equal heights);
   object-position:center-top shows the masthead and crops excess at the bottom. */
.aac-pf-card {
	position: relative;
	overflow: hidden;
	aspect-ratio: 3 / 4;
	transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.aac-pf-card:hover, .aac-pf-card:focus-within { transform: translateY( -4px ); box-shadow: 0 12px 28px rgba( 0, 0, 0, 0.22 ); }

/* The whole-card link fills the card and lays its text band at the bottom. The
   hand cursor therefore shows over the entire card, and clicking anywhere on it
   really does follow the link. */
.aac-pf-cardlink {
	position: absolute;
	inset: 0;
	z-index: 1;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	text-decoration: none;
	color: #fff;
	cursor: pointer;
}
.aac-pf-cardlink:focus-visible { outline: 3px solid #ffe08a; outline-offset: -3px; border-radius: 12px; }

.aac-pf-card .aac-pf-media { position: absolute; inset: 0; display: block; margin: 0; z-index: 0; }
.aac-pf-card .aac-scroller__media {
	width: 100%;
	height: 100%;
	aspect-ratio: auto;          /* fill the card, not a fixed ratio */
	object-fit: cover;
	object-position: center top; /* keep the title/top of the cover in frame */
}

.aac-pf-overlay {
	position: relative;          /* sits in the link's flex flow, above the cover */
	z-index: 1;
	padding: 2.6rem 0.9rem 0.85rem;
	color: #fff;
	background: linear-gradient( to top,
		rgba( 12, 14, 22, 0.94 ) 0%,
		rgba( 12, 14, 22, 0.90 ) 42%,
		rgba( 12, 14, 22, 0.5 ) 74%,
		rgba( 12, 14, 22, 0 ) 100% );
}
/* Title — permanently underlined so it clearly reads as clickable; amber on hover. */
.aac-pf-card .aac-scroller__heading {
	margin: 0 0 0.2rem;
	font-size: 1rem;
	line-height: 1.25;
	color: #fff;
	font-weight: 700;
	text-decoration: underline;
	text-underline-offset: 3px;
	text-decoration-thickness: 1px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.aac-pf-card:hover .aac-scroller__heading,
.aac-pf-cardlink:hover .aac-scroller__heading { color: #ffe08a; }

.aac-pf-badge {
	position: absolute;
	top: 12px;                   /* sits over the cover, top-left, clear of the band */
	left: 12px;
	z-index: 2;
	display: inline-block;
	max-width: calc( 100% - 24px );
	padding: 0.3em 0.85em;
	border-radius: 999px;
	font-size: 0.8rem;
	font-weight: 700;
	line-height: 1.35;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	color: #fff;
	box-shadow: 0 2px 8px rgba( 0, 0, 0, 0.28 );
}
.aac-pf-price {
	display: block;
	margin: 0;
	font-weight: 700;
	color: #ffe08a;              /* amber on the dark band — 12:1 contrast */
}
.aac-pf-price del { opacity: 0.7; font-weight: 500; margin-inline-end: 0.4em; }
.aac-pf-price ins { text-decoration: none; }
.aac-pf-card .aac-scroller__text { display: block; }

@media ( prefers-reduced-motion: reduce ) {
	.aac-pf-card { transition: none; }
	.aac-pf-card:hover, .aac-pf-card:focus-within { transform: none; }
}
@media ( forced-colors: active ) {
	.aac-pf-badge { color: CanvasText; border: 1px solid CanvasText; box-shadow: none; }
	.aac-pf-overlay { background: Canvas; }
	.aac-pf-cardlink, .aac-pf-price { color: CanvasText; }
}

/* =======================================================================
 * Featured Products block (anacb/featured-products) — shared by the block
 * and the [ananyoo_featured_products] shortcode. These classes are harmless
 * when the block/shortcode is not on the page.
 * ===================================================================== */

/* Outer wrapper + optional section header. Neutral: inherits theme type. */
.aac-featured__head { margin: 0 0 1.1rem; }
.aac-featured__title { margin: 0 0 0.35rem; }
.aac-featured__intro { margin: 0; opacity: 0.85; line-height: 1.5; }

/* Editor placeholder shown by render.php when WooCommerce is inactive or no
   products are featured (only appears inside the block editor preview). */
.aac-pf-notice {
	padding: 1.25rem 1.5rem;
	border: 1px dashed #c3c4c7;
	border-radius: 10px;
	background: #f6f7f7;
	color: #1e1e1e;
	line-height: 1.5;
}

/* --- Scroller skins (card mode) ------------------------------------------
   "editorial" is the neutral base (image on top, bordered white card). */
.aac-scroller--products.aac-skin-soft .aac-scroller__card {
	border-color: transparent;
	border-radius: 16px;
	box-shadow: 0 6px 24px rgba( 14, 27, 54, 0.12 );
}
.aac-scroller--products.aac-skin-minimal .aac-scroller__card {
	border-color: transparent;
	border-radius: 6px;
	background: transparent;
}
.aac-scroller--products.aac-skin-minimal .aac-scroller__body {
	padding-inline: 0.25rem;
}

/* --- Featured products inside the HERO CAROUSEL --------------------------
   The slide box gets a solid navy background so the heading, description,
   price and link keep full contrast over ANY product image (WCAG 1.4.3). */
.aac-carousel--products .aac-slide__box {
	background-color: #0e1b36;
	color: #ffffff;
}
.aac-carousel--products .aac-slide__link {
	color: #ffffff;
}
/* The category badge sits in the box flow here (not absolutely placed). */
.aac-carousel--products .aac-slide__badge {
	position: static;
	display: inline-block;
	max-width: none;
	margin: 0 0 0.6rem;
	box-shadow: none;
}
/* Price inherits the box's white text instead of the card's navy. */
.aac-carousel--products .aac-slide__price {
	margin: 0.1rem 0 1rem;
	font-weight: 700;
	color: inherit;
}
.aac-carousel--products .aac-slide__price del { opacity: 0.7; font-weight: 500; margin-inline-end: 0.4em; }
.aac-carousel--products .aac-slide__price ins { text-decoration: none; }

@media ( forced-colors: active ) {
	.aac-carousel--products .aac-slide__badge { border: 1px solid CanvasText; }
}