/*
Theme Name: Tan Viet Theme
Author: Tân Việt
Description: Theme WordPress block nhẹ, hiện đại cho website nội dung, blog và landing page. Tối ưu cho hình ảnh, video và trải nghiệm đọc trên mọi thiết bị.
Requires at least: 7.1
Tested up to: 7.1
Requires PHP: 8.0
Version: 1.1.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: tanviettheme
Domain Path: /languages
Tags: blog, news, portfolio, block-patterns, block-styles, full-site-editing, wide-blocks, custom-colors, custom-logo, editor-style, featured-images, translation-ready
*/

/*
 * Tan Viet Theme keeps its presentation layer deliberately small. Most design
 * decisions live in theme.json so that they remain editable in Global Styles.
 */

:root {
	--tv-transition: 180ms cubic-bezier(.2, .65, .3, 1);
	--tv-shadow-soft: 0 10px 35px rgba(17, 24, 39, .07);
	--tv-shadow-card: 0 16px 45px rgba(17, 24, 39, .10);
}

html {
	scroll-behavior: smooth;
}

body {
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

body,
button,
input,
select,
textarea {
	text-rendering: optimizeLegibility;
}

a {
	text-underline-offset: .18em;
	text-decoration-thickness: .08em;
}

:where(a, button, input, textarea, select, summary, [tabindex]):focus-visible {
	outline: 3px solid var(--wp--preset--color--contrast);
	outline-offset: 3px;
	box-shadow: 0 0 0 5px var(--wp--preset--color--base);
}

.tv-404-home .wp-block-navigation-item__content {
	background: var(--wp--preset--color--primary);
	border-radius: 999px;
	color: var(--wp--preset--color--base);
	font-weight: 700;
	padding: .75rem 1.25rem;
	text-decoration: none;
}

img {
	height: auto;
}

.wp-site-blocks {
	min-height: 100vh;
}

.wp-site-blocks > footer {
	margin-block-start: 0;
}

.screen-reader-text:focus {
	background: var(--wp--preset--color--base);
	color: var(--wp--preset--color--contrast);
	display: block;
	font-size: 1rem;
	font-weight: 700;
	left: 1rem;
	padding: .75rem 1rem;
	position: fixed;
	top: 1rem;
	z-index: 100000;
}

/* Header */
.tv-header {
	backdrop-filter: saturate(160%) blur(14px);
	-webkit-backdrop-filter: saturate(160%) blur(14px);
	border-bottom: 1px solid color-mix(in srgb, var(--wp--preset--color--border) 80%, transparent);
	box-shadow: 0 1px 0 rgba(17, 24, 39, .02);
	position: relative;
}

header.wp-block-template-part {
	position: sticky;
	top: 0;
	z-index: 100;
}

.admin-bar header.wp-block-template-part {
	top: 32px;
}

.tv-header__inner {
	min-height: 76px;
}

.tv-brand .wp-block-site-logo {
	flex: 0 0 auto;
}

.tv-brand .wp-block-site-title {
	line-height: 1.05;
}

.tv-brand .wp-block-site-tagline {
	line-height: 1.35;
}

.tv-header .wp-block-navigation-item__content {
	position: relative;
}

.tv-header .wp-block-navigation-item__content::after {
	background: var(--wp--preset--color--primary);
	bottom: -.4rem;
	content: "";
	height: 2px;
	left: 0;
	position: absolute;
	transform: scaleX(0);
	transform-origin: right;
	transition: transform var(--tv-transition);
	width: 100%;
}

.tv-header .wp-block-navigation-item__content:hover::after,
.tv-header .current-menu-item > .wp-block-navigation-item__content::after {
	transform: scaleX(1);
	transform-origin: left;
}

.tv-header-search .wp-block-search__inside-wrapper {
	border-color: var(--wp--preset--color--border);
	border-radius: 999px;
	padding: 2px;
}

.tv-header-search .wp-block-search__input {
	min-width: 10rem;
}

/* Hero and section treatments */
.tv-hero {
	isolation: isolate;
	overflow: hidden;
	position: relative;
}

.tv-hero::before,
.tv-hero::after {
	border-radius: 999px;
	content: "";
	pointer-events: none;
	position: absolute;
	z-index: -1;
}

.tv-hero::before {
	background: color-mix(in srgb, var(--wp--preset--color--primary) 14%, transparent);
	filter: blur(2px);
	height: 28rem;
	right: -9rem;
	top: -14rem;
	width: 28rem;
}

.tv-hero::after {
	background: color-mix(in srgb, var(--wp--preset--color--accent) 13%, transparent);
	bottom: -12rem;
	height: 24rem;
	left: -10rem;
	width: 24rem;
}

.tv-eyebrow {
	letter-spacing: .14em;
	text-transform: uppercase;
}

.tv-section-heading {
	position: relative;
}

.tv-section-heading::after {
	background: var(--wp--preset--color--primary);
	border-radius: 999px;
	content: "";
	display: block;
	height: 4px;
	margin-top: .7rem;
	width: 3.25rem;
}

/* Post cards and query loops */
.tv-post-grid .wp-block-post {
	background: var(--wp--preset--color--base);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 18px;
	display: flex;
	flex-direction: column;
	overflow: clip;
	transition: border-color var(--tv-transition), box-shadow var(--tv-transition), transform var(--tv-transition);
}

.tv-post-grid .wp-block-post:hover {
	border-color: color-mix(in srgb, var(--wp--preset--color--primary) 42%, var(--wp--preset--color--border));
	box-shadow: var(--tv-shadow-card);
	transform: translateY(-4px);
}

.tv-post-grid .wp-block-post-featured-image {
	margin: 0;
	overflow: hidden;
}

.tv-post-grid .wp-block-post-featured-image img {
	transition: transform 450ms cubic-bezier(.2, .65, .3, 1);
}

.tv-post-grid .wp-block-post:hover .wp-block-post-featured-image img {
	transform: scale(1.035);
}

.tv-post-grid .tv-card-content {
	display: flex;
	flex: 1;
	flex-direction: column;
}

.tv-post-grid .wp-block-post-excerpt {
	flex: 1;
}

.tv-post-list .wp-block-post {
	border-bottom: 1px solid var(--wp--preset--color--border);
	padding-block: var(--wp--preset--spacing--50);
}

.tv-post-list .wp-block-post:first-child {
	padding-block-start: 0;
}

.tv-post-list .wp-block-post:last-child {
	border-bottom: 0;
}

.tv-meta,
.tv-meta a {
	color: var(--wp--preset--color--muted);
}

.tv-meta a:hover {
	color: var(--wp--preset--color--primary);
}

.tv-meta > *:not(:last-child)::after {
	color: var(--wp--preset--color--border);
	content: "\2022";
	margin-inline: .55rem;
}

.wp-block-post-title a {
	text-decoration: none;
}

.wp-block-post-title a:hover {
	color: var(--wp--preset--color--primary);
}

.wp-block-query-pagination-numbers .page-numbers,
.wp-block-query-pagination-previous,
.wp-block-query-pagination-next {
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 999px;
	display: inline-flex;
	justify-content: center;
	min-width: 2.5rem;
	padding: .5rem .8rem;
	text-decoration: none;
}

.wp-block-query-pagination-numbers .current,
.wp-block-query-pagination-numbers .page-numbers:hover,
.wp-block-query-pagination-previous:hover,
.wp-block-query-pagination-next:hover {
	background: var(--wp--preset--color--primary);
	border-color: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--base);
}

