/* =============================================================================
   FILE: components.css
   WHAT: Reusable, named UI components used across the whole site: buttons,
         post/product cards, tag pills, the FAQ accordion, pagination links,
         breadcrumbs, and the scroll-snap carousel.
   WHY: Each component here is a self-contained "block" you can drop into
         any template (see template-parts/) by just adding its class name.
         Unlike base.css (bare tags) or layout.css (page structure), every
         selector in this file is a custom class like ".btn" or ".card".
   LOAD ORDER: fifth, after layout.css (see inc/enqueue.php).
   ============================================================================= */

/* -----------------------------------------------------------------------
   BUTTONS
   .btn is the base look (shape/spacing/font); .btn--primary is solid blue
   (main calls-to-action, e.g. "Add to cart", "Place order"); .btn--outline
   is a lower-emphasis secondary action (e.g. "Read more").
   ----------------------------------------------------------------------- */
.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--space-2);
	padding: var(--space-3) var(--space-6);
	border-radius: var(--radius-sm);
	font-weight: 600;
	text-decoration: none;
	cursor: pointer;
	border: 2px solid transparent;
	transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;

	/* Buttons need a minimum tap-target size for comfortable use on a
	   touchscreen -- 44x44px is the widely-cited minimum from mobile
	   accessibility guidelines (Apple/WCAG), so we guarantee it here
	   rather than leaving button size purely up to its text content. */
	min-height: 44px;
}

.btn--primary {
	background-color: var(--color-blue-600);
	color: var(--color-white);
}
.btn--primary:hover,
.btn--primary:focus-visible {
	background-color: var(--color-blue-700);
	color: var(--color-white);
	text-decoration: none;
}

.btn--outline {
	background-color: transparent;
	border-color: var(--color-blue-600);
	color: var(--color-blue-600);
}
.btn--outline:hover,
.btn--outline:focus-visible {
	background-color: var(--color-blue-100);
	text-decoration: none;
}

.btn--block {
	display: flex;
	width: 100%; /* full-width button, used for the checkout "Place order" button on mobile */
}

/* -----------------------------------------------------------------------
   CARDS
   Used for both blog post cards (template-parts/post/card.php) and, with
   the SAME class, WooCommerce product cards (woocommerce/content-product.php)
   -- reusing one card style keeps posts and products visually consistent.
   ----------------------------------------------------------------------- */
.card {
	display: flex;
	flex-direction: column;
	background-color: var(--color-white);
	border: 1px solid var(--color-gray-200);
	border-radius: var(--radius-md);
	overflow: hidden; /* clips the card's thumbnail image to the rounded corners */
	box-shadow: var(--shadow-card);
	height: 100%; /* so every card in a grid row matches the tallest card's height */
}

.card__thumb {
	aspect-ratio: 3 / 2; /* reserves the exact image box size BEFORE the image
	                        has finished loading, so the rest of the page
	                        doesn't visually "jump" once it loads in --
	                        this is the #1 cause of layout shift (CLS) on
	                        image-heavy pages, and aspect-ratio fixes it
	                        with zero JavaScript needed. */
	width: 100%;
	object-fit: cover; /* crops the image to fill the box neatly instead of stretching it */
}

.card__body {
	padding: var(--space-4);
	display: flex;
	flex-direction: column;
	gap: var(--space-2);
	flex: 1; /* fills remaining card height so the "read more" link/price sits
	            at the bottom of every card, even when excerpt lengths differ */
}

.card__title {
	font-size: var(--text-h4);
	margin-bottom: 0;
}
.card__title a {
	color: inherit;
	text-decoration: none;
}
.card__title a:hover {
	color: var(--color-blue-600);
}

.card__excerpt {
	color: var(--color-gray-600);
	margin-bottom: 0;
	flex: 1;
}

/* Price line on the homepage showcase's Dog4AI card (see
   template-parts/home/section-showcase.php) -- echoes WooCommerce's own
   get_price_html(), which already includes the currency symbol and any
   sale-price strikethrough markup, so this rule only needs to handle
   the container's own weight/color, not rebuild WooCommerce's price
   markup from scratch. */
.showcase-price {
	font-weight: 700;
	color: var(--color-blue-600);
	margin-bottom: 0;
}

/* -----------------------------------------------------------------------
   POST META / TAG PILLS
   This is exactly where the 12px caption font size is meant to be used --
   dates, reading time, category/topic names, and tag pills are all "meta"
   information, not body copy.
   ----------------------------------------------------------------------- */
