/* ============================================================
   Public header bar - the single source of truth for how it LOOKS.

   Loaded by BOTH:
     - header.php, for every application page
     - landing/home.php, the standalone anonymous homepage

   The homepage cannot load tpp.css (it is deliberately a three-request
   page), so before this file the two headers were maintained separately
   and had drifted: different horizontal padding, a different logo-to-text
   gap, and a lighter hamburger stroke.

   Scope rule: appearance lives here, visibility does not. The two pages
   collapse to a hamburger at different widths - the app at 992px, where its
   sidebar collapses, and the homepage at 900px, where its inline nav no
   longer fits. Those display rules stay in tpp.css and landing.css
   respectively, so neither page fights the other.

   Both headers use the same inline SVG icons, so neither depends on
   Font Awesome.
   ============================================================ */

.topbar {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 60px;
    padding: 12px 24px;
}

/* Matches the pre-existing app behaviour: the bar tightens on small screens.
   Kept at 576px, exactly where tpp.css used to do this, so desktop and tablet
   spacing on logged-in pages is unchanged. */
@media (max-width: 576px) {
    .topbar {
        padding: 12px 16px;
    }
}

.topbar-logo {
    display: flex;
    align-items: center;
    gap: 20px;
    color: #ffffff;
    /* Stated explicitly rather than inherited, because the two pages inherit
       different body fonts: application pages load Open Sans, the homepage uses
       a system stack and loads no webfonts. Naming the stack here is what makes
       the wordmark identical without adding a font request to the homepage. */
    font-family: Aptos, "Segoe UI Variable Text", "Segoe UI", Arial, sans-serif;
    font-size: 20px;
    font-weight: 600;
    text-decoration: none;
}

.topbar-logo img {
    width: 32px;
    height: 32px;
}

/* Appearance only. Each page decides when this becomes visible. */
.topbar-public-toggle {
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border: none;
    border-radius: 6px;
    background: transparent;
    color: #ffffff;
    cursor: pointer;
}

.topbar-public-toggle:hover {
    background: rgba(255, 255, 255, 0.12);
}

/* Heavier than the landing page's default icon stroke of 1.75, which read
   noticeably thinner than the rest of the bar. */
.topbar-public-toggle svg,
.topbar-public-toggle svg g {
    stroke-width: 2.5;
}