/* ══════════════════════════════════════════════════════════
   FairHospitality — gedeelde loginkaart (1.62.8)

   Eén kaart voor de drie modulepagina's: voetafdruk ([fh_energy]),
   labelkeuze ([fh_labelkeuze]) en labelmodule ([fh_labels]). Voordien
   schreef elke module zijn eigen kaart met een eigen klasse
   (.fh-login-card, .fh-lk-login, .fh-lb-login), dus zag dezelfde vraag
   er op drie pagina's anders uit.

   Deze stylesheet is BEWUST self-contained: app.css wordt enkel op de
   voetafdrukpagina geladen, dus de variabelen daaruit (--fh-green,
   --fh-font-display, …) bestaan hier niet. De waarden staan daarom
   letterlijk, gelijk aan wat .fh-login-card in app.css opleverde.

   De font-import is dezelfde als in app.css. Laat je die weg, dan valt
   de titel op de labelkeuze- en labelpagina terug op Georgia en wijkt
   ze zichtbaar af van de voetafdrukpagina.

   De KLEUR van de titel wordt bewust niet gezet: die komt van het thema,
   waardoor de kaart op alle drie de pagina's automatisch dezelfde groene
   koptekst krijgt als de rest van de site.
   ══════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,wght@0,300;0,600;1,300&family=DM+Sans:wght@300;400;500;600&display=swap');

.fh-mod-login {
  max-width: 440px;
  margin: 3rem auto;
  padding: 2.5rem;
  background: #FFFFFF;
  border: 1px solid #DDE6E2;
  border-radius: 16px;
  box-shadow: 0 2px 12px rgba(45, 106, 79, .10);
  text-align: center;
}

.fh-mod-login-emoji {
  font-size: 2.5rem;
  margin-bottom: .75rem;
  line-height: 1;
}

.fh-mod-login h2 {
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 600;
  font-size: 1.35rem;
  margin: 0 0 .5rem;
}

.fh-mod-login p {
  color: #4A6572;
  margin: 0 0 1.5rem;
  font-size: .92rem;
  line-height: 1.6;
}

.fh-mod-login-btn {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .7rem 1.75rem;
  background: #2D6A4F;
  color: #fff;
  border-radius: 10px;
  text-decoration: none;
  font-family: 'DM Sans', system-ui, sans-serif;
  font-weight: 500;
  font-size: .95rem;
}

.fh-mod-login-btn:hover,
.fh-mod-login-btn:focus {
  background: #245740;
  color: #fff;
  text-decoration: none;
}

@media (max-width: 520px) {
  .fh-mod-login { margin: 1.5rem auto; padding: 1.75rem 1.25rem; }
}