/* ==========================================================================
   AneurisMAG — Main Stylesheet
   Tokens + Reset + Typography + Grid + Components + Dark Mode
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. CUSTOM PROPERTIES (TOKENS)
   -------------------------------------------------------------------------- */
:root {
	/* Colors — Light mode */
	--amg-color-bg:           #ffffff;
	--amg-color-bg-alt:       #f8fafc;
	--amg-color-bg-card:      #ffffff;
	--amg-color-surface:      #f1f5f9;
	--amg-color-border:       #e2e8f0;
	--amg-color-text:         #0f172a;
	--amg-color-text-muted:   #64748b;
	--amg-color-text-inverse: #ffffff;
	--amg-color-link:         #4f46e5;
	--amg-color-link-hover:   #4338ca;
	--amg-color-primary:      #4f46e5;
	--amg-color-primary-hover:#4338ca;
	--amg-color-secondary:    #0ea5e9;
	--amg-color-accent:       #f59e0b;

	/* Category colors */
	--amg-cat-webdesign:  #4f46e5;
	--amg-cat-marketing:  #f59e0b;
	--amg-cat-seo:        #10b981;
	--amg-cat-desarrollo: #ef4444;
	--amg-cat-ia:         #8b5cf6;
	--amg-cat-negocio:    #06b6d4;
	--amg-cat-default:    #64748b;

	/* Typography */
	--amg-font-body:    'Inter', system-ui, -apple-system, sans-serif;
	--amg-font-heading: 'Space Grotesk', system-ui, -apple-system, sans-serif;
	--amg-font-mono:    'JetBrains Mono', 'Fira Code', monospace;

	/* Fluid type scale */
	--amg-text-xs:   clamp(0.75rem, 0.7rem + 0.25vw, 0.8125rem);
	--amg-text-sm:   clamp(0.8125rem, 0.775rem + 0.25vw, 0.875rem);
	--amg-text-base: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
	--amg-text-lg:   clamp(1.125rem, 1.05rem + 0.5vw, 1.25rem);
	--amg-text-xl:   clamp(1.25rem, 1.1rem + 0.75vw, 1.5rem);
	--amg-text-2xl:  clamp(1.5rem, 1.2rem + 1.5vw, 2rem);
	--amg-text-3xl:  clamp(1.875rem, 1.5rem + 1.875vw, 2.5rem);
	--amg-text-4xl:  clamp(2.25rem, 1.75rem + 2.5vw, 3.5rem);

	/* Spacing */
	--amg-space-xs:  0.25rem;
	--amg-space-sm:  0.5rem;
	--amg-space-md:  1rem;
	--amg-space-lg:  1.5rem;
	--amg-space-xl:  2rem;
	--amg-space-2xl: 3rem;
	--amg-space-3xl: 4rem;
	--amg-space-4xl: 6rem;

	/* Layout */
	--amg-container-max:  1280px;
	--amg-container-pad:  clamp(1rem, 3vw, 2rem);
	--amg-grid-gap:       clamp(1rem, 2vw, 1.5rem);

	/* Shadows */
	--amg-shadow-sm:  0 1px 2px rgba(0, 0, 0, 0.05);
	--amg-shadow-md:  0 4px 6px -1px rgba(0, 0, 0, 0.07), 0 2px 4px -2px rgba(0, 0, 0, 0.05);
	--amg-shadow-lg:  0 10px 15px -3px rgba(0, 0, 0, 0.08), 0 4px 6px -4px rgba(0, 0, 0, 0.05);
	--amg-shadow-xl:  0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.05);

	/* Border radius */
	--amg-radius-sm:  0.375rem;
	--amg-radius-md:  0.5rem;
	--amg-radius-lg:  0.75rem;
	--amg-radius-xl:  1rem;
	--amg-radius-full: 9999px;

	/* Transitions */
	--amg-transition-fast:   150ms ease;
	--amg-transition-base:   250ms ease;
	--amg-transition-slow:   350ms ease;

	/* Z-index */
	--amg-z-header:   100;
	--amg-z-modal:    200;
	--amg-z-progress: 150;
}

/* --------------------------------------------------------------------------
   2. DARK MODE TOKENS
   -------------------------------------------------------------------------- */
