/* =========================================================
   VORRO CUSTOMIZATION CONTRACT
   This is the safe owner-editable stylesheet.
   ========================================================= */
:root {
    --vorro-accent: #56616b;
    --vorro-accent-hover: #66727d;
    --vorro-nav-glass: rgba(255,255,255,.65);
    --vorro-nav-glass-scrolled: rgba(255,255,255,.76);
    --vorro-header-max-width: 1380px;
    --vorro-logo-max-width: 142px;
    --vorro-site-name-display: inline-block; /* use none if the logo already contains the site name */

    /* Optional icon overrides. Leave commented to use Vorro's bundled icons.
       Local example:    url(../../../images/my-icons/search.svg)
       Absolute example: url(https://example.com/icons/search.svg)

    --vorro-icon-search: url(https://example.com/icons/search.svg);
    --vorro-icon-user: url(https://example.com/icons/user.svg);
    --vorro-icon-chat: url(https://example.com/icons/chat.svg);
    --vorro-icon-home: url(https://example.com/icons/home.svg);
    --vorro-icon-stats: url(https://example.com/icons/stats.svg);
    --vorro-icon-forum-on: url(https://example.com/icons/forum-on.svg);
    --vorro-icon-forum-off: url(https://example.com/icons/forum-off.svg);
    --vorro-icon-forum-locked: url(https://example.com/icons/forum-locked.svg);
    --vorro-icon-forum-link: url(https://example.com/icons/forum-link.svg);
    */
}


/* Per-forum icon example. Forum rows expose data-fid.
.vorro-forum-row[data-fid="2"] .forum_status::before {
    --vorro-icon-chat: url(https://example.com/icons/forum-2.svg);
}
*/

/* =========================================================
   VORRO LIGHT V1.7.7 — HEADER REBUILD FROM ORIGINAL V1.6.5

   Important MyBB/Vorro structure note:
   #header is intentionally display:contents in the original theme. Therefore
   the actual persistent viewport bar must be #logo.vorro-appbar, not the
   .vorro-site-header wrapper. This keeps the original DOM contract intact and
   avoids the V1.7.4–V1.7.6 positioning regression.
   ========================================================= */

html {
    scroll-padding-top: 88px;
}

/* Keep the original wrapper semantics; it deliberately does not own a box. */
html body #header.vorro-site-header {
    display: contents !important;
}

/* The COMPLETE horizontal app bar follows the viewport. */
html body .vorro-site-header #logo.vorro-appbar {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    height: 72px !important;
    min-height: 72px !important;
    z-index: 1100 !important;
    box-sizing: border-box !important;
    margin: 0 !important;
    padding: 0 !important;

    /* Top-of-page state: flat, crisp, visibly separated from content. */
    background: #ffffff !important;
    border: 0 !important;
    border-bottom: 1px solid #d8dfe4 !important;
    box-shadow: 0 1px 0 rgba(24,31,38,.025) !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    transition:
        background-color .18s ease,
        border-color .18s ease,
        box-shadow .18s ease,
        backdrop-filter .18s ease,
        -webkit-backdrop-filter .18s ease !important;
}

/* Scrolled state: glass applies to the WHOLE app bar, not the menu island. */
html body .vorro-site-header #logo.vorro-appbar.vorro-scrolled {
    background: rgba(248,250,252,.72) !important;
    border-bottom-color: rgba(176,188,197,.58) !important;
    box-shadow:
        0 12px 32px rgba(27,34,41,.10),
        inset 0 1px 0 rgba(255,255,255,.74) !important;
    -webkit-backdrop-filter: blur(22px) saturate(165%) !important;
    backdrop-filter: blur(22px) saturate(165%) !important;
}

/* Fixed positioning removes the bar from normal flow; restore its space. */
html body #container > #content {
    padding-top: 100px !important; /* 72px bar + 28px content breathing room */
}

