/* ============================================================================
 *  elements · v29 — Codex-Sigil topbar
 *  --------------------------------------------------------------------------
 *  Hebt das site-header brand auf energies-niveau:
 *    – Illuminated SVG-Sigil (gold-leaf + 5-element-jewels)
 *    – Drei-Register Wortzug: Capitulum-incipit · Instrument Serif title
 *      · Astrolabium-Rubrik mit ☉ und MMXXVI
 *    – Hebrew letter א (Aleph · Anfang) eingebettet im Cartouche
 *
 *  Strategie: additiv. Existing .site-header bleibt, .brand wird neutralisiert
 *  und durch .site-header > .brand-codex ersetzt.
 *  ========================================================================= */

:root {
  --el-vl-gold-deep:    #7e5a17;
  --el-vl-gold:         #c9a44a;
  --el-vl-gold-light:   #f5deb3;
  --el-vl-gold-soft:    rgba(212, 175, 55, .42);
  --el-ease-organic:    cubic-bezier(.2, .7, .2, 1);

  /* v29.2 · Gold-Token-Konsolidierung — align elements' --accent-gold with
   * the canonical chazon-shared gold (#c9a44a) so the medaillon's two halves
   * share one gold instead of three (#c9a44a / #c9a961 / #e6b800). Overrides
   * elements.css:40 base definition via :root specificity equality + load-order. */
  --accent-gold:        #c9a44a;
  --accent-copper:      #7e5a17;
  --line-soft:          rgba(201, 164, 74, 0.15);
  --line-mid:           rgba(201, 164, 74, 0.3);
}

/* Neutralise existing simple brand if the codex variant is in use */
.site-header .brand-codex ~ .brand,
.site-header .brand.brand-codex .sigil {
  /* legacy unicode hex glyph — replaced by SVG sigil */
}

.site-header .brand-codex {
  display: flex !important;
  align-items: stretch;
  gap: 1.1rem;
  color: var(--text-bright);
  text-decoration: none;
  font-family: 'Instrument Serif', 'Cormorant Garamond', serif;
  font-style: normal;
  font-size: initial;
  position: relative;
}

/* ---------- Illuminated sigil ---------- */
.codex-sigil {
  width: var(--chx-sigil-size, 72px);   /* shared token: pari pari mit energies */
  height: var(--chx-sigil-size, 72px);
  flex-shrink: 0;
  align-self: flex-start;
  transform: translateY(-2px);
}
.codex-sigil svg {
  width: 100%;
  height: 100%;
  display: block;
  overflow: visible;
}
.codex-gold {
  animation: codex-gold-shimmer 9s ease-in-out infinite;
}
@keyframes codex-gold-shimmer {
  0%, 100% { filter: brightness(1) saturate(1); }
  50%      { filter: brightness(1.15) saturate(1.2); }
}
.codex-vine {
  stroke-dasharray: 200;
  stroke-dashoffset: 0;
  animation: codex-vine-grow 14s ease-out infinite;
}
@keyframes codex-vine-grow {
  0%   { stroke-dashoffset: 200; opacity: 0; }
  15%  { opacity: 1; }
  25%, 100% { stroke-dashoffset: 0; opacity: 1; }
}
.codex-jewel {
  transform-origin: center;
  transform-box: fill-box;
  animation: codex-jewel-pulse 5s ease-in-out infinite;
}
@keyframes codex-jewel-pulse {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.18); }
}

/* ---------- Three-register wordmark ---------- */
.codex-wordmark {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: .25rem;
  padding: .15rem 0 .1rem;
}
.codex-incipit {
  font-family: 'JetBrains Mono', monospace;
  font-weight: 500;
  font-size: .56rem;
  letter-spacing: .32em;
  color: rgba(201, 164, 74, .68);
  text-transform: uppercase;
  line-height: 1;
}
.codex-title {
  /* v29.3 · Pol-coding via type: elements/Tabula nutzt Instrument Serif
     ("engraving"-tone, sharper display-serif, passt zum Periodensystem-
     Tafel-Charakter). Energies/Capitulum nutzt Cormorant ("manuscript"
     -tone, humanist warm, passt zum illuminierten Manuskript). Beide
     italic 1.45rem — gleiche Tonart, anderer Pol. */
  font-family: 'Instrument Serif', 'Cormorant Garamond', serif;
  font-weight: 400;
  font-style: italic;
  font-size: 1.45rem;
  line-height: 1;
  letter-spacing: -.005em;
  color: var(--text-bright);
  white-space: nowrap;
}
.codex-title em {
  font-style: italic;
  color: var(--el-vl-gold);
  font-weight: 400;
  transition: color .35s var(--el-ease-organic);
}
.codex-rubric {
  display: flex;
  align-items: center;
  gap: .55rem;
  font-family: 'JetBrains Mono', monospace;
  font-weight: 500;
  font-size: .58rem;
  letter-spacing: .24em;
  color: var(--text-soft);
  text-transform: uppercase;
  line-height: 1;
}
.codex-rule {
  display: inline-block;
  width: 24px;
  height: 1px;
  background: linear-gradient(90deg,
    transparent 0%,
    var(--el-vl-gold) 28%,
    var(--el-vl-gold) 72%,
    transparent 100%);
  position: relative;
  overflow: hidden;
}
.codex-rule::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.6), transparent);
  animation: el-rule-pass 5s linear infinite;
}
.codex-sun {
  color: var(--el-vl-gold);
  font-family: 'Cormorant Garamond', serif;
  font-size: .9rem;
  letter-spacing: 0;
  font-variant-emoji: text;
  text-rendering: optimizeLegibility;
  line-height: 1;
  transform: translateY(-1px);
}
.codex-rubric-faded {
  opacity: .58;
}

