/* ============================================================
   Hello Hiring-huisstijl voor de schermen van buitenstaanders:
   kandidaten, hiring managers en klanten (status, portaal, minisite,
   shortlist, voorstel, opdrachtbevestiging, inloggen, foutpagina's).

   Alleen tokens (var(--hh-...)), geen eigen kleuren. De tokens en het
   @font-face van Kensington komen uit public/css/hh-merk.css; laad dat
   bestand daarom vóór dit bestand (zie partials/buitenstaanders.blade.php).

   Regels:
   - Achtergronden en tekst: crème, seashell en off-black.
   - Koppen (h1, h2): Kensington Compressed Bold, hoofdletters, blauw.
   - Kleine labels boven een titel: Inter, hoofdletters, ruime letterafstand, blauw.
   - Knoppen met een actie: Kensington, hoofdletters.
   - De accentkleur van de klant (var(--accent), var(--roze), var(--merk))
     blijft op schermen van een klant gelden; die kleur wordt hier NIET gezet.
     Alleen op schermen van Hello Hiring zelf (klasse hh-buiten--eigen) is het
     accent het roze van Hello Hiring.
   ============================================================ */

/* Ondergrond en lopende tekst */
body.hh-buiten,
body:has(.hh-buiten) { background: var(--hh-creme); }
.hh-buiten { font-family: var(--hh-tekst); color: var(--hh-zwart); overflow-wrap: break-word; }

/* Koppen: Kensington, hoofdletters, blauw. Lange woorden breken in plaats van het scherm uit te lopen. */
.hh-buiten h1, .hh-buiten h2 {
  font-family: var(--hh-kop); font-weight: 700; text-transform: uppercase;
  color: var(--hh-blauw); letter-spacing: .01em; line-height: 1.05;
  overflow-wrap: anywhere; hyphens: auto;
}
.hh-buiten h1 { font-size: clamp(1.9rem, 1.3rem + 3vw, 2.8rem); }
.hh-buiten h2 { font-size: clamp(1.4rem, 1.1rem + 1.6vw, 1.9rem); }

/* Klein label boven een titel */
.hh-label {
  display: block; margin: 0 0 8px; font: 700 .72rem/1.2 var(--hh-tekst);
  letter-spacing: .14em; text-transform: uppercase; color: var(--hh-blauw);
}

/* Kaart: het hoofdding van een scherm (plaat uit het merkboekje) */
.hh-buiten .hh-plaat-kaart {
  background: var(--hh-kaart); color: var(--hh-zwart);
  border: var(--hh-rand) solid var(--hh-blauw); border-radius: var(--hh-hoek);
  box-shadow: var(--hh-schaduw-plaat);
}

/* Paneel: een blok binnen de kaart. Dunne seashell-rand, geen schaduw. */
.hh-buiten .hh-paneel-blok {
  background: var(--hh-creme); border: var(--hh-rand-dun) solid var(--hh-seashell); border-radius: 16px;
}

/* Knoppen met een actie: Kensington, hoofdletters. De kleur van de knop blijft zoals het scherm hem zet. */
.hh-buiten .btn, .hh-buiten .btn-licht, .hh-buiten .btn-gevaar,
.hh-buiten button.knop, .hh-buiten a.knop {
  font-family: var(--hh-kop); font-weight: 700; text-transform: uppercase; letter-spacing: .05em;
  font-size: 1.05rem; line-height: 1.2;
}
.hh-buiten .btn-licht { background: var(--hh-kaart); border-color: var(--hh-seashell); color: var(--hh-zwart); }
.hh-buiten .btn-klein { font-size: .95rem; }

/* Velden */
.hh-buiten label { font-weight: 600; }
.hh-buiten input:not([type=checkbox]):not([type=radio]):not([type=file]),
.hh-buiten textarea, .hh-buiten select {
  font-family: var(--hh-tekst); background: var(--hh-kaart); color: var(--hh-zwart);
}

/* Scheidingslijn en kleine tekst */
.hh-buiten hr { border: 0; border-top: var(--hh-rand-dun) solid var(--hh-seashell); }

/* Afzenderkop (klant of bureau): de kleur van de klant blijft, alleen de naam krijgt het kopletterbeeld. */
.hh-buiten .afzenderkop strong { font-family: var(--hh-kop); text-transform: uppercase; letter-spacing: .03em; font-size: 1.25rem; font-weight: 700; }

/* Alleen voor schermen van Hello Hiring zelf (geen klant): roze als accent voor de knop met een actie */
.hh-buiten--eigen .btn, .hh-buiten--eigen button.knop, .hh-buiten--eigen a.knop {
  background: var(--hh-roze); border-color: var(--hh-roze); color: var(--hh-zwart);
}
.hh-buiten--eigen .btn:hover { filter: none; background: var(--hh-blauw); border-color: var(--hh-blauw); color: var(--hh-creme); }

/* Meldingen met een fout: red pen, spaarzaam */
.hh-buiten .hh-fout { background: var(--hh-rood-tint); border: var(--hh-rand-dun) solid var(--hh-rood); color: var(--hh-zwart); border-radius: 12px; padding: 10px 14px; }

/* Minisite van de klant: wordmerk en menu in het kopletterbeeld, de merkkleur (--merk) van de klant blijft. */
.hh-buiten nav.mini .naam { font-family: var(--hh-kop); text-transform: uppercase; letter-spacing: .03em; font-size: 1.35rem; font-weight: 700; }
.hh-buiten nav.mini a { font-family: var(--hh-kop); text-transform: uppercase; letter-spacing: .05em; font-size: 1rem; }
.hh-buiten .hero h1 { color: inherit; }

/* Portaal voor hiring managers: de balk bovenin in crème met de naam in kopletters (alleen waar deze huisstijl actief is). */
body:has(.hh-buiten) header.topbar { background: var(--hh-kaart); border-bottom: var(--hh-rand-dun) solid var(--hh-seashell); }
body:has(.hh-buiten) header.topbar .merk-naam { font-family: var(--hh-kop); text-transform: uppercase; letter-spacing: .03em; font-size: 1.2rem; font-weight: 700; }

/* Telefoon: niets mag horizontaal scrollen */
@media (max-width: 480px) {
  .hh-buiten .hh-plaat-kaart { box-shadow: 4px 4px 0 var(--hh-blauw); }
  .hh-buiten .btn, .hh-buiten button.knop { white-space: normal; }
}