/*
Theme Name: Country Block
Theme URI: https://voyager-hcm.com
Author: Voyager
Description: A minimal block theme (Full Site Editing).
Version: 1.0.0
Requires at least: 6.4
Tested up to: 6.5
Requires PHP: 7.4
Text Domain: country-block
*/

/* @import phải đứng trước mọi rule. Font Inter từ Google Fonts (variable 100..900). */
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@100..900&display=swap");

/* ponytail: layout/colors/typography live in theme.json — keep only what blocks can't express */

body,
html {
	margin: 0 !important;
}

/* ===== Typography utilities (text-{weight}-{size}) — map từ text style Figma =====
   Size cố định px theo Figma; mobile (≤781px) override ở cuối file. */
.text-bold-5xl {
	/* Figma H1 64px (mobile 48px) */
	font-size: 64px;
	font-weight: 700;
	line-height: 1.1;
	letter-spacing: -0.64px;
}
.text-bold-3xl {
	/* Figma section H2 36px (giữ nguyên trên mobile) */
	font-size: 36px;
	font-weight: 700;
	line-height: 1.15;
	letter-spacing: 0.36px;
}
.text-regular-md {
	/* Figma body 16px / lh 24 */
	font-size: 16px;
	font-weight: 400;
	line-height: 1.5;
}
.text-regular-sm {
	/* Figma nav & footer meta 14px */
	font-size: 14px;
	font-weight: 400;
	line-height: 1.4;
}

/* ===== Ngắt dòng theo Figma =====
   <br> trần = xuống dòng ở cả 2 breakpoint. .min-sm / .max-sm = chỉ 1 bên
   (bên còn lại để text wrap tự nhiên đúng như Figma). */
.max-sm {
	display: none;
}

/* ===== Sticky footer: footer luôn ở đáy khi nội dung ngắn ===== */
.wp-site-blocks {
	display: flex;
	flex-direction: column;
	min-height: 96vh;
}

footer {
	border-top: 1px solid var(--wp--preset--color--border);
	margin-top: auto;
}
.wp-site-blocks > main {
	flex: 1 0 auto;
	margin-block-start: 0; /* bo gap 24px mac dinh WP giua header va main (footer giu margin-top:auto) */
}

/* ===== Header ===== */
/* Figma: khong co nav — chi con logo (desktop trai, mobile giua o media query) */
.site-logo {
	margin: 0;
}
.wp-block-site-title {
	margin: 0;
}
.wp-block-site-title a {
	color: var(--wp--preset--color--azure-17);
	text-decoration: none;
}
.wp-block-navigation a {
	text-decoration: none;
}
.wp-block-navigation .wp-block-navigation-item__content {
	color: var(--wp--preset--color--azure-17);
	transition: color 0.15s ease;
}
.wp-block-navigation .wp-block-navigation-item__content:hover,
.wp-block-navigation .current-menu-item > .wp-block-navigation-item__content {
	color: var(--wp--preset--color--muted);
}
/* Nav: giu hamburger toi 781px cho khop breakpoint mobile (core mac dinh doi o 600px).
   Trong 600-781: hien nut hamburger, an menu ngang (scope .wp-block-navigation de thang specificity core). */
@media (min-width: 600px) and (max-width: 781px) {
	.wp-block-navigation .wp-block-navigation__responsive-container-open:not(.always-shown) {
		display: flex;
	}
	.wp-block-navigation .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) {
		display: none;
	}
}

/* ===== Footer ===== */
footer.wp-block-group a {
	color: inherit;
	text-decoration: none;
	transition: color 0.15s ease;
}
footer.wp-block-group a:hover {
	color: var(--wp--preset--color--azure-17);
	text-decoration: underline;
}

/* Hang meta cuoi footer. Figma desktop: © trai, 2 link don ve phai cach nhau 48px.
   Selector 2 class de thang rule gap cua WP flex layout (cung do uu tien, in sau). */
