/*
 * pbnc-archive-hero-mobile.css v1.7
 * CSS มือถือสำหรับ HERO หลักของหน้า Archive / Tag / Search
 * ใช้กับ DOM เดิมจากไฟล์:
 *   - templates/parts/pbnc-archive-hero.php
 *   - templates/parts/pbnc-archive-topcats.php
 *
 * Logic ช่องค้นหา + ปุ่มแว่น ยึดแบบเดียวกับหน้าแรก (pbnc-header-home-mobile.css)
 * คือ:
 *  - ปุ่มแว่น (จาก JS) ลอยอยู่มุมขวาบน ปรับตำแหน่ง/ขนาดได้จาก class เดียว
 *  - ช่องค้นหาลอยซ้อนบน HERO และใช้ .pbnc-show-search เพื่อเปิด/ปิด
 */

/* ค่าเริ่มต้นทุกหน้าจอ: ซ่อนปุ่มมือถือ + กล่องหมวดหมู่
   ใช้ !important เพื่อบังคับทับ inline style จาก JS */
.pbnc-archive-mobile-menu-toggle,
.pbnc-archive-search-toggle,
.pbnc-archive-top-catnav{
  display: none !important;
}

/* มือถือ */
@media (max-width: 768px){

  /* ===== Layout พื้นฐาน hero มือถือ ===== */

  .pbnc-archive-hero-wrap{
    position: relative;
    text-align: center;
    padding: 72px 12px 24px;  /* padding-top ปรับความห่างระหว่างโลโก้กับชิปบาร์ */
  }

    /* โลโก้: ใช้ DOM จาก .pbnc-archive-logo */
  .pbnc-archive-logo{
    position: absolute;
    left: 48%;           /* ปรับซ้าย-ขวา จาก 0%–100% */
    top: -5px;           /* ปรับขึ้น-ลง ตามต้องการ */
    transform: translateX(-50%);
    z-index: 20;
    text-align: center;
  }


  .pbnc-archive-logo img.custom-logo{
    height: 60px;        /* ปรับขนาดโลโก้ตรงนี้ */
    width: auto;
    display: inline-block;
  }

  /* ช่องค้นหา: ใช้ DOM จาก .pbnc-archive-hero-right */

  .pbnc-archive-hero-right{
    position: relative;
    float: none;
    margin: 10px auto 0;
    max-width: 100%;
    width: 100%;
  }

  /* ช่องค้นหาหลักหลังจากกดปุ่มแว่น JS
     logic เหมือนหน้าแรก: ช่องอยู่ด้านซ้าย, ปุ่มแว่นอยู่ด้านขวา */
  .pbnc-archive-hero-right form.is-search-form{
    position: absolute;
    right: -150px;
    top: -20px;
    max-width: 260px;
    width: 120%;
    z-index: 205;
    margin: 0;
    display: none;             /* เริ่มต้นซ่อน รอ .pbnc-show-search */
  }

  /* แสดงช่องค้นหาเมื่อมี class จาก JS */
  .pbnc-archive-hero-right form.is-search-form.pbnc-show-search{
    display: block !important;
  }

  .pbnc-archive-hero-right form.is-search-form label{
    display: block;
    width: 100%;
  }

  .pbnc-archive-hero-right form.is-search-form .is-search-input{
    width: 100% !important;
    box-sizing: border-box;
    padding: 8px 36px 8px 10px;  /* padding ขวา 36px เผื่อพื้นที่ไอคอนในช่อง */
    border-radius: 6px;
    background: #ffffff;
    color: #000000;
      border: none !important;
    outline: none !important;
    box-shadow: none !important;
    appearance: none !important;
}

  /* ปุ่มแว่นในช่องค้นหา (submit) แบบกรอบเทา */
  .pbnc-archive-hero-right form.is-search-form .is-search-submit{
    position: absolute;
    right: 0px;
    top: 16px;
    transform: translateY(-50%);
    width: 36px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #e0e0e0;
    border-left: 0;
    background: #f3f3f3;
    cursor: pointer;
    padding: 0;
    margin: 0;
  }

  /* ===== ปุ่มเมนูมือถือ (☰ / ✕) ===== */

  .pbnc-archive-mobile-menu-toggle{
    position: absolute;
    left: 16px;
    top: 20px;
    z-index: 210;                    /* สูงกว่าชิปบาร์และเมนู */
    display: inline-flex !important; /* บังคับให้แสดงเฉพาะมือถือ */
    align-items: center;
    justify-content: center;
    font-size: 18px;
    line-height: 1;
    color: #ffffff;
    cursor: pointer;
    user-select: none;
    background: none;
    border: none;
    padding: 0;
    margin: 0;
  }

  /* ===== หมวดหมู่ฟ้า (เมนู Top Categories) ===== */

  .pbnc-archive-top-catnav{
    /* display:none !important; มาจาก global ด้านบนอยู่แล้ว */
    position: absolute;
    left: 23%;
    top: 90px;                   /* ปรับให้ตรงกับหน้าแรก */
    transform: translateX(-50%);
    width: 220px;                /* ความกว้างการ์ดเท่าหน้าแรก */
    background: #000000e3;       /* สีดำโปร่งเหมือนหน้าแรก */
    border-radius: 12px;
    padding: 10px 8px;
    box-shadow: 0 6px 18px rgba(0,0,0,.35);
    z-index: 200;                /* ยกให้สูงกว่าชิปบาร์ */
  }

  /* แสดงเมนูหมวดหมู่ฟ้าเมื่อมี class .pbnc-open (ควบคุมจาก JS)
     ใช้ !important ทับ inline style จาก JS ถ้ามี */
  .pbnc-archive-top-catnav.pbnc-open{
    display: flex !important;         /* ใช้ flex เพื่อจัดให้อยู่กลาง */
    flex-direction: column;
    align-items: center;              /* จัดเนื้อหาทั้งหมดให้อยู่กึ่งกลางกรอบ */
  }

  .pbnc-archive-top-catnav ul{
    list-style: none;
    margin: 0;
    padding: 0 12px;             /* padding ด้านในเท่าหน้าแรก */
    display: flex;
    flex-direction: column;
    align-items: center;         /* จัดแต่ละป้ายให้อยู่กลาง */
    gap: 4px;
  }

  .pbnc-archive-top-catnav li{
    margin: 0;
    padding: 0;
  }

  .pbnc-archive-top-catnav a{
    display: block;
    padding: 4px 6px;            /* ขนาดป้ายตามหน้าแรก */
    border-radius: 999px;
    background: #2196f3;
    color: #ffffff !important;
    font-size: 8px;              /* ฟอนต์เล็กเท่าหน้าแรก */
    text-align: center;
    text-decoration: none;
    white-space: nowrap;
  }

  .pbnc-archive-top-catnav a:hover{
    background: #2563eb;
  }

  /* ===== ปุ่มแว่นค้นหา มือถือ (แบบหน้าแรก) ===== */

  .pbnc-archive-search-toggle{
    /* ปุ่มอิโมจิแว่นแบบ icon-only (ไม่มีกรอบ/พื้นหลัง) */
    position: absolute;
    right: 40px;                 /* ปรับตำแหน่งขวา/ซ้ายได้จากตรงนี้ */
    top: 16px;                   /* ระยะจากด้านบน hero */
    z-index: 210;                /* ให้ปุ่มอยู่บนสุด */
    cursor: pointer;
    user-select: none;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;

    font-size: 20px;             /* ขนาดอิโมจิแว่นด้านใน */
    color: #ffffff;
    line-height: 1;

    background: none;
    border: none;
    padding: 0;
    margin: 0;
    border-radius: 0;
  }

  .pbnc-archive-search-toggle svg{
    display: block;
  }

}


