/* pbnc-archive-hero-tune.css
   Goal: Allow LEFT/RIGHT + UP/DOWN + SIZE controls for logo + search.
   - Higher selector specificity
   - Use transform: translate(X, Y) with !important
   - Provide fallback via left/top + margins
   - Keep previous size/length controls
*/

/* ใช้ custom properties ร่วมกันทั้ง .pbnc-archive-hero (เผื่อใช้ที่อื่น) และ .pbnc-archive-hero-wrap (ที่มีใน HTML จริง) */
.pbnc-archive-hero,
.pbnc-archive-hero-wrap {
  /* ===== ROW / CONTAINER ===== */
  --hero-gap: 20px;
  --hero-justify: space-between;
  --hero-max-width: 1200px;
  --hero-pad-x: 0px;
  --hero-margin-top: 0px;       /* move whole hero up/down */
  --hero-margin-bottom: 0px;

  /* ===== LOGO ===== */
  --logo-width: 220px;
  --logo-height: auto;

  /* Main movement controls (global default) */
  --logo-move-x: 0px;           /* ← move left(-) / right(+) */
  --logo-move-y: 0px;           /* ← move up(-) / down(+) */

  /* Fallback using position + margins */
  --logo-left: 0px;
  --logo-top: auto;
  --logo-ml: 0px;
  --logo-mr: 0px;
  --logo-mt: 0px;
  --logo-mb: 0px;

  /* ===== SEARCH ===== */
  --search-width: 640px;

  /* Main movement controls (global default) */
  --search-move-x: 0px;         /* ← move left(-) / right(+) */
  --search-move-y: 0px;         /* ← move up(-) / down(+) */

  /* Fallback */
  --search-left: 0px;
  --search-top: auto;
  --search-ml: 0px;
  --search-mr: 0px;
  --search-mt: 0px;
  --search-mb: 0px;

  /* Input length & height */
  --search-input-width: auto;   /* e.g., 36ch or 520px */
  --search-input-height: 44px;  /* ← ความสูงช่องค้นหา + ปุ่ม (default) */
  --search-button-minw: 44px;

  /* ปุ่มแว่น (ค่า default) */
  --search-button-width: auto;      /* ความกว้างปุ่ม (auto = ตามเนื้อหา) */
  --search-button-move-x: 0px;      /* เลื่อนกรอบแว่น ซ้าย(-) / ขวา(+) */
  --search-button-move-y: 0px;      /* เลื่อนกรอบแว่น ขึ้น(-) / ลง(+) */
  --search-icon-size: 18px;         /* ขนาดไอคอนแว่น */
}

/* ===== Layout row ===== */
/* เดิมใช้กับ .pbnc-hero__inner ตอนนี้เพิ่ม .pbnc-archive-hero-wrap ให้เป็น flex row จริง */
.pbnc-archive-hero .pbnc-hero__inner,
.pbnc-archive-hero-wrap {
  display: flex !important;
  align-items: center !important;
  justify-content: var(--hero-justify) !important;
  gap: var(--hero-gap) !important;
  max-width: var(--hero-max-width) !important;
  padding-left: var(--hero-pad-x) !important;
  padding-right: var(--hero-pad-x) !important;
  margin-left: auto !important;
  margin-right: auto !important;

  margin-top: var(--hero-margin-top) !important;
  margin-bottom: var(--hero-margin-bottom) !important;
}

/* ===== LOGO: stronger selectors + fallbacks ===== */
/* เพิ่ม .pbnc-archive-hero-wrap .pbnc-archive-logo ให้ตรงกับ HTML จริง */
.pbnc-archive-hero .pbnc-hero__logo,
.pbnc-archive-hero .site-branding,
.pbnc-archive-hero-wrap .pbnc-archive-logo {
  position: relative; /* for left/top fallback */
  transform: translate(var(--logo-move-x), var(--logo-move-y)) !important;
  left: var(--logo-left);
  top: var(--logo-top);
  margin-left: var(--logo-ml);
  margin-right: var(--logo-mr);
  margin-top: var(--logo-mt);
  margin-bottom: var(--logo-mb);
}
.pbnc-archive-hero .pbnc-hero__logo img,
.pbnc-archive-hero .site-branding img,
.pbnc-archive-hero .custom-logo,
.pbnc-archive-hero-wrap .pbnc-archive-logo img,
.pbnc-archive-hero-wrap .custom-logo {
  width: var(--logo-width) !important;
  height: var(--logo-height) !important;
  max-width: 100%;
  display: block;
}

