/* ==========================================================
   Yusaso
   Default Theme Header, Navigation and Footer
   ========================================================== */

/*
|--------------------------------------------------------------------------
| Semantic Theme Tokens
|--------------------------------------------------------------------------
|
| Basic customization:
| - Header, navigation, notification and popup colors.
| - Header background image.
|
| Advanced paid customization:
| - Interaction states, borders, shadows, overlays, responsive
|   sizing, spacing and layout-specific overrides.
|
*/

:root {
    --header-background-color:#111827;
    --header-background-image:none;
    --header-background-position:center;
    --header-background-size:cover;
    --header-background-repeat:no-repeat;
    --header-background-attachment:scroll;
    --header-overlay-color:rgba(17,24,39,.12);
    --header-text-color:#f8fafc;
    --header-link-color:#f8fafc;
    --header-link-hover-color:#a7f3d0;
    --header-border-color:#334155;
    --header-icon-color:#f8fafc;
    --header-avatar-border-color:#e2e8f0;
    --header-account-status-color:#cbd5e1;
    --header-upgrade-link-color:#86efac;

    --navigation-background-color:#ffffff;
    --navigation-text-color:#334155;
    --navigation-icon-color:#475569;
    --navigation-hover-background-color:#f1f5f9;
    --navigation-hover-text-color:#0f172a;
    --navigation-active-background-color:#e8f8f1;
    --navigation-active-text-color:#166534;
    --navigation-active-indicator-color:#22c55e;
    --navigation-border-color:#e2e8f0;

    --notification-background-color:#172033;
    --notification-text-color:#e2e8f0;
    --notification-link-color:#f8fafc;
    --notification-icon-color:#facc15;
    --notification-unread-background-color:#24324a;
    --notification-unread-indicator-color:#f97316;
    --notification-divider-color:#334155;

    --popup-background-color:#ffffff;
    --popup-text-color:#1e293b;
    --popup-link-color:#1e293b;
    --popup-hover-background-color:#e8f8f1;
    --popup-hover-text-color:#14532d;
    --popup-selected-background-color:#dcfce7;
    --popup-selected-text-color:#14532d;
    --popup-border-color:#cbd5e1;
    --popup-divider-color:#e2e8f0;
    --popup-shadow:0 12px 30px rgba(15,23,42,.24);

    --footer-background-color:#111827;
    --footer-text-color:#cbd5e1;
    --footer-link-color:#f8fafc;

    --focus-ring-color:#facc15;
    --disabled-control-color:#94a3b8;
    --control-gap:4px;

    --desktop-logo-width:clamp(220px, 24vw, 340px);
    --mobile-logo-height:58px;
    --condensed-logo-height:36px;
    --desktop-header-padding:1rem 1.5rem;
    --mobile-header-padding:.5rem .75rem;
    --condensed-header-padding:.25rem .5rem;
}

/*
|--------------------------------------------------------------------------
| Screen Reader Text
|--------------------------------------------------------------------------
*/

.screen_reader_text {
    position:absolute !important;
    width:1px !important;
    height:1px !important;
    padding:0 !important;
    margin:-1px !important;
    overflow:hidden !important;
    clip:rect(0,0,0,0) !important;
    white-space:nowrap !important;
    border:0 !important;
}

/*
|--------------------------------------------------------------------------
| Shared Focus Treatment
|--------------------------------------------------------------------------
*/

.site_header a:focus-visible,
.site_header button:focus-visible,
.site_footer a:focus-visible,
.theme_panic_reset:focus-visible {
    outline:3px solid var(--focus-ring-color);
    outline-offset:3px;
}

/*
|--------------------------------------------------------------------------
| Header Surface
|--------------------------------------------------------------------------
*/

.site_header {
    position:relative;
    isolation:isolate;
    width:100%;
    color:var(--header-text-color);
    background-color:var(--header-background-color);
    background-image:var(--header-background-image);
    background-position:var(--header-background-position);
    background-size:var(--header-background-size);
    background-repeat:var(--header-background-repeat);
    background-attachment:var(--header-background-attachment);
    border-bottom:1px solid var(--header-border-color);
}

