/* ============================================================

   salute.nw — Navigation & Chrome

   ============================================================ */



/* ── TOPBAR ─────────────────────────────────────────────────── */

.sal-topbar {

    grid-area: topbar;

    position: sticky;

    top: 0;

    z-index: 200;

    height: var(--sal-topbar-h);

    display: flex;

    align-items: center;

    gap: var(--sal-s3);

    padding: 0 var(--sal-s5);

    background: var(--sal-topbar-bg);

    border-bottom: 1px solid var(--sal-topbar-border);

    backdrop-filter: blur(12px);

    -webkit-backdrop-filter: blur(12px);

    transition: height var(--sal-transition-slow), background var(--sal-transition);

}



/* ── Brand ──────────────────────────────────────────────────── */

.sal-topbar-brand { flex-shrink: 0; }

.sal-brand-link   { display: flex; align-items: baseline; gap: 1px; }

.sal-brand-salute {

    font-family: var(--sal-font-display);

    font-size: 1.375rem;

    font-weight: 700;

    font-style: italic;

    color: var(--sal-t1);

    letter-spacing: -0.02em;

    line-height: 1;

}

.sal-brand-dot {

    font-family: var(--sal-font-display);

    font-size: 1.5rem;

    color: var(--sal-gold);

    font-style: normal;

    font-weight: 700;

    line-height: 1;

}

.sal-brand-nw {

    font-family: var(--sal-font-body);

    font-size: 0.875rem;

    font-weight: 600;

    color: var(--sal-t2);

    letter-spacing: 0.04em;

    line-height: 1;

}

.sal-brand-link:hover .sal-brand-salute { color: var(--sal-gold); }

.sal-brand-link:hover .sal-brand-dot    { color: var(--sal-gold-bright); }

.sal-brand-link:hover .sal-brand-nw     { color: var(--sal-t1); }



/* ── Search ─────────────────────────────────────────────────── */

.sal-topbar-search { flex: 1; max-width: 580px; margin: 0 auto; }

.sal-search-wrap   { position: relative; }

.sal-search-icon   {

    position: absolute;

    left: var(--sal-s3);

    top: 50%;

    transform: translateY(-50%);

    width: 16px;

    height: 16px;

    opacity: 0.5;

    pointer-events: none;

    filter: var(--sal-icon-filter, none);

}

.sal-search-input {

    width: 100%;

    height: 38px;

    background: var(--sal-input-bg);

    border: 1px solid var(--sal-input-border);

    border-radius: 38px;

    padding: 0 var(--sal-s4) 0 var(--sal-s8);

    color: var(--sal-t1);

    font-size: 0.9rem;

    transition: border-color var(--sal-transition), box-shadow var(--sal-transition);

}

.sal-search-input::placeholder { color: var(--sal-t3); }

.sal-search-input:focus {

    outline: none;

    border-color: var(--sal-gold);

    box-shadow: 0 0 0 3px var(--sal-gold-glass);

}

.sal-search-results {

    position: absolute;

    top: calc(100% + 8px);

    left: 0;

    right: 0;

    background: var(--sal-surface);

    border: 1px solid var(--sal-border);

    border-radius: var(--sal-radius-lg);

    box-shadow: var(--sal-shadow-xl);

    z-index: 300;

    overflow: hidden;

    display: none;

}

.sal-search-results.sal-search-open { display: block; }

.sal-search-section-title {

    font-size: 0.7rem;

    letter-spacing: 0.1em;

    text-transform: uppercase;

    color: var(--sal-t3);

    font-weight: 600;

    padding: var(--sal-s3) var(--sal-s4) var(--sal-s2);

}

.sal-search-item {

    display: flex;

    align-items: center;

    gap: var(--sal-s3);

    padding: var(--sal-s3) var(--sal-s4);

    cursor: pointer;

    transition: background var(--sal-transition);

    border-radius: 0;

}

.sal-search-item:hover { background: var(--sal-surface2); }

.sal-search-item-portrait {

    width: 36px;

    height: 36px;

    border-radius: 50%;

    object-fit: cover;

    background: var(--sal-surface2);

    flex-shrink: 0;

}

.sal-search-item-name { font-weight: 600; font-size: 0.9rem; color: var(--sal-t1); }

.sal-search-item-meta { font-size: 0.78rem; color: var(--sal-t2); margin-top: 1px; }

.sal-search-item-dec  { display: flex; align-items: center; gap: var(--sal-s2); }

.sal-search-ribbon    { width: 18px; height: 14px; object-fit: cover; border-radius: 2px; }



/* ── Topbar Controls ────────────────────────────────────────── */

.sal-topbar-controls {

    display: flex;

    align-items: center;

    gap: var(--sal-s2);

    flex-shrink: 0;

}