html.dark-mode {
	--amg-color-bg:           #0f172a;
	--amg-color-bg-alt:       #1e293b;
	--amg-color-bg-card:      #1e293b;
	--amg-color-surface:      #334155;
	--amg-color-border:       #334155;
	--amg-color-text:         #f1f5f9;
	--amg-color-text-muted:   #94a3b8;
	--amg-color-text-inverse: #0f172a;
	--amg-color-link:         #818cf8;
	--amg-color-link-hover:   #a5b4fc;
	--amg-color-primary:      #818cf8;
	--amg-color-primary-hover:#a5b4fc;

	--amg-shadow-sm:  0 1px 2px rgba(0, 0, 0, 0.2);
	--amg-shadow-md:  0 4px 6px -1px rgba(0, 0, 0, 0.3), 0 2px 4px -2px rgba(0, 0, 0, 0.2);
	--amg-shadow-lg:  0 10px 15px -3px rgba(0, 0, 0, 0.35), 0 4px 6px -4px rgba(0, 0, 0, 0.2);
	--amg-shadow-xl:  0 20px 25px -5px rgba(0, 0, 0, 0.4), 0 8px 10px -6px rgba(0, 0, 0, 0.25);
}

/* --------------------------------------------------------------------------
   3. CSS RESET
   -------------------------------------------------------------------------- */
*,
*::before,
*::after {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}

html {
	-webkit-text-size-adjust: 100%;
	-moz-text-size-adjust: 100%;
	text-size-adjust: 100%;
	scroll-behavior: smooth;
	hanging-punctuation: first last;
}

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}

body {
	min-height: 100vh;
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
}

img, picture, video, canvas, svg {
	display: block;
	max-width: 100%;
	height: auto;
}

input, button, textarea, select {
	font: inherit;
	color: inherit;
}

p, h1, h2, h3, h4, h5, h6 {
	overflow-wrap: break-word;
}

h1, h2, h3, h4, h5, h6 {
	text-wrap: balance;
}

p {
	text-wrap: pretty;
}

a {
	color: inherit;
	text-decoration: none;
}

ul, ol {
	list-style: none;
}

table {
	border-collapse: collapse;
}

/* --------------------------------------------------------------------------
   4. BASE TYPOGRAPHY
   -------------------------------------------------------------------------- */
body {
	font-family: var(--amg-font-body);
	font-size: var(--amg-text-base);
	color: var(--amg-color-text);
	background-color: var(--amg-color-bg);
	transition: background-color var(--amg-transition-base), color var(--amg-transition-base);
}

h1, h2, h3, h4, h5, h6 {
	font-family: var(--amg-font-heading);
	font-weight: 700;
	line-height: 1.2;
	color: var(--amg-color-text);
}

h1 { font-size: var(--amg-text-4xl); }
h2 { font-size: var(--amg-text-3xl); }
h3 { font-size: var(--amg-text-2xl); }
h4 { font-size: var(--amg-text-xl); }
h5 { font-size: var(--amg-text-lg); }
h6 { font-size: var(--amg-text-base); }

/* @font-face — self-hosted variable fonts */
@font-face {
	font-family: 'Inter';
	src: url('../fonts/inter-var-latin.woff2') format('woff2');
	font-weight: 100 900;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'Space Grotesk';
	src: url('../fonts/space-grotesk-var.woff2') format('woff2');
	font-weight: 300 700;
	font-style: normal;
	font-display: swap;
}

/* --------------------------------------------------------------------------
   5. LAYOUT
   -------------------------------------------------------------------------- */
.amg-container {
	width: 100%;
	max-width: var(--amg-container-max);
	margin-inline: auto;
	padding-inline: var(--amg-container-pad);
}

.amg-main {
	min-height: 60vh;
}

/* --------------------------------------------------------------------------
   6. SKIP LINK & SCREEN READER
   -------------------------------------------------------------------------- */
.amg-sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.amg-skip-link:focus {
	position: fixed;
	top: var(--amg-space-sm);
	left: var(--amg-space-sm);
	z-index: calc(var(--amg-z-modal) + 1);
	width: auto;
	height: auto;
	padding: var(--amg-space-sm) var(--amg-space-md);
	margin: 0;
	overflow: visible;
	clip: auto;
	white-space: normal;
	background: var(--amg-color-primary);
	color: #fff;
	font-weight: 600;
	border-radius: var(--amg-radius-sm);
	outline: 3px solid var(--amg-color-accent);
	outline-offset: 2px;
}

/* --------------------------------------------------------------------------
   7. HEADER
   -------------------------------------------------------------------------- */
.amg-header {
	position: sticky;
	top: 0;
	z-index: var(--amg-z-header);
	background: var(--amg-color-bg);
	border-bottom: 1px solid var(--amg-color-border);
	transition: transform var(--amg-transition-base), background-color var(--amg-transition-base);
}

