/*=============================================
    Mobile Drawer — browning
    Widget: classes/widgets/Header/header.php (mobile_nav)
    Full-screen sheet: brand and close on one row, the menu below, the CTA
    and copyright pinned to the foot, and an oversized star watermark.

    The theme ships its own .mobile-nav__* rules in
    themes/browning/assets/css/bri-core-style.css — a 300px side panel.
    This file overrides them, so the conflicting properties are written with
    a doubled class (0,2,0) rather than relying on load order, which is not
    guaranteed between a theme stylesheet and a widget dependency.
    Loaded only where the header widget is used (get_style_depends).
=============================================*/

/* ============ Panel ============ */
.mobile-nav__panel.mobile-nav__panel {
    position: fixed;
    inset: 0;
    height: 100%;
    padding: 0;
    background: #1C3244;
    overflow-y: auto;
    overflow-x: hidden;
    /* a flex column keeps the foot at the bottom of a tall phone while still
       letting a long menu push it down */
    display: flex;
    flex-direction: column;
}

/* oversized eight-point star, bled off the bottom-right corner */
.mobile-nav__star {
    position: absolute;
    right: -14%;
    bottom: 7%;
    width: 62%;
    aspect-ratio: 1 / 1;
    pointer-events: none;
    z-index: 0;
}

/* ============ Top row ============ */
.mobile-nav__top {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 20px 22px 26px;
}

/* A flex column with nothing set to grow: the menu and the phone number stack
   tightly at the top and the slack falls below them, instead of the number
   drifting into the middle of the sheet. */
.mobile-nav__body {
    position: relative;
    z-index: 1;
    flex: 1 0 auto;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    padding: 0 22px;
}

.mobile-nav__body > * {
    flex: 0 0 auto;
}

.mobile-nav__foot {
    position: relative;
    z-index: 1;
    padding: 24px 22px 20px;
}

/* the theme pins this to the panel's top-right corner; here it is a flex
   sibling of the brand instead */
.mobile-nav__close.mobile-nav__close {
    position: static;
    flex: none;
    width: 34px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: 0;
    cursor: pointer;
    color: #ffffff;
    font-size: 20px;
    line-height: 1;
    transition: opacity .25s ease;
}

.mobile-nav__close:hover {
    opacity: .7;
}

.mobile-nav__brand.mobile-nav__brand {
    display: block;
    padding: 0;
}

.mobile-nav__brand img {
    width: 140px;
    max-width: 45vw;
    height: auto;
    display: block;
}

/* ============ Menu ============ */
.mobile-nav__list.mobile-nav__list {
    list-style: none;
    margin: 0;
    padding: 0;
    border-top: 0;
}

/* Rules sit *between* items only — nothing above the first or below the last,
   so the list reads as a run of headings rather than a boxed table. Written
   against the doubled class because the theme puts a border-bottom on every
   li and load order against a theme stylesheet is not guaranteed. */
.mobile-nav__list.mobile-nav__list > li {
    border-top: 0;
    border-bottom: 0;
}

.mobile-nav__list.mobile-nav__list > li + li {
    border-top: 1px solid rgba(255, 255, 255, .14);
}

.mobile-nav__item-row {
    display: flex;
    align-items: center;
}

.mobile-nav__list li a.mobile-nav__link,
.mobile-nav__list li a {
    display: block;
    flex: 1;
    padding: 16px 0;
    font-family: var(--thm-heading-font, 'Big Shoulders Display'), sans-serif;
    font-weight: 700;
    font-size: 21px;
    line-height: 28px;
    letter-spacing: .005em;
    color: #ffffff;
    text-decoration: none;
    transition: color .3s ease;
}