footer .footer-meta {
	gap: 48px;
}
footer .footer-meta > :nth-child(2) {
	margin-left: auto;
}

/* Email signup form */
.email-form {
	display: flex;
	align-items: center;
	gap: 8px;
	/* Figma: 448x52 ke ca vien -> border-box (khoi wp:html khong an theo reset cua core) */
	box-sizing: border-box;
	width: 100%;
	max-width: 448px;
	height: 52px;
	padding: 6px 7px 6px 24px;
	border: 1px solid var(--wp--preset--color--azure-17);
	border-radius: 999px;
}
.email-form__input {
	flex: 1;
	min-width: 0;
	border: 0;
	background: transparent;
	outline: none;
	font-size: 14px;
	color: inherit;
}
.email-form__input::placeholder {
	color: var(--wp--preset--color--muted);
}
.email-form__btn {
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: 38px;
	height: 38px;
	border: 1px solid var(--wp--preset--color--azure-17);
	border-radius: 999px;
	background: transparent;
	color: var(--wp--preset--color--azure-17);
	font-size: 18px;
	line-height: 1;
	cursor: pointer;
	transition:
		background 0.15s ease,
		color 0.15s ease;
}
.email-form__btn:hover {
	background: var(--wp--preset--color--azure-17);
	color: var(--wp--preset--color--white-solid);
}

/* ===== Static page templates (page-*.html) =====
   Scope 'section.page' — KHONG dung '.page' vi WordPress them class 'page' vao <body>
   cho moi Page, se leak (h1/padding...) ra toan trang. */
section.page {
	padding-block: 56px;
}
section.page h1 {
	font-size: 32px;
	font-weight: 700;
	margin: 0 0 12px;
}
section.page h2 {
	font-size: 20px;
	font-weight: 700;
	margin: 32px 0 8px;
}
section.page p {
	margin: 0 0 16px;
	color: var(--wp--preset--color--azure-17);
}
.contact-list {
	list-style: none;
	padding: 0;
	margin: 0;
	line-height: 2.2;
}
.catalog-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
	gap: 24px;
	margin-top: 24px;
}
.catalog-item {
	display: flex;
	flex-direction: column;
	gap: 8px;
}
.catalog-thumb {
	aspect-ratio: 4 / 3;
	border-radius: 8px;
	background: var(--wp--preset--color--border);
}
.catalog-item h3 {
	margin: 0;
	font-size: 17px;
	font-weight: 600;
}
.catalog-item .price {
	margin: 0;
	color: var(--wp--preset--color--muted);
}

/* ===== Privacy / legal page — spacing chuan Figma (font tu utility class text-bold-*) ===== */
.privacy {
	padding-block: 80px; /* desktop; mobile 40px o media query cuoi file */
	font-size: 16px; /* Figma body 16px (heading override bang utility class) */
	line-height: 1.5; /* Figma lh 24/16 */
}
.privacy h1 {
	margin: 0 0 40px; /* title -> body (Figma) */
	text-align: center;
}
.privacy h2 {
	margin: 40px 0 16px; /* section gap 40 + heading -> body 16 (Figma) */
}
.privacy h3 {
	/* Figma sub-heading 24px/700 (vd "a. Personal Information", "Your Content") */
	font-size: 24px;
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: 0.36px;
	margin: 16px 0;
}
.privacy p {
	margin: 0 0 16px;
	line-height: 1.5; /* Figma body lh 24/16 */
	color: var(--wp--preset--color--azure-17);
}
.privacy ul {
	margin: 0 0 16px;
	padding-inline-start: 24px; /* Figma list indent ms-24 */
	list-style: disc;
}
.privacy li {
	margin: 0;
	line-height: 1.5;
	color: var(--wp--preset--color--azure-17);
}
.privacy a {
	color: inherit; /* bo mau accent, link theo mau chu */
}

