/* ---------------------------------------------------------------------------
   The header on phones and tablets (tools/mobile-nav.mjs builds it, nav.js runs
   it): the legend-diving.com copy's header in its burger mode
   (../legend-diving/src/live/header/header.css), at the widths where Avada's
   own menu turns into a burger. Wider screens keep Avada's header.

   Legend Diving Penida's colours, read off its Avada header; they are
   legend-diving.com's except the yellow, which stands where that site has
   its red Contact button and its blue open row:

     bar and drawer   #060607   (--awb-color8)
     muted label      #98939f   (--awb-color6)
     Contact, and     #fdb600   (the desktop bar's Contact button,
     the open row                `li#menu-item-3550`, and Avada's mobile
                                 active row, --awb-custom_color_4)
     text on yellow   #060607   live writes white on it, which is 1.8:1
--------------------------------------------------------------------------- */

.pnav { display: none; }

@media (max-width: 1024px) {
  /* An anchor lands under the bar, not behind it. */
  html { scroll-padding-top: 100px; }

  /* Avada's logo-and-menu row; the promo above it stays. */
  .pnav-avada { display: none !important; }

  /* STICKY: it is Avada's header's sibling, not its child, so the promo
     scrolls off and the bar stays. HIDDEN WHILE SCROLLING DOWN, back on the
     way up: nav.js sets `html[data-pnav-head="hidden"]` and the bar slides
     out of view, keeping its place in the flow. A keyboard focus inside it
     brings it back. Above everything else that is fixed (Avada's WhatsApp
     popup is 99990), so the open drawer covers it. */
  .pnav {
    --pnav-ink: #060607;
    --pnav-muted: #98939f;
    --pnav-white: #ffffff;
    --pnav-accent: #fdb600;
    --pnav-on-accent: #060607;
    --pnav-font: 'Barlow Semi Condensed', Arial, Helvetica, sans-serif;
    display: block;
    position: sticky; top: 0; z-index: 100001;
    width: 100%;
    transition: transform 250ms ease;
  }
  html[data-pnav-head='hidden'] .pnav { transform: translateY(-100%); }
  html[data-pnav-head='hidden'] .pnav:has(:focus-visible) { transform: none; }

  .pnav :where(ul) { margin: 0; padding: 0; list-style: none; }
  .pnav :where(li) { margin: 0; }
  .pnav :where(a) { color: inherit; text-decoration: none; }
  .pnav :where(img) { max-width: none; }
  .pnav :where(button) { font: inherit; margin: 0; }
  /* Avada colours every hovered link (`a:hover`), which outranks a single
     class: white on the black drawer. */
  .pnav-dwr__label:is(:hover, :focus, :active) { color: var(--pnav-white); }

  .pnav-sr {
    position: absolute !important;
    width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
  }

  /* ---- the bar ----------------------------------------------------------
     Everything vertically centred in 100px. `relative` is load-bearing: the
     burger and the drawer are positioned against it. */
  .pnav-bar {
    position: relative;
    height: 100px; padding-inline: 20px;
    display: flex; align-items: center;
    background: var(--pnav-ink);
  }
  .pnav-bar__logo { width: 127px; height: 45px; flex: none; display: flex; align-items: center; }
  .pnav-bar__logo img { display: block; width: 127px; height: 45px; object-fit: contain; }

  /* Contact, the desktop bar's yellow button. The burger sits at the right
     gutter, so the pill stops 54 short of it. */
  .pnav-pill {
    margin-left: auto; margin-right: 54px; flex: none;
    height: 40px; padding-inline: 16px;
    border-radius: 20px; background: var(--pnav-accent);
    display: flex; align-items: center;
    transition: filter 200ms ease-out;
  }
  .pnav-pill:hover { filter: brightness(0.9); }
  .pnav-pill__label {
    white-space: nowrap;
    font: 400 16px/24px var(--pnav-font); color: var(--pnav-on-accent);
  }
  /* Where the label does not fit between the logo and the burger: the
     smaller button, 13/16 at weight 500 — and where even that does not fit,
     none; the drawer has a Contact row (the script after the bar decides). */
  [data-pnav-pill='small'] .pnav-pill { height: 34px; padding-inline: 14px; }
  [data-pnav-pill='small'] .pnav-pill__label { font-size: 13px; line-height: 16px; font-weight: 500; }
  [data-pnav-pill='off'] .pnav-pill { display: none; }

  /* ---- the burger -------------------------------------------------------
     Three bars; open, the outer two meet in the middle and cross, the middle
     one fades. */
  .pnav-burger {
    display: block; position: absolute; right: 20px; top: 40px;
    width: 30px; height: 20px; padding: 0; border: 0; background: none; cursor: pointer;
  }
  .pnav-burger__bar {
    position: absolute; left: 0; width: 30px; height: 3px; border-radius: 1.5px;
    background: var(--pnav-white);
    transition: transform 220ms ease, opacity 160ms ease;
  }
  .pnav-burger__bar--top { top: 0; }
  .pnav-burger__bar--mid { top: 8.5px; }
  .pnav-burger__bar--bot { top: 17px; }
  .pnav-burger.is-open .pnav-burger__bar--top { transform: translateY(8.5px) rotate(45deg); }
  .pnav-burger.is-open .pnav-burger__bar--mid { opacity: 0; }
  .pnav-burger.is-open .pnav-burger__bar--bot { transform: translateY(-8.5px) rotate(-45deg); }

  /* ---- the drawer -------------------------------------------------------
     Hung under the bar rather than pushing the page, and as tall as the
     screen below it (`--pnav-dwr-h`, measured by nav.js), so it covers the
     page and the WhatsApp button; it scrolls inside itself. */
  .pnav-dwr {
    display: block;
    position: absolute; top: 100%; left: 0; right: 0; z-index: 40;
    height: var(--pnav-dwr-h, calc(100vh - 100px));
    overflow-y: auto; overscroll-behavior: contain;
    background: var(--pnav-ink);
    padding-block: 16px;
    /* `visibility` takes it out of the accessibility tree and hit testing;
       delayed so the fade finishes first. */
    opacity: 0; visibility: hidden; transform: translateY(-8px);
    transition: opacity 220ms ease, transform 220ms ease, visibility 0s linear 220ms;
  }
  .pnav-dwr[data-open] {
    opacity: 1; visibility: visible; transform: none;
    transition: opacity 220ms ease, transform 220ms ease, visibility 0s;
  }

  /* Each nested level fades and slides in as it opens, so opening a branch
     reads as the panel arriving rather than the rows below jumping down. */
  .pnav-dwr__panel { animation: pnav-dwr-in 200ms ease both; }
  .pnav-dwr__panel[hidden] { display: none; }
  @keyframes pnav-dwr-in {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: none; }
  }

  /* Rows 56 tall at the top level and 48 once nested; each level indents its
     label and its divider by 16 (`--pnav-inset`, set per row). */
  .pnav-dwr__row {
    position: relative; display: flex; align-items: center;
    height: 56px; padding-left: var(--pnav-inset); padding-right: 20px;
  }
  .pnav-dwr__row--sub { height: 48px; }

  /* The divider starts at the row's own indent and ends 20 from the right. */
  .pnav-dwr__row::after {
    content: ''; position: absolute; bottom: 0;
    left: var(--pnav-inset); right: 20px; height: 1px;
    background: rgba(255, 255, 255, 0.18);
  }
  .pnav-dwr__item:last-child > .pnav-dwr__row::after { background: none; }

  .pnav-dwr__label {
    flex: 1; min-width: 0; padding: 0; border: 0; background: none;
    display: flex; align-items: center;
    font: 400 16px/24px var(--pnav-font); letter-spacing: normal; text-transform: none;
    color: var(--pnav-white); text-align: left; cursor: pointer;
  }
  .pnav-dwr__label--none { color: var(--pnav-muted); cursor: default; }
  .pnav-dwr__label[aria-current='page'] { font-weight: 600; }

  .pnav-dwr__toggle {
    flex: none; display: flex; align-items: center; justify-content: flex-end;
    width: 44px; height: 100%; padding: 0; border: 0; background: none;
    color: var(--pnav-white); cursor: pointer;
  }
  /* Inside the label's button, at the right of the row. */
  .pnav-dwr__toggle--static { height: auto; margin-left: auto; cursor: inherit; }
  .pnav-dwr__caret { display: block; transition: transform 200ms ease; }

  /* The open row, in the yellow, without its divider. */
  .pnav-dwr__item[data-open] > .pnav-dwr__row { background: var(--pnav-accent); }
  .pnav-dwr__item[data-open] > .pnav-dwr__row::after { background: none; }
  .pnav-dwr__item[data-open] > .pnav-dwr__row :is(.pnav-dwr__label, .pnav-dwr__toggle) { color: var(--pnav-on-accent); }
  .pnav-dwr__item[data-open] > .pnav-dwr__row .pnav-dwr__caret { transform: rotate(180deg); }

  /* Flags, at the 4:3 WPML cuts them at. */
  .pnav-dwr__flag {
    flex: none;
    width: 20px; height: 15px;
    margin-right: 8px;
    border-radius: 2px;
    box-shadow: 0 0 0 1px rgb(0 0 0 / 0.18);
    object-fit: cover;
  }
}

@media (max-width: 1024px) and (prefers-reduced-motion: reduce) {
  .pnav { transition: none; }
  .pnav-dwr, .pnav-dwr__caret, .pnav-burger__bar { transition-duration: 1ms !important; }
  .pnav-dwr__panel { animation: none; }
}