/* ============================================================================
 * Gia Phả Dòng Họ — CSS dùng chung cho các Custom Page Template.
 * Enqueue qua functions.php, CHỈ nạp trên các template của site này (+ single.php).
 * Base scope theo class .gp-page; phần RIÊNG của từng trang nằm trong <style> của
 * template tương ứng (scope theo #id, đè base khi cần).
 *
 * Bảng màu "tĩnh": Ivory · Nâu gỗ · Xanh rêu · Xám than. Đỏ/vàng chỉ điểm nhấn nhỏ.
 * Font serif toàn site: Playfair Display + Cormorant Garamond (tiêu đề) · Noto Serif (thân).
 * ========================================================================== */

/* --- Header Astra: cố định + trong suốt, đổi nền khi cuộn --- */
.site-header,
#masthead {
	position: fixed !important;
	top: 0; left: 0; right: 0; width: 100%;
	z-index: 999;
	box-shadow: none;
	transition: box-shadow .4s ease;
}
.site-header .ast-main-header-wrap,
.site-header .ast-primary-header-bar,
.site-header .main-header-bar {
	background: transparent !important;
	background-color: transparent !important;
	box-shadow: none !important;
	border-bottom: 0 !important;
	transition: background-color .4s ease !important;
}
.site-header.gp-scrolled .ast-main-header-wrap,
.site-header.gp-scrolled .ast-primary-header-bar,
.site-header.gp-scrolled .main-header-bar {
	background-color: #f8f6f2 !important;
}
.site-header.gp-scrolled { box-shadow: 0 6px 24px rgba(61, 52, 42, .10); }

/* --- Logo đã có sẵn chữ "GIA PHẢ HỌ NGUYỄN" -> ẩn site-title trùng lặp trong header --- */
.site-header .ast-site-title-wrap { display: none !important; }

/* --- Trang có HERO/BANNER TỐI ở đầu (body.gp-dark-top, gắn ở functions.php):
   header chữ trắng + lớp phủ mờ cho dễ đọc. --- */
body.gp-dark-top .site-header:not(.gp-scrolled) .main-header-menu .menu-link,
body.gp-dark-top .site-header:not(.gp-scrolled) .ast-builder-menu .menu-link,
body.gp-dark-top .site-header:not(.gp-scrolled) .site-title a { color: #fff !important; }

body.gp-dark-top .site-header:not(.gp-scrolled)::before {
	content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
	background: linear-gradient(to bottom, rgba(30, 24, 16, .5), rgba(30, 24, 16, 0));
}

/* --- Ẩn footer mặc định Astra trên các trang có footer riêng (body.gp-custom-page) --- */
body.gp-custom-page .site-footer,
body.gp-custom-page #colophon { display: none !important; }

/* --- Ép vùng nội dung Astra tràn toàn màn hình --- */
#content.site-content { padding: 0 !important; }
#content .ast-container {
	max-width: 100% !important;
	width: 100% !important;
	padding-left: 0 !important;
	padding-right: 0 !important;
	background: transparent !important;
	box-shadow: none !important;
}
html { scroll-behavior: smooth; }

/* ============ BASE (scope .gp-page) ============ */
.gp-page {
	--c-primary: #556b2f;     /* Xanh rêu — nút/CTA/điểm nhấn chính */
	--c-primary-d: #44561f;   /* Xanh rêu đậm — hover/gradient */
	--c-wood: #7a5c3e;        /* Nâu gỗ — eyebrow, viền, chi tiết cổ */
	--c-wood-d: #5e472f;      /* Nâu gỗ đậm */
	--c-accent: #9c3b2e;      /* Đỏ trầm — điểm nhấn nhỏ (lễ nghi) */
	--c-gold: #b08a3e;        /* Vàng đồng — điểm nhấn nhỏ */
	--c-heading: #3d342a;     /* Nâu than — tiêu đề */
	--c-bg: #f8f6f2;          /* Trắng ngà (Ivory) — nền chủ đạo */
	--c-bg-soft: #f1ece3;     /* Nền phụ ấm */
	--c-bg-warm: #eae1d4;     /* Nền phụ đậm hơn */
	--c-text: #333333;        /* Xám than — chữ thân */
	--c-text-soft: #6b6256;   /* Chữ phụ */
	--c-neutral: #e3dccd;     /* Viền thẻ, đường kẻ */
	--sex-m: #3f6079;         /* Nam — xanh mực trầm (phân biệt giới tính) */
	--sex-f: #9c5b53;         /* Nữ — nâu đất hồng trầm */
	--shadow: 0 24px 60px rgba(61, 52, 42, .14);
	--shadow-sm: 0 10px 30px rgba(61, 52, 42, .09);
	--ease: cubic-bezier(.22, 1, .36, 1);
	--r: 3px;                 /* Bo góc thống nhất (nút/thẻ/ảnh) */

	width: 100%;
	overflow-x: hidden;
	font-family: "Noto Serif", Georgia, serif;
	color: var(--c-text);
	line-height: 1.8;
	background: var(--c-bg);
	-webkit-font-smoothing: antialiased;
}
.gp-page *, .gp-page *::before, .gp-page *::after { box-sizing: border-box; }
.gp-page img { display: block; max-width: 100%; }
.gp-page p { margin: 0 0 1em; }
.gp-page ul { margin: 0; padding: 0; list-style: none; }
.gp-page a { text-decoration: none; color: inherit; }
.gp-page [id] { scroll-margin-top: 100px; }