.post-meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space-3);
	font-size: var(--text-caption); /* 12px -- meta text, per project rule */
	color: var(--color-gray-600);
}

.post-meta__separator {
	color: var(--color-gray-200);
}

.tag-list {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-2);
	list-style: none;
	padding: 0;
}

.tag-pill {
	display: inline-block;
	padding: var(--space-1) var(--space-3);
	background-color: var(--color-blue-100);
	color: var(--color-blue-700);
	border-radius: 999px; /* fully rounded "pill" shape */
	font-size: var(--text-caption); /* 12px -- tags are meta/label text */
	text-decoration: none;
	font-weight: 600;
}
.tag-pill:hover {
	background-color: var(--color-blue-600);
	color: var(--color-white);
}

/* -----------------------------------------------------------------------
   SHARE LINKS
   ----------------------------------------------------------------------- */
.share-links {
	display: flex;
	gap: var(--space-2);
	list-style: none;
	padding: 0;
}

.share-links a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background-color: var(--color-gray-50);
	border: 1px solid var(--color-gray-200);
}
.share-links a:hover {
	background-color: var(--color-blue-100);
}
.share-links svg {
	width: 18px;
	height: 18px;
}

/* -----------------------------------------------------------------------
   ACCORDION (built on native <details>/<summary> -- see single templates
   and the FAQ section; only needs assets/js/accordion.js for the "close
   other open items" polish, everything else works with ZERO JavaScript)
   ----------------------------------------------------------------------- */
.accordion-item {
	border-bottom: 1px solid var(--color-gray-200);
}

.accordion-item summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: var(--space-4) 0;
	font-weight: 600;
}

/* A plus/chevron icon drawn with pure CSS (no image file needed) using a
   ::after pseudo-element that we rotate when the <details> is open. */
.accordion-item summary::after {
	content: "+";
	font-size: 1.5rem;
	line-height: 1;
	transition: transform 0.2s ease;
	flex-shrink: 0;
	margin-left: var(--space-4);
}

.accordion-item[open] summary::after {
	transform: rotate(45deg); /* a "+" rotated 45 degrees becomes an "x", a
	                              common visual convention for "click to close" */
}

.accordion-item__content {
	padding-bottom: var(--space-4);
	color: var(--color-gray-600);
}

/* -----------------------------------------------------------------------
   PAGINATION
   ----------------------------------------------------------------------- */
.pagination {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-2);
	justify-content: center;
	margin-block: var(--space-8);
	list-style: none;
	padding: 0;
}

.pagination a,
.pagination span {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 40px;
	height: 40px;
	padding-inline: var(--space-2);
	border: 1px solid var(--color-gray-200);
	border-radius: var(--radius-sm);
	text-decoration: none;
	color: var(--color-black);
}

.pagination a:hover {
	background-color: var(--color-blue-100);
}

.pagination .current {
	background-color: var(--color-blue-600);
	border-color: var(--color-blue-600);
	color: var(--color-white);
}

/* -----------------------------------------------------------------------
   BREADCRUMBS + PAGE-HEADER BANNER
   Used by template-parts/content/page-header.php -- the shared title +
   breadcrumb banner shown at the top of BOTH blog pages (archive.php,
   search.php, 404.php) AND WooCommerce's shop/product archive pages
   (woocommerce/archive-product.php, woocommerce/single-product.php).
   Lives here in components.css (loaded on EVERY page) rather than in
   blog.css or shop.css specifically, since either one of those loading
   without the other would leave this banner unstyled on half its actual
   use cases -- see inc/enqueue.php's conditional loading logic.
   ----------------------------------------------------------------------- */
.breadcrumbs {
	font-size: var(--text-caption); /* 12px -- navigational meta text */
	color: var(--color-gray-600);
	margin-bottom: var(--space-4);
}

.breadcrumbs a {
	color: var(--color-gray-600);
}

.breadcrumbs__sep {
	margin: 0 var(--space-1);
}

.archive-header {
	padding-block: var(--space-8);
	text-align: center;
}

.archive-header__description {
	color: var(--color-gray-600);
	max-width: 60ch;
	margin-inline: auto;
}

/* Spacing above the "Back to Homepage" link on the 404 page. */
.not-found-back-link {
	margin-top: var(--space-6);
}

