/*
    Site menu: the mega panel, and the mobile drawer.

    Both are additions. Nothing here restyles the existing navbar or its
    dropdowns — a menu item that was not set to open as a mega panel renders
    exactly the markup and picks up exactly the CSS it did before. The rules
    below only ever apply inside .mega-panel or .site-drawer.
*/

:root {
    --menu-brand: #ef8821;
    --menu-blue:  #3c59a7;
    --menu-ink:   #16202b;
    --menu-soft:  #5e6b7a;
    --menu-line:  #e6e9ee;
}

/* ------------------------------------------------------------ mega panel */

/*
 | The panel is anchored to the navbar, not to the item that opens it, so it
 | can span the bar. Both halves are needed: the theme sets position on the
 | nav items, and without a positioned .main-nav the panel would resolve
 | against the viewport instead.
 */
.main-nav { position: relative; }

/*
 | Matched to the theme's own selector rather than forced.
 |
 | style.css carries `.main-nav .navbar .navbar-nav .nav-item { position:
 | relative }`, four classes deep, which beats anything shorter no matter what
 | order the files load in — a panel told to span the bar was still measuring
 | itself against the one item that opened it, and came out 174px wide with
 | 18px columns. This is that selector plus the marker class, so it wins on
 | specificity and !important stays out of it.
 */
.main-nav .navbar .navbar-nav .nav-item.mega-parent { position: static; }

.mega-panel {
    position: absolute;
    left: 0;
    top: 100%;
    z-index: 1000;

    /*
     | Sized to its columns rather than stretched across the bar.
     |
     | left:0 with right:0 made the panel as wide as the navbar — 1440px for
     | thirteen short trek names, which left each column a third of the screen
     | to hold two words. Columns now have a fixed, readable width and the
     | panel is as wide as they need, capped so it stays on screen.
     */
    width: max-content;
    max-width: min(860px, calc(100vw - 32px));

    display: flex;
    gap: 22px;
    padding: 18px 22px;

    background: #fff;
    border-top: 3px solid var(--menu-brand);
    border-radius: 0 0 10px 10px;
    box-shadow: 0 18px 40px -22px rgba(22, 32, 43, .45);

    /*
     | Hidden by visibility rather than display, so the panel has a measured
     | size before it opens. A display:none panel has no layout, and the images
     | inside it would have nothing to size against until first hover.
     */
    visibility: hidden;
    opacity: 0;
    transform: translateY(-6px);
    transition: opacity .16s ease, transform .16s ease, visibility 0s linear .16s;
}

.navbar-nav > li.mega-parent:hover > .mega-panel,
.navbar-nav > li.mega-parent:focus-within > .mega-panel,
.navbar-nav > li.mega-parent.is-open > .mega-panel {
    visibility: visible;
    opacity: 1;
    transform: none;
    transition-delay: 0s;
}

.mega-cols {
    display: grid;
    gap: 14px 22px;
    /* A column is as wide as a trek name needs and no wider. */
    grid-template-columns: repeat(var(--mega-cols, 3), minmax(140px, 185px));
}
.mega-panel[data-cols="1"] { --mega-cols: 1; }
.mega-panel[data-cols="2"] { --mega-cols: 2; }
.mega-panel[data-cols="3"] { --mega-cols: 3; }
.mega-panel[data-cols="4"] { --mega-cols: 4; }

.mega-col { min-width: 0; }

/* One heading with its links flowing across the columns. */
.mega-flow { flex: 1; min-width: 0; }
.mega-flow .mega-head { margin-bottom: 8px; }
.mega-list--flow {
    column-gap: 22px;
    /* Each link stays whole rather than splitting across a column break. */
    -webkit-column-break-inside: avoid;
}
.mega-list--flow li { break-inside: avoid; }
/*
 | A flowed list has no natural width — max-content on a multi-column box
 | resolves to whatever is left, which pushed the panel out to the cap. Given
 | an explicit width, three columns of trek names come out around 240px each.
 */
.mega-panel.is-flow { width: min(680px, calc(100vw - 32px)); }
.mega-panel.is-flow.has-media { width: min(830px, calc(100vw - 32px)); }

.main-nav .navbar .navbar-nav .nav-item .mega-head {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12.8px;
    font-weight: 700;
    line-height: 1.35;
    color: var(--menu-ink);
    text-decoration: none;
    padding-bottom: 6px;
    margin-bottom: 5px;
    border-bottom: 1px solid var(--menu-line);
}
.main-nav .navbar .navbar-nav .nav-item .mega-head:hover { color: var(--menu-brand); }

