/* Уншигч Унага -- Page Templates v2
   Custom branded header/footer (replacing get_header()/get_footer() so the
   design never clashes with the active theme) + a lighter, rounder, more
   playful palette + real motion (floating mascot, scroll reveals, animated
   counters, hover wiggle) -- per direct feedback that the v1 dark-hero
   travelsim-style treatment read as too serious/commercial for a kids' product. */

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body.unaga-body { margin: 0; background: var(--unaga-white); }

.unaga-page { font-family: var(--unaga-font-body); color: var(--unaga-grey-900); overflow-x: hidden; }
.unaga-page h1, .unaga-page h2, .unaga-page h3 { font-family: var(--unaga-font-display); }
.unaga-page .unaga-container { max-width: var(--unaga-max-width); margin: 0 auto; padding: 0 var(--unaga-space-6); }
.unaga-page section { padding: var(--unaga-space-16) 0; position: relative; }

/* ============================================================
   Custom Header
   ============================================================ */
.unaga-site-header {
	background: rgba(255,255,255,0.92);
	backdrop-filter: blur(8px);
	border-bottom: 1px solid var(--unaga-grey-100);
	position: sticky;
	top: 0;
	z-index: 50;
	padding: var(--unaga-space-3) 0;
	width: 100%;   /* span full viewport width so sticky positioning works correctly */
}
.unaga-site-header .unaga-container {
  max-width: var(--unaga-max-width);
  margin: 0 auto;
  padding: 0 var(--unaga-space-6);
}
.unaga-site-header-inner { display: flex; align-items: center; justify-content: space-between; gap: var(--unaga-space-4); }
.unaga-site-logo { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--unaga-grey-900); }
.unaga-site-logo img { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; }
.unaga-site-logo span { font-family: var(--unaga-font-display); font-weight: 700; font-size: var(--unaga-text-lg); }
.unaga-site-nav { display: flex; gap: var(--unaga-space-6); }
.unaga-site-nav a { color: var(--unaga-grey-600); text-decoration: none; font-weight: 600; font-size: var(--unaga-text-sm); }
.unaga-site-nav a:hover { color: var(--unaga-fuchsia); }
.unaga-site-header-actions { display: flex; align-items: center; gap: var(--unaga-space-4); }
.unaga-site-nav-link { color: var(--unaga-grey-900); font-weight: 700; text-decoration: none; font-size: var(--unaga-text-sm); }
.unaga-btn-sm { padding: 9px 20px; font-size: var(--unaga-text-sm); }

@media (max-width: 700px) {
	.unaga-site-nav { display: none; }
	.unaga-site-logo span { display: none; }
}

/* ============================================================
   Hero -- light, warm, mascot-led (replaces the dark band)
   ============================================================ */
