/* ==========================================================================
   Darío Romero IT — Fluent Depth design system
   ========================================================================== */

:root {
	--font-heading: 'Plus Jakarta Sans', 'Segoe UI', system-ui, sans-serif;
	--font-body: 'Inter', 'Segoe UI', system-ui, sans-serif;
	--font-mono: 'Cascadia Code', 'Consolas', monospace;

	--radius-sm: 4px;
	--radius-md: 8px;
	--radius-lg: 16px;

	--space-1: 0.25rem;
	--space-2: 0.5rem;
	--space-3: 1rem;
	--space-4: 1.5rem;
	--space-5: 2.5rem;
	--space-6: 4rem;

	--max-width: 1120px;
	--max-width-narrow: 760px;
	--max-width-shell: 1360px;
	--sidebar-width: 320px;

	--color-primary: #0F6CBD;
	--color-primary-hover: #2564CF;
	--color-primary-tint: #E8F2FC;
	--color-accent: #0A6CFF;
	--gradient-brand: linear-gradient(115deg, #0F6CBD 0%, #2564CF 45%, #0A6CFF 100%);

	--color-bg: #FFFFFF;
	--color-bg-elevated: #F7F9FC;
	--color-bg-mica: linear-gradient(180deg, #F7F9FC 0%, #EEF2F8 100%);
	--color-text: #0B0D12;
	--color-text-secondary: #494B50;
	--color-border: #E1E4E8;
	--color-code-bg: #F1F3F6;

	--color-success: #0E7C3A;
	--color-warning: #B8860B;
	--color-info: #0F6CBD;

	--shadow-sm: 0 1px 2px rgba(11, 13, 18, 0.06);
	--shadow-md: 0 4px 16px rgba(11, 13, 18, 0.08);
	--shadow-lg: 0 12px 32px rgba(11, 13, 18, 0.12);

	--mesh-bg:
		radial-gradient(1200px 600px at 85% -10%, rgba(15, 108, 189, 0.10), transparent 60%),
		radial-gradient(900px 500px at -10% 20%, rgba(37, 100, 207, 0.08), transparent 55%),
		var(--color-bg);

	--avatar-gradient: linear-gradient(135deg, #0F6CBD 0%, #2564CF 55%, #6AB6F2 100%);
	--linkedin-color: #0A66C2;

	color-scheme: light;
}

html[data-theme="dark"] {
	--color-primary: #4FA8F5;
	--color-primary-hover: #7CC0FA;
	--color-primary-tint: #132538;
	--color-accent: #3D8BFF;
	--gradient-brand: linear-gradient(115deg, #1E5FA8 0%, #4FA8F5 55%, #3D8BFF 100%);

	--color-bg: #0B0D12;
	--color-bg-elevated: #14161C;
	--color-bg-mica: linear-gradient(180deg, #14161C 0%, #0B0D12 100%);
	--color-text: #F3F4F6;
	--color-text-secondary: #A0A4AC;
	--color-border: #262A33;
	--color-code-bg: #181B22;

	--shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
	--shadow-md: 0 4px 16px rgba(0, 0, 0, 0.4);
	--shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.5);

	--mesh-bg:
		radial-gradient(1200px 600px at 85% -10%, rgba(79, 168, 245, 0.16), transparent 60%),
		radial-gradient(900px 500px at -10% 15%, rgba(37, 100, 207, 0.14), transparent 55%),
		var(--color-bg);

	--avatar-gradient: linear-gradient(135deg, #123A5E 0%, #1E5FA8 50%, #4FA8F5 100%);
	--linkedin-color: #4FA8F5;

	color-scheme: dark;
}

@media (prefers-color-scheme: dark) {
	html:not([data-theme="light"]) {
		--color-primary: #4FA8F5;
		--color-primary-hover: #7CC0FA;
		--color-primary-tint: #132538;
		--color-accent: #3D8BFF;
		--gradient-brand: linear-gradient(115deg, #1E5FA8 0%, #4FA8F5 55%, #3D8BFF 100%);

		--color-bg: #0B0D12;
		--color-bg-elevated: #14161C;
		--color-bg-mica: linear-gradient(180deg, #14161C 0%, #0B0D12 100%);
		--color-text: #F3F4F6;
		--color-text-secondary: #A0A4AC;
		--color-border: #262A33;
		--color-code-bg: #181B22;

		--mesh-bg:
			radial-gradient(1200px 600px at 85% -10%, rgba(79, 168, 245, 0.16), transparent 60%),
			radial-gradient(900px 500px at -10% 15%, rgba(37, 100, 207, 0.14), transparent 55%),
			var(--color-bg);

		--avatar-gradient: linear-gradient(135deg, #123A5E 0%, #1E5FA8 50%, #4FA8F5 100%);
		--linkedin-color: #4FA8F5;

		color-scheme: dark;
	}
}

* {
	box-sizing: border-box;
}

html {
	-webkit-text-size-adjust: 100%;
}

body {
	margin: 0;
	background: var(--mesh-bg);
	background-attachment: fixed;
	color: var(--color-text);
	font-family: var(--font-body);
	font-size: 1rem;
	line-height: 1.65;
	transition: background-color 0.2s ease, color 0.2s ease;
}

img {
	max-width: 100%;
	height: auto;
	border-radius: var(--radius-md);
}

a {
	color: var(--color-primary);
	text-decoration: none;
}
a:hover {
	color: var(--color-primary-hover);
	text-decoration: underline;
}

h1, h2, h3, h4, h5, h6 {
	font-family: var(--font-heading);
	font-weight: 700;
	line-height: 1.25;
	letter-spacing: -0.01em;
	margin: var(--space-5) 0 var(--space-3);
}
h1 { font-size: clamp(2rem, 4vw, 2.75rem); }
h2 { font-size: clamp(1.5rem, 3vw, 2rem); }
h3 { font-size: 1.25rem; }

p, ul, ol {
	margin: 0 0 var(--space-3);
}

code, pre {
	font-family: var(--font-mono);
	background: var(--color-code-bg);
	border-radius: var(--radius-sm);
}
code {
	padding: 0.15em 0.4em;
	font-size: 0.9em;
}
pre {
	padding: var(--space-3);
	overflow-x: auto;
	border: 1px solid var(--color-border);
}
pre code {
	background: none;
	padding: 0;
}

.wrap {
	max-width: var(--max-width);
	margin: 0 auto;
	padding: 0 var(--space-3);
}
.wrap-narrow {
	max-width: var(--max-width-narrow);
	margin: 0 auto;
	padding: 0 var(--space-3);
}

/* Skip link */
.skip-link {
	position: absolute;
	left: -9999px;
	top: 0;
	background: var(--color-primary);
	color: #fff;
	padding: var(--space-2) var(--space-3);
	z-index: 100;
	border-radius: 0 0 var(--radius-sm) 0;
}
.skip-link:focus {
	left: 0;
}

/* Header */
.site-header {
	position: sticky;
	top: 0;
	z-index: 50;
	background: color-mix(in srgb, var(--color-bg) 88%, transparent);
	border-bottom: 1px solid var(--color-border);
	backdrop-filter: blur(10px);
}
.site-header::after {
	content: "";
	display: block;
	height: 2px;
	background: var(--gradient-brand);
	opacity: 0.9;
}
.site-header .wrap {
	display: flex;
	align-items: center;
	justify-content: space-between;
	min-height: 68px;
	gap: var(--space-3);
}
.site-branding a {
	display: inline-flex;
	align-items: center;
	gap: 0.6em;
	font-family: var(--font-heading);
	font-weight: 800;
	font-size: 1.15rem;
	color: var(--color-text);
	text-decoration: none;
}
.brand-mark {
	width: 26px;
	height: 26px;
	border-radius: 8px;
	background: var(--gradient-brand);
	flex-shrink: 0;
	box-shadow: 0 2px 8px rgba(15, 108, 189, 0.35);
}
.primary-nav ul {
	list-style: none;
	display: flex;
	gap: var(--space-4);
	margin: 0;
	padding: 0;
	flex-wrap: wrap;
}
.primary-nav a {
	position: relative;
	color: var(--color-text-secondary);
	font-weight: 600;
	font-size: 0.95rem;
	padding-bottom: 4px;
}
.primary-nav a::after {
	content: "";
	position: absolute;
	left: 0;
	right: 100%;
	bottom: 0;
	height: 2px;
	background: var(--gradient-brand);
	border-radius: 2px;
	transition: right 0.2s ease;
}
.primary-nav a:hover,
.primary-nav .current-menu-item > a {
	color: var(--color-primary);
	text-decoration: none;
}
.primary-nav a:hover::after,
.primary-nav .current-menu-item > a::after {
	right: 0;
}

.theme-toggle {
	border: 1px solid var(--color-border);
	background: var(--color-bg-elevated);
	color: var(--color-text);
	border-radius: var(--radius-md);
	width: 40px;
	height: 40px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
}
.theme-toggle:hover {
	border-color: var(--color-primary);
}

/* Buttons / pills */
.btn {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
	padding: 0.65em 1.3em;
	background: var(--gradient-brand);
	color: #fff;
	border-radius: var(--radius-md);
	font-weight: 600;
	border: none;
	cursor: pointer;
	box-shadow: 0 4px 14px rgba(15, 108, 189, 0.28);
	transition: box-shadow 0.2s ease, transform 0.2s ease;
}
.btn:hover {
	color: #fff;
	text-decoration: none;
	box-shadow: 0 6px 20px rgba(15, 108, 189, 0.4);
	transform: translateY(-1px);
}
.btn--ghost {
	background: transparent;
	color: var(--color-text);
	border: 1px solid var(--color-border);
	box-shadow: none;
}
.btn--ghost:hover {
	border-color: var(--color-primary);
	color: var(--color-primary);
	box-shadow: none;
	transform: none;
}
.pill {
	display: inline-block;
	padding: 0.2em 0.75em;
	border-radius: 999px;
	font-size: 0.8rem;
	font-weight: 700;
	background: var(--color-primary-tint);
	color: var(--color-primary);
}
.pill--ga { background: #E4F5EA; color: var(--color-success); }
.pill--preview { background: #FCF3D6; color: var(--color-warning); }
.pill--roadmap { background: var(--color-primary-tint); color: var(--color-primary); }

/* Cards */
.card-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
	gap: var(--space-4);
	margin: var(--space-4) 0;
}
.card {
	position: relative;
	background: var(--color-bg-mica);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-lg);
	padding: var(--space-4);
	box-shadow: var(--shadow-sm);
	overflow: hidden;
	transition: box-shadow 0.2s ease, transform 0.2s ease, border-color 0.2s ease;
}
.card::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 3px;
	background: var(--gradient-brand);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform 0.25s ease;
}
.card:hover {
	box-shadow: var(--shadow-md);
	transform: translateY(-3px);
	border-color: transparent;
}
.card:hover::before {
	transform: scaleX(1);
}
.card h3 {
	margin-top: 0;
}
.card .card-meta {
	color: var(--color-text-secondary);
	font-size: 0.85rem;
}

/* Post meta / category badges */
.category-badge {
	display: inline-block;
	font-size: 0.75rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--color-primary);
	margin-bottom: var(--space-2);
}
.post-meta {
	color: var(--color-text-secondary);
	font-size: 0.9rem;
}

/* Table of contents (Guías) */
.toc {
	background: var(--color-bg-elevated);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-lg);
	padding: var(--space-4);
	margin: var(--space-4) 0;
}
.toc summary {
	font-family: var(--font-heading);
	font-weight: 700;
	cursor: pointer;
}
.toc ol {
	margin-top: var(--space-3);
	padding-left: 1.2rem;
}

/* Radar status block */
.radar-status {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-3);
	align-items: center;
	background: var(--color-bg-elevated);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-lg);
	padding: var(--space-3) var(--space-4);
	margin: var(--space-4) 0;
}

/* Footer */
.site-footer {
	border-top: 1px solid var(--color-border);
	margin-top: var(--space-6);
	padding: var(--space-5) 0;
	color: var(--color-text-secondary);
	font-size: 0.9rem;
}
.site-footer a {
	color: var(--color-text-secondary);
}
.site-footer .footer-inner {
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: var(--space-3);
}

/* Hero — contained gradient card with decorative blobs + dot grid,
   inspired by modern tech-site heroes (blended into the Fluent Depth
   palette, not copied from any single reference). */
.hero {
	position: relative;
	padding: var(--space-6) var(--space-5);
	margin: var(--space-4) 0 var(--space-5);
	background: var(--color-bg-mica);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-md);
	overflow: hidden;
	isolation: isolate;
}
.hero::before {
	content: "";
	position: absolute;
	inset: 0;
	background-image:
		radial-gradient(circle at 1px 1px, var(--color-border) 1px, transparent 0);
	background-size: 22px 22px;
	opacity: 0.5;
	z-index: -2;
	mask-image: linear-gradient(180deg, transparent, #000 35%, #000 70%, transparent);
}
.hero::after {
	content: "";
	position: absolute;
	top: -30%;
	right: -10%;
	width: 480px;
	height: 480px;
	background: var(--gradient-brand);
	filter: blur(90px);
	opacity: 0.35;
	border-radius: 50%;
	z-index: -1;
}
.hero-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 0.5em;
	font-size: 0.8rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--color-primary);
	margin-bottom: var(--space-3);
}
.hero-eyebrow::before {
	content: "";
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--gradient-brand);
}
.hero h1 {
	margin-top: 0;
	max-width: 14ch;
}
.hero p.lede {
	font-size: 1.15rem;
	color: var(--color-text-secondary);
	max-width: 560px;
}
.hero-actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-3);
	margin-top: var(--space-4);
}

