/* ============================================================
 * MjourneyGo — Unified Japan Modern Theme  (css/mj-theme.css)
 * ธีมกลาง: เมนู/โทนสี/ฟอนต์ ให้เหมือนกันทุกหน้า (อิงหน้า hero)
 * โหลดท้าย <head> ทุกหน้า → override ธีมเดิม โดยไม่แก้ markup
 * รองรับ nav 2 แบบ: #navbar และ #nav · ดูแล mobile
 * ============================================================ */
@font-face{
  font-family:'Noto Sans Thai Local';
  src:url('/fonts/NotoSansThai-Regular.ttf') format('truetype');
  font-style:normal;font-weight:300 600;font-display:swap;
}
@font-face{
  font-family:'Noto Sans Thai Local';
  src:url('/fonts/NotoSansThai-Bold.ttf') format('truetype');
  font-style:normal;font-weight:700 900;font-display:swap;
}

/* ---------- 1) โทนสี Japan modern — indigo + vermilion ---------- */
:root{
  color-scheme:light;
  --bg:#f5f7fa;
  --surface:#ffffff;
  --surface2:#eaf0f6;
  --primary:#b9382a;
  --primary-2:#962b20;
  --accent:#d9513e;
  --gold:#a87516;
  --text:#172033;
  --text-muted:#596579;
  --border:#d8e0e9;
  --gradient:#b9382a;
  --fun:#b9382a;
  --fun1:#b9382a;--fun2:#d9513e;--fun3:#ed765f;
  --mjn-night:#081426;
  --mjn-paper:#f8fafc;
  --mjn-gold:#f0bd66;
  --mjn-sun-core:#ffdca2;
  --mjn-peach:#ed765f;
  --mjn-coral:#d9513e;
  --shadow-sm:0 1px 2px rgba(8,20,38,.06),0 5px 18px rgba(8,20,38,.06);
  --shadow-md:0 16px 40px rgba(8,20,38,.11);
}

/* ---------- 2) ฟอนต์ทั้งเว็บ ---------- */
html{scroll-behavior:smooth;scroll-padding-top:84px}
body{
  font-family:'Noto Sans Thai Local','Noto Sans Thai',Tahoma,sans-serif !important;
  background:var(--bg);
  color:var(--text);font-size:1rem;line-height:1.65;min-height:100vh;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
h1,h2,h3,h4,h5,.sec-title,.hero-title,.brand,.logo{
  font-family:'Noto Sans Thai Local','Noto Sans Thai',Tahoma,sans-serif !important;
  color:var(--text);letter-spacing:-.012em;text-wrap:balance}
p{text-wrap:pretty}
::selection{background:#ffd8d1;color:#54140f}
button,input,select,textarea{font:inherit}
button,a{-webkit-tap-highlight-color:transparent}
.skip-link{
  position:fixed;top:.6rem;left:.6rem;z-index:10000;padding:.7rem 1rem;border-radius:10px;
  background:#fff;color:#081426;font-weight:700;box-shadow:var(--shadow-md);
  transform:translateY(-160%);
}
.skip-link:focus{transform:translateY(0)}
/* ยกเว้น hero ใหม่ (#mjHero มีฟอนต์ของตัวเองแล้ว) */
#mjHero, #mjHero *{}

/* ---------- 3) NAVBAR (รองรับทั้ง #navbar และ #nav) ---------- */
#navbar, nav#nav{
  background:rgba(8,20,38,.72) !important;
  backdrop-filter:blur(18px) saturate(1.3);
  -webkit-backdrop-filter:blur(18px) saturate(1.3);
  border-bottom:1px solid rgba(253,245,236,.10) !important;
  transition:background .4s, padding .4s, box-shadow .4s;
}
#navbar.scrolled, nav#nav.scrolled{
  background:rgba(8,20,38,.94) !important;
  box-shadow:0 8px 30px rgba(8,20,38,.28);
}

