/* ═══════════════════════════════════════════════════════
   RÊS — Cabeçalho compartilhado (.rh)
   Autocontido: não depende de theme.css nem dos tokens de cada página.
   Uso: <header class="rh" data-rh> … </header> + js/header.js
═══════════════════════════════════════════════════════ */

.rh {
  --rh-ink:    #1C1208;
  --rh-ink2:   #4C3820;
  --rh-ink3:   #8C7050;
  --rh-line:   rgba(28,18,8,0.08);
  --rh-line2:  rgba(28,18,8,0.14);
  --rh-orange: #C96000;
  --rh-orange2:#E07000;
  --rh-green:  #1A6B47;
  --rh-h:      64px;

  position: sticky; top: 0; z-index: 500;
  background: rgba(245,238,227,0.78);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
  backdrop-filter: blur(18px) saturate(160%);
  border-bottom: 1px solid transparent;
  font-family: 'Hanken Grotesk', system-ui, sans-serif;
  color: var(--rh-ink);
  line-height: 1.2;
  transition: background .25s ease, border-color .25s ease, box-shadow .25s ease, transform .3s ease;
}
.rh.is-scrolled {
  background: rgba(245,238,227,0.92);
  border-bottom-color: var(--rh-line);
  box-shadow: 0 10px 30px -18px rgba(28,18,8,0.25);
}
.rh *, .rh *::before, .rh *::after { box-sizing: border-box }

.rh-in {
  max-width: 1360px; margin: 0 auto;
  height: var(--rh-h);
  padding: 0 clamp(16px, 4vw, 48px);
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  grid-template-areas: "brand nav actions";
  align-items: center; gap: 24px;
}

/* ── Marca ───────────────────────────────────────────── */
.rh-brand {
  grid-area: brand; justify-self: start;
  display: inline-flex; align-items: center; gap: 10px;
  text-decoration: none; color: var(--rh-ink);
  min-width: 0;
}
.rh-brand img { height: 30px; width: auto; display: block; flex-shrink: 0 }
.rh-word {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 25px; letter-spacing: .06em; line-height: 1;
  padding-top: 2px;
}
.rh-context {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: 'DM Mono', monospace; font-size: 10px; font-weight: 500;
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--rh-ink3); white-space: nowrap;
}
.rh-context::before {
  content: ''; width: 1px; height: 18px; background: var(--rh-line2);
}

/* ── Navegação ───────────────────────────────────────── */
.rh-nav {
  grid-area: nav;
  display: flex; align-items: center; gap: 2px;
  padding: 4px;
  background: rgba(255,255,255,0.55);
  border: 1px solid var(--rh-line);
  border-radius: 999px;
  list-style: none; margin: 0;
}
.rh-nav a {
  display: block; white-space: nowrap;
  padding: 7px 14px; border-radius: 999px;
  font-size: 13px; font-weight: 500; letter-spacing: .01em;
  color: var(--rh-ink3); text-decoration: none;
  transition: color .2s, background .2s, box-shadow .2s;
}
.rh-nav a:hover { color: var(--rh-ink); background: rgba(28,18,8,0.04) }
.rh-nav a.is-active, .rh-nav a[aria-current="page"] {
  color: var(--rh-ink); background: #fff;
  box-shadow: 0 1px 2px rgba(28,18,8,0.08), 0 2px 8px rgba(28,18,8,0.05);
}
.rh-nav a:focus-visible, .rh-btn:focus-visible, .rh-brand:focus-visible, .rh-icon-btn:focus-visible {
  outline: 2px solid var(--rh-orange); outline-offset: 2px;
}

