/**
 * LWP Modern Single Post — palette theming for the single-post templates
 * =========================================================
 * The single-post templates (content-single-default / layout1…layout5)
 * carry inline <style> blocks whose colors are all var(--lwp-*, <classic
 * fallback>) — in classic mode the palette variables are undefined, so
 * the fallbacks render exactly as before; in modern mode the :root
 * palette (css/lwp-modern-palette-styles.php) resolves and the templates
 * follow the selected palette (page background, article text, sidebar
 * boxes, links).
 *
 * This file covers what those inline blocks don't style themselves:
 * post-content links in the layouts with no inline `a` rule (layout5
 * defines its own) and the prev/next post navigation (single.php).
 * Without it, modern-mode content links fall back to browser-default
 * blue, because the classic style.css is dequeued in modern mode.
 *
 * All colors via --lwp-* palette variables with hardcoded fallbacks.
 * Every selector is scoped under body.lwp-theme-mode-modern + the
 * template's own class prefix — no global selectors.
 *
 * Loaded on the frontend in modern mode only (lwp-modern-single handle,
 * see functions.php).
 */

/* ===== Default layout: hero image =====
 * The classic style.css and Bootstrap are dequeued in modern mode, so the
 * img { max-width: 100%; height: auto } reset that used to keep the
 * full-size thumbnail inside its grid column is gone — the <img> renders
 * at natural size and blows out the 0.8fr/1.2fr hero grid. Constrain it
 * here, modern-only (classic keeps Bootstrap's behavior).
 */
body.lwp-theme-mode-modern .single-hero-image-wrapper {
	overflow: hidden;
}

body.lwp-theme-mode-modern .single-hero-image-wrapper img {
	display: block;
	width: 100%;
	height: auto;
	max-height: 700px;
	object-fit: cover;
	border-radius: 24px 0 0 24px;
}

/* ===== Post content links ===== */
body.lwp-theme-mode-modern .single-content-body a,
body.lwp-theme-mode-modern .layout1-content a,
body.lwp-theme-mode-modern .layout2-content a,
body.lwp-theme-mode-modern .layout3-content a,
body.lwp-theme-mode-modern .layout4-content a {
	color: var(--lwp-accent-light, #a382de);
}

body.lwp-theme-mode-modern .single-content-body a:hover,
body.lwp-theme-mode-modern .layout1-content a:hover,
body.lwp-theme-mode-modern .layout2-content a:hover,
body.lwp-theme-mode-modern .layout3-content a:hover,
body.lwp-theme-mode-modern .layout4-content a:hover {
	color: var(--lwp-accent, #7c5cbf);
}

/* ===== Post navigation (single.php prev/next) =====
 * Bootstrap utility classes (d-flex, justify-content-between, ...) are not
 * loaded in modern mode, so restore the row layout they provided.
 */
body.lwp-theme-mode-modern .post-navigation {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 2rem;
}

body.lwp-theme-mode-modern .post-navigation-wrapper .post-nav-link {
	color: var(--lwp-text-secondary, #9aa5b8);
	text-decoration: none;
	transition: var(--lwp-transition, all 0.4s cubic-bezier(0.4, 0, 0.2, 1));
}

body.lwp-theme-mode-modern .post-navigation-wrapper .post-nav-link:hover {
	color: var(--lwp-accent-light, #a382de);
}