/* ===== SEARCH: stronger selectors + fallbacks ===== */
/* เพิ่ม .pbnc-archive-hero-wrap .pbnc-archive-search ให้ตรงกับ HTML จริง */
.pbnc-archive-hero .pbnc-hero__search,
.pbnc-archive-hero form.search-form,
.pbnc-archive-hero-wrap .pbnc-archive-search,
.pbnc-archive-hero-wrap .pbnc-archive-search form {
  position: relative; /* for left/top fallback */
  width: var(--search-width) !important;
  max-width: 100% !important;
  transform: translate(var(--search-move-x), var(--search-move-y)) !important;
  left: var(--search-left);
  top: var(--search-top);
  margin-left: var(--search-ml);
  margin-right: var(--search-mr);
  margin-top: var(--search-mt);
  margin-bottom: var(--search-mb);
}

/* Input length & height */
.pbnc-archive-hero form.search-form input[type="search"],
.pbnc-archive-hero form.search-form input[type="text"],
.pbnc-archive-hero-wrap .pbnc-archive-search input[type="search"],
.pbnc-archive-hero-wrap .pbnc-archive-search input[type="text"],
.pbnc-archive-hero-wrap .pbnc-archive-search .is-search-input {
  width: var(--search-input-width) !important;
  max-width: 100% !important;
  height: var(--search-input-height) !important;
  box-sizing: border-box !important;
}
.pbnc-archive-hero form.search-form button,
.pbnc-archive-hero form.search-form input[type="submit"],
.pbnc-archive-hero-wrap .pbnc-archive-search button,
.pbnc-archive-hero-wrap .pbnc-archive-search input[type="submit"],
.pbnc-archive-hero-wrap .pbnc-archive-search button.is-search-submit {
  height: var(--search-input-height) !important;
  min-width: var(--search-button-minw) !important;
  width: var(--search-button-width);
  box-sizing: border-box !important;
}

/* ===== Single video overrides (desktop) ===== */
/* ปรับเฉพาะหน้า single (เช่นหน้าวิดีโอ) */
.single .pbnc-archive-hero,
.single .pbnc-archive-hero-wrap {
  /* ระยะทั้ง hero */
  --hero-margin-top: 10px;
  --hero-margin-bottom: 10px;

  /* LOGO */
  --logo-width: 280px;      /* ขนาดโลโก้ */
  --logo-move-x: 160px;     /* ซ้าย(-) / ขวา(+) */
  --logo-move-y: 0px;       /* บน(-) / ล่าง(+) */

  /* SEARCH BOX (input + ปุ่มแว่น) */
  --search-width: 440px;        /* ความกว้าง block ช่องค้นหา */
  --search-input-width: 36ch;   /* ความกว้างช่อง input */
  --search-input-height: 36px;  /* ความสูง input + ปุ่มแว่น */
  --search-move-x: 20px;        /* ย้ายกล่องค้นหา ซ้าย(-) / ขวา(+) */
  --search-move-y: 0px;         /* ย้ายกล่องค้นหา ขึ้น(-) / ลง(+) */

  /* ปุ่มแว่น */
  --search-button-width: 54px;      /* ความกว้างกรอบแว่น */
  --search-button-minw: 54px;       /* ให้เท่ากันไว้เลย */
  --search-button-move-x: -10px;      /* ย้ายกรอบแว่น ซ้าย(-) / ขวา(+) */
  --search-button-move-y: 0px;      /* ย้ายกรอบแว่น ขึ้น(-) / ลง(+) */
  --search-icon-size: 24px;         /* ขนาดไอคอนแว่น */
}

/* ===== Single video: จัด layout ให้ปุ่มแว่นชิดขวาช่องค้นหา + ใช้ตัวแปรด้านบน ===== */
.single .pbnc-archive-hero-wrap .pbnc-archive-search form {
  display: flex;
  align-items: stretch;
}

.single .pbnc-archive-hero-wrap .pbnc-archive-search label {
  flex: 1 1 auto;
  margin: 0;
  display: flex;
  align-items: center;
}

/* บังคับ input ให้สูงตามตัวแปร และตัด border ขวาออก เพื่อไม่ให้มีเส้น/ช่องว่างคั่น */
.single .pbnc-archive-hero-wrap .pbnc-archive-search input[type="search"],
.single .pbnc-archive-hero-wrap .pbnc-archive-search .is-search-input {
  width: 100% !important;
  height: var(--search-input-height) !important;
  box-sizing: border-box !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  border-right: none !important;
}

/* ปุ่มแว่นให้แนบชิด input + ควบคุมขนาด/ตำแหน่งได้ */
.single .pbnc-archive-hero-wrap .pbnc-archive-search button.is-search-submit {
  flex: 0 0 auto;
  margin-left: 0 !important;
  border-left: none !important;
  height: var(--search-input-height) !important;
  min-width: var(--search-button-minw) !important;
  width: var(--search-button-width);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 10px !important;
  box-sizing: border-box !important;

  /* เลื่อนกรอบแว่นเองได้ */
  transform: translate(var(--search-button-move-x), var(--search-button-move-y));
}

