/* ============================================================
   Hani Len — Header (announcement bar, utility row, mega-menu nav)
   Prefix: hl-
   ============================================================ */

/* Off-screen until keyboard-focused — lets keyboard users bypass the
   announcement bar/mega-menu on every page load without any visible change
   during normal browsing. */
.hl-skip-link {
  position: fixed; top: -60px; inset-inline-start: 16px; z-index: 1000;
  background: var(--navy); color: #fff; padding: 12px 22px; border-radius: 8px;
  font-family: var(--font-body); font-weight: 600; font-size: .95rem; text-decoration: none;
  transition: top .2s var(--ease-out);
}
.hl-skip-link:focus { top: 16px; }

/* Invisible skip-link jump target. Must stay out of normal flow: it sits
   between <header> and the hero inside .hl-viewport's 2-row grid
   (auto / minmax(0,1fr)) — as a normal in-flow child it became a 3rd grid
   item and took over the hero's 1fr row, shrinking the hero into a new
   implicit auto-height row. position:absolute removes it from grid
   placement entirely while keeping it focusable (display:none would not). */
#main-content { position: absolute; width: 0; height: 0; }

.hl-header { position: sticky; top: 0; z-index: 60; }
.hl-announce { background: var(--navy); }
.hl-announce .hl-marquee__row { padding: 9px 0; font-family: var(--font-body); font-size: .8125rem; font-weight: 500; letter-spacing: .11em; color: #fff; }
.hl-announce .hl-star { margin: 0 18px; }
.hl-utility { background: #fff; border-bottom: 1px solid var(--hairline); }
.hl-utility__inner { height: 76px; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; }
.hl-contact { display: flex; align-items: center; gap: 20px; }
.hl-contact a { display: inline-flex; align-items: center; gap: 7px; font-size: .8125rem; color: var(--ink); }
.hl-social { display: flex; gap: 14px; }
.hl-social a { color: var(--ink); display: inline-flex; transition: color .2s; }
.hl-social a:hover { color: var(--gold-deep); }
.hl-wordmark { display: flex; justify-content: center; }
.hl-wordmark img { height: 52px; width: auto; }
.hl-utility__right { display: flex; align-items: center; justify-content: flex-end; gap: 20px; }
.hl-findloc { display: inline-flex; align-items: center; gap: 7px; font-size: .8125rem; font-weight: 500; color: var(--ink); }
.hl-nav { background: #fff; border-bottom: 1px solid var(--hairline); }
.hl-nav__inner { display: flex; justify-content: space-between; align-items: center; height: 52px; }
.hl-nav a { font-family: var(--font-body); font-size: 20px; font-weight: 500; letter-spacing: .03em; color: var(--ink); transition: color .2s; }
.hl-nav a:hover { color: var(--gold-deep); }

/* ---- Treatments mega-menu ---------------------------------------- */
.hl-navitem { position: relative; display: flex; align-items: center; }
.hl-navitem__trigger { display: inline-flex; align-items: center; gap: 5px; }
.hl-navitem__chev { transition: transform .25s var(--ease-out, ease); margin-top: 2px; }
.hl-navitem:hover .hl-navitem__chev,
.hl-navitem:focus-within .hl-navitem__chev { transform: rotate(180deg); color: var(--gold-deep); }
.hl-megamenu {
  position: absolute; top: 100%; right: 0; z-index: 60;
  margin-top: 0; padding-top: 14px;
  opacity: 0; visibility: hidden; transform: translateY(8px);
  transition: opacity .22s var(--ease-out, ease), transform .22s var(--ease-out, ease), visibility .22s;
  pointer-events: none;
}
.hl-navitem:hover .hl-megamenu,
.hl-navitem:focus-within .hl-megamenu,
.hl-navitem:hover .hl-dropdown,
.hl-navitem:focus-within .hl-dropdown {
  opacity: 1; visibility: visible; transform: translateY(0); pointer-events: auto;
}
.hl-dropdown {
  position: absolute; top: 100%; right: 0; z-index: 60;
  margin-top: 0; padding-top: 14px;
  opacity: 0; visibility: hidden; transform: translateY(8px);
  transition: opacity .22s var(--ease-out, ease), transform .22s var(--ease-out, ease), visibility .22s;
  pointer-events: none;
}
.hl-dropdown__list {
  list-style: none; margin: 0; padding: 12px 0; min-width: 190px;
  display: flex; flex-direction: column;
  background: #fff; border: 1px solid var(--hairline);
  border-radius: 12px; box-shadow: var(--shadow-card, 0 18px 48px rgba(0,36,49,.14));
}
.hl-dropdown__list a {
  display: block; font-family: var(--font-body); font-size: 1rem; font-weight: 400;
  letter-spacing: normal; color: var(--ink); white-space: nowrap;
  padding: 9px 26px; transition: color .18s, background .18s;
}
.hl-dropdown__list a:hover { color: var(--gold-deep); background: var(--sand, #f0e7de); }
.hl-megamenu__grid {
  display: grid; grid-template-columns: repeat(4, minmax(160px, 1fr)); gap: 36px;
  background: #fff; border: 1px solid var(--hairline);
  border-radius: 12px; box-shadow: var(--shadow-card, 0 18px 48px rgba(0,36,49,.14));
  padding: 30px 36px;
}
.hl-megacol__title {
  font-family: var(--font-body); font-size: .78rem; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--gold-deep); padding-bottom: 12px; margin-bottom: 12px;
  border-bottom: 1px solid var(--hairline);
}
.hl-megacol__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 11px; }
.hl-megacol__list a {
  font-family: var(--font-body); font-size: 1rem; font-weight: 400;
  letter-spacing: normal; color: var(--ink); white-space: nowrap; transition: color .18s;
}
.hl-megacol__list a:hover { color: var(--gold-deep); }
.hl-burger { display: none; background: none; border: none; cursor: pointer; color: var(--ink); }
.hl-burger svg { overflow: visible; display: block; }
.hl-burger svg line { transform-origin: 50% 50%; transition: transform .3s var(--ease-out, ease), opacity .2s var(--ease-out, ease); }
.hl-burger.open svg line:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.hl-burger.open svg line:nth-child(2) { opacity: 0; }
.hl-burger.open svg line:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* ---- Responsive ---------------------------------------------------- */
@media (max-width: 900px) {
  .hl-findloc, .hl-contact { display: none; }
  .hl-burger { display: inline-flex; }
  .hl-utility__inner { grid-template-columns: auto 1fr auto; }
  .hl-utility__right { gap: 12px; }

  .hl-nav { display: none; border-bottom: none; }
  .hl-nav[data-open="1"] {
    display: block;
    background: #fff;
    border-bottom: 1px solid var(--hairline);
    box-shadow: var(--shadow-card);
  }
  .hl-nav[data-open="1"] .hl-nav__inner {
    display: block; height: auto; padding: 10px 4px 16px;
  }
  .hl-nav[data-open="1"] .hl-nav__inner > a,
  .hl-nav[data-open="1"] .hl-nav__inner > .hl-navitem {
    display: block; font-size: 1.05rem !important; padding: 15px 12px;
    border-bottom: 1px solid var(--hairline);
  }
  .hl-nav[data-open="1"] .hl-nav__inner > a:last-child,
  .hl-nav[data-open="1"] .hl-nav__inner > .hl-navitem:last-child { border-bottom: none; }
  .hl-nav[data-open="1"] .hl-navitem__trigger {
    justify-content: space-between; width: 100%; font-size: 1.05rem !important;
  }
  .hl-nav[data-open="1"] .hl-megamenu,
  .hl-nav[data-open="1"] .hl-dropdown {
    position: static; display: none; opacity: 1; visibility: visible; transform: none;
    pointer-events: auto; box-shadow: none; border: none; padding: 0; margin: 0;
    background: transparent;
  }
  .hl-nav[data-open="1"] .hl-navitem.open .hl-megamenu,
  .hl-nav[data-open="1"] .hl-navitem.open .hl-dropdown { display: block; padding: 12px 0 2px; }
  .hl-nav[data-open="1"] .hl-dropdown__list { background: transparent; border: none; box-shadow: none; padding: 0; }
  .hl-nav[data-open="1"] .hl-dropdown__list a { padding: 8px 12px; }
  .hl-nav[data-open="1"] .hl-navitem.open .hl-navitem__chev { transform: rotate(180deg); color: var(--gold-deep); }
  .hl-nav[data-open="1"] .hl-megamenu__grid { grid-template-columns: 1fr 1fr; gap: 18px 20px; }
}
@media (max-width: 560px) {
  .hl-utility__inner { height: 66px; }
  .hl-wordmark img { height: 46px !important; width: auto !important; }
  .hl-utility__right { gap: 10px; }
  .hl-utility__right .hl-btn--sm { padding: 10px 14px; font-size: .78rem; white-space: nowrap; }
  .hl-nav[data-open="1"] .hl-megamenu__grid { grid-template-columns: 1fr; }
}