.unaga-hero {
	background: linear-gradient(180deg, #FFF6F8 0%, var(--unaga-white) 100%);
	color: var(--unaga-grey-900);
	padding: var(--unaga-space-16) 0 var(--unaga-space-12);
	text-align: center;
	overflow: hidden;
}
.unaga-hero-deco {
	position: absolute;
	border-radius: 50%;
	opacity: 0.5;
	z-index: 0;
	animation: unaga-float 7s ease-in-out infinite;
}
.unaga-hero-deco.d1 { width: 70px; height: 70px; background: var(--unaga-fuchsia-tint); top: 18%; left: 8%; animation-delay: 0s; }
.unaga-hero-deco.d2 { width: 40px; height: 40px; background: #FFE9A8; top: 12%; right: 12%; animation-delay: 1.2s; }
.unaga-hero-deco.d3 { width: 90px; height: 90px; background: #E7F6EE; bottom: 8%; left: 14%; animation-delay: 2.1s; }
.unaga-hero-deco.d4 { width: 50px; height: 50px; background: var(--unaga-fuchsia-tint); bottom: 14%; right: 10%; animation-delay: 0.6s; }

.unaga-hero-content { position: relative; z-index: 1; }
.unaga-hero-mascot {
	width: 132px;
	height: 132px;
	border-radius: 50%;
	object-fit: cover;
	box-shadow: var(--unaga-shadow-card-hover);
	margin: 0 auto var(--unaga-space-4);
	display: block;
	animation: unaga-bob 4s ease-in-out infinite;
}
.unaga-hero-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: var(--unaga-space-2);
	background: var(--unaga-fuchsia-tint);
	color: var(--unaga-fuchsia-dark);
	border-radius: var(--unaga-radius-pill);
	padding: 6px 16px;
	font-size: var(--unaga-text-sm);
	font-weight: 700;
	margin-bottom: var(--unaga-space-4);
}
.unaga-hero h1 {
	font-size: var(--unaga-text-3xl);
	line-height: 1.15;
	margin: 0 0 var(--unaga-space-4);
}
.unaga-hero h1 .accent { color: var(--unaga-fuchsia); }
.unaga-hero p.lead {
	font-size: var(--unaga-text-lg);
	color: var(--unaga-grey-600);
	max-width: 560px;
	margin: 0 auto var(--unaga-space-8);
}
.unaga-hero-ctas { display: flex; gap: var(--unaga-space-4); justify-content: center; flex-wrap: wrap; margin-bottom: var(--unaga-space-10); }

.unaga-btn {
	display: inline-flex;
	align-items: center;
	gap: var(--unaga-space-2);
	border-radius: var(--unaga-radius-pill);
	padding: 14px 30px;
	font-weight: 700;
	font-size: var(--unaga-text-base);
	text-decoration: none;
	border: 2px solid transparent;
	cursor: pointer;
	transition: transform .18s cubic-bezier(.34,1.56,.64,1), box-shadow .18s ease;
}
.unaga-btn:hover { transform: translateY(-2px) rotate(-1deg) scale(1.03); }
.unaga-btn:active { transform: translateY(0) scale(0.98); }
.unaga-btn-fuchsia { background: var(--unaga-fuchsia); color: var(--unaga-white); box-shadow: 0 6px 16px rgba(232,25,90,0.35); }
.unaga-btn-outline-light { background: var(--unaga-white); color: var(--unaga-grey-900); border-color: var(--unaga-grey-300); }
.unaga-btn-outline-light:hover { border-color: var(--unaga-fuchsia); }
.unaga-btn-outline-dark { background: transparent; color: var(--unaga-grey-900); border-color: var(--unaga-grey-400); }
.unaga-btn-outline-dark:hover { border-color: var(--unaga-fuchsia); color: var(--unaga-fuchsia); }
.unaga-btn-black { background: var(--unaga-black); color: var(--unaga-white); }

.unaga-stat-pills { display: flex; gap: var(--unaga-space-4); justify-content: center; flex-wrap: wrap; }
.unaga-stat-pill {
	background: var(--unaga-white);
	border: 1px solid var(--unaga-grey-100);
	box-shadow: var(--unaga-shadow-card);
	border-radius: var(--unaga-radius-pill);
	padding: 10px 22px;
	font-size: var(--unaga-text-sm);
	color: var(--unaga-grey-600);
	display: flex;
	align-items: center;
	gap: 6px;
}
.unaga-stat-pill strong { color: var(--unaga-fuchsia); font-size: var(--unaga-text-lg); font-family: var(--unaga-font-display); }

/* ============================================================
   Scroll-reveal + counters
   ============================================================ */
.unaga-reveal { opacity: 0; transform: translateY(24px); transition: opacity .6s ease, transform .6s ease; }
.unaga-reveal.in-view { opacity: 1; transform: translateY(0); }

/* ---------- Numbered steps ---------- */
.unaga-section-label { text-align: center; color: var(--unaga-fuchsia); font-weight: 700; font-size: var(--unaga-text-sm); text-transform: uppercase; letter-spacing: .04em; margin-bottom: var(--unaga-space-2); }
.unaga-section-title { text-align: center; font-size: var(--unaga-text-2xl); margin: 0 0 var(--unaga-space-2); }
.unaga-section-sub { text-align: center; color: var(--unaga-grey-600); max-width: 480px; margin: 0 auto var(--unaga-space-12); }

.unaga-steps-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--unaga-space-8); }
.unaga-step-card { position: relative; padding: var(--unaga-space-6); background: var(--unaga-white); border-radius: var(--unaga-radius-lg); box-shadow: var(--unaga-shadow-card); transition: transform .2s ease; }
.unaga-step-card:hover { transform: translateY(-4px) rotate(0.5deg); }
.unaga-step-number {
	display: inline-flex; align-items: center; justify-content: center;
	width: 48px; height: 48px; border-radius: 50%;
	background: var(--unaga-fuchsia-tint); color: var(--unaga-fuchsia-dark);
	font-family: var(--unaga-font-display); font-size: var(--unaga-text-lg); font-weight: 800;
	margin-bottom: var(--unaga-space-3);
}
.unaga-step-card h3 { font-size: var(--unaga-text-lg); margin: 0 0 var(--unaga-space-2); }
.unaga-step-card p { color: var(--unaga-grey-600); margin: 0; }