/* ขนาดไอคอนแว่นด้านใน */
.single .pbnc-archive-hero-wrap .pbnc-archive-search button.is-search-submit .is-search-icon svg {
  width: var(--search-icon-size);
  height: var(--search-icon-size);
}

/* ===== Mobile ===== */
@media (max-width: 768px) {
  .pbnc-archive-hero .pbnc-hero__inner,
  .pbnc-archive-hero-wrap {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 10px !important;
    max-width: none !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
  }
  .pbnc-archive-hero .pbnc-hero__logo img,
  .pbnc-archive-hero .site-branding img,
  .pbnc-archive-hero .custom-logo,
  .pbnc-archive-hero-wrap .pbnc-archive-logo img,
  .pbnc-archive-hero-wrap .custom-logo {
    width: 150px !important;
    height: auto !important;
  }
  .pbnc-archive-hero .pbnc-hero__search,
  .pbnc-archive-hero form.search-form,
  .pbnc-archive-hero-wrap .pbnc-archive-search,
  .pbnc-archive-hero-wrap .pbnc-archive-search form {
    width: 100% !important;
    max-width: 100% !important;
    transform: translate(0, 0) !important;
    left: 0 !important;
    top: auto !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
  }
  .pbnc-archive-hero form.search-form input[type="search"],
  .pbnc-archive-hero form.search-form input[type="text"],
  .pbnc-archive-hero-wrap .pbnc-archive-search input[type="search"],
  .pbnc-archive-hero-wrap .pbnc-archive-search input[type="text"],
  .pbnc-archive-hero-wrap .pbnc-archive-search .is-search-input {
    width: 100% !important;
  }
}

/* === PBNC: fix gap between search input and icon on single video === */
.single .pbnc-archive-hero-wrap .pbnc-archive-search form {
  display: flex;
  align-items: stretch;
  overflow: hidden;                 /* กันรอยขอบไม่เท่ากันโผล่ */
}

/* ช่องค้นหาให้ชิดปุ่ม */
.single .pbnc-archive-hero-wrap .pbnc-archive-search input[type="search"],
.single .pbnc-archive-hero-wrap .pbnc-archive-search .is-search-input {
  margin: 0 !important;
  border-right: none !important;    /* ไม่ให้มีเส้นคั่นขวา */
  border-radius: 0 !important;      /* ตัดมุมโค้งออก เผื่อธีมใส่ไว้ */
}

/* ปุ่มแว่นให้ชิด input */
.single .pbnc-archive-hero-wrap .pbnc-archive-search button.is-search-submit {
  margin: 0 !important;
  border-left: none !important;     /* ไม่ให้มีเส้นคั่นซ้าย */
  border-radius: 0 !important;      /* กันขอบโค้งให้เท่ากับ input */

  /* ถ้าอยากเลื่อนกรอบแว่นอีกนิดใช้สองตัวนี้ได้ */
  /* transform: translateX(-1px);  ปรับซ้าย(-) ขวา(+) */
  /* transform: translate( -1px, 0 ); */
}


/* === v1.1: Single video hero card for logo+search
   - Width = 960px (same as video stage/meta)
   - Add background + radius + shadow
   - Do NOT touch logo/search movement variables
==================================================== */
.single .pbnc-archive-hero-wrap {
    max-width: 1280px !important;   /* ความกว้างเท่าการ์ดวิดีโอด้านใน (stage/meta) */
    width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;

    background: linear-gradient(135deg, #111318, #161a1e);
    border-radius: 18px;
    box-shadow: 0 2px 16px rgba(0,0,0,.35);

    padding-top: 0px;
    padding-bottom: 0px;
    padding-left: 22px;
    padding-right: 22px;
}

  /* ซ่อนเฉพาะข้อความสำหรับ screen reader ไม่ให้เกะกะตา */
.is-search-form .is-screen-reader-text {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

/* ทำให้ตัวหนังสือ Search for: หายไป แต่ไม่กระทบช่อง input */
.is-search-form label {
    display: block !important;
    font-size: 0 !important;
    line-height: 0 !important;
    margin: 0 0 4px !important;
}

/* ปุ่มแว่น */
.is-search-submit {
    background: #f5f5f5 !important;
    border: 1px solid #dcdcdc !important;
    padding: 4px 6px !important;
    cursor: pointer !important;
}

/* ไอคอนแว่น */
.is-search-icon svg {
    fill: #666 !important;
    width: 18px !important;
    height: 18px !important;
}

/* ช่องค้นหา */
.is-search-input {
    border: 1px solid #dcdcdc !important;
    background: #fff !important;
}

.is-search-submit {
    width: 32px !important;          /* บังคับความกว้างกรอบแว่น */
    padding: 0 !important;           /* ไม่ใช้ padding มาคุมแล้ว */
    background: #f5f5f5 !important;
    border: 1px solid #dcdcdc !important;
    border-left: none !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
}