/* =========================================================
 * PBNC Single Video overrides (v1.3)
 * - ใช้ selector body.single เพื่อไม่ไปกระทบ Archive / Tag / Search
 * - ครอบทั้งโลโก้, ปุ่มเมนู, ปุ่มแว่น และ dropdown ช่องค้นหา
 *   เวลาอยากปรับตำแหน่ง/ขนาดเฉพาะหน้า "วิดีโอ"
 *   ให้ปรับตัวเลขในบล็อกนี้เท่านั้น
 * =======================================================*/

@media (max-width: 768px){

  /* โลโก้เฉพาะหน้า Single (เช่น หน้า Video) */
  body.single .pbnc-archive-logo{
    left: 10%;           /* ซ้าย/ขวา (0–100%) */
    top: -10px;           /* ขึ้น/ลง */
    transform: translateX(-50%);
  }

  body.single .pbnc-archive-logo img.custom-logo{
    height: 60px;        /* ขนาดโลโก้ */
  }

  /* ปุ่มเมนู ☰/✕ เฉพาะหน้า Single */
  body.single .pbnc-archive-mobile-menu-toggle{
    left: 35px;          /* ซ้าย/ขวา ของปุ่มเมนู */
    top: 15px;           /* ขึ้น/ลง ของปุ่มเมนู */
  }

 body.single .pbnc-archive-search-toggle{
  right: 40px !important;          /* ซ้าย/ขวา ของปุ่มแว่น */
  top: 11px !important;            /* ขึ้น/ลง ของปุ่มแว่น */
  font-size: 20px !important;      /* ขนาด icon/emoji แว่น */
  z-index: 1000000 !important;     /* ให้ปุ่มอยู่เหนือป้ายโฆษณาแน่นอน */
}

  /* ตำแหน่ง/ขนาดกล่อง dropdown ช่องค้นหา หลังจากกดปุ่มแว่น */
body.single .pbnc-archive-hero-right form.is-search-form{
  right: 0px !important;       /* ระยะจากขอบขวา hero */
  top: -20px !important;       /* ระยะจากด้านบน hero */
  max-width: 360px !important; /* ความกว้างสูงสุดของกล่องค้นหา */
  width: 120% !important;      /* สัดส่วนความกว้างกล่อง */
  z-index: 999999 !important;  /* ดันให้อยู่เหนือป้ายโฆษณา */
}

  /* ฟิลด์ input ด้านใน dropdown ช่องค้นหา */
  body.single .pbnc-archive-hero-right form.is-search-form .is-search-input{
    font-size: 14px !important;             /* ขนาดตัวอักษรในช่องค้นหา */
    padding: 8px 36px 8px 10px !important;  /* top right bottom left – ขยาย/หด padding ในช่อง */
  }

  /* ปุ่มแว่นด้านในกล่องค้นหา (submit) */
  body.single .pbnc-archive-hero-right form.is-search-form .is-search-submit{
    right: 0 !important;           /* 0 = ชิดขอบขวาของกล่องค้นหา */
    top: 16px !important;          /* ระยะจากด้านบนของกล่อง */
    width: 12px !important;        /* ความกว้างปุ่ม */
    height: 12px !important;       /* ความสูงปุ่ม */
  }

  /* ตำแหน่ง/ขนาดกล่องหมวดหมู่ฟ้า เฉพาะหน้า Single */
  body.single .pbnc-archive-top-catnav{
    left: 23%;          /* ซ้าย/ขวา ของกล่องหมวดหมู่ */
    top: 110px;          /* ระยะจากด้านบน hero */
    width: 160px;       /* ความกว้างกล่องหมวดหมู่ */
  }
}

