/*
 * @file    ubuveil/theme-dark.css
 * @package Ubuveil
 *
 * Dark mode tokens, floating theme toggle, and brand gold accents.
 */

/*--------------------------------------------------------------
# Dark mode tokens
--------------------------------------------------------------*/
:root[data-ubv-theme="dark"]{
	--ubv-ink:#EDF1F6;
	--ubv-ink-soft:#B8C0CC;
	--ubv-ink-faint:#8A93A0;
	--ubv-ink-heading:#EDF1F6;
	--ubv-paper:#0B0F14;
	--ubv-paper-deep:#161C24;
	--ubv-white:#151B23;
	--ubv-line:rgba(255,255,255,0.10);
	--ubv-accent:#4D9EFF;
	--ubv-accent-deep:#9FCBFF;
	--ubv-glass-bg:rgba(30,38,50,0.60);
	--ubv-glass-bg-strong:rgba(30,38,50,0.85);
	--ubv-glass-border:rgba(255,255,255,0.14);
	--ubv-glass-hairline:rgba(255,255,255,0.12);
	--ubv-glass-shadow:0 20px 50px -14px rgba(0,0,0,0.55), 0 2px 10px rgba(0,0,0,0.35);
	color-scheme: dark;
}

:root[data-ubv-theme="dark"] .ubuveil-body h1,
:root[data-ubv-theme="dark"] .ubuveil-body h2,
:root[data-ubv-theme="dark"] .ubuveil-body h3,
:root[data-ubv-theme="dark"] .ubuveil-body h4,
:root[data-ubv-theme="dark"] .ubuveil-body h5,
:root[data-ubv-theme="dark"] .ubuveil-body h6,
:root[data-ubv-theme="dark"] h1,
:root[data-ubv-theme="dark"] h2,
:root[data-ubv-theme="dark"] h3,
:root[data-ubv-theme="dark"] h4,
:root[data-ubv-theme="dark"] h5,
:root[data-ubv-theme="dark"] h6{
	color: var(--ubv-ink-heading, var(--ubv-ink));
}

:root[data-ubv-theme="dark"] body,
:root[data-ubv-theme="dark"] .ubuveil-body{
	color: var(--ubv-ink);
}

:root[data-ubv-theme="dark"] a{ color: var(--ubv-accent); }
:root[data-ubv-theme="dark"] a:hover,
:root[data-ubv-theme="dark"] a:focus{ color: var(--ubv-accent-deep); }

:root[data-ubv-theme="dark"] .site-header{
	background: rgba(11,15,20,0.85);
}

:root[data-ubv-theme="dark"] .icon-btn,
:root[data-ubv-theme="dark"] .header-search-form,
:root[data-ubv-theme="dark"] .menu-toggle{
	background: rgba(255,255,255,0.06);
	border-color: rgba(255,255,255,0.12);
	color: var(--ubv-ink);
}

:root[data-ubv-theme="dark"] .main-navigation ul{
	background: rgba(255,255,255,0.05);
	border-color: rgba(255,255,255,0.10);
}
:root[data-ubv-theme="dark"] .main-navigation a{
	color: var(--ubv-ink-soft);
}
:root[data-ubv-theme="dark"] .main-navigation a:hover,
:root[data-ubv-theme="dark"] .main-navigation .current-menu-item > a{
	background: rgba(255,255,255,0.10);
	color: #fff;
	box-shadow: none;
}

:root[data-ubv-theme="dark"] .ubv-card{
	background: rgba(30,38,50,0.75);
	border-color: rgba(255,255,255,0.12);
	box-shadow: 0 8px 24px -8px rgba(0,0,0,0.45), inset 0 1px 0 rgba(255,255,255,0.08);
}
:root[data-ubv-theme="dark"] .ubv-card:hover{
	background: rgba(30,38,50,0.95);
	border-color: rgba(30,127,224,0.5);
}

:root[data-ubv-theme="dark"] .ubv-eyebrow{
	background: rgba(77,158,255,0.16);
	border-color: rgba(77,158,255,0.4);
	color: #9FCBFF;
	box-shadow: 0 2px 10px rgba(77,158,255,0.15);
}
:root[data-ubv-theme="dark"] .ubv-eyebrow strong{
	color: #9FCBFF;
}

