/*
Theme Name: Prakruti Yogashala
Theme URI: https://prakrutiyogashala.com
Author: Prakruti Yogashala
Description: A warm, modern theme for Prakruti Yogashala — traditional yoga teacher training in Rishikesh. Editable Courses, Teachers, Testimonials and FAQs from wp-admin, no page builder required.
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 7.4
Text Domain: prakruti
*/

/* ---------------------------------------------------------------
   1. Design tokens
------------------------------------------------------------------ */
:root {
	--color-bg: #FBF7F0;
	--color-bg-alt: #F3EAD9;
	--color-card: #FFFFFF;
	--color-border: #E7DAC2;

	--color-ink: #2B2420;
	--color-ink-soft: #6B5F53;
	--color-ink-faint: #6E6255; /* darkened from #9C8F80 — original failed WCAG AA (~2.95:1) on --color-bg/--color-card; this passes ~5.5:1 */

	--color-primary: #7A1008;
	--color-primary-dark: #560B06;
	--color-primary-alt: #9C1610;
	--color-primary-tint: #F2E0DC;

	--color-secondary: #56714F;
	--color-secondary-tint: #E7EEE2;

	--color-accent: #C9A96A;

	--font-display: 'Fraunces', ui-serif, Georgia, serif;
	--font-body: 'Inter', ui-sans-serif, system-ui, -apple-system, sans-serif;

	--radius-sm: 10px;
	--radius-md: 18px;
	--radius-lg: 28px;
	--radius-pill: 999px;

	--shadow-sm: 0 2px 10px rgba(43, 36, 32, 0.06);
	--shadow-md: 0 12px 32px rgba(43, 36, 32, 0.10);
	--shadow-lg: 0 24px 60px rgba(43, 36, 32, 0.16);

	--container: 1180px;
}

