/**
 * Giai đoạn 2 - Header Luật Ánh Dương
 * Toàn bộ trong #masthead (.hd-topbar + .hd-hdr). Prefix hd- để không đụng theme.
 * Ghim bằng CSS position:sticky trên #masthead (jquery.sticky đã gỡ ở footer.php).
 * @package hd
 */

#masthead{
  --hdh-bg:#faf8f4;
  --hdh-surface:#ffffff;
  --hdh-text:#20243a;
  --hdh-text-2:#474c63;
  --hdh-text-3:#6f7388;
  --hdh-line:#e7dfd1;
  --hdh-accent:#ecab14;
  --hdh-accent-text:#8a5e00;
  --hdh-accent-contrast:#23262e;
  --hdh-serif:"Poppins",-apple-system,BlinkMacSystemFont,"Segoe UI","Ubuntu",Arial,sans-serif;
  --hdh-sans:"Poppins",-apple-system,BlinkMacSystemFont,"Segoe UI","Ubuntu",Arial,sans-serif;
}

/* ---- ghim + gỡ style header cũ (selector có #masthead nên luôn thắng theme) ---- */
#masthead.site-header{
  position:sticky;top:0;z-index:50;
  background:transparent;border:0;box-shadow:none;
}
.admin-bar #masthead.site-header{top:32px}
@media screen and (max-width:782px){.admin-bar #masthead.site-header{top:46px}}

#masthead *,#masthead *::before,#masthead *::after{box-sizing:border-box}
#masthead .hd-hdr-wrap{width:min(1200px, 100% - 2.5rem);margin-inline:auto;display:flex;align-items:center;gap:1.5rem}

/* ---- top bar ---- */
.hd-topbar{background:var(--hdh-bg);border-bottom:1px solid var(--hdh-line);font-family:var(--hdh-sans);font-size:.8125rem}
.hd-topbar .hd-hdr-wrap{min-height:42px;justify-content:space-between}
.hd-topbar-left{display:flex;align-items:center;gap:1.5rem;color:var(--hdh-text-2);flex-wrap:wrap}
.hd-topbar-left a{display:inline-flex;align-items:center;gap:.45rem;color:inherit;text-decoration:none}
.hd-topbar-left a:hover{color:var(--hdh-accent-text)}
.hd-topbar-left svg{width:14px;height:14px;color:var(--hdh-accent-text);flex:none}
.hd-topbar-phone strong{font-weight:600;letter-spacing:.01em}
.hd-topbar-hours{color:var(--hdh-text-3)}
.hd-topbar-right{display:flex;align-items:center;gap:.35rem}
.hd-topbar-right a{width:30px;height:30px;display:grid;place-items:center;border-radius:7px;color:var(--hdh-text-3);transition:background .18s,color .18s}
.hd-topbar-right a:hover{background:#f2ece1;color:var(--hdh-accent-text)}
.hd-topbar-right svg{width:15px;height:15px}
@media (max-width:820px){.hd-topbar-hide{display:none}}

/* ---- header chính ---- */
.hd-hdr{
  position:relative;
  background:var(--hdh-bg);
  background:color-mix(in srgb, var(--hdh-bg) 92%, transparent);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  border-bottom:1px solid var(--hdh-line);
  font-family:var(--hdh-sans);
  transition:box-shadow .2s ease;
}
.hd-hdr.is-scrolled{box-shadow:0 10px 26px -18px rgba(31,35,58,.5)}
.hd-hdr .hd-hdr-wrap{min-height:74px;padding-block:.7rem}

/* brand */
.hd-brand{display:flex;align-items:center;gap:.7rem;flex:none;text-decoration:none;color:var(--hdh-text)}
.hd-brand--img img{max-height:56px;width:auto;display:block}
.hd-brand-mark{width:38px;height:29px;flex:none;color:var(--hdh-accent)}
.hd-brand-text{display:flex;flex-direction:column;line-height:1}
.hd-brand-text b{font-family:var(--hdh-serif);font-weight:700;font-size:1.3rem;letter-spacing:.01em;color:var(--hdh-text)}
.hd-brand-text span{font-size:.62rem;font-weight:600;letter-spacing:.28em;text-transform:uppercase;color:var(--hdh-text-3);margin-top:.3rem}

/* nav */
.hd-hdr-nav{margin-left:auto}
.hd-hdr-menu{list-style:none;margin:0;padding:0;display:flex;align-items:center;gap:.15rem}
.hd-hdr-menu li{position:relative}
.hd-hdr-menu a{
  display:flex;align-items:center;gap:.3rem;padding:.6rem .85rem;border-radius:8px;
  font-size:13px;font-weight:600;color:var(--hdh-text-2);text-decoration:none;
  transition:color .16s,background .16s;white-space:nowrap;
}
.hd-hdr-menu a:hover,
.hd-hdr-menu .current-menu-item>a,
.hd-hdr-menu .current_page_item>a,
.hd-hdr-menu .current-menu-ancestor>a,
.hd-hdr-menu .is-active>a,
.hd-hdr-menu .active>a{color:var(--hdh-text);background:#f2ece1}
.hd-hdr-menu .menu-item-has-children>a::after{
  content:"";width:6px;height:6px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;
  transform:translateY(-2px) rotate(45deg);opacity:.55;flex:none;
}

/* submenu (desktop) */
.hd-hdr-menu .sub-menu{
  list-style:none;margin:0;padding:.4rem;position:absolute;top:calc(100% + 6px);left:0;min-width:230px;
  background:var(--hdh-surface);border:1px solid var(--hdh-line);border-radius:10px;
  box-shadow:0 18px 38px -18px rgba(31,35,58,.32);
  opacity:0;visibility:hidden;transform:translateY(6px);transition:opacity .16s ease,transform .16s ease,visibility .16s;
  z-index:20;
}
.hd-hdr-menu li:hover>.sub-menu,.hd-hdr-menu li:focus-within>.sub-menu{opacity:1;visibility:visible;transform:none}
.hd-hdr-menu .sub-menu a{font-weight:400;white-space:normal}

/* cấp 3 trở đi: mở sang bên phải cấp 2 thay vì xổ xuống */
.hd-hdr-menu .sub-menu .sub-menu{top:-.4rem;left:calc(100% + 6px);transform:translateX(6px)}
.hd-hdr-menu .sub-menu .menu-item-has-children>a::after{transform:translateX(1px) rotate(-45deg)}

/* actions */
.hd-hdr-actions{display:flex;align-items:center;gap:1rem;flex:none;margin-left:.5rem}
.hd-hdr-tel{display:inline-flex;align-items:center;gap:.5rem;font-weight:600;font-size:.92rem;color:var(--hdh-text);text-decoration:none;white-space:nowrap}
.hd-hdr-tel svg{width:16px;height:16px;color:var(--hdh-accent-text)}
.hd-hdr-cta{
  display:inline-flex;align-items:center;padding:.7rem 1.25rem;border-radius:8px;
  background:var(--hdh-accent);color:var(--hdh-accent-contrast);font-weight:600;font-size:.875rem;
  text-decoration:none;border:1px solid transparent;transition:transform .15s ease,background .2s ease;white-space:nowrap;
}
.hd-hdr-cta:hover{background:color-mix(in srgb, var(--hdh-accent) 85%, #fff);transform:translateY(-1px);color:var(--hdh-accent-contrast)}

/* burger */
.hd-burger{display:none;width:42px;height:42px;border:1px solid var(--hdh-line);border-radius:9px;background:var(--hdh-surface);cursor:pointer;padding:0;position:relative}
.hd-burger span{position:absolute;left:11px;right:11px;height:2px;background:var(--hdh-text);border-radius:2px;transition:transform .2s ease,opacity .2s ease}
.hd-burger span:nth-child(1){top:14px}
.hd-burger span:nth-child(2){top:20px}
.hd-burger span:nth-child(3){top:26px}
.hd-hdr.is-open .hd-burger span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.hd-hdr.is-open .hd-burger span:nth-child(2){opacity:0}
.hd-hdr.is-open .hd-burger span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}

.hd-sub-toggle{display:none}

:where(#masthead a,#masthead button):focus-visible{outline:2px solid var(--hdh-accent);outline-offset:2px;border-radius:6px}

/* ---- mobile ---- */
@media (max-width:1000px){
  .hd-hdr-tel span{display:none}
  .hd-hdr-tel{width:42px;height:42px;justify-content:center;border:1px solid var(--hdh-line);border-radius:9px}
  .hd-hdr-cta{display:none}
  .hd-burger{display:block}

  .hd-hdr-nav{
    position:absolute;left:0;right:0;top:100%;
    background:var(--hdh-surface);border-bottom:1px solid var(--hdh-line);
    box-shadow:0 22px 40px -22px rgba(31,35,58,.4);
    max-height:0;overflow:hidden;visibility:hidden;transition:max-height .28s ease,visibility .28s;
    margin-left:0;
  }
  .hd-hdr.is-open .hd-hdr-nav{max-height:min(78vh,620px);overflow-y:auto;visibility:visible}

  .hd-hdr-menu{flex-direction:column;align-items:stretch;gap:0;width:min(1200px,100% - 2.5rem);margin-inline:auto;padding-block:.5rem}
  .hd-hdr-menu>li{border-bottom:1px solid var(--hdh-line)}
  .hd-hdr-menu>li:last-child{border-bottom:0}
  .hd-hdr-menu a{padding:.95rem .4rem;font-size:1rem;border-radius:0}
  .hd-hdr-menu a:hover,.hd-hdr-menu .current-menu-item>a,.hd-hdr-menu .is-active>a,.hd-hdr-menu .active>a{background:transparent;color:var(--hdh-accent-text)}
  .hd-hdr-menu .menu-item-has-children>a::after{display:none}

  .hd-hdr-menu .menu-item-has-children{display:flex;flex-wrap:wrap;align-items:center}
  .hd-hdr-menu .menu-item-has-children>a{flex:1}
  .hd-sub-toggle{
    display:grid;place-items:center;width:40px;height:40px;flex:none;
    background:transparent;border:0;border-radius:8px;cursor:pointer;color:var(--hdh-text-3);
  }
  .hd-sub-toggle::before{content:"";width:8px;height:8px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:translateY(-2px) rotate(45deg);transition:transform .2s ease}
  .hd-sub-toggle[aria-expanded="true"]::before{transform:translateY(2px) rotate(-135deg)}

  .hd-hdr-menu .sub-menu{
    position:static;opacity:1;visibility:visible;transform:none;box-shadow:none;border:0;
    min-width:0;width:100%;padding:0 0 .5rem;background:transparent;
    max-height:0;overflow:hidden;transition:max-height .25s ease;
  }
  .hd-hdr-menu .menu-item-has-children.is-open>.sub-menu{max-height:600px}
  .hd-hdr-menu .sub-menu a{padding:.7rem .4rem .7rem 1rem;color:var(--hdh-text-2)}
  .hd-hdr-menu .sub-menu .sub-menu{transform:none;padding-left:.6rem}
}

@media (prefers-reduced-motion:reduce){
  .hd-hdr,.hd-hdr-nav,.hd-hdr-menu .sub-menu,.hd-burger span,.hd-sub-toggle::before{transition-duration:.001ms !important}
}