/*
 * Mountain Diary — the header's layout (Site\Frame\SiteStyles), in three sections: the logo,
 * site name and motto on the left, at a fixed width; the main menu in the centre; search, colour
 * mode, language, messages, notifications and profile on the right. Colours come from the design
 * tokens, which the theme's header variables point at, so this file writes no colour values of
 * its own. The menus and icons are BuddyX's, under its own class names.
 */
/* stylelint-disable selector-class-pattern -- BuddyX's class names */

/* === HEADER BAR === */

.site-header {
    min-height: 0 !important;
}

/* The theme paints the bar from its header colour (the paper); a hairline
   replaces its drop shadow, the sticky header's included. */
.site-header-wrapper {
    box-shadow: none !important;
    border-bottom: 1px solid var(--md-border) !important;
}

/* Nav takes remaining space after branding */
#site-navigation {
    flex: 1 1 auto !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    min-width: 0 !important;
}

/* Desktop menu - centred in available space */
.buddyx-desktop-menu {
    flex: 1 1 auto !important;
    display: flex !important;
    justify-content: center !important;
}

.buddyx-desktop-menu #primary-menu {
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Menu items - desktop only */
@media (width >= 769px) {
    .buddyx-desktop-menu #primary-menu > li > a {
        white-space: nowrap !important;
        font-size: 17px !important;
        font-weight: 600 !important;
        letter-spacing: 0 !important;
        padding-left: 10px !important;
        padding-right: 10px !important;
    }

    .buddyx-desktop-menu #primary-menu .sub-menu a {
        font-size: 16px !important;
        font-weight: 600 !important;
        letter-spacing: 0 !important;
    }
}

/* Desktop icons - right side, no shrink */
.buddypress-icons-wrapper:not(.buddyx-mobile-icon) {
    flex-shrink: 0 !important;
    margin-left: 0 !important;
}

/* === SECTION 1: BRANDING === */

.site-branding {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    position: relative !important;
    gap: 6px !important;
    padding: 8px 0 6px !important;
    max-width: none !important;
    flex-shrink: 0 !important;
}

.site-branding .site-logo-wrapper {
    flex-shrink: 0 !important;
}

.site-logo-wrapper a {
    display: block !important;
    line-height: 0 !important;
}

/* Logo - 70 px high, 45 px on phones. The name and the motto beside it are
   centred on it, which keeps the mountains level with the middle of the text.
   The theme shows either the logo or the Dark Mode Logo (Customizer, Site
   Identity) by switching display, so no rule here sets display. */
.site-branding .custom-logo,
.site-branding .site-logo-wrapper .custom-logo,
.site-branding .site-logo-wrapper a img,
img.custom-logo {
    height: 70px !important;
    width: auto !important;
    max-height: 70px !important;
}

/* Site name + motto column */
.site-branding .site-branding-inner {
    display: flex !important;
    flex-direction: column !important;
    gap: 0 !important;
    min-width: 0 !important;
}

/* Site name - set as design D sets it: the brand family of the design tokens,
   semibold, a touch tight. The link takes all of it from the title, whatever
   the theme's own rules for the link say. */
.site-branding .site-title {
    font-family: var(--md-font-brand) !important;
    font-size: 26px !important;
    font-weight: 600 !important;
    letter-spacing: -0.01em !important;
    line-height: 1.2 !important;
    margin: 0 !important;
    padding: 0 !important;
    white-space: nowrap !important;
}

.site-branding .site-title a {
    font: inherit !important;
    letter-spacing: inherit !important;
}

/* Motto + author wrapper (split into two lines by header-branding.js); its colour
   is the theme's tagline colour. */
.site-branding .site-description {
    position: static !important;
    font-size: 13px !important;
    line-height: 1.35 !important;
    opacity: 1 !important;
    margin: 2px 0 0 !important;
    padding: 0 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    bottom: auto !important;
    left: auto !important;
}