/* Three-zone desktop composition: brand | navigation | account/actions. */
html body .vorro-site-header .vorro-nav-shell {
    width: min(var(--vorro-header-max-width, 1380px), calc(100% - 32px)) !important;
    max-width: var(--vorro-header-max-width, 1380px) !important;
    height: 72px !important;
    min-height: 72px !important;
    margin: 0 auto !important;
    padding: 0 4px !important;
    display: flex !important;
    align-items: center !important;
    gap: 0 !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
}

/* Brand gets enough room for a real site title instead of VonSE... */
html body .vorro-brand {
    display: inline-flex !important;
    align-items: center !important;
    gap: 10px !important;
    flex: 0 1 270px !important;
    max-width: 270px !important;
    min-width: 0 !important;
    height: 42px !important;
    padding: 0 22px 0 0 !important;
    margin: 0 10px 0 0 !important;
    border-right: 1px solid #e2e7eb !important;
    text-decoration: none !important;
}
html body .vorro-brand .vorro-brand-logo {
    flex: 0 0 34px !important;
    width: 34px !important;
    height: 34px !important;
    max-width: 34px !important;
    max-height: 34px !important;
    object-fit: contain !important;
}
html body .vorro-brand .vorro-site-name {
    display: inline-block !important;
    min-width: 0 !important;
    max-width: 210px !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    color: #20272d !important;
    font-size: 14px !important;
    font-weight: 800 !important;
    line-height: 1.15 !important;
}

/* Navigation stays FLAT: no rounded island, no nested glass. */
html body .vorro-primary-nav {
    display: flex !important;
    align-items: center !important;
    align-self: stretch !important;
    flex: 1 1 auto !important;
    min-width: 0 !important;
    height: 72px !important;
    padding: 0 8px !important;
    gap: 1px !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}
html body .vorro-primary-nav > a,
html body .vorro-primary-nav > li > a,
html body .vorro-primary-nav li a {
    position: relative !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    height: 40px !important;
    min-height: 40px !important;
    padding: 0 11px !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    color: #59636d !important;
    font-size: 12.5px !important;
    font-weight: 700 !important;
    line-height: 1 !important;
    white-space: nowrap !important;
    text-decoration: none !important;
    transform: none !important;
}
html body .vorro-primary-nav > a::after,
html body .vorro-primary-nav > li > a::after,
html body .vorro-primary-nav li a::after,
html body .vorro-primary-nav .vorro-nav-home::after {
    content: "" !important;
    position: absolute !important;
    left: 11px !important;
    right: 11px !important;
    bottom: 3px !important;
    width: auto !important;
    height: 2px !important;
    border-radius: 999px !important;
    background: transparent !important;
    opacity: 1 !important;
}
html body .vorro-primary-nav > a:hover,
html body .vorro-primary-nav > li > a:hover,
html body .vorro-primary-nav li a:hover,
html body .vorro-primary-nav > a:focus-visible,
html body .vorro-primary-nav > li > a:focus-visible,
html body .vorro-primary-nav li a:focus-visible {
    color: #20272d !important;
    background: transparent !important;
}
html body .vorro-primary-nav > a:hover::after,
html body .vorro-primary-nav > li > a:hover::after,
html body .vorro-primary-nav li a:hover::after,
html body .vorro-primary-nav > a:focus-visible::after,
html body .vorro-primary-nav > li > a:focus-visible::after,
html body .vorro-primary-nav li a:focus-visible::after {
    background: #98a3ac !important;
}

/* Clear zone separator before utility/account controls. */
html body .vorro-header-actions {
    margin-left: auto !important;
    padding-left: 18px !important;
    border-left: 1px solid #e2e7eb !important;
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    flex: 0 0 auto !important;
    min-width: 0 !important;
}

/* Dividers soften slightly once the whole bar becomes glass. */
html body #logo.vorro-scrolled .vorro-brand,
html body #logo.vorro-scrolled .vorro-header-actions {
    border-color: rgba(150,164,175,.28) !important;
}