/* ซ่อนเมนูหมวดหมู่ฟ้า บน Desktop เฉพาะหน้า Single (รวมหน้า Video) */
@media (min-width: 769px){
  body.single .pbnc-archive-top-catnav{
    display: none !important;
  }
}

/* === PBNC Single Video – Fix search visibility & button shape === */
@media (max-width: 768px){

  /* 1) ซ่อนช่องค้นหาไว้ก่อน จนกว่าจะได้ .pbnc-show-search จาก JS */
  body.single .pbnc-archive-hero-right form.is-search-form{
    display: none !important;
  }

  /* แสดงเฉพาะตอนมี .pbnc-show-search (หลังจากกดปุ่มแว่น JS) */
  body.single .pbnc-archive-hero-right form.is-search-form.pbnc-show-search{
    display: block !important;
  }

  /* 2) ปรับรูปทรงปุ่มแว่น “ด้านในช่องค้นหา” ให้ไม่เป็นกรอบเทาเหลี่ยม */
  body.single .pbnc-archive-hero-right form.is-search-form .is-search-submit{
    position: absolute;
    right: 8px !important;       /* ระยะจากขอบขวาของช่องค้นหา */
    top: 50% !important;         /* จับให้อยู่กลางแนวตั้ง */
    transform: translateY(-50%);
    width: 24px !important;      /* ขนาดปุ่ม */
    height: 24px !important;

    border: none !important;     /* ตัดเส้นกรอบสีเทาออก */
    background: transparent !important; /* ไม่ให้มีพื้นหลังสีเทา */
    box-shadow: none !important;
    padding: 0 !important;
    margin: 0 !important;
  }
}