/**
 * Light editorial theme (loaded last, site-wide).
 *
 * Reading areas (editions, listings, articles, generic pages) are white with
 * near-black text; the brand chrome — top bar, masthead, navigation and footer —
 * keeps the dark navy palette. Typography: Roboto throughout.
 *
 * All colours meet WCAG AA (4.5:1) for text on #ffffff.
 * Remove this file's enqueue (csa_enqueue_light_theme) to return to the dark theme.
 *
 * @package Crypto_News
 */

:root {
	--csa-bg-canvas: #ffffff;
	--csa-bg-surface: #f6f8fb;
	--csa-bg-surface-elevated: #eef2f7;
	--csa-bg-card: #e6ecf3;
	--csa-bg-card-hover: #dde5ef;

	--csa-accent-blue: #1d4ed8;          /* 6.7:1 on white */
	--csa-accent-blue-hover: #1e3a8a;
	--csa-accent-cyan: #0369a1;          /* 5.9:1 on white — kickers, links */
	--csa-accent-cyan-subtle: rgba(3, 105, 161, 0.08);
	--csa-accent-glow: rgba(29, 78, 216, 0.15);

	--csa-text-primary: #0f172a;         /* 17.9:1 */
	--csa-text-secondary: #334155;       /* 10.4:1 */
	--csa-text-muted: #556274;           /* 6.1:1 */
	--csa-text-dim: #5b6778;             /* 5.8:1 */

	--csa-border-subtle: #e4e9f0;
	--csa-border-strong: #cfd8e3;
	--csa-border-accent: rgba(29, 78, 216, 0.3);

	--csa-shadow-sm: 0 1px 3px rgba(15, 23, 42, 0.08);
	--csa-shadow-lg: 0 10px 30px -12px rgba(15, 23, 42, 0.25), 0 0 0 1px var(--csa-border-subtle);

	--csa-font-sans: 'Roboto', -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
	/* The article body used a serif; it now uses Roboto as well. */
	--csa-font-serif: var(--csa-font-sans);
}

/* Brand chrome keeps the dark navy palette. */
.csa-site .site-header,
.csa-site .site-footer {
	--csa-bg-canvas: #070d18;
	--csa-bg-surface: #0c1626;
	--csa-bg-surface-elevated: #112036;
	--csa-bg-card: #152742;
	--csa-accent-blue: #3b82f6;
	--csa-accent-blue-hover: #60a5fa;
	--csa-accent-cyan: #38bdf8;
	--csa-accent-cyan-subtle: rgba(56, 189, 248, 0.12);
	--csa-text-primary: #f1f5f9;
	--csa-text-secondary: #cbd5e1;
	--csa-text-muted: #94a3b8;
	--csa-text-dim: #7b8ba0;
	--csa-border-subtle: rgba(203, 213, 225, 0.08);
	--csa-border-strong: rgba(203, 213, 225, 0.16);
	color: var(--csa-text-secondary);
}

body.csa-site {
	background-color: #ffffff;
	color: var(--csa-text-secondary);
	font-family: var(--csa-font-sans);
}

/* Focus rings visible on white (the header/footer keep the light ring). */
.csa-site #content a:focus-visible,
.csa-site #content button:focus-visible,
.csa-card:has(.csa-card__link:focus-visible) {
	outline-color: #1d4ed8;
}

/* --------------------------------------------------------------------------
   Article page
   ----------------------------------------------------------------------- */
.csa-article-header {
	background: #ffffff;
}

.csa-topic-badge {
	border-color: rgba(3, 105, 161, 0.25);
}

.csa-article-title {
	letter-spacing: -0.015em;
}

.csa-body-inner {
	font-size: 18px;
	line-height: 1.7;
}

.csa-body-inner a {
	text-decoration-color: rgba(3, 105, 161, 0.45);
}

.csa-body-inner a:hover {
	color: var(--csa-accent-blue-hover);
	text-decoration-color: currentColor;
}

/* --------------------------------------------------------------------------
   Cards & listings
   ----------------------------------------------------------------------- */