/* Keep title visible longer; hide secondary nav items before sacrificing brand. */
@media (max-width: 1280px) {
    html body .vorro-brand {
        flex-basis: 220px !important;
        max-width: 220px !important;
        padding-right: 16px !important;
        margin-right: 6px !important;
    }
    html body .vorro-brand .vorro-site-name {
        display: inline-block !important;
        max-width: 165px !important;
    }
    html body .vorro-site-header .vorro-nav-shell {
        width: calc(100% - 24px) !important;
    }
}

@media (max-width: 1180px) {
    html body .vorro-primary-nav a.portal,
    html body .vorro-primary-nav a.calendar {
        display: none !important;
    }
}

@media (max-width: 1080px) {
    html body .vorro-brand {
        flex: 0 0 auto !important;
        max-width: none !important;
        padding-right: 16px !important;
    }
    html body .vorro-brand .vorro-site-name {
        display: none !important;
    }
}

@media (max-width: 980px) {
    html body .vorro-primary-nav a.memberlist {
        display: none !important;
    }
}

@media (max-width: 860px) {
    html { scroll-padding-top: 76px; }
    html body .vorro-site-header #logo.vorro-appbar,
    html body .vorro-site-header #logo.vorro-appbar.vorro-scrolled {
        height: 64px !important;
        min-height: 64px !important;
    }
    html body #container > #content {
        padding-top: 82px !important; /* 64px bar + 18px content breathing room */
    }
    html body .vorro-site-header .vorro-nav-shell {
        width: calc(100% - 20px) !important;
        height: 64px !important;
        min-height: 64px !important;
        padding: 0 2px !important;
    }
    html body .vorro-primary-nav {
        display: none !important;
    }
    html body .vorro-mobile-menu {
        display: block !important;
    }
    html body .vorro-brand {
        height: 38px !important;
        padding-right: 0 !important;
        margin-right: 0 !important;
        border-right: 0 !important;
    }
    html body .vorro-brand .vorro-brand-logo {
        width: 31px !important;
        height: 31px !important;
        max-width: 31px !important;
        max-height: 31px !important;
    }
    html body .vorro-header-actions {
        padding-left: 0 !important;
        border-left: 0 !important;
        gap: 7px !important;
    }
}

@media (max-width: 560px) {
    html body .vorro-site-header .vorro-nav-shell {
        width: calc(100% - 12px) !important;
    }
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    html body .vorro-site-header #logo.vorro-appbar.vorro-scrolled {
        background: rgba(248,250,252,.96) !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    html body .vorro-site-header #logo.vorro-appbar {
        transition: none !important;
    }
}

/* =========================================================
   VORRO LIGHT V1.7.8 — CORE AJAX TOAST RESTORATION

   MyBB 1.8.41's rating.js already sends rating success/error feedback through
   $.jGrowl(). Older Vorro CSS had lost the core jGrowl positioning rules,
   which left those notifications in normal document flow at the bottom of
   the page. Restore the toast layer here and style it for the fixed Vorro bar.
   This applies to all MyBB jGrowl feedback, not only thread ratings.
   ========================================================= */