.site_header::before {
    position:absolute;
    inset:0;
    z-index:-1;
    content:"";
    pointer-events:none;
    background:var(--header-overlay-color);
}

.header_primary {
    display:grid;
    grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);
    align-items:center;
    gap:1rem;
    min-height:116px;
    padding:var(--desktop-header-padding);
}

.header_tools {
    display:flex;
    align-items:center;
    justify-content:flex-start;
    min-width:0;
}

.desktop_tools {
    display:flex;
    align-items:center;
    flex-wrap:wrap;
    gap:.75rem;
}

.header_tool_link {
    display:inline-flex;
    align-items:center;
    gap:.35rem;
    min-height:44px;
    padding:.55rem .7rem;
    color:var(--header-link-color);
    text-decoration:none;
    border:1px solid transparent;
    border-radius:10px;
}

.header_tool_link:hover {
    color:var(--header-link-hover-color);
    border-color:var(--header-border-color);
}

.mobile_navigation_button {
    display:none;
}

.header_brand {
    display:flex;
    align-items:center;
    justify-content:center;
    min-width:0;
}

.header_brand_link {
    display:flex;
    align-items:center;
    justify-content:center;
    color:var(--header-link-color);
    text-decoration:none;
}

.header_logo {
    display:block;
    max-width:100%;
    height:auto;
}

.header_logo_full {
    width:var(--desktop-logo-width);
}

.header_logo_compact {
    display:none;
}

/*
|--------------------------------------------------------------------------
| Header Account
|--------------------------------------------------------------------------
*/

.header_account {
    display:grid;
    grid-template-areas:
        "identity menu"
        "status status";
    grid-template-columns:minmax(0, 1fr) 44px;
    align-items:start;
    justify-items:end;
    column-gap:.65rem;
    row-gap:.15rem;
    min-width:0;
}

.header_account_identity {
    grid-area:identity;
    display:flex;
    flex-direction:column;
    align-items:flex-end;
    min-width:0;
}

.header_profile_link {
    display:flex;
    align-items:center;
    justify-content:flex-end;
    gap:.5rem;
    min-height:44px;
    min-width:0;
    color:var(--header-link-color);
    text-decoration:none;
}

.header_avatar {
    flex:0 0 auto;
    width:2.5rem;
    height:2.5rem;
    object-fit:cover;
    border:2px solid var(--header-avatar-border-color);
    border-radius:50%;
}

.header_profile_name,
.header_profile_name:link,
.header_profile_name:visited {
    overflow:hidden;
    max-width:14rem;
    color:var(--header-link-color);
    font-size:1.05rem;
    font-weight:700;
    text-decoration:none;
    text-overflow:ellipsis;
    white-space:nowrap;
}

.header_profile_link:hover .header_profile_name,
.header_profile_name:hover {
    color:var(--header-link-hover-color);
}

.header_account_status {
    grid-area:status;
    display:flex;
    align-items:center;
    justify-content:flex-end;
    flex-wrap:wrap;
    gap:.3rem;
    width:100%;
    color:var(--header-muted-text-color);
    font-size:var(--font-xs);
    text-align:right;
}

.header_account_status a {
    color:var(--header-upgrade-link-color);
}

.header_guest_identity {
    padding-top:.15rem;
}

/*
|--------------------------------------------------------------------------
| Header Control Buttons
|--------------------------------------------------------------------------
*/

.mobile_navigation_button,
.account_menu_button {
    align-items:center;
    justify-content:center;
    width:44px;
    min-width:44px;
    height:44px;
    padding:0;
    color:var(--header-icon-color);
    background:transparent;
    border:1px solid var(--header-border-color);
    border-radius:10px;
    cursor:pointer;
}

.account_menu {
    grid-area:menu;
    position:relative;
}

.mobile_navigation_button:hover,
.account_menu_button:hover,
.mobile_navigation_button[aria-expanded="true"],
.account_menu_button[aria-expanded="true"] {
    color:var(--header-link-hover-color);
    background:rgba(255,255,255,.08);
}

.control_icon {
    font-size:1.35rem;
    line-height:1;
}

