/* =========================================================
   KR Mobile Hamburger Dropdown — FIX v1.1
   ใช้กับ: #krHam, #mobileMenu, #menuBackdrop
   - Desktop menu (navLinks) ยังอยู่เหมือนเดิม
   - Mobile/iPad = dropdown ใต้ปุ่ม ☰ ฝั่งขวา เปิดลงแนวตั้ง
========================================================= */

:root{
  --kr-icon: 44px;      /* ขนาดปุ่ม = เท่า IG */
  --kr-gap: 10px;       /* ระยะห่างเท่า IG */
  --kr-edge: 14px;      /* ระยะจากขอบขวา */
  --kr-drop-top: 64px;  /* ระยะจากขอบบนถึงเมนู (ปรับตามความสูง header) */
}

/* ✅ ล็อก [hidden] ให้ชนะ CSS เก่าเสมอ (กันเมนู/แบ็คดรอปโผล่ซ้อน) */
#mobileMenu[hidden],
#menuBackdrop[hidden]{
  display:none !important;
}

/* =========================
   HEADER LAYOUT (สำคัญ: ตัวนี้หายไป เลยทำให้พัง)
   - ไม่ยุ่งสี/ธีม
   - ทำให้ Desktop: เมนูกลับไปอยู่กลาง, actions อยู่ขวา
========================= */
.siteHeader .navInner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  padding-right: calc(var(--kr-edge) + env(safe-area-inset-right));
}

.siteHeader .brand{ flex:0 0 auto; }

/* Desktop menu center */
.siteHeader .navLinks{
  flex:1 1 auto;
  display:flex;
  justify-content:center;
  gap:18px;
}

/* actions right */
.siteHeader .krActions{
  flex:0 0 auto;
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap: var(--kr-gap);
  position: relative;
  z-index: 10060; /* เหนือ backdrop */
}

/* =========================
   DESKTOP (ห้ามแตะเมนูเดิม)
========================= */
@media (min-width: 861px){
  #krHam{ display:none !important; }
  #mobileMenu{ display:none !important; }
  #menuBackdrop{ display:none !important; }
}

/* =========================
   MOBILE / iPAD
========================= */
@media (max-width: 860px){

  /* ซ่อนเมนู desktop เฉพาะบนมือถือ */
  .siteHeader .navLinks{
    display:none !important;
  }

  /* ===== ปุ่ม Hamburger ===== */
  #krHam{
    display:inline-flex !important;
    width: var(--kr-icon) !important;
    height: var(--kr-icon) !important;
    border: 0 !important;
    padding: 0 !important;
    border-radius: 12px !important;

    background: transparent !important;
    color: rgba(255,255,255,.95) !important;

    align-items:center !important;
    justify-content:center !important;
    cursor:pointer !important;

    -webkit-tap-highlight-color: transparent !important;
    touch-action: manipulation !important;

    position: relative !important;
    z-index: 10070 !important; /* อยู่เหนือ backdrop เสมอ */
  }

  #krHam:hover{
    background: rgba(255,255,255,.08) !important;
  }

  #krHam:focus-visible{
    outline: 2px solid rgba(255,255,255,.35) !important;
    outline-offset: 2px !important;
  }

  /* ไอคอน 3 ขีด (SVG) */
  #krHam .krHamIcon{
    width: 26px !important;
    height: 26px !important;
    display:block !important;
  }

  #krHam .krHamIcon path{
    fill: none !important;
    stroke: currentColor !important;
    stroke-width: 2.8 !important;
    stroke-linecap: round !important;
  }

  /* กดแล้ว = สีทอง */
  #krHam.isActive,
  #krHam[aria-expanded="true"]{
    color: #d6b46a !important;
    background: rgba(214,180,106,.14) !important;
  }

  /* ===== Backdrop ===== */
  #menuBackdrop{
    position: fixed;
    inset: 0;
    z-index: 9990 !important;
    background: rgba(0,0,0,.35);
    backdrop-filter: blur(2px);
  }

  /* ===== Mobile Dropdown Menu (ใต้ปุ่ม, ฝั่งขวา, เปิดลง) ===== */
  #mobileMenu{
    position: fixed !important;

    top: calc(var(--kr-drop-top) + env(safe-area-inset-top)) !important;
    right: calc(var(--kr-edge) + env(safe-area-inset-right)) !important;

    width: min(60vw, 320px) !important;
    z-index: 10000 !important;

    background: rgba(0,0,0,.92) !important;
    border-radius: 16px !important;
    padding: 12px !important;

    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;

    transform: translateY(-10px) !important;
    opacity: 0 !important;
    pointer-events: none !important;
    max-height: 0 !important;
    overflow: hidden !important;

    transition:
      opacity .18s ease,
      transform .18s ease,
      max-height .22s ease;
  }

  #mobileMenu.isOpen{
    transform: translateY(0) !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    max-height: 70vh !important;
    overflow: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }

  #mobileMenu a{
    display:block !important;
    padding: 9px 9px !important;
    border-radius: 12px !important;
    text-decoration: none !important;
  font-size: 18px !important;      /* ✅ เพิ่มขนาดตัวอักษร */
  line-height: 1.45 !important;     /* ✅ อ่านชัดขึ้น */
}
} /* <-- ปิด @media (max-width: 860px) */