/* ==========================================================================
   Site shell: sticky header + 2-column layout (content + sidebar)
   ========================================================================== */
.site-shell {
	max-width: var(--max-width-shell);
	margin: 0 auto;
	padding: var(--space-4) var(--space-3) var(--space-6);
	display: grid;
	grid-template-columns: minmax(0, 1fr) var(--sidebar-width);
	gap: var(--space-5);
	align-items: start;
}
.content-area {
	min-width: 0;
}
.content-area .wrap {
	max-width: none;
	padding: 0;
}
.content-area .wrap-narrow {
	padding: 0;
}
.content-area .wrap-narrow.content-card {
	padding: var(--space-5);
}
.sidebar-area {
	position: sticky;
	top: 88px;
	display: flex;
	flex-direction: column;
	gap: var(--space-4);
	max-height: calc(100vh - 104px);
	overflow-y: auto;
	scrollbar-width: thin;
	padding-bottom: var(--space-3);
}

@media (max-width: 960px) {
	.site-shell {
		grid-template-columns: 1fr;
	}
	.sidebar-area {
		position: static;
		max-height: none;
		overflow: visible;
	}
}

/* Sidebar cards */
.side-card {
	background: var(--color-bg-mica);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-lg);
	padding: var(--space-4);
	box-shadow: var(--shadow-sm);
}
.side-card h4 {
	font-family: var(--font-heading);
	font-size: 0.95rem;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--color-text-secondary);
	margin: 0 0 var(--space-3);
}

