/* ════════════════════════════════════════════════════════════════
   Mäklargruvan — KANONISK HEADER (delad)
   Enda källan för toppbarens stil. Markup byggs av /js/mg-header.js.
   Ändra header-look här; ändra nav/struktur i mg-header.js.
   Tema-knappen bor i Inställningar (ej i toppbaren).
   ════════════════════════════════════════════════════════════════ */
header,
#mg-header{
  background:rgba(255,253,249,.88);
  backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
  border-bottom:1px solid var(--line);
  position:sticky;top:0;z-index:100;
  /* !important behålls med flit: utan dem vinner mg-sociala-medier.css rad 49
     (header{height:64px!important} vid ≤700px) och sociala får en avvikande mobilheader. */
  height:var(--mg-header-h)!important;max-height:var(--mg-header-h)!important;min-height:var(--mg-header-h)!important;
  display:flex;align-items:center;padding:0;box-sizing:border-box;
}
body[data-theme="dark"] header,
body[data-theme="dark"] #mg-header{ background:rgba(16,25,37,.92);border-bottom-color:rgba(255,255,255,.13) }

.header-inner{max-width:1740px;margin:0 auto;width:100%;padding:0 1.5rem;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:1rem}
.header-left{display:flex;align-items:center;gap:.85rem;min-width:0}
.header-center{display:flex;align-items:center;gap:.55rem;justify-content:center}
.header-right{display:flex;align-items:center;gap:.55rem;justify-content:flex-end}

.mg-brand{display:flex;align-items:center;gap:.7rem;text-decoration:none;color:inherit}
.mg-brand svg{flex-shrink:0}
.mg-wordmark{font-family:var(--display);font-size:2rem;font-weight:600;letter-spacing:0;color:var(--text);line-height:1;white-space:nowrap}
.mg-wordmark em{font-style:italic;background:var(--g-shine);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:var(--g);font-weight:500}
.h-subtitle{font-family:var(--display);font-style:italic;font-size:1.05rem;color:var(--text-soft);padding-left:14px;border-left:1px solid var(--line);white-space:nowrap;font-weight:400}

/* Nav-pills (ikon + etikett) */
.h-btn{background:var(--mg-surface);border:1px solid transparent;color:var(--text);border-radius:999px;padding:.52rem 1rem;font-size:.88rem;font-weight:700;cursor:pointer;display:inline-flex;align-items:center;gap:.45rem;;text-decoration:none;transition:all .15s;line-height:1;white-space:nowrap;position:relative}
.h-btn svg{width:16px;height:16px;flex-shrink:0}
.h-btn:hover{background:#fff;border-color:var(--g);transform:translateY(-1px)}
.h-btn.active{background:#fff;border-color:transparent;color:var(--text);font-weight:700}
.h-btn.active::after{content:'';position:absolute;left:18%;right:18%;bottom:-14px;height:2px;background:var(--g-shine);border-radius:2px}
body[data-theme="dark"] .h-btn{background:rgba(21,34,51,.60);border-color:rgba(255,255,255,.08);color:var(--mg-dark-ink)}
body[data-theme="dark"] .h-btn:hover{background:rgba(21,34,51,.80);border-color:rgba(201,154,95,.35)}

.badge-pilot{background:var(--g-shine);color:#fff;font-size:.72rem;font-weight:700;padding:.35rem .8rem;border-radius:20px;white-space:nowrap;letter-spacing:.04em;}

/* Inställningar (kugghjul) */
.settings-btn-top{background:rgba(255,255,255,.95);border:1px solid var(--line);border-radius:50%;width:46px;height:46px;display:flex;align-items:center;justify-content:center;cursor:pointer;flex-shrink:0;transition:all .15s;padding:0}
.settings-btn-top:hover{background:#fff;border-color:var(--g)}
.settings-btn-top svg{width:21px;height:21px;color:var(--text)}
body[data-theme="dark"] .settings-btn-top{background:rgba(21,34,51,.60);border-color:rgba(255,255,255,.10)}
body[data-theme="dark"] .settings-btn-top:hover{background:rgba(21,34,51,.90);border-color:rgba(201,154,95,.40)}
body[data-theme="dark"] .settings-btn-top svg{color:var(--mg-dark-ink)}

/* Dölj sekundära knappar/etiketter på smal skärm */
@media (max-width:900px){
  .h-mobile-hide{display:none!important}
  .h-btn .h-nav-label{display:none}
  .h-subtitle{display:none}
}