/* ---------------------------------------------------------------
   2. Reset & base
------------------------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }
@media (prefers-reduced-motion: no-preference) {
	html { scroll-behavior: smooth; }
}
body {
	margin: 0;
	background: var(--color-bg);
	color: var(--color-ink);
	font-family: var(--font-body);
	font-size: 17px;
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
}
img, svg { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
ul, ol { margin: 0; padding: 0; list-style: none; }
button { font: inherit; cursor: pointer; background: none; border: none; }
h1, h2, h3, h4 {
	font-family: var(--font-display);
	font-weight: 500;
	line-height: 1.15;
	margin: 0 0 0.5em;
	color: var(--color-ink);
}
h1 { font-size: clamp(2.4rem, 4.4vw, 3.6rem); }
h2 { font-size: clamp(1.9rem, 3vw, 2.6rem); }
h3 { font-size: 1.25rem; }
p { margin: 0 0 1em; color: var(--color-ink-soft); }
.sr-only {
	position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
	overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
.skip-link {
	position: absolute; top: -100%; left: 12px; z-index: 100;
	background: var(--color-ink); color: #fff;
	padding: 12px 20px; border-radius: var(--radius-sm);
	font-weight: 600; font-size: 0.9rem;
	transition: top .15s ease;
}
.skip-link:focus { top: 12px; }

:focus-visible {
	outline: 2px solid var(--color-primary);
	outline-offset: 2px;
}

.wrap { max-width: var(--container); margin: 0 auto; padding: 0 24px; }
.wrap--narrow { max-width: 780px; }

section { padding: 88px 0; }
@media (max-width: 780px) { section { padding: 56px 0; } }

.eyebrow {
	display: inline-block;
	font-size: 0.8rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--color-primary);
	font-weight: 600;
	margin-bottom: 12px;
}
.eyebrow--center { display: block; text-align: center; }
.section-title { max-width: 720px; }
.section-title--center { margin-left: auto; margin-right: auto; text-align: center; }
.section-lead { max-width: 640px; font-size: 1.05rem; }
.section-lead--center { margin-left: auto; margin-right: auto; text-align: center; }
.section-more { text-align: center; margin-top: 32px; }
.section-more a { color: var(--color-primary); font-weight: 600; }

/* ---------------------------------------------------------------
   3. Buttons
------------------------------------------------------------------ */
.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 14px 26px;
	border-radius: var(--radius-pill);
	font-weight: 600;
	font-size: 0.98rem;
	transition: transform .15s ease, box-shadow .15s ease, background-color .15s ease;
	white-space: nowrap;
}
.btn--primary { background: var(--color-primary); color: #fff; box-shadow: var(--shadow-sm); }
.btn--primary:hover { background: var(--color-primary-dark); transform: translateY(-2px); box-shadow: var(--shadow-md); }
.btn--outline { background: transparent; color: var(--color-ink); border: 1.5px solid var(--color-border); }
.btn--outline:hover { border-color: var(--color-primary); color: var(--color-primary); }
.btn--ghost { background: rgba(255,255,255,0.12); color: #fff; border: 1.5px solid rgba(255,255,255,0.4); }
.btn--ghost:hover { background: rgba(255,255,255,0.2); }
.btn--sm { padding: 9px 18px; font-size: 0.85rem; }
.btn--lg { padding: 16px 32px; font-size: 1.02rem; }
.btn--block { display: flex; width: 100%; }

/* ---------------------------------------------------------------
   4. Announcement bar + header
------------------------------------------------------------------ */
.announcement-bar {
	background: var(--color-primary-alt);
	color: #fff;
	text-align: center;
	font-size: 0.86rem;
	padding: 10px 16px;
}
.announcement-bar a { display: inline-flex; gap: 8px; align-items: center; }
.announcement-bar__cta { color: var(--color-accent); font-weight: 600; }

.site-header {
	position: sticky; top: 0; z-index: 50;
	background: var(--color-primary);
	border-bottom: 1px solid var(--color-primary-dark);
}
.site-header__inner { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding-top: 14px; padding-bottom: 14px; }

.site-logo { display: flex; align-items: center; gap: 10px; }
.site-logo__mark { width: 34px; height: 34px; color: var(--color-primary); flex: none; }
.site-logo__mark img { width: 100%; height: 100%; object-fit: contain; filter: brightness(0) invert(1); }
.site-logo__text { display: flex; flex-direction: column; line-height: 1.1; }
.site-logo__name { font-family: var(--font-display); font-size: 1.15rem; font-weight: 600; color: #fff; }
.site-logo__tag { font-size: 0.68rem; letter-spacing: 0.08em; text-transform: uppercase; color: rgba(255,255,255,0.7); }

.primary-nav__list { display: flex; align-items: center; gap: 30px; }
.primary-nav__list > li { position: relative; }
.primary-nav__list > li > a { font-weight: 500; font-size: 0.95rem; padding: 8px 0; color: #fff; }
.primary-nav__list > li > a:hover { color: var(--color-accent); }

.primary-nav__list li ul {
	position: absolute; top: 100%; left: 0;
	background: var(--color-card);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-sm);
	box-shadow: var(--shadow-md);
	min-width: 220px;
	padding: 8px;
	opacity: 0; visibility: hidden; transform: translateY(6px);
	transition: all .15s ease;
}
.primary-nav__list li:hover > ul,
.primary-nav__list li.menu-open > ul { opacity: 1; visibility: visible; transform: translateY(0); }
.primary-nav__list li ul a { display: block; padding: 9px 12px; border-radius: 8px; font-size: 0.92rem; }
.primary-nav__list li ul a:hover { background: var(--color-bg-alt); color: var(--color-primary); }

.site-header__actions { display: flex; align-items: center; gap: 12px; }
.site-header__actions .btn--primary { background: var(--color-accent); color: var(--color-ink); }
.site-header__actions .btn--primary:hover { background: #fff; color: var(--color-primary); }
/* min-width/height give the button a full 44px tap target (Apple HIG /
   Google Material minimum) without growing the icon itself - the bars stay
   22px and just sit centered in the larger hit area. */
.nav-toggle { display: none; flex-direction: column; align-items: center; justify-content: center; gap: 4px; padding: 8px; min-width: 44px; min-height: 44px; }
.nav-toggle span { width: 22px; height: 2px; background: #fff; border-radius: 2px; }

@media (max-width: 960px) {
	.primary-nav { position: fixed; inset: 68px 0 0 0; background: var(--color-bg); padding: 24px; overflow-y: auto; transform: translateX(100%); transition: transform .2s ease; }
	.primary-nav.is-open { transform: translateX(0); }
	.primary-nav__list { flex-direction: column; align-items: flex-start; gap: 4px; width: 100%; }
	.primary-nav__list > li { width: 100%; }
	.primary-nav__list > li > a { color: var(--color-ink); }
	.primary-nav__list li ul { position: static; box-shadow: none; opacity: 1; visibility: visible; transform: none; display: none; border: none; padding-left: 12px; }
	.primary-nav__list li.menu-open ul { display: block; }
	.site-header__actions .btn--ghost { display: none; }
	/* The compact header button is fine at desktop density, but at 41px
	   tall it undershoots the 44px tap-target minimum on the one CTA that
	   stays visible on mobile. */
	.site-header__actions .btn--primary.btn--sm { padding: 12px 20px; }
	.nav-toggle { display: flex; }
	body.nav-open { overflow: hidden; }
}

/* ---------------------------------------------------------------
   5. Media placeholders & icons
------------------------------------------------------------------ */
.media-placeholder {
	display: flex; align-items: center; justify-content: center;
	background: linear-gradient(145deg, var(--color-secondary-tint), var(--color-bg-alt));
	border-radius: var(--radius-md);
	color: var(--color-secondary);
	aspect-ratio: 4 / 3;
	width: 100%;
}
.media-placeholder svg { width: 34%; height: 34%; }
.media-placeholder--person { aspect-ratio: 3 / 4; background: linear-gradient(145deg, var(--color-primary-tint), var(--color-bg-alt)); color: var(--color-primary); }
.media-img { border-radius: var(--radius-md); width: 100%; height: 100%; object-fit: cover; }

/* ---------------------------------------------------------------
   6. Hero
------------------------------------------------------------------ */
.hero { padding-top: 72px; }
.hero__inner { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 56px; align-items: center; }
.hero__lead { font-size: 1.12rem; max-width: 520px; }
.hero__actions { display: flex; gap: 14px; margin: 28px 0; flex-wrap: wrap; }
.hero__stat { display: flex; align-items: center; gap: 12px; }
.hero__stat p { margin: 0; color: var(--color-ink-soft); }
.hero__stat strong { color: var(--color-ink); }
.hero__media {
	position: relative;
	border-radius: var(--radius-lg);
	overflow: hidden;
	aspect-ratio: 4/5;
	color: var(--color-primary);
}
.hero__media img.media-img { border-radius: 0; }
.hero__badges { display: flex; align-items: center; gap: 22px; margin-top: 32px; flex-wrap: wrap; }
.hero__badges img { height: 46px; width: auto; }
.hero__media-badge {
	position: absolute; bottom: 24px; left: 24px; right: 24px;
	background: var(--color-card);
	border-radius: var(--radius-md);
	box-shadow: var(--shadow-lg);
	padding: 16px 20px;
	display: flex; align-items: center; justify-content: space-between;
	color: var(--color-ink);
}
.hero__media-badge strong { font-family: var(--font-display); font-size: 1.2rem; display: flex; gap: 8px; align-items: center; }
.stars-inline { color: var(--color-accent); font-size: 0.9rem; }
.hero__media-badge span { font-size: 0.78rem; color: var(--color-ink-faint); }

@media (max-width: 900px) {
	.hero__inner { grid-template-columns: 1fr; }
	.hero__media { order: -1; aspect-ratio: 16/10; }
}

/* ---------------------------------------------------------------
   7. Pillars
------------------------------------------------------------------ */
.pillars { background: var(--color-primary); }
.pillars .eyebrow { color: var(--color-accent); }
.pillars .section-title { color: #fff; }
.pillars__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 48px; }
.pillar-card { background: transparent; border-radius: var(--radius-md); padding: 36px 28px; text-align: center; }
.pillar-card__mark { display: inline-flex; width: 52px; height: 52px; color: var(--color-accent); margin-bottom: 16px; }
.pillar-card__mark img { width: 100%; height: 100%; object-fit: contain; }
.pillar-card h3 { color: #fff; }
.pillar-card p { color: rgba(255,255,255,0.8); }
@media (max-width: 780px) { .pillars__grid { grid-template-columns: 1fr; } }

/* ---------------------------------------------------------------
   8. Stat strip + differentiators
------------------------------------------------------------------ */
.stat-strip { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin-bottom: 64px; }
.stat-strip__item { text-align: center; border-right: 1px solid var(--color-border); }
.stat-strip__item:last-child { border-right: none; }
.stat-strip__item strong { display: block; font-family: var(--font-display); font-size: 2.1rem; color: var(--color-primary); }
.stat-strip__item span { font-size: 0.85rem; color: var(--color-ink-faint); }
@media (max-width: 700px) { .stat-strip { grid-template-columns: repeat(2, 1fr); } .stat-strip__item:nth-child(2n) { border-right: none; } .stat-strip__item { padding-bottom: 16px; } }

.points-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 48px; }
.point-card { padding: 28px; border-radius: var(--radius-md); border: 1px solid var(--color-border); background: var(--color-card); }
.point-card h3 { font-size: 1.1rem; }
.point-card p { margin: 0; font-size: 0.95rem; }
@media (max-width: 900px) { .points-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .points-grid { grid-template-columns: 1fr; } }

/* ---------------------------------------------------------------
   9. Courses
------------------------------------------------------------------ */
.courses { background: var(--color-bg-alt); }
.course-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; margin-top: 48px; }
.course-card { background: var(--color-card); border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-sm); display: flex; flex-direction: column; transition: transform .2s ease, box-shadow .2s ease; }
.course-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.course-card__media { display: block; padding: 16px 16px 0; }
.course-card__media .media-placeholder, .course-card__media .media-img { border-radius: var(--radius-md); aspect-ratio: 16/10; }
.course-card__body h3 a { color: inherit; text-decoration: none; }
.course-card__body h3 a:hover { color: var(--color-primary); }
.course-card__body { padding: 24px; display: flex; flex-direction: column; gap: 6px; flex: 1; }
.course-card__rating { display: flex; align-items: center; gap: 8px; font-size: 0.82rem; color: var(--color-ink-faint); }
.stars { color: var(--color-accent); letter-spacing: 1px; }
.course-card__meta { font-size: 0.85rem; color: var(--color-ink-faint); margin-bottom: 4px; }
.course-card__excerpt { font-size: 0.92rem; flex: 1; }
.course-card__prices { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 12px 0; }
.price-block { background: var(--color-bg-alt); border-radius: var(--radius-sm); padding: 12px; text-align: center; }
.price-block__label { display: block; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--color-ink-faint); margin-bottom: 4px; }
.price-block__was { display: inline-block; text-decoration: line-through; color: var(--color-ink-faint); font-size: 0.85rem; margin-right: 6px; }
.price-block__now { font-family: var(--font-display); font-size: 1.3rem; color: var(--color-primary); }
.course-card__seats { color: var(--color-primary); font-weight: 600; font-size: 0.85rem; margin: 4px 0 12px; }
@media (max-width: 980px) { .course-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px) { .course-grid { grid-template-columns: 1fr; } }

/* ---------------------------------------------------------------
   10. Curriculum
------------------------------------------------------------------ */
.curriculum-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; margin-top: 48px; }
.curriculum-card { padding: 24px; border-radius: var(--radius-md); background: var(--color-card); border: 1px solid var(--color-border); }
.curriculum-card__num { font-family: var(--font-display); font-size: 1.6rem; color: var(--color-primary-tint); -webkit-text-stroke: 1px var(--color-primary); display: block; margin-bottom: 8px; }
.curriculum-card h3 { font-size: 1.02rem; }
.curriculum-card p { font-size: 0.88rem; margin: 0; }
@media (max-width: 980px) { .curriculum-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .curriculum-grid { grid-template-columns: 1fr; } }

/* ---------------------------------------------------------------
   11. Daily schedule
------------------------------------------------------------------ */
.schedule { background: var(--color-ink); color: #fff; }
.schedule .eyebrow, .schedule .section-title { color: #fff; }
.schedule .eyebrow { color: var(--color-accent); }
.schedule-list { width: 100%; max-width: 640px; margin: 48px auto 0; border-collapse: collapse; border-top: 1px solid rgba(255,255,255,0.14); }
.schedule-list tbody tr { border-bottom: 1px solid rgba(255,255,255,0.14); }
.schedule-list td { padding: 16px 4px; vertical-align: top; }
.schedule-list__time { width: 140px; padding-right: 24px; color: var(--color-accent); font-weight: 600; font-size: 0.9rem; }
.schedule-list__activity { color: rgba(255,255,255,0.85); }
@media (max-width: 560px) {
	.schedule-list tbody tr { display: flex; flex-direction: column; gap: 4px; }
	.schedule-list td { display: block; padding: 4px; }
	.schedule-list__time { width: auto; padding-right: 4px; }
}

/* ---------------------------------------------------------------
   12. Audience
------------------------------------------------------------------ */
.audience-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 48px; }
.audience-card { text-align: center; padding: 28px 20px; }
.audience-card__mark { display: inline-flex; width: 46px; height: 46px; color: var(--color-secondary); margin-bottom: 14px; }
.audience-card__mark img { width: 100%; height: 100%; object-fit: contain; }
.audience-card h3 { font-size: 1.05rem; }
.audience-card p { font-size: 0.9rem; }
.audience-note { text-align: center; font-style: italic; color: var(--color-ink-soft); margin-top: 24px; }
@media (max-width: 900px) { .audience-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .audience-grid { grid-template-columns: 1fr; } }

/* ---------------------------------------------------------------
   13. Comfort
------------------------------------------------------------------ */
.comfort { background: var(--color-bg-alt); }
.comfort__inner { display: grid; grid-template-columns: 1fr 0.8fr; gap: 56px; align-items: center; }
.comfort-list { display: grid; gap: 20px; margin-top: 24px; }
.comfort-list li { display: flex; align-items: flex-start; gap: 14px; }
.comfort-list__icon { flex: none; width: 30px; height: 30px; color: var(--color-secondary); margin-top: 2px; }
.comfort-list__icon img { width: 100%; height: 100%; object-fit: contain; }
.comfort-list__copy { display: flex; flex-direction: column; gap: 2px; }
.comfort-list strong { font-size: 0.98rem; }
.comfort-list span { font-size: 0.88rem; color: var(--color-ink-soft); }
.comfort__media { border-radius: var(--radius-lg); aspect-ratio: 1/1; overflow: hidden; position: relative; }
.comfort__media img.media-img { border-radius: 0; }
@media (max-width: 900px) { .comfort__inner { grid-template-columns: 1fr; } .comfort__media { order: -1; aspect-ratio: 16/9; } }

/* ---------------------------------------------------------------
   14. Teachers
------------------------------------------------------------------ */
.teacher-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; margin-top: 48px; }
.teacher-card { text-align: center; }
.teacher-card h3 { margin: 14px 0 2px; font-size: 1.02rem; }
.teacher-card p { font-size: 0.85rem; margin: 0; }
@media (max-width: 900px) { .teacher-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 640px) { .teacher-grid { grid-template-columns: 1fr 1fr; } }

/* Full-bio variant used on the standalone Teachers page - two columns,
   left-aligned, room for a paragraph rather than just a name and role. */
.teacher-grid--bios { grid-template-columns: repeat(2, 1fr); gap: 40px 32px; }
.teacher-grid--bios .teacher-card { text-align: left; display: flex; gap: 18px; align-items: flex-start; }
.teacher-grid--bios .teacher-card__media { flex: 0 0 88px; width: 88px; }
.teacher-grid--bios .teacher-card__media .media-img,
.teacher-grid--bios .teacher-card__media .media-placeholder { border-radius: 50%; aspect-ratio: 1/1; }
.teacher-grid--bios .teacher-card__body h3 { margin: 0 0 2px; }
.teacher-grid--bios .teacher-card__body > p:first-of-type { color: var(--color-primary); font-weight: 600; font-size: 0.85rem; margin-bottom: 8px; }
.teacher-grid--bios .teacher-card__body p:last-child { font-size: 0.92rem; color: var(--color-ink-soft); line-height: 1.6; }
@media (max-width: 720px) { .teacher-grid--bios { grid-template-columns: 1fr; } }

/* ---------------------------------------------------------------
   15. Testimonials
------------------------------------------------------------------ */
.testimonials { background: var(--color-bg-alt); }
.testimonial-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 48px; }
.testimonial-card { background: var(--color-card); border-radius: var(--radius-md); padding: 28px; box-shadow: var(--shadow-sm); }
.testimonial-card__quote-mark { display: inline-flex; width: 30px; height: 30px; color: var(--color-primary-tint); margin-bottom: 8px; }
.testimonial-card__text { font-size: 0.96rem; color: var(--color-ink); }
.testimonial-card__author { display: flex; align-items: center; gap: 12px; margin-top: 16px; }
.testimonial-card__avatar { width: 44px; height: 44px; border-radius: 50%; overflow: hidden; flex: none; }
.testimonial-card__avatar .media-placeholder, .testimonial-card__avatar .media-img { border-radius: 50%; aspect-ratio: 1/1; }
.testimonial-card__author strong { display: block; font-size: 0.92rem; }
.testimonial-card__author span { font-size: 0.8rem; color: var(--color-ink-faint); }
@media (max-width: 900px) { .testimonial-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px) { .testimonial-grid { grid-template-columns: 1fr; } }