.gp-page h1,
.gp-page h2,
.gp-page h3 {
	font-family: "Playfair Display", "Cormorant Garamond", Georgia, serif;
	font-weight: 600; color: var(--c-heading); margin: 0; line-height: 1.18;
}

.gp-page .gp-wrap { max-width: 1180px; margin: 0 auto; padding: 0 28px; }

.gp-page .gp-eyebrow {
	font-size: .72rem; letter-spacing: .3em; text-transform: uppercase;
	color: var(--c-wood); font-weight: 600; margin: 0 0 18px;
	font-family: "Noto Serif", Georgia, serif;
}
.gp-page .gp-title { font-size: clamp(2rem, 4vw, 3.1rem); margin: 0 0 22px; text-wrap: balance; }
.gp-page .gp-lead { color: var(--c-text-soft); font-size: 1.08rem; max-width: 62ch; text-wrap: pretty; }

.gp-page .gp-head { text-align: center; max-width: 760px; margin: 0 auto clamp(40px, 6vw, 64px); }
.gp-page .gp-head .gp-lead { margin: 0 auto; }

/* --- Đường gạch trang trí dưới tiêu đề (cảm giác cổ, trang nghiêm) --- */
.gp-page .gp-rule {
	width: 56px; height: 2px; background: var(--c-wood);
	margin: 0 auto 22px; opacity: .6;
}

