/*
Theme Name: GeneratePress Child - Liferror.com
Theme URI: https://liferror.com
Description: GeneratePress child theme customized for Liferror.com. Features a flat, minimal, space-efficient, and mobile-first design tailored for Korean typography and peak readability.
Author: Liferror Team
Author URI: https://liferror.com
Template: generatepress
Version: 2.8.57
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: generatepress-child
*/

/* ==========================================================================
   1. Design Tokens (Flat, Minimalist & Space-Efficient)
   ========================================================================== */
:root {
	/* Typography Stacks: Mobile-first native system fonts for zero render blocking */
	--le-font-sans: -apple-system, BlinkMacSystemFont, 'Apple SD Gothic Neo', system-ui, Roboto, 'Noto Sans KR', 'Segoe UI', 'Malgun Gothic', sans-serif;
	--le-font-mono: 'JetBrains Mono', 'Fira Code', Consolas, Monaco, 'D2Coding', monospace;

	/* Color System: Flat & High Contrast */
	--le-text-primary: #111827;      /* Crisp dark gray for text, avoiding eye-straining pure black */
	--le-text-secondary: #4b5563;    /* Muted body and sub-descriptions */
	--le-text-muted: #6b7280;        /* Meta timestamps, tags, captions */
	--le-tagline-muted: #9ca3af;     /* Quiet logo tagline and separator */
	--le-tagline-hover: #6b7280;     /* More readable light-mode interaction state */
	--le-primary: #1d4ed8;           /* Clean flat accent blue */
	--le-primary-hover: #1e40af;     /* Deepened hover blue */
	--le-primary-tint: #eff6ff;      /* Extremely soft blue surface */
	--le-logo-error: #1d4ed8;        /* Deep, rich cobalt blue for light mode logo */

	/* Surfaces & Borders (Pure Flat: 0 Shadows) */
	--le-bg-page: #f8fafc;
	--le-bg-surface: #ffffff;
	--le-bg-subtle: #f3f4f6;
	--le-bg-subtle-alt: #f9fafb;
	--le-border-color: #e5e7eb;
	--le-border-subtle: #f1f5f9;
	--le-border-dark: #cbd5e1;

	/* Compact Spacing Scale (Anti-Waste) */
	--le-space-xxs: 4px;
	--le-space-xs: 8px;
	--le-space-sm: 12px;
	--le-space-md: 16px;
	--le-space-lg: 24px;
	--le-space-xl: 32px;

	/* Minimal Radiuses (Crisp, Angular & Modern Flat) */
	--le-radius-sm: 2px;
	--le-radius-md: 4px;
	--le-radius-lg: 6px;

	/* Korean Typography Scale (Enhanced Readability) */
	--le-font-body: 1.125rem;        /* ~18px desktop (scaled up for enhanced legibility) */
	--le-lh-body: 1.82;              /* Generous, comfortable Korean line-height */
	--le-lh-heading: 1.35;
	--le-ls-body: -0.015em;
	--le-ls-heading: -0.025em;
}

/* Desktop Typography (>= 1025px): Pretendard web font */
@media screen and (min-width: 1025px) {
	:root {
		--le-font-sans: 'Pretendard', -apple-system, BlinkMacSystemFont, system-ui, Roboto, 'Apple SD Gothic Neo', 'Noto Sans KR', 'Segoe UI', 'Malgun Gothic', sans-serif;
	}
}

/* ==========================================================================
   Dark Mode Color System (Pure Flat Neutral Charcoal Gray Palette)
   ========================================================================== */
:root[data-theme="dark"] {
	--le-bg-page: #121212;
	--le-bg-surface: #1e1e1e;
	--le-bg-subtle: #2d2d2d;
	--le-bg-subtle-alt: #252525;
	--le-border-color: #2f2f2f;
	--le-border-subtle: #242424;
	--le-border-dark: #444444;

	--le-text-primary: #f3f4f6;
	--le-text-secondary: #d1d5db;
	--le-text-muted: #9ca3af;
	--le-tagline-muted: #888888;
	--le-tagline-hover: #b0b0b0;

	--le-primary: #3b82f6;
	--le-primary-hover: #60a5fa;
	--le-primary-tint: rgba(59, 130, 246, 0.15);
	--le-logo-error: #3b82f6;

	/* GeneratePress Native Variables in Dark Mode */
	--contrast: #f3f4f6;
	--contrast-2: #d1d5db;
	--contrast-3: #9ca3af;
	--base: #121212;
	--base-2: #252525;
	--base-3: #1e1e1e;
	--accent: #3b82f6;
}

@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]) {
		--le-bg-page: #121212;
		--le-bg-surface: #1e1e1e;
		--le-bg-subtle: #2d2d2d;
		--le-bg-subtle-alt: #252525;
		--le-border-color: #2f2f2f;
		--le-border-subtle: #242424;
		--le-border-dark: #444444;

		--le-text-primary: #f3f4f6;
		--le-text-secondary: #d1d5db;
		--le-text-muted: #9ca3af;
		--le-tagline-muted: #888888;
		--le-tagline-hover: #b0b0b0;

		--le-primary: #3b82f6;
		--le-primary-hover: #60a5fa;
		--le-primary-tint: rgba(59, 130, 246, 0.15);
		--le-logo-error: #3b82f6;

		--contrast: #f3f4f6;
		--contrast-2: #d1d5db;
		--contrast-3: #9ca3af;
		--base: #121212;
		--base-2: #252525;
		--base-3: #1e1e1e;
		--accent: #3b82f6;
	}
}

/* ==========================================================================
   2. Global Reset & Flat Base Architecture
   ========================================================================== */
*,
*::before,
*::after {
	-webkit-tap-highlight-color: transparent !important;
}

html {
	margin: 0;
	padding: 0;
	height: 100%;
	background-color: var(--le-bg-page) !important;
	color: var(--le-text-primary) !important;
	-webkit-text-size-adjust: 100%;
	text-rendering: optimizeLegibility;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	scroll-behavior: smooth;
}

body {
	margin: 0;
	padding: 0;
	min-height: 100vh;
	min-height: 100dvh; /* Mobile dynamic viewport height */
	display: flex;
	flex-direction: column;
	background-color: var(--le-bg-page);
	color: var(--le-text-primary);
	font-family: var(--le-font-sans);
	font-size: var(--le-font-body);
	line-height: var(--le-lh-body);
	letter-spacing: var(--le-ls-body);
	word-break: keep-all;            /* Keep Korean words together naturally */
	overflow-wrap: break-word;       /* Prevent overflow from long URLs or English words */
}

/* Adjust sticky footer container when WordPress admin bar is present */
.admin-bar {
	min-height: calc(100vh - 32px);
	min-height: calc(100dvh - 32px);
}

@media screen and (max-width: 782px) {
	.admin-bar {
		min-height: calc(100vh - 46px);
		min-height: calc(100dvh - 46px);
	}
}

/* Sticky Footer: Flex expansion ensuring content pushes footer to viewport bottom */
#page,
.site {
	flex: 1 0 auto;
	display: flex;
	flex-direction: column;
	width: 100%;
}

.site-content {
	flex: 1 0 auto;
}

/* Eliminate all default bulky drop shadows for true flat design */
*,
*::before,
*::after {
	box-shadow: none !important;
}

/* Links */
a {
	color: var(--le-primary);
	text-decoration: none;
	transition: color 0.15s ease, border-color 0.15s ease, background-color 0.15s ease;
}

a:hover,
a:focus {
	color: var(--le-primary-hover);
}


/* ==========================================================================
   3. Header & Navigation (Ultra-Slim, Minimal & Space-Efficient)
   ========================================================================== */
/* Header Container: Slim height and zero vertical waste */
.site-header {
	background-color: var(--le-bg-surface);
	border-bottom: 1px solid var(--le-border-color);
	position: relative;
}

.inside-header {
	padding: 4px var(--le-space-md) !important;
	min-height: 42px;
	display: flex !important;
	flex-direction: row !important;
	flex-wrap: nowrap !important; /* Strictly force single-row alignment across all devices */
	align-items: center !important;
	justify-content: space-between !important;
	box-sizing: border-box;
}

/* Eliminate GP default bottom margins between header elements */
.inside-header > :not(:last-child):not(.main-navigation) {
	margin-bottom: 0 !important;
}

/* Site Branding (Expanded Click/Touch Area) */
.site-branding {
	display: flex !important;
	align-items: center !important;
	flex: 1 1 auto !important;
	align-self: stretch !important;
	margin: 0 !important;
	padding: 0 !important;
	text-align: left !important;
	cursor: pointer;
}