/* Motto */
.site-branding .md-quote-text {
    display: block !important;
    font-style: italic !important;
    font-size: 12.5px !important;
    line-height: 1.35 !important;
}

/* Author */
.site-branding .md-quote-author {
    display: block !important;
    font-size: 11px !important;
    line-height: 1.35 !important;
    margin-top: 0 !important;
    font-style: normal !important;
}

/* === SECTION 3: DESKTOP ICONS ===
   Plain icons in the menu colour, as the theme draws them - no boxes. Each
   control is the same 36 px square with its glyph in the middle, 4 px apart,
   so glyphs of different widths (search, sun, flag, envelope, bell) keep one
   even rhythm; the theme's own side margins on them are dropped for it. */
@media (width >= 769px) {
    .buddypress-icons-wrapper:not(.buddyx-mobile-icon),
    .buddypress-icons-wrapper:not(.buddyx-mobile-icon) .desktop-icons,
    .buddypress-icons-wrapper:not(.buddyx-mobile-icon) .menu-icons-wrapper {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        gap: 4px !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    .buddypress-icons-wrapper:not(.buddyx-mobile-icon) :is(.menu-icons-wrapper .search, .bx-color-mode-toggle, .md-lang-switcher, .bp-msg, .user-notifications) {
        margin: 0 !important;
        padding: 0 !important;
    }

    .buddypress-icons-wrapper:not(.buddyx-mobile-icon) :is(.menu-icons-wrapper .search-icon, .bx-color-mode-toggle__btn, .md-lang-btn, .bp-msg > a, .user-notifications > a) {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 36px !important;
        height: 36px !important;
        margin: 0 !important;
        padding: 0 !important;
        box-sizing: border-box !important;
    }

    /* Count badges sit on the corner of the glyph, not of its square */
    .buddypress-icons-wrapper:not(.buddyx-mobile-icon) :is(.bp-msg, .user-notifications) sup {
        top: 1px !important;
        right: 2px !important;
    }

    .buddypress-icons-wrapper:not(.buddyx-mobile-icon) .desktop-icons {
        order: 1 !important;
    }

    .buddypress-icons-wrapper:not(.buddyx-mobile-icon) .desktop-icons .menu-icons-wrapper {
        order: 1 !important;
    }

    .buddypress-icons-wrapper:not(.buddyx-mobile-icon) .desktop-icons .md-lang-switcher {
        order: 2 !important;
    }

    .buddypress-icons-wrapper:not(.buddyx-mobile-icon) .bp-msg {
        order: 2 !important;
    }

    .buddypress-icons-wrapper:not(.buddyx-mobile-icon) .user-notifications {
        order: 3 !important;
    }

    /* The profile keeps a little more room after the icons */
    .buddypress-icons-wrapper:not(.buddyx-mobile-icon) .user-link-wrap {
        order: 4 !important;
        margin-left: 10px !important;
    }
}

/* Count badges on the message and notification icons: the theme writes white
   text on the accent, which is too pale on the lighter accent of dark mode. */
body .buddypress-icons-wrapper :is(.bp-msg, .user-notifications) sup {
    color: var(--md-on-accent);
}

/* === DROP-DOWN PANELS ===
   Sub-menus, the notification list and the profile menu float above the
   paper of the header in the drop-down tone, with a hairline and a shadow.
   The arrow tip the theme draws above a panel takes the same colour. */
@media (width >= 769px) {
    .nav--toggle-sub ul ul,
    .main-navigation #user-profile-menu,
    .main-navigation .bp-header-submenu {
        background: var(--md-dropdown) !important;
        border: 1px solid var(--md-border) !important;
        box-shadow: var(--md-shadow) !important;
    }

    .nav--toggle-sub ul.user-profile-menu .sub-menu::before,
    .menu-item--has-toggle > ul.sub-menu::before,
    .bp-header-submenu::before,
    .user-profile-menu::before {
        border-color: var(--md-dropdown) var(--md-dropdown) transparent transparent !important;
    }
}

/* === MOBILE === */
@media (width <= 768px) {
    /* Smaller branding on mobile */
    .site-branding .md-quote-text {
        font-size: 11px !important;
    }

    .site-branding .md-quote-author {
        font-size: 10px !important;
    }

    /* The site name gets 21 px, or less on a phone too narrow for that. The
       column beside the logo is a container that takes the room the icons
       leave, and "Mountain Diary" in this face is 7.33 times as wide as its
       size, so 13.5 % of the column's width is the size that just fits. The
       name therefore never pushes the icons onto a second row, as a fixed size
       did on phones under 370 px. Browsers without container units keep 18 px. */
    .site-branding .site-branding-inner {
        flex: 1 1 0 !important;
        container-type: inline-size;
    }

    .site-branding .site-title {
        font-size: 18px !important;
        font-size: min(21px, 13.5cqi) !important;
    }

    .site-branding .custom-logo,
    .site-branding .site-logo-wrapper .custom-logo,
    .site-branding .site-logo-wrapper a img,
    img.custom-logo {
        height: 45px !important;
        max-height: 45px !important;
    }

    /* Login / Join us - icon only, hide text */
    .bp-icon-wrap .btn-login,
    .bp-icon-wrap .btn-register {
        font-size: 0 !important;
    }

    .bp-icon-wrap .btn-login .fa,
    .bp-icon-wrap .btn-register .fa {
        font-size: 16px !important;
    }

    /* Mobile slide menu - rounded left corners */
    .primary-menu-container.buddyx-mobile-menu {
        border-top-left-radius: 16px !important;
        border-bottom-left-radius: 16px !important;
        overflow: hidden !important;
    }

    /* Mobile menu heading - the dark band, height matched to the header (81 px) */
    .mobile-menu-heading {
        background-color: var(--md-band) !important;
        height: 81px !important;
        padding-top: 17px !important;
        padding-bottom: 17px !important;
        min-height: 0 !important;
        box-sizing: border-box !important;
    }

    .mobile-menu-heading :is(.menu-title, .menu-close) {
        color: var(--md-on-band) !important;
    }

    /* Menu title - match user name size, no uppercase */
    .mobile-menu-heading .menu-title {
        font-size: 18px !important;
        text-transform: none !important;
    }

    /* Sub-menu toggle in the slide menu: a quiet outline, not a filled button */
    .buddyx-mobile-menu .dropdown-toggle {
        background-color: transparent !important;
        border-color: var(--md-border) !important;
        border-radius: var(--md-radius-sm) !important;
        color: var(--md-text) !important;
    }

    /* Reset desktop menu styles for mobile - undo flex centering */
    .buddyx-desktop-menu {
        flex: none !important;
        display: none !important;
    }

    /* Mobile menu should use its own default styles */
    .buddyx-mobile-menu {
        display: block !important;
    }

    .buddyx-mobile-menu #primary-menu {
        display: block !important;
        flex-wrap: unset !important;
        justify-content: unset !important;
    }

    .buddyx-mobile-menu #primary-menu > li > a {
        font-size: unset !important;
        padding-left: unset !important;
        padding-right: unset !important;
        white-space: unset !important;
    }

    /* Nav should not force flex on mobile */
    #site-navigation {
        flex: unset !important;
        justify-content: unset !important;
    }
}

/* === BROWSER TRANSLATION FIX ===
   A browser's own page translation (Chrome, Edge) wraps translated words in
   font elements; display: contents keeps them from breaking the header layout. */
.site-header font,
.site-header font[style],
#site-navigation font,
#site-navigation font[style],
/* stylelint-disable-next-line no-descending-specificity -- the order of the snippet, which the cascade keeps */
.main-navigation font {
    display: contents !important;
}

.buddyx-desktop-menu .primary-menu-container {
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
}