/**
 * engine-override.css
 * ==============================================================
 * Re-skins the EXISTING engine's own rendered output (chart cells,
 * badges, tables, info-cards) from its original beige/maroon "temple
 * scroll" look to LankaLux Astro's navy/gold look — WITHOUT touching
 * engine.css or engine.js.
 *
 * HOW: most of engine.css's rules are already written against CSS
 * custom properties (--bg, --card, --ink, --maroon, --gold, --teal,
 * --line, ...) declared at `:root`. Because this file is enqueued
 * AFTER engine.css (see class-lankalux-assets.php's dependency
 * chain), simply redeclaring the same custom property names at
 * `:root` again below wins the cascade and recolors every element
 * that reads them — zero selector overrides needed for those.
 *
 * A SMALL number of engine.css rules use hard-coded hex literals
 * instead of a variable (confirmed by grepping engine.css: `.cell`,
 * `.cell.center`, and `.badge`'s text color). Variable overrides
 * cannot reach those, so they are overridden explicitly below, by
 * selector, still without editing the original file.
 *
 * NOTE ON SPECIFICITY: engine.css also ships several rules prefixed
 * `.lankalux-horoscope .panel/.chart-wrap/.table-wrap {...}` with
 * hard-coded backgrounds. Our templates deliberately do NOT wrap
 * output in a `.lankalux-horoscope` element (see README.md), so
 * those prefixed rules never match and never fight the variable-
 * driven base rules below — this is intentional, not an oversight.
 * ============================================================== */

:root {
	--bg: var(--ax-bg);
	--card: var(--ax-surface);
	--ink: var(--ax-text);
	--ink-soft: var(--ax-muted);
	--maroon: var(--ax-gold); /* engine's "primary accent" role -> our gold */
	--maroon-deep: #16213a; /* dark navy, used as text-on-gold */
	--gold: var(--ax-gold);
	--gold-light: #e6c200;
	--teal: #2f6fb3; /* engine's "secondary accent" role -> a blue, per the brief's "thin blue borders" */
	--teal-deep: #7fd1ff;
	--line: var(--ax-border);
	--line-strong: var(--ax-border-strong);
	--shadow: rgba(var(--ax-shadow-rgb), calc(0.35 * var(--ax-shadow-k)));
}

/* Hard-coded literals in engine.css that variables can't reach. */
.cell {
	background: var(--ax-surface-2);
}
.cell.center {
	background: radial-gradient(circle at center, rgba(var(--ax-gold-rgb), 0.1), transparent 70%), var(--ax-surface-2);
}
.badge {
	color: var(--ax-text);
}
.badge.rahu,
.badge.ketu {
	background: var(--teal-deep);
	color: #0b1424;
}

/* Rounded cards / subtle shadow, per the brief's visual spec — the
   engine's own box-shadow is fine, this just softens the border. */
.chart-wrap,
.table-wrap,
.info-card {
	border-radius: 14px;
}

/* ---------------- Print / "PDF" layer ----------------
 * The engine's own @media print block hides `.lankalux-horoscope,
 * .panel, .btn-row, footer` — none of which our markup uses (see
 * note above), so we supply the equivalent rules for OUR wrapper
 * classes here: hide site chrome + the hero + tab navigation + the
 * print button itself, show every result tab in full (not just the
 * currently active one) and our branded watermark/header, and force
 * print-friendly colours regardless of the on-screen dark theme.
 */
@media print {
	body.ll-body--astro {
		background: #fff !important;
		color: #16213a !important;
	}
	.ll-header,
	.ll-astro-hero,
	.ll-tabs__nav,
	.ll-footer,
	.ll-pdf-panel,
	.ll-astro-disclaimer,
	.ll-quick-facts {
		display: none !important;
	}
	.ll-tabs__panel {
		display: block !important;
		break-inside: avoid;
		page-break-after: always;
	}
	.ll-tab-heading {
		color: #7a2426;
	}
	.ll-print-watermark {
		display: block;
		position: fixed;
		top: 45%;
		left: 0;
		right: 0;
		text-align: center;
		font-size: 64px;
		font-weight: 700;
		color: rgba(0, 0, 0, 0.06);
		transform: rotate(-28deg);
		z-index: -1;
	}
	.ll-print-header {
		display: block;
		text-align: center;
		font-size: 13px;
		color: #5b4a37;
		border-bottom: 1px solid #c9b183;
		padding-bottom: 10px;
		margin-bottom: 16px;
	}
}
.ll-print-watermark,
.ll-print-header {
	display: none; /* only ever shown inside the @media print block above */
}

/* 1.10.0 fix: the engine's .info-card h3 uses --maroon-deep (our dark
   navy) which was invisible on the dark cards in the "මූලික තොරතුරු"
   house list and the yoga list. Use the gold heading colour instead. */
.info-card h3 {
	color: var(--gold);
}