/*
 * Bespoke Selections - light mobile menu
 * Overrides the theme's dark mobile panel (style.css "Mobile nav").
 * Loaded after style.css so equal-specificity rules here win.
 */

.mobile-on .desktop-nav ul {
    background: #fff;
}

.mobile-on .desktop-nav > ul {
    border: 1px solid #E2E0DA;
    border-top: none;
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.08);
}

.mobile-on .desktop-nav ul li a {
    color: #4B4E53;
    border-bottom: 1px solid #ECEAE5;
}

.mobile-on .desktop-nav ul li a:hover,
.mobile-on .desktop-nav ul li a.active {
    background: #EFEEEA;
    color: #4B4E53;
}

/* sub menu (Catalogues) */
.mobile-on .desktop-nav ul li ul {
    border-bottom: 1px solid #ECEAE5;
}

.mobile-on .desktop-nav ul li .mn-sub {
    background: #F7F6F3;
}

.mobile-on .desktop-nav ul li .mn-sub li a {
    color: #4B4E53 !important;
    background: transparent;
}

.mobile-on .desktop-nav ul li .mn-sub li a:hover,
.mobile-on .desktop-nav ul li .mn-sub li a.active {
    background: #EFEEEA !important;
    color: #4B4E53 !important;
}

/* dropdown arrow: graphite instead of white */
.mobile-on .mn-has-sub > .mn-has-sub-icon,
.mobile-on .inner-nav ul li a:hover .mn-has-sub-icon,
.mobile-on .inner-nav ul li a.active .mn-has-sub-icon {
    border-color: rgba(75, 78, 83, 0.25) !important;
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="9px" height="5px"><path fill-rule="evenodd" fill="rgb(75, 78, 83)" d="M8.886,0.631 L8.336,0.117 C8.263,0.049 8.178,0.015 8.083,0.015 C7.988,0.015 7.903,0.049 7.830,0.117 L4.506,3.155 L1.183,0.117 C1.109,0.049 1.025,0.015 0.930,0.015 C0.834,0.015 0.750,0.049 0.677,0.117 L0.127,0.631 C0.053,0.699 0.017,0.778 0.017,0.867 C0.017,0.956 0.053,1.035 0.127,1.103 L4.253,4.892 C4.327,4.960 4.411,4.994 4.506,4.994 C4.602,4.994 4.686,4.960 4.759,4.892 L8.886,1.103 C8.959,1.035 8.996,0.956 8.996,0.867 C8.996,0.778 8.959,0.699 8.886,0.631 L8.886,0.631 Z"/></svg>') !important;
}

.mobile-on .js-opened > .mn-has-sub > .mn-has-sub-icon {
    border-color: rgba(75, 78, 83, 0.45) !important;
}

/* menu button: graphite, no fade when open */
.mobile-nav,
.mobile-nav:hover,
.mobile-nav.active {
    color: #4B4E53;
    opacity: 1;
}

.mobile-nav.active {
    background: #EFEEEA;
}

/* keyboard focus outline: graphite instead of the theme's green */
a:focus.focus-visible,
button:focus.focus-visible,
div:focus.focus-visible,
.mobile-nav:focus.focus-visible {
    -moz-outline: 2px dotted #4B4E53 !important;
    outline: 2px dotted #4B4E53 !important;
}
/* Hero banners: zoom out on phones - a shorter box crops less of the landscape image */
@media (max-width: 767.98px) {
    #home.home-section .min-height-100vh {
        min-height: 62vh !important;
    }

    /* home tagline sits above the scroll-down arrow instead of under it */
    #home h5.hs-line-5 {
        bottom: 52px !important;
    }

    #home .scroll-down-wrap {
        bottom: 4px;
    }
}

/* Site menu (also inline on the older pages; kept here so new pages get it automatically) */
.main-nav .inner-nav.site-nav ul li a {
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.main-nav .inner-nav.site-nav ul li a.active {
    font-weight: 600;
    -webkit-text-stroke: 0.4px currentColor;
}

@media (min-width: 1025px) {
    .main-nav .inner-nav.site-nav ul li a,
    .main-nav .inner-nav.site-nav ul li a:hover,
    .main-nav .inner-nav.site-nav ul li a.active {
        color: #4B4E53;
    }

    .main-nav .inner-nav.site-nav ul li {
        margin-left: 34px;
    }

    /* Catalogues dropdown: light panel */
    .main-nav .inner-nav.site-nav .mn-sub {
        width: 240px;
        background: #fff;
        border: 1px solid #E2E0DA;
        border-radius: 0;
        box-shadow: 0 10px 24px rgba(0, 0, 0, 0.06);
    }

    .main-nav .inner-nav.site-nav ul li .mn-sub li a {
        padding: 14px 18px;
        font-size: 14px;
        color: #4B4E53 !important;
        -webkit-text-stroke: 0;
    }

    .main-nav .inner-nav.site-nav ul li .mn-sub li a:hover,
    .main-nav .inner-nav.site-nav ul li .mn-sub li a.active {
        background: #EFEEEA;
        color: #4B4E53 !important;
    }
}

/* Compact bar after scrolling: the logo image has wide transparent margins (the lettering is
   ~40% of its height), so it can be taller than the 65px bar and still sit inside it */
@media (min-width: 1025px) {
    .nav-logo-wrap .logo.small-height img {
        height: 84px;
        max-height: none !important;
    }
}

@media (min-width: 1025px) and (max-width: 1279.98px) {
    .main-nav .inner-nav.site-nav ul li {
        margin-left: 20px;
    }

    .main-nav .inner-nav.site-nav ul li a {
        font-size: 14px;
        letter-spacing: 0.04em;
    }
}