html body .jGrowl {
    position: fixed !important;
    z-index: 1500 !important;
    width: min(360px, calc(100vw - 32px)) !important;
    max-width: calc(100vw - 32px) !important;
    color: #252b31 !important;
    font-family: inherit !important;
    font-size: 13px !important;
    line-height: 1.45 !important;
    pointer-events: none !important;
}
html body .jGrowl.top-right {
    top: 88px !important; /* 72px fixed header + 16px breathing room */
    right: 16px !important;
    bottom: auto !important;
    left: auto !important;
}
html body .jGrowl.top-left {
    top: 88px !important;
    left: 16px !important;
    right: auto !important;
    bottom: auto !important;
}
html body .jGrowl.bottom-right {
    right: 16px !important;
    bottom: 16px !important;
    top: auto !important;
    left: auto !important;
}
html body .jGrowl.bottom-left {
    left: 16px !important;
    bottom: 16px !important;
    top: auto !important;
    right: auto !important;
}
html body .jGrowl.center {
    top: 88px !important;
    left: 50% !important;
    right: auto !important;
    width: min(420px, calc(100vw - 32px)) !important;
    transform: translateX(-50%) !important;
}
html body .jGrowl .jGrowl-notification,
html body .jGrowl .jGrowl-closer {
    position: relative !important;
    box-sizing: border-box !important;
    width: 100% !important;
    min-height: 0 !important;
    margin: 0 0 10px !important;
    padding: 12px 40px 12px 14px !important;
    border: 1px solid rgba(199,208,215,.92) !important;
    border-left-width: 4px !important;
    border-radius: 12px !important;
    background: rgba(255,255,255,.96) !important;
    color: #252b31 !important;
    box-shadow: 0 14px 34px rgba(26,34,41,.16) !important;
    -webkit-backdrop-filter: blur(16px) saturate(145%) !important;
    backdrop-filter: blur(16px) saturate(145%) !important;
    filter: none !important;
    text-align: left !important;
    word-break: normal !important;
    overflow-wrap: anywhere !important;
    pointer-events: auto !important;
}
html body .jGrowl .jGrowl-notification.jgrowl_error {
    border-left-color: #c94a57 !important;
    background: rgba(255,250,250,.97) !important;
    color: #63232b !important;
}
html body .jGrowl .jGrowl-notification.jgrowl_success {
    border-left-color: #3f8a64 !important;
    background: rgba(249,253,250,.97) !important;
    color: #24573d !important;
}
html body .jGrowl .jGrowl-notification.jgrowl_process,
html body .jGrowl .jGrowl-closer {
    border-left-color: #b6852f !important;
    background: rgba(255,252,245,.97) !important;
    color: #684b17 !important;
}
html body .jGrowl .jGrowl-header {
    margin: 0 0 3px !important;
    font-size: 12px !important;
    font-weight: 800 !important;
}
html body .jGrowl .jGrowl-close {
    position: absolute !important;
    top: 8px !important;
    right: 10px !important;
    float: none !important;
    width: 26px !important;
    height: 26px !important;
    margin: 0 !important;
    padding: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border: 0 !important;
    border-radius: 8px !important;
    background: transparent !important;
    color: currentColor !important;
    font-size: 18px !important;
    line-height: 1 !important;
    cursor: pointer !important;
    opacity: .62 !important;
}
html body .jGrowl .jGrowl-close:hover,
html body .jGrowl .jGrowl-close:focus-visible {
    background: rgba(31,40,48,.07) !important;
    opacity: 1 !important;
    outline: none !important;
}
html body .jGrowl .jGrowl-closer {
    padding-right: 14px !important;
    text-align: center !important;
    cursor: pointer !important;
    font-weight: 750 !important;
}

@media (max-width: 860px) {
    html body .jGrowl.top-right,
    html body .jGrowl.top-left,
    html body .jGrowl.center {
        top: 76px !important; /* 64px mobile header + 12px */
    }
}

@media (max-width: 560px) {
    html body .jGrowl,
    html body .jGrowl.center {
        left: 10px !important;
        right: 10px !important;
        width: auto !important;
        max-width: none !important;
        transform: none !important;
    }
    html body .jGrowl.top-right,
    html body .jGrowl.top-left,
    html body .jGrowl.center {
        top: 74px !important;
        bottom: auto !important;
    }
    html body .jGrowl.bottom-right,
    html body .jGrowl.bottom-left {
        top: auto !important;
        bottom: 10px !important;
    }
}

@media print {
    html body .jGrowl { display: none !important; }
}

/* =========================================================
   VORRO LIGHT V1.7.9 — CLEAN JGROWL LIFECYCLE

   jGrowl 1.4.5 creates one empty .jGrowl-notification node when the container
   starts. It is an internal placeholder, not a real toast. V1.7.8 styled that
   placeholder, producing a blank card before/after the actual message.
   Real notifications receive the .alert class in jquery.plugins.js.
   ========================================================= */

/* Never render jGrowl's internal empty startup placeholder. */
html body .jGrowl > .jGrowl-notification:not(.alert) {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    box-shadow: none !important;
    background: transparent !important;
    pointer-events: none !important;
}

/* Real toasts start hidden; jGrowl's opacity:'show' animation opens them. */
html body .jGrowl > .jGrowl-notification.alert {
    display: none;
}