.avatar {
	width: 64px;
	height: 64px;
	border-radius: 50%;
	background: var(--avatar-gradient);
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: var(--font-heading);
	font-weight: 800;
	font-size: 1.4rem;
	box-shadow: var(--shadow-sm);
}

.side-about .avatar {
	margin-bottom: var(--space-3);
}
.side-about h3 {
	margin: 0 0 0.2em;
	font-size: 1.1rem;
}
.side-about .side-role {
	color: var(--color-text-secondary);
	font-size: 0.88rem;
	margin: 0 0 var(--space-3);
}
.side-about p {
	font-size: 0.92rem;
	color: var(--color-text-secondary);
}

/* Social buttons */
.social-buttons {
	display: flex;
	gap: var(--space-2);
	margin-top: var(--space-3);
	flex-wrap: wrap;
}
.social-btn {
	display: inline-flex;
	align-items: center;
	gap: 0.5em;
	padding: 0.5em 0.9em;
	border-radius: var(--radius-md);
	border: 1px solid var(--color-border);
	background: var(--color-bg-elevated);
	color: var(--color-text);
	font-size: 0.85rem;
	font-weight: 600;
}
.social-btn:hover {
	border-color: var(--color-primary);
	color: var(--color-primary);
	text-decoration: none;
}
.social-btn svg {
	width: 16px;
	height: 16px;
	fill: currentColor;
}
.social-btn--linkedin:hover {
	border-color: var(--linkedin-color);
	color: var(--linkedin-color);
}

