/* ════════════════════════════════════════════════════════════════════
   SymposiON · friezes.css
   Reimagines the fixed "brown bands" (top .nav + bottom .footer) as
   theme-aware Greek-key friezes. The band is a tinted strip masked by a
   tiling motif, so it re-tints with --sym-accent and swaps motif per
   season. Pure CSS; the motif mask + seasonal ornaments are set by
   ornaments.js (which writes --rt-frieze-mask + injects the decor row).
   Load AFTER main.css. Safe to ship — it only adds ::before/::after
   strips and a decor row; remove the include to revert.
   ════════════════════════════════════════════════════════════════════ */

:root {
  --rt-frieze-h: 12px;
  --rt-cornice-h: 14px;
  /* default motif = running meander (Greek key); ornaments.js overrides per season */
  --rt-frieze-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='13' viewBox='0 0 24 13'%3E%3Crect x='0' y='0.4' width='24' height='0.9' fill='%23000'/%3E%3Cpath d='M2,11 V3 H14 V11 H7 V6 H11' fill='none' stroke='%23000' stroke-width='1.4' stroke-linecap='square'/%3E%3Crect x='0' y='11.7' width='24' height='0.9' fill='%23000'/%3E%3C/svg%3E");
}

/* ── the frieze strip, shared ── */
.rt-frieze {
  display: block; width: 100%; height: var(--rt-frieze-h);
  background-color: color-mix(in srgb, var(--sym-accent) 60%, transparent);
  -webkit-mask: var(--rt-frieze-mask) repeat-x center / auto 100%;
          mask: var(--rt-frieze-mask) repeat-x center / auto 100%;
  transition: background-color .4s cubic-bezier(.16,1,.3,1);
  pointer-events: none;
}
[data-sym-theme] .rt-frieze { background-color: color-mix(in srgb, var(--sym-accent) 60%, transparent); }

/* on light themes the band reads better a touch darker */
[data-sym-theme="alabaster"] .rt-frieze,
[data-sym-theme="alabaster-asphodel"] .rt-frieze,
[data-sym-theme="alabaster-noel"] .rt-frieze,
[data-sym-theme="alabaster-anastasi"] .rt-frieze,
[data-sym-theme="alabaster-apokries"] .rt-frieze,
[data-sym-theme="elysium"] .rt-frieze,
.season-christmas .rt-frieze, .season-easter .rt-frieze {
  background-color: color-mix(in srgb, var(--sym-accent) 42%, transparent);
}

/* ── NAV: frieze pinned along the bottom edge ── */
.nav { position: relative; }
.nav .rt-frieze--nav {
  position: absolute; left: 0; right: 0; bottom: 0; height: var(--rt-frieze-h);
}

/* ── FOOTER: a cornice frieze along the top + a row of ornaments ── */
.footer { position: relative; }
.footer .rt-frieze--foot {
  position: absolute; left: 0; right: 0; top: 0; height: var(--rt-cornice-h);
}
.rt-decor-row {
  display: flex; align-items: center; justify-content: center; gap: 30px;
  padding: 18px 0 6px; color: var(--sym-accent);
  transition: color .4s cubic-bezier(.16,1,.3,1);
}
.rt-decor-row .rt-di { width: 26px; height: 26px; opacity: .85; }
.rt-decor-row .rt-di svg { width: 100%; height: 100%; display: block; }
.rt-decor-row .rt-di .acc { fill: var(--sym-accent2, var(--sym-sage)); }
.rt-decor-row .rt-di .lit { fill: color-mix(in srgb, var(--sym-accent) 88%, #fff 12%); }
[data-sym-theme="alabaster"] .rt-decor-row .rt-di .lit,
.season-christmas .rt-decor-row .rt-di .lit,
.season-easter .rt-decor-row .rt-di .lit { fill: var(--sym-accent); }