/* =========================================================
   ContributionUK — Shared site styles
   -----------------------------------------------------------
   Linked by: index.html, about.html, contribute.html

   perception/index.html is a self-contained page with its own
   separate design system (including its own unrelated
   .app-header) and does NOT use this file.

   These rules were verified byte-identical across the three
   pages above before being moved here. If a page ever needs a
   different look for one of these components, that's a sign
   the rule doesn't belong in this shared file any more — give
   it a page-specific class instead of overriding a shared one,
   so this file stays a single source of truth rather than
   silently drifting again.
   ========================================================= */

* { box-sizing: border-box; margin: 0; padding: 0; font-family: sans-serif; }

/* --------------------------------------------------
   LOGO BRANDING & LINKS
-------------------------------------------------- */
.brand-container {
    display: flex;
    align-items: center;
    gap: 16px;
}

.brand-logo-link {
    display: inline-flex;
    align-items: center;
    text-decoration: none;
    transition: opacity 0.2s;
}
.brand-logo-link:hover { opacity: 0.85; }

/* --------------------------------------------------
   BUTTON SYSTEM STYLES

   NOTE: .btn-nav-solid is deliberately NOT included here yet.
   It was found to differ between pages (index.html: 8px 16px
   padding / 0.85rem font; about.html & contribute.html: 10px
   20px padding / 0.9rem font) despite comments claiming they
   matched — that's exactly the kind of drift this refactor is
   meant to prevent, so it's being decided on explicitly rather
   than silently merged. See website-projects notes.
-------------------------------------------------- */
.btn-nav-outline {
    padding: 8px 14px;
    background: rgba(0,0,0,0.5);
    border: 1px solid #555;
    color: #fff;
    font-size: 0.85rem;
    cursor: pointer;
    border-radius: 4px;
    transition: background 0.2s, border-color 0.2s;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
}
.btn-nav-outline:hover {
    background: rgba(255,255,255,0.15);
    border-color: #00bcd4;
}

/* --------------------------------------------------
   STICKY APP HEADER
-------------------------------------------------- */
.app-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 20px;
    background: #111;
    border-bottom: 1px solid #333;
    position: sticky;
    top: 0;
    z-index: 10;
}
.app-header .brand-logo-cuk { height: 38px; width: auto; object-fit: contain; }