/*
 * Single Post Layout — observatorio-cero-theme
 *
 * Styles for the single post template (templates/single.html):
 *   - Two-column layout (75% main content + 25% sidebar)
 *   - Tags section
 *   - Share / Download / Print bar
 *   - Related posts section header
 *   - Article content typography
 *   - Print styles
 *
 * Note: Sidebar layout/sticky styles are in sidebar-1.css (reusable component).
 * Note: Recent posts part styles are in oc-recent-posts-1.css.
 *
 * Uses only CSS custom properties from theme.json / color-modes.css.
 */

/* ═══════════════════════════════════════════
 * Single Layout — Main content + Sidebar (80/20)
 * ═══════════════════════════════════════════ */

.oc-single-layout-wrapper {
	margin-left: auto;
	margin-right: auto;
	padding-left: var(--wp--preset--spacing--50);
	padding-right: var(--wp--preset--spacing--50);
}

@media (min-width: 782px) {
	.oc-single-layout-wrapper {
		padding-left: var(--wp--preset--spacing--60);
		padding-right: var(--wp--preset--spacing--60);
	}
}

.oc-single-layout {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--50);
}

.oc-single-layout > .oc-single-main {
	flex: 1 1 0%;
	min-width: 0;
}

@media (min-width: 1024px) {
	.oc-single-layout {
		flex-wrap: nowrap;
	}

	.oc-single-layout > .oc-single-main {
		flex: 0 0 75%;
		max-width: 75%;
	}
}

/* ═══════════════════════════════════════════
 * Post Authors (Multi-Author Chips with Avatar)
 * ═══════════════════════════════════════════ */

.oc-post-authors {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--wp--preset--spacing--30);
	margin-top: var(--wp--preset--spacing--30);
	margin-bottom: var(--wp--preset--spacing--20);
}

.oc-post-authors__label {
	font-size: var(--wp--preset--font-size--label-md);
	font-weight: var(--wp--custom--typography--font-weight--label-md, 500);
	color: var(--wp--preset--color--on-surface-variant);
	text-transform: uppercase;
	letter-spacing: var(--wp--custom--typography--letter-spacing--label-sm, 0.05em);
}

.oc-post-authors__list {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--wp--preset--spacing--20);
}

.oc-author-chip {
	display: inline-flex;
	align-items: center;
	gap: var(--wp--preset--spacing--20);
	padding: var(--wp--preset--spacing--10) var(--wp--preset--spacing--30) var(--wp--preset--spacing--10) var(--wp--preset--spacing--10);
	background-color: var(--wp--preset--color--surface-container-low);
	border: var(--wp--custom--ui--border-width--thin, 1px) solid var(--wp--preset--color--outline-variant);
	border-radius: var(--wp--custom--border-radius--full, 9999px);
	text-decoration: none;
	color: var(--wp--preset--color--on-surface);
	font-size: var(--wp--preset--font-size--body-sm);
	font-weight: var(--wp--custom--typography--font-weight--semibold, 600);
	transition:
		background-color var(--wp--custom--ui--interaction--fast, 0.15s ease),
		color var(--wp--custom--ui--interaction--fast, 0.15s ease),
		border-color var(--wp--custom--ui--interaction--fast, 0.15s ease),
		transform var(--wp--custom--ui--interaction--fast, 0.15s ease);
}

.oc-author-chip:hover {
	background-color: var(--wp--preset--color--surface-container-high);
	color: var(--wp--preset--color--primary);
	border-color: var(--wp--preset--color--primary);
	transform: scale(var(--wp--custom--ui--scale--subtle, 1.02));
}

.oc-author-chip:focus-visible {
	outline: var(--wp--custom--ui--focus--width, 2px) solid var(--wp--preset--color--primary);
	outline-offset: var(--wp--custom--ui--focus--offset, 2px);
}

.oc-author-chip__avatar {
	width: var(--wp--custom--site-header--action-size, 2rem);
	height: var(--wp--custom--site-header--action-size, 2rem);
	min-width: var(--wp--custom--site-header--action-size, 2rem);
	min-height: var(--wp--custom--site-header--action-size, 2rem);
	border-radius: var(--wp--custom--border-radius--full, 9999px);
	object-fit: cover;
	display: block;
}

.oc-author-chip__name {
	white-space: nowrap;
}

/* ═══════════════════════════════════════════
 * Conditional Visibility linked to Sidebar Presence
 * When sidebar is active in desktop layout (≥ 1024px), hide redundant authors from Hero
 * ═══════════════════════════════════════════ */

@media (min-width: 1024px) {
	.site-content:has(.oc-sidebar) .oc-post-authors,
	.site-content:has(.oc-sidebar-1) .oc-post-authors,
	.site-content:has(.oc-sidebar-actualidad) .oc-post-authors {
		display: none;
	}
}