.amg-header--hidden {
	transform: translateY(-100%);
}

.amg-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--amg-space-md);
	height: 4rem;
}

.amg-header__brand {
	flex-shrink: 0;
}

.amg-header__logo {
	font-family: var(--amg-font-heading);
	font-size: var(--amg-text-xl);
	font-weight: 700;
	color: var(--amg-color-text);
	transition: color var(--amg-transition-fast);
}

.amg-header__logo:hover {
	color: var(--amg-color-primary);
}

.amg-header__actions {
	display: flex;
	align-items: center;
	gap: var(--amg-space-sm);
}

/* --------------------------------------------------------------------------
   8. NAVIGATION
   -------------------------------------------------------------------------- */
.amg-nav {
	display: flex;
	align-items: center;
}

.amg-nav__toggle {
	display: none;
	background: none;
	border: none;
	cursor: pointer;
	padding: var(--amg-space-sm);
	color: var(--amg-color-text);
}

.amg-nav__list {
	display: flex;
	align-items: center;
	gap: var(--amg-space-xs);
}

.amg-nav__list li a {
	display: block;
	padding: var(--amg-space-sm) var(--amg-space-md);
	font-size: var(--amg-text-sm);
	font-weight: 500;
	color: var(--amg-color-text-muted);
	border-radius: var(--amg-radius-sm);
	transition: color var(--amg-transition-fast), background-color var(--amg-transition-fast);
}

.amg-nav__list li a:hover,
.amg-nav__list li a:focus-visible {
	color: var(--amg-color-text);
	background-color: var(--amg-color-surface);
}

.amg-nav__list li.current-menu-item > a,
.amg-nav__list li a[aria-current="page"] {
	color: var(--amg-color-primary);
	font-weight: 600;
}

/* Mobile nav */
@media (max-width: 768px) {
	.amg-nav__toggle {
		display: flex;
	}

	.amg-nav__list {
		display: none;
		position: absolute;
		top: 100%;
		left: 0;
		right: 0;
		flex-direction: column;
		background: var(--amg-color-bg);
		border-bottom: 1px solid var(--amg-color-border);
		padding: var(--amg-space-md);
		box-shadow: var(--amg-shadow-lg);
	}

	.amg-nav__list--open {
		display: flex;
	}

	.amg-nav__list li a {
		padding: var(--amg-space-md);
		width: 100%;
	}
}

/* --------------------------------------------------------------------------
   9. DARK MODE TOGGLE
   -------------------------------------------------------------------------- */
.amg-dark-toggle {
	background: none;
	border: none;
	cursor: pointer;
	padding: var(--amg-space-sm);
	color: var(--amg-color-text-muted);
	border-radius: var(--amg-radius-sm);
	transition: color var(--amg-transition-fast), background-color var(--amg-transition-fast);
}

.amg-dark-toggle:hover,
.amg-dark-toggle:focus-visible {
	color: var(--amg-color-text);
	background-color: var(--amg-color-surface);
}

.amg-dark-toggle__icon--moon { display: none; }
html.dark-mode .amg-dark-toggle__icon--sun  { display: none; }
html.dark-mode .amg-dark-toggle__icon--moon { display: block; }

/* --------------------------------------------------------------------------
   10. SEARCH TOGGLE
   -------------------------------------------------------------------------- */
.amg-search-toggle {
	background: none;
	border: none;
	cursor: pointer;
	padding: var(--amg-space-sm);
	color: var(--amg-color-text-muted);
	border-radius: var(--amg-radius-sm);
	transition: color var(--amg-transition-fast), background-color var(--amg-transition-fast);
}

.amg-search-toggle:hover,
.amg-search-toggle:focus-visible {
	color: var(--amg-color-text);
	background-color: var(--amg-color-surface);
}

/* --------------------------------------------------------------------------
   11. SCROLL PROGRESS BAR
   -------------------------------------------------------------------------- */
.amg-progress {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 3px;
	z-index: var(--amg-z-progress);
	background: transparent;
	pointer-events: none;
}

.amg-progress__bar {
	height: 100%;
	background: var(--amg-color-primary);
	transform-origin: left;
	transform: scaleX(0);
	will-change: transform;
}

/* --------------------------------------------------------------------------
   12. HERO SECTION (Front page)
   -------------------------------------------------------------------------- */
.amg-hero {
	padding-block: var(--amg-space-2xl);
}

.amg-hero__grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--amg-grid-gap);
}

@media (max-width: 768px) {
	.amg-hero__grid {
		grid-template-columns: 1fr;
	}
}

