/* ============================================
   SIRRUNA MASTHEAD - Unified 2-Line Design
   MUST be loaded AFTER style.css to override
   ============================================ */

/* ============================================
   RESET OLD MASTHEAD STYLES
   ============================================ */

.masthead {
    display: flex !important;
    flex-direction: column !important;
    grid-template-columns: unset !important;
    padding: 0 var(--lg) !important;
    background: var(--paper);
    border-bottom: 1px solid var(--rule);
    margin-bottom: 0 !important;
    position: sticky;
    top: 0;
    z-index: 100;
}

.masthead-left,
.masthead-center,
.masthead-right {
    display: none !important;
}

/* Hide old market strip and section nav */
.market-strip,
.section-nav,
.ticker-bar {
    display: none !important;
}

/* ============================================
   LINE 1: Brand + Navigation + User
   ============================================ */

.masthead-row-1 {
    display: flex !important;
    justify-content: space-between;
    align-items: center;
    padding: var(--md) 0;
    border-bottom: 1px solid var(--rule);
    width: 100%;
    position: relative;
}

/* Left: Brand */
.masthead-brand {
    display: flex !important;
    align-items: baseline;
    text-decoration: none;
    gap: 0 !important;
}

.masthead-brand-name {
    font-family: 'Bodoni Moda', Georgia, serif;
    font-size: 1.5rem;
    font-weight: 700;
    letter-spacing: 0.15em;
    color: var(--ink);
}

.masthead-brand-full,
.masthead-brand-short {
    font-family: inherit;
    font-size: inherit;
    font-weight: inherit;
    letter-spacing: inherit;
    color: inherit;
}

/* Desktop: show full name, hide short */
.masthead-brand-short {
    display: none;
}

.masthead-brand-full {
    display: inline;
}

.masthead-brand-dot {
    color: var(--gold);
}

/* Sub-brand for other pages (S.Weekend, S.Picture, S.Media) */
.masthead-sub-brand {
    font-family: 'Bodoni Moda', Georgia, serif;
    font-size: 1.5rem;
    font-weight: 700;
    letter-spacing: 0.15em;
    margin-left: 0;
}

.masthead-sub-brand.weekend {
    color: var(--teal);
}

.masthead-sub-brand.picture {
    color: var(--burgundy);
}

.masthead-sub-brand.media {
    color: var(--ink-secondary);
}

.masthead-sub-brand.library {
    color: var(--teal);
}

/* Centered tagline */
.masthead-tagline {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    font-family: var(--sans);
    font-size: 0.85rem;
    font-style: italic;
    color: var(--ink-tertiary);
    letter-spacing: 0.02em;
    white-space: nowrap;
}

/* Right side of row 1 */
.masthead-row-1-right {
    display: flex;
    align-items: center;
    gap: var(--lg);
    position: relative;
}

/* User section (archetype icon + avatar) - fixed width to prevent jumping */
.masthead-user-section {
    display: flex;
    align-items: center;
    gap: var(--md); /* Increased gap for breathing room */
    min-width: 100px; /* Fixed min-width: accommodates archetype (28px) + gap (12px) + avatar (40px) + buffer */
    width: 100px; /* Fixed width to prevent layout shift when archetype appears/disappears */
    justify-content: flex-end;
    flex-shrink: 0; /* Never shrink below min-width */
}

/* Archetype icon in masthead */
.masthead-archetype-icon {
    display: none; /* Hidden by default, shown via JS when user has archetype */
    width: 28px;
    height: 28px;
    flex-shrink: 0;
}

.masthead-archetype-icon img {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    object-fit: cover;
}

/* Navigation */
.masthead-nav {
    display: flex;
    align-items: center;
    gap: var(--lg);
}

.masthead-nav-link {
    font-family: var(--sans);
    font-size: 0.85rem;
    font-weight: 400;
    color: var(--ink-secondary);
    text-decoration: none;
    padding-bottom: 4px;
    border-bottom: 2px solid transparent;
    transition: color 0.2s, border-color 0.2s;
    /* Fixed width per link to prevent layout shift when active (bold) */
    text-align: center;
    min-width: 60px;
}