/* แบรนด์ + เครื่องหมาย M แบบตัวอย่าง — ตรา M ซ้าย, ชื่อ+tagline ซ้อน 2 แถวขวา */
#navbar .logo, nav#nav .logo{
  color:var(--mjn-paper) !important;
  display:grid !important; grid-template-columns:auto auto; align-items:center;
  column-gap:12px; row-gap:0; line-height:1.06;
}
#navbar .logo::before, nav#nav .logo::before{
  content:"M"; grid-column:1; grid-row:1 / span 2; align-self:center;
  display:grid; place-items:center; width:40px; height:40px; border-radius:11px;
  background:linear-gradient(145deg,var(--mjn-coral),#a62f24);
  color:#fff; font-family:Georgia,serif; font-size:20px; line-height:1;
  box-shadow:0 7px 18px rgba(185,56,42,.35),inset 0 0 0 1px rgba(255,255,255,.25);
}
#navbar .logo > *, nav#nav .logo > *{ grid-column:2; }
#navbar .logo .logo-row, nav#nav .logo .logo-row{ grid-row:1; }
#navbar .logo em, nav#nav .logo em{ grid-row:2; color:rgba(253,245,236,.6) !important; }

/* ลิงก์เมนู: สี paper + เส้นใต้ทองตอน hover */
#navbar .nav-links a, nav#nav .nav-links a{
  color:rgba(253,245,236,.85) !important; position:relative; font-weight:500;
  transition:color .25s;
}
#navbar .nav-links a::after, nav#nav .nav-links a::after{
  content:""; position:absolute; left:8px; right:8px; bottom:2px; height:2px; width:0; margin:auto;
  background:var(--mjn-gold); transition:width .3s; border-radius:2px;
}
#navbar .nav-links a:hover, nav#nav .nav-links a:hover{ color:#fff !important; background:transparent !important; }
#navbar .nav-links a:hover::after, nav#nav .nav-links a:hover::after{ width:calc(100% - 16px); }
#navbar .nav-links a.active-page, nav#nav .nav-links a.active-page{ color:#fff !important; }
#navbar .nav-links a.active-page::after, nav#nav .nav-links a.active-page::after{ width:calc(100% - 16px); }

/* เมนูพิลล์ (ตั๋ว/ที่พัก/ร้านอาหาร/ช้อปปิ้ง/วางแผนทริป) → รวมเป็นโทนเดียว ไม่หลากสี
   ใช้ selector จำเพาะสูง (id + .nav-links + a[class*=nav-pill]) ให้ชนะกฎ nav.scrolled .nav-pill-* */
#navbar .nav-links a[class*="nav-pill"],
nav#nav .nav-links a[class*="nav-pill"],
#navbar .nav-pill, nav#nav .nav-pill,
.nav-pill, .nav-pill-blue, .nav-pill-green, .nav-pill-orange, .nav-pill-pink{
  background:rgba(253,245,236,.06) !important;
  border:1px solid rgba(253,245,236,.20) !important;
  color:rgba(253,245,236,.86) !important;
}
#navbar.scrolled .nav-links a[class*="nav-pill"],
nav#nav.scrolled .nav-links a[class*="nav-pill"]{
  color:rgba(253,245,236,.86) !important;
}
#navbar .nav-links a[class*="nav-pill"]:hover,
nav#nav .nav-links a[class*="nav-pill"]:hover,
.nav-pill:hover, .nav-pill-blue:hover, .nav-pill-green:hover, .nav-pill-orange:hover, .nav-pill-pink:hover{
  color:#fff !important; border-color:var(--mjn-gold) !important; background:rgba(253,245,236,.13) !important;
}

/* ปุ่ม CTA (ติดตาม/subscribe) → ไล่สีพระอาทิตย์ */
#navbar .nav-cta, nav#nav .nav-cta{
  background:linear-gradient(135deg,var(--mjn-sun-core),var(--mjn-peach)) !important;
  color:#7a2d1e !important; border:none !important; border-radius:999px !important;
  box-shadow:0 8px 22px rgba(255,140,80,.4) !important; font-weight:600 !important;
  transition:transform .25s, box-shadow .25s !important;
}
#navbar .nav-cta:hover, nav#nav .nav-cta:hover{
  transform:translateY(-2px) !important; box-shadow:0 12px 30px rgba(255,140,80,.55) !important;
}

/* hamburger → เส้นสี paper */
#navbar .hamburger span, nav#nav .hamburger span,
.hamburger span{ background:var(--mjn-paper) !important; }