/* --------------------------------------------------------------------------
   13. ARCHIVE GRID
   -------------------------------------------------------------------------- */
.amg-archive {
	padding-block: var(--amg-space-2xl);
}

.amg-archive__header {
	margin-bottom: var(--amg-space-xl);
}

.amg-archive__title {
	font-size: var(--amg-text-3xl);
}

.amg-archive__description {
	margin-top: var(--amg-space-sm);
	color: var(--amg-color-text-muted);
	font-size: var(--amg-text-lg);
}

.amg-archive__toolbar {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: var(--amg-space-lg);
}

.amg-archive__grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr));
	gap: var(--amg-grid-gap);
}

.amg-archive__grid--list {
	grid-template-columns: 1fr;
}

/* --------------------------------------------------------------------------
   14. CARDS
   -------------------------------------------------------------------------- */
.amg-card {
	display: flex;
	flex-direction: column;
	background: var(--amg-color-bg-card);
	border-radius: var(--amg-radius-lg);
	overflow: hidden;
	border: 1px solid var(--amg-color-border);
	transition: box-shadow var(--amg-transition-base), transform var(--amg-transition-base);
}

.amg-card:hover {
	box-shadow: var(--amg-shadow-lg);
	transform: translateY(-2px);
}

.amg-card__image {
	position: relative;
	overflow: hidden;
	aspect-ratio: 3 / 2;
}

.amg-card__image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform var(--amg-transition-slow);
}

.amg-card:hover .amg-card__image img {
	transform: scale(1.03);
}

.amg-card__body {
	display: flex;
	flex-direction: column;
	flex: 1;
	padding: var(--amg-space-lg);
	gap: var(--amg-space-sm);
}

.amg-card__category {
	align-self: flex-start;
}

.amg-card__title {
	font-family: var(--amg-font-heading);
	font-size: var(--amg-text-xl);
	font-weight: 700;
	line-height: 1.3;
}

.amg-card__title a {
	color: var(--amg-color-text);
	transition: color var(--amg-transition-fast);
}

.amg-card__title a:hover {
	color: var(--amg-color-primary);
}

.amg-card__excerpt {
	color: var(--amg-color-text-muted);
	font-size: var(--amg-text-sm);
	line-height: 1.6;
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.amg-card__meta {
	margin-top: auto;
	padding-top: var(--amg-space-sm);
}

/* Card — Featured (hero, larger) */
.amg-card--featured {
	grid-column: 1 / -1;
}

.amg-card--featured .amg-card__image {
	aspect-ratio: 16 / 9;
}

.amg-card--featured .amg-card__title {
	font-size: var(--amg-text-3xl);
}

@media (min-width: 769px) {
	.amg-card--featured {
		flex-direction: row;
	}

	.amg-card--featured .amg-card__image {
		flex: 1 1 55%;
		aspect-ratio: auto;
	}

	.amg-card--featured .amg-card__body {
		flex: 1 1 45%;
		padding: var(--amg-space-xl);
		justify-content: center;
	}
}

/* Card — Mini (related posts, compact) */
.amg-card--mini {
	flex-direction: row;
	gap: 0;
}

.amg-card--mini .amg-card__image {
	flex: 0 0 120px;
	aspect-ratio: 1;
}

.amg-card--mini .amg-card__body {
	padding: var(--amg-space-md);
}

.amg-card--mini .amg-card__title {
	font-size: var(--amg-text-sm);
}

/* Card list view */
.amg-archive__grid--list .amg-card {
	flex-direction: row;
}

.amg-archive__grid--list .amg-card .amg-card__image {
	flex: 0 0 280px;
	aspect-ratio: auto;
}

@media (max-width: 600px) {
	.amg-archive__grid--list .amg-card {
		flex-direction: column;
	}

	.amg-archive__grid--list .amg-card .amg-card__image {
		flex: none;
		aspect-ratio: 3 / 2;
	}
}

/* --------------------------------------------------------------------------
   15. CATEGORY LABEL
   -------------------------------------------------------------------------- */
.amg-cat-label {
	display: inline-block;
	padding: 0.15em 0.6em;
	font-size: var(--amg-text-xs);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	border-radius: var(--amg-radius-sm);
	color: #fff;
	background-color: var(--amg-cat-color, var(--amg-cat-default));
}

.amg-cat-label:hover {
	opacity: 0.85;
}

/* --------------------------------------------------------------------------
   16. POST META
   -------------------------------------------------------------------------- */
.amg-post-meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--amg-space-md);
	font-size: var(--amg-text-xs);
	color: var(--amg-color-text-muted);
}