/* ===== Homepage: Hero ===== */
.hero {
	/* gradient token hero-mist fade → trong suốt (biến rgba trong suốt của cùng màu) để liền features */
	background: linear-gradient(to bottom, var(--wp--preset--color--hero-mist) 0%, rgba(226, 230, 243, 0) 40%);
}
.hero__lead {
	max-width: 493px; /* Figma: lead 493px, canh giua trong cot 757px */
	margin-inline: auto;
}
/* Be rong 1036px do wideSize cua group hero (patterns/hero.php) lo — dung lap o day. */
.hero__image img {
	width: 100%;
	height: auto;
	/* export gom ca drop shadow (+10px day) nen dung dung ty le file */
	aspect-ratio: 2072 / 1192;
}

/* ===== Homepage: Feature rows ===== */
.feature-row {
	gap: 133px; /* Figma gap anh/text 133px (mobile override o media query) */
}
.feature-row--reverse {
	flex-direction: row-reverse;
}
.feature-row__image {
	flex: 1.2 1 360px; /* Figma ảnh 612 : chữ 503 */
	margin: 0;
}
.feature-row__image img {
	width: 100%;
	height: auto;
	aspect-ratio: 1224 / 960; /* Figma 612x480, giu ty le tranh CLS */
	border-radius: 24px; /* Figma card radius 24px */
}
.feature-row__text {
	flex: 1 1 320px;
	max-width: 503px;
}
@media (max-width: 781px) {
	/* Root padding 2 ben: 96px desktop -> 16px mobile (Figma) */
	body {
		--wp--style--root--padding-left: 16px;
		--wp--style--root--padding-right: 16px;
	}
	/* Figma mobile: text tren, anh duoi, canh giua (DOM anh->text nen column-reverse) */
	.feature-row,
	.feature-row--reverse {
		flex-direction: column-reverse;
		gap: 40px; /* Figma: gap text/anh mobile */
	}
	.feature-row__text {
		max-width: none;
		text-align: center;
		flex-basis: auto;
	}
	.feature-row__image {
		flex-basis: auto;
	}
	/* Gap giua cac feature row: 160px -> 80px (Figma) */
	.features > .feature-row + .feature-row {
		margin-block-start: 80px;
	}
	/* H1 mobile 48px (Figma); H2 giu 36px */
	.text-bold-5xl {
		font-size: 48px;
		letter-spacing: -0.48px;
	}
	/* Figma mobile: hero pt 80->40; khoang cach hero->features 240->120; features pb 160->80.
	   !important de de inline block-style. */
	.hero {
		padding-top: 40px !important;
	}
	.features {
		padding-top: 120px !important;
		padding-bottom: 80px !important;
	}
	.hero__lead {
		max-width: none; /* Figma mobile: lead tran full 358px */
	}
	/* Figma mobile: logo canh giua */
	header.wp-block-group > .wp-block-group {
		justify-content: center;
	}
	/* Figma mobile: footer padding 96 -> 40 */
	footer.wp-block-group {
		padding-top: 40px !important;
		padding-bottom: 40px !important;
	}
	/* Figma mobile: © / Privacy / Term dan hang ngang tren 1 dong:
	   bo margin-left:auto, column-gap 0 -> space-between chia deu (giong Figma). */
	footer .footer-meta {
		column-gap: 0;
		row-gap: 8px;
	}
	footer .footer-meta > :nth-child(2) {
		margin-left: 0;
	}
	/* Ngat dong: doi vai tro <br> giua desktop/mobile */
	.min-sm {
		display: none;
	}
	.max-sm {
		display: inline;
	}
	/* Privacy page: padding tren/duoi 80 -> 40 (Figma mobile) */
	.privacy {
		padding-block: 40px;
	}
}

/* ===== Featured Cards ===== */
.featured-cards .card img {
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	border-radius: 8px;
}
.featured-cards .card__title,
.featured-cards .card h3 {
	font-weight: 600;
}