/*
 * PBNC Header Home Mobile TUNE
 * ใช้เฉพาะหน้า Home บนมือถือ
 * - โลโก้
 * - ปุ่มหมวด (ขีด)
 * - ปุ่มค้นหา (แว่น)
 * - กล่องค้นหา
 * - กล่องหมวดหมู่ (overlay ทับกริด ไม่ดันลง)
 */

/* pbnc-front-home-hero-tune.css */
/* ปรับตำแหน่งโลโก้ + ช่องค้นหา เฉพาะหน้า Home (Desktop เป็นหลัก) */

@media (min-width: 960px) {

  /* ทั้งกล่อง hero (โลโก้ + search) */
  body.home .pbnc-archive-hero-wrap {
    /* ขยับขึ้น/ลงทั้งบล็อก */
    margin-top: 40px;      /* + ลง / - ขึ้น ปรับได้ตามใจ */
    margin-bottom: 10px;
    column-gap: 32px;      /* ระยะห่างระหว่างโลโก้กับ search */
  }

  /* คอลัมน์โลโก้ */
  body.home .pbnc-archive-logo {
    margin-top: -30px;     /* ขยับโลโก้ขึ้นลง */
    margin-left: 0;        /* ซ้าย/ขวา */
    margin-right: 10px;
    text-align: center;    /* จะเปลี่ยนเป็น left/right ก็ได้ */
  }

  /* คอลัมน์ฝั่งขวาที่หุ้ม search อยู่ */
  body.home .pbnc-archive-hero-right {
    /* บังคับให้จัด layout ด้วย flex เพื่อให้ขยับได้ง่าย */
    display: flex !important;
    justify-content: flex-end;   /* ชิดขวา (เปลี่ยนเป็น center ได้) */
    align-items: center;
    margin-top: -10px !important;  /* ขยับคอลัมน์ search ทั้งก้อน */
  }

  /* กล่อง search ทั้งก้อน */
  body.home .pbnc-archive-search {
    margin-top: 0px !important;    /* ขยับกล่อง search เพิ่มเติม */
    margin-right: 150px !important;  /* ถ้าอยากขยับเข้าใน/ออกนอกด้านขวา */
  }

  /* ช่อง input ข้างใน (ขยับ padding ด้านในได้) */
  body.home .pbnc-archive-search .is-search-input {
    padding-left: 14px;
    padding-right: 12px;
  }

}


/* ===== HOME – Mobile layout (full width) ===== */
@media (max-width: 640px) {

  /* hero + chipbar + grid + pagination แบบเต็มจอ */
  body.home .pbnc-archive-hero-wrap,
  body.home .pbnc-archive-top-catnav,
  body.home .pbnc-archive-search,
  body.home .pbnc-chipbar,
  body.home .pbnc-archive-grid,
  body.home .pbnc-pagination {
      max-width: 100% !important;
      width: 100% !important;
      margin-left: auto !important;
      margin-right: auto !important;
      padding-left: 10px !important;
      padding-right: 10px !important;
      box-sizing: border-box !important;
  }

}

/* ============================================
 * HOME MOBILE OVERRIDE HERO (fix ปุ่มขีด + แว่นหาย)
 * ใช้เฉพาะหน้าแรกบนมือถือเท่านั้น
 * ========================================== */
@media (max-width: 640px) {

  /* เปิดให้โลโก้ใน hero หน้าแรก ปรับขนาดได้จริง */
  body.home .pbnc-archive-logo img.custom-logo {
    height: 70px !important;      /* ปรับสูง-ต่ำได้ตามใจ เช่น 48 / 56 */
    width: auto !important;
    display: block;
  }

  /* บังคับให้ปุ่มเมนูหมวด (☰) โชว์บนหน้าแรกมือถือ */
  body.home .pbnc-archive-mobile-menu-toggle {
    display: flex !important;
    align-items: center;
    justify-content: center;

    position: absolute;
    left: 0;                       /* ขยับซ้ายได้ตามต้องการ */
    top: 70%;
    transform: translateY(-50%);
    border: none;
    background: transparent;
    padding: 0;
    margin: 0;
  }

  /* บังคับให้ปุ่มแว่นค้นหา โชว์บนหน้าแรกมือถือ */
  body.home .pbnc-archive-search-toggle {
    display: flex !important;
    align-items: center;
    justify-content: center;

    position: absolute;
    right: 0;                      /* ขยับขวาได้ตามต้องการ */
    top: 50%;
    transform: translateY(-50%);
    border: none;
    background: transparent;
    padding: 0;
    margin: 0;
  }

  /* ถ้าไอคอนเป็น SVG / icon font: คุมขนาดตรงนี้ได้ */
  body.home .pbnc-archive-mobile-menu-toggle svg,
  body.home .pbnc-archive-search-toggle svg,
  body.home .pbnc-archive-mobile-menu-toggle i,
  body.home .pbnc-archive-search-toggle i {
    width: 22px;
    height: 22px;
    font-size: 22px;
  }
}