.masthead-nav-link:hover {
    color: var(--ink);
}

.masthead-nav-link.active {
    font-weight: 700;
    color: var(--burgundy);
    border-bottom-color: var(--burgundy);
}

/* User button */
.masthead-user-btn {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 1px solid var(--rule);
    background: var(--paper) !important;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: border-color 0.2s;
    padding: 0;
    overflow: hidden;
    flex-shrink: 0;
}

.masthead-user-btn:hover {
    border-color: var(--ink-tertiary);
}

.masthead-user-btn #user-avatar {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent !important;
}

.masthead-user-btn svg {
    width: 20px;
    height: 20px;
    color: var(--ink-secondary);
}

.masthead-user-btn img,
.masthead-user-btn #user-avatar img {
    width: 100% !important;
    height: 100% !important;
    border-radius: 50% !important;
    object-fit: cover !important;
    background: transparent !important;
}

/* Override any auth.css styles on the button - use high specificity */
.masthead-row-1-right #auth-button,
.masthead-row-1-right .auth-button,
.masthead #auth-button,
.masthead .auth-button,
#auth-button,
.auth-button {
    background: var(--paper) !important;
    border: 1px solid var(--rule) !important;
    border-radius: 50% !important;
    width: 40px !important;
    height: 40px !important;
    padding: 0 !important;
}

.masthead-row-1-right #auth-button:hover,
.masthead-row-1-right .auth-button:hover,
.masthead #auth-button:hover,
.masthead .auth-button:hover,
#auth-button:hover,
.auth-button:hover {
    border-color: var(--ink-tertiary) !important;
    background: var(--paper) !important;
}

.masthead-row-1-right #auth-button.signed-in,
.masthead-row-1-right .auth-button.signed-in,
.masthead #auth-button.signed-in,
.masthead .auth-button.signed-in,
#auth-button.signed-in,
.auth-button.signed-in {
    border-color: var(--rule) !important;
    background: var(--paper) !important;
}

.masthead #user-avatar,
#user-avatar {
    background: transparent !important;
    width: 100% !important;
    height: 100% !important;
}

.masthead #user-avatar img,
#user-avatar img {
    width: 100% !important;
    height: 100% !important;
    border-radius: 50% !important;
    object-fit: cover !important;
}

/* ============================================
   LINE 2: Edition + Market Strip
   ============================================ */

.masthead-row-2 {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--sm) 0;
    width: 100%;
}

/* Left: Edition info */
.masthead-edition {
    display: flex;
    align-items: baseline;
    gap: 0.35rem;
    font-family: var(--sans);
    font-size: 0.8rem;
    color: var(--ink-secondary);
}

