/*
Theme Name: Nghe Duoc
Template: broadsheet
Description: Site child theme: brand palette and site-specific templates on top of the Broadsheet parent theme.
Version: 0.4.0
Requires at least: 7.1
Requires PHP: 8.1
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: ngheduoc
*/

/*
 * Article layout. Below 1200px the table of contents sits above the body (collapsed on mobile and
 * tablet by the block's own script). From 1200px the body keeps the 760px reading column, centred under the
 * title, and the table of contents moves to the right margin and stays in view while reading.
 */
.ngheduoc-article > .ngheduoc-article__toc {
	margin-block-end: var(--wp--preset--spacing--40, 1.5rem);
	max-width: 100%;
}

@media (min-width: 1200px) {
	.ngheduoc-article {
		align-items: start;
		column-gap: 2rem;
		display: grid;
		grid-template-columns: minmax(0, 1fr) minmax(0, 760px) minmax(0, 1fr);
	}

	.ngheduoc-article > .ngheduoc-article__body {
		grid-column: 2;
		grid-row: 1;
		margin-block-start: 0;
	}

	.ngheduoc-article > .ngheduoc-article__toc {
		grid-column: 3;
		grid-row: 1;
		margin-block-end: 0;
		margin-block-start: 0;
		max-width: 16rem;
		position: sticky;
		top: 6rem;
	}
}

/*
 * Responsive Data Tables (NFR-2, NFR-3, DEC-10)
 * Dosage, legal comparison, and multi-column clinical tables scroll horizontally
 * without crushing columns or blowing out the mobile reading container.
 */
.wp-block-table {
	box-sizing: border-box;
	margin-block: var(--wp--preset--spacing--40, 1.5rem);
	max-width: 100%;
	min-width: 0;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	position: relative;
}

.wp-block-table table {
	border-collapse: collapse;
	min-width: 32rem;
	width: 100%;
}


.ngheduoc-meta-line {
	color: var(--wp--preset--color--muted);
	font-size: var(--wp--preset--font-size--small);
}

/* Topics as chips under the article; 44px tall on touch screens (NFR-3). */
.ngheduoc-topics a {
	align-items: center;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 999px;
	display: inline-flex;
	margin: 0 0.25rem 0.5rem 0;
	min-height: 2rem;
	padding: 0 0.75rem;
	text-decoration: none;
}

@media (pointer: coarse) {
	.ngheduoc-topics a {
		min-height: 44px;
	}
}

.ngheduoc-topics .wp-block-post-terms__separator {
	display: none;
}

/*
 * Article End-matter Visual Zones (Credibility vs Discovery & Action)
 */
.ngheduoc-credibility-zone {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--40);
	margin-top: var(--wp--preset--spacing--50);
}

.ngheduoc-discovery-zone {
	border-top: 1px solid var(--wp--preset--color--border);
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--50);
	margin-top: var(--wp--preset--spacing--70);
	padding-top: var(--wp--preset--spacing--60);
}

/* Post navigation links (Previous / Next) with NFR-3 touch targets */
.ngheduoc-post-nav {
	gap: var(--wp--preset--spacing--30, 0.75rem);
}

.ngheduoc-post-nav .wp-block-post-navigation-link {
	align-items: center;
	display: inline-flex;
	min-height: 44px;
}

