/* ══════════════════════════════════════════════════════════════
   VIHOKNEWS — เมนูหลัก: dropdown (เดสก์ท็อป 992px ขึ้นไป) และ accordion (ต่ำกว่า 992px)
   ไฟล์นี้อยู่ที่ /wp-content/themes/vihoknews-child/css/vk-dropdown.css และโหลดจาก header.php ของ Child (ต่อจาก vk-theme.css)
   (ใช้ตัวแปร --vihok-* จาก vk-theme.css และมีค่าสำรองในตัวเผื่อตัวแปรหาย)
   ══════════════════════════════════════════════════════════════ */

/* ปุ่มหัวข้อกลุ่ม: ต้องสู้กับกฎ button{...!important} ทั่วไปของ Additional CSS
   (ไม่เช่นนั้นจะกลายเป็นปุ่มสีเหลืองตัวหนังสือดำ) */
.headernav__list .headernav__btn,
.headernav__list .headernav__btn:hover,
.headernav__list .headernav__btn:focus {
  background: none !important;
  border: 0 !important;
  border-radius: 0 !important;
  padding: 0 !important;
  font-family: inherit !important;
  font-weight: inherit !important;
  line-height: inherit !important;
  cursor: pointer;
}

/* เปิดแผงเมื่อโฟกัสด้วยคีย์บอร์ด (ต้องใช้ !important เพราะ jQuery .toggle()
   ใน theme-script.js ใส่ inline style display:none ไว้) */
.headernav__list:focus-within > .headersubnav {
  display: block !important;
}
.headernav__btn:focus-visible {
  outline: 2px solid var(--vihok-yellow, #FFC700);
  outline-offset: 3px;
}

/* แผงเมนูย่อย: ธีมดำ-เหลือง (เดิมเป็นสีเทา #677176 ของธีมต้นฉบับ) */
.headersubnav__arrow {
  border-color: transparent transparent var(--vihok-yellow, #FFC700) !important;
}
.headersubnav__list {
  background-color: var(--vihok-card-bg, #1E1E1E) !important;
  color: var(--vihok-text-main, #FFFFFF) !important;
  border-bottom: 1px solid rgba(255, 199, 0, 0.35) !important;
}
.headersubnav__list:hover {
  background-color: var(--vihok-hover, #B8860B) !important;
  color: #FFFFFF !important;
}
.headersubnav__list:hover i {
  color: #FFFFFF !important;
}

/* ══════════════════════════════════════════════════════════════
   เมนูมือถือ / แท็บเล็ตแนวตั้ง (ต่ำกว่า 992px): กลุ่มกดเพื่อขยาย (accordion)
   class .vk-js ถูกใส่โดยสคริปต์ใน header.php ถ้าสคริปต์ไม่ทำงาน รายการย่อยจะแสดงเปิดไว้ทั้งหมด
   ══════════════════════════════════════════════════════════════ */
.vk-mgroup {
  float: left;
  width: 100%;
}
.vk-mgroup::after {
  content: "";
  display: table;
  clear: both;
}
.vk-mgroup__btn {
  position: relative;
  cursor: pointer;
}
.vk-mgroup__btn:focus-visible {
  outline: 2px solid var(--vihok-yellow, #FFC700);
  outline-offset: -2px;
}
.vk-mgroup__chv {
  position: absolute;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
  transition: transform 0.2s ease;
}
.vk-mgroup.is-open .vk-mgroup__chv {
  transform: translateY(-50%) rotate(180deg);
}
.vk-mgroup__sub {
  clear: both;
}
.vk-js .vk-mgroup__sub {
  display: none;
}
.vk-js .vk-mgroup.is-open .vk-mgroup__sub {
  display: block;
}
.vk-mgroup__sub a {
  display: block;
}
.vk-msub__item {
  padding: 11px 16px 11px 46px;
  font-size: 13px;
  background-color: var(--vihok-card-bg, #1E1E1E);
  border-bottom: 1px solid rgba(255, 199, 0, 0.35);
}
.vk-msub__item:hover {
  background-color: var(--vihok-hover, #B8860B);
}
.vk-msub__item i {
  margin-right: 10px;
}
.vk-msub__item:hover i {
  color: #FFFFFF !important;
}

/* ══════════════════════════════════════════════════════════════
   ช่องว่างเมนูหลักแนวนอน (เดสก์ท็อป 992px ขึ้นไป): ทำให้แคบลง
   ปรับตัวเลข 8px ด้านล่างได้ (ยิ่งน้อยยิ่งชิด: ลอง 4px / 6px / 10px)
   ไม่กระทบเมนูมือถือ/แท็บเล็ตแนวตั้ง (accordion)
   ══════════════════════════════════════════════════════════════ */
@media (min-width: 992px) {
  .headerbottom__nav .headernav__list {
    width: auto !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 8px !important;
    padding-right: 8px !important;
  }
  .headerbottom__nav .headernav__list .text--icon {
    margin-right: 4px !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  .headerbottom__nav .headernav__list .text--name {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
}