/* Farver (fra dit tema) */
:root{
  --brun:#5F5144; 
  --rod:#C27854; 
  --gron:#CBE2D6; 
  --gra:#E8E6DF; 
  --bg:#FBFAF7;
  --text:#2B2B2B;
}

/* Reset til header-området */
.site-header *{box-sizing:border-box}
.site-header{position:sticky; top:0; z-index:1000; backdrop-filter:saturate(130%) blur(8px);
  background:color-mix(in srgb, #fff 80%, transparent);
  border-bottom:1px solid color-mix(in srgb, var(--gra) 70%, transparent);
  transition:box-shadow .2s ease, background .2s ease, border-color .2s ease;
}
.site-header.scrolled{box-shadow:0 8px 24px rgba(0,0,0,.08); background:#ffffffda}

/* Lidt farve-lir som tynd topbar */
.accent-bar{height:3px; background:linear-gradient(90deg, var(--gron), var(--rod));}

/* Indre layout */
.site-header-inner{max-width:1100px; margin:0 auto; padding:10px 16px; display:flex; align-items:center; gap:14px}
.brand{display:flex; align-items:center; gap:10px; text-decoration:none; color:var(--brun)}
.brand-img{width:40px; height:40px; object-fit:cover; border-radius:12px; border:1px solid var(--gra); box-shadow:0 4px 10px rgba(0,0,0,.06)}
.brand-name{font-weight:700; letter-spacing:.2px}

/* Navigation – desktop */
.nav-wrap{margin-left:auto}
.main-nav{display:block}
.menu{display:flex; gap:8px; list-style:none; padding:0; margin:0}
.nav-link{
  --padX:14px; --padY:10px;
  position:relative; display:inline-flex; align-items:center; gap:8px;
  padding:var(--padY) var(--padX); border-radius:12px; text-decoration:none; color:var(--text);
  transition:background .15s ease, color .15s ease;
}
.nav-link::after{
  content:""; position:absolute; left:12px; right:12px; bottom:6px; height:2px;
  background:linear-gradient(90deg, var(--rod), var(--gron)); border-radius:2px;
  transform:scaleX(0); transform-origin:left; transition:transform .18s ease;
}
.nav-link:hover{background:rgba(194,120,84,.08)}
.nav-link:hover::after{transform:scaleX(1)}
.nav-link:focus-visible{outline:2px solid var(--rod); outline-offset:3px; border-radius:12px}

/* Aktiv side indikator */
.nav-link.is-active{color:var(--brun); background:rgba(203,226,214,.28)}
.nav-link.is-active::after{transform:scaleX(1)}

/* Burgerknap */
.menu-toggle{
  margin-left:8px; appearance:none; border:none; background:transparent; cursor:pointer; padding:10px;
  border-radius:12px; transition:background .15s ease; display:none; /* skjult på desktop */
}
.menu-toggle:hover{background:rgba(0,0,0,.05)}
.menu-toggle:focus-visible{outline:2px solid var(--rod); outline-offset:3px}
.burger, .burger::before, .burger::after{
  content:""; display:block; width:22px; height:2px; background:var(--text); border-radius:2px;
  transition:transform .18s ease, opacity .18s ease, top .18s ease;
  position:relative;
}
.burger::before{position:absolute; top:-7px}
.burger::after{position:absolute; top:7px}

/* Burger -> X når menu er åben */
.menu-toggle[aria-expanded="true"] .burger{transform:rotate(45deg)}
.menu-toggle[aria-expanded="true"] .burger::before{opacity:0}
.menu-toggle[aria-expanded="true"] .burger::after{transform:rotate(-90deg); top:0}

/* Mobile nav */
@media (max-width: 860px){
  .menu-toggle{display:block}
  .nav-wrap{margin-left:auto}
  .main-nav{
    position:absolute; inset-inline:0; top:calc(100% + 3px); 
    background:color-mix(in srgb, #fff 92%, transparent);
    border-bottom:1px solid var(--gra);
    transform:translateY(-6px); opacity:0; pointer-events:none; 
    transition:transform .18s ease, opacity .18s ease;
  }
  .main-nav.open{transform:translateY(0); opacity:1; pointer-events:auto}
  .menu{flex-direction:column; gap:4px; padding:10px}
  .nav-link{border-radius:10px; padding:12px 14px}
  body.nav-open{overflow:hidden}
}

/* Respektér reduceret animation */
@media (prefers-reduced-motion: reduce){
  .nav-link::after, .menu-toggle .burger{transition:none}
}
.sr-only{position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip:rect(0 0 0 0); border:0}

/* --- FIX: Select viser prikker / er næsten usynlig --- */
.form-card select {
  appearance: none !important;
  -webkit-appearance: none !important;
  background:#fff !important;

  /* Tving synlig tekst */
  color:#222 !important;
  
  

 

  /* Stabil højde/typografi */
  font-size:1rem !important;
  line-height:1.2 !important;
  padding:12px 14px !important;
  border:1px solid #d7d5cf !important;
  border-radius:12px !important;
}

/* Valideringsfarve uden at ændre tekstfarven */
.form-card select:required:invalid {
  background:#fff7f6 !important;
  border-color:#e8b1a3 !important;
  color:#222 !important;                /* behold læsbar tekst */
  -webkit-text-fill-color:#222 !important;
}