.site-header .brand-codex:hover .codex-title em {
  color: var(--el-vl-gold-light);
}
.site-header .brand-codex:hover .codex-jewel {
  animation-duration: 2s;
}

@keyframes el-rule-pass {
  0%   { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}

/* ---------- Responsive (v29.2: sigil sizing now via --chx-sigil-size token in shared.css) ---------- */
@media (max-width: 820px) {
  .site-header .brand-codex { gap: .85rem; }
  .codex-incipit { display: none; }
  .codex-title { font-size: 1.2rem; }
  .codex-rubric { font-size: .54rem; gap: .45rem; letter-spacing: .2em; }
  .codex-rubric-faded { display: none; }
  .codex-sun { font-size: .8rem; }
}
@media (max-width: 480px) {
  .site-header .brand-codex { gap: .7rem; }
  .codex-title { font-size: 1.02rem; }
  .codex-rubric { display: none; }
  .codex-wordmark { gap: .1rem; }
}

/* ============================================================================
 * v29.1 · Neutralise legacy .lang-toggle pill styling so the new
 *         chx-lang-toggle illuminated-rubric pattern takes over cleanly.
 *         elements.css still defines a pill with gold-fill for the same
 *         container element — we strip that here so the dual class
 *         <div class="lang-toggle chx-lang-toggle"> shows only the new look.
 * ============================================================================ */
.site-header .lang-toggle.chx-lang-toggle {
  background: transparent;
  border: 0;
  border-radius: 0;
  padding: 0.95rem 0.85rem 0.7rem;
  gap: 0.6rem;
  font-size: 0.66rem;
}
.site-header .lang-toggle.chx-lang-toggle .chx-lang-btn {
  background: transparent;
  border: 0;
  border-radius: 0;
  padding: 0;
  color: inherit;       /* let chazon-shared.css drive the colour */
  letter-spacing: 0.32em;
}
/* The .active class in elements.js conflicts with shared.css' active styles
   for the wrapper element — neutralise wrapper-level treatment if any. */
.site-header .lang-toggle.chx-lang-toggle .chx-lang-btn.active {
  background: transparent;
  color: var(--chx-lt-gold-light, #f5deb3);
}

/* ============================================================================
 * v29.4 · Hero-padding clamp (audit S finding)
 *
 * elements.css:254 has padding: 8rem 2rem 6rem fixed — on viewports between
 * 720-768px that's ~128px wasted before h1. Clamp gives fluid scaling:
 *   · min 3.5rem top on tiny screens
 *   · max 8rem top on wide screens
 *   · 1rem top + 5vw fluid in between
 * ============================================================================ */
.hero {
  padding-top:    clamp(3.5rem, 1rem + 5vw, 8rem);
  padding-bottom: clamp(2.5rem, 0.5rem + 4vw, 6rem);
  padding-inline: clamp(1rem, 0.5rem + 1.5vw, 2rem);
}

/* v29.5 · Hide legacy .progress-rail — chx-rail (shared component)
   übernimmt jetzt die Sektionen-Navigation. */
.progress-rail { display: none !important; }

/* v29.6 · ask-ai-fab adopts shared chx-ai-fab pattern. Neutralise the
   base elements.css .ask-ai-fab + .ask-ai-fab-sigil rules so chx-ai-fab
   (from chazon-shared.css) drives the visual. */
.ask-ai-fab.chx-ai-fab {
  /* Keep elements.css' .visible + .ask-ai-fab transitions intact, but
     let chx-ai-fab in shared handle dimensions, colors, padding. */
  padding: 0.5rem 1.1rem 0.5rem 0.5rem;
  gap: 0.7rem;
}
.ask-ai-fab.chx-ai-fab .chx-ai-fab__sigil.ask-ai-fab-sigil {
  /* Override the base 22px width — chx-ai-fab__sigil wants 38px */
  width: 38px; height: 38px;
}