.csa-card__placeholder {
	color: #1d4ed8;
	background:
		radial-gradient(circle at 30% 20%, rgba(29, 78, 216, 0.12), transparent 55%),
		linear-gradient(135deg, #eef2f7, #e2e8f0);
}

.csa-card__media {
	box-shadow: var(--csa-shadow-sm);
}

.csa-empty {
	background: var(--csa-bg-surface);
}

/* Editor-only preview notice, readable on white. */
.csa-preview-notice {
	background: #fffbeb;
	border-color: #f59e0b;
	color: #78350f;
}

.csa-preview-notice strong,
.csa-site .csa-preview-notice a {
	color: #78350f;
}

.csa-card__status {
	background: #fde68a;
	color: #78350f;
}

/* --------------------------------------------------------------------------
   Article footer card
   ----------------------------------------------------------------------- */

/* "Manage cookie preferences" inside the white content area: dark text and a visible
   border (consent.css styles this button for dark backgrounds). Contrast 10.4:1. */
.csa-site #content .csa-manage-consent-btn {
	--csa-c-muted: #334155;
	--csa-c-text: #1d4ed8;
	--csa-c-border: #cfd8e3;
	--csa-c-accent-hover: #1d4ed8;
	background: #ffffff;
	font-size: 13px;
	font-weight: 500;
}

/* Without an editorial note there is nothing between the two dividers: keep one. */
.csa-footer-author + .csa-footer-consent-trigger {
	border-top: 0;
	margin-top: 0;
}

/* --------------------------------------------------------------------------
   Brand logo (horizontal website logo) — header masthead & footer
   The supplied logo has navy lettering on white, so it sits on a white
   masthead row between the dark top bar and the dark navigation, and on a
   white plate in the dark footer. Aspect ratio always preserved.
   ----------------------------------------------------------------------- */
.csa-site .csa-masthead {
	background: #ffffff;
	border-bottom: 1px solid #e4e9f0;
}

.csa-site .csa-masthead__inner {
	padding-top: 18px;
	padding-bottom: 18px;
	gap: 16px 32px;
}

.csa-brand--logo {
	flex: none;
	line-height: 0;
}

.csa-site .csa-brand__logo {
	display: block;
	width: 320px;
	max-width: 100%;
	height: auto;
	max-height: none;
}

/* Approved edition tagline (navy text, amber accent rule echoing the brand). */
.csa-site .csa-masthead__tagline {
	position: relative;
	max-width: 440px;
	margin: 0;
	padding-left: 16px;
	color: #0f172a;
	font-size: 15px;
	font-weight: 500;
	line-height: 1.45;
	text-align: left;
}

.csa-site .csa-masthead__tagline::before {
	content: '';
	position: absolute;
	left: 0;
	top: 0.2em;
	bottom: 0.2em;
	width: 3px;
	border-radius: 2px;
	background: #f2a93b;
}

@media (max-width: 1023px) {
	.csa-site .csa-brand__logo {
		width: 280px;
	}
	.csa-site .csa-masthead__tagline {
		font-size: 14px;
		max-width: 340px;
	}
}

/* Phones: logo first, tagline underneath (site.css hid it below 768px). */
@media (max-width: 767px) {
	.csa-site .csa-masthead__inner {
		flex-direction: column;
		align-items: flex-start;
		gap: 10px;
		padding-top: 14px;
		padding-bottom: 14px;
	}
	.csa-site .csa-brand__logo {
		width: 220px;
	}
	.csa-site .csa-masthead__tagline {
		display: block;
		max-width: none;
		font-size: 13.5px;
		padding-left: 12px;
	}
}

/* Footer: logo on a white plate inside the dark footer. */
.csa-site .site-footer .csa-brand--footer {
	display: inline-block;
	padding: 12px 16px;
	background: #ffffff;
	border-radius: 10px;
}

.csa-site .site-footer .csa-brand--footer .csa-brand__logo {
	width: 220px;
}

.csa-site .csa-footer__tagline {
	margin: 14px 0 0;
	max-width: 380px;
	font-size: 14px;
	line-height: 1.6;
	color: var(--csa-text-secondary);
}