/* /assets/header.css
   Mobilmeny (native <details>) – stabil och enkel
*/

/* =========================
   BRAND / LOGO (audit-friendly)
   - tydlig i liten storlek
   - konsekvent på alla sidor
========================= */

.brand{
  display:flex;
  align-items:center;
  gap:10px;
  font-weight: 950;
  letter-spacing: .2px;
  color: rgba(234,240,255,.92);
  text-decoration:none;
  font-size: 16px;
}
.brand:hover{ text-decoration:none; }

/* Span.logo i din HTML */
.logo{
  display:inline-block;
  width: 28px;
  height: 28px;
  border-radius: 10px;
  position: relative;
  flex: 0 0 auto;

  /*
    Använd SVG-loggan som bakgrund.
    Viktigt: background-size: contain + center ger stabilt utseende.
  */
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;

  /*
    Primär sökväg:
    - om du lagt filen i: dist/assets/logo/proofy-mark.svg
  */
  background-image: url("/assets/logo/proofy-mark.svg");

  /*
    SVG + liten storlek:
    undvik extra border/box-shadow som kan ge "konstig" kant eller optisk skevhet
    när SVG redan har egen form.
  */
  border: none;
  box-shadow: none;

  /*
    Om SVG skulle faila att ladda:
    en diskret bakgrund så du inte får "tomt hål" i navbar.
    (Den syns bara om bilden inte laddas.)
  */
  background-color: rgba(255,255,255,.06);
}

/*
  Fallback om du råkar ha lagt filen i en underkatalog.
  (Denna rad påverkar bara om första url:en inte finns och du byter manuellt i Git senare.)
  Om du VET exakt var din fil ligger kan du ta bort den här kommentaren och sätta rätt path.
*/
/* .logo{ background-image: url("/assets/logo/logo/proofy-mark.svg"); } */

/* Ta bort gamla CSS-"P" helt */
.logo::after{
  content: none;
}

/* Lite tightare på mobil */
@media (max-width: 920px){
  .brand{ gap: 9px; font-size: 15.5px; }
  .logo{ width: 27px; height: 27px; }
}

/* SÄKER “last-wins” försäkring (begränsad):
   Undvik !important där det går – men säkra minsta storlek. */
.brand .logo{
  min-width: 28px;
  min-height: 28px;
}

/* =========================
   MOBILMENY
========================= */

.mnav{
  display:none; /* visas på mobil */
  position: relative;
  flex: 0 0 auto;
  margin-left: auto;
}

/* Scrim för att minska dubbelhandling (audit-safe).
   Visas endast när details är open. */
.mnavScrim{
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.28);
  z-index: 1999; /* under menyn, över sidan */
  display: none;
}

/* Visa scrim när menyn är öppen */
.mnav[open] .mnavScrim{
  display: block;
}

.mnavSummary{
  list-style: none;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width: 48px;
  height: 44px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
  color: rgba(234,240,255,.92);
  cursor:pointer;
  user-select:none;
}

.mnavSummary::-webkit-details-marker{ display:none; }

.mnavSummary:hover{
  background: rgba(255,255,255,.10);
  border-color: rgba(255,255,255,.18);
}

/* Visuell indikator när menyn är öppen */
.mnav[open] .mnavSummary{
  border-color: rgba(110,168,255,.35);
  box-shadow: 0 0 0 2px rgba(110,168,255,.10);
  background: rgba(110,168,255,.10);
}

.mnavIcon{
  width: 22px;
  height: 2px;
  background: rgba(234,240,255,.92);
  border-radius: 999px;
  position: relative;
  display:block;
}
.mnavIcon::before,
.mnavIcon::after{
  content:"";
  position:absolute;
  left:0;
  width: 22px;
  height: 2px;
  background: rgba(234,240,255,.92);
  border-radius: 999px;
}
.mnavIcon::before{ top: -7px; }
.mnavIcon::after{ top:  7px; }

.mnavMenu{
  position: absolute;
  right: 0;
  top: calc(100% + 10px);
  width: min(86vw, 360px);
  padding: 12px;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.10);

  /* HARDTEST/AUDIT: solid background only (no blur/backdrop-filter) */
  background: rgba(11,18,32,.98);

  box-shadow: 0 18px 60px rgba(0,0,0,.45);
  display: flex;
  flex-direction: column;
  gap: 10px;
  z-index: 2000;

  /* HARDTEST: menu must be usable on small viewport heights */
  max-height: calc(100vh - 92px);
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;

  /* HARDTEST: avoid horizontal overflow inside menu */
  overflow-x: hidden;
}

.mnavLink{
  display:flex;
  align-items:center;
  justify-content:flex-start;
  padding: 14px 16px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.04);
  text-decoration:none;
  font-weight: 900;
  font-size: 16px;
  color: rgba(234,240,255,.92);

  /* Prevent overflow on narrow screens if labels change */
  overflow-wrap: anywhere;
  word-break: break-word;
}
.mnavLink:hover{
  background: rgba(255,255,255,.07);
  border-color: rgba(255,255,255,.14);
}
.mnavLinkPrimary{
  border: none;
  color: #08101e;
  background: linear-gradient(135deg, rgba(110,168,255,.95), rgba(124,241,198,.85));
}

.mnavMeta{
  margin-top: 6px;
  padding-top: 10px;
  border-top: 1px solid rgba(255,255,255,.10);
  display:flex;
  flex-direction:column;
  gap: 8px;
}

.mnavNote{
  color: rgba(169,183,211,.92);
  font-size: 13px;
  font-weight: 800;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.mnavMail{
  display:inline-flex;
  align-items:center;
  justify-content:flex-start;
  padding: 12px 14px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.03);
  text-decoration:none;
  font-weight: 900;
  color: rgba(234,240,255,.92);

  overflow-wrap: anywhere;
  word-break: break-word;
}

/* ------- Responsive rules ------- */
@media (max-width: 920px){
  #navActionsDesktop{ display:none !important; }
  .mnav{ display:block; }
  .nav{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:14px;
  }
}

@media (min-width: 921px){
  .mnav{ display:none !important; }
}

/* SÄKERT TILLÄGG – policy/sekundära länkar i mobilmenyn (endast mobil) */
.mnavMeta .mnavLink{
  padding: 12px 14px;
  border-radius: 14px;
  background: rgba(255,255,255,.03);
  font-weight: 900;
  font-size: 14.5px;
  border-color: rgba(255,255,255,.08);
}

.mnavMeta .mnavLink:hover{
  background: rgba(255,255,255,.06);
  border-color: rgba(255,255,255,.12);
}

.mnavMeta .mnavLink[aria-current="page"]{
  border-color: rgba(110,168,255,.45);
  box-shadow: 0 0 0 1px rgba(110,168,255,.18) inset;
}

/* PRINT/PDF: mobilenheter/meny ska aldrig påverka bevisbilaga */
@media print{
  .mnav,
  .mnavMenu,
  .mnavScrim{
    display:none !important;
  }
}