/* Sidebar list (Radar / news) */
.side-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: var(--space-3);
}
.side-list li {
	padding-bottom: var(--space-3);
	border-bottom: 1px solid var(--color-border);
}
.side-list li:last-child {
	border-bottom: none;
	padding-bottom: 0;
}
.side-list a {
	color: var(--color-text);
	font-weight: 600;
	font-size: 0.92rem;
	display: block;
	margin-bottom: 0.25em;
}
.side-list a:hover {
	color: var(--color-primary);
	text-decoration: none;
}
.side-list .side-list-meta {
	font-size: 0.78rem;
	color: var(--color-text-secondary);
}
.side-empty {
	font-size: 0.85rem;
	color: var(--color-text-secondary);
	font-style: italic;
}

/* LinkedIn CTA card in sidebar */
.side-linkedin {
	background: linear-gradient(135deg, var(--linkedin-color), var(--color-primary-hover));
	border: none;
	color: #fff;
}
.side-linkedin h4 {
	color: rgba(255, 255, 255, 0.85);
}
.side-linkedin p {
	color: rgba(255, 255, 255, 0.9);
	font-size: 0.88rem;
}
.side-linkedin .btn {
	background: #fff;
	color: var(--linkedin-color);
	margin-top: var(--space-2);
}
.side-linkedin .btn:hover {
	background: rgba(255, 255, 255, 0.9);
	color: var(--linkedin-color);
}