.masthead-edition-label {
    font-weight: 700;
    color: var(--burgundy);
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.masthead-edition-label.library {
    color: var(--teal);
}

.masthead-edition-location {
    font-weight: 700;
    color: var(--ink-secondary);
}

.masthead-edition-date {
    font-weight: 400;
    color: var(--ink-secondary);
}

.masthead-edition-dot {
    color: var(--ink-tertiary);
}

/* Right: Market strip */
.masthead-markets {
    display: flex;
    align-items: center;
    gap: var(--md);
}

.masthead-ticker {
    display: flex;
    align-items: baseline;
    gap: 0.35rem;
    font-family: var(--sans);
    font-size: 0.8rem;
}

.masthead-ticker-label {
    color: var(--ink-tertiary);
    font-weight: 400;
    text-transform: uppercase;
    font-size: 0.7rem;
    letter-spacing: 0.02em;
}

.masthead-ticker-value {
    font-family: var(--sans);
    font-weight: 500;
    color: var(--ink);
}

.masthead-ticker-change {
    display: inline;
    font-weight: 500;
}

.masthead-ticker-change.positive {
    color: var(--teal);
}

.masthead-ticker-change.negative {
    color: var(--burgundy);
}

.masthead-ticker-change.flat {
    color: var(--gold);
}

/* Delta indicators for masthead */
.masthead-delta-indicator {
    display: inline;
    font-size: 0.6rem;
    line-height: 1;
    vertical-align: baseline;
    margin-right: 2px;
}

.masthead-delta-indicator.up {
    color: var(--teal);
}

.masthead-delta-indicator.up::before {
    content: "▲";
}

.masthead-delta-indicator.down {
    color: var(--burgundy);
}

.masthead-delta-indicator.down::before {
    content: "▼";
}

.masthead-delta-indicator.flat {
    color: var(--gold);
}

.masthead-delta-indicator.flat::before {
    content: "–";
}

/* Activity indicator */
.masthead-activity {
    font-family: var(--sans);
    font-size: 0.75rem;
    font-weight: 500;
    padding: 2px 8px;
    border-radius: 3px;
    background: rgba(45, 106, 106, 0.1);
    color: var(--teal);
}

.masthead-activity.frenzied {
    background: rgba(138, 18, 60, 0.1);
    color: var(--burgundy);
}

.masthead-activity.quiet {
    background: rgba(122, 122, 122, 0.1);
    color: var(--ink-tertiary);
}

/* Updated timestamp */
.masthead-updated {
    display: flex;
    align-items: baseline;
    gap: 0.25rem;
    font-family: var(--sans);
    font-size: 0.65rem;
    color: var(--ink-tertiary);
}

.masthead-updated-label {
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

.masthead-updated-time {
    font-weight: 400;
}

/* ============================================
   USER MENU
   ============================================ */

.masthead-row-1-right .user-menu {
    position: absolute;
    top: 100%;
    right: 0;
    margin-top: 8px;
    background: var(--white);
    border: 1px solid var(--rule);
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    min-width: 220px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition: opacity 0.2s, visibility 0.2s, transform 0.2s;
    z-index: 1000;
}

.masthead-row-1-right .user-menu.active {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.user-menu-header {
    padding: var(--md);
    border-bottom: 1px solid var(--rule);
}

.user-menu-email {
    font-family: var(--sans);
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--ink);
    margin: 0 0 4px 0;
}

.user-menu-plan {
    font-family: var(--sans);
    font-size: 0.75rem;
    color: var(--ink-tertiary);
    margin: 0;
}

.user-menu-items {
    padding: var(--sm);
}

.user-menu-item {
    display: flex;
    align-items: center;
    gap: var(--sm);
    width: 100%;
    padding: var(--sm) var(--md);
    border: none;
    background: transparent;
    font-family: var(--sans);
    font-size: 0.85rem;
    color: var(--ink);
    cursor: pointer;
    border-radius: 4px;
    transition: background 0.2s;
    text-align: left;
}

.user-menu-item:hover {
    background: var(--paper-dark);
}

.user-menu-item svg {
    width: 18px;
    height: 18px;
    color: var(--ink-secondary);
}

.user-menu-item.sign-out {
    color: var(--burgundy);
}

.user-menu-item.sign-out svg {
    color: var(--burgundy);
}

/* ============================================
   FIX CONTENT OFFSET
   Since we removed market-strip and section-nav,
   adjust content positioning
   ============================================ */

.content-offset {
    margin-top: 100px !important;
}

/* ============================================
   RESPONSIVE
   ============================================ */

@media (max-width: 900px) {
    .masthead {
        padding: 0 var(--md) !important;
    }
    
    .masthead-row-1 {
        padding: var(--sm) 0;
    }
    
    .masthead-brand-name {
        font-size: 1.25rem;
    }
    
    .masthead-tagline {
        display: none;
    }
    
    .masthead-nav {
        gap: var(--md);
    }
    
    .masthead-nav-link {
        font-size: 0.8rem;
    }
    
    .masthead-markets {
        display: none;
    }
    
    .masthead-edition {
        font-size: 0.75rem;
    }
}

@media (max-width: 600px) {
    .masthead-nav {
        gap: var(--sm);
    }
    
    .masthead-nav-link {
        font-size: 0.75rem;
    }
    
    .masthead-sub-brand {
        display: none;
    }
    
    /* Show only "S." on mobile - hide full name, show short */
    .masthead-brand-full {
        display: none !important;
    }
    
    .masthead-brand-short {
        display: inline !important;
    }
}