.ngheduoc-post-nav .wp-block-post-navigation-link a {
	align-items: center;
	color: var(--wp--preset--color--primary, #075985);
	display: inline-flex;
	font-weight: 600;
	min-height: 44px;
	text-decoration: none;
}

.ngheduoc-post-nav .wp-block-post-navigation-link a:hover {
	color: var(--wp--preset--color--accent, #0a7a6f);
	text-decoration: underline;
}

@media (pointer: coarse) {
	.ngheduoc-post-nav .wp-block-post-navigation-link a {
		min-height: 44px;
		padding: 0.5rem 0;
	}
}

/*
 * Site footer (patterns/footer.php): brand, then up to four link columns; one column on phones,
 * two on tablets, five across from 1000px.
 */
.ngheduoc-footer__grid {
	display: grid;
	gap: var(--wp--preset--spacing--50) var(--wp--preset--spacing--40);
	grid-template-columns: 1fr;
}

@media (min-width: 600px) {
	.ngheduoc-footer__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 1000px) {
	.ngheduoc-footer__grid {
		grid-template-columns: minmax(0, 1.6fr) repeat(4, minmax(0, 1fr));
	}
}

.ngheduoc-footer__grid > * {
	margin-block-start: 0;
}

.ngheduoc-footer__heading {
	color: var(--wp--preset--color--contrast);
	font-size: var(--wp--preset--font-size--small);
	letter-spacing: 0.04em;
	margin: 0 0 0.5rem;
	text-transform: uppercase;
}

.ngheduoc-footer__links {
	list-style: none;
	margin: 0;
	padding: 0;
}

.ngheduoc-footer__links a {
	align-items: center;
	color: var(--wp--preset--color--contrast);
	display: inline-flex;
	font-size: var(--wp--preset--font-size--small);
	min-height: 2.25rem;
	text-decoration: none;
}

.ngheduoc-footer__links a:hover {
	color: var(--wp--preset--color--primary);
	text-decoration: underline;
}

@media (pointer: coarse) {
	.ngheduoc-footer__links a {
		min-height: 44px;
	}
}

.ngheduoc-footer__note {
	color: var(--wp--preset--color--muted);
	max-width: 22rem;
}

.ngheduoc-footer__bottom {
	border-top: 1px solid var(--wp--preset--color--border);
	color: var(--wp--preset--color--muted);
	margin-top: var(--wp--preset--spacing--50);
	padding-top: var(--wp--preset--spacing--40);
}

.ngheduoc-footer__bottom p {
	margin: 0;
}

/*
 * Reading Progress UX (R3)
 * Mobile admin bar positioning and GPU-accelerated rendering.
 * Coordinates seamlessly with sticky header across screen sizes.
 */
.broadsheet-progress {
	position: fixed;
	inset: 0 0 auto 0;
	height: 3px;
	z-index: 100;
	pointer-events: none;
}

.admin-bar .broadsheet-progress {
	top: var(--wp-admin--admin-bar--height, 32px);
}

@media (max-width: 600px) {
	/* The admin bar scrolls away on small screens, so progress bar sits at the top edge. */
	.admin-bar .broadsheet-progress {
		top: 0;
	}
}

.broadsheet-progress > span {
	background: var(--wp--preset--color--accent);
	will-change: transform;
}

/*
 * Terms grid cards balancing:
 * Ensure cards in terms query grid have equal height, uniform padding and fill row height.
 */
.wp-block-terms-query .wp-block-term-template {
	align-items: stretch;
}

.wp-block-terms-query .wp-block-term {
	display: flex;
}

.wp-block-terms-query .is-style-broadsheet-card {
	display: flex;
	flex-direction: column;
	width: 100%;
	height: 100%;
	box-sizing: border-box;
}

.wp-block-terms-query .is-style-broadsheet-card .wp-block-term-description {
	flex-grow: 1;
}

/*
 * Editorial Color Hierarchy & Typography Balance:
 * Relieve excessive blue tint. Article titles and term titles rest in high-contrast Ink (contrast slug)
 * and interactively transition to Primary Blue (primary slug) on hover/focus.
 */
.wp-block-post-title a,
.broadsheet-teaser .wp-block-post-title a,
.wp-block-term-name a,
.ngheduoc-card__title a {
	color: var(--wp--preset--color--contrast);
	text-decoration: none;
	transition: color 0.15s ease-in-out;
}

.wp-block-post-title a:hover,
.wp-block-post-title a:focus,
.broadsheet-teaser .wp-block-post-title a:hover,
.broadsheet-teaser .wp-block-post-title a:focus,
.wp-block-term-name a:hover,
.wp-block-term-name a:focus,
.ngheduoc-card__title a:hover,
.ngheduoc-card__title a:focus {
	color: var(--wp--preset--color--primary);
	text-decoration: underline;
}

/* Headings in kicker sections rest in grounded contrast ink */
.is-style-broadsheet-kicker {
	color: var(--wp--preset--color--contrast);
}

/* Home Hero main headline: grounded with high contrast ink */
.has-surface-background-color h1.wp-block-heading,
.wp-block-group.has-surface-background-color h1 {
	color: var(--wp--preset--color--contrast);
	font-weight: 700;
}

/*
 * Typography Weight Refinement (Anti-heavy bold)
 * Give breathing space to Vietnamese accents in Be Vietnam Pro.
 */
.wp-block-post-title,
.broadsheet-teaser .wp-block-post-title,
.wp-block-term-name,
.ngheduoc-card__title {
	font-weight: 600;
}

.is-style-broadsheet-kicker {
	font-weight: 600;
}

/*
 * Site Logo Brand Mark
 * Displays the official Asclepius N-D monogram mark.
 * Optical Center Alignment with the site title (Brand Identity Standard).
 */
.broadsheet-header__brand {
	display: flex;
	align-items: center;
	gap: 0.625rem;
}

.broadsheet-header__brand .wp-block-site-logo {
	display: flex;
	align-items: center;
	margin: 0;
	line-height: 1;
}

.broadsheet-header__brand .wp-block-site-logo a {
	display: flex;
	align-items: center;
	line-height: 1;
}

.broadsheet-header__brand .wp-block-site-logo img {
	width: auto;
	height: 35px;
	max-width: 50px;
	object-fit: contain;
	display: block;
	transform: translateY(1px); /* Optical adjustment: cân bằng trục giữa thân chữ N-D và chữ Nghề Dược */
}

.broadsheet-header__brand .wp-block-site-title {
	display: flex;
	align-items: center;
	margin: 0;
	line-height: 1.1;
}

.broadsheet-header__brand .wp-block-site-title a {
	display: inline-block;
	color: var(--wp--preset--color--primary);
	line-height: 1.1;
}