.mobile-nav__list li a:hover,
.mobile-nav__list li.current > .mobile-nav__item-row > a {
    color: var(--thm-primary, #c4a882);
}

/* accordion toggle: a bare chevron on the right edge, no block behind it */
.mobile-nav__sub-toggle.mobile-nav__sub-toggle {
    flex: none;
    width: 34px;
    height: 34px;
    align-self: center;
    background: transparent;
    border: 0;
    border-left: 0;
    cursor: pointer;
    position: relative;
}

/* The theme draws this pointing down (45deg) and flips it to 225deg when the
   accordion opens. Here it rests pointing right and drops to down on open.
   Doubled class on both: the theme's own rules are the same specificity, so
   without it the winner would come down to stylesheet order. */
.mobile-nav__sub-toggle.mobile-nav__sub-toggle::after {
    width: 7px;
    height: 7px;
    margin: -4px 0 0 -5px;
    border-right: 1.4px solid rgba(255, 255, 255, .55);
    border-bottom: 1.4px solid rgba(255, 255, 255, .55);
    transform: rotate(-45deg);
}

li.sub-open > .mobile-nav__item-row > .mobile-nav__sub-toggle.mobile-nav__sub-toggle::after {
    transform: rotate(45deg);
    margin: -6px 0 0 -4px;
}

/* submenus indent from the same left edge as the top level */
.mobile-nav__list .sub-menu li {
    border-bottom: 1px solid rgba(255, 255, 255, .08);
}

.mobile-nav__list .sub-menu li:last-child {
    border-bottom: 0;
}

.mobile-nav__list .sub-menu a.mobile-nav__link,
.mobile-nav__list .sub-menu a {
    padding-left: 18px;
    font-size: 15px;
}

.mobile-nav__list .sub-menu .sub-menu a {
    padding-left: 34px;
}

/* ============ Contact ============ */
.mobile-nav__contact.mobile-nav__contact {
    display: block;
    margin: 26px 0 0;
    padding: 0;
    font-size: 14px;
    line-height: 22px;
    color: rgba(244, 241, 234, .85);
    font-size: 18px;
    font-weight: 600;
}

/* Position comes from the Mobile Menu panel. Auto margins are what place it:
   in a flex column the free space is handed to them, so one auto margin
   pushes it to an end and two centre it in whatever is left below the menu. */
.mobile-nav__contact--middle.mobile-nav__contact--middle {
    margin-top: auto;
    margin-bottom: auto;
}

.mobile-nav__contact--top.mobile-nav__contact--top {
    margin-top: 26px;
    margin-bottom: 0;
}

.mobile-nav__contact--bottom.mobile-nav__contact--bottom {
    margin-top: auto;
    margin-bottom: 0;
}

.mobile-nav__contact-label {
    margin-right: 4px;
}

.mobile-nav__contact a {
    color: inherit;
    text-decoration: none;
    transition: color .25s ease;
}

.mobile-nav__contact a:hover {
    color: #ffffff;
}

/* ============ Foot ============ */
/* a flex column so the two buttons and the copyright space themselves off one
   gap instead of a stack of margins */
.mobile-nav__foot {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.mobile-nav__cta.mobile-nav__cta {
    display: flex;
    justify-content: center;
    width: 100%;
    margin: 0;
    padding: 17px 22px;
    font-weight: 700;
    font-size: 15px;
    letter-spacing: .06em;
    text-transform: uppercase;
    border-radius: 6px;
    white-space: normal;
    text-align: center;
}

.mobile-nav__cta:hover,
.mobile-nav__cta:focus-visible {
    transform: none;
}

/* the header's star reads as decoration next to a nav label; in a full-width
   block button it just pulls the label off centre */
.mobile-nav__cta .main-header__cta-icon {
    display: none;
}

/* ---- Phone, as the outlined twin of the CTA ---- */
.mobile-nav__phone-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    padding: 16px 22px;
    font-family: var(--thm-body-font, sans-serif);
    font-weight: 500;
    font-size: 15px;
    line-height: 1;
    color: #ffffff;
    text-decoration: none;
    background: transparent;
    border: 1px solid rgba(255, 255, 255, .38);
    border-radius: 6px;
    transition: background .25s ease, border-color .25s ease;
}

.mobile-nav__phone-btn:hover,
.mobile-nav__phone-btn:focus-visible {
    background: rgba(255, 255, 255, .08);
    border-color: rgba(255, 255, 255, .7);
    color: #ffffff;
}

.mobile-nav__phone-ico {
    flex: none;
    width: 16px;
    height: 16px;
}

.mobile-nav__copy {
    margin: 6px 0 0;
    text-align: center;
    font-size: 10px;
    line-height: 16px;
    letter-spacing: .02em;
    color: rgba(244, 241, 234, .4);
}

/* ============ Wider phones / tablets ============
   The sheet is full-bleed at every width it appears at, so this only eases
   the spacing and type up a little once there is room for it. */
@media (min-width: 480px) {
    .mobile-nav__top {
        padding: 26px 30px 30px;
    }

    .mobile-nav__body {
        padding: 0 30px;
    }

    .mobile-nav__foot {
        padding: 28px 30px 24px;
    }

    .mobile-nav__list li a {
        padding: 18px 0;
        font-size: 22px;
    }
}

@media (min-width: 768px) {
    .mobile-nav__top {
        padding: 30px 44px 34px;
    }

    .mobile-nav__body {
        padding: 0 24px;
    }

    .mobile-nav__foot {
        padding: 32px 24px 28px;
    }

    .mobile-nav__brand img {
        width: 170px;
    }

    .mobile-nav__list li a {
        padding: 20px 0;
        font-size: 25px;
    }


    /* full-bleed buttons look stranded on a tablet — both shrink to their
       content and centre, so they stay a matched pair */
    .mobile-nav__cta.mobile-nav__cta,
    .mobile-nav__phone-btn {
        width: auto;
        margin-inline: auto;
    }

    .mobile-nav__foot {
        align-items: center;
    }

    .mobile-nav__star {
        width: 46%;
        right: -8%;
    }
}