/* ═══════════════════════════════════════════
 * Tags Section
 * ═══════════════════════════════════════════ */

.oc-post-tags {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--wp--preset--spacing--30);
	padding-top: var(--wp--preset--spacing--50);
	padding-bottom: var(--wp--preset--spacing--50);
	border-top: var(--wp--custom--ui--decoration--border) solid color-mix(in srgb, var(--wp--preset--color--outline-variant) var(--wp--custom--blend--border), transparent);
}

.oc-post-tags__label {
	font-size: var(--wp--preset--font-size--label-md);
	font-weight: var(--wp--custom--typography--font-weight--label-md);
	color: var(--wp--preset--color--on-surface-variant);
}

.oc-post-tags-list {
	display: inline-flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--30);
}

/* core/post-terms for tags */
.oc-post-tags-terms {
	display: inline-flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--30);
}

.oc-post-tags-terms a {
	display: inline-flex;
	align-items: center;
	padding: var(--wp--preset--spacing--20) var(--wp--preset--spacing--30);
	background-color: var(--wp--preset--color--surface-container-high);
	color: var(--wp--preset--color--on-surface-variant);
	border-radius: var(--wp--custom--border-radius--full);
	font-size: var(--wp--preset--font-size--label-sm);
	font-weight: var(--wp--custom--typography--font-weight--label-sm);
	text-decoration: none;
	transition:
		background-color var(--wp--custom--ui--interaction--medium),
		color var(--wp--custom--ui--interaction--medium),
		transform var(--wp--custom--ui--interaction--medium);
	transform: translateX(0) scale(1);
}

.oc-post-tags-terms a:hover {
	background-color: var(--wp--preset--color--primary-container);
	color: var(--wp--preset--color--on-primary-container);
	transform: translateX(var(--wp--custom--ui--decoration--transform-translate)) scale(var(--wp--custom--ui--scale--text));
}

/* ═══════════════════════════════════════════
 * Share / Download / Print Bar
 * ═══════════════════════════════════════════ */

.oc-post-actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--wp--preset--spacing--40);
	padding-top: var(--wp--preset--spacing--40);
	padding-bottom: var(--wp--preset--spacing--40);
	border-top: var(--wp--custom--ui--decoration--border) solid color-mix(in srgb, var(--wp--preset--color--outline-variant) var(--wp--custom--blend--border), transparent);
}

.oc-post-actions__label {
	font-size: var(--wp--preset--font-size--label-md);
	font-weight: var(--wp--custom--typography--font-weight--label-md);
	color: var(--wp--preset--color--on-surface-variant);
}

@media (max-width: 767px) {
	.oc-post-actions__label {
		display: none;
	}

	.oc-post-actions {
		justify-content: center;
		gap: var(--wp--preset--spacing--30);
	}
}

/* ═══════════════════════════════════════════
 * Related Posts Section
 * ═══════════════════════════════════════════ */

.oc-related-posts-section {
	margin-top: var(--wp--preset--spacing--70);
}

.oc-related-posts__header {
	gap: var(--wp--preset--spacing--40);
}



/* ═══════════════════════════════════════════
 * Article Content Typography
 * ═══════════════════════════════════════════ */

.oc-single-main .wp-block-post-content {
	font-size: var(--wp--preset--font-size--body-lg);
	line-height: var(--wp--custom--typography--line-height--body-lg);
	color: var(--wp--preset--color--on-surface);
}

.oc-single-main .wp-block-post-content p {
	margin-bottom: var(--wp--preset--spacing--50);
}

.oc-single-main .wp-block-post-content blockquote {
	border-left: var(--wp--custom--ui--border-width--large) solid var(--wp--preset--color--primary-container);
	padding-left: var(--wp--preset--spacing--50);
	margin: var(--wp--preset--spacing--60) 0;
	color: var(--wp--preset--color--on-surface-variant);
	font-style: italic;
}

.oc-single-main .wp-block-post-content h2,
.oc-single-main .wp-block-post-content h3,
.oc-single-main .wp-block-post-content h4 {
	margin-top: var(--wp--preset--spacing--60);
	margin-bottom: var(--wp--preset--spacing--30);
}

/* ═══════════════════════════════════════════
 * Print / PDF Generation Styles (Estrategia 1: CSS Puro)
 * ═══════════════════════════════════════════ */

/* ═══════════════════════════════════════════
 * Print Legal Footer
 * ═══════════════════════════════════════════ */

.oc-print-footer {
	display: none;
}

/* ═══════════════════════════════════════════
 * Print Styles
 * ═══════════════════════════════════════════
 * Global print engine styles are centralized in assets/css/print.css.
 */

/* ═══════════════════════════════════════════
 * Reduced Motion
 * ═══════════════════════════════════════════ */

@media (prefers-reduced-motion: reduce) {
	.oc-post-tags-terms a {
		transition: none;
	}
}