/*
Theme Name: NihonGo Academy
Theme URI: https://nihongoacademy.th
Author: NihonGo Academy
Author URI: https://nihongoacademy.th
Description: หัวข้อเว็บสถาบันสอนภาษาญี่ปุ่นและอังกฤษ ออกแบบสำหรับ Hostinger WordPress
Version: 1.0.0
Requires at least: 5.8
Tested up to: 6.5
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: nihongo-academy
Tags: education, language, japanese, english, one-page
*/

:root {
  --red:       #C0392B;
  --red-light: #E74C3C;
  --cream:     #FDF6EC;
  --ink:       #1A1A2E;
  --ink2:      #2C2C54;
  --gold:      #D4A017;
  --gold2:     #F0C040;
  --blue:      #1B4F72;
  --blue2:     #2980B9;
  --white:     #FFFFFF;
  --shadow:    0 8px 40px rgba(0,0,0,0.12);
}

/* === RESET & BASE === */
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior: smooth; }
body {
  font-family: 'Sarabun', sans-serif;
  background: var(--cream);
  color: var(--ink);
  overflow-x: hidden;
}
a { text-decoration: none; }
img { max-width: 100%; height: auto; }
ul { list-style: none; }

/* === NAV === */
.site-header {
  position: fixed; top:0; left:0; right:0; z-index:999;
  background: rgba(26,26,46,0.97);
  backdrop-filter: blur(10px);
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 5%; height: 68px;
  border-bottom: 2px solid var(--red);
}
.nav-logo { display:flex; align-items:center; gap:10px; }
.nav-logo .kanji { font-family:'Noto Serif JP',serif; font-size:1.8rem; color:var(--red); }
.nav-logo .brand-en { font-family:'Playfair Display',serif; font-size:1.1rem; color:#fff; display:block; }
.nav-logo .brand-th { font-size:0.65rem; color:var(--gold); letter-spacing:2px; display:block; }
.main-nav { display:flex; gap:28px; }
.main-nav a { color:#ccc; font-size:0.9rem; font-weight:600; transition:color .2s; }
.main-nav a:hover { color:var(--gold); }
.nav-cta {
  background:var(--red); color:#fff;
  padding:8px 22px; border-radius:4px;
  font-size:0.9rem; font-weight:700; transition:background .2s;
}
.nav-cta:hover { background:var(--red-light); }

/* === HERO === */
.hero-section {
  min-height:100vh;
  background: linear-gradient(135deg, var(--ink) 0%, #16213e 50%, #0f3460 100%);
  display:flex; align-items:center;
  padding:100px 5% 60px; position:relative; overflow:hidden;
}
.hero-section::before {
  content:'日本語';
  font-family:'Noto Serif JP',serif;
  font-size:28vw; font-weight:900;
  color:rgba(192,57,43,0.06);
  position:absolute; right:-5%; top:50%;
  transform:translateY(-50%);
  pointer-events:none; white-space:nowrap;
}
.hero-content { max-width:680px; position:relative; z-index:1; }
.hero-badge {
  display:inline-flex; align-items:center; gap:8px;
  background:rgba(192,57,43,0.18); border:1px solid var(--red);
  color:var(--gold); padding:6px 16px; border-radius:20px;
  font-size:0.8rem; font-weight:600; letter-spacing:1px; margin-bottom:28px;
}
.hero-jp { font-family:'Noto Serif JP',serif; font-size:1.4rem; color:var(--gold); margin-bottom:20px; letter-spacing:4px; }
.hero-content h1 {
  font-family:'Playfair Display',serif;
  font-size:clamp(2.4rem,5vw,4rem); color:#fff; line-height:1.15; margin-bottom:12px;
}
.hero-content h1 span { color:var(--red); }
.hero-content p { color:#aab; font-size:1.05rem; line-height:1.8; margin-bottom:40px; max-width:540px; }
.hero-btns { display:flex; gap:16px; flex-wrap:wrap; }
.btn-primary {
  background:var(--red); color:#fff;
  padding:14px 34px; border-radius:6px;
  font-weight:700; font-size:1rem; transition:all .25s;
  box-shadow:0 4px 20px rgba(192,57,43,0.4);
}
.btn-primary:hover { background:var(--red-light); transform:translateY(-2px); }
.btn-outline {
  border:2px solid rgba(255,255,255,0.3); color:#fff;
  padding:14px 34px; border-radius:6px;
  font-weight:600; font-size:1rem; transition:all .25s;
}
.btn-outline:hover { border-color:var(--gold); color:var(--gold); }
.hero-stats {
  display:flex; gap:40px; margin-top:60px;
  padding-top:40px; border-top:1px solid rgba(255,255,255,0.1);
}
.stat-num { font-family:'Playfair Display',serif; font-size:2.2rem; color:var(--gold); font-weight:700; }
.stat-label { font-size:0.8rem; color:#889; margin-top:4px; }

/* === SECTIONS COMMON === */
.section-wrap { padding:90px 5%; }
.section-label { font-size:0.75rem; letter-spacing:4px; font-weight:700; text-transform:uppercase; color:var(--red); margin-bottom:12px; }
.section-title { font-family:'Playfair Display',serif; font-size:clamp(1.8rem,3.5vw,2.8rem); color:var(--ink); line-height:1.2; margin-bottom:16px; }
.section-sub { font-size:1rem; color:#556; line-height:1.7; max-width:600px; }
.section-header { margin-bottom:60px; }
.bg-cream { background:var(--cream); }
.bg-white { background:#fff; }
.bg-dark  { background:linear-gradient(135deg,#1a1a2e 0%,#16213e 100%); }
.bg-dark .section-title { color:#fff; }
.bg-dark .section-label { color:var(--gold); }
.bg-dark .section-sub   { color:#99a; }

/* === PACKAGES GRID === */
.packages-grid {
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:28px;
}
.pkg-card {
  background:#fff; border-radius:16px; overflow:hidden;
  box-shadow:0 4px 24px rgba(0,0,0,0.07);
  border:2px solid transparent; transition:all .3s; position:relative;
}
.pkg-card:hover { border-color:var(--red); transform:translateY(-6px); box-shadow:var(--shadow); }
.pkg-card.featured { border-color:var(--gold); box-shadow:0 8px 40px rgba(212,160,23,0.2); }
.pkg-badge {
  position:absolute; top:18px; right:18px;
  background:var(--gold); color:var(--ink);
  font-size:0.7rem; font-weight:800;
  padding:4px 10px; border-radius:12px; letter-spacing:1px;
}
.pkg-header { padding:28px 28px 20px; background:linear-gradient(135deg,var(--ink) 0%,var(--ink2) 100%); }
.pkg-header.blue-head { background:linear-gradient(135deg,var(--blue) 0%,var(--blue2) 100%); }
.pkg-level { font-size:0.7rem; color:rgba(255,255,255,0.6); letter-spacing:3px; text-transform:uppercase; margin-bottom:6px; }
.pkg-name { font-family:'Playfair Display',serif; font-size:1.5rem; color:#fff; font-weight:700; margin-bottom:4px; }
.pkg-jp   { font-family:'Noto Serif JP',serif; font-size:1rem; color:var(--gold); letter-spacing:2px; }
.pkg-en-subtitle { font-size:0.85rem; color:rgba(255,255,255,0.7); margin-top:4px; }
.pkg-body { padding:24px 28px; }
.pkg-price { display:flex; align-items:baseline; gap:4px; margin-bottom:20px; }
.price-num { font-family:'Playfair Display',serif; font-size:2.2rem; font-weight:900; color:var(--red); }
.price-unit { font-size:0.85rem; color:#888; }
.pkg-features { list-style:none; margin-bottom:24px; }
.pkg-features li {
  padding:7px 0; font-size:0.9rem; color:#445;
  border-bottom:1px solid #f0f0f0;
  display:flex; align-items:center; gap:10px;
}
.pkg-features li:last-child { border-bottom:none; }
.pkg-features li::before { content:'✓'; color:var(--red); font-weight:800; font-size:0.85rem; flex-shrink:0; }
.pkg-cta {
  display:block; text-align:center;
  background:var(--ink); color:#fff;
  padding:12px; border-radius:8px;
  font-weight:700; font-size:0.95rem; transition:background .2s;
}
.pkg-cta:hover { background:var(--red); color:#fff; }
.pkg-cta.gold-cta { background:var(--gold); color:var(--ink); }
.pkg-cta.gold-cta:hover { background:var(--gold2); }
.pkg-cta.blue-cta { background:var(--blue); color:#fff; }
.pkg-cta.blue-cta:hover { background:var(--blue2); }

/* === WHY === */
.why-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:24px; }
.why-card { background:#fff; border-radius:16px; padding:32px 24px; text-align:center; box-shadow:0 2px 16px rgba(0,0,0,0.06); transition:transform .3s; }
.why-card:hover { transform:translateY(-4px); }
.why-icon { font-size:2.4rem; margin-bottom:16px; }
.why-title { font-weight:700; font-size:1rem; margin-bottom:8px; }
.why-text  { font-size:0.88rem; color:#667; line-height:1.65; }

/* === TEACHERS === */
.teachers-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:24px; }
.teacher-card {
  background:rgba(255,255,255,0.05); border:1px solid rgba(255,255,255,0.1);
  border-radius:16px; padding:30px 24px; text-align:center; transition:all .3s;
}
.teacher-card:hover { background:rgba(255,255,255,0.08); border-color:var(--gold); transform:translateY(-4px); }
.teacher-avatar {
  width:80px; height:80px; border-radius:50%;
  margin:0 auto 16px;
  display:flex; align-items:center; justify-content:center;
  font-size:2.2rem;
  background:linear-gradient(135deg,var(--red),var(--ink2));
  border:3px solid var(--gold);
}
.teacher-name { font-size:1.05rem; color:#fff; font-weight:700; margin-bottom:4px; }
.teacher-role { font-size:0.8rem; color:var(--gold); margin-bottom:10px; }
.teacher-desc { font-size:0.85rem; color:#889; line-height:1.6; }

/* === TESTIMONIALS === */
.testimonials-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:24px; }
.testi-card { background:rgba(255,255,255,0.05); border:1px solid rgba(255,255,255,0.1); border-radius:16px; padding:28px; }
.testi-quote { font-size:3rem; color:var(--red); font-family:'Playfair Display',serif; line-height:1; margin-bottom:12px; opacity:.6; }
.testi-text  { font-size:0.95rem; color:#ccd; line-height:1.75; margin-bottom:20px; }
.testi-stars { color:var(--gold); font-size:1rem; margin-bottom:12px; }
.testi-author { display:flex; align-items:center; gap:12px; }
.testi-ava { width:44px; height:44px; border-radius:50%; background:var(--red); display:flex; align-items:center; justify-content:center; font-size:1.3rem; }
.testi-name   { color:#fff; font-weight:700; font-size:0.9rem; }
.testi-course { color:var(--gold); font-size:0.78rem; }

/* === FAQ === */
.faq-2col { display:grid; grid-template-columns:1fr 1fr; gap:60px; align-items:start; }
.faq-item { border-bottom:1px solid #eee; padding:20px 0; }
.faq-q { font-weight:700; font-size:1rem; color:var(--ink); cursor:pointer; display:flex; justify-content:space-between; align-items:center; }
.faq-q::after { content:'+'; font-size:1.4rem; color:var(--red); }
.faq-q.open { color:var(--red); }
.faq-q.open::after { content:'−'; }
.faq-a { font-size:0.92rem; color:#556; line-height:1.75; padding-top:12px; display:none; }

/* === KANA DIVIDER === */
.kana-divider { text-align:center; padding:30px; background:var(--cream); font-family:'Noto Serif JP',serif; font-size:1.4rem; color:var(--red); letter-spacing:16px; opacity:.5; }

/* === CTA STRIP === */
.cta-strip { background:linear-gradient(135deg,var(--red) 0%,#922B21 100%); padding:70px 5%; text-align:center; }
.cta-strip h2 { font-family:'Playfair Display',serif; font-size:clamp(1.8rem,4vw,3rem); color:#fff; margin-bottom:16px; }
.cta-strip p  { color:rgba(255,255,255,0.8); font-size:1.05rem; margin-bottom:36px; }
.btn-white { background:#fff; color:var(--red); padding:15px 40px; border-radius:8px; font-weight:800; font-size:1rem; display:inline-block; transition:all .25s; box-shadow:0 4px 24px rgba(0,0,0,0.2); }
.btn-white:hover { transform:translateY(-3px); box-shadow:0 8px 32px rgba(0,0,0,0.3); color:var(--red); }

/* === FOOTER === */
.site-footer { background:#0d0d1a; padding:60px 5% 30px; color:#778; }
.footer-grid { display:grid; grid-template-columns:2fr 1fr 1fr 1fr; gap:40px; margin-bottom:40px; }
.footer-kanji { font-family:'Noto Serif JP',serif; font-size:2.5rem; color:var(--red); }
.footer-brand p { font-size:0.88rem; color:#667; line-height:1.7; margin-top:12px; }
.footer-col h4 { color:#fff; font-size:0.9rem; margin-bottom:16px; font-weight:700; }
.footer-col ul li { margin-bottom:10px; }
.footer-col ul li a { color:#667; font-size:0.88rem; transition:color .2s; }
.footer-col ul li a:hover { color:var(--gold); }
.footer-bottom { border-top:1px solid rgba(255,255,255,0.08); padding-top:24px; display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:12px; }
.footer-bottom p { font-size:0.82rem; color:#556; }

/* === SCROLL REVEAL === */
.reveal { opacity:0; transform:translateY(30px); transition:opacity .6s ease, transform .6s ease; }
.reveal.visible { opacity:1; transform:translateY(0); }

/* === RESPONSIVE === */
@media (max-width:900px) {
  .footer-grid { grid-template-columns:1fr 1fr; }
  .faq-2col { grid-template-columns:1fr; }
  .main-nav { display:none; }
}
@media (max-width:480px) {
  .footer-grid { grid-template-columns:1fr; }
  .hero-btns { flex-direction:column; }
  .hero-stats { gap:20px; flex-wrap:wrap; }
}