/* ══════════════════════════════════════════════════════════════════════
   Way2API — Custom Theme Layer  (ADDITIVE • OPT-IN • REVERSIBLE)
   ══════════════════════════════════════════════════════════════════════
   Loaded ONLY when a non-default theme is selected in include/theme.config.php.
   Every rule is scoped under [data-w2a-theme]; with the default theme that
   attribute is absent, so none of this applies and the original green
   codebase renders untouched. This file never edits the stock theme — it
   layers on top of it.

   What it restyles: buttons, badges/labels, cards, tables, accordions,
   nav links, section accents — plus tasteful entrance/hover animations
   (all disabled under prefers-reduced-motion).

   Palette contract each theme sets (consumed by the shared rules below):
     --w2a-accent        primary accent (fills, borders, glows)
     --w2a-ink           readable accent for text/links on light surfaces
     --w2a-accent-2      gradient partner for the accent
     --w2a-accent-rgb    accent as "r,g,b" (for rgba glows)
     --w2a-on-accent     text/icon colour on a filled accent surface
     --w2a-ring          glow/shadow colour (rgba)
     --w2a-radius        component corner radius
     --w2a-card-border / --w2a-table-head
     --w2a-label-bg / --w2a-label-fg     (soft badge / label chips)
   ────────────────────────────────────────────────────────────────────── */

/* ── Shared defaults (any custom theme) ─────────────────────────────── */
[data-w2a-theme] {
	--w2a-accent: #16a34a;
	--w2a-ink: var(--w2a-accent);
	--w2a-accent-2: #2eca8b;
	--w2a-accent-rgb: 22, 163, 74;
	--w2a-on-accent: #ffffff;
	--w2a-ring: rgba(22, 163, 74, 0.35);
	--w2a-radius: 12px;
	--w2a-card-border: rgba(15, 23, 42, 0.08);
	--w2a-table-head: rgba(var(--w2a-accent-rgb), 0.07);
	--w2a-label-bg: rgba(var(--w2a-accent-rgb), 0.10);
	--w2a-label-fg: var(--w2a-accent);
	--w2a-label-transform: none;
	--w2a-label-font: inherit;
}

/* ═══ THEME PALETTES ════════════════════════════════════════════════ */

/* Emerald Aurora — light, glassy, emerald→teal */
[data-w2a-theme="aurora"] {
	--w2a-accent: #10b981;
	--w2a-accent-2: #06b6d4;
	--w2a-accent-rgb: 16, 185, 129;
	--w2a-on-accent: #ffffff;
	--w2a-ring: rgba(16, 185, 129, 0.34);
	--w2a-radius: 16px;
	--w2a-card-border: rgba(16, 185, 129, 0.16);
}

/* Cyber Neon — neon cyan/lime accents + tech grid on a clean surface */
[data-w2a-theme="cyber"] {
	--w2a-accent: #06b6d4;
	--w2a-ink: #0e7490;            /* readable cyan for text/links on white */
	--w2a-accent-2: #0891b2;
	--w2a-accent-rgb: 6, 182, 212;
	--w2a-on-accent: #04121a;
	--w2a-ring: rgba(6, 182, 212, 0.40);
	--w2a-radius: 10px;
	--w2a-card-border: rgba(6, 182, 212, 0.26);
	--w2a-table-head: rgba(6, 182, 212, 0.10);
	--w2a-label-bg: rgba(6, 182, 212, 0.12);
	--w2a-label-fg: #0e7490;
	--w2a-label-transform: uppercase;
	--w2a-label-font: 'SFMono-Regular', Consolas, Menlo, monospace;
}

/* Quantum Violet — indigo→violet developer look */
[data-w2a-theme="quantum"] {
	--w2a-accent: #6366f1;
	--w2a-accent-2: #a855f7;
	--w2a-accent-rgb: 99, 102, 241;
	--w2a-on-accent: #ffffff;
	--w2a-ring: rgba(99, 102, 241, 0.38);
	--w2a-radius: 14px;
	--w2a-card-border: rgba(99, 102, 241, 0.18);
}

/* Slate Corporate — neutral, sharp, professional */
[data-w2a-theme="slate"] {
	--w2a-accent: #3b82f6;
	--w2a-accent-2: #0ea5e9;
	--w2a-accent-rgb: 59, 130, 246;
	--w2a-on-accent: #ffffff;
	--w2a-ring: rgba(59, 130, 246, 0.28);
	--w2a-radius: 8px;
	--w2a-card-border: rgba(30, 41, 59, 0.12);
	--w2a-label-transform: uppercase;
}