.mega-list { list-style: none; margin: 0; padding: 0; }
.mega-list li + li { margin-top: 2px; }
.main-nav .navbar .navbar-nav .nav-item .mega-list a {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 3px 0;
    font-size: 12.4px;
    line-height: 1.4;
    color: var(--menu-soft);
    text-decoration: none;
}
.main-nav .navbar .navbar-nav .nav-item .mega-list a:hover { color: var(--menu-brand); }

/*
 | The theme draws an animated underline on every nav anchor with a ::before.
 | Inside a panel that is a stray line under each of twelve links, so it is
 | switched off here and nowhere else.
 */
.main-nav .navbar .navbar-nav .nav-item .mega-panel a::before { display: none; }

.mega-media {
    flex: 0 0 160px;
    align-self: stretch;
    border-radius: 8px;
    overflow: hidden;
    background: #eef1f5;
}
.mega-media img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* A narrow window cannot carry four columns and a photograph. */
@media (max-width: 1400px) {
    .mega-panel[data-cols="4"] { --mega-cols: 3; }
    .mega-media { flex-basis: 160px; }
}
@media (max-width: 1280px) {
    .mega-panel.has-media .mega-media { display: none; }
}

/* ----------------------------------------------------------------- badges */

/*
 | Top pick, New, Best seller.
 |
 | Small and quiet on purpose. A badge earns attention by being rare, so it is
 | sized to sit inside the line rather than beside it, and nothing here grows
 | the row it is on.
 */