/* ===========================================
 * HOME MOBILE — ปรับตำแหน่งเฉพาะหน้าแรก
 * (ไม่กระทบหมวดหมู่ / แท็ก / ค้นหา)
 * =========================================== */
@media (max-width: 640px) {

  /* ทำให้ hero บนหน้าแรกเป็นกรอบอ้างอิง */
  body.home .pbnc-archive-hero-wrap {
    position: relative;
  }

  /* ปุ่มเมนูหมวดหมู่ (สามขีด) – ซ้าย */
  body.home .pbnc-archive-mobile-menu-toggle {
    position: absolute;
    left: 12px;            /* ปรับเลื่อนซ้าย/ขวาได้ */
    top: 50%;
    transform: translateY(-50%);
  }

  /* ปุ่มแว่นค้นหา – ขวา */
  body.home .pbnc-archive-search-toggle {
    position: absolute;
    right: 12px;           /* ปรับเลื่อนซ้าย/ขวาได้ */
    top: 50%;
    transform: translateY(-50%);
  }

  /* ถ้าจะปรับขนาดไอคอนก็เพิ่มได้ */
  body.home .pbnc-archive-mobile-menu-toggle svg,
  body.home .pbnc-archive-mobile-menu-toggle i,
  body.home .pbnc-archive-search-toggle svg,
  body.home .pbnc-archive-search-toggle i {
    width: 22px;
    height: 22px;
    font-size: 22px;
  }
}

@media (max-width: 640px) {

  /* ทำให้ hero เป็น container อ้างอิงตำแหน่ง */
  body.home .pbnc-archive-hero-wrap {
    position: relative !important;
  }

  /* ================== LOGO ================== */
  body.home .pbnc-archive-logo {
    position: absolute !important;
    top: -10px !important;     /* ปรับขึ้น/ลง */
    left: 55% !important;
    transform: translateX(-50%) !important;
    z-index: 50 !important;
  }

  body.home .pbnc-archive-logo img.custom-logo {
    height: 70px !important;   /* ปรับขนาดโลโก้ */
    width: auto !important;
    display: block !important;
  }

  /* ================= MENU BUTTON (ซ้าย) ================= */
  body.home .pbnc-archive-mobile-menu-toggle {
    position: absolute !important;
    top: 10px !important;
    left: 34px !important;
    transform: translateY(0) !important;
    z-index: 100 !important;
    width: 27px !important;
    height: 27px !important;
    font-size: 26px !important;
  }

  /* ================= SEARCH BUTTON (ขวา) ================= */
  body.home .pbnc-archive-search-toggle {
    position: absolute !important;
    top: 10px !important;
    right: 34px !important;
    transform: translateY(0) !important;
    z-index: 100 !important;
    width: 27px !important;
    height: 27px !important;
    font-size: 27px !important;
  }
}

/* HOME MOBILE – CATEGORY OVERLAY (GRAY CARD)
 * ปรับขนาด + ตำแหน่ง การ์ดเทาเวลากดปุ่มขีด
 * เฉพาะหน้าแรกเท่านั้น
 */
@media (max-width: 640px) {

  /* การ์ดเทา */
  body.home .pbnc-archive-top-catnav {
    position: absolute !important;

    /* ===== ตำแหน่งการ์ดเทา ===== */
    top: 180px !important;        /* + ลง / - ขึ้น */
    left: 20% !important;         /* จับให้อยู่กลาง */
    transform: translateX(-50%) !important;

    /* ===== ขนาดการ์ดเทา ===== */
    width: 180px !important;      /* ความกว้างการ์ด */
    max-width: 90% !important;    /* กันจอเล็ก ๆ ล้น */
    padding: 10px 10px !important;/* สูง/หนาแน่นด้านใน */

    /* สีเดิมตามไฟล์หลัก ไม่แตะ */
    border-radius: 12px !important;
    z-index: 1200 !important;      /* สูงกว่า chipbar */
  }

  /* ให้เมนูหมวดหมู่ฟ้าอยู่ใต้การ์ดเทา และลอยเหนือชิปบาร์ */
  body.home .pbnc-archive-top-catnav.pbnc-open {
    display: flex !important;
    flex-direction: column;
    align-items: center;
  }
}