.sal-control-btn {

    width: 36px;

    height: 36px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: var(--sal-radius);

    color: var(--sal-t2);

    transition: background var(--sal-transition), color var(--sal-transition);

    position: relative;

}

.sal-control-btn:hover { background: var(--sal-surface2); color: var(--sal-t1); }

.sal-ctrl-icon { width: 18px; height: 18px; }



/* Theme toggle — show correct icon per mode */

[data-theme="dark"]  .sal-ctrl-light { display: block; }

[data-theme="dark"]  .sal-ctrl-dark  { display: none;  }

[data-theme="light"] .sal-ctrl-light { display: none;  }

[data-theme="light"] .sal-ctrl-dark  { display: block; }



/* ── Branch Selector ────────────────────────────────────────── */

.sal-branch-selector { position: relative; }

.sal-branch-btn {

    width: 36px;

    height: 36px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: var(--sal-radius);

    transition: background var(--sal-transition);

}

.sal-branch-btn:hover { background: var(--sal-surface2); }

.sal-branch-icon { width: 24px; height: 24px; object-fit: contain; }

.sal-branch-dropdown {

    position: absolute;

    top: calc(100% + 8px);

    right: 0;

    width: 280px;

    background: var(--sal-surface);

    border: 1px solid var(--sal-border);

    border-radius: var(--sal-radius-lg);

    box-shadow: var(--sal-shadow-xl);

    z-index: 300;

    padding: var(--sal-s3);

    display: none;

}

.sal-branch-dropdown.sal-open { display: block; }

.sal-branch-dropdown-title {

    font-size: 0.7rem;

    letter-spacing: 0.1em;

    text-transform: uppercase;

    color: var(--sal-t3);

    font-weight: 600;

    padding: var(--sal-s2) var(--sal-s2) var(--sal-s3);

}

.sal-branch-grid {

    display: grid;

    grid-template-columns: repeat(4, 1fr);

    gap: var(--sal-s2);

}

.sal-branch-option {

    display: flex;

    flex-direction: column;

    align-items: center;

    gap: var(--sal-s1);

    padding: var(--sal-s2);

    border-radius: var(--sal-radius);

    cursor: pointer;

    transition: background var(--sal-transition);

    border: 1px solid transparent;

}

.sal-branch-option:hover { background: var(--sal-surface2); }

.sal-branch-option.sal-active { border-color: var(--sal-gold-border); background: var(--sal-gold-glass); }

.sal-branch-option-seal { width: 36px; height: 36px; object-fit: contain; }

.sal-branch-option-name { font-size: 0.65rem; color: var(--sal-t2); text-align: center; line-height: 1.2; }



/* ── Sign In button ─────────────────────────────────────────── */

.sal-signin-btn {

    height: 34px;

    padding: 0 var(--sal-s4);

    border-radius: 34px;

    border: 1px solid var(--sal-gold-border);

    color: var(--sal-gold);

    font-size: 0.875rem;

    font-weight: 600;

    display: flex;

    align-items: center;

    transition: background var(--sal-transition), color var(--sal-transition);

    white-space: nowrap;

}

.sal-signin-btn:hover { background: var(--sal-gold-glass); }



/* ── User Menu ──────────────────────────────────────────────── */

.sal-user-btn {

    display: flex;

    align-items: center;

    gap: var(--sal-s2);

    padding: 4px 10px 4px 4px;

    border-radius: 34px;

    border: 1px solid var(--sal-border);

    transition: background var(--sal-transition);

}

.sal-user-btn:hover { background: var(--sal-surface2); }

.sal-user-avatar { width: 28px; height: 28px; border-radius: 50%; object-fit: cover; }

.sal-user-name   { font-size: 0.875rem; font-weight: 500; color: var(--sal-t1); }



/* ── SIDEBAR ─────────────────────────────────────────────────── */

.sal-sidebar {

    grid-area: sidebar;

    width: var(--sal-sidebar-w);

    background: var(--sal-sidebar-bg);

    border-right: 1px solid var(--sal-sidebar-border);

    display: flex;

    flex-direction: column;

    position: sticky;

    top: var(--sal-topbar-h);

    height: calc(100vh - var(--sal-topbar-h));

    overflow-y: auto;

    overflow-x: hidden;

    transition: width var(--sal-transition-slow), transform var(--sal-transition-slow);

    z-index: 100;

}



.sal-nav-list { padding: var(--sal-s3) var(--sal-s2); flex: 1; }

.sal-nav-item { margin-bottom: 2px; }

.sal-nav-link {

    display: flex;

    align-items: center;

    gap: var(--sal-s3);

    padding: var(--sal-s2) var(--sal-s3);

    border-radius: var(--sal-radius);

    color: var(--sal-t2);

    font-size: 0.9rem;

    font-weight: 500;

    transition: background var(--sal-transition), color var(--sal-transition);

    white-space: nowrap;

}

