/*
Theme Name: KarateDojo
Theme URI: https://example.com/karatedojo
Author: KarateDojo Team
Author URI: https://example.com
Description: Giao diện khối (Block Theme) dành cho các Câu lạc bộ và Võ đường Karate tại Việt Nam. Hỗ trợ Trình chỉnh sửa toàn trang (Full Site Editing), nhiều mẫu giao diện (Truyền thống, Hiện đại, Tối giản Zen, Năng động Kids) và tích hợp sẵn với plugin Dojo Manager (lịch học, lớp học, HLV, học phí, lộ trình đai, đăng ký học thử).
Version: 0.2.0
Requires at least: 6.5
Tested up to: 6.8
Requires PHP: 8.1
License: GPL-2.0-or-later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: karatedojo
Tags: block-theme, full-site-editing, block-patterns, one-column, custom-colors, custom-menu, editor-style, translation-ready
*/

/* =========================================================
   Lớp thiết kế của KarateDojo.
   Mọi màu sắc lấy từ biến preset của theme.json nên cả 4 mẫu
   giao diện (Truyền thống / Hiện đại / Zen / Kids) đều hưởng chung.
   ========================================================= */

:root {
	--kd-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.06), 0 2px 8px rgba(0, 0, 0, 0.06);
	--kd-shadow-md: 0 4px 14px rgba(0, 0, 0, 0.08), 0 12px 32px rgba(0, 0, 0, 0.10);
	--kd-shadow-lg: 0 12px 28px rgba(0, 0, 0, 0.16), 0 24px 60px rgba(0, 0, 0, 0.14);
	--kd-radius: 14px;
	--kd-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

html {
	scroll-behavior: smooth;
}

::selection {
	background: var(--wp--preset--color--primary);
	color: #fff;
}

/* ---------- Đầu trang dính (sticky) ---------- */
.kd-header {
	position: sticky;
	top: 0;
	z-index: 100;
	backdrop-filter: saturate(1.4) blur(10px);
	-webkit-backdrop-filter: saturate(1.4) blur(10px);
	background: color-mix(in srgb, var(--wp--preset--color--background) 88%, transparent) !important;
	box-shadow: 0 1px 0 rgba(0, 0, 0, 0.06), 0 6px 24px rgba(0, 0, 0, 0.05);
}

/* Admin bar đẩy header xuống đúng vị trí */
body.admin-bar .kd-header {
	top: var(--wp-admin--admin-bar--height, 32px);
}

/* Gạch chân chạy khi rê chuột lên menu */
.kd-header .wp-block-navigation .wp-block-navigation-item__content {
	position: relative;
	padding-block: 0.35em;
}

.kd-header .wp-block-navigation .wp-block-navigation-item__content::after {
	content: "";
	position: absolute;
	left: 0;
	right: 100%;
	bottom: 0;
	height: 2px;
	background: var(--wp--preset--color--primary);
	transition: right 0.25s var(--kd-ease);
}

.kd-header .wp-block-navigation .wp-block-navigation-item__content:hover::after,
.kd-header .wp-block-navigation .current-menu-item .wp-block-navigation-item__content::after {
	right: 0;
}

/* ---------- Nút bấm ---------- */
.wp-block-button__link {
	padding: 0.8em 1.9em;
	transition: transform 0.2s var(--kd-ease), box-shadow 0.2s var(--kd-ease),
		background-color 0.2s var(--kd-ease), color 0.2s var(--kd-ease);
}

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

.wp-block-button.is-style-outline .wp-block-button__link {
	border-width: 2px;
}

/* Nút viền trên nền tối (hero, dải CTA) */
.kd-on-dark .wp-block-button.is-style-outline .wp-block-button__link {
	color: #fff;
	border-color: rgba(255, 255, 255, 0.75);
}

.kd-on-dark .wp-block-button.is-style-outline .wp-block-button__link:hover {
	background: #fff;
	color: var(--wp--preset--color--secondary);
	border-color: #fff;
	box-shadow: 0 8px 20px rgba(0, 0, 0, 0.25);
}

/* ---------- Nhãn nhỏ trên tiêu đề section (eyebrow) ---------- */
.kd-eyebrow {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.75rem;
	font-weight: 600;
}

.kd-eyebrow::before,
.kd-eyebrow::after {
	content: "";
	width: 2.25rem;
	height: 2px;
	background: var(--wp--preset--color--accent);
	opacity: 0.85;
}