/* ---------- Story / sample card grid ---------- */
.unaga-card-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--unaga-space-4); }
.unaga-sample-card {
	background: var(--unaga-white);
	border: 1px solid var(--unaga-grey-100);
	border-radius: var(--unaga-radius-md);
	padding: var(--unaga-space-4);
	box-shadow: var(--unaga-shadow-card);
	transition: box-shadow .18s ease, transform .18s cubic-bezier(.34,1.56,.64,1);
	text-decoration: none;
	color: inherit;
	display: block;
}
.unaga-sample-card:hover { box-shadow: var(--unaga-shadow-card-hover); transform: translateY(-5px) rotate(-1deg); }
.unaga-sample-card .thumb { width: 100%; height: 120px; object-fit: cover; border-radius: var(--unaga-radius-sm); margin-bottom: var(--unaga-space-3); background: var(--unaga-cream); }
.unaga-sample-card .chip { display: inline-block; font-size: var(--unaga-text-xs); font-weight: 700; padding: 3px 10px; border-radius: var(--unaga-radius-pill); margin-bottom: var(--unaga-space-2); }
.unaga-chip-beginner { background: #E6F7EC; color: var(--unaga-green); }
.unaga-chip-intermediate { background: #FEF3D6; color: #946200; }
.unaga-chip-advanced { background: var(--unaga-fuchsia-tint); color: var(--unaga-fuchsia-dark); }
.unaga-sample-card h4 { font-size: var(--unaga-text-base); margin: 0 0 4px; }
.unaga-sample-card .meta { font-size: var(--unaga-text-xs); color: var(--unaga-grey-600); }
.unaga-sample-card .cta { font-size: var(--unaga-text-sm); font-weight: 700; color: var(--unaga-fuchsia); margin-top: var(--unaga-space-2); display: block; }

/* ---------- Gamification preview band ---------- */
.unaga-gamify-band { background: var(--unaga-cream); border-radius: var(--unaga-radius-lg); margin: 0 var(--unaga-space-6); }
.unaga-gamify-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--unaga-space-6); text-align: center; }
.unaga-gamify-item .emoji { font-size: 40px; display: block; margin-bottom: var(--unaga-space-2); animation: unaga-float 5s ease-in-out infinite; }
.unaga-gamify-item:nth-child(2) .emoji { animation-delay: .4s; }
.unaga-gamify-item:nth-child(3) .emoji { animation-delay: .8s; }
.unaga-gamify-item:nth-child(4) .emoji { animation-delay: 1.2s; }
.unaga-gamify-item h4 { margin: 0 0 4px; font-size: var(--unaga-text-base); }
.unaga-gamify-item p { margin: 0; color: var(--unaga-grey-600); font-size: var(--unaga-text-sm); }

