/*
 * alexiuz shared page chrome — topbar and footer
 * ----------------------------------------------
 * Source of truth: /home/internetieruser/alexiuz-shared/styles/chrome.css
 * Symlinked into each site at public/styles/shared/.
 *
 * The frame every network page wears: brand left, nav right, sticky, blurred,
 * hairline underneath; a footer with link row and meta. imaig, vidaye and muuic
 * had three near-identical copies of this before it lived here.
 *
 * Load order:
 *     tokens.css -> [base.css] -> [ui.css] -> controls.css -> panels.css
 *                -> chrome.css -> <site>/theme.css -> <site> page styles
 *
 * DELIBERATELY NO `body` RULES.
 * muuic's local chrome.css also set the page ground, text colour and font on
 * body. That is document styling, and retrofitting it is what base.css exists
 * to warn about: generor and alexiuz already own their own ground, and a shared
 * `body { background }` would repaint every page on both. Sites keep their own
 * body; this file styles the two bars and nothing else.
 *
 * `.header-wrap` is hooked in as generor's existing name for the same bar, so
 * it adopts this by deleting its local copy rather than renaming markup.
 */

/* ======================================================================
   Topbar
   ====================================================================== */

.topbar,
.header-wrap {
    position: sticky;
    top: 0;
    z-index: 50;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-7);
    padding: var(--space-6) var(--space-10);
    background: var(--topbar-bg);
    /* Frosts whatever scrolls underneath. Harmless where unsupported — the
       translucent ground alone still reads. */
    backdrop-filter: blur(8px);
    border-bottom: 1px solid var(--border);
    /* Explicit: generor's surface-treatment lists used to hand .header-wrap a
       --radius-md, which made a full-width sticky bar render with rounded
       corners. */
    border-radius: 0;
}

.brand {
    display: inline-flex;
    align-items: center;
    gap: var(--space-4);
    color: var(--text);
    font-weight: var(--weight-bold);
    letter-spacing: 1px;
    text-decoration: none;
}

/* The brand is the one link that must not change colour on hover — it is a
   wordmark, not navigation. */
.brand:hover {
    color: var(--text);
    text-decoration: none;
}

/* The mark is a text glyph on imaig and muuic (a bullet) and an inline <svg>
   on vidaye. inline-flex + explicit svg sizing covers both — font-size does
   nothing to an SVG, so without the second rule vidaye's play triangle renders
   at its intrinsic size and dwarfs the wordmark beside it. */
.brand-mark {
    display: inline-flex;
    align-items: center;
    color: var(--accent);
    font-size: var(--text-sm);
}

.brand-mark svg {
    display: block;
    width: 16px;
    height: 16px;
}

/* Wordmark. Uppercase is the convention imaig and vidaye already used; it is
   set here rather than on .brand so a mark sitting beside it is unaffected. */
.brand-name {
    font-size: var(--text-lg);
    text-transform: uppercase;
}

/* margin-left:auto, not just the parent's justify-content: space-between.
   space-between distributes ALL children evenly, which is only the layout you
   want when the bar holds exactly two — brand and nav, as on imaig, vidaye and
   muuic. generor's bar holds three or four (brand, nav, credits pill,
   hamburger), so space-between spread them across the whole width and parked
   the credits pill near the middle. Worse when signed in, where the nav is
   empty because Creations lives in the hamburger.

   One auto margin here absorbs all the free space instead, so the nav and
   everything after it cluster at the right edge however many children there
   are. Only ever put the auto margin on ONE element — two of them split the
   free space between themselves and the middle-parking returns. */
.topnav {
    display: inline-flex;
    align-items: center;
    gap: var(--space-7);
    margin-left: auto;
    font-size: var(--text-base);
}

.nav-link {
    color: var(--text-muted);
    text-decoration: none;
    transition: var(--transition);
}

.nav-link:hover {
    color: var(--accent-bright);
    text-decoration: none;
}

/* The page you are already on. Marked rather than removed, so the nav does not
   change shape as you move between pages. */
.nav-link[aria-current="page"] {
    color: var(--accent);
}

/* ======================================================================
   Footer
   ====================================================================== */

.bottombar,
.site-footer {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-6);
    /* Pins the footer to the bottom on short pages, but only where the site's
       body is a flex column. Harmless otherwise. */
    margin-top: auto;
    padding: var(--space-9) var(--space-10);
    border-top: 1px solid var(--border);
    color: var(--text-dim);
    font-size: var(--text-base);
}

.footer-links {
    display: inline-flex;
    flex-wrap: wrap;
    gap: var(--space-7);
}

.footer-links a {
    color: var(--text-muted);
    text-decoration: none;
}

.footer-links a:hover {
    color: var(--accent-bright);
}

@media (max-width: 768px) {
    .topbar,
    .header-wrap {
        padding: var(--space-5) var(--space-7);
    }

    .bottombar,
    .site-footer {
        padding: var(--space-9) var(--space-7);
    }
}