.site-branding .main-title {
	font-size: clamp(1.35rem, 1.2vw + 1rem, 1.62rem) !important;
	line-height: 1.15 !important;
	margin: 0 !important;
	padding: 0 !important;
	display: flex;
	align-items: center;
	height: 100%;
}

.site-branding .main-title .brand-logo-link,
.site-branding .main-title a {
	color: var(--le-text-primary);
	display: inline-flex;
	align-items: center;
	height: 100%;
	padding: 2px 12px 2px 0;
	text-decoration: none;
}

/* Brand Logo Typography (Life + Error) */
.brand-logo-text {
	font-family: 'Plus Jakarta Sans', 'Outfit', 'Inter', 'Pretendard', -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Segoe UI Variable Display', 'Segoe UI', system-ui, sans-serif;
	display: inline-flex;
	align-items: baseline;
	letter-spacing: -0.04em;
	line-height: 1;
	user-select: none;
}

/* "Life" part: inherits Theme Customizer site title color, fallback to crisp dark */
.brand-part-life {
	font-weight: 850;
	color: var(--le-text-primary);
	letter-spacing: -0.04em;
	transition: color 0.35s cubic-bezier(0.4, 0, 0.2, 1);
	will-change: color;
}

/* "error" part: connects to Theme Customizer accent/link color, fallback to signature blue */
.brand-part-error {
	font-weight: 700;
	color: var(--le-logo-error, var(--le-primary));
	letter-spacing: -0.03em;
	transition: color 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Optional separator (+, ., /) */
.brand-part-sep {
	font-weight: 400;
	color: var(--le-text-muted);
	margin: 0 1px;
	transition: color 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Optional domain extension (.com, etc.) */
.brand-part-tld {
	font-weight: 500;
	font-size: 0.88em;
	color: var(--le-text-muted);
	letter-spacing: -0.01em;
	margin-left: 1px;
	transition: color 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Custom blog title fallback */
.brand-part-custom {
	font-weight: 800;
	color: var(--le-text-primary);
	letter-spacing: -0.025em;
	transition: color 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Micro-interactions on hover: Life unifies with rror into signature brand accent */
.brand-logo-link:hover .brand-part-life,
.site-branding:hover .brand-part-life {
	color: var(--le-logo-error, var(--le-primary)) !important;
	opacity: 1 !important;
}

/* "error" keeps its original signature color on hover */
.brand-logo-link:hover .brand-part-error,
.site-branding:hover .brand-part-error {
	color: var(--le-logo-error, var(--le-primary)) !important;
}

/* Desktop tagline: align it to the right of the logo on the same baseline. */
@media screen and (min-width: 769px) {
	.site-branding {
		gap: 0 !important;
		align-items: center !important;
	}

	.site-branding .main-title .brand-logo-link,
	.site-branding .main-title a {
		padding-right: 0 !important;
	}

	.site-description {
		display: block !important;
		align-self: flex-end !important;
		transform: translateY(-5px) !important;
		margin: 0 0 0 12px !important;
		padding: 0 !important;
		border-left: none !important;
		font-size: 0.84rem !important;
		line-height: 1 !important;
		color: var(--le-tagline-muted) !important;
		transition: color 0.15s ease !important;
		white-space: nowrap !important;
	}

}

@media screen and (max-width: 768px) {
	.site-branding {
		gap: 0 !important;
		min-width: 0 !important;
	}

	.site-branding .main-title {
		flex: 0 0 auto !important;
	}

	.site-branding .main-title .brand-logo-link,
	.site-branding .main-title a {
		padding-right: 0 !important;
	}

	.site-description {
		display: block !important;
		align-self: flex-end !important;
		transform: translateY(-8px) !important;
		flex: 0 1 auto !important;
		min-width: 0 !important;
		max-width: 38vw !important;
		margin: 0 0 0 8px !important;
		padding: 0 !important;
		border-left: none !important;
		font-size: 0.72rem !important;
		line-height: 1 !important;
		color: var(--le-tagline-muted) !important;
		transition: color 0.15s ease !important;
		white-space: nowrap !important;
		overflow: hidden !important;
		text-overflow: ellipsis !important;
	}

}

.site-branding:hover .site-description,
.site-branding:focus-within .site-description,
.site-branding:active .site-description {
	color: var(--le-tagline-hover) !important;
}

/* Desktop: Menu toggle button is hidden by default (mobile only) */
.menu-toggle {
	display: none !important;
}

/* Header Widget Area (Buttons/Icons on Right) */
.header-widget {
	margin: 0 0 0 auto !important;
	display: flex;
	align-items: center;
}

.header-widget .widget {
	padding: 0 !important;
	margin: 0 !important;
	border: none !important;
	background: transparent !important;
}

/* Header Theme Toggle Button */
.header-theme-toggle {
	display: inline-flex !important;
	align-items: center !important;
	order: 1 !important;
	flex-shrink: 0 !important;
}

/* Desktop: Generous separation & elegant vertical hairline divider between menu & theme button */
@media (min-width: 769px) {
	.inside-header .main-navigation {
		margin-left: auto !important;
		border: none !important;
		background: transparent !important;
	}

	.header-theme-toggle {
		position: relative !important;
		margin-left: 8px !important;
		padding-left: 20px !important;
		border-left: none !important;
	}

	/* Refined 14px hairline vertical divider */
	.header-theme-toggle::before {
		content: "";
		position: absolute;
		left: 0;
		top: 50%;
		transform: translateY(-50%);
		width: 1px;
		height: 14px;
		background-color: var(--le-border-color);
	}
}

.theme-toggle-btn {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	width: 30px !important;
	height: 30px !important;
	min-height: 30px !important;
	max-height: 30px !important;
	box-sizing: border-box !important;
	padding: 0 !important;
	background-color: transparent !important;
	border: 1px solid var(--le-border-color) !important;
	border-radius: var(--le-radius-sm) !important;
	color: var(--le-text-secondary) !important;
	cursor: pointer;
	transition: border-color 0.15s ease, background-color 0.15s ease, color 0.15s ease;
	outline: none;
}

.theme-toggle-btn:hover {
	border-color: var(--le-primary);
	color: var(--le-primary);
	background-color: var(--le-primary-tint);
}

.theme-toggle-btn svg {
	width: 15px;
	height: 15px;
	stroke-width: 2;
}

/* Icon visibility switching */
.theme-toggle-btn .icon-sun {
	display: none;
}
.theme-toggle-btn .icon-moon {
	display: block;
}

:root[data-theme="dark"] .theme-toggle-btn .icon-sun {
	display: block;
}
:root[data-theme="dark"] .theme-toggle-btn .icon-moon {
	display: none;
}

@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]) .theme-toggle-btn .icon-sun {
		display: block;
	}
	:root:not([data-theme="light"]) .theme-toggle-btn .icon-moon {
		display: none;
	}
}

/* Main Navigation: Compact Bar */
.main-navigation {
	background-color: var(--le-bg-surface);
	border-bottom: 1px solid var(--le-border-color);
}

.inside-header .main-navigation {
	border-bottom: none !important;
	background-color: transparent !important;
}

.main-navigation .main-nav ul li a {
	font-size: 0.9rem;
	font-weight: 500;
	color: var(--le-text-secondary);
	padding-left: var(--le-space-sm);
	padding-right: var(--le-space-sm);
	line-height: 34px !important; /* Compact line-height for 42px header */
	transition: color 0.18s ease;
}

/* Desktop Header Navigation: Clean underline indicator without bulky background box */
@media (min-width: 769px) {
	.main-navigation .main-nav > ul > li > a {
		position: relative;
		background-color: transparent !important;
	}

	/* Sleek bottom underline indicator (2.5px thick) */
	.main-navigation .main-nav > ul > li > a::after {
		content: "";
		position: absolute;
		bottom: 1px;
		left: var(--le-space-sm);
		right: var(--le-space-sm);
		height: 2.5px;
		background-color: var(--le-primary);
		border-radius: 2px;
		opacity: 0;
		transform: scaleX(0);
		transform-origin: center;
		transition: transform 0.22s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.22s ease;
	}

	/* Hover & Active states: Color accent + smooth underline expansion, transparent background */
	.main-navigation .main-nav > ul > li:hover > a,
	.main-navigation .main-nav > ul > li.current-menu-item > a,
	.main-navigation .main-nav > ul > li.current-menu-ancestor > a {
		color: var(--le-primary) !important;
		background-color: transparent !important;
	}

	.main-navigation .main-nav > ul > li:hover > a::after,
	.main-navigation .main-nav > ul > li.current-menu-item > a::after,
	.main-navigation .main-nav > ul > li.current-menu-ancestor > a::after {
		opacity: 1;
		transform: scaleX(1);
	}

	/* Submenu dropdown refinement (Pure Flat: Zero Drop Shadows) */
	.main-navigation ul.sub-menu {
		border-radius: var(--le-radius-md) !important;
		border: 1px solid var(--le-border-color) !important;
		box-shadow: none !important;
		background-color: var(--le-bg-surface) !important;
		padding: 6px 0 !important;
	}

	.main-navigation ul.sub-menu li a {
		line-height: 1.5 !important;
		padding: 8px 16px !important;
		font-size: 0.85rem !important;
	}

	.main-navigation ul.sub-menu li a::after {
		display: none !important;
	}

	.main-navigation ul.sub-menu li:hover > a,
	.main-navigation ul.sub-menu li.current-menu-item > a {
		color: var(--le-primary) !important;
		background-color: var(--le-primary-tint) !important;
	}
}

/* Mobile Toggled Navigation fallback hover */
@media (max-width: 768px) {
	.main-navigation.toggled .main-nav ul li:hover > a,
	.main-navigation.toggled .main-nav ul li.current-menu-item > a {
		color: var(--le-primary);
		background-color: var(--le-bg-subtle);
	}
}


/* ==========================================================================
   4. Layout, Containers & Post Cards (Flat & Compact Spacing)
   ========================================================================== */
/* Tighten container outer margins to reduce empty space waste */
.site-content {
	padding-top: var(--le-space-md) !important;
	padding-bottom: var(--le-space-xl) !important;
}

.site-content.grid-container {
	padding-left: 8px !important;
	padding-right: 8px !important;
}

/* Gaps between articles in loop: compact from GP 20-30px down to 14px */
.separate-containers .site-main > * {
	margin-bottom: var(--le-space-md) !important;
}

/* Article Card: 100% Flat with Clean 1px Border */
.inside-article {
	background-color: var(--le-bg-surface);
	border: 1px solid var(--le-border-color);
	border-radius: var(--le-radius-md);
	padding: 24px 19px !important; /* Horizontal padding reduced by 21% */
}

/* Comments Area: Transparent container globally (outer box eliminated) */
.separate-containers .comments-area,
.comments-area {
	background-color: transparent !important;
	background: none !important;
	border: none !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	padding: 0 !important;
}

/* Clickable Loop Cards: Pointer cursor & subtle hover feedback in non-single pages */
.blog article .inside-article,
.archive article .inside-article,
.search article .inside-article {
	cursor: pointer;
	-webkit-tap-highlight-color: transparent !important;
	-webkit-user-select: none;
	user-select: none;
	-webkit-touch-callout: none;
	transition: border-color 0.15s ease;
}

.blog article .inside-article:hover,
.archive article .inside-article:hover,
.search article .inside-article:hover {
	border-color: var(--le-border-dark);
}

.blog article .inside-article:active,
.archive article .inside-article:active,
.search article .inside-article:active {
	border-color: var(--le-border-dark);
	/* Background remains stable to prevent flashing or color inversion on tap/click */
}
/* Featured Images & Post Thumbnails (Subtle Radius for Modern Clean Visuals) */
.post-image,
.post-image a,
.post-image img,
.featured-image,
.featured-image a,
.featured-image img,
.page-header-image-single,
.page-header-image-single img,
.page-header-image,
.page-header-image img {
	border-radius: var(--le-radius-md);
}

.post-image,
.featured-image,
.page-header-image-single,
.page-header-image {
	overflow: hidden;
}

.post-image img,
.featured-image img,
.page-header-image-single img,
.page-header-image img {
	display: block;
	width: 100%;
	height: auto;
}

/* Keep archive thumbnails evenly spaced from the title/meta and excerpt. */
.blog article .post-image,
.archive article .post-image,
.search article .post-image {
	margin-top: 0.75em !important;
	margin-bottom: 0.75em !important;
}


/* Post Header & Compact Title/Meta Area (Eliminates Bloated Gap) */
.entry-header {
	margin-bottom: 0 !important;
}

.entry-title {
	font-size: clamp(1.55rem, 3.4vw, 1.95rem) !important;
	font-weight: 750;
	line-height: 1.34;
	letter-spacing: var(--le-ls-heading);
	margin-top: 0;
	margin-bottom: 8px !important;
	word-break: keep-all;
	overflow-wrap: break-word;
}

.entry-title a {
	color: var(--le-text-primary);
	text-decoration: none;
	text-underline-offset: 5px;
	text-decoration-thickness: 1.5px;
	transition: color 0.15s ease;
}

.entry-title a:hover,
.entry-title a:focus {
	color: var(--le-primary);
	text-decoration: underline;
	text-decoration-thickness: 1.5px !important;
	text-underline-offset: 5px;
}

/* Post list card hover/touch/focus: Change entry-title color and underline dynamically */
.blog article .inside-article:hover .entry-title a,
.archive article .inside-article:hover .entry-title a,
.search article .inside-article:hover .entry-title a,
.blog article .inside-article:active .entry-title a,
.archive article .inside-article:active .entry-title a,
.search article .inside-article:active .entry-title a,
.blog article .inside-article:focus-within .entry-title a,
.archive article .inside-article:focus-within .entry-title a,
.search article .inside-article:focus-within .entry-title a {
	color: var(--le-primary);
	text-decoration: underline;
	text-decoration-thickness: 1.5px !important;
	text-underline-offset: 5px;
}

/* Compact Header Entry Metadata (Date, Author, Reading Time) */
.entry-header .entry-meta {
	display: flex !important;
	flex-wrap: wrap !important;
	align-items: center !important;
	gap: 0 !important; /* Zero ad-hoc flex gap so dividers control uniform pixel-perfect spacing */
	font-size: 0.84rem !important;
	color: var(--le-text-muted) !important;
	margin-top: 6px !important;
	margin-bottom: 0 !important;
	line-height: 1.5 !important;
	padding-bottom: 12px !important;
	border-bottom: 1px solid var(--le-border-subtle) !important;
}

.entry-header .entry-meta .posted-on,
.entry-header .entry-meta .byline {
	display: inline-flex !important;
	align-items: center !important;
	margin: 0 !important;
	padding: 0 !important;
}

.posted-on .updated-date {
	display: inline-flex;
	align-items: center;
}

.posted-on .updated-prefix {
	font-weight: 500;
	margin-right: 4px;
	color: var(--le-text-muted);
}

/* Hide reading time meta per user request */
.entry-header .reading-time-meta,
.reading-time-meta {
	display: none !important;
}

/* Symmetrical and uniform bullet separator between all metadata elements */
.entry-header .entry-meta .byline::before {
	content: "•" !important;
	display: inline-block !important;
	margin: 0 8px !important;
	color: var(--le-border-dark) !important;
	font-weight: 400 !important;
	font-size: 0.85em !important;
	line-height: 1 !important;
	opacity: 0.8;
}

/* Ensure proper spacing between "by" prefix and author name inside flex container */
.entry-header .entry-meta .byline .author,
.byline .author {
	margin-left: 0.35em !important;
}

/* Eliminate GP default 2em gap between header/meta and content */
.entry-content:not(:first-child),
.entry-summary:not(:first-child),
.page-content:not(:first-child) {
	margin-top: 16px !important;
}

.entry-content > :first-child {
	margin-top: 0 !important;
}

/* ==========================================================================
   Slim Outline "READ MORE" Button (Flat Minimalist, Compact ~30px)
   ========================================================================== */
.read-more-container {
	margin-top: 14px !important;
	margin-bottom: 0 !important;
}

.read-more-container a.read-more,
.read-more-container a.button,
.read-more-container a,
.entry-summary a.read-more,
a.read-more {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	font-family: var(--le-font-sans) !important;
	font-size: 0.78rem !important;
	font-weight: 600 !important;
	letter-spacing: 0.05em !important;
	text-transform: uppercase !important;
	line-height: 1 !important;
	padding: 7px 15px !important; /* Slim modern height ~30px */
	border-radius: var(--le-radius-sm) !important;
	background-color: var(--le-bg-surface) !important;
	color: var(--le-text-secondary) !important;
	border: 1px solid var(--le-border-color) !important;
	box-shadow: none !important;
	text-decoration: none !important;
	transition: border-color 0.15s ease, color 0.15s ease, background-color 0.15s ease !important;
}

/* Hover state: subtle tone shift in both light and dark modes (no loud blue) */
.read-more-container a.read-more:hover,
.read-more-container a.button:hover,
.read-more-container a:hover,
.entry-summary a.read-more:hover,
a.read-more:hover,
.read-more-container a:focus,
.blog article .inside-article:hover a.read-more,
.archive article .inside-article:hover a.read-more,
.search article .inside-article:hover a.read-more,
.blog article .inside-article:hover .read-more-container a.button,
.archive article .inside-article:hover .read-more-container a.button,
.search article .inside-article:hover .read-more-container a.button,
.blog article .inside-article:hover .read-more-container a,
.archive article .inside-article:hover .read-more-container a,
.search article .inside-article:hover .read-more-container a {
	background-color: var(--le-bg-subtle) !important;
	color: var(--le-text-primary) !important;
	border-color: var(--le-border-dark) !important;
	text-decoration: none !important;
}

/* Active / touch state: triggered both directly and on parent post card click/tap */
.read-more-container a.read-more:active,
.read-more-container a.button:active,
.read-more-container a:active,
.entry-summary a.read-more:active,
a.read-more:active,
.blog article .inside-article:active a.read-more,
.archive article .inside-article:active a.read-more,
.search article .inside-article:active a.read-more,
.blog article .inside-article:active .read-more-container a.button,
.archive article .inside-article:active .read-more-container a.button,
.search article .inside-article:active .read-more-container a.button,
.blog article .inside-article:active .read-more-container a,
.archive article .inside-article:active .read-more-container a,
.search article .inside-article:active .read-more-container a {
	background-color: var(--le-bg-subtle) !important;
	color: var(--le-text-primary) !important;
	border-color: var(--le-border-dark) !important;
	opacity: 0.85 !important;
	text-decoration: none !important;
}

.entry-meta a {
	color: var(--le-text-secondary);
}

.entry-meta a:hover {
	color: var(--le-primary);
}

/* Post Card & Archive Footer Metadata (Categories, Tags, Comments: One per Line) */
footer.entry-meta {
	display: flex !important;
	flex-direction: column !important;
	align-items: flex-start !important;
	gap: 6px !important; /* Clean vertical spacing between category, tag, comment lines */
	clear: both !important;
	margin-top: 14px !important;
	margin-bottom: 0 !important;
	padding-top: 10px !important;
	padding-bottom: 0 !important;
	border-top: 1px solid var(--le-border-subtle) !important;
	border-bottom: none !important;
	font-size: 0.86rem !important;
	line-height: 1.5 !important;
	color: var(--le-text-muted) !important;
	width: 100% !important;
	box-sizing: border-box !important;
}

/* Category, Tag & Comment Lines: Full width for one item per line */
.cat-links,
.tags-links,
.comments-link {
	display: flex !important;
	align-items: center !important;
	flex-wrap: wrap !important;
	width: 100% !important;
	gap: 0 !important;
	font-size: 0.86rem !important;
	line-height: 1.5 !important;
	color: var(--le-text-muted) !important;
	margin: 0 !important;
	padding: 0 !important;
}

.cat-links a,
.tags-links a,
.comments-link a {
	display: inline !important;
	background: transparent !important;
	background-color: transparent !important;
	border: none !important;
	padding: 0 !important;
	margin: 0 !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	color: var(--le-text-secondary) !important;
	font-size: 0.86rem !important;
	font-weight: 550 !important;
	line-height: 1.5 !important;
	text-decoration: none !important;
	transition: color 0.15s ease;
}

.cat-links a:hover,
.tags-links a:hover,
.comments-link a:hover {
	background: transparent !important;
	background-color: transparent !important;
	border: none !important;
	color: var(--le-primary) !important;
	text-decoration: underline !important;
	text-underline-offset: 3px;
}

/* Align GP Icon seamlessly with Category/Tag/Comment text (Comfortable 6px Spacing & 14px Matched Size) */
.cat-links .gp-icon,
.tags-links .gp-icon,
.comments-link .gp-icon,
.entry-header .entry-meta .gp-icon,
footer.entry-meta .cat-links .gp-icon,
footer.entry-meta .tags-links .gp-icon,
footer.entry-meta .comments-link .gp-icon {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	margin-right: 6px !important; /* Comfortable 6px separation between icon and text */
	margin-left: 0 !important;
	padding: 0 !important;
	color: var(--le-text-muted) !important;
	vertical-align: middle !important;
	flex-shrink: 0 !important;
	line-height: 1 !important;
}

.cat-links .gp-icon svg,
.tags-links .gp-icon svg,
.comments-link .gp-icon svg,
.entry-header .entry-meta .gp-icon svg,
footer.entry-meta .cat-links svg,
footer.entry-meta .tags-links svg,
footer.entry-meta .comments-link svg {
	position: static !important;
	top: 0 !important; /* Overrides GP default relative top:.125em for razor-sharp vertical centering */
	width: 14px !important;
	height: 14px !important;
	fill: currentColor;
	display: block !important;
}


/* ==========================================================================
   5. Content Typography & Gutenberg Block System (Korean-Optimized)
   ========================================================================== */
.entry-content {
	color: var(--le-text-primary);
	font-size: clamp(1.06rem, 1.3vw + 0.6rem, 1.125rem);
	line-height: var(--le-lh-body);
	letter-spacing: var(--le-ls-body);
	word-break: keep-all;
	overflow-wrap: break-word;
}

/* Paragraphs */
.entry-content p,
.entry-content .wp-block-paragraph {
	margin-top: 0;
	margin-bottom: 1.38em;
	line-height: var(--le-lh-body);
}

/* Content Headings: Cross-Device Fluid Scaling & Korean Word-Break */
.entry-content h1,
.entry-content h2,
.entry-content h3,
.entry-content h4,
.entry-content h5,
.entry-content h6,
.entry-content .wp-block-heading {
	color: var(--le-text-primary);
	line-height: 1.38;
	letter-spacing: var(--le-ls-heading);
	word-break: keep-all;
	overflow-wrap: break-word;
}

/* H2: Minimal Flat Accent Left Border */
.entry-content h2,
.entry-content .wp-block-heading:is(h2) {
	font-size: clamp(1.4rem, 2.5vw, 1.62rem);
	font-weight: 750;
	margin-top: 2.2em;
	margin-bottom: 0.75em;
	padding-left: 10px;
	border-left: 3.5px solid var(--le-primary);
}

/* H3: Understated Sub-header */
.entry-content h3,
.entry-content .wp-block-heading:is(h3) {
	font-size: clamp(1.22rem, 2vw, 1.38rem);
	font-weight: 700;
	margin-top: 1.8em;
	margin-bottom: 0.6em;
	color: #1e293b;
}

/* H4: Section Subdivision */
.entry-content h4,
.entry-content .wp-block-heading:is(h4) {
	font-size: clamp(1.1rem, 1.6vw, 1.22rem);
	font-weight: 650;
	margin-top: 1.4em;
	margin-bottom: 0.5em;
}

/* H5 & H6 */
.entry-content h5,
.entry-content .wp-block-heading:is(h5) {
	font-size: 1.06rem;
	font-weight: 600;
	margin-top: 1.2em;
	margin-bottom: 0.4em;
}

.entry-content h6,
.entry-content .wp-block-heading:is(h6) {
	font-size: 0.98rem;
	font-weight: 600;
	color: var(--le-text-secondary);
	margin-top: 1.1em;
	margin-bottom: 0.4em;
	text-transform: uppercase;
	letter-spacing: 0.04em;
}

/* Content Links */
.entry-content a {
	color: var(--le-primary);
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
	transition: color 0.15s ease, text-decoration-thickness 0.15s ease;
}

.entry-content a:hover {
	color: var(--le-primary-hover);
	text-decoration-thickness: 1.5px;
}

/* Lists (Unordered & Ordered) */
.entry-content ul,
.entry-content ol,
.entry-content .wp-block-list {
	margin-top: 0.4em;
	margin-bottom: 1.35em;
	padding-left: 1.4rem;
}

.entry-content li {
	margin-bottom: 0.4em;
	line-height: 1.72;
	word-break: keep-all;
}

.entry-content li > ul,
.entry-content li > ol {
	margin-top: 0.3em;
	margin-bottom: 0.3em;
	padding-left: 1.25rem;
}

/* Blockquotes & Pullquotes: Flat Minimalist Callout Card */
.entry-content blockquote,
.entry-content .wp-block-quote {
	margin: 1.5em 0;
	padding: 1rem 1.25rem;
	background-color: var(--le-bg-subtle-alt);
	border-left: 3.5px solid var(--le-primary);
	border-radius: 0 var(--le-radius-sm) var(--le-radius-sm) 0;
	border-top: none;
	border-right: none;
	border-bottom: none;
	font-style: normal;
	color: var(--le-text-secondary);
	line-height: 1.74;
}

.entry-content blockquote p:last-child,
.entry-content .wp-block-quote p:last-child {
	margin-bottom: 0;
}

.entry-content blockquote cite,
.entry-content .wp-block-quote cite {
	display: block;
	font-size: 0.84rem;
	font-style: normal;
	color: var(--le-text-muted);
	margin-top: 0.6em;
}

.entry-content .wp-block-quote.is-style-plain {
	background-color: transparent;
	padding-left: 1rem;
	padding-right: 0;
}

.entry-content .wp-block-pullquote {
	border-top: 2px solid var(--le-primary);
	border-bottom: 2px solid var(--le-primary);
	border-left: none;
	border-right: none;
	background: transparent;
	padding: 1.5em 1em;
	text-align: center;
	margin: 2em 0;
}

.entry-content .wp-block-pullquote blockquote {
	background: transparent;
	border: none;
	padding: 0;
	margin: 0;
}

/* Inline Code: Flat & Crisp */
.entry-content :not(pre) > code {
	font-family: var(--le-font-mono);
	font-size: 0.86em;
	background-color: var(--le-bg-subtle);
	color: #b91c1c;
	padding: 2px 6px;
	border-radius: var(--le-radius-sm);
	border: 1px solid var(--le-border-color);
	word-break: break-all;
}

/* Preformatted Code: Pure Flat Dark Container */
.entry-content pre,
.entry-content .wp-block-code,
.entry-content .wp-block-preformatted {
	font-family: var(--le-font-mono);
	font-size: 0.88rem;
	line-height: 1.62;
	background-color: #161616;
	color: #f3f4f6;
	padding: 1.1rem 1.25rem;
	border-radius: var(--le-radius-md);
	border: 1px solid #2d2d2d;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	margin: 1.5em 0;
	tab-size: 2;
}

.entry-content pre code,
.entry-content .wp-block-code code {
	background: transparent;
	color: inherit;
	padding: 0;
	border: none;
	font-size: inherit;
}

/* Tables: Responsive Flat Container with Clean Borders */
.entry-content .wp-block-table,
.entry-content table {
	width: 100%;
	border-collapse: collapse;
	margin: 1.6em 0;
	font-size: 0.92rem;
	line-height: 1.55;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	border-radius: var(--le-radius-sm);
	border: 1px solid var(--le-border-color);
}

.entry-content .wp-block-table table {
	margin: 0;
	border: none;
}

.entry-content th,
.entry-content td {
	padding: 0.75rem 1rem;
	border: 1px solid var(--le-border-color);
	text-align: left;
}

.entry-content th {
	background-color: var(--le-bg-subtle);
	font-weight: 650;
	color: var(--le-text-primary);
	white-space: nowrap;
}

.entry-content tr:nth-child(even) td,
.entry-content .wp-block-table.is-style-stripes tbody tr:nth-child(odd) {
	background-color: var(--le-bg-subtle-alt);
}

.entry-content figcaption.wp-block-table__caption {
	font-size: 0.82rem;
	color: var(--le-text-muted);
	text-align: center;
	margin-top: 6px;
}

/* Images, Figures & Media */
.entry-content figure,
.entry-content .wp-block-image {
	margin: 1.6em 0;
}

.entry-content img,
.entry-content .wp-block-image img,
.entry-content figure img,
.entry-content .wp-block-cover,
.entry-content .wp-block-media-text__media,
.entry-content .wp-block-media-text__media img,
.entry-content .wp-block-gallery .wp-block-image img {
	border-radius: var(--le-radius-md);
}

.entry-content .wp-block-image,
.entry-content .wp-block-cover,
.entry-content .wp-block-media-text__media {
	border-radius: var(--le-radius-md);
	overflow: hidden;
}

.entry-content img {
	max-width: 100%;
	height: auto;
	border: 1px solid var(--le-border-subtle);
	display: block;
	margin-left: auto;
	margin-right: auto;
}

.entry-content figcaption,
.entry-content .wp-caption-text {
	font-size: 0.82rem;
	color: var(--le-text-muted);
	text-align: center;
	margin-top: 0.6em;
	line-height: 1.45;
	word-break: keep-all;
}

.entry-content .wp-block-gallery {
	gap: 12px;
	margin: 1.6em 0;
}

/* Separators / Dividers */
.entry-content hr,
.entry-content .wp-block-separator {
	border: none !important;
	height: 1px !important;
	background-color: var(--le-border-color) !important;
	margin: 2.4em auto !important;
	max-width: 100% !important;
	opacity: 1 !important;
}

.entry-content .wp-block-separator.is-style-dots {
	background: transparent !important;
	height: auto !important;
	text-align: center;
	letter-spacing: 0.5em;
	color: var(--le-text-muted);
	font-size: 1.25rem;
}

.entry-content .wp-block-separator.is-style-wide {
	width: 100% !important;
}

/* Gutenberg Buttons */
.entry-content .wp-block-buttons {
	margin: 1.5em 0;
	gap: 10px;
}

.entry-content .wp-block-button__link {
	display: inline-block;
	background-color: var(--le-primary);
	color: #ffffff !important;
	font-weight: 600;
	font-size: 0.92rem;
	padding: 8px 18px;
	border-radius: var(--le-radius-sm);
	border: 1px solid transparent;
	text-decoration: none !important;
	transition: background-color 0.15s ease, border-color 0.15s ease;
	box-shadow: none !important;
}

.entry-content .wp-block-button__link:hover,
.entry-content .wp-block-button__link:focus {
	background-color: var(--le-primary-hover);
	color: #ffffff !important;
}

.entry-content .wp-block-button.is-style-outline .wp-block-button__link {
	background-color: transparent;
	color: var(--le-primary) !important;
	border-color: var(--le-primary);
}

.entry-content .wp-block-button.is-style-outline .wp-block-button__link:hover {
	background-color: var(--le-primary-tint);
	color: var(--le-primary-hover) !important;
	border-color: var(--le-primary-hover);
}

/* Accordion / Details */
.entry-content details,
.entry-content .wp-block-details {
	background-color: var(--le-bg-subtle-alt);
	border: 1px solid var(--le-border-color);
	border-radius: var(--le-radius-md);
	padding: 12px 16px;
	margin: 1.4em 0;
}

.entry-content summary {
	font-weight: 650;
	cursor: pointer;
	color: var(--le-text-primary);
	user-select: none;
	outline: none;
}

.entry-content details[open] summary {
	margin-bottom: 10px;
	border-bottom: 1px solid var(--le-border-subtle);
	padding-bottom: 8px;
}

/* File Download Block */
.entry-content .wp-block-file {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 12px;
	background-color: var(--le-bg-subtle-alt);
	border: 1px solid var(--le-border-color);
	border-radius: var(--le-radius-md);
	padding: 12px 18px;
	margin: 1.4em 0;
}

.entry-content .wp-block-file a:not(.wp-block-file__button) {
	font-weight: 500;
	text-decoration: underline;
}

.entry-content .wp-block-file__button {
	background-color: var(--le-primary);
	color: #ffffff !important;
	padding: 6px 14px;
	border-radius: var(--le-radius-sm);
	font-size: 0.84rem;
	font-weight: 600;
	text-decoration: none !important;
	transition: background-color 0.15s ease;
}

.entry-content .wp-block-file__button:hover {
	background-color: var(--le-primary-hover);
}

/* Embeds & Videos */
.entry-content .wp-block-embed,
.entry-content iframe,
.entry-content video {
	max-width: 100%;
	border-radius: var(--le-radius-md);
	overflow: hidden;
	margin: 1.5em 0;
}

.entry-content audio {
	width: 100%;
	margin: 1.2em 0;
}

/* Inline Semantic Formatting */
.entry-content strong,
.entry-content b {
	font-weight: 700;
	color: var(--le-text-primary);
}

.entry-content em,
.entry-content i {
	font-style: normal;
	color: var(--le-text-secondary);
	font-weight: 500;
}

.entry-content mark {
	background-color: #fef08a;
	color: #111827;
	padding: 1px 5px;
	border-radius: var(--le-radius-sm);
}

.entry-content kbd {
	font-family: var(--le-font-mono);
	font-size: 0.82em;
	background-color: var(--le-bg-subtle);
	border: 1px solid var(--le-border-dark);
	border-radius: var(--le-radius-sm);
	padding: 2px 6px;
	color: var(--le-text-primary);
}

.entry-content del,
.entry-content s {
	color: var(--le-text-muted);
	text-decoration: line-through;
}

.entry-content ins {
	text-decoration: underline;
	text-decoration-color: var(--le-primary);
}

.entry-content abbr[title] {
	text-decoration: underline dotted;
	cursor: help;
}


/* Flat Form Controls */
input[type="text"],
input[type="email"],
input[type="url"],
input[type="search"],
textarea {
	width: 100%;
	background-color: #ffffff;
	border: 1px solid var(--le-border-color);
	border-radius: var(--le-radius-sm);
	padding: 8px 12px;
	font-size: 0.95rem;
	color: var(--le-text-primary);
	outline: none;
	transition: border-color 0.15s ease;
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="url"]:focus,
input[type="search"]:focus,
textarea:focus {
	border-color: var(--le-primary);
}

/* Flat Submit Button */
.submit,
input[type="submit"],
button[type="submit"] {
	background-color: var(--le-primary);
	color: #ffffff;
	border: 1px solid var(--le-primary);
	border-radius: var(--le-radius-sm);
	font-size: 0.92rem;
	font-weight: 600;
	padding: 8px 18px;
	cursor: pointer;
	transition: background-color 0.15s ease;
}

.submit:hover,
input[type="submit"]:hover,
button[type="submit"]:hover {
	background-color: var(--le-primary-hover);
}

/* ==========================================================================
   8. Search Form (Flat & Crisp)
   ========================================================================== */
.search-form {
	display: flex;
	align-items: center;
	gap: var(--le-space-xxs);
}

.search-form .search-field {
	flex: 1;
	height: 40px;
}

.search-form .search-submit {
	height: 40px;
	padding: 0 16px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

/* Note: Pagination styles are modularized in css/archive.css for conditional delivery */



/* ==========================================================================
   9. Sidebar & Widgets (Compact Flat Design)
   ========================================================================== */
.widget {
	background-color: var(--le-bg-surface);
	border: 1px solid var(--le-border-color);
	border-radius: var(--le-radius-md);
	padding: var(--le-space-md) !important;
	margin-bottom: var(--le-space-md) !important;
}

.widget-title {
	font-size: 1.05rem;
	font-weight: 700;
	letter-spacing: -0.02em;
	color: var(--le-text-primary);
	margin-bottom: var(--le-space-sm);
	padding-bottom: var(--le-space-xxs);
	border-bottom: 2px solid var(--le-primary);
	display: inline-block;
}

.widget ul {
	list-style: none;
	padding-left: 0;
	margin: 0;
}

.widget ul li {
	padding: 6px 0;
	border-bottom: 1px solid var(--le-border-subtle);
	font-size: 0.9rem;
	line-height: 1.45;
}

.widget ul li:last-child {
	border-bottom: none;
	padding-bottom: 0;
}

.widget ul li a {
	color: var(--le-text-secondary);
}

.widget ul li a:hover {
	color: var(--le-primary);
}


/* ==========================================================================
   10. Footer (Ultra-Slim, Clean & Flat Sticky Architecture)
   ========================================================================== */
.site-footer {
	margin-top: auto !important; /* Pins footer to bottom of viewport on short pages */
	background-color: var(--le-bg-surface);
	border-top: 1px solid var(--le-border-color);
	font-size: 0.82rem;
	color: var(--le-text-muted);
	width: 100%;
}

/* Eliminate excessive default widget padding if any footer widgets exist */
.site-footer .footer-widgets-container {
	padding: 0 !important;
}

.site-footer .footer-widgets {
	padding: var(--le-space-xs) 0 !important;
}

/* Ultra-Slim Site Info / Copyright Bar (~34-36px height) */
.site-info {
	padding: var(--le-footer-padding, 8px) 0 !important;
	text-align: center;
	line-height: 1.35 !important;
}

.inside-site-info {
	padding: 0 16px !important;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
	gap: 4px 12px;
	min-height: 20px;
}

.copyright-bar {
	font-size: 0.82rem;
	letter-spacing: -0.01em;
	color: var(--le-text-muted);
	line-height: 1.35;
	margin: 0 !important;
}

.copyright-bar a,
.site-info a {
	color: var(--le-text-secondary);
	font-weight: 500;
	transition: color 0.15s ease;
}

.copyright-bar a:hover,
.site-info a:hover {
	color: var(--le-primary);
}

/* Slim Minimal Back to Top Button */
.generate-back-to-top {
	background-color: var(--le-text-primary) !important;
	color: #ffffff !important;
	border-radius: var(--le-radius-sm) !important;
	width: 32px;
	height: 32px;
	line-height: 32px;
	bottom: 14px;
	right: 14px;
	opacity: 0.75;
	transition: opacity 0.15s ease, background-color 0.15s ease;
}

.generate-back-to-top:hover {
	opacity: 1;
	background-color: var(--le-primary) !important;
}


/* ==========================================================================
   10. Dark Mode Component Overrides & Polish
   ========================================================================== */
/* Dark Mode Form Inputs & Controls */
:root[data-theme="dark"] input[type="text"],
:root[data-theme="dark"] input[type="email"],
:root[data-theme="dark"] input[type="url"],
:root[data-theme="dark"] input[type="password"],
:root[data-theme="dark"] input[type="search"],
:root[data-theme="dark"] textarea,
:root[data-theme="dark"] select {
	background-color: #161616 !important;
	color: #f3f4f6 !important;
	border-color: #2f2f2f !important;
}

:root[data-theme="dark"] input:focus,
:root[data-theme="dark"] textarea:focus,
:root[data-theme="dark"] select:focus {
	border-color: var(--le-primary) !important;
}

@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]) input[type="text"],
	:root:not([data-theme="light"]) input[type="email"],
	:root:not([data-theme="light"]) input[type="url"],
	:root:not([data-theme="light"]) input[type="password"],
	:root:not([data-theme="light"]) input[type="search"],
	:root:not([data-theme="light"]) textarea,
	:root:not([data-theme="light"]) select {
		background-color: #161616 !important;
		color: #f3f4f6 !important;
		border-color: #2f2f2f !important;
	}

	:root:not([data-theme="light"]) input:focus,
	:root:not([data-theme="light"]) textarea:focus,
	:root:not([data-theme="light"]) select:focus {
		border-color: var(--le-primary) !important;
	}
}