/* ---------------------------------------------------------------
   16. FAQ
------------------------------------------------------------------ */
.faq-jumplinks { text-align: center; font-size: 0.9rem; color: var(--color-ink-soft); }
.faq-jumplinks a { color: var(--color-primary); font-weight: 600; }
.faq-category { margin-top: 56px; }
.faq-category:first-child { margin-top: 24px; }
.faq-category__title { font-size: 1.3rem; scroll-margin-top: 100px; }
.faq-list { margin-top: 40px; display: grid; gap: 14px; }
.faq-item { background: var(--color-card); border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: 6px 24px; }
.faq-item summary { cursor: pointer; list-style: none; padding: 18px 0; font-weight: 600; display: flex; justify-content: space-between; align-items: center; gap: 16px; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item__icon { flex: none; width: 20px; height: 20px; position: relative; }
.faq-item__icon::before, .faq-item__icon::after { content: ""; position: absolute; background: var(--color-primary); border-radius: 2px; top: 50%; left: 50%; transform: translate(-50%,-50%); }
.faq-item__icon::before { width: 14px; height: 2px; }
.faq-item__icon::after { width: 2px; height: 14px; transition: opacity .15s ease; }
.faq-item[open] .faq-item__icon::after { opacity: 0; }
.faq-item__answer { padding-bottom: 20px; color: var(--color-ink-soft); }

/* ---------------------------------------------------------------
   17. Final CTA + footer
------------------------------------------------------------------ */
.final-cta { background: linear-gradient(135deg, var(--color-primary), var(--color-primary-dark)); color: #fff; text-align: center; }
.final-cta h2 { color: #fff; }
.final-cta p { color: rgba(255,255,255,0.85); max-width: 560px; margin-left: auto; margin-right: auto; }
.final-cta__actions { display: flex; justify-content: center; gap: 14px; margin-top: 24px; flex-wrap: wrap; }

.site-footer { background: var(--color-ink); color: rgba(255,255,255,0.75); padding-top: 64px; }
.site-footer .site-logo__name, .site-footer .site-logo__mark { color: #fff; }
.footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 40px; padding-bottom: 48px; }
.footer-col--brand p { color: rgba(255,255,255,0.6); font-size: 0.9rem; margin-top: 14px; }
.footer-social { display: flex; gap: 14px; margin-top: 16px; }
.footer-social a { font-size: 0.85rem; border: 1px solid rgba(255,255,255,0.25); padding: 8px 14px; border-radius: var(--radius-pill); }
.footer-social a:hover { border-color: #fff; color: #fff; }
.footer-badges { display: flex; align-items: center; gap: 18px; margin-top: 22px; flex-wrap: wrap; }
.footer-badges img { height: 38px; width: auto; opacity: 0.9; }
.footer-col__title, .footer-widget__title { color: #fff; font-family: var(--font-display); font-size: 1.05rem; margin-bottom: 16px; }
.footer-nav, .footer-contact { display: grid; gap: 12px; font-size: 0.92rem; }
.footer-nav a:hover, .footer-contact a:hover { color: #fff; }
.footer-bottom { border-top: 1px solid rgba(255,255,255,0.14); padding: 22px 0; text-align: center; font-size: 0.82rem; color: rgba(255,255,255,0.5); }
@media (max-width: 900px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .footer-grid { grid-template-columns: 1fr; } }

/* ---------------------------------------------------------------
   18. Generic page / archive templates
------------------------------------------------------------------ */
.breadcrumbs { padding: 18px 0; border-bottom: 1px solid var(--color-border); }
.breadcrumbs__list { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 0.85rem; color: var(--color-ink-faint); }
.breadcrumbs__item:not(:last-child)::after { content: "/"; margin-left: 6px; color: var(--color-ink-faint); }
.breadcrumbs__item a { color: var(--color-ink-soft); }
.breadcrumbs__item a:hover { color: var(--color-primary); }
.breadcrumbs__item [aria-current="page"] { color: var(--color-ink); font-weight: 500; }

.page-hero { text-align: center; padding-bottom: 40px; }
.page-hero__content { color: var(--color-ink-soft); }
.simple-page, .single-post { padding-top: 56px; }
.simple-page__content, .single-post__content { color: var(--color-ink-soft); }
.single-post__byline { font-size: 0.9rem; color: var(--color-ink-faint); margin-bottom: 24px; }
.single-post__byline a { color: var(--color-primary); font-weight: 600; }
.simple-page__content > *:first-child { margin-top: 0; }

.contact-page__inner { display: grid; grid-template-columns: 1fr 0.9fr; gap: 48px; align-items: start; }
.contact-details { display: grid; gap: 18px; margin: 28px 0; }
.contact-details strong { display: block; font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--color-ink-faint); margin-bottom: 2px; }
.contact-page__map { border-radius: var(--radius-lg); overflow: hidden; min-height: 360px; box-shadow: var(--shadow-sm); }
.contact-page__map iframe { display: block; width: 100%; height: 100%; min-height: 360px; border: 0; }
@media (max-width: 860px) { .contact-page__inner { grid-template-columns: 1fr; } }

.gallery-page__content .wp-block-gallery { margin-top: 32px; }
.gallery-page__empty { max-width: 320px; margin: 32px auto 0; }
.gallery-page__hint { text-align: center; color: var(--color-ink-faint); }
.gallery-page__content figure.wp-block-image img,
.gallery-page__content .wp-block-gallery img { border-radius: var(--radius-sm); }

.page-hero__content .wp-block-image,
.simple-page__content .wp-block-image { margin: 32px 0; }
.page-hero__content .wp-block-image img,
.simple-page__content .wp-block-image img { border-radius: var(--radius-lg); }
.page-hero__content figcaption,
.simple-page__content figcaption { text-align: center; font-size: 0.85rem; color: var(--color-ink-faint); margin-top: 8px; }

.post-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; margin-top: 40px; }
.post-list__item { background: var(--color-card); border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-sm); display: flex; flex-direction: column; height: 100%; transition: transform .2s ease, box-shadow .2s ease; }
.post-list__item:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.post-list__media { display: block; aspect-ratio: 4/3; }
.post-list__media .media-placeholder, .post-list__media .media-img { border-radius: 0; aspect-ratio: 4/3; }
.post-list__body { padding: 22px 24px 26px; display: flex; flex-direction: column; flex: 1; }
.post-list__body h2 { font-size: 1.15rem; margin-bottom: 8px; }
.post-list__body p { font-size: 0.92rem; flex: 1; }
.post-list__more { color: var(--color-primary); font-weight: 600; font-size: 0.9rem; margin-top: auto; }
@media (max-width: 980px) { .post-list { grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px) { .post-list { grid-template-columns: 1fr; } }

.single-course__inner { display: grid; grid-template-columns: 1.5fr 1fr; gap: 48px; align-items: start; padding-top: 24px; }
.single-course__media { margin: 24px 0; }
.single-course__media .media-placeholder, .single-course__media .media-img { aspect-ratio: 16/9; }
.course-gallery { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin: 4px 0 32px; }
.course-gallery img { width: 100%; height: 100%; aspect-ratio: 1/1; object-fit: cover; border-radius: var(--radius-sm); display: block; }
.course-gallery a { display: block; overflow: hidden; border-radius: var(--radius-sm); }
.course-gallery a:hover img { transform: scale(1.04); }
.course-gallery img { transition: transform .2s ease; }
@media (max-width: 720px) { .course-gallery { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 480px) { .course-gallery { grid-template-columns: repeat(2, 1fr); } }

/* Course detail tabs: Overview / Course Curriculum / FAQs / Daily Schedule */
.course-tabs { margin-top: 8px; }
.course-tabs__nav { display: flex; flex-wrap: wrap; gap: 8px; border-bottom: 1px solid var(--color-border); margin-bottom: 28px; }
.course-tabs__btn { background: none; border: none; cursor: pointer; font: inherit; font-weight: 600; font-size: 0.95rem; color: var(--color-ink-faint); padding: 12px 4px; margin-right: 20px; border-bottom: 2px solid transparent; }
.course-tabs__btn:hover { color: var(--color-ink); }
.course-tabs__btn.is-active { color: var(--color-primary); border-bottom-color: var(--color-primary); }
.course-tabs__panel[hidden] { display: none; }
.curriculum-block { margin-bottom: 32px; }
.curriculum-block h3 { font-size: 1.1rem; margin-bottom: 8px; }
.curriculum-block > p { color: var(--color-ink-soft); margin-bottom: 10px; }
.curriculum-block ul { padding-left: 1.2em; display: grid; gap: 6px; color: var(--color-ink-soft); font-size: 0.94rem; }
.schedule-table { width: 100%; border-collapse: collapse; margin-top: 8px; }
.schedule-table th, .schedule-table td { text-align: left; padding: 10px 14px; border-bottom: 1px solid var(--color-border); font-size: 0.92rem; }
.schedule-table th { color: var(--color-ink-faint); font-weight: 600; text-transform: uppercase; font-size: 0.75rem; letter-spacing: 0.04em; }
.schedule-table td:first-child { white-space: nowrap; font-weight: 600; color: var(--color-ink); }
.schedule-note { margin-top: 14px; font-size: 0.88rem; color: var(--color-ink-faint); }
.course-tabs .faq-list { margin-top: 0; }
.price-panel { background: var(--color-card); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: 24px; position: sticky; top: 100px; display: grid; gap: 12px; }
.course-facts { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px 24px; margin: 20px 0 28px; padding: 18px 20px; background: var(--color-bg-alt); border-radius: var(--radius-md); }
.course-facts dt { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--color-ink-faint); margin: 0; }
.course-facts dd { margin: 2px 0 0; font-size: 0.92rem; font-weight: 600; }
@media (max-width: 560px) { .course-facts { grid-template-columns: 1fr; } }
.price-tier { border-bottom: 1px solid var(--color-border); padding-bottom: 12px; margin-bottom: 4px; }
.price-tier:last-of-type { border-bottom: none; }
.price-tier__label { display: block; font-size: 0.85rem; font-weight: 600; margin-bottom: 8px; }
.price-tier__prices { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.course-card__enquire-link { display: block; text-align: center; font-size: 0.85rem; color: var(--color-ink-soft); margin-top: 4px; }
.course-card__enquire-link:hover { color: var(--color-primary); }
.related-courses { margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--color-border); }
.related-courses__title { font-size: 0.98rem; margin-bottom: 12px; }
.related-courses__list { display: grid; gap: 10px; }
.related-courses__list a { font-size: 0.9rem; color: var(--color-primary); font-weight: 600; }
.related-courses__list a:hover { color: var(--color-primary-dark); }
@media (max-width: 900px) { .single-course__inner { grid-template-columns: 1fr; } .price-panel { position: static; } }

.single-teacher__inner { display: grid; grid-template-columns: 320px 1fr; gap: 40px; padding-top: 24px; align-items: start; }
.single-teacher__role { color: var(--color-primary); font-weight: 600; }
@media (max-width: 720px) { .single-teacher__inner { grid-template-columns: 1fr; } }

.not-found { text-align: center; padding: 120px 0; }
.not-found__mark { display: inline-flex; width: 64px; height: 64px; color: var(--color-primary); margin-bottom: 16px; }
.not-found__courses { margin-top: 40px; padding-top: 28px; border-top: 1px solid var(--color-border); }
.not-found__courses h2 { font-size: 1rem; margin-bottom: 14px; }
.not-found__courses ul { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 20px; }
.not-found__courses a { color: var(--color-primary); font-weight: 600; }
.not-found__courses a:hover { color: var(--color-primary-dark); }

.pagination { display: flex; justify-content: center; gap: 8px; margin-top: 32px; }
.pagination .page-numbers { padding: 8px 14px; border-radius: var(--radius-sm); border: 1px solid var(--color-border); }
.pagination .current { background: var(--color-primary); color: #fff; border-color: var(--color-primary); }

/* ---------------------------------------------------------------
   19. Enquiry form (Join Us)
------------------------------------------------------------------ */
.enquiry-form { display: grid; gap: 20px; max-width: 560px; margin: 0 auto; padding: 8px 0 40px; }
.enquiry-form__honeypot { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form-field { display: grid; gap: 6px; }
.form-field label { font-size: 0.9rem; font-weight: 600; color: var(--color-ink); }
.form-field input,
.form-field select,
.form-field textarea {
	font: inherit;
	/* 1rem (16px), not 0.98 - iOS Safari zooms the whole page in on focus
	   for any input under 16px, which it was at the root 16px this rem is
	   computed against (body's own 17px font-size does not change that). */
	font-size: 1rem;
	padding: 12px 16px;
	border-radius: var(--radius-sm);
	border: 1.5px solid var(--color-border);
	background: var(--color-card);
	color: var(--color-ink);
}
.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus { border-color: var(--color-primary); }
.form-field textarea { resize: vertical; }
.enquiry-form .btn { justify-self: start; }

.form-notice { border-radius: var(--radius-md); padding: 16px 20px; margin-bottom: 24px; font-size: 0.95rem; }
.form-notice--success { background: var(--color-secondary-tint); color: var(--color-secondary); }
.form-notice--error { background: var(--color-primary-tint); color: var(--color-primary-dark); }