/* kylandforms — the banner: one definition for the public site and the admin (Instruction 19.6).
   The public header is the reference; these are its rules (site.css §3 and its wide-screen block, as of
   19.6) moved here unchanged, with 19.5's two additions (white-space: nowrap on the name and on each
   link, for the admin's two-word labels; they change nothing on the public side, whose labels are one
   word each). Both headers link this file before their own stylesheet, and neither stylesheet may
   define a banner rule again — tests/unit.php checks that.

   Tokens: a banner rule never reads a page token by a name that means a different size on the other
   side. The admin's --page-max, --fs-xl, --fs-xs, --lh-body and --sp-* are different sizes for different
   jobs, so the sizes below come in by banner-only names (--banner-max, --banner-name-size,
   --banner-tag-size, --banner-tag-line-height), which site.css sets from its own scale and the admin
   leaves unset, so the fallback — the public value — applies there. Names that mean the same thing on
   both sides (--banner-bg, --touch, --font-display, --font-mono, --accent) are read directly, and the
   public-only names (--s1..--s4, --gutter, --r, --rule, --banner-text, --banner-muted) fall back to
   their public values on the admin. Every fallback is the public site's value on 20 September 2026. */

.banner, .rule {
  --bn-bg:      var(--banner-bg, #2E2418);
  --bn-text:    var(--banner-text, #E8DCC8);
  --bn-muted:   var(--banner-muted, rgba(232, 220, 200, 0.62));
  --bn-max:     var(--banner-max, 76rem);
  --bn-name:    var(--banner-name-size, 1.32rem);
  --bn-tag:     var(--banner-tag-size, 0.66rem);
  --bn-tag-lh:  var(--banner-tag-line-height, 1.6);
  --bn-s1:      var(--s1, 0.35rem);
  --bn-s2:      var(--s2, 0.7rem);
  --bn-s3:      var(--s3, 1.15rem);
  --bn-s4:      var(--s4, 1.8rem);
  --bn-gutter:  var(--gutter, clamp(1rem, 4vw, 1.6rem));
  --bn-touch:   var(--touch, 44px);
  --bn-r:       var(--r, 3px);
  --bn-rule:    var(--rule, 4px);
  --bn-display: var(--font-display, 'Playfair Display', Georgia, 'Times New Roman', serif);
  --bn-mono:    var(--font-mono, 'Courier Prime', ui-monospace, 'SF Mono', Consolas, monospace);
}

/* ---------- the banner ---------- */
.banner { background: var(--bn-bg); color: var(--bn-text); }
.banner-inner { position: relative; max-width: var(--bn-max); margin: 0 auto; padding: var(--bn-s3) var(--bn-gutter) var(--bn-s2); }
.banner-name {
  font-family: var(--bn-display); font-size: var(--bn-name); font-weight: 400; letter-spacing: 0.005em; white-space: nowrap;
  margin: 0; color: var(--bn-text); text-decoration: none; display: inline-block; min-height: var(--bn-touch); line-height: var(--bn-touch);
}
.banner-tag { font-family: var(--bn-mono); font-size: var(--bn-tag); line-height: var(--bn-tag-lh); letter-spacing: 0.09em; color: var(--bn-muted); margin: 0; }
.nav { display: flex; flex-wrap: wrap; gap: 0 var(--bn-s2); margin-top: var(--bn-s1); font-family: var(--bn-mono); font-size: 0.72rem; letter-spacing: 0.04em; }
.nav a, .nav-user {
  display: inline-flex; align-items: center; min-height: var(--bn-touch); padding: 0 var(--bn-s1); white-space: nowrap;
  color: var(--bn-text); opacity: 0.74; text-decoration: none; border-bottom: 2px solid transparent;
}
.nav a:hover { opacity: 1; }
.nav a[aria-current="page"] { opacity: 1; border-bottom-color: currentColor; }
.nav-user { opacity: 0.55; }   /* the admin's signed-in name: in the nav, not a link */
/* the collapsed nav (13): the shared script (includes/nav-collapse.php) adds .nav-collapsed to the banner when the
   links no longer fit on one line, whatever the width; the button in the top right opens them as a column of 44 px rows */
.vh { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.nav-toggle {
  position: absolute; top: var(--bn-s3); right: var(--bn-gutter); width: var(--bn-touch); height: var(--bn-touch); padding: 0;
  display: inline-flex; align-items: center; justify-content: center; cursor: pointer;
  background: transparent; color: var(--bn-text); border: 1px solid rgba(232, 220, 200, 0.35); border-radius: var(--bn-r);
}
.nav-toggle[hidden] { display: none; }
.nav-toggle:hover, .nav-toggle[aria-expanded="true"] { background: rgba(232, 220, 200, 0.10); }
.nav-toggle-bars, .nav-toggle-bars::before, .nav-toggle-bars::after { display: block; width: 18px; height: 2px; background: currentColor; border-radius: 1px; }
.nav-toggle-bars { position: relative; }
.nav-toggle-bars::before, .nav-toggle-bars::after { content: ''; position: absolute; left: 0; }
.nav-toggle-bars::before { top: -6px; }
.nav-toggle-bars::after { top: 6px; }
.nav-collapsed .banner-id { padding-right: calc(var(--bn-touch) + var(--bn-s2)); }
.nav-collapsed .nav { display: none; }
.nav-collapsed.nav-open .nav { display: flex; flex-direction: column; gap: 0; margin-top: var(--bn-s2); padding-top: var(--bn-s1); border-top: 1px solid rgba(232, 220, 200, 0.2); font-size: 0.8rem; }
.nav-collapsed.nav-open .nav a, .nav-collapsed.nav-open .nav .nav-user { width: 100%; min-height: var(--bn-touch); padding: 0 var(--bn-s2); opacity: 0.9; border-bottom: 1px solid rgba(232, 220, 200, 0.12); border-left: 3px solid transparent; }
.nav-collapsed.nav-open .nav .nav-user { opacity: 0.6; }
.nav-collapsed.nav-open .nav a[aria-current="page"] { opacity: 1; border-bottom-color: rgba(232, 220, 200, 0.12); border-left-color: currentColor; }
/* a menu entry with sublinks (28): a button that opens its links below it on a wide screen, and in the column on a phone.
   Neither the hub's menu nor the admin's has one, so nothing here draws on either. */
.nav-group { position: relative; display: inline-flex; }
.nav-parent {
  display: inline-flex; align-items: center; min-height: var(--bn-touch); padding: 0 var(--bn-s1); white-space: nowrap; cursor: pointer;
  font: inherit; letter-spacing: inherit; color: var(--bn-text); opacity: 0.74; background: none; border: 0; border-bottom: 2px solid transparent;
}
.nav-parent::after { content: '\25BE'; margin-left: 0.35em; }
.nav-parent:hover, .nav-parent[aria-expanded="true"] { opacity: 1; }
.nav-parent[aria-current="true"] { opacity: 1; border-bottom-color: currentColor; }
.nav-sub { position: absolute; top: 100%; right: 0; z-index: 20; min-width: 12rem; display: flex; flex-direction: column; padding: var(--bn-s1) 0; background: var(--bn-bg); border: 1px solid rgba(232, 220, 200, 0.2); border-radius: var(--bn-r); }
.nav-sub[hidden] { display: none; }
.nav-sub a { width: 100%; padding: 0 var(--bn-s2); }
.nav-collapsed.nav-open .nav .nav-group { display: block; width: 100%; }
.nav-collapsed.nav-open .nav .nav-parent { width: 100%; justify-content: space-between; padding: 0 var(--bn-s2); opacity: 0.9; border-bottom: 1px solid rgba(232, 220, 200, 0.12); border-left: 3px solid transparent; }
.nav-collapsed.nav-open .nav .nav-parent[aria-current="true"] { opacity: 1; border-left-color: currentColor; }
.nav-collapsed.nav-open .nav .nav-sub { position: static; min-width: 0; padding: 0; background: none; border: 0; border-radius: 0; }
.nav-collapsed.nav-open .nav .nav-sub a { padding-left: calc(var(--bn-s2) + var(--bn-s3)); }
.rule { height: var(--bn-rule); background: var(--accent, #2E2418); }   /* the accent rule under the banner: the page's accent, ink by default on both sides */

/* ---------- wide: the name and tagline on the left, the links on the right of the same row ---------- */
@media (min-width: 760px) {
  .banner-inner { display: grid; grid-template-columns: auto 1fr; align-items: end; column-gap: var(--bn-s4); }
  .nav { justify-content: flex-end; margin-top: 0; gap: 0 var(--bn-s3); }
  .banner.nav-collapsed .banner-inner { display: block; }   /* a wide window with a long list collapses the same way */
  .banner.nav-collapsed.nav-open .nav { margin-top: var(--bn-s2); }
}