/* Dark Mode Inline & Block Code */
:root[data-theme="dark"] .entry-content pre,
:root[data-theme="dark"] .entry-content .wp-block-code {
	background-color: #161616 !important;
	border-color: #2d2d2d !important;
}

:root[data-theme="dark"] .entry-content :not(pre) > code {
	background-color: rgba(239, 68, 68, 0.14) !important;
	color: #fca5a5 !important;
	border-color: rgba(239, 68, 68, 0.28) !important;
}

@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]) .entry-content pre,
	:root:not([data-theme="light"]) .entry-content .wp-block-code {
		background-color: #161616 !important;
		border-color: #2d2d2d !important;
	}

	:root:not([data-theme="light"]) .entry-content :not(pre) > code {
		background-color: rgba(239, 68, 68, 0.14) !important;
		color: #fca5a5 !important;
		border-color: rgba(239, 68, 68, 0.28) !important;
	}
}

/* Dark Mode Category & Tag Clean Text (Zero Boxes) */
:root[data-theme="dark"] .cat-links a,
:root[data-theme="dark"] .tags-links a {
	background: transparent !important;
	background-color: transparent !important;
	border: none !important;
	color: var(--le-text-secondary) !important;
}

:root[data-theme="dark"] .cat-links a:hover,
:root[data-theme="dark"] .tags-links a:hover {
	color: var(--le-primary) !important;
	text-decoration: underline !important;
}