/* Source preview card — image + attribution pulled from the
   Microsoft article a Radar post is based on, linking back to it. */
.source-preview {
	display: flex;
	gap: var(--space-3);
	align-items: center;
	background: var(--color-bg-elevated);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-lg);
	padding: var(--space-3);
	margin: var(--space-4) 0;
	color: var(--color-text);
}
.source-preview:hover {
	border-color: var(--color-primary);
	text-decoration: none;
}
.source-preview img {
	width: 96px;
	height: 64px;
	object-fit: cover;
	border-radius: var(--radius-md);
	flex-shrink: 0;
	margin: 0;
}
.source-preview-info {
	display: flex;
	flex-direction: column;
	gap: 0.2em;
}
.source-preview-label {
	font-size: 0.72rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: var(--color-text-secondary);
}
.source-preview-domain {
	font-weight: 600;
	color: var(--color-primary);
}

/* Post actions (share buttons) */
.post-actions {
	margin-top: var(--space-4);
	padding-top: var(--space-4);
	border-top: 1px solid var(--color-border);
}

/* Content card — frames written content (pages, posts, archive
   headers) in the same rounded/bordered language as .card/.side-card,
   so every block of text on the site reads as a distinct panel. */
.content-card {
	background: var(--color-bg-mica);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-lg);
	padding: var(--space-5);
	box-shadow: var(--shadow-sm);
	margin: var(--space-4) 0;
}
.content-card h1:first-child,
.content-card .category-badge:first-child {
	margin-top: 0;
}
.content-card .entry-content > *:last-child {
	margin-bottom: 0;
}

/* Tech tag cloud */
.tag-cloud {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-2);
}

@media (max-width: 720px) {
	.site-header .wrap {
		flex-wrap: wrap;
		min-height: auto;
		padding-top: var(--space-2);
		padding-bottom: var(--space-2);
	}
	.primary-nav ul {
		gap: var(--space-3);
	}
}