/* ============================================================
   Shared site header
   ------------------------------------------------------------
   One header used by the public site (index.php) and the admin
   panel (admin.php): a steel plate the full width of the page
   with the "AUDIO AND TECH" sign across it, a bar under the sign
   for the page name and the buttons (collapse-all, Sign In,
   Menu), and on index.php the page navigation under that. A 3px
   red rule closes it.

   It is the Metal Mash site's banner - the same artwork on the
   same plate - so the two sites match.

   Two images, both cut from that artwork by
   tools/header-sign/build_sign.py (see img/README.md):

     img/site-sign.webp   the lettering, with the plate it was
                          painted on fading out around it
     img/site-plate.webp  a seamless tile of that plate

   The sign's edges fade into a tile of its own plate, so the
   sign can be any size on any width of screen and the join
   never shows. Nothing is laid over the lettering: the page
   name, the buttons and the nav all sit BELOW it.
   ============================================================ */

:root {
    --site-head-bg:     #3d3c3e;   /* the plate's tone: what shows if the tile is missing */
    --site-head-accent: #dc3545;
    --site-head-sub:    #e2e8f0;
    --site-head-rule:   3px;

    /* How tall the sign may grow. On a phone it is simply as wide as
       the screen; on a desktop it grows with the window until it
       reaches this, then sits centred with plate either side. This is
       the one number to change to make the header bigger or smaller. */
    --site-sign-max-h: min(42vh, 520px);
}

/* ── The plate ───────────────────────────────────────────── */
.site-head {
    /* The sign's real on-screen height: as wide as the page or the
       cap, whichever is smaller. The sign image is 1820 x 642.
       Declared here rather than on :root so the admin and compact
       overrides of the cap further down feed into it. */
    --site-sign-h: min(var(--site-sign-max-h), calc(100vw * 642 / 1820));

    padding: 0;
    color: #fff;
    background-color: var(--site-head-bg);
    background-image: url("../img/site-plate.webp");
    background-repeat: repeat;
    background-position: center top;
    /* The tile at the scale the sign is shown at, so the grain of the
       plate matches inside and outside the sign. The tile is
       1600 x 360 at the sign's native size (height 642). It never
       shows smaller than 740px wide, though: below that (the admin
       header, compact mode) the repeat would start to show. */
    background-size: clamp(740px, calc(var(--site-sign-h) * 1600 / 642), 1600px) auto;
    border-bottom: var(--site-head-rule) solid var(--site-head-accent);
}

/* ── The sign ────────────────────────────────────────────── */
.site-sign {
    padding: 0;
}

.site-brand {
    position: relative;
    margin: 0;
    line-height: 0;             /* no gap under the image */
}

/* The lettering is custom artwork, so it is an <img> inside the <h1>
   with alt="Audio and Technology": screen readers and search engines
   still get the name as text. It is as wide as the page until it
   reaches the cap; object-fit then keeps it centred at that size with
   the plate showing either side. */
.site-brand-logo {
    display: block;
    width: 100%;
    height: auto;
    max-height: var(--site-sign-max-h);
    object-fit: contain;
}

/* The dev-mode ID dot: parked in the top-left corner of the sign
   instead of flowing after the image. Three classes so it beats the
   page's own body.dev-mode-active .dev-id rule, which sets position. */
.site-head .site-brand .dev-id {
    position: absolute;
    top: .4rem;
    left: .6rem;
    line-height: 1.2;
}

/* ── The bar under the sign ──────────────────────────────── */
/* Page name on the left, buttons on the right, on a darkening strip
   that runs on into the nav below so the controls read clearly
   against the plate. It is pulled up a little into the sign's own
   plate margin under the letters, so the header carries no dead
   space. */
.site-head-bar {
    position: relative;
    margin-top: calc(var(--site-sign-h) * -0.08);
    padding: .5rem 1rem .6rem;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, .62) 100%);
}

/* The page navigation on index.php sits inside the header, under the bar. */
.site-head > .navbar {
    background: rgba(0, 0, 0, .62);
}

/* The page or folder name. */
.site-sub {
    margin: 0;
    min-width: 0;
    font-size: 1rem;
    font-style: italic;
    color: var(--site-head-sub);
    line-height: 1.3;
    overflow-wrap: anywhere;
    text-shadow: 0 1px 3px rgba(0, 0, 0, .9);
}

/* ── Narrow screens ──────────────────────────────────────── */
@media (max-width: 575.98px) {
    .site-head-bar { padding: .4rem .75rem .5rem; }
    .site-sub      { font-size: .85rem; }
}

/* ── Admin panel variant ─────────────────────────────────── */
/* admin.php puts the bar full-width above the sidebar + content
   row. The page is a flex column: header, then the shell taking
   the remaining height. The sidebar then stretches to fill the
   shell on its own (flex items stretch by default), so nothing
   needs to know how tall the header is - there is no magic pixel
   value to drift when the bar's content or font size changes. */
.admin-body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    margin: 0;
}

.admin-body > .admin-shell {
    flex: 1 0 auto;
}

/* A smaller sign in the back office, where vertical space is worth
   more than presence. */
.site-head--admin           { --site-sign-max-h: 150px; }
.site-head--admin .site-sub { font-size: .9rem; }

/* ── Compact mode ────────────────────────────────────────── */
/* index.php has a user-toggled compact mode (the class goes on
   <html>); keep the header in step with it. */
.compact-mode .site-head { --site-sign-max-h: 200px; }
.compact-mode .site-sub  { font-size: .85rem; }