/* ── Ações ───────────────────────────────────────────── */
.rh-actions {
  grid-area: actions; justify-self: end;
  display: flex; align-items: center; gap: 10px;
}
.rh-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  height: 36px; padding: 0 16px; border-radius: 999px;
  font-family: inherit; font-size: 13px; font-weight: 500; letter-spacing: .01em;
  color: var(--rh-ink2); background: transparent;
  border: 1px solid var(--rh-line2);
  text-decoration: none; white-space: nowrap; cursor: pointer;
  transition: color .2s, background .2s, border-color .2s, transform .2s;
}
.rh-btn:hover { color: var(--rh-ink); border-color: rgba(28,18,8,0.28); background: rgba(255,255,255,0.6) }
.rh-btn svg { flex-shrink: 0; width: 15px; height: 15px; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round }
.rh-btn--primary {
  color: #fff; background: var(--rh-orange); border-color: var(--rh-orange);
  box-shadow: 0 4px 14px -6px rgba(201,96,0,0.6);
}
.rh-btn--primary:hover { color: #fff; background: var(--rh-orange2); border-color: var(--rh-orange2) }

/* Status ao vivo (home) */
.rh-status {
  display: inline-flex; align-items: center; gap: 8px;
  height: 30px; padding: 0 12px; border-radius: 999px;
  font-family: 'DM Mono', monospace; font-size: 11px; letter-spacing: .02em;
  color: var(--rh-green);
  background: rgba(26,107,71,0.08); border: 1px solid rgba(26,107,71,0.16);
  white-space: nowrap;
}
.rh-status i {
  width: 6px; height: 6px; border-radius: 50%; background: var(--rh-green);
  box-shadow: 0 0 0 3px rgba(26,107,71,0.15);
  animation: rhPulse 2.2s ease infinite;
}
@keyframes rhPulse { 0%,100% { opacity: 1 } 50% { opacity: .4 } }

/* Usuário logado */
.rh-user { display: flex; align-items: center; gap: 10px; padding-right: 4px }
.rh-avatar {
  width: 34px; height: 34px; border-radius: 50%; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 600; letter-spacing: .02em;
  color: var(--rh-orange); background: rgba(201,96,0,0.10);
  border: 1px solid rgba(201,96,0,0.22);
}
.rh-user--green .rh-avatar { color: var(--rh-green); background: rgba(26,107,71,0.09); border-color: rgba(26,107,71,0.22) }
.rh-user-info { display: flex; flex-direction: column; gap: 3px; min-width: 0 }
.rh-user-name {
  font-size: 13px; font-weight: 500; color: var(--rh-ink); line-height: 1;
  max-width: 160px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.rh-user-role {
  font-family: 'DM Mono', monospace; font-size: 9.5px; line-height: 1;
  letter-spacing: .14em; text-transform: uppercase; color: var(--rh-orange);
}
.rh-user--green .rh-user-role { color: var(--rh-green) }
.rh-sep { width: 1px; height: 24px; background: var(--rh-line2) }

/* ── Responsivo ──────────────────────────────────────── */
@media (max-width: 1100px) {
  .rh-in {
    height: auto;
    grid-template-columns: 1fr auto;
    grid-template-areas: "brand actions" "nav nav";
    gap: 0 12px;
  }
  .rh-brand, .rh-actions { height: 58px }
  .rh-nav {
    justify-self: stretch;
    margin: 0 calc(-1 * clamp(16px, 4vw, 48px));
    padding: 0 clamp(16px, 4vw, 48px) 10px;
    background: none; border: none; border-radius: 0;
    overflow-x: auto; scrollbar-width: none;
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 16px, #000 calc(100% - 24px), transparent 100%);
            mask-image: linear-gradient(90deg, transparent 0, #000 16px, #000 calc(100% - 24px), transparent 100%);
  }
  .rh-nav::-webkit-scrollbar { display: none }
  .rh-nav a { padding: 7px 13px; background: rgba(255,255,255,0.45); border: 1px solid var(--rh-line); margin-right: 4px }
  .rh-nav a.is-active, .rh-nav a[aria-current="page"] { background: var(--rh-ink); color: #F5EEE3; border-color: var(--rh-ink); box-shadow: none }
  .rh.is-hidden { transform: translateY(-100%) }
  .rh.is-hidden.has-nav { transform: translateY(-58px) }
}
@media (max-width: 720px) {
  .rh-user-info, .rh-sep, .rh-status, .rh-hide-sm { display: none }
  .rh-btn-label { display: none }
  .rh-btn--icon-sm { width: 36px; padding: 0 }
}
@media (max-width: 480px) {
  .rh-context { display: none }
  .rh-actions { gap: 8px }
  .rh-btn:not(.rh-btn--icon-sm) { padding: 0 14px }
}
@media (prefers-reduced-motion: reduce) {
  .rh, .rh * { transition: none !important; animation: none !important }
}

html { scroll-padding-top: 84px }
@media (max-width: 1100px) { html { scroll-padding-top: 116px } }