@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]) .cat-links a,
	:root:not([data-theme="light"]) .tags-links a {
		background: transparent !important;
		background-color: transparent !important;
		border: none !important;
		color: var(--le-text-secondary) !important;
	}

	:root:not([data-theme="light"]) .cat-links a:hover,
	:root:not([data-theme="light"]) .tags-links a:hover {
		color: var(--le-primary) !important;
		text-decoration: underline !important;
	}
}

/* Dark Mode Article Card Hover & Active Interaction */
:root[data-theme="dark"] .blog article .inside-article:hover,
:root[data-theme="dark"] .archive article .inside-article:hover,
:root[data-theme="dark"] .search article .inside-article:hover,
:root[data-theme="dark"] .blog article .inside-article:active,
:root[data-theme="dark"] .archive article .inside-article:active,
:root[data-theme="dark"] .search article .inside-article:active {
	border-color: var(--le-border-dark, #444444);
	background-color: #252525;
}

@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]) .blog article .inside-article:hover,
	:root:not([data-theme="light"]) .archive article .inside-article:hover,
	:root:not([data-theme="light"]) .search article .inside-article:hover,
	:root:not([data-theme="light"]) .blog article .inside-article:active,
	:root:not([data-theme="light"]) .archive article .inside-article:active,
	:root:not([data-theme="light"]) .search article .inside-article:active {
		border-color: var(--le-border-dark, #444444);
		background-color: #252525;
	}
}

