/* brand.css — Halopack-huisstijl (oranje / wit / zwart).
   Laadt ná de pagina-stijl en overschrijft de accenten.
   Exacte merk-oranje? Pas alleen --orange hieronder aan. */
:root{
  --orange:#ee7203;     /* Halopack-oranje (bij benadering) */
  --orange-d:#cf6203;   /* donkerder voor hover */
  --orange-t:#fdeede;   /* lichte tint voor badges/knoppen */
  --ink:#1a1a1a;        /* zwart voor tekst */
  --muted:#6b6b6b;
  --line:#e6e6e4;
  --bg:#f5f5f3;
}

body{ background:var(--bg) !important; color:var(--ink) !important; }

/* Witte merkbalk met logo links, titel, navigatie rechts */
header{
  background:#ffffff !important;
  color:var(--ink) !important;
  border-bottom:2px solid var(--orange);
  display:flex !important;
  align-items:center;
  gap:22px;
  padding:12px 24px !important;
  justify-content:flex-start !important;
}
header .brand{ display:inline-flex; align-items:center; line-height:0; text-decoration:none; }
header .logo{ height:32px; width:auto; display:block; }
header h1{
  margin:0 !important;
  font-size:16px !important;
  font-weight:700 !important;
  color:var(--ink) !important;
}
header nav{ margin-left:auto; }
header nav a{
  color:var(--ink) !important;
  text-decoration:none;
  font-weight:600;
  margin-left:18px;
}
header nav a:hover{ color:var(--orange) !important; }

/* Woordmerk-fallback als er (nog) geen logobestand is */
.logotext{
  font-size:20px; font-weight:800; letter-spacing:-.5px; color:var(--ink);
}
.logotext em{ color:var(--orange); font-style:normal; }

/* Oranje accenten */
.btn{ background:var(--orange) !important; color:#fff !important; border:0; }
.btn:hover{ background:var(--orange-d) !important; }
.btn.light{ background:var(--orange-t) !important; color:var(--orange-d) !important; }
.btn.danger{ background:#fbeaea !important; color:#b42318 !important; }

.rank{ background:var(--orange-t) !important; color:var(--orange-d) !important; }

.card{ border-color:var(--line) !important; }

/* Loginscherm: logo boven het formulier */
.box{ border-top:3px solid var(--orange) !important; }
.box .brandrow{ text-align:center; margin-bottom:16px; }
.box .brandrow .logo{ height:36px; width:auto; }