.menu-badge {
    display: inline-block;
    flex-shrink: 0;
    padding: 1px 6px;
    border-radius: 3px;
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    line-height: 1.5;
    white-space: nowrap;
    vertical-align: middle;

    background: color-mix(in srgb, var(--menu-brand) 14%, transparent);
    color: #a5540b;
}
.menu-badge--blue  { background: color-mix(in srgb, var(--menu-blue) 13%, transparent);  color: #2c4585; }
.menu-badge--green { background: color-mix(in srgb, #2e9e4f 15%, transparent); color: #226b39; }

/* On a top-level item the badge rides above the word, out of the baseline. */
.navbar-nav > .nav-item > a > .menu-badge {
    margin-left: 5px;
    position: relative;
    top: -1px;
}

/* ---------------------------------------------------------- drawer button */

/*
 | 1199px is where the old plugin took over, kept so the point at which the
 | menu changes shape does not move.
 */
.drawer-toggle { display: none; }

@media (max-width: 1199px) {
    .drawer-toggle {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 9px;

        /* 44px: the smallest target most people can hit reliably. */
        min-width: 44px;
        min-height: 44px;
        padding: 9px 14px;

        background: #fff;
        border: 1px solid var(--menu-line);
        border-radius: 8px;
        color: var(--menu-ink);
        font: inherit;
        font-size: 14px;
        font-weight: 600;
        cursor: pointer;
    }
    .drawer-toggle:hover { border-color: var(--menu-brand); color: var(--menu-brand); }

    .drawer-toggle .bars { display: block; width: 18px; height: 12px; position: relative; }
    .drawer-toggle .bars::before,
    .drawer-toggle .bars::after,
    .drawer-toggle .bars span {
        content: '';
        position: absolute;
        left: 0; right: 0;
        height: 2px;
        border-radius: 2px;
        background: currentColor;
    }
    .drawer-toggle .bars::before { top: 0; }
    .drawer-toggle .bars span    { top: 5px; }
    .drawer-toggle .bars::after  { bottom: 0; }
}

/* --------------------------------------------------------- mobile drawer */

.site-drawer,
.site-drawer__veil { display: none; }

@media (max-width: 1199px) {

    /*
     | The old plugin cloned the navbar into a strip above the page and stacked
     | every level of it open. On a menu this size that is a very long column
     | of identical links with no sense of where you are in it.
     |
     | This is a panel instead: one screen, one level at a time, each branch
     | closed until asked for, and the two things people actually came to do —
     | call and message — pinned where a thumb rests.
     */
    .site-drawer__veil {
        display: block;
        position: fixed;
        inset: 0;
        z-index: 1090;
        background: rgba(16, 24, 33, .5);
        opacity: 0;
        pointer-events: none;
        transition: opacity .2s ease;
    }
    .site-drawer__veil.is-open { opacity: 1; pointer-events: auto; }

    .site-drawer {
        display: flex;
        flex-direction: column;
        position: fixed;
        top: 0;
        right: 0;
        bottom: 0;
        z-index: 1100;

        width: min(88vw, 380px);
        background: #fff;
        box-shadow: -16px 0 40px -20px rgba(16, 24, 33, .5);

        transform: translateX(100%);
        transition: transform .24s cubic-bezier(.22, .61, .36, 1);
    }
    .site-drawer.is-open { transform: none; }

    /* Someone who asked for less motion gets the panel without the slide. */
    @media (prefers-reduced-motion: reduce) {
        .site-drawer, .site-drawer__veil { transition: none; }
    }

    .site-drawer__top {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        padding: 14px 16px;
        border-bottom: 1px solid var(--menu-line);
        flex-shrink: 0;
    }
    .site-drawer__title { font-size: 15px; font-weight: 700; color: var(--menu-ink); }
    .site-drawer__close {
        min-width: 44px; min-height: 44px;
        border: 0; background: none; cursor: pointer;
        font-size: 26px; line-height: 1; color: var(--menu-soft);
    }
    .site-drawer__close:hover { color: var(--menu-ink); }

    /* The only scrolling region, so the header and the actions stay put. */
    .site-drawer__body {
        flex: 1;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior: contain;
    }

    .site-drawer ul { list-style: none; margin: 0; padding: 0; }

    .site-drawer .d-row {
        display: flex;
        align-items: stretch;
        border-bottom: 1px solid var(--menu-line);
    }
    .site-drawer .d-row > a {
        flex: 1;
        padding: 14px 16px;
        font-size: 15px;
        font-weight: 600;
        color: var(--menu-ink);
        text-decoration: none;
        min-height: 48px;
        display: flex;
        align-items: center;
    }
    .site-drawer .d-row > a:active { background: #f4f6f9; }

    /* Badges come through with the label; give them room on a touch row. */
    .site-drawer .d-row > a .menu-badge { margin-left: 8px; font-size: 9px; }

    /*
     | A separate control from the link, because a branch that is also a page
     | has two different things you might want, and one tap cannot mean both.
     */
    .site-drawer .d-toggle {
        flex: 0 0 52px;
        border: 0;
        border-left: 1px solid var(--menu-line);
        background: none;
        cursor: pointer;
        color: var(--menu-soft);
        font-size: 13px;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .site-drawer .d-toggle i {
        display: block;
        width: 9px; height: 9px;
        border-right: 2px solid currentColor;
        border-bottom: 2px solid currentColor;
        transform: rotate(45deg) translate(-2px, -2px);
        transition: transform .18s ease;
    }
    .site-drawer .d-row.is-open .d-toggle { color: var(--menu-brand); }
    .site-drawer .d-row.is-open .d-toggle i { transform: rotate(-135deg) translate(-3px, -3px); }

    .site-drawer .d-sub { display: none; background: #f7f9fb; }
    .site-drawer .d-sub.is-open { display: block; }

    .site-drawer .d-sub .d-row > a {
        padding-left: 30px;
        font-weight: 500;
        font-size: 14.5px;
        color: var(--menu-soft);
    }
    .site-drawer .d-sub .d-sub .d-row > a { padding-left: 46px; font-size: 14px; }

    .site-drawer__actions {
        flex-shrink: 0;
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 10px;
        padding: 14px 16px;
        border-top: 1px solid var(--menu-line);
        /* Clear of the home indicator on a phone with no physical button. */
        padding-bottom: calc(14px + env(safe-area-inset-bottom, 0px));
    }
    .site-drawer__actions a {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        min-height: 46px;
        border-radius: 8px;
        font-size: 14.5px;
        font-weight: 600;
        text-decoration: none;
    }
    .site-drawer__actions .act-call { background: var(--menu-blue); color: #fff; }
    .site-drawer__actions .act-chat { background: #25d366; color: #fff; }

    /* The page must not scroll behind an open panel. */
    body.drawer-open { overflow: hidden; }

    /*
     | The old plugin's own bar, retired. Its script is no longer called, but a
     | cached copy of it should not be able to put a second menu on the page.
     */
    .mean-bar, .mean-nav { display: none !important; }
}