.sal-nav-link:hover { background: var(--sal-surface2); color: var(--sal-t1); }

.sal-nav-link--active {

    background: var(--sal-gold-glass);

    color: var(--sal-gold);

    border-left: 2px solid var(--sal-gold);

    padding-left: calc(var(--sal-s3) - 2px);

}

.sal-nav-icon  { width: 18px; height: 18px; flex-shrink: 0; opacity: 0.7; }

.sal-nav-link--active .sal-nav-icon { opacity: 1; }

.sal-nav-label { flex: 1; }

.sal-nav-badge {

    background: var(--sal-gold);

    color: #0a0b0d;

    font-size: 0.65rem;

    font-weight: 700;

    padding: 1px 6px;

    border-radius: 10px;

    line-height: 1.4;

}

.sal-nav-divider {

    height: 1px;

    background: var(--sal-sidebar-border);

    margin: var(--sal-s3) var(--sal-s3);

}

.sal-nav-section-label {

    font-size: 0.65rem;

    letter-spacing: 0.1em;

    text-transform: uppercase;

    color: var(--sal-t3);

    font-weight: 600;

    padding: var(--sal-s3) var(--sal-s3) var(--sal-s1);

}

.sal-sidebar-footer {

    padding: var(--sal-s4) var(--sal-s4);

    border-top: 1px solid var(--sal-sidebar-border);

}

.sal-sidebar-brand {

    font-family: var(--sal-font-display);

    font-style: italic;

    font-size: 0.8rem;

    color: var(--sal-t3);

}

.sal-sidebar-sub { font-size: 0.7rem; color: var(--sal-t4); margin-top: 2px; }



/* ── MAIN CONTENT ────────────────────────────────────────────── */

.sal-main {

    grid-area: main;

    min-height: calc(100vh - var(--sal-topbar-h));

    padding: var(--sal-s6) var(--sal-s7);

    max-width: 100%;

    overflow-x: hidden;

    transition: padding var(--sal-transition-slow);

}



@media (max-width: 1200px) {

    .sal-main { padding: var(--sal-s5) var(--sal-s5); }

}



/* ── FULLSCREEN HINT ─────────────────────────────────────────── */

.sal-fs-hint {

    position: fixed;

    top: var(--sal-s4);

    right: var(--sal-s4);

    z-index: 500;

    display: flex;

    align-items: center;

    gap: var(--sal-s2);

    padding: var(--sal-s2) var(--sal-s3);

    background: rgba(0,0,0,0.6);

    color: rgba(255,255,255,0.8);

    font-size: 0.8rem;

    border-radius: var(--sal-radius);

    backdrop-filter: blur(8px);

    opacity: 0;

    pointer-events: none;

    transition: opacity 0.4s ease;

    animation: sal-fs-hint-show 4s ease forwards;

}

@keyframes sal-fs-hint-show {

    0%   { opacity: 0; }

    10%  { opacity: 1; }

    70%  { opacity: 1; }

    100% { opacity: 0; }

}

.sal-fs-hint img { width: 14px; height: 14px; }



/* ── RESPONSIVE ─────────────────────────────────────────────── */

@media (max-width: 768px) {

    body {

        grid-template-areas:

            "topbar"

            "main";

        grid-template-columns: 1fr;

        grid-template-rows: var(--sal-topbar-h) 1fr;

    }

    .sal-sidebar {

        position: fixed;

        top: var(--sal-topbar-h);

        left: 0;

        height: calc(100vh - var(--sal-topbar-h));

        transform: translateX(-100%);

        z-index: 150;

        transition: transform var(--sal-transition-slow);

    }

    .sal-sidebar.sal-mobile-open { transform: translateX(0); }

    .sal-main { padding: var(--sal-s4) var(--sal-s4); }

    .sal-topbar-search { max-width: none; }

    .sal-brand-salute  { font-size: 1.1rem; }

}






/* ── Icon visibility in dark mode ───────────────────────────── */

[data-theme="dark"] .sal-ctrl-icon,

[data-theme="dark"] .sal-nav-icon,

[data-theme="dark"] .sal-user-avatar,

[data-theme="dark"] .sal-branch-icon {

    filter: invert(1) brightness(1.2);

}



/* ── Explore button visible in light mode ───────────────────── */

[data-theme="light"] .sal-btn-gold-outline {

    border: 1.5px solid var(--sal-gold);

    color: var(--sal-gold);

}




/* ── Topbar search icon dark mode ───────────────────────────── */

[data-theme="dark"] .sal-search-icon {

    filter: invert(1) brightness(1.2);

}



/* ── Hero search icon dark mode ─────────────────────────────── */

[data-theme="dark"] .salh-search-icon {

    filter: invert(1) brightness(1.2);

}