/* ---------- FAQ accordion ---------- */
.unaga-faq { max-width: 700px; margin: 0 auto; }
.unaga-faq details { border-bottom: 1px solid var(--unaga-grey-100); padding: var(--unaga-space-4) 0; }
.unaga-faq summary { font-weight: 700; cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center; }
.unaga-faq summary::-webkit-details-marker { display: none; }
.unaga-faq summary::after { content: '+'; font-size: 20px; color: var(--unaga-fuchsia); transition: transform .2s ease; }
.unaga-faq details[open] summary::after { content: '+'; transform: rotate(45deg); }
.unaga-faq p { color: var(--unaga-grey-600); margin: var(--unaga-space-2) 0 0; }

/* ---------- Closing CTA -- soft rounded gradient card, not a dark band ---------- */
.unaga-closing-cta {
	background: linear-gradient(135deg, var(--unaga-fuchsia) 0%, var(--unaga-fuchsia-dark) 100%);
	color: var(--unaga-white);
	text-align: center;
	border-radius: var(--unaga-radius-lg);
	margin: 0 var(--unaga-space-6);
	padding: var(--unaga-space-12) var(--unaga-space-6);
}
.unaga-closing-cta h2 { font-size: var(--unaga-text-2xl); margin-bottom: var(--unaga-space-2); }
.unaga-closing-cta p { color: rgba(255,255,255,0.85); margin-bottom: var(--unaga-space-6); }
.unaga-closing-cta .unaga-btn-fuchsia { background: var(--unaga-white); color: var(--unaga-fuchsia-dark); }

/* ============================================================
   Custom Footer
   ============================================================ */
.unaga-site-footer { background: var(--unaga-grey-100); margin-top: var(--unaga-space-16); padding-top: var(--unaga-space-12); }
.unaga-site-footer-inner { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--unaga-space-8); flex-wrap: wrap; padding-bottom: var(--unaga-space-8); }
.unaga-footer-brand { display: flex; gap: var(--unaga-space-3); align-items: flex-start; max-width: 320px; }
.unaga-footer-brand img { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; }
.unaga-footer-brand strong { font-family: var(--unaga-font-display); font-size: var(--unaga-text-lg); }
.unaga-footer-brand p { margin: 4px 0 0; color: var(--unaga-grey-600); font-size: var(--unaga-text-sm); }
.unaga-footer-links { display: flex; gap: var(--unaga-space-6); }
.unaga-footer-links a { color: var(--unaga-grey-600); text-decoration: none; font-weight: 600; font-size: var(--unaga-text-sm); }
.unaga-footer-links a:hover { color: var(--unaga-fuchsia); }
.unaga-site-footer-bottom { border-top: 1px solid var(--unaga-grey-300); padding: var(--unaga-space-4) 0; font-size: var(--unaga-text-xs); color: var(--unaga-grey-600); }

/* ============================================================
   Animations
   ============================================================ */
@keyframes unaga-float {
	0%, 100% { transform: translateY(0) translateX(0); }
	50% { transform: translateY(-14px) translateX(6px); }
}
@keyframes unaga-bob {
	0%, 100% { transform: translateY(0) rotate(-2deg); }
	50% { transform: translateY(-10px) rotate(2deg); }
}
@media (prefers-reduced-motion: reduce) {
	.unaga-hero-mascot, .unaga-hero-deco, .unaga-gamify-item .emoji { animation: none; }
	.unaga-reveal { opacity: 1; transform: none; transition: none; }
}

/* ============================================================
   Member Page -- app-bar header + tab navigation
   ============================================================ */
.unaga-member-topbar {
	background: var(--unaga-white);
	border-bottom: 1px solid var(--unaga-grey-100);
	padding: var(--unaga-space-4) 0;
	position: sticky;
	top: 0;
	z-index: 5;
}
.unaga-member-topbar-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--unaga-space-4);
  flex-wrap: wrap;
  max-width: var(--unaga-max-width);
  margin: 0 auto;
  padding: 0 var(--unaga-space-6);
}
.unaga-member-identity { display: flex; align-items: center; gap: var(--unaga-space-3); }
.unaga-member-avatar { width: 44px; height: 44px; border-radius: 50%; background: var(--unaga-cream); display: flex; align-items: center; justify-content: center; font-size: 22px; }
.unaga-member-identity .name { font-weight: 700; font-size: var(--unaga-text-base); }
.unaga-member-identity .sub { font-size: var(--unaga-text-xs); color: var(--unaga-grey-600); }
.unaga-member-quickstats { display: flex; gap: var(--unaga-space-3); }
.unaga-member-quickstats span { font-size: var(--unaga-text-sm); font-weight: 700; background: var(--unaga-cream); border-radius: var(--unaga-radius-pill); padding: 6px 14px; }