:root[data-ubv-theme="dark"] .ubv-hero::before{
	background:
		radial-gradient(circle at 15% 20%, rgba(77,158,255,0.28), transparent 55%),
		radial-gradient(circle at 85% 10%, rgba(199,154,62,0.18), transparent 50%);
}

:root[data-ubv-theme="dark"] .ubv-trust-strip{
	border-color: rgba(255,255,255,0.10);
}
:root[data-ubv-theme="dark"] .ubv-trust-list li{
	color: var(--ubv-ink-soft);
}

:root[data-ubv-theme="dark"] .ubv-tier-card li{
	color: var(--ubv-ink-soft);
}
:root[data-ubv-theme="dark"] .ubv-tier-price{
	color: var(--ubv-ink);
}

:root[data-ubv-theme="dark"] .ubv-timeline-step{
	border-left-color: rgba(255,255,255,0.10);
}

:root[data-ubv-theme="dark"] .ubv-map-caption{
	background: repeating-linear-gradient(
		45deg,
		rgba(255,255,255,0.04),
		rgba(255,255,255,0.04) 10px,
		rgba(255,255,255,0.02) 10px,
		rgba(255,255,255,0.02) 20px
	);
	border-color: rgba(255,255,255,0.10);
	color: var(--ubv-ink-faint);
}