/* Dark Mode Mobile Navigation */
:root[data-theme="dark"] #site-navigation.toggled {
	background-color: #1e1e1e !important;
	border-color: #2f2f2f !important;
	box-shadow: 0 12px 28px rgba(0, 0, 0, 0.55) !important;
}

:root[data-theme="dark"] #site-navigation.toggled .main-nav > ul > li {
	border-bottom-color: #2d2d2d !important;
}

:root[data-theme="dark"] #site-navigation.toggled .main-nav > ul > li > a {
	color: #f3f4f6 !important;
}

:root[data-theme="dark"] #site-navigation.toggled .main-nav > ul > li > a:hover,
:root[data-theme="dark"] #site-navigation.toggled .main-nav > ul > li > a:focus {
	background-color: #252525 !important;
	color: #3b82f6 !important;
}

:root[data-theme="dark"] #site-navigation.toggled ul.sub-menu,
:root[data-theme="dark"] #site-navigation.toggled ul.children {
	background-color: #121212 !important;
	border-top-color: #2d2d2d !important;
}

:root[data-theme="dark"] #site-navigation.toggled ul.sub-menu li a,
:root[data-theme="dark"] #site-navigation.toggled ul.children li a {
	color: #d1d5db !important;
	border-bottom-color: #2d2d2d !important;
}