.amg-post-meta__item {
	display: flex;
	align-items: center;
	gap: 0.25em;
}

.amg-post-meta__author a {
	font-weight: 600;
	color: var(--amg-color-text);
	transition: color var(--amg-transition-fast);
}

.amg-post-meta__author a:hover {
	color: var(--amg-color-primary);
}

.amg-post-meta__separator {
	width: 3px;
	height: 3px;
	background: var(--amg-color-text-muted);
	border-radius: var(--amg-radius-full);
}

/* --------------------------------------------------------------------------
   17. BREADCRUMBS
   -------------------------------------------------------------------------- */
.amg-breadcrumbs {
	padding-block: var(--amg-space-md);
	font-size: var(--amg-text-xs);
	color: var(--amg-color-text-muted);
}

.amg-breadcrumbs__list {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.35em;
}

.amg-breadcrumbs__item a {
	color: var(--amg-color-text-muted);
	transition: color var(--amg-transition-fast);
}

.amg-breadcrumbs__item a:hover {
	color: var(--amg-color-primary);
}

.amg-breadcrumbs__separator {
	color: var(--amg-color-border);
	user-select: none;
}

.amg-breadcrumbs__item--current {
	color: var(--amg-color-text);
	font-weight: 500;
}

/* --------------------------------------------------------------------------
   18. SINGLE POST
   -------------------------------------------------------------------------- */
.amg-single {
	padding-block: var(--amg-space-xl);
}

.amg-single__layout {
	display: grid;
	grid-template-columns: 1fr min(65ch, 100%) 1fr;
}

.amg-single__layout > * {
	grid-column: 2;
}

.amg-article__header {
	margin-bottom: var(--amg-space-xl);
}

.amg-article__title {
	margin-bottom: var(--amg-space-md);
}

.amg-article__hero {
	margin-block: var(--amg-space-xl);
	border-radius: var(--amg-radius-lg);
	overflow: hidden;
}

.amg-article__hero img {
	width: 100%;
	aspect-ratio: 16 / 9;
	object-fit: cover;
}

/* Post content */
.amg-content {
	font-size: var(--amg-text-base);
	line-height: 1.8;
}

.amg-content h2 {
	margin-top: var(--amg-space-2xl);
	margin-bottom: var(--amg-space-md);
	font-size: var(--amg-text-2xl);
	scroll-margin-top: 5rem;
}

.amg-content h3 {
	margin-top: var(--amg-space-xl);
	margin-bottom: var(--amg-space-sm);
	font-size: var(--amg-text-xl);
	scroll-margin-top: 5rem;
}

.amg-content p {
	margin-bottom: var(--amg-space-md);
}

.amg-content a {
	color: var(--amg-color-link);
	text-decoration: underline;
	text-underline-offset: 2px;
	transition: color var(--amg-transition-fast);
}

.amg-content a:hover {
	color: var(--amg-color-link-hover);
}

.amg-content ul,
.amg-content ol {
	margin-bottom: var(--amg-space-md);
	padding-left: var(--amg-space-lg);
}

.amg-content ul { list-style: disc; }
.amg-content ol { list-style: decimal; }

.amg-content li {
	margin-bottom: var(--amg-space-xs);
}

.amg-content blockquote {
	margin-block: var(--amg-space-lg);
	padding: var(--amg-space-md) var(--amg-space-lg);
	border-left: 4px solid var(--amg-color-primary);
	background: var(--amg-color-surface);
	border-radius: 0 var(--amg-radius-sm) var(--amg-radius-sm) 0;
	font-style: italic;
	color: var(--amg-color-text-muted);
}

.amg-content pre {
	margin-block: var(--amg-space-lg);
	padding: var(--amg-space-lg);
	background: var(--amg-color-surface);
	border-radius: var(--amg-radius-md);
	overflow-x: auto;
	font-family: var(--amg-font-mono);
	font-size: var(--amg-text-sm);
	line-height: 1.6;
}

.amg-content code {
	font-family: var(--amg-font-mono);
	font-size: 0.9em;
	padding: 0.15em 0.35em;
	background: var(--amg-color-surface);
	border-radius: var(--amg-radius-sm);
}

.amg-content pre code {
	padding: 0;
	background: none;
}

.amg-content img {
	border-radius: var(--amg-radius-md);
	margin-block: var(--amg-space-md);
}

.amg-content figure {
	margin-block: var(--amg-space-lg);
}

.amg-content figcaption {
	margin-top: var(--amg-space-sm);
	font-size: var(--amg-text-sm);
	color: var(--amg-color-text-muted);
	text-align: center;
}