:root[data-ubv-theme="dark"] .ubv-cta-banner{
	background:
		radial-gradient(circle at 20% 20%, rgba(255,255,255,0.10), transparent 50%),
		linear-gradient(120deg, #0D1B2E, #1E5C99);
}

:root[data-ubv-theme="dark"] article{
	background: var(--ubv-white);
	border-color: var(--ubv-line);
}

:root[data-ubv-theme="dark"] .wp-block-button.is-style-outline .wp-block-button__link{
	background: transparent !important;
	border: 2px solid rgba(255,255,255,0.55);
	color: #fff !important;
}
:root[data-ubv-theme="dark"] .wp-block-button.is-style-outline .wp-block-button__link:hover{
	background: rgba(255,255,255,0.12) !important;
	border-color: #fff;
}

/*--------------------------------------------------------------
# Cart badge
--------------------------------------------------------------*/
.icon-btn{
	position: relative;
	overflow: visible;
}
.cart-badge{
	position: absolute;
	top: -6px;
	right: -6px;
	background: var(--ubv-gold);
	color: #0B0F14;
	font-size: 10.5px;
	font-weight: 800;
	min-width: 18px;
	height: 18px;
	border-radius: 999px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0 5px;
	line-height: 1;
	box-shadow: 0 0 0 2px var(--ubv-paper);
	pointer-events: none;
}
.cart-badge.is-empty{
	display: none;
}

/*--------------------------------------------------------------
# Floating theme toggle
--------------------------------------------------------------*/
.ubv-theme-toggle{
	position: fixed;
	left: 14px;
	top: 50%;
	transform: translateY(-50%);
	z-index: 80;
	display: flex;
	flex-direction: column;
	gap: 4px;
	background: var(--ubv-glass-bg-strong);
	border: 1px solid var(--ubv-glass-hairline);
	border-radius: var(--ubv-radius-pill);
	padding: 6px;
	backdrop-filter: blur(12px) saturate(160%);
	-webkit-backdrop-filter: blur(12px) saturate(160%);
	box-shadow: var(--ubv-glass-shadow);
}
.ubv-theme-btn{
	width: 34px;
	height: 34px;
	border-radius: 50%;
	border: none;
	background: transparent;
	color: var(--ubv-ink-soft);
	padding: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	transition: background-color .15s ease, color .15s ease;
}
.ubv-theme-btn:hover{
	color: var(--ubv-ink);
	background: rgba(30,127,224,0.12);
}
.ubv-theme-btn.is-active{
	background: var(--ubv-accent);
	color: #fff;
}
@media (max-width: 640px){
	.ubv-theme-toggle{ left: 8px; padding: 4px; }
	.ubv-theme-btn{ width: 28px; height: 28px; }
	.ubv-theme-btn svg{ width: 14px; height: 14px; }
}

/*--------------------------------------------------------------
# Header polish
--------------------------------------------------------------*/
.header-search{
	flex: 0 1 320px;
	min-width: 200px;
	max-width: 320px;
	margin-left: auto;
}
.header-search-form{
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
}
.header-search-icon{
	flex-shrink: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 15px;
	height: 15px;
	color: var(--ubv-ink-faint);
}
.header-search-form input[type="search"]{
	flex: 1 1 auto;
	min-width: 0;
}

@media (max-width: 1080px){
	.header-search{ display: none; }
	.header-inner{ flex-wrap: nowrap; }
	.main-navigation{ display: none; }
	.main-navigation:not(.hidden-mobile){
		display: block;
		width: 100%;
		order: 10;
		flex-basis: 100%;
	}
	.menu-toggle{ display: inline-flex !important; visibility: visible; pointer-events: auto; }
	.header-actions{ margin-left: auto; }
}

@media (max-width: 640px){
	.header-inner{
		gap: 8px;
		padding-top: 10px;
		padding-bottom: 10px;
		flex-wrap: nowrap;
	}
	.site-branding{ flex: 1 1 auto; min-width: 0; }
	.site-title{ font-size: 17px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
	.site-description{ display: none; }
	.icon-btn,
	.menu-toggle{ width: 36px; height: 36px; }
	.header-actions{ gap: 6px; }
}

/*==============================================================
# BRAND GOLD ACCENTS
# Layered last so they win on specificity. All use --ubv-gold,
# which is identical in light and dark mode.
==============================================================*/

/*--------------------------------------------------------------
# 1. Hamburger menu icon — gold
--------------------------------------------------------------*/
.menu-toggle,
:root[data-ubv-theme="dark"] .menu-toggle{
	color: var(--ubv-gold);
	border-color: rgba(199,154,62,0.35);
	background: var(--ubv-glass-bg-strong);
}
.menu-toggle:hover,
:root[data-ubv-theme="dark"] .menu-toggle:hover{
	color: var(--ubv-gold);
	background: rgba(199,154,62,0.12);
	border-color: var(--ubv-gold);
}
.menu-toggle svg{
	stroke: currentColor;
}

/*--------------------------------------------------------------
# 2. CTA banner heading — gold, with max specificity
--------------------------------------------------------------*/
.ubv-cta-banner h2,
body.ubuveil-body .ubv-cta-banner h2,
:root[data-ubv-theme="dark"] .ubv-cta-banner h2,
:root[data-ubv-theme="dark"] body.ubuveil-body .ubv-cta-banner h2{
	color: var(--ubv-gold) !important;
	text-shadow: 0 1px 2px rgba(0,0,0,0.18);
}

/*--------------------------------------------------------------
# 3. Trust strip checkmarks — gold
--------------------------------------------------------------*/
.ubv-trust-list li::before,
:root[data-ubv-theme="dark"] .ubv-trust-list li::before{
	color: var(--ubv-gold);
}

/*--------------------------------------------------------------
# 4. Timeline dots — gold
--------------------------------------------------------------*/
.ubv-timeline-step::before,
:root[data-ubv-theme="dark"] .ubv-timeline-step::before{
	background: var(--ubv-gold);
	box-shadow: 0 0 0 4px var(--ubv-paper);
}

/*--------------------------------------------------------------
# 5. Active nav item — small gold dot indicator
--------------------------------------------------------------*/
.main-navigation .current-menu-item > a{
	position: relative;
}
.main-navigation .current-menu-item > a::after{
	content: "";
	position: absolute;
	left: 50%;
	bottom: 2px;
	transform: translateX(-50%);
	width: 4px;
	height: 4px;
	border-radius: 50%;
	background: var(--ubv-gold);
}

/*--------------------------------------------------------------
# 6. Scroll to top hover — gold ring
--------------------------------------------------------------*/
a.ubv-scroll-top:hover{
	border-color: var(--ubv-gold);
	color: var(--ubv-gold);
}

/*--------------------------------------------------------------
# 7. Featured product badge in WooCommerce — gold
--------------------------------------------------------------*/
.woocommerce ul.products li.product .onsale,
.woocommerce span.onsale{
	background: var(--ubv-gold);
	color: #1a1204;
}

/*--------------------------------------------------------------
# 8. Star rating colour unified to brand gold
--------------------------------------------------------------*/
.star-rating,
.star-rating span::before{
	color: var(--ubv-gold);
}

/*--------------------------------------------------------------
# 9. Section eyebrow (optional accent — see note below)
#
# Uncomment to make every eyebrow use gold instead of blue.
# Currently disabled — blue is the accent, gold is the featured colour.
#
# .ubv-eyebrow { color: var(--ubv-gold); border-color: rgba(199,154,62,0.4); }
--------------------------------------------------------------*/