/**
 * PJD Directory - Modern nav style ([pjd_nav], pjd_nav_style = modern).
 *
 * The Modern bar's layout + brand look, loaded on top of pjd-nav.css (the base sheet, which
 * owns the mega panel, the mobile-overlay mechanics AND the shared search-overlay pill).
 * ALL colour comes from the --pjd-* palette tokens (Settings > Site Setup > Brand palette),
 * so Modern recolours per site. NO font-family is set here - the wordmark's typeface is the
 * site/theme default (inherited). Everything is scoped under .pjd-nav--modern, so Classic is
 * untouched.
 *
 * Base rules this overrides (pjd-nav.css): .pjd-nav is already display:flex; .pjd-nav__logo-wrap
 * is absolutely-centred for Classic (un-centred here); .pjd-nav__links has flex:1 (relaxed here
 * so margin-left:auto can push the links right). The search OVERLAY (the pill you type into) is
 * styled in the base sheet, shared by both nav styles - only the search BUTTON (the bar trigger)
 * is a Modern element, styled below.
 */

/* ─── Bar: logo left, links right ───────────────────────────────────────────── */

.pjd-nav--modern {
    display: flex;
    align-items: center;
}

/* ─── Brand block (logo image + wordmark) ───────────────────────────────────── */
/* The brand link keeps .pjd-nav__logo-wrap (JS hook) AND carries .pjd-nav__brand. */

.pjd-nav--modern .pjd-nav__brand {
    display: flex;
    align-items: center;
    gap: 10px;
}

/* Un-centre the logo wrap: Classic absolutely-centres it (pjd-nav.css:94); Modern wants it
   in normal flow at the left so the brand reads logo-then-wordmark. */
.pjd-nav--modern .pjd-nav__logo-wrap {
    position: static;
    transform: none;
    left: auto;
}

/* Wordmark: navy from the palette. NO font-family here - the serif is the site's own default
   (inherited), so each site keeps its own type. Size + weight are baked layout defaults. */
.pjd-nav--modern .pjd-nav__wordmark {
    display: inline-block;
    line-height: 1.1;
    color: var(--pjd-navy);
    font-size: 26px;
    font-weight: 500;
    letter-spacing: 0.01em;
}

/* ─── Links: pushed to the right ────────────────────────────────────────────── */
/* margin-left:auto pushes the links group to the right edge; the base flex:1 (pjd-nav.css:65)
   would stretch it and defeat that, so relax to flex:0 1 auto. */

.pjd-nav--modern .pjd-nav__links {
    flex: 0 1 auto;
    margin-left: auto;
}

.pjd-nav--modern .pjd-nav__menu,
.pjd-nav--modern .pjd-nav__menu li {
    list-style: none;
    margin: 0;
    padding: 0;
}

/* The single (un-split) menu as a horizontal row. */
.pjd-nav--modern .pjd-nav__menu {
    display: flex;
    align-items: center;
    gap: 34px;
}

/* Top links + the "Places to Stay" mega trigger, styled identically. */
.pjd-nav--modern .pjd-nav__link,
.pjd-nav--modern .pjd-nav__trigger {
    color: var(--pjd-navy);
    font-size: 16px;
    font-weight: 600;
    letter-spacing: 0.01em;
}

.pjd-nav--modern .pjd-nav__link:hover,
.pjd-nav--modern .pjd-nav__trigger:hover {
    color: var(--pjd-oxblood);
}

/* Active page -> oxblood (the walker emits .is-current on the current item + its ancestors). */
.pjd-nav--modern .pjd-nav__item.is-current > .pjd-nav__link,
.pjd-nav--modern .pjd-nav__item.is-current > .pjd-nav__trigger {
    color: var(--pjd-oxblood);
    font-weight: 700;
}

.pjd-nav--modern .pjd-nav__chevron {
    opacity: 0.55;
}

/* ─── Search button (the bar trigger): a soft navy-tint circle ──────────────── */
/* The overlay this opens is styled in the base sheet (shared by both nav styles); only this
   bar trigger is a Modern element. */

.pjd-nav--modern .pjd-nav__search-btn {
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: var(--pjd-navy-5);
    color: var(--pjd-navy);
    margin-left: 22px;
    transition: background 0.15s ease, color 0.15s ease;
}

.pjd-nav--modern .pjd-nav__search-btn:hover {
    background: var(--pjd-navy);
    color: #fff;
}

/* ─── Mobile (max-width 1023px) ─────────────────────────────────────────────── */

@media (max-width: 1023px) {
    /* Keep the bar inside the screen edge so the hamburger never clips. */
    .pjd-nav--modern {
        box-sizing: border-box;
        padding-right: 16px;
    }
    /* Drop the wordmark, keep the logo. (A logo-less Modern site would show an empty brand
       here - not WPAW's case, which has a logo image.) */
    .pjd-nav--modern .pjd-nav__wordmark {
        display: none;
    }
}