/*
|--------------------------------------------------------------------------
| Account Popup
|--------------------------------------------------------------------------
*/

.account_menu {
    position:relative;
    flex:0 0 auto;
}

.account_dropdown {
    position:absolute;
    top:calc(100% + var(--control-gap));
    right:0;
    z-index:1000;
    display:block;
    min-width:210px;
    overflow:hidden;
    color:var(--popup-text-color);
    background:var(--popup-background-color);
    border:1px solid var(--popup-border-color);
    border-radius:12px;
    box-shadow:var(--popup-shadow);
}

.account_dropdown[hidden] {
    display:none !important;
}

.account_dropdown a {
    display:block;
    min-height:44px;
    padding:.75rem 1rem;
    color:var(--popup-link-color);
    text-decoration:none;
    border-bottom:1px solid var(--popup-divider-color);
}

.account_dropdown a:last-child {
    border-bottom:0;
}

.account_dropdown a:hover,
.account_dropdown a:focus-visible {
    color:var(--popup-hover-text-color);
    background:var(--popup-hover-background-color);
}

/*
|--------------------------------------------------------------------------
| Notifications Bar
|--------------------------------------------------------------------------
*/

.notification_bar {
    display:flex;
    align-items:stretch;
    min-height:48px;
    color:var(--notification-text-color);
    background:var(--notification-background-color);
    border-top:1px solid var(--notification-divider-color);
    border-bottom:1px solid var(--notification-divider-color);
}

.notification_bar_label {
    display:flex;
    align-items:center;
    flex:0 0 auto;
    gap:.45rem;
    padding:.65rem 1rem;
    border-right:1px solid var(--notification-divider-color);
}

.notification_bell {
    color:var(--notification-icon-color);
}

.notification_unread_dot {
    display:inline-block;
    width:.65rem;
    height:.65rem;
    background:var(--notification-unread-indicator-color);
    border:2px solid var(--notification-background-color);
    border-radius:50%;
}

.notification_bar_items {
    display:flex;
    align-items:stretch;
    flex:1 1 auto;
    min-width:0;
    overflow:hidden;
}

.notification_empty {
    display:flex;
    align-items:center;
    padding:.65rem 1rem;
    color:var(--notification-text-color);
}

.notification_item {
    display:flex;
    flex:1 1 0;
    flex-direction:column;
    justify-content:center;
    min-width:0;
    max-width:24rem;
    padding:.55rem .85rem;
    color:var(--notification-link-color);
    text-decoration:none;
    border-right:1px solid var(--notification-divider-color);
}

.notification_item:nth-child(n+4) {
    display:none;
}

.notification_item.is_unread {
    background:var(--notification-unread-background-color);
}

a.notification_item:hover {
    color:var(--notification-link-color);
    filter:brightness(1.12);
}

.notification_item_title,
.notification_item_body {
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
}

.notification_item_title {
    font-size:var(--font-sm);
    font-weight:700;
}

.notification_item_body {
    margin-top:.15rem;
    font-size:var(--font-xs);
    opacity:.85;
}

/*
|--------------------------------------------------------------------------
| Primary Navigation
|--------------------------------------------------------------------------
*/

.primary_navigation {
    color:var(--navigation-text-color);
    background:var(--navigation-background-color);
    border-bottom:1px solid var(--navigation-border-color);
}

.main_nav {
    display:flex;
    align-items:stretch;
    justify-content:center;
    gap:var(--control-gap);
    padding:.65rem;
    color:var(--navigation-text-color);
    background:var(--navigation-background-color);
}

.main_nav .navigation_link {
    position:relative;
    display:flex;
    align-items:center;
    justify-content:center;
    flex-direction:column;
    gap:.35rem;
    width:6.25rem;
    min-height:74px;
    padding:.55rem;
    color:var(--navigation-text-color);
    font-family:inherit;
    text-align:center;
    text-decoration:none;
    background:var(--navigation-background-color);
    border:1px solid transparent;
    border-radius:12px;
}

.main_nav .navigation_link:hover {
    color:var(--navigation-hover-text-color);
    background:var(--navigation-hover-background-color);
    border-color:var(--navigation-border-color);
}

