/* ═════════════════════════════════════════════════════════
   MODULE HEADER — shared big logo + tag + title layout.
   Same template as arena-roar-challenge.html.

   Markup:
     <div class="header">
       <img class="logo" id="header_logo" style="display:none" alt="">
       <div class="tag" id="tagLine"></div>
       <div class="title" id="titleWrap"></div>
     </div>
═════════════════════════════════════════════════════════ */

.header {
  text-align: center;
  padding: 0.5rem 0 0.4rem;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  flex-shrink: 0;
}

.header .logo {
  max-width: 200px;
  max-height: 80px;
  width: auto;
  height: auto;
  margin: 0.5rem auto;
  display: block;
  object-fit: contain;
}

.header .tag {
  font-family: var(--secondary-font-family);
  font-size: calc(var(--secondary-font-size, 0.7rem) * 0.6);
  letter-spacing: 0.25em;
  color: var(--primary-color);
  text-transform: uppercase;
  margin-bottom: 0.25rem;
}

.header .title {
  font-size: calc(var(--font-size, 1.5rem) * 1.2);
  font-weight: 800;
  line-height: 0.92;
  letter-spacing: 0.02em;
  color: var(--secondary-color);
  font-family: var(--font-family);
  text-transform: uppercase;
}

.header .title em {
  color: var(--primary-color);
  font-style: normal;
}