/* Article pages */
.tv-article-header {
	position: relative;
}

.tv-entry-content {
	overflow-wrap: break-word;
}

.tv-entry-content :where(h2, h3, h4) {
	scroll-margin-top: 7rem;
}

.tv-entry-content :where(p, li) {
	hanging-punctuation: first last;
}

.tv-entry-content > :where(figure.wp-block-image, .wp-block-gallery, .wp-block-video) {
	margin-block: clamp(1.75rem, 4vw, 3rem);
}

.tv-entry-content .wp-block-image img,
.tv-entry-content .wp-block-video video,
.wp-block-post-featured-image img {
	border-radius: 12px;
}

.tv-entry-content figcaption {
	color: var(--wp--preset--color--muted);
	font-size: var(--wp--preset--font-size--small);
	margin-top: .65rem;
	text-align: center;
}

.tv-entry-content :where(iframe, video) {
	max-width: 100%;
}

.tv-entry-content .wp-block-embed__wrapper {
	border-radius: 12px;
	overflow: clip;
}

.tv-post-navigation {
	border-block: 1px solid var(--wp--preset--color--border);
}

.tv-post-navigation a {
	font-weight: 700;
	text-decoration: none;
}

.tv-comments {
	border-top: 1px solid var(--wp--preset--color--border);
}