.amg-content table {
	width: 100%;
	margin-block: var(--amg-space-lg);
	border: 1px solid var(--amg-color-border);
	border-radius: var(--amg-radius-md);
	overflow: hidden;
}

.amg-content th,
.amg-content td {
	padding: var(--amg-space-sm) var(--amg-space-md);
	border-bottom: 1px solid var(--amg-color-border);
	text-align: left;
}

.amg-content th {
	background: var(--amg-color-surface);
	font-weight: 600;
}

/* --------------------------------------------------------------------------
   19. TABLE OF CONTENTS
   -------------------------------------------------------------------------- */
.amg-toc {
	margin-block: var(--amg-space-xl);
	padding: var(--amg-space-lg);
	background: var(--amg-color-bg-alt);
	border: 1px solid var(--amg-color-border);
	border-radius: var(--amg-radius-lg);
}

.amg-toc__title {
	font-size: var(--amg-text-sm);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: var(--amg-color-text-muted);
	margin-bottom: var(--amg-space-md);
}

.amg-toc__list {
	display: flex;
	flex-direction: column;
	gap: var(--amg-space-xs);
}

.amg-toc__link {
	display: block;
	padding: var(--amg-space-xs) var(--amg-space-sm);
	font-size: var(--amg-text-sm);
	color: var(--amg-color-text-muted);
	border-left: 2px solid transparent;
	border-radius: 0 var(--amg-radius-sm) var(--amg-radius-sm) 0;
	transition: color var(--amg-transition-fast), border-color var(--amg-transition-fast), background-color var(--amg-transition-fast);
}

.amg-toc__link:hover {
	color: var(--amg-color-text);
	background: var(--amg-color-surface);
}

.amg-toc__link--active {
	color: var(--amg-color-primary);
	border-left-color: var(--amg-color-primary);
	font-weight: 600;
}

.amg-toc__link--h3 {
	padding-left: var(--amg-space-lg);
}

/* --------------------------------------------------------------------------
   20. RELATED POSTS
   -------------------------------------------------------------------------- */
.amg-related {
	margin-top: var(--amg-space-3xl);
	padding-top: var(--amg-space-2xl);
	border-top: 1px solid var(--amg-color-border);
}

.amg-related__title {
	font-size: var(--amg-text-xl);
	margin-bottom: var(--amg-space-lg);
}

.amg-related__grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr));
	gap: var(--amg-grid-gap);
}

/* --------------------------------------------------------------------------
   21. NEWSLETTER CTA
   -------------------------------------------------------------------------- */
.amg-newsletter {
	margin-block: var(--amg-space-2xl);
	padding: var(--amg-space-2xl);
	background: var(--amg-color-primary);
	color: #fff;
	border-radius: var(--amg-radius-xl);
	text-align: center;
}

.amg-newsletter__title {
	font-size: var(--amg-text-2xl);
	color: #fff;
	margin-bottom: var(--amg-space-sm);
}

.amg-newsletter__desc {
	margin-bottom: var(--amg-space-lg);
	opacity: 0.9;
	max-width: 50ch;
	margin-inline: auto;
}

.amg-newsletter__form {
	display: flex;
	gap: var(--amg-space-sm);
	max-width: 480px;
	margin-inline: auto;
}

.amg-newsletter__input {
	flex: 1;
	padding: var(--amg-space-sm) var(--amg-space-md);
	border: 2px solid rgba(255, 255, 255, 0.3);
	border-radius: var(--amg-radius-md);
	background: rgba(255, 255, 255, 0.15);
	color: #fff;
	font-size: var(--amg-text-sm);
}

.amg-newsletter__input::placeholder {
	color: rgba(255, 255, 255, 0.7);
}

.amg-newsletter__input:focus {
	outline: none;
	border-color: #fff;
	background: rgba(255, 255, 255, 0.25);
}

.amg-newsletter__btn {
	padding: var(--amg-space-sm) var(--amg-space-lg);
	background: #fff;
	color: var(--amg-color-primary);
	font-weight: 700;
	font-size: var(--amg-text-sm);
	border: none;
	border-radius: var(--amg-radius-md);
	cursor: pointer;
	transition: opacity var(--amg-transition-fast);
	white-space: nowrap;
}

.amg-newsletter__btn:hover {
	opacity: 0.9;
}

@media (max-width: 480px) {
	.amg-newsletter__form {
		flex-direction: column;
	}
}

/* --------------------------------------------------------------------------
   22. SHARE BUTTONS
   -------------------------------------------------------------------------- */