/* ---------- 4) MOBILE MENU (slide panel) ---------- */
.mobile-menu{
  background:linear-gradient(160deg,#081426 0%,#102844 100%) !important;
  color:var(--mjn-paper) !important;
}
.mobile-menu a, .mobile-link{ color:rgba(253,245,236,.9) !important; }
.mobile-link.active-page, .mobile-menu a.active-page{ color:var(--mjn-gold) !important; }
.mobile-yt-btn{
  background:linear-gradient(135deg,var(--mjn-sun-core),var(--mjn-peach)) !important;
  color:#7a2d1e !important;
}

/* ---------- 5) ปุ่ม/ไฮไลต์หลัก ให้กลืนโทน ---------- */
.btn-primary, .sf-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  min-height:46px;padding:.72rem 1.25rem;border:0;border-radius:999px;
  background:var(--gradient) !important;color:#fff !important;font-weight:700;
  box-shadow:0 10px 24px rgba(185,56,42,.22);
}
.btn-primary:hover,.sf-btn:hover{transform:translateY(-2px);box-shadow:0 14px 30px rgba(185,56,42,.3)}
.btn-outline{
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  min-height:46px;padding:.7rem 1.2rem;border:1px solid var(--border) !important;
  border-radius:999px;background:rgba(255,255,255,.86) !important;color:var(--text) !important;
  box-shadow:0 4px 14px rgba(8,20,38,.05);font-weight:700;
}
.btn-outline:hover{border-color:#b9c5d2 !important;background:#fff !important;transform:translateY(-2px)}

/* หัวข้อกลางของหน้าหลัก/หน้าค้นหา */
.section-label{
  display:flex;align-items:center;gap:.75rem;color:var(--primary) !important;
  font-size:.76rem;font-weight:800;letter-spacing:.15em;text-transform:uppercase;
}
.section-label::after{content:"";width:42px;height:2px;border-radius:2px;background:linear-gradient(90deg,var(--primary),rgba(185,56,42,0))}
.sec-title{
  font-size:clamp(1.7rem,3.7vw,2.7rem);line-height:1.2;margin-bottom:.65rem;
  letter-spacing:-.035em;
}
.sec-desc{max-width:720px;color:var(--text-muted);font-size:1.02rem;line-height:1.75}

/* ---------- 6) ความสม่ำเสมอของพื้นผิวและการโต้ตอบ ---------- */
.video-card,.destination-card,.tip-card,.transport-card,.blog-card,.card{
  border-color:var(--border) !important;border-radius:12px;
  background:var(--surface);
  box-shadow:none;overflow:hidden;
}
.video-card:hover,.destination-card:hover,.tip-card:hover,.transport-card:hover,.blog-card:hover,.card:hover{
  box-shadow:none;transform:none;
}
input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),select,textarea{
  max-width:100%;border:1px solid var(--border);border-radius:12px;background:#fff;color:var(--text);
  box-shadow:inset 0 1px 2px rgba(8,20,38,.035);padding:.72rem .85rem;
}
input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):hover,select:hover,textarea:hover{border-color:#b7c3d0}
input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):focus,select:focus,textarea:focus{
  border-color:var(--primary);box-shadow:0 0 0 4px rgba(185,56,42,.1);outline:0;
}
table{border-collapse:separate;border-spacing:0;overflow:hidden;border-radius:14px}
thead th{background:#edf2f7;color:#344156;font-weight:800}
tbody tr{transition:background-color .2s}
tbody tr:hover{background:rgba(255,255,255,.68)}
footer{border-top:1px solid rgba(255,255,255,.08)}
.footer-links a{display:inline-flex;align-items:center;min-height:30px}
a,button,input,select,textarea{transition-property:color,background-color,border-color,box-shadow,transform,opacity;transition-duration:.2s}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,[tabindex]:focus-visible{
  outline:3px solid #f0bd66 !important;outline-offset:3px;border-radius:6px;
}
button:disabled,[aria-disabled="true"]{cursor:not-allowed;opacity:.55;transform:none !important}

/* ---------- 7) mobile size polish ---------- */
@media (max-width:768px){
  #navbar .logo::before, nav#nav .logo::before{ width:34px; height:34px; font-size:17px; }
  button,.btn-primary,.btn-outline,.mobile-link{min-height:44px}
  .sec-title{font-size:clamp(1.55rem,8vw,2.15rem)}
  .section-label{font-size:.7rem;letter-spacing:.12em}
  .video-card:hover,.destination-card:hover,.tip-card:hover,.transport-card:hover,.blog-card:hover,.card:hover{transform:none}
}
@media (max-width:400px){
  #navbar .logo::before, nav#nav .logo::before{ width:30px; height:30px; font-size:15px; border-radius:9px; }
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important}
}