/* -----------------------------------------------------------------------
   CAROUSEL (CSS scroll-snap -- a fully native browser carousel with ZERO
   JavaScript required for the core swipe/scroll behavior; assets/js/
   carousel-controls.js only adds optional prev/next BUTTONS on top)
   ----------------------------------------------------------------------- */
.carousel {
	display: flex;
	gap: var(--space-4);
	overflow-x: auto; /* lets the row scroll sideways */
	scroll-snap-type: x mandatory; /* forces the browser to "snap" to the start
	                                   of each slide as the user scrolls/swipes,
	                                   which is what makes this feel like a
	                                   carousel instead of a plain scrolling row */
	padding-block: var(--space-2);
	scrollbar-width: none; /* hide the scrollbar in Firefox... */
}
.carousel::-webkit-scrollbar {
	display: none; /* ...and in Chrome/Safari, since the snap+swipe interaction
	                   is discoverable without a visible scrollbar, and hiding
	                   it looks more like a "real" carousel widget */
}

.carousel__item {
	flex: 0 0 auto;
	width: min(85vw, 320px); /* one slide is nearly the full phone width, but
	                            caps at 320px so it doesn't get absurdly wide
	                            on a tablet turned sideways */
	scroll-snap-align: start; /* each item is a valid "snap point" */
}

.carousel-controls {
	display: none; /* prev/next buttons are hidden on touchscreens, where
	                   swiping is the natural interaction and buttons would
	                   just take up space */
	gap: var(--space-2);
	justify-content: flex-end;
	margin-bottom: var(--space-2);
}

@media (min-width: 1024px) {
	.carousel-controls {
		display: flex; /* shown on non-touch/desktop-sized screens, where
		                   there's a mouse pointer but no swipe gesture */
	}
}

/* -----------------------------------------------------------------------
   SCROLL-REVEAL (paired with assets/js/scroll-reveal.js)
   Elements marked with [data-reveal] start slightly faded/lowered, then
   animate to their normal state once they scroll into view. If JS fails
   to load, the .is-visible class never gets added -- see scroll-reveal.js
   for the fallback that prevents content from being permanently hidden
   in that case.
   ----------------------------------------------------------------------- */
[data-reveal] {
	opacity: 0;
	transform: translateY(16px);
	transition: opacity 0.5s ease, transform 0.5s ease;
}

[data-reveal].is-visible {
	opacity: 1;
	transform: translateY(0);
}

/* -----------------------------------------------------------------------
   HOMEPAGE SECTIONS (the real ISL3 page content, the Dog4AI/Ebook/Shop
   showcase, and the bottom call-to-action band -- see front-page.php and
   template-parts/home/section-*.php)
   ----------------------------------------------------------------------- */

/* The wrapper around the site's actual front-page content (see
   front-page.php's Loop) -- just outer spacing. The content itself
   (charts, the architecture-stack explorer, etc.) brings its own inline
   styling namespaced under its own class, so this rule deliberately
   stays minimal rather than trying to restyle content that already
   styles itself. */
.isl3-content {
	padding-block: var(--space-8);
}

/* A small utility class for an 18px "lead" paragraph, used under the
   hero headline -- see --text-body-lg in tokens.css. */
.text-body-lg {
	font-size: var(--text-body-lg);
	color: var(--color-gray-600);
}

.hero {
	text-align: center;
	padding-block: var(--space-16);
}

.hero__content {
	max-width: 60ch;
	margin-inline: auto;
}

.hero__actions {
	display: flex;
	flex-direction: column;
	gap: var(--space-3);
	justify-content: center;
	margin-top: var(--space-6);
}

@media (min-width: 480px) {
	.hero__actions {
		flex-direction: row; /* side-by-side buttons once there's enough width for two without wrapping awkwardly */
	}
}

/* A reusable "section title on the left, 'view all' link on the right"
   heading row, used above the latest-posts and featured-products grids. */
.section-heading {
	display: flex;
	flex-direction: column;
	gap: var(--space-3);
	align-items: flex-start;
	margin-bottom: var(--space-8);
}

@media (min-width: 768px) {
	.section-heading {
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
	}
}

.section-heading h2 {
	margin-bottom: 0;
}

/* The 3 "why this site" highlight cards reuse the base .card look, with
   center-aligned text since they hold no image, just a title + sentence. */
.highlight-card .card__body {
	text-align: center;
}

/* Bottom-of-page call-to-action band: solid blue background so it visually
   stands apart from the plain white sections above it. */