/* Matrix Terminal — terminal-green accents + monospace labels + grid */
[data-w2a-theme="matrix"] {
	--w2a-accent: #16a34a;
	--w2a-ink: #15803d;            /* readable green for text/links on white */
	--w2a-accent-2: #22c55e;
	--w2a-accent-rgb: 22, 163, 74;
	--w2a-on-accent: #f0fff5;
	--w2a-ring: rgba(22, 163, 74, 0.42);
	--w2a-radius: 6px;
	--w2a-card-border: rgba(22, 163, 74, 0.28);
	--w2a-table-head: rgba(22, 163, 74, 0.10);
	--w2a-label-bg: rgba(22, 163, 74, 0.12);
	--w2a-label-fg: #15803d;
	--w2a-label-transform: uppercase;
	--w2a-label-font: 'SFMono-Regular', Consolas, Menlo, monospace;
}

/* ═══ ACCENT RECOLOUR (links, primary text/bg utilities) ════════════ */
/* Text/links use --w2a-ink (contrast-safe on the light layout); fills/glows
   below use the brighter --w2a-accent. */
[data-w2a-theme] .text-primary { color: var(--w2a-ink) !important; }
[data-w2a-theme] a.text-primary:hover { color: var(--w2a-accent) !important; }
[data-w2a-theme] .bg-primary {
	background-image: linear-gradient(135deg, var(--w2a-accent) 0%, var(--w2a-accent-2) 100%) !important;
	background-color: var(--w2a-accent) !important;
}

/* ═══ BUTTONS ═══════════════════════════════════════════════════════ */
[data-w2a-theme] .btn {
	transition: transform .2s ease, box-shadow .25s ease,
		background-position .5s ease, color .2s ease, border-color .2s ease;
}
[data-w2a-theme] .btn-primary {
	background-image: linear-gradient(120deg, var(--w2a-accent) 0%, var(--w2a-accent-2) 55%, var(--w2a-accent) 100%);
	background-size: 200% auto;
	background-position: left center;
	border: none;
	color: var(--w2a-on-accent);
	box-shadow: 0 4px 14px var(--w2a-ring);
}
[data-w2a-theme] .btn-primary:hover,
[data-w2a-theme] .btn-primary:focus {
	background-position: right center;
	color: var(--w2a-on-accent);
	transform: translateY(-2px);
	box-shadow: 0 8px 22px var(--w2a-ring);
}
[data-w2a-theme] .btn-primary:active { transform: translateY(0); }

[data-w2a-theme] .btn-outline-primary {
	color: var(--w2a-accent);
	border-color: var(--w2a-accent);
}
[data-w2a-theme] .btn-outline-primary:hover,
[data-w2a-theme] .btn-outline-primary:focus {
	background-image: linear-gradient(120deg, var(--w2a-accent) 0%, var(--w2a-accent-2) 100%);
	background-color: var(--w2a-accent);
	border-color: var(--w2a-accent);
	color: var(--w2a-on-accent);
	transform: translateY(-2px);
	box-shadow: 0 8px 22px var(--w2a-ring);
}
[data-w2a-theme] .btn-soft-primary {
	background-color: var(--w2a-label-bg);
	color: var(--w2a-accent);
	border-color: transparent;
}
[data-w2a-theme] .btn-soft-primary:hover,
[data-w2a-theme] .btn-soft-primary:focus {
	background-color: var(--w2a-accent);
	color: var(--w2a-on-accent);
	transform: translateY(-1px);
	box-shadow: 0 6px 18px var(--w2a-ring);
}

/* ═══ BADGES / LABELS ═══════════════════════════════════════════════ */
[data-w2a-theme] .badge {
	border-radius: 6px;
	letter-spacing: .02em;
	transition: transform .18s ease, box-shadow .18s ease;
}
[data-w2a-theme] .badge.bg-primary {
	background-image: linear-gradient(135deg, var(--w2a-accent) 0%, var(--w2a-accent-2) 100%) !important;
	color: var(--w2a-on-accent) !important;
	box-shadow: 0 2px 8px var(--w2a-ring);
}
/* Soft category label (badge bg-soft-primary) — themed chip */
[data-w2a-theme] .badge.bg-soft-primary {
	background-color: var(--w2a-label-bg) !important;
	color: var(--w2a-label-fg) !important;
	text-transform: var(--w2a-label-transform);
	font-family: var(--w2a-label-font);
	border: 1px solid rgba(var(--w2a-accent-rgb), 0.22);
}
[data-w2a-theme] .badge.bg-soft-primary.text-primary { color: var(--w2a-label-fg) !important; }
/* Coverage chip (bg-soft-secondary) — keep it subdued/greyish, add motion */
[data-w2a-theme] .badge.bg-soft-secondary {
	text-transform: var(--w2a-label-transform);
	font-family: var(--w2a-label-font);
	border: 1px solid rgba(100, 116, 139, 0.22);
}
[data-w2a-theme] tr:hover .badge { transform: translateY(-1px); }

/* ═══ CARDS ═════════════════════════════════════════════════════════ */
[data-w2a-theme] .card {
	border-radius: var(--w2a-radius);
	transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}
