/*! Hybe Off-canvas Menu v1.0 (desktop) */

.hoc,
.hoc-toggle{
  --hoc-bg: #0e1418;
  --hoc-text: #ffffff;
  --hoc-accent: #5cc0ea;
  --hoc-width: clamp(340px, 40vw, 520px);
}

/* Astra HTML element ห่อด้วย <p> — ตัด margin ออก */
.ast-builder-html-element > p{ margin: 0; }
.ast-builder-html-element > p:empty{ display: none; }

/* ---------- ปุ่มแฮมเบอร์เกอร์ ---------- */
button.hoc-toggle,
button.hoc-toggle:hover,
button.hoc-toggle:focus,
button.hoc-toggle:active{
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; margin: 0; padding: 0; min-height: 0;
  border: 0; border-radius: 8px; box-shadow: none; background: transparent;
  color: var(--hoc-text); cursor: pointer; line-height: 1; vertical-align: middle;
}
button.hoc-toggle:focus-visible{ outline: 2px solid var(--hoc-accent); outline-offset: 2px; }
.hoc-bars{ display: flex; flex-direction: column; gap: 7px; width: 30px; }
.hoc-bars i{ display: block; height: 3px; border-radius: 2px; background: currentColor; transition: transform .25s ease; }
.hoc-toggle:hover .hoc-bars i:nth-child(2){ transform: translateX(5px); }

/* ---------- แผงเมนู ---------- */
html.hoc-lock{ overflow: hidden; }

.hoc{ position: fixed; inset: 0; z-index: 100000; }
.hoc[hidden]{ display: none; }

.hoc__overlay{
  position: absolute; inset: 0; background: rgba(5,9,12,.62);
  opacity: 0; transition: opacity .35s ease; cursor: pointer;
}
.hoc__panel{
  position: absolute; top: 0; bottom: 0; left: 0; width: var(--hoc-width);
  display: flex; flex-direction: column;
  padding: 22px 48px 48px; overflow-y: auto; overscroll-behavior: contain;
  background: var(--hoc-bg); color: var(--hoc-text);
  box-shadow: 24px 0 60px rgba(0,0,0,.35);
  transform: translateX(-100%); transition: transform .35s cubic-bezier(.22,.61,.36,1);
}
.hoc.is-open .hoc__overlay{ opacity: 1; }
.hoc.is-open .hoc__panel{ transform: none; }

.hoc button.hoc__close,
.hoc button.hoc__close:hover,
.hoc button.hoc__close:focus,
.hoc button.hoc__close:active{
  display: grid; place-items: center; flex: 0 0 auto;
  width: 48px; height: 48px; margin: 0 0 0 -10px; padding: 0; min-height: 0;
  border: 0; border-radius: 8px; box-shadow: none; background: transparent;
  color: var(--hoc-text); cursor: pointer; line-height: 1;
}
.hoc button.hoc__close:hover{ color: var(--hoc-accent); }
.hoc button.hoc__close:focus-visible{ outline: 2px solid var(--hoc-accent); outline-offset: 2px; }

/* ---------- รายการเมนู ---------- */
.hoc .hoc__menu,
.hoc .hoc__menu .sub-menu{ list-style: none; margin: 0; padding: 0; }
.hoc .hoc__menu{ margin-top: 44px; }
.hoc .hoc__menu > li{
  margin: 0; opacity: 0; transform: translateX(-14px);
  transition: opacity .35s ease, transform .35s ease;
}
.hoc.is-open .hoc__menu > li{ opacity: 1; transform: none; }
.hoc.is-open .hoc__menu > li:nth-child(1){ transition-delay: .08s; }
.hoc.is-open .hoc__menu > li:nth-child(2){ transition-delay: .11s; }
.hoc.is-open .hoc__menu > li:nth-child(3){ transition-delay: .14s; }
.hoc.is-open .hoc__menu > li:nth-child(4){ transition-delay: .17s; }
.hoc.is-open .hoc__menu > li:nth-child(5){ transition-delay: .20s; }
.hoc.is-open .hoc__menu > li:nth-child(6){ transition-delay: .23s; }
.hoc.is-open .hoc__menu > li:nth-child(7){ transition-delay: .26s; }
.hoc.is-open .hoc__menu > li:nth-child(8){ transition-delay: .29s; }
.hoc.is-open .hoc__menu > li:nth-child(n+9){ transition-delay: .32s; }

.hoc .hoc__menu a,
.hoc .hoc__menu a:visited{
  display: block; padding: 13px 0;
  font-size: 20px; font-weight: 600; line-height: 1.3; letter-spacing: .01em; text-transform: uppercase;
  color: var(--hoc-text); text-decoration: none; transition: color .2s;
}
.hoc .hoc__menu a:hover,
.hoc .hoc__menu a:focus{ color: var(--hoc-accent); }
.hoc .hoc__menu a:focus-visible{ outline: 2px solid var(--hoc-accent); outline-offset: 4px; border-radius: 2px; }
.hoc .hoc__menu .current-menu-item > a,
.hoc .hoc__menu .current-menu-ancestor > a{ color: var(--hoc-accent); }

/* เมนูย่อย (ถ้ามี) */
.hoc .hoc__menu .sub-menu{ padding: 0 0 10px 18px; margin-top: -4px; border-left: 1px solid rgba(255,255,255,.12); }
.hoc .hoc__menu .sub-menu a{
  padding: 7px 0; font-size: 15px; font-weight: 400; text-transform: none; letter-spacing: 0;
  color: rgba(255,255,255,.7);
}

.hoc__empty{ margin-top: 40px; font-size: 15px; color: rgba(255,255,255,.7); }

@media (prefers-reduced-motion: reduce){
  .hoc__overlay, .hoc__panel, .hoc .hoc__menu > li, .hoc-bars i{ transition: none !important; }
}

/* แสดงเฉพาะ desktop (ตาม breakpoint ของ Astra) */
@media (max-width: 921px){
  .hoc-toggle, .hoc{ display: none !important; }
}