/**
 * Site Header + Site Footer (G4 / design DD-1) — global chrome styles.
 * =====================================================================
 *
 * Heirloom Gold only: every color comes from the design-system custom
 * properties (marketing-template.css :root on marketing pages, main.css
 * :root on app pages). No raw hex in this file — phossil-ui law #1.
 *
 * The app state reuses the proven `unified-header__*` classes styled in
 * /css/unified-header.css; this file adds ONLY the deltas the redesign
 * introduces (avatar treatment, compact density) plus the new marketing
 * header and the global footer.
 */

/* ====================================================================
 * Marketing header (logged-out state)
 * ==================================================================== */

/* Fixed like the marketing header it replaces: every migrated marketing page
 * compensates with top margin/padding sized for a fixed 64px bar. */
.site-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    padding: 0; /* guard against generic `header` padding rules on host pages */
    background: var(--color-surface);
    border-bottom: 1px solid var(--color-border);
}

.site-header__inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 24px;
    min-height: 64px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
}

.site-header__logo {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
}

.site-header__logo img {
    height: 44px;
    width: auto;
    display: block;
}

.site-header__nav {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1;
    justify-content: center;
}

.site-header__nav-link {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 0 14px;
    border-radius: var(--radius-sm);
    color: var(--color-text-primary);
    text-decoration: none;
    font-weight: 500;
    font-size: 15px;
    transition: var(--transition-fast);
}

.site-header__nav-link:hover {
    color: var(--color-accent);
    background: var(--color-canvas);
}

.site-header__nav-link--current {
    color: var(--color-accent);
}

.site-header__actions {
    display: flex;
    align-items: center;
    gap: 12px;
}

.site-header__signin {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 0 14px;
    color: var(--color-text-primary);
    text-decoration: none;
    font-weight: 500;
    font-size: 15px;
    border-radius: var(--radius-sm);
    transition: var(--transition-fast);
}

.site-header__signin:hover {
    color: var(--color-accent);
}

.site-header__cta {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 0 20px;
    background: var(--color-accent);
    color: var(--color-text-on-accent);
    text-decoration: none;
    font-weight: 600;
    font-size: 15px;
    border-radius: var(--radius-sm);
    transition: var(--transition-fast);
}

.site-header__cta:hover {
    background: var(--color-accent-hover);
}

.site-header__cta:focus-visible,
.site-header__signin:focus-visible,
.site-header__nav-link:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 2px;
}

.site-header__menu-btn {
    display: none;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    min-height: 44px;
    border: none;
    background: transparent;
    color: var(--color-text-primary);
    border-radius: var(--radius-sm);
    cursor: pointer;
}

.site-header__menu-btn svg {
    width: 24px;
    height: 24px;
}

@media (max-width: 860px) {
    .site-header__nav {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        flex-direction: column;
        align-items: stretch;
        background: var(--color-surface);
        border-bottom: 1px solid var(--color-border);
        padding: 8px 16px 16px;
        box-shadow: var(--shadow-card);
    }

    .site-header__nav--open {
        display: flex;
    }

    .site-header__menu-btn {
        display: inline-flex;
    }

    .site-header__signin {
        display: none;
    }
}

/* ====================================================================
 * App-state deltas (on top of unified-header.css)
 * ==================================================================== */

/* Avatar redesign (A3): initials on a Deep Everglade disc with a 2px
 * Goldenrod ring, fully round, 44px touch target, accent focus state. */
.unified-header__avatar.site-header__avatar {
    min-width: 44px;
    min-height: 44px;
    border-radius: var(--radius-full);
    background: var(--color-primary);
    color: var(--color-text-on-primary);
    border: 2px solid var(--color-accent);
    font-weight: 600;
    cursor: pointer;
    transition: var(--transition-fast);
}

.unified-header__avatar.site-header__avatar:hover {
    border-color: var(--color-accent-hover);
}

.unified-header__avatar.site-header__avatar:focus-visible {
    outline: none;
    box-shadow: var(--shadow-accent);
    border-color: var(--color-accent-hover);
}

/* Compact density: the Lab workspace embed (same links, thinner chrome). */
.unified-header--compact {
    --header-height: 60px;
    /* F1: the Lab sits on a light canvas, so the base transparent-over-hero
       gradient leaves the nav near-invisible. Give the compact embed a solid
       Deep Everglade bar (darker chrome) so the white nav text reads clearly.
       Tokens only (phossil-ui law #1 — no raw hex in this file). */
    background: var(--color-primary);
    box-shadow: var(--shadow-card);
}

.unified-header--compact .unified-header__inner {
    min-height: 60px;
}

.unified-header--compact .unified-header__logo-img {
    height: 40px; /* F1: bigger logo (was 32px — the "small logo" complaint) */
}

/* ====================================================================
 * Global footer
 * ==================================================================== */

.site-footer {
    background: var(--color-surface);
    border-top: 1px solid var(--color-border);
    margin-top: 64px;
}

.site-footer__inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 32px 24px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    text-align: center;
}

.site-footer__links {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 4px 8px;
}

.site-footer__links a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 0 10px;
    color: var(--color-text-secondary);
    text-decoration: none;
    font-size: 14px;
    border-radius: var(--radius-sm);
    transition: var(--transition-fast);
}

.site-footer__links a:hover {
    color: var(--color-accent);
}

.site-footer__links a:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 2px;
}

.site-footer__brand-row {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 8px 20px;
    font-size: 13px;
    color: var(--color-text-secondary);
}

/* A5: quiet, text-only cross-link. Never a banner. */
.site-footer__candela {
    color: var(--color-text-secondary);
    text-decoration: underline;
    text-underline-offset: 3px;
    font-size: 13px;
}

.site-footer__candela:hover {
    color: var(--color-accent);
}

/* Tone modifier for hero-dark pages: colors only, identical links. */
.site-footer--dark {
    background: var(--color-primary);
    border-top-color: var(--color-secondary);
}

.site-footer--dark .site-footer__links a,
.site-footer--dark .site-footer__brand-row,
.site-footer--dark .site-footer__candela {
    color: var(--color-text-on-primary);
}

.site-footer--dark .site-footer__links a:hover,
.site-footer--dark .site-footer__candela:hover {
    color: var(--color-accent);
}