[data-w2a-theme] .card.features,
[data-w2a-theme] .card.shadow {
	border: 1px solid var(--w2a-card-border);
}
[data-w2a-theme] .card.features:hover {
	transform: translateY(-6px);
	border-color: var(--w2a-accent);
	box-shadow: 0 18px 40px var(--w2a-ring);
}
/* feature icon chips pick up the accent */
[data-w2a-theme] .features .icons i,
[data-w2a-theme] .features .icon i,
[data-w2a-theme] .features .icon {
	color: var(--w2a-accent);
}

/* ═══ TABLES (pricing / affiliate / coverage) ══════════════════════ */
[data-w2a-theme] .table thead.table-light th,
[data-w2a-theme] .table > thead > tr > th {
	background-color: var(--w2a-table-head);
	color: var(--w2a-ink);
	border-color: rgba(var(--w2a-accent-rgb), 0.20);
	letter-spacing: .01em;
}
[data-w2a-theme] .table-hover > tbody > tr {
	transition: background-color .18s ease;
}
[data-w2a-theme] .table-hover > tbody > tr:hover > * {
	background-color: rgba(var(--w2a-accent-rgb), 0.05);
}

/* ═══ ACCORDION (affiliate FAQ) ════════════════════════════════════ */
[data-w2a-theme] .accordion-button:not(.collapsed) {
	color: var(--w2a-ink);
	background-color: rgba(var(--w2a-accent-rgb), 0.08);
}
[data-w2a-theme] .accordion-button:focus {
	border-color: var(--w2a-accent);
	box-shadow: 0 0 0 .18rem var(--w2a-ring);
}

/* ═══ NAVIGATION ═══════════════════════════════════════════════════ */
[data-w2a-theme] .navigation-menu > li > a.active,
[data-w2a-theme] .navigation-menu > li > a:hover {
	color: var(--w2a-ink) !important;
}
[data-w2a-theme] #topnav.nav-sticky .navigation-menu > li > a.active { color: var(--w2a-ink) !important; }

/* section-title accent underline flourish */
[data-w2a-theme] .section-title > .title { position: relative; }

/* Hero pill (badge rounded-pill bg-soft-primary) already themed via badge rule */

/* ═══ ANIMATIONS (respect reduced-motion) ══════════════════════════ */
@keyframes w2aFadeUp {
	from { opacity: 0; transform: translateY(18px); }
	to   { opacity: 1; transform: translateY(0); }
}
@keyframes w2aGlowPulse {
	0%, 100% { box-shadow: 0 0 0 0 rgba(var(--w2a-accent-rgb), 0.0); }
	50%      { box-shadow: 0 0 18px 2px var(--w2a-ring); }
}
@media (prefers-reduced-motion: no-preference) {
	[data-w2a-theme] .card.features {
		animation: w2aFadeUp .6s cubic-bezier(.2, .7, .3, 1) both;
	}
	/* light stagger across a row of feature cards */
	[data-w2a-theme] .row > [class*="col-"]:nth-child(2) .card.features { animation-delay: .07s; }
	[data-w2a-theme] .row > [class*="col-"]:nth-child(3) .card.features { animation-delay: .14s; }
	[data-w2a-theme] .row > [class*="col-"]:nth-child(4) .card.features { animation-delay: .21s; }
	[data-w2a-theme] .badge.rounded-pill.bg-soft-primary { animation: w2aGlowPulse 3.2s ease-in-out infinite; }
}

/* ═══ TECH-GRID BACKDROP (cyber / matrix) ══════════════════════════ */
/* A faint blueprint grid fixed behind the page. Opacity is low enough to
   never affect text contrast; it just adds a subtle "developer console"
   texture. The layout and all surfaces stay light, so nothing breaks. */
[data-w2a-theme="cyber"] body::before,
[data-w2a-theme="matrix"] body::before {
	content: '';
	position: fixed;
	inset: 0;
	z-index: -1;
	pointer-events: none;
	background-image:
		linear-gradient(rgba(var(--w2a-accent-rgb), 0.055) 1px, transparent 1px),
		linear-gradient(90deg, rgba(var(--w2a-accent-rgb), 0.055) 1px, transparent 1px);
	background-size: 46px 46px;
	mask-image: radial-gradient(ellipse at 50% -10%, #000 0%, transparent 72%);
	-webkit-mask-image: radial-gradient(ellipse at 50% -10%, #000 0%, transparent 72%);
}
/* Neon-edged cards + glowing button text for the two dark-accent themes. */
[data-w2a-theme="cyber"] .card.features:hover,
[data-w2a-theme="matrix"] .card.features:hover {
	box-shadow: 0 16px 40px var(--w2a-ring), inset 0 0 0 1px var(--w2a-accent);
}
[data-w2a-theme="cyber"] .btn-primary,
[data-w2a-theme="matrix"] .btn-primary {
	font-weight: 700;
	letter-spacing: .02em;
}