.cta-band {
	background-color: var(--color-blue-600);
	color: var(--color-white);
	text-align: center;
}

.cta-band__inner {
	max-width: 50ch;
	margin-inline: auto;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--space-6);
}

.cta-band__title {
	color: var(--color-white);
	margin-bottom: 0;
}

/* The primary button needs a different look against a blue background
   than it does on a white one, or it would disappear -- swap it to a
   white button with blue text specifically inside the CTA band. */
.cta-band .btn--primary {
	background-color: var(--color-white);
	color: var(--color-blue-600);
}
.cta-band .btn--primary:hover,
.cta-band .btn--primary:focus-visible {
	background-color: var(--color-blue-100);
	color: var(--color-blue-700);
}

/* -----------------------------------------------------------------------
   SEARCH FORM (searchform.php)
   ----------------------------------------------------------------------- */
.search-form {
	display: flex;
	gap: var(--space-2);
}

.search-field {
	flex: 1;
}

/* WordPress core's standard "visually hidden but still read by screen
   readers" utility class. Used on the search form's <label> -- sighted
   users understand the placeholder text is a search box, but a screen
   reader user still needs a real, explicit label read aloud, since
   placeholder text is not a reliable substitute for a <label> (it
   disappears the moment text is typed, and isn't announced consistently
   across all screen readers). */
.screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px);
	white-space: nowrap;
}

/* -----------------------------------------------------------------------
   MINI-CART (HEADER FLYOUT)
   The mini-cart is part of the site-wide header (see header.php), shown
   on EVERY page whenever WooCommerce is active -- not just on shop pages
   -- which is why its CSS lives here in components.css (loaded on every
   page) rather than in shop.css (which only loads on WooCommerce's own
   shop/product/cart/checkout/account pages, see inc/enqueue.php). If it
   lived in shop.css, the panel would render completely unstyled on, say,
   a blog post page. Uses the SAME slide-in-panel technique as the mobile
   nav (.primary-nav in layout.css) -- toggled by assets/js/nav-toggle.js.
   ----------------------------------------------------------------------- */
.mini-cart {
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	width: min(85vw, 360px);
	background-color: var(--color-white);
	box-shadow: -2px 0 12px rgba(0, 0, 0, 0.15);
	padding: var(--space-6) var(--space-4);
	overflow-y: auto;
	z-index: 100;
	transform: translateX(100%);
	transition: transform 0.25s ease;
}

.mini-cart-is-open .mini-cart {
	transform: translateX(0);
}

.mini-cart-close {
	background: none;
	border: none;
	cursor: pointer;
	float: right;
}

/* Dims the rest of the page behind the open mini-cart, same technique as
   .nav-overlay in layout.css. */
.mini-cart-overlay {
	position: fixed;
	inset: 0;
	background-color: rgba(0, 0, 0, 0.4);
	z-index: 90;
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.25s ease;
}

.mini-cart-is-open .mini-cart-overlay {
	opacity: 1;
	pointer-events: auto;
}

.mini-cart__item {
	display: flex;
	gap: var(--space-3);
	padding-block: var(--space-3);
	border-bottom: 1px solid var(--color-gray-200);
}

.mini-cart__item img {
	width: 56px;
	height: 56px;
	object-fit: cover;
	border-radius: var(--radius-sm);
}

.mini-cart__item .remove {
	float: right;
	text-decoration: none;
	color: var(--color-gray-600);
	font-size: 1.25rem;
	line-height: 1;
}

.woocommerce-mini-cart {
	list-style: none;
	padding: 0;
}

.woocommerce-mini-cart__total {
	font-weight: 700;
	font-size: var(--text-h4);
	padding-top: var(--space-4);
	border-top: 1px solid var(--color-gray-200);
}

.woocommerce-mini-cart__buttons {
	display: flex;
	flex-direction: column;
	gap: var(--space-2);
}

/* -----------------------------------------------------------------------
   ALERTS / NOTICES (used by WooCommerce's own success/error message
   markup, and comment form validation errors)
   ----------------------------------------------------------------------- */
.alert {
	padding: var(--space-4);
	border-radius: var(--radius-sm);
	margin-bottom: var(--space-4);
	border: 1px solid transparent;
}

.alert--success {
	background-color: #eafaf0;
	border-color: var(--color-success);
	color: var(--color-success);
}

.alert--error {
	background-color: #fdecef;
	border-color: var(--color-error);
	color: var(--color-error);
}