.amg-share {
	display: flex;
	align-items: center;
	gap: var(--amg-space-sm);
	margin-block: var(--amg-space-xl);
}

.amg-share__label {
	font-size: var(--amg-text-sm);
	font-weight: 600;
	color: var(--amg-color-text-muted);
}

.amg-share__link {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 2.5rem;
	height: 2.5rem;
	border-radius: var(--amg-radius-full);
	background: var(--amg-color-surface);
	color: var(--amg-color-text-muted);
	transition: background-color var(--amg-transition-fast), color var(--amg-transition-fast);
}

.amg-share__link:hover {
	background: var(--amg-color-primary);
	color: #fff;
}

/* --------------------------------------------------------------------------
   23. PAGINATION
   -------------------------------------------------------------------------- */
.amg-pagination {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: var(--amg-space-xs);
	margin-top: var(--amg-space-2xl);
	padding-top: var(--amg-space-xl);
	border-top: 1px solid var(--amg-color-border);
}

.amg-pagination .page-numbers {
	display: flex;
	align-items: center;
	justify-content: center;
	min-width: 2.5rem;
	height: 2.5rem;
	padding-inline: var(--amg-space-sm);
	font-size: var(--amg-text-sm);
	font-weight: 500;
	color: var(--amg-color-text-muted);
	background: var(--amg-color-bg-card);
	border: 1px solid var(--amg-color-border);
	border-radius: var(--amg-radius-md);
	transition: background-color var(--amg-transition-fast), color var(--amg-transition-fast), border-color var(--amg-transition-fast);
}

.amg-pagination .page-numbers:hover {
	color: var(--amg-color-primary);
	border-color: var(--amg-color-primary);
}

.amg-pagination .page-numbers.current {
	background: var(--amg-color-primary);
	color: #fff;
	border-color: var(--amg-color-primary);
}

/* --------------------------------------------------------------------------
   24. VIEW TOGGLE
   -------------------------------------------------------------------------- */
.amg-view-toggle {
	display: flex;
	background: var(--amg-color-surface);
	border-radius: var(--amg-radius-md);
	padding: 2px;
}

.amg-view-toggle__btn {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: var(--amg-space-sm);
	background: transparent;
	border: none;
	border-radius: var(--amg-radius-sm);
	cursor: pointer;
	color: var(--amg-color-text-muted);
	transition: background-color var(--amg-transition-fast), color var(--amg-transition-fast);
}

.amg-view-toggle__btn--active {
	background: var(--amg-color-bg-card);
	color: var(--amg-color-text);
	box-shadow: var(--amg-shadow-sm);
}

/* --------------------------------------------------------------------------
   25. SEARCH MODAL
   -------------------------------------------------------------------------- */
.amg-search-modal {
	display: none;
	position: fixed;
	inset: 0;
	z-index: var(--amg-z-modal);
	background: rgba(0, 0, 0, 0.6);
	backdrop-filter: blur(4px);
	align-items: flex-start;
	justify-content: center;
	padding-top: 15vh;
}

.amg-search-modal--open {
	display: flex;
}

.amg-search-modal__inner {
	width: 90%;
	max-width: 600px;
	background: var(--amg-color-bg);
	border-radius: var(--amg-radius-xl);
	padding: var(--amg-space-lg);
	box-shadow: var(--amg-shadow-xl);
}

.amg-search-modal__form {
	display: flex;
	align-items: center;
	gap: var(--amg-space-md);
}

.amg-search-modal__input {
	flex: 1;
	padding: var(--amg-space-md);
	border: 2px solid var(--amg-color-border);
	border-radius: var(--amg-radius-md);
	background: var(--amg-color-bg);
	color: var(--amg-color-text);
	font-size: var(--amg-text-lg);
}

.amg-search-modal__input:focus {
	outline: none;
	border-color: var(--amg-color-primary);
}

.amg-search-modal__close {
	background: none;
	border: none;
	cursor: pointer;
	padding: var(--amg-space-sm);
	color: var(--amg-color-text-muted);
	font-size: var(--amg-text-sm);
}

/* --------------------------------------------------------------------------
   26. FOOTER
   -------------------------------------------------------------------------- */
.amg-footer {
	margin-top: var(--amg-space-3xl);
	padding-block: var(--amg-space-2xl);
	background: var(--amg-color-bg-alt);
	border-top: 1px solid var(--amg-color-border);
}

.amg-footer__widgets {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr));
	gap: var(--amg-grid-gap);
	margin-bottom: var(--amg-space-2xl);
}

