/**
 * EFTPOS Black & Gold — Custom Design Effects
 * Card hover animations, nav styling, gold accents.
 * Values from client's Black and Gold (1).html design system.
 */

/* ── CSS Custom Properties (mirrors theme.json + extras) ── */
:root {
	--charcoal: #1B1918;
	--charcoal-mid: #2B2724;
	--gold: #C7A24C;
	--gold-deep: #9C7A2E;
	--gold-light: #F6EFDC;
	--green: #0D9F6E;
	--green-light: #E3F9F1;
	--text: #1B1918;
	--text-mid: #5C5650;
	--text-light: #8A8378;
	--border: #E7E0D2;
	--surface: #FAF7F0;
	--white: #FFFFFF;
	--radius: 12px;
}

/* ── GLOBAL RESETS ── */
a {
	color: inherit;
	text-decoration: none;
}

img {
	display: block;
	max-width: 100%;
}

/* ── HEADER OVERRIDES ── */
/* Ensure Twenty Twenty-Five header doesn't override our dark nav */
.site-header,
.wp-block-template-part > header,
body > header,
body > .wp-block-group:first-child {
	background: var(--charcoal) !important;
}

.site-header .wp-block-site-title a {
	color: #fff !important;
}

.site-header .wp-block-navigation .wp-block-navigation-item__content {
	color: rgba(255,255,255,0.7) !important;
}

.site-header .wp-block-navigation .wp-block-navigation-item__content:hover {
	color: #fff !important;
}

/* Hide default login/cart in header if not styled */
.site-header .wp-block-loginout,
.site-header .wc-block-mini-cart {
	display: none;
}

/* ── NAVIGATION (sticky dark bar) ── */
.wp-block-navigation {
	background: var(--charcoal);
}

.wp-block-navigation:not(.has-background) .wp-block-navigation__container {
	background: var(--charcoal);
}

/* Nav links — light text, gold on hover */
.wp-block-navigation .wp-block-navigation-item__content {
	color: rgba(255,255,255,0.7);
	transition: color 0.2s;
}

.wp-block-navigation .wp-block-navigation-item__content:hover {
	color: #fff;
}

/* ── PRIMARY BUTTONS (gold) ── */
.wp-block-button__link.has-gold-background-color,
.wp-block-button.is-style-fill .wp-block-button__link.has-gold-background-color {
	background: var(--gold);
	color: var(--charcoal);
	transition: background 0.2s, transform 0.15s;
}

.wp-block-button__link.has-gold-background-color:hover,
.wp-block-button.is-style-fill .wp-block-button__link.has-gold-background-color:hover {
	background: #D9B968;
	transform: translateY(-1px);
}

/* Ghost/outline buttons */
.wp-block-button.is-style-outline .wp-block-button__link {
	border: 1px solid rgba(255,255,255,0.2);
	color: rgba(255,255,255,0.85);
	transition: border-color 0.2s, background 0.2s;
}

.wp-block-button.is-style-outline .wp-block-button__link:hover {
	border-color: rgba(255,255,255,0.5);
	background: rgba(255,255,255,0.05);
}

/* ── TRUST DOTS ── */
.trust-dot {
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--green);
	flex-shrink: 0;
	display: inline-block;
}

/* ── PRODUCT CARDS ── */
.product-card {
	background: var(--white);
	border: 1px solid var(--border);
	border-radius: var(--radius);
	padding: 28px;
	transition: border-color 0.2s, transform 0.2s, box-shadow 0.2s;
	position: relative;
	overflow: hidden;
}

.product-card:hover {
	border-color: var(--gold);
	transform: translateY(-3px);
	box-shadow: 0 12px 40px rgba(199,162,76,0.18);
}

/* Gold top-border slide-in on hover */
.product-card::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 3px;
	background: var(--gold);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform 0.25s;
}

.product-card:hover::before {
	transform: scaleX(1);
}

/* ── RENTAL CARDS (dark) ── */
.rental-card {
	background: var(--charcoal);
	border-radius: var(--radius);
	padding: 36px;
	color: #fff;
	position: relative;
	overflow: hidden;
}

/* Decorative circle in corner */
.rental-card::after {
	content: '';
	position: absolute;
	bottom: -40px;
	right: -40px;
	width: 160px;
	height: 160px;
	border-radius: 50%;
	background: rgba(255,255,255,0.03);
}

/* ── HERO CARD STACK ── */
.hero-card-stack {
	position: relative;
	width: 300px;
	height: 340px;
}

.hcard {
	position: absolute;
	background: rgba(255,255,255,0.05);
	border: 1px solid rgba(255,255,255,0.12);
	border-radius: 18px;
	padding: 24px;
	width: 260px;
	backdrop-filter: blur(4px);
}

.hcard-back {
	top: 30px;
	left: 30px;
	opacity: 0.45;
	transform: rotate(6deg);
}

.hcard-mid {
	top: 15px;
	left: 15px;
	opacity: 0.7;
	transform: rotate(3deg);
}

.hcard-front {
	top: 0;
	left: 0;
	background: rgba(255,255,255,0.08);
	border-color: rgba(255,255,255,0.2);
}

/* ── SECTION LABELS ── */
.section-label {
	font-size: 0.72rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.12em;
	color: var(--gold-deep);
	margin-bottom: 10px;
}

/* ── TRUST BAR ── */
.trust-bar {
	background: var(--charcoal-mid);
}

.trust-stat-num {
	font-family: 'Bricolage Grotesque', sans-serif;
	font-size: 1.4rem;
	font-weight: 800;
	color: #fff;
	line-height: 1;
}

.trust-stat-label {
	font-size: 0.75rem;
	color: rgba(255,255,255,0.45);
	margin-top: 3px;
}

/* ── PILL / BADGE ── */
.pill-gold {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	background: rgba(199,162,76,0.16);
	border: 1px solid rgba(199,162,76,0.4);
	color: var(--gold);
	font-size: 0.75rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	padding: 5px 12px;
	border-radius: 100px;
}

.pill-green {
	display: inline-block;
	background: rgba(13,159,110,0.25);
	border: 1px solid rgba(13,159,110,0.4);
	color: #4ECCA3;
	font-size: 0.7rem;
	font-weight: 600;
	padding: 3px 10px;
	border-radius: 100px;
}

/* ── DIVIDER ── */
.divider-vertical {
	width: 1px;
	height: 36px;
	background: rgba(255,255,255,0.1);
}

/* ── DARK SECTIONS ── */
.has-charcoal-background-color {
	color: #fff;
}

.has-charcoal-background-color h1,
.has-charcoal-background-color h2,
.has-charcoal-background-color h3,
.has-charcoal-background-color h4 {
	color: #fff;
}

.has-charcoal-background-color .has-text-mid-color {
	color: var(--text-light);
}

/* ── SURFACE SECTIONS ── */
.has-surface-background-color {
	background: var(--surface);
}

/* ── FOOTER ── */
.site-footer {
	background: var(--charcoal);
	color: rgba(255,255,255,0.55);
}

.site-footer a {
	color: rgba(255,255,255,0.55);
	transition: color 0.2s;
}

.site-footer a:hover {
	color: #fff;
}

.site-footer .wp-block-heading {
	color: rgba(255,255,255,0.3);
	font-size: 0.75rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.1em;
}

/* ── RESPONSIVE ── */
@media (max-width: 900px) {
	.hero-card-stack {
		display: none;
	}

	.rental-card {
		padding: 28px;
	}
}

@media (max-width: 640px) {
	.wp-block-navigation__container {
		gap: 8px;
	}
}