/**
 * 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 cover fills the whole
   card; the title (a card-link) and price sit over a near-opaque dark band at
   the bottom. The band is dark enough that white text keeps >= 15:1 contrast
   even over a pure-white patch of cover art (WCAG 1.4.3, verified). The whole
   card is clickable via a stretched ::after on the title link, but only the
   title text is the link — so assistive tech announces a clean product name. --- */
/* The cover image (.aac-pf-media) is absolutely positioned to fill the card,
   so it is OUT of flow and gives the card no height. Without an explicit
   ratio the card would collapse to ~0px and the whole section would look
   empty. A 3:4 portrait ratio suits book / magazine covers and keeps every
   card the same height; object-position:center-top (below) shows the
   masthead and crops any excess from the bottom. */
.aac-pf-card { position: relative; overflow: hidden; cursor: pointer; aspect-ratio: 3 / 4; }
.aac-pf-card .aac-pf-media { position: absolute; inset: 0; display: block; margin: 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-card:hover, .aac-pf-card:focus-within { transform: translateY( -4px ); }
.aac-pf-card { transition: transform 0.15s ease, box-shadow 0.15s ease; }
.aac-pf-card:hover, .aac-pf-card:focus-within { box-shadow: 0 12px 28px rgba( 0, 0, 0, 0.22 ); }

.aac-pf-overlay {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	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 as the card link — permanently underlined so it clearly reads as a link. */
.aac-pf-card .aac-scroller__heading { margin: 0 0 0.2rem; font-size: 1rem; line-height: 1.25; }
.aac-pf-cardlink {
	color: #fff;
	font-weight: 700;
	text-decoration: underline;
	text-underline-offset: 3px;
	text-decoration-thickness: 1px;
	display: block;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.aac-pf-cardlink::after { content: ""; position: absolute; inset: 0; z-index: 2; } /* stretch over the whole card */
.aac-pf-card:hover .aac-pf-cardlink { color: #ffe08a; }
.aac-pf-cardlink:focus-visible { outline: 3px solid #ffe08a; outline-offset: 3px; border-radius: 3px; }

.aac-pf-badge {
	position: absolute;
	top: 12px;                   /* moved to the TOP so it sits over the cover, clear of the band */
	left: 12px;
	z-index: 3;
	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 {
	position: relative;
	z-index: 3;                  /* above the stretched card-link so the price isn't part of the link */
	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; }

@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; }
}