.unaga-member-tabs {
	display: flex;
	gap: var(--unaga-space-2);
	background: var(--unaga-cream);
	padding: var(--unaga-space-2);
	border-radius: var(--unaga-radius-pill);
	max-width: 480px;
	margin: var(--unaga-space-6) auto;
}
/* NOTE: .unaga-member-tab and .unaga-member-panel are defined in frontend.css
   for the member dashboard panels. These were removed from page-templates.css
   to prevent a class-name collision that caused the entire active tab panel
   to inherit fuchsia background + white text (hiding story card titles). */
.unaga-home-tab {
	flex: 1;
	text-align: center;
	padding: 10px 16px;
	border-radius: var(--unaga-radius-pill);
	font-weight: 700;
	font-size: var(--unaga-text-sm);
	cursor: pointer;
	border: none;
	background: transparent;
	color: var(--unaga-grey-600);
	transition: transform .15s ease;
}
.unaga-home-tab.active { background: var(--unaga-fuchsia); color: var(--unaga-white); }
.unaga-home-tab:hover { transform: translateY(-1px); }
.unaga-home-panel { display: none; }
.unaga-home-panel.active { display: block; animation: unaga-fade-in .3s ease; }
@keyframes unaga-fade-in { from { opacity: 0; } to { opacity: 1; } }

/* ---------- Mobile ---------- */
@media (max-width: 860px) {
	.unaga-steps-grid, .unaga-gamify-grid { grid-template-columns: repeat(2, 1fr); }
	.unaga-card-grid { grid-template-columns: repeat(2, 1fr); }
	.unaga-hero h1 { font-size: 30px; }
}
@media (max-width: 540px) {
	.unaga-steps-grid, .unaga-gamify-grid, .unaga-card-grid { grid-template-columns: 1fr; }
	.unaga-page section { padding: var(--unaga-space-12) 0; }
	.unaga-member-topbar-inner { flex-direction: column; align-items: flex-start; }
	.unaga-site-footer-inner { flex-direction: column; }
}

/* ---------- Homepage: per-category sections (v5) ---------- */
.unaga-cat-section {
	margin-bottom: var(--unaga-space-12);
}
.unaga-cat-section-header {
	display: flex;
	align-items: baseline;
	gap: var(--unaga-space-3);
	margin-bottom: var(--unaga-space-5);
	border-bottom: 2px solid var(--unaga-navy-light, #1e3a5f22);
	padding-bottom: var(--unaga-space-3);
}
.unaga-cat-section-title {
	font-size: var(--unaga-text-xl);
	font-weight: 800;
	color: var(--unaga-navy);
	margin: 0;
}
.unaga-cat-count {
	font-size: var(--unaga-text-sm);
	color: var(--unaga-grey-600);
	font-weight: 600;
}
.unaga-cat-extra {
	margin-top: var(--unaga-space-4) !important;
}
.unaga-cat-more-row {
	text-align: center;
	margin-top: var(--unaga-space-5);
}
.unaga-btn-outline {
	background: transparent;
	border: 2px solid var(--unaga-fuchsia);
	color: var(--unaga-fuchsia);
	border-radius: var(--unaga-radius-pill);
	padding: 10px 28px;
	font-size: var(--unaga-text-sm);
	font-weight: 700;
	cursor: pointer;
	transition: background .15s, color .15s;
}
.unaga-btn-outline:hover {
	background: var(--unaga-fuchsia);
	color: #fff;
}