/**
 * D'Pearl – Additional/Modular CSS
 * Supplements style.css with component-specific overrides and utilities.
 *
 * @package dpearl
 */

/* ============================================================
   ACCENT BAR COLOURS (used in both archive & single product)
   ============================================================ */
.accent-bar.rainbow {
	background: linear-gradient(90deg, #e74c3c, #f39c12, #f1c40f, #2ecc71, #3498db, #9b59b6);
}

.accent-bar.ocean {
	background: #1a9e8f;
}

.accent-bar.lime {
	background: #5a8a2e;
}

.accent-bar.earth {
	background: #7b2d8b;
}

.accent-bar.fire {
	background: linear-gradient(90deg, #c0392b, #e67e22);
}

/* ============================================================
   PRODUCT ACCENT BAR ON SINGLE PAGE
   ============================================================ */
.product-accent-bar {
	height: 5px;
	margin-top: 8px;
}

/* ============================================================
   SCROLL INDICATOR ON HERO
   ============================================================ */
.scroll-cue {
	display: inline-flex;
	flex-direction: column;
	align-items: center;
	gap: 6px;
	margin-top: 48px;
	color: rgba(255, 250, 240, 0.36);
	font-family: Arial, Helvetica, sans-serif;
	font-size: 0.62rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	cursor: default;
}

.scroll-cue::after {
	content: '';
	display: block;
	width: 1px;
	height: 36px;
	background: linear-gradient(to bottom, rgba(199, 164, 92, 0.6), transparent);
	animation: scrollLine 1.8s ease-in-out infinite;
}

@keyframes scrollLine {
	0%   { transform: scaleY(0); transform-origin: top; }
	50%  { transform: scaleY(1); transform-origin: top; }
	51%  { transform: scaleY(1); transform-origin: bottom; }
	100% { transform: scaleY(0); transform-origin: bottom; }
}

/* ============================================================
   PAGE TRANSITION (fade-in on load)
   ============================================================ */
@keyframes fadeIn {
	from { opacity: 0; transform: translateY(8px); }
	to   { opacity: 1; transform: translateY(0); }
}

.site-shell {
	animation: fadeIn 0.5s ease both;
}

/* ============================================================
   WOOCOMMERCE BREADCRUMB OVERRIDE
   ============================================================ */
.woocommerce-breadcrumb {
	color: rgba(255, 250, 240, 0.42);
	font-family: Arial, Helvetica, sans-serif;
	font-size: 0.78rem;
	letter-spacing: 0.04em;
	margin-bottom: 20px;
}

.woocommerce-breadcrumb a {
	color: var(--gold);
	transition: opacity 180ms ease;
}

.woocommerce-breadcrumb a:hover {
	opacity: 0.8;
}

/* ============================================================
   WOOCOMMERCE RESULT COUNT
   ============================================================ */
.woocommerce-result-count {
	color: rgba(255, 250, 240, 0.42);
	font-family: Arial, Helvetica, sans-serif;
	font-size: 0.8rem;
	margin-bottom: 20px;
}

/* ============================================================
   PAGINATION
   ============================================================ */
.woocommerce-pagination,
.pagination {
	display: flex;
	justify-content: center;
	gap: 8px;
	margin-top: 48px;
}

.woocommerce-pagination ul,
.page-numbers {
	display: flex;
	gap: 6px;
	list-style: none;
	padding: 0;
	margin: 0;
}

.woocommerce-pagination ul li a,
.woocommerce-pagination ul li span,
.page-numbers a,
.page-numbers span {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 36px;
	height: 36px;
	padding: 0 10px;
	border: 1px solid rgba(199, 164, 92, 0.22);
	color: rgba(255, 250, 240, 0.7);
	font-family: Arial, Helvetica, sans-serif;
	font-size: 0.82rem;
	transition: border-color 180ms ease, color 180ms ease;
}

.woocommerce-pagination ul li a:hover,
.page-numbers a:hover {
	border-color: rgba(199, 164, 92, 0.6);
	color: var(--gold);
}

.woocommerce-pagination ul li .current,
.page-numbers .current {
	border-color: var(--gold);
	color: var(--gold);
	background: rgba(199, 164, 92, 0.08);
}

/* ============================================================
   HEADER SCROLL SHADOW
   ============================================================ */
.site-header.scrolled {
	box-shadow: 0 4px 30px rgba(0, 0, 0, 0.4);
}

/* ============================================================
   FOCUS STYLES (accessibility)
   ============================================================ */
:focus-visible {
	outline: 2px solid var(--gold);
	outline-offset: 3px;
}

/* ============================================================
   SKIP LINK
   ============================================================ */
.skip-link {
	position: absolute;
	top: -100px;
	left: 20px;
	z-index: 999;
	padding: 8px 16px;
	background: var(--gold);
	color: var(--ink);
	font-family: Arial, Helvetica, sans-serif;
	font-size: 0.82rem;
	font-weight: 700;
	transition: top 0.2s ease;
}

.skip-link:focus {
	top: 20px;
}

/* ============================================================
   LOADING SPINNER (modal submit state)
   ============================================================ */
.btn-spinner {
	display: inline-block;
	width: 14px;
	height: 14px;
	border: 2px solid rgba(16, 19, 18, 0.3);
	border-top-color: var(--ink);
	border-radius: 50%;
	animation: spin 0.6s linear infinite;
	vertical-align: middle;
	margin-right: 8px;
}

@keyframes spin {
	to { transform: rotate(360deg); }
}

/* ============================================================
   RESPONSIVE UTILITY
   ============================================================ */
@media (max-width: 600px) {
	.hide-mobile { display: none !important; }
}

@media (min-width: 601px) {
	.show-mobile-only { display: none !important; }
}