/*
 * ENP Ghibli Theme — polish + layout balance overrides
 * Augments the Tailwind utility classes applied in templates.
 * Higher specificity (body > .flex-grow.flex > main.flex-grow)
 * beats the utility-class rules Tailwind CDN injects at runtime.
 */

/* ------------------------------------------------------------------
 * 1. Layout balance — center main content beside the fixed sidebar
 *    and let it fill much more of the viewport on wide screens.
 *    Templates give <main> `md:ml-72 mx-auto max-w-6xl` (= 1152 px cap),
 *    which left-biases content and leaves a big empty strip to the right
 *    on typical widescreen monitors. We reserve sidebar space via
 *    padding on the outer flex container, force <main> to center, and
 *    raise the width cap so the page breathes instead of looking empty.
 * ------------------------------------------------------------------ */
@media (min-width: 768px) {
	body > .flex-grow.flex {
		padding-left: 18rem;
	}
	/* Main fills the entire space beside the fixed sidebar so the right
	 * side of the page is never empty. Inner padding keeps edge gutters. */
	body > .flex-grow.flex > main.flex-grow {
		margin-left: 0;
		margin-right: 0;
		max-width: none;
		width: 100%;
		padding-left: 2.5rem;
		padding-right: 2.5rem;
	}
}
@media (min-width: 1280px) {
	body > .flex-grow.flex > main.flex-grow {
		padding-left: 3.5rem;
		padding-right: 3.5rem;
	}
}
@media (min-width: 1600px) {
	body > .flex-grow.flex > main.flex-grow {
		padding-left: 4.5rem;
		padding-right: 4.5rem;
	}
}

/* ------------------------------------------------------------------
 * 1b. Hero section — rebalance the right-pinned card so the hero
 *     feels centered instead of lop-sided on wide screens.
 * ------------------------------------------------------------------ */
@media (min-width: 768px) {
	main > section:first-of-type > div.max-w-2xl.ml-auto {
		margin-left: auto;
		margin-right: auto;
		max-width: 60rem;
	}
}
@media (min-width: 1280px) {
	main > section:first-of-type > div.max-w-2xl.ml-auto {
		max-width: 72rem;
	}
}

/* ------------------------------------------------------------------
 * 1d. Featured-card category pill — this pill sits absolutely at the
 *     top-right of the article and overlaps the portrait image. The
 *     pastel tertiary-container tone blends into photography, so the
 *     label "sinks" into the picture. Repaint with a dark translucent
 *     background + backdrop blur so it reads clearly on any image.
 * ------------------------------------------------------------------ */
article.group > div.absolute.top-4.right-4.bg-tertiary-container,
article.group > div.absolute.top-4.right-4 {
	background: rgba(28, 28, 24, 0.82);
	color: #ffffff;
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
	box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
	font-weight: 600;
	letter-spacing: 0.06em;
}

/* ------------------------------------------------------------------
 * 1c. Decade pills — only ~5 entries in a flex-wrap leaves the right
 *     side blank. Spread pills to cover the full row.
 * ------------------------------------------------------------------ */
main section > div.flex.flex-wrap.gap-3 {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
	gap: 0.75rem;
}
main section > div.flex.flex-wrap.gap-3 > a {
	justify-content: center;
}

/* ------------------------------------------------------------------
 * 2. Typography — Vietnamese diacritics need a touch more breathing room.
 * ------------------------------------------------------------------ */
body {
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
}
h1, h2, h3, h4, h5, h6, .font-headline {
	line-height: 1.25;
	letter-spacing: -0.005em;
	word-spacing: 0.02em;
}
p, li {
	line-height: 1.7;
}

/* Content pages generated by the plugin use .entry-content */
.entry-content p { margin-bottom: 1.25em; }
.entry-content h2 { margin-top: 2em; margin-bottom: 0.75em; }
.entry-content h3 { margin-top: 1.5em; margin-bottom: 0.5em; }
.entry-content ul, .entry-content ol { margin: 1em 0 1.25em 1.25em; }
.entry-content li { margin-bottom: 0.4em; }
.entry-content img {
	border-radius: 0.75rem;
	box-shadow: 0 12px 40px rgba(69, 26, 3, 0.08);
}
.entry-content figure { margin: 1.5em 0; }
.entry-content figcaption {
	font-size: 0.875rem;
	color: #7c7766;
	text-align: center;
	margin-top: 0.5em;
	font-style: italic;
}

/* ------------------------------------------------------------------
 * 3. Card polish — subtle lift on hover for articles + link cards.
 * ------------------------------------------------------------------ */
article.group,
a.group,
a.block.bg-surface-container-lowest,
a.flex.flex-col.items-center {
	transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}
article.group:hover,
a.group:hover,
a.block.bg-surface-container-lowest:hover,
a.flex.flex-col.items-center:hover {
	transform: translateY(-3px);
	box-shadow: 0 18px 48px rgba(69, 26, 3, 0.12);
}