@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]) #site-navigation.toggled {
		background-color: #1e1e1e !important;
		border-color: #2f2f2f !important;
		box-shadow: 0 12px 28px rgba(0, 0, 0, 0.55) !important;
	}

	:root:not([data-theme="light"]) #site-navigation.toggled .main-nav > ul > li {
		border-bottom-color: #2d2d2d !important;
	}

	:root:not([data-theme="light"]) #site-navigation.toggled .main-nav > ul > li > a {
		color: #f3f4f6 !important;
	}

	:root:not([data-theme="light"]) #site-navigation.toggled .main-nav > ul > li > a:hover,
	:root:not([data-theme="light"]) #site-navigation.toggled .main-nav > ul > li > a:focus {
		background-color: #252525 !important;
		color: #3b82f6 !important;
	}

	:root:not([data-theme="light"]) #site-navigation.toggled ul.sub-menu,
	:root:not([data-theme="light"]) #site-navigation.toggled ul.children {
		background-color: #121212 !important;
		border-top-color: #2d2d2d !important;
	}

	:root:not([data-theme="light"]) #site-navigation.toggled ul.sub-menu li a,
	:root:not([data-theme="light"]) #site-navigation.toggled ul.children li a {
		color: #d1d5db !important;
		border-bottom-color: #2d2d2d !important;
	}
}