.main_nav .navigation_link.is_disabled,
.main_nav .navigation_link.is_disabled:hover {
    color:var(--navigation-text-color);
    background:var(--navigation-background-color);
    border-color:transparent;
    box-shadow:none;
    cursor:not-allowed;
    opacity:.55;
}

.main_nav .navigation_link.is_disabled .navigation_icon {
    color:var(--navigation-icon-color);
    filter:grayscale(1);
}

.main_nav .navigation_link.is_current {
    color:var(--navigation-active-text-color);
    font-weight:700;
    background:var(--navigation-active-background-color);
    border-color:var(--navigation-active-indicator-color);
}

.main_nav .navigation_link.is_current::after {
    position:absolute;
    right:.75rem;
    bottom:.25rem;
    left:.75rem;
    height:3px;
    content:"";
    background:var(--navigation-active-indicator-color);
    border-radius:999px;
}

.navigation_icon {
    color:var(--navigation-icon-color);
    font-size:1.45rem;
    line-height:1;
}

.navigation_text {
    font-size:var(--font-sm);
}

.mobile_navigation_utilities {
    display:none;
}

/*
|--------------------------------------------------------------------------
| Footer
|--------------------------------------------------------------------------
*/

.site_footer {
    padding:1rem 1.25rem;
    color:var(--footer-text-color);
    font-size:var(--font-xs);
    text-align:center;
    background:var(--footer-background-color);
    border-top:1px solid var(--header-border-color);
}

.site_footer p {
    margin:0;
}

.site_footer a {
    color:var(--footer-link-color);
}

/*
|--------------------------------------------------------------------------
| Theme Preview Panic Reset
|--------------------------------------------------------------------------
|
| These fixed colors intentionally ignore user Theme tokens.
|
*/

.theme_panic_reset,
.theme_panic_reset:hover,
.theme_panic_reset:focus {
    position:fixed !important;
    right:16px !important;
    bottom:16px !important;
    z-index:2147483647 !important;
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
    min-width:44px !important;
    min-height:44px !important;
    padding:.65rem .85rem !important;
    color:#000000 !important;
    font:700 14px/1.2 Arial, Helvetica, sans-serif !important;
    text-decoration:none !important;
    background:#ffffff !important;
    border:3px solid #000000 !important;
    border-radius:8px !important;
    outline:3px solid #ffffff !important;
    outline-offset:2px !important;
    box-shadow:0 0 0 5px #000000 !important;
    cursor:pointer !important;
}

/*
|--------------------------------------------------------------------------
| Standard Mobile Header
|--------------------------------------------------------------------------
*/