.wp-block-comment-template > li {
	border-bottom: 1px solid var(--wp--preset--color--border);
	padding-block: var(--wp--preset--spacing--40);
}

/* Sidebar */
.tv-sidebar {
	background: var(--wp--preset--color--surface);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 18px;
}

.tv-sidebar .wp-block-heading {
	border-bottom: 1px solid var(--wp--preset--color--border);
	padding-bottom: .65rem;
}

.tv-sidebar :where(.wp-block-latest-posts, .wp-block-categories-list) {
	list-style: none;
	padding-left: 0;
}

.tv-sidebar :where(.wp-block-latest-posts, .wp-block-categories-list) li + li {
	border-top: 1px solid var(--wp--preset--color--border);
	margin-top: .75rem;
	padding-top: .75rem;
}

.tv-sidebar a {
	text-decoration: none;
}

/* Forms and utilities */
:where(input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]), select, textarea) {
	background: var(--wp--preset--color--base);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 10px;
	color: var(--wp--preset--color--contrast);
	font: inherit;
	padding: .75rem .9rem;
}

:where(input, select, textarea):focus {
	border-color: var(--wp--preset--color--primary);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--wp--preset--color--primary) 15%, transparent);
}

.wp-element-button,
.wp-block-button__link {
	transition: box-shadow var(--tv-transition), transform var(--tv-transition), background-color var(--tv-transition);
}

.wp-element-button:hover,
.wp-block-button__link:hover {
	box-shadow: 0 8px 22px color-mix(in srgb, var(--wp--preset--color--primary) 24%, transparent);
	transform: translateY(-2px);
}

.is-style-outline > .wp-block-button__link:hover {
	background: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--base);
}

/* Footer */
.tv-footer {
	margin-block-start: 0;
}

.tv-footer a {
	color: inherit;
}

.tv-footer a:hover {
	color: var(--wp--preset--color--accent);
}

.tv-footer .wp-block-navigation-item__content {
	padding-block: .2rem;
}

.tv-footer__bottom {
	border-top: 1px solid rgba(255, 255, 255, .14);
}

/* Special templates */
.tv-landing .tv-entry-content {
	margin-block-start: 0;
}

.tv-404-code {
	background: linear-gradient(135deg, var(--wp--preset--color--primary), var(--wp--preset--color--secondary));
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	line-height: .85;
}

@media (max-width: 900px) {
	.tv-header-search {
		display: none;
	}

	.tv-sidebar-layout {
		grid-template-columns: 1fr !important;
	}
}

@media (max-width: 782px) {
	.admin-bar header.wp-block-template-part {
		top: 46px;
	}

	.tv-header__inner {
		min-height: 66px;
	}

	.tv-brand .wp-block-site-tagline {
		display: none;
	}

	.tv-footer__bottom {
		align-items: flex-start !important;
		flex-direction: column;
	}
}

@media (max-width: 600px) {
	#wpadminbar {
		position: fixed;
	}

	.tv-post-grid .wp-block-post-template {
		grid-template-columns: 1fr;
	}

	.tv-meta {
		align-items: flex-start !important;
		flex-direction: column;
		gap: .2rem !important;
	}

	.tv-meta > *:not(:last-child)::after {
		content: none;
	}

	.tv-post-navigation {
		align-items: flex-start !important;
		flex-direction: column;
	}
}

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}

	*,
	*::before,
	*::after {
		scroll-behavior: auto !important;
		transition-duration: .01ms !important;
	}
}