/* The legacy '[ close all ]' helper looks like a second toast; keep the stack clean. */
html body .jGrowl > .jGrowl-closer {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    box-shadow: none !important;
    pointer-events: none !important;
}

/* When all real notifications are gone the wrapper must be visually inert. */
html body .jGrowl:empty {
    width: 0 !important;
    height: 0 !important;
}



/* Vorro 1.8 — sidebar settings integration */
.vorro-index-layout.vorro-sidebar-disabled {
    grid-template-columns: minmax(0, 1fr) !important;
}

.vorro-index-layout.vorro-sidebar-disabled .vorro-sidebar {
    display: none !important;
}

/* =========================================================
   VORRO LIGHT V1.8.2 — BRAND FALLBACK CONTRACT
   Bundled Vorro logo.svg is a fallback asset, not a custom site logo.
   Default/broken logo: show site mark + board name.
   Valid custom theme logo: replace mark/name with the custom logo.
   ========================================================= */
html body .vorro-site-header .vorro-brand {
    flex: 0 1 auto !important;
    max-width: 245px !important;
    min-width: 0 !important;
    height: 48px !important;
    gap: 10px !important;
    padding-right: 20px !important;
    margin-right: 10px !important;
}

html body .vorro-site-header .vorro-brand .vorro-brand-default-mark {
    display: inline-flex !important;
    width: 34px !important;
    height: 34px !important;
    flex: 0 0 34px !important;
}
html body .vorro-site-header .vorro-brand .vorro-site-name {
    display: inline-block !important;
    max-width: 185px !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    color: #1e252b !important;
    font-size: 14px !important;
    font-weight: 800 !important;
    line-height: 1.1 !important;
}
html body .vorro-site-header .vorro-brand .vorro-brand-logo {
    display: none !important;
    width: auto !important;
    height: auto !important;
    max-width: 190px !important;
    max-height: 44px !important;
    object-fit: contain !important;
    object-position: left center !important;
    border: 0 !important;
}

/* Only a valid non-bundled theme logo takes over the whole brand slot. */
html body .vorro-site-header .vorro-brand.vorro-brand-custom-logo {
    gap: 0 !important;
    max-width: 230px !important;
}
html body .vorro-site-header .vorro-brand.vorro-brand-custom-logo .vorro-brand-default-mark,
html body .vorro-site-header .vorro-brand.vorro-brand-custom-logo .vorro-site-name {
    display: none !important;
}
html body .vorro-site-header .vorro-brand.vorro-brand-custom-logo .vorro-brand-logo {
    display: block !important;
    flex: 0 1 auto !important;
}

/* Pending and broken/default states deliberately retain native Vorro identity. */
html body .vorro-site-header .vorro-brand.vorro-brand-pending .vorro-brand-logo,
html body .vorro-site-header .vorro-brand.vorro-brand-fallback .vorro-brand-logo {
    display: none !important;
}

@media (max-width: 1080px) {
    html body .vorro-site-header .vorro-brand {
        max-width: 205px !important;
        padding-right: 16px !important;
    }
    html body .vorro-site-header .vorro-brand .vorro-site-name { max-width: 155px !important; }
    html body .vorro-site-header .vorro-brand.vorro-brand-custom-logo .vorro-brand-logo {
        max-width: 155px !important;
        max-height: 40px !important;
    }
}

@media (max-width: 860px) {
    html body .vorro-site-header .vorro-brand {
        height: 40px !important;
        max-width: 155px !important;
        padding-right: 0 !important;
        margin-right: 0 !important;
    }
    html body .vorro-site-header .vorro-brand .vorro-brand-default-mark {
        width: 32px !important; height: 32px !important; flex-basis: 32px !important;
    }
    html body .vorro-site-header .vorro-brand .vorro-site-name { max-width: 110px !important; }
    html body .vorro-site-header .vorro-brand.vorro-brand-custom-logo .vorro-brand-logo {
        max-width: 132px !important;
        max-height: 36px !important;
    }
}