.amg-footer__bottom {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;
	gap: var(--amg-space-md);
	padding-top: var(--amg-space-lg);
	border-top: 1px solid var(--amg-color-border);
	font-size: var(--amg-text-sm);
	color: var(--amg-color-text-muted);
}

.amg-footer__copyright a {
	color: var(--amg-color-text);
	font-weight: 600;
}

.amg-footer__menu,
.amg-footer__social-list {
	display: flex;
	flex-wrap: wrap;
	gap: var(--amg-space-md);
}

.amg-footer__menu li a,
.amg-footer__social-list li a {
	color: var(--amg-color-text-muted);
	transition: color var(--amg-transition-fast);
}

.amg-footer__menu li a:hover,
.amg-footer__social-list li a:hover {
	color: var(--amg-color-primary);
}

/* --------------------------------------------------------------------------
   27. PAGE TEMPLATE
   -------------------------------------------------------------------------- */
.amg-page {
	padding-block: var(--amg-space-2xl);
}

.amg-page__header {
	margin-bottom: var(--amg-space-xl);
	text-align: center;
}

.amg-page__content {
	max-width: 65ch;
	margin-inline: auto;
}

/* --------------------------------------------------------------------------
   28. SEARCH RESULTS
   -------------------------------------------------------------------------- */
.amg-search-page__header {
	margin-bottom: var(--amg-space-xl);
}

.amg-search-page__form {
	max-width: 500px;
	margin-top: var(--amg-space-md);
}

.amg-search-page__input {
	width: 100%;
	padding: var(--amg-space-md);
	border: 2px solid var(--amg-color-border);
	border-radius: var(--amg-radius-md);
	background: var(--amg-color-bg);
	color: var(--amg-color-text);
	font-size: var(--amg-text-base);
}

/* --------------------------------------------------------------------------
   29. 404 PAGE
   -------------------------------------------------------------------------- */
.amg-404 {
	text-align: center;
	padding-block: var(--amg-space-4xl);
}

.amg-404__code {
	font-family: var(--amg-font-heading);
	font-size: clamp(5rem, 15vw, 12rem);
	font-weight: 700;
	line-height: 1;
	color: var(--amg-color-surface);
}

.amg-404__title {
	font-size: var(--amg-text-2xl);
	margin-top: var(--amg-space-md);
}

.amg-404__desc {
	color: var(--amg-color-text-muted);
	margin-top: var(--amg-space-sm);
	margin-bottom: var(--amg-space-xl);
}

.amg-404__link {
	display: inline-flex;
	align-items: center;
	gap: var(--amg-space-sm);
	padding: var(--amg-space-sm) var(--amg-space-lg);
	background: var(--amg-color-primary);
	color: #fff;
	font-weight: 600;
	border-radius: var(--amg-radius-md);
	transition: background-color var(--amg-transition-fast);
}

.amg-404__link:hover {
	background: var(--amg-color-primary-hover);
}

/* --------------------------------------------------------------------------
   30. WIDGET STYLES
   -------------------------------------------------------------------------- */
.amg-widget {
	margin-bottom: var(--amg-space-lg);
}

.amg-widget__title {
	font-size: var(--amg-text-sm);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	margin-bottom: var(--amg-space-md);
	color: var(--amg-color-text);
}

/* --------------------------------------------------------------------------
   31. NO RESULTS
   -------------------------------------------------------------------------- */
.amg-no-results {
	text-align: center;
	padding-block: var(--amg-space-3xl);
	color: var(--amg-color-text-muted);
}

/* --------------------------------------------------------------------------
   32. PRINT STYLES
   -------------------------------------------------------------------------- */
@media print {
	.amg-header,
	.amg-footer,
	.amg-progress,
	.amg-toc,
	.amg-share,
	.amg-related,
	.amg-newsletter,
	.amg-search-modal,
	.amg-nav__toggle,
	.amg-dark-toggle,
	.amg-search-toggle {
		display: none !important;
	}

	body {
		font-size: 12pt;
		color: #000;
		background: #fff;
	}

	.amg-content a {
		text-decoration: underline;
		color: #000;
	}

	.amg-content a::after {
		content: " (" attr(href) ")";
		font-size: 0.8em;
		color: #666;
	}
}

/* --------------------------------------------------------------------------
   33. FOCUS STYLES
   -------------------------------------------------------------------------- */
:focus-visible {
	outline: 2px solid var(--amg-color-primary);
	outline-offset: 2px;
}

button:focus-visible,
a:focus-visible {
	outline: 2px solid var(--amg-color-primary);
	outline-offset: 2px;
}