.kd-eyebrow--left {
	justify-content: flex-start;
}

.kd-eyebrow--left::before {
	display: none;
}

/* Gạch màu nhấn dưới tiêu đề section */
.kd-section-title {
	position: relative;
	padding-bottom: 0.55em;
}

.kd-section-title::after {
	content: "";
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
	bottom: 0;
	width: 56px;
	height: 4px;
	border-radius: 2px;
	background: linear-gradient(90deg, var(--wp--preset--color--primary), var(--wp--preset--color--accent));
}

/* ---------- Hero ---------- */
.kd-hero .wp-block-cover__inner-container > * {
	text-wrap: balance;
}

.kd-hero h1 {
	text-shadow: 0 2px 24px rgba(0, 0, 0, 0.45);
}

.kd-hero p {
	text-shadow: 0 1px 12px rgba(0, 0, 0, 0.45);
}

.kd-badge {
	display: inline-block;
	padding: 0.4em 1.1em;
	border: 1px solid rgba(255, 255, 255, 0.45);
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.10);
	backdrop-filter: blur(4px);
	-webkit-backdrop-filter: blur(4px);
	color: #fff !important;
	text-shadow: none;
}

/* Hiệu ứng trồi lên khi tải trang (chỉ trong hero) */
@keyframes kd-fade-up {
	from {
		opacity: 0;
		transform: translateY(22px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

.kd-fade-up {
	animation: kd-fade-up 0.7s var(--kd-ease) both;
}

.kd-d1 { animation-delay: 0.08s; }
.kd-d2 { animation-delay: 0.18s; }
.kd-d3 { animation-delay: 0.30s; }
.kd-d4 { animation-delay: 0.44s; }

/* ---------- Thẻ (card) ---------- */
.kd-card {
	border-radius: var(--kd-radius);
	box-shadow: var(--kd-shadow-sm);
	transition: transform 0.25s var(--kd-ease), box-shadow 0.25s var(--kd-ease);
}

.kd-card:hover {
	transform: translateY(-4px);
	box-shadow: var(--kd-shadow-md);
}

/* Ảnh / cover bo góc */
.kd-img-round {
	border-radius: var(--kd-radius);
	overflow: hidden;
	box-shadow: var(--kd-shadow-md);
}

/* ---------- Số liệu nổi bật ---------- */
.kd-stat {
	font-variant-numeric: tabular-nums;
	letter-spacing: -0.02em;
	line-height: 1;
}

.kd-stat-label {
	text-transform: uppercase;
	letter-spacing: 1.5px;
	font-size: 0.8rem;
	opacity: 0.8;
}

.kd-stat-card {
	border-radius: var(--kd-radius);
	background: var(--wp--preset--color--background);
	box-shadow: var(--kd-shadow-sm);
	border-top: 3px solid var(--wp--preset--color--primary);
	transition: transform 0.25s var(--kd-ease), box-shadow 0.25s var(--kd-ease);
}

.kd-stat-card:hover {
	transform: translateY(-4px);
	box-shadow: var(--kd-shadow-md);
}

/* ---------- Trích dẫn phụ huynh ---------- */
.kd-quote-card {
	position: relative;
	height: 100%;
}

.kd-quote-card .wp-block-quote {
	border: none;
	margin: 0;
	padding: 0;
}

.kd-quote-card .wp-block-quote p::before {
	content: "\201C";
	display: block;
	font-family: Georgia, serif;
	font-size: 3rem;
	line-height: 0.6;
	margin-bottom: 0.35em;
	color: var(--wp--preset--color--accent);
}

.kd-quote-card cite {
	display: block;
	margin-top: 1em;
	font-style: normal;
	font-weight: 600;
	color: var(--wp--preset--color--primary);
	font-size: 0.9em;
}

.kd-stars {
	color: var(--wp--preset--color--accent);
	letter-spacing: 3px;
}

/* ---------- Khung form trên dải CTA ---------- */
.kd-form-card {
	border-radius: var(--kd-radius);
	box-shadow: var(--kd-shadow-lg);
}

/* =========================================================
   Đánh bóng phần hiển thị của plugin Dojo Manager
   (lưới lớp học, lịch tuần, bảng học phí, form học thử)
   ========================================================= */

body .dm-grid {
	gap: 1.5rem;
}

body .dm-card {
	border: none;
	border-radius: var(--kd-radius);
	overflow: hidden;
	box-shadow: var(--kd-shadow-sm);
	transition: transform 0.25s var(--kd-ease), box-shadow 0.25s var(--kd-ease);
	background: var(--wp--preset--color--background);
}

body .dm-card:hover {
	transform: translateY(-5px);
	box-shadow: var(--kd-shadow-md);
}

body .dm-card__title a {
	text-decoration: none;
	color: var(--wp--preset--color--secondary);
}

body .dm-card__title a:hover {
	color: var(--wp--preset--color--primary);
}

body .dm-card__fee {
	color: var(--wp--preset--color--primary);
	font-weight: 700;
}

body .dm-schedule-wrap {
	border-radius: var(--kd-radius);
	overflow: auto;
	box-shadow: var(--kd-shadow-sm);
	background: var(--wp--preset--color--background);
}

body .dm-schedule {
	border-collapse: collapse;
	width: 100%;
}

body .dm-schedule th {
	background: var(--wp--preset--color--secondary);
	color: #fff;
	text-transform: uppercase;
	letter-spacing: 1px;
	font-size: 0.8rem;
	padding: 0.9em 0.75em;
	border: none;
}

body .dm-schedule td {
	padding: 0.8em 0.75em;
	border: none;
	border-top: 1px solid rgba(0, 0, 0, 0.07);
}

body .dm-schedule tbody tr:hover {
	background: color-mix(in srgb, var(--wp--preset--color--surface) 60%, transparent);
}

body .dm-fee-table {
	border-collapse: collapse;
	width: 100%;
	border-radius: var(--kd-radius);
	overflow: hidden;
	box-shadow: var(--kd-shadow-sm);
	background: var(--wp--preset--color--background);
}

body .dm-fee-table th {
	background: var(--wp--preset--color--secondary);
	color: #fff;
	padding: 0.9em 1em;
	border: none;
	text-transform: uppercase;
	letter-spacing: 1px;
	font-size: 0.8rem;
}

body .dm-fee-table td {
	padding: 0.85em 1em;
	border: none;
	border-top: 1px solid rgba(0, 0, 0, 0.07);
}

body .dm-fee-table__fee {
	color: var(--wp--preset--color--primary);
	font-weight: 700;
	white-space: nowrap;
}

body .dm-trial-form input:not([type="checkbox"]):not([type="radio"]),
body .dm-trial-form select,
body .dm-trial-form textarea {
	width: 100%;
	border: 1.5px solid rgba(0, 0, 0, 0.14);
	border-radius: 8px;
	padding: 0.7em 0.9em;
	background: #fff;
	color: #1a1a1a;
	transition: border-color 0.2s var(--kd-ease), box-shadow 0.2s var(--kd-ease);
}

body .dm-trial-form input:focus,
body .dm-trial-form select:focus,
body .dm-trial-form textarea:focus {
	outline: none;
	border-color: var(--wp--preset--color--primary);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--wp--preset--color--primary) 18%, transparent);
}

body .dm-trial-form .dm-trial-form__submit {
	background: var(--wp--preset--color--primary);
	color: #fff;
	border: none;
	border-radius: 8px;
	padding: 0.85em 2.2em;
	font-weight: 700;
	cursor: pointer;
	transition: transform 0.2s var(--kd-ease), box-shadow 0.2s var(--kd-ease), filter 0.2s var(--kd-ease);
}

body .dm-trial-form .dm-trial-form__submit:hover {
	transform: translateY(-2px);
	filter: brightness(1.08);
	box-shadow: 0 8px 20px color-mix(in srgb, var(--wp--preset--color--primary) 40%, transparent);
}

body .dm-belt-path {
	gap: 0.5rem;
}

body .dm-belt {
	border-radius: 999px;
	box-shadow: var(--kd-shadow-sm);
}

/* ---------- Chân trang ---------- */
.kd-footer a {
	color: inherit;
	text-decoration: none;
	opacity: 0.85;
	transition: opacity 0.2s var(--kd-ease), color 0.2s var(--kd-ease);
}

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

.kd-footer-heading {
	text-transform: uppercase;
	letter-spacing: 2px;
	font-size: 0.85rem !important;
	color: var(--wp--preset--color--accent) !important;
}

/* ---------- Tôn trọng người dùng giảm chuyển động ---------- */
@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}

	.kd-fade-up {
		animation: none;
	}

	.kd-card,
	.kd-stat-card,
	body .dm-card,
	.wp-block-button__link {
		transition: none;
	}
}