/* (เลือกใช้) ล็อกสกอลล์ตอนเมนูเปิด */
html.menuOpen, body.menuOpen{
  overflow: hidden !important;
}

/* CSS ของ header + hamburger ทั้งหมด */

/* =========================
   DESKTOP menu polish (safe)
========================= */

:root{
  --gold: var(--gold-main);
}

/* --- เมนู Desktop: ใหญ่ ชัด หนา และ Hover เป็นสีทอง --- */
@media (min-width: 861px){
  .siteHeader .navLinks a{
    font-size: 19px;
    line-height: 1.4;
    font-weight: 500;
    letter-spacing: 0.01em;
    font-family: "Prompt", system-ui, sans-serif;
  }

  /* ชี้เมาส์ / โฟกัส = สีทอง */
  .siteHeader .navLinks a:hover,
  .siteHeader .navLinks a:focus-visible{
    color: var(--gold) !important;
  }

  /* หน้าปัจจุบัน (ถ้ามี class active ในอนาคต) */
  .siteHeader .navLinks a.active{
    color: var(--gold) !important;
  }
}

/* ================================
   KRUNIKI HEADER + HAMBURGER SYSTEM
   Stable version for iOS / iPad / Desktop
   ================================ */

.siteHeader{
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 9999;
  background: rgba(0,0,0,.55);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(255,255,255,.08);
  overflow: visible;
}

/* layout: flex only (no grid mixing) */
.siteHeader .navInner{
  max-width: 1120px;
  margin: 0 auto;
  padding: 12px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  overflow: visible;
}

/* desktop nav */
.siteHeader .navLinks{
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
}

/* กัน header บัง content */
main, .page, #main, .siteMain{
  padding-top: 72px;
}

/* ================================
   MOBILE / TABLET
   ================================ */

@media (max-width: 900px){

  /* ซ่อนเมนู desktop */
  .siteHeader .navLinks{ 
    display: none; 
  }

  /* แสดง hamburger / actions */
  .siteHeader .krActions{ 
    display: flex; 
  }

  /* hamburger tap target */
  .navToggle, .hamburger, .menuToggle,
  .siteHeader .krActions button{
    min-width: 44px;
    min-height: 44px;
    padding: 10px 12px;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
    cursor: pointer;
    position: relative;
    z-index: 10000;
  }
}

/* ================================
   DESKTOP
   ================================ */

@media (min-width: 901px){

  .siteHeader .navLinks{ 
    display: flex; 
  }

  .siteHeader .krActions{ 
    display: none; 
  }
}

/* ================================
   KRUNIKI iOS Tap Reliability (SAFE)
   Do NOT touch JS / state logic
   ================================ */

/* ทำให้ปุ่ม krHam แตะง่ายขึ้น โดยไม่เปลี่ยน behavior */
.krHam{
  min-width: 44px;
  min-height: 44px;
  padding: 10px 12px;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

/* กัน SVG กิน tap */
.krHamIcon,
.krHamIcon *{
  pointer-events: none;
}

/* ลิงก์ใน mobile menu: เพิ่มพื้นที่แตะ */
.mobileMenu a{
  min-height: 44px;
  padding: 14px 12px;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

/* ปิด blur เฉพาะ iOS (ตัวนี้ช่วยเรื่องแตะหลุดได้จริง) */
@supports (-webkit-touch-callout: none){
  .siteHeader{
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }
}