/* Smooth Transition ONLY when user actively toggles theme (prevents background flash on load/refresh) */
html.theme-transitioning,
html.theme-transitioning *,
html.theme-transitioning *::before,
html.theme-transitioning *::after {
	transition: background-color 0.25s ease, border-color 0.25s ease, color 0.25s ease !important;
}

.post-navigation .nav-previous,
.post-navigation .nav-next {
	cursor: pointer !important;
}

/* Suppress default GP navigation arrow icons (< and >) */
.post-navigation .gp-icon,
.post-navigation svg,
footer.entry-meta .post-navigation .gp-icon,
footer.entry-meta .post-navigation svg {
	display: none !important;
}


/* ==========================================================================
   11. Mobile-First Optimization Strategy (@media max-width: 768px)
   ========================================================================== */
@media (max-width: 768px) {
	/* Ultra-Slim Mobile Header */
	.site-header {
		text-align: left !important;
	}

	/* Grid Container: Ensure comfortable breathing room from device edges */
	.container.grid-container,
	.grid-container,
	.site-content {
		padding-left: 13px !important;
		padding-right: 13px !important;
	}

	/* Ultra-Slim Mobile Header with comfortable side padding */
	.site-header {
		text-align: left !important;
	}

	.inside-header {
		padding: 8px 16px !important;
		min-height: 48px !important;
		display: flex !important;
		flex-direction: row !important;
		align-items: center !important;
		justify-content: space-between !important;
	}

	.inside-header > :not(:last-child):not(.main-navigation) {
		margin-bottom: 0 !important;
	}

	.site-branding {
		flex: 1 1 auto !important;
		cursor: pointer;
	}

	.site-branding .main-title {
		font-size: 1.15rem !important;
		height: 100%;
		display: flex;
		align-items: center;
	}

	.site-branding .main-title a {
		display: flex;
		align-items: center;
		height: 100%;
		padding: 6px 12px 6px 0;
	}

	/* 1. Mobile Menu Control Wrapper: Transparent flex container (NO border/padding) */
	.mobile-menu-control-wrapper {
		display: inline-flex !important;
		align-items: center !important;
		justify-content: center !important;
		background: transparent !important;
		border: none !important;
		padding: 0 !important;
		margin: 0 0 0 6px !important;
		order: 2 !important;
		flex-shrink: 0 !important;
		box-shadow: none !important;
	}

	/* 2. The ONLY single interactive button */
	.inside-header .menu-toggle,
	.mobile-menu-control-wrapper .menu-toggle {
		display: inline-flex !important;
		align-items: center !important;
		justify-content: center !important;
		background-color: transparent !important;
		color: var(--le-text-secondary) !important;
		font-size: 0.8rem !important;
		font-weight: 500 !important;
		line-height: 1 !important;
		padding: 4px 8px !important;
		min-height: 30px !important;
		height: 30px !important;
		max-height: 30px !important;
		box-sizing: border-box !important;
		margin: 0 !important;
		border: 1px solid var(--le-border-color) !important;
		border-radius: var(--le-radius-sm) !important;
		gap: 5px !important;
		cursor: pointer;
		transition: color 0.15s ease, background-color 0.15s ease, border-color 0.15s ease;
	}

	.inside-header {
		flex-wrap: nowrap !important;
	}

	.header-theme-toggle {
		margin: 0 0 0 auto !important;
		margin-right: 0 !important;
		order: 1 !important;
		flex-shrink: 0 !important;
	}

	.inside-header .menu-toggle:hover,
	.inside-header .menu-toggle:focus,
	.mobile-menu-control-wrapper .menu-toggle:hover,
	.mobile-menu-control-wrapper .menu-toggle:focus {
		background-color: var(--le-bg-subtle) !important;
		border-color: var(--le-border-dark) !important;
		color: var(--le-text-primary) !important;
	}

	.menu-toggle .gp-icon {
		display: inline-flex;
		align-items: center;
		font-size: 0.88em;
	}

	.menu-toggle .mobile-menu {
		padding-left: 0 !important;
		font-size: 0.76rem;
		font-weight: 600;
		letter-spacing: 0.02em;
		text-transform: uppercase;
	}

	/* HIDE the full-width horizontal hamburger bar below the header completely */
	#site-navigation > .inside-navigation > .menu-toggle,
	.main-navigation:not(.mobile-menu-control-wrapper) > .inside-navigation > .menu-toggle,
	.site-header ~ #site-navigation .menu-toggle,
	#site-navigation:not(.inside-header) .menu-toggle {
		display: none !important;
	}

	/* Also prevent secondary duplicate slideout toggles */
	.slideout-toggle:not(.has-svg-icon) {
		display: none !important;
	}

	/* 3. Mobile Navigation: Collapse when closed, absolute sleek dropdown when open */
	#site-navigation:not(.toggled) {
		display: none !important;
		border: none !important;
		margin: 0 !important;
		padding: 0 !important;
		min-height: 0 !important;
		height: 0 !important;
		visibility: hidden !important;
		pointer-events: none !important;
	}

	#site-navigation:not(.toggled) .inside-navigation {
		display: none !important;
		padding: 0 !important;
		min-height: 0 !important;
	}

	/* Mobile Navigation: Absolute Full-Width Clean Dropdown (Keeps top header perfectly slim & fixed) */
	#site-navigation.toggled {
		display: block !important;
		position: absolute !important;
		top: 100% !important;
		left: 0 !important;
		right: 0 !important;
		width: 100% !important;
		z-index: 9999 !important;
		background-color: var(--le-bg-surface) !important;
		border-top: 1px solid var(--le-border-color) !important;
		border-bottom: 1px solid var(--le-border-color) !important;
		box-shadow: 0 12px 28px rgba(0, 0, 0, 0.08) !important;
		margin: 0 !important;
		padding: 6px 0 !important;
		max-height: calc(100vh - 56px) !important;
		overflow-y: auto !important;
		-webkit-overflow-scrolling: touch !important;
	}

	#site-navigation.toggled .inside-navigation {
		padding: 0 !important;
		width: 100% !important;
		max-width: 100% !important;
	}

	#site-navigation.toggled .main-nav {
		width: 100% !important;
	}

	#site-navigation.toggled .main-nav > ul {
		display: flex !important;
		flex-direction: column !important;
		width: 100% !important;
		margin: 0 !important;
		padding: 0 !important;
		list-style: none !important;
	}

	#site-navigation.toggled .main-nav > ul > li {
		width: 100% !important;
		float: none !important;
		margin: 0 !important;
		padding: 0 !important;
		border-bottom: 1px solid var(--le-border-subtle) !important;
		text-align: left !important;
		box-sizing: border-box !important;
	}

	#site-navigation.toggled .main-nav > ul > li:last-child {
		border-bottom: none !important;
	}

	#site-navigation.toggled .main-nav > ul > li > a {
		display: flex !important;
		align-items: center !important;
		justify-content: space-between !important;
		width: 100% !important;
		padding: 13px 20px !important;
		min-height: 48px !important;
		font-size: 0.95rem !important;
		font-weight: 550 !important;
		line-height: 1.35 !important;
		color: var(--le-text-primary) !important;
		text-decoration: none !important;
		box-sizing: border-box !important;
		transition: background-color 0.15s ease, color 0.15s ease, padding-left 0.15s ease !important;
	}

	#site-navigation.toggled .main-nav > ul > li > a:hover,
	#site-navigation.toggled .main-nav > ul > li > a:focus,
	#site-navigation.toggled .main-nav > ul > li > a:active {
		background-color: var(--le-bg-subtle) !important;
		color: var(--le-primary) !important;
		padding-left: 24px !important;
	}

	#site-navigation.toggled .main-nav > ul > li.current-menu-item > a,
	#site-navigation.toggled .main-nav > ul > li.current-menu-ancestor > a {
		color: var(--le-primary) !important;
		font-weight: 700 !important;
		background-color: var(--le-primary-tint) !important;
		border-left: 3.5px solid var(--le-primary) !important;
		padding-left: 17px !important;
	}

	/* Dropdown sub-menus inside mobile navigation */
	#site-navigation.toggled ul.sub-menu,
	#site-navigation.toggled ul.children {
		position: static !important;
		width: 100% !important;
		box-shadow: none !important;
		border: none !important;
		background-color: var(--le-bg-subtle-alt) !important;
		border-top: 1px solid var(--le-border-subtle) !important;
		padding: 0 !important;
		margin: 0 !important;
	}

	#site-navigation.toggled ul.sub-menu li a,
	#site-navigation.toggled ul.children li a {
		padding: 11px 20px 11px 36px !important;
		font-size: 0.88rem !important;
		color: var(--le-text-secondary) !important;
		min-height: 42px !important;
		border-bottom: 1px solid var(--le-border-subtle) !important;
	}

	#site-navigation.toggled ul.sub-menu li:last-child a,
	#site-navigation.toggled ul.children li:last-child a {
		border-bottom: none !important;
	}

	/* Reduce page background clutter and tighten outer layout */
	.site-content {
		padding-top: var(--le-space-xs) !important;
		padding-bottom: var(--le-space-md) !important;
	}

	/* Zero wasted edge spacing on small screens */
	.separate-containers .site-main {
		margin: 0 !important;
	}

	.separate-containers .site-main > * {
		margin-bottom: var(--le-space-sm) !important;
	}

	/* Comfortable Article Card Padding (Prevent cramped text near edges) */
	.inside-article {
		padding: 22px 14px !important;
		border-radius: var(--le-radius-sm);
	}

	/* Mobile Typography Scaling */
	body {
		font-size: 1.07rem; /* ~17.1px comfortable reading (scaled up from 16.3px) */
		line-height: 1.78;
	}

	.entry-title {
		font-size: 1.42rem !important;
		line-height: 1.34 !important;
		line-height: 1.35;
		margin-bottom: var(--le-space-xxs);
	}

	.entry-content h2,
	.entry-content .wp-block-heading:is(h2) {
		font-size: 1.34rem;
		margin-top: 1.8em;
		margin-bottom: 0.6em;
		padding-left: 8px;
		border-left-width: 3px;
	}

	.entry-content h3,
	.entry-content .wp-block-heading:is(h3) {
		font-size: 1.2rem;
		margin-top: 1.4em;
		margin-bottom: 0.5em;
	}

	.entry-content p {
		margin-bottom: 1.3em;
	}

	/* Code block mobile padding */
	.entry-content pre {
		font-size: 0.82rem;
		padding: 0.85rem 1rem;
		border-radius: var(--le-radius-sm);
	}

	/* Post Navigation Mobile: Stack Previous / Next for easy thumb taps with left-alignment */
	.site-main .post-navigation,
	.post-navigation,
	nav.post-navigation {
		grid-template-columns: 1fr !important;
		gap: 10px !important;
		overflow: visible !important;
	}

	.post-navigation .nav-previous,
	.post-navigation .nav-next {
		grid-column: 1 !important;
		text-align: left !important;
	}

	.post-navigation .nav-next::before {
		text-align: left !important;
	}

	/* Comments Area: Transparent container (outer box eliminated) */
	.separate-containers .comments-area,
	.comments-area {
		background-color: transparent !important;
		border: none !important;
		box-shadow: none !important;
		padding: 0 !important;
	}

	/* Mobile Archive / Category / Search Header */
	.page-header,
	.separate-containers .page-header {
		padding: 16px 16px !important;
		margin-bottom: 12px !important;
	}

	.page-header .page-title {
		font-size: 1.25rem !important;
	}

	.comment-list .children {
		padding-left: var(--le-space-sm) !important;
		margin-left: 0 !important;
		border-left: 2px solid var(--le-border-color);
	}

	.comment-list .comment-body {
		padding: 12px 14px !important;
		margin-bottom: 10px !important;
	}

	.comment-meta {
		display: flex !important;
		flex-direction: row !important;
		flex-wrap: nowrap !important;
		align-items: center !important;
		gap: 8px !important;
		margin-bottom: 4px !important;
	}

	.comment-meta .avatar {
		width: 28px !important;
		height: 28px !important;
		flex-shrink: 0 !important;
		float: none !important;
		margin: 0 !important;
	}

	.comment-author-info {
		display: flex !important;
		flex-direction: row !important;
		flex-wrap: wrap !important;
		align-items: baseline !important;
		gap: 2px 6px !important;
		flex: 1 1 auto !important;
		min-width: 0 !important;
	}

	.comment-author cite,
	.comment-author .fn {
		font-size: 0.88rem !important;
	}

	.entry-meta.comment-metadata {
		font-size: 0.75rem !important;
	}

	.comment-content {
		margin-top: 0 !important;
		padding: 0 !important;
	}

	.comment-content p {
		font-size: 0.92rem !important;
		margin-bottom: 4px !important;
	}

	#respond {
		padding: 0 !important;
		margin-top: var(--le-space-md) !important;
	}

	.widget {
		padding: 18px 16px !important;
	}

	/* Touch-Friendly Minimal Targets (Minimum 44px) */
	.main-navigation a,
	.pagination .page-numbers,
	.button,
	button,
	input[type="button"],
	input[type="submit"] {
		min-height: 44px;
		display: inline-flex;
		align-items: center;
		justify-content: center;
	}

	/* Mobile Pagination: Hide Prev/Next Text Labels, Display Arrow Symbols Only */
	.pagination-nav-label {
		display: none !important;
	}
	.paging-navigation .page-numbers.prev,
	.paging-navigation .page-numbers.next,
	.pagination .page-numbers.prev,
	.pagination .page-numbers.next {
		min-width: 36px !important;
		width: 36px !important;
		padding: 0 !important;
		gap: 0 !important;
		font-size: 1rem !important;
	}

	/* Ultra-Slim Mobile Footer */
	.site-info {
		padding: var(--le-footer-padding-mobile, 6px) 0 !important;
		font-size: 0.78rem;
		line-height: 1.35 !important;
	}

	.inside-site-info {
		padding: 0 12px !important;
		gap: 2px 8px;
	}

	.copyright-bar {
		font-size: 0.78rem;
		line-height: 1.35;
	}
}

/* Extra Small Phones (@media max-width: 480px) */
@media (max-width: 480px) {
	.container.grid-container,
	.grid-container,
	.site-content {
		padding-left: 10px !important;
		padding-right: 10px !important;
	}

	.inside-header {
		padding: 8px 14px !important;
	}

	.inside-article {
		padding: 18px 13px !important;
	}

	.site-description {
		font-size: 0.62rem !important;
		max-width: 34vw !important;
		transform: translateY(-8px) !important;
	}

	.separate-containers .comments-area,
	.comments-area {
		padding: 0 !important;
	}

	.page-header,
	.separate-containers .page-header {
		padding: 14px 14px !important;
	}

	.comment-list .comment-body {
		padding: 10px 12px !important;
	}

	#respond {
		padding: 0 !important;
	}

	.entry-title {
		font-size: 1.32rem !important;
	}
}