@media(max-width:768px) {
    :root {
        --desktop-header-padding:var(--mobile-header-padding);
    }

    .site_header {
        position:relative;
    }

    .header_primary {
        grid-template-columns:44px minmax(0,1fr) auto;
        gap:var(--control-gap);
        min-height:76px;
        padding:var(--mobile-header-padding);
    }

    .mobile_navigation_button {
        display:flex;
    }

    .desktop_tools {
        display:none;
    }

    .header_logo_full {
        display:none;
    }

    .header_logo_compact {
        display:block;
        width:auto;
        height:var(--mobile-logo-height);
    }

    .header_account {
        gap:var(--control-gap);
    }

    .header_account_identity {
        max-width:10rem;
    }

    .header_profile_name {
        max-width:7rem;
        font-size:var(--font-sm);
    }

    .header_avatar {
        width:2.25rem;
        height:2.25rem;
    }

    .header_account_status {
        font-size:.68rem;
    }

    .notification_bar {
        min-height:42px;
    }

    .notification_bar_label {
        padding:.5rem .65rem;
    }

    .notification_bar_label strong {
        display:none;
    }

    .notification_item {
        max-width:none;
        padding:.45rem .65rem;
    }

    .notification_item:nth-child(n+2),
    .notification_item_body {
        display:none;
    }

    .primary_navigation {
        width:100%;
    }

    .js .primary_navigation[data-open="false"] {
        display:none;
    }

    .primary_navigation[data-open="true"] {
        display:block;
    }

    .main_nav {
        display:grid;
        grid-template-columns:repeat(2, minmax(0,1fr));
        gap:var(--control-gap);
        padding:var(--control-gap);
    }

    .main_nav .navigation_link {
        width:100%;
        min-height:58px;
        flex-direction:row;
        gap:.55rem;
        padding:.6rem .75rem;
        justify-content:flex-start;
        border-color:var(--navigation-border-color);
        border-radius:9px;
    }

    .main_nav .navigation_link.is_current::after {
        top:.5rem;
        right:auto;
        bottom:.5rem;
        left:.2rem;
        width:3px;
        height:auto;
    }

    .mobile_navigation_utilities {
        display:grid;
        grid-template-columns:1fr;
        gap:var(--control-gap);
        padding:var(--control-gap);
        border-top:1px solid var(--navigation-border-color);
    }

    .mobile_navigation_utilities a {
        display:flex;
        align-items:center;
        min-height:44px;
        padding:.55rem .75rem;
        color:var(--navigation-text-color);
        text-decoration:none;
        background:var(--navigation-background-color);
        border:1px solid var(--navigation-border-color);
        border-radius:9px;
    }

    .mobile_navigation_utilities a:hover {
        color:var(--navigation-hover-text-color);
        background:var(--navigation-hover-background-color);
    }

    .account_dropdown {
        position:fixed;
        top:70px;
        right:var(--control-gap);
        left:var(--control-gap);
        max-height:calc(100vh - 80px);
        overflow-y:auto;
    }

    .site_footer {
        padding:.85rem .75rem;
    }
}

/*
|--------------------------------------------------------------------------
| Condensed Mobile Feed Header
|--------------------------------------------------------------------------
*/

@media(max-width:768px) {
    .header-context-feed .site_header {
        position:sticky;
        top:0;
        z-index:900;
    }

    .header-context-feed .header_primary {
        min-height:48px;
        padding:var(--condensed-header-padding);
    }

    .header-context-feed .header_logo_compact {
        height:var(--condensed-logo-height);
    }

    .header-context-feed .header_account_identity {
        max-width:44px;
    }

    .header-context-feed .header_profile_name,
    .header-context-feed .header_account_status,
    .header-context-feed .header_guest_identity {
        display:none;
    }

    .header-context-feed .header_profile_link {
        min-width:44px;
        min-height:44px;
        justify-content:center;
    }

    .header-context-feed .header_avatar {
        width:2rem;
        height:2rem;
    }

    .header-context-feed .notification_bar {
        min-height:34px;
    }

    .header-context-feed .notification_bar_label {
        padding:.35rem .5rem;
    }

    .header-context-feed .notification_item,
    .header-context-feed .notification_empty {
        min-height:34px;
        padding:.3rem .5rem;
    }

    .header-context-feed .notification_item_title,
    .header-context-feed .notification_empty {
        font-size:.72rem;
    }

    .header-context-feed .account_dropdown {
        top:50px;
    }
}

/*
|--------------------------------------------------------------------------
| Small Mobile Refinements
|--------------------------------------------------------------------------
*/

@media(max-width:420px) {
    .header_account_identity {
        max-width:7rem;
    }

    .header_profile_name {
        max-width:4.5rem;
    }

    .header_account_status span:first-child {
        overflow:hidden;
        max-width:6rem;
        text-overflow:ellipsis;
        white-space:nowrap;
    }

    .main_nav {
        grid-template-columns:1fr;
    }
}

/*
|--------------------------------------------------------------------------
| Accessibility Preferences
|--------------------------------------------------------------------------
*/

@media(prefers-reduced-motion:reduce) {
    .site_header *,
    .site_header *::before,
    .site_header *::after {
        scroll-behavior:auto !important;
        transition:none !important;
        animation:none !important;
    }
}

@media(forced-colors:active) {
    .site_header,
    .notification_bar,
    .primary_navigation,
    .account_dropdown,
    .site_footer {
        border:1px solid CanvasText;
    }

    .notification_unread_dot,
    .main_nav .navigation_link.is_current::after {
        background:Highlight;
    }
}