/* --- Buttons --- */
.gp-page .gp-btn {
	display: inline-block; font-size: .74rem; letter-spacing: .2em; text-transform: uppercase;
	font-weight: 600; padding: 15px 36px; border: 1px solid var(--c-primary);
	color: var(--c-primary); background: transparent; border-radius: var(--r); cursor: pointer;
	transition: all .4s var(--ease); font-family: "Noto Serif", Georgia, serif;
}
.gp-page .gp-btn:hover { background: var(--c-primary); color: #fff; transform: translateY(-2px); }
.gp-page .gp-btn--solid { background: var(--c-primary); color: #fff; }
.gp-page .gp-btn--solid:hover { background: var(--c-primary-d); border-color: var(--c-primary-d); }

/* --- Sections base --- */
.gp-page .gp-section { padding: clamp(64px, 9vw, 120px) 0; }
.gp-page .gp-section--soft { background: var(--c-bg-soft); }
.gp-page .gp-section--warm { background: var(--c-bg-warm); }

/* --- Banner đầu trang (tối) — dùng chung cho các trang nội dung (Gia huấn, Giới thiệu…) --- */
.gp-page .gp-banner {
	position: relative; text-align: center; color: #fff; overflow: hidden;
	padding: clamp(150px, 20vh, 240px) 0 clamp(60px, 9vw, 110px);
	background: linear-gradient(150deg, #3a2e20, #2c2417);
}
.gp-page .gp-banner .gp-eyebrow { color: var(--c-gold); }
.gp-page .gp-banner .gp-rule { background: var(--c-gold); opacity: .8; }
.gp-page .gp-banner h1 {
	color: #fff; font-size: clamp(2.4rem, 5.5vw, 4rem); margin: 0 auto 18px; max-width: 20ch;
	text-shadow: 0 2px 30px rgba(0, 0, 0, .3); text-wrap: balance;
}
.gp-page .gp-banner__sub {
	font-family: "Cormorant Garamond", serif; font-style: italic; font-weight: 500;
	font-size: clamp(1.2rem, 2.6vw, 1.7rem); color: rgba(255, 255, 255, .9);
	max-width: 52ch; margin: 0 auto;
}

/* --- Lưới 3 thẻ (dùng chung) --- */
.gp-page .gp-grid3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.gp-page .gp-card {
	background: #fff; border: 1px solid var(--c-neutral); border-radius: var(--r);
	padding: 40px 34px; box-shadow: var(--shadow-sm);
	transition: transform .4s var(--ease), box-shadow .4s var(--ease);
}
.gp-page .gp-card:hover { transform: translateY(-6px); box-shadow: var(--shadow); }
.gp-page .gp-card h3 { font-size: 1.5rem; margin: 0 0 12px; }
.gp-page .gp-card p { margin: 0; color: var(--c-text-soft); font-size: 1rem; }

/* --- Thẻ tin gọn (khối "Tin tức") — markup khớp helper gp_post_card() --- */
.gp-page .gp-postcard-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.gp-page .gp-postcard { display: flex; flex-direction: column; background: #fff; border: 1px solid var(--c-neutral); border-radius: var(--r); overflow: hidden; box-shadow: var(--shadow-sm); transition: transform .4s var(--ease), box-shadow .4s var(--ease); }
.gp-page .gp-postcard:hover { transform: translateY(-6px); box-shadow: var(--shadow); }
.gp-page .gp-postcard__media { display: block; aspect-ratio: 16 / 10; overflow: hidden; background: linear-gradient(135deg, #e7ddcb, #cdbfa3); }
.gp-page .gp-postcard__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease); }
.gp-page .gp-postcard:hover .gp-postcard__media img { transform: scale(1.05); }
.gp-page .gp-postcard__body { padding: 20px 22px 24px; }
.gp-page .gp-postcard__cat { display: block; font-size: .68rem; letter-spacing: .12em; text-transform: uppercase; color: var(--c-wood); font-weight: 600; margin-bottom: 8px; }
.gp-page .gp-postcard__title { font-size: 1.25rem; line-height: 1.3; margin: 0 0 8px; }
.gp-page .gp-postcard__title a { transition: color .3s ease; }
.gp-page .gp-postcard__title a:hover { color: var(--c-primary); }
.gp-page .gp-postcard__date { font-size: .82rem; color: var(--c-text-soft); }
@media (max-width: 900px) { .gp-page .gp-postcard-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .gp-page .gp-postcard-grid { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { .gp-page .gp-postcard__media img { transition: none !important; transform: none !important; } }

/* --- Footer dùng chung (markup từ helper gp_site_footer) --- */
.gp-page .gp-footer { background: #2c2417; color: rgba(255, 255, 255, .68); padding: clamp(52px, 7vw, 80px) 0 clamp(28px, 4vw, 40px); }
.gp-page .gp-footer__main { display: grid; grid-template-columns: 1.6fr 1fr 1fr; gap: clamp(32px, 5vw, 64px); }
.gp-page .gp-footer__brand { font-family: "Playfair Display", serif; font-size: 1.7rem; color: #fff; }
.gp-page .gp-footer__brand span { display: block; font-family: "Noto Serif", serif; font-size: .72rem; letter-spacing: .2em; text-transform: uppercase; color: var(--c-gold); margin-top: 6px; }
.gp-page .gp-footer__logo img,
.gp-page .gp-footer__logo .custom-logo { max-height: 60px; width: auto; }
.gp-page .gp-footer__tagline { margin: 18px 0 0; font-style: italic; font-family: "Cormorant Garamond", serif; font-size: 1.15rem; color: rgba(255, 255, 255, .6); max-width: 34ch; }
.gp-page .gp-footer__col h4 { font-family: "Noto Serif", serif; font-weight: 600; font-size: .74rem; letter-spacing: .18em; text-transform: uppercase; color: var(--c-gold); margin: 0 0 18px; }
.gp-page .gp-footer__col li { margin-bottom: 12px; }
.gp-page .gp-footer__col a { color: rgba(255, 255, 255, .7); transition: color .3s ease, padding-left .3s ease; }
.gp-page .gp-footer__col a:hover { color: #fff; padding-left: 4px; }
.gp-page .gp-footer__copy { margin: clamp(32px, 5vw, 48px) 0 0; padding-top: 22px; border-top: 1px solid rgba(255, 255, 255, .12); font-size: .85rem; text-align: center; }
@media (max-width: 900px) {
	.gp-page .gp-footer__main { grid-template-columns: 1fr 1fr; }
	.gp-page .gp-footer__brand-col { grid-column: 1 / -1; }
}
@media (max-width: 560px) { .gp-page .gp-footer__main { grid-template-columns: 1fr; } }

/* --- Scroll reveal --- */
.gp-page .gp-reveal { opacity: 0; transform: translateY(34px); transition: opacity .9s var(--ease), transform .9s var(--ease); }
.gp-page .gp-reveal.gp-in { opacity: 1; transform: none; }
.gp-page .gp-reveal[data-d="1"] { transition-delay: .1s; }
.gp-page .gp-reveal[data-d="2"] { transition-delay: .2s; }
.gp-page .gp-reveal[data-d="3"] { transition-delay: .3s; }
.gp-page .gp-reveal[data-d="4"] { transition-delay: .4s; }

/* --- Reduced motion --- */
@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto !important; }
	.gp-page .gp-reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
}