/* Stat cards (homepage "Thư mục thế giới" block) — stronger definition */
a.flex.flex-col.items-center.justify-center.text-center {
	border: 1px solid rgba(205, 198, 179, 0.35);
}
a.flex.flex-col.items-center.justify-center.text-center:hover {
	border-color: rgba(62, 106, 0, 0.4);
}

/* Recent-updates small cards use a thin border — lift it on hover too */
a.block[class*="border-outline-variant"] {
	transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}
a.block[class*="border-outline-variant"]:hover {
	transform: translateY(-2px);
	box-shadow: 0 10px 24px rgba(69, 26, 3, 0.08);
}

/* ------------------------------------------------------------------
 * 4. Section heading divider — softer gradient
 * ------------------------------------------------------------------ */
.flex.items-center.gap-4 > .flex-1.h-px {
	background: linear-gradient(90deg, rgba(124, 119, 102, 0.28) 0%, transparent 100%);
}

/* ------------------------------------------------------------------
 * 5. Mobile sidebar — add a dim backdrop when the menu is open.
 *    The aside toggles `.hidden`; when visible we paint a viewport-wide
 *    shadow to darken the page behind the drawer.
 * ------------------------------------------------------------------ */
@media (max-width: 767px) {
	#enp-sidebar {
		width: min(20rem, 85vw);
		max-width: 85vw;
	}
	#enp-sidebar:not(.hidden) {
		box-shadow: 0 0 0 100vmax rgba(28, 28, 24, 0.45);
	}
	body:has(#enp-sidebar:not(.hidden)) {
		overflow: hidden;
	}
}

/* ------------------------------------------------------------------
 * 6. Pagination — archive pages use the_posts_pagination() which
 *    outputs `.page-numbers` links with no styling. Give them pills.
 * ------------------------------------------------------------------ */
.pagination,
.wp-pagenavi,
nav.navigation.pagination {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.5rem;
}
.page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 2.5rem;
	height: 2.5rem;
	padding: 0 0.9rem;
	border-radius: 9999px;
	background: #f1ede7;
	color: #1c1c18;
	text-decoration: none;
	font-family: 'Plus Jakarta Sans', sans-serif;
	font-size: 0.9rem;
	font-weight: 500;
	border: 1px solid rgba(205, 198, 179, 0.4);
	transition: all 0.2s ease;
}
.page-numbers:hover {
	background: #bff77f;
	color: #2e4f00;
	border-color: rgba(62, 106, 0, 0.35);
}
.page-numbers.current {
	background: #3e6a00;
	color: #ffffff;
	border-color: #3e6a00;
}
.page-numbers.dots {
	background: transparent;
	border: none;
}

/* ------------------------------------------------------------------
 * 7. Accessibility — visible focus ring on interactive elements.
 * ------------------------------------------------------------------ */
a:focus-visible,
button:focus-visible {
	outline: 2px solid #3e6a00;
	outline-offset: 3px;
	border-radius: 4px;
}

/* ------------------------------------------------------------------
 * 8. Hero section refinements — keep text legible over the image.
 * ------------------------------------------------------------------ */
section.relative > .absolute.inset-0 img[alt=""] {
	object-position: center center;
}

/* ------------------------------------------------------------------
 * 9. Tables inside content — a sensible default.
 * ------------------------------------------------------------------ */
.entry-content table {
	width: 100%;
	border-collapse: collapse;
	margin: 1.5em 0;
	font-size: 0.95rem;
	background: #ffffff;
	border-radius: 0.5rem;
	overflow: hidden;
	box-shadow: 0 8px 24px rgba(69, 26, 3, 0.06);
}
.entry-content th,
.entry-content td {
	padding: 0.75em 1em;
	text-align: left;
	border-bottom: 1px solid rgba(205, 198, 179, 0.35);
}
.entry-content th {
	background: #f1ede7;
	font-weight: 600;
	color: #1c1c18;
}
.entry-content tr:last-child td { border-bottom: none; }

/* ------------------------------------------------------------------
 * 10. Blockquote — editorial touch.
 * ------------------------------------------------------------------ */
.entry-content blockquote {
	border-left: 3px solid #3e6a00;
	padding: 0.5em 1.25em;
	margin: 1.5em 0;
	font-style: italic;
	color: #4b4738;
	background: rgba(241, 237, 231, 0.5);
	border-radius: 0 0.5rem 0.5rem 0;
}
.entry-content blockquote p:last-child { margin-bottom: 0; }

/* ------------------------------------------------------------------
 * 11. Mobile top-bar small refinement — stays visually anchored.
 * ------------------------------------------------------------------ */
@media (max-width: 767px) {
	header.md\:hidden {
		border-bottom: 1px solid rgba(205, 198, 179, 0.3);
	}
	main.flex-grow {
		padding-left: 1.25rem;
		padding-right: 1.25rem;
	}
}