/*
 * Emporia theme — adapted from the original Drupal bootstrap_tp subtheme
 * (themes/custom/bootstrap_tp/css/style.css) onto Bootstrap 5 markup.
 * Colors, fonts, layout width, and component look are kept intentionally
 * close to the original site.
 */

@font-face {
  font-family: 'Eurostile Next LT Pro';
  src: url('../fonts/EurostileNextLTPro-Regular.ttf') format('truetype');
  font-weight: 400;
}

@font-face {
  font-family: 'Eurostile Next LT Pro';
  src: url('../fonts/EurostileNextLTPro-SmBd.ttf') format('truetype');
  font-weight: 700;
}

:root {
  --emporia-red: #A90D25;
  --emporia-grey: #717171;
  --emporia-grey-light: #dbdce0;
  --emporia-text-muted: #777777;
}

body {
  font-family: 'Open Sans', Arial, Helvetica, sans-serif;
  font-size: 14px;
  line-height: 20px;
  color: #222;
}

.container-emporia {
  width: 100%;
  max-width: 1020px;
  margin: 0 auto;
  padding: 0 15px;
}

/* Main content region renders narrower than the nav's own container on the
   OG site — confirmed via the intro paragraph's Layout tab showing exactly
   942x60 (content box, no side margin of its own), i.e. the same width as
   the header banner image, not the nav's 990px content width. */
main .container-emporia {
  max-width: 972px;
}

/* Header / navigation */

.site-header .navbar {
  padding-top: 1rem;
  padding-bottom: 1rem;
}

.site-header .navbar-brand img {
  width: 220px;
}

.site-header .nav-link {
  color: var(--emporia-text-muted);
  background: var(--emporia-grey-light);
  margin-left: 10px;
  border-radius: 5px;
  border: thin solid #777;
  padding: 10px 15px !important;
}

.site-header .nav-link:hover,
.site-header .nav-link.active {
  background-color: var(--emporia-red);
  color: #fff;
}

.lang-dropdown-toggle {
  color: var(--emporia-text-muted);
}

.header-banner {
  margin: 0;
  line-height: 0;
}

.header-banner img {
  display: block;
  margin: 0 auto;
}

.header-banner .banner-mobile {
  display: none;
}

/* Headings */

.emporia-h1,
.emporia-h2 {
  text-transform: uppercase;
  text-align: center;
  color: var(--emporia-red);
  font-weight: 700;
}

.emporia-h1 {
  font-family: 'Eurostile Next LT Pro', 'Open Sans', Arial, sans-serif;
  font-size: 36px;
  line-height: 39.6px;
  margin-top: 20px;
  margin-bottom: 10px;
}

.emporia-h2 {
  font-family: 'Open Sans', Arial, Helvetica, sans-serif;
  font-size: 24px;
  line-height: 26.4px;
  margin-top: 2rem;
}

#emporia-tc .emporia-h2 {
  text-align: left;
}

/* Buttons */

.btn-emporia {
  background-color: var(--emporia-red);
  border: none;
  border-radius: 0;
  font-weight: 700;
  font-size: 14px;
  padding: 15px;
  color: #fff;
  text-decoration: none;
  display: inline-block;
}

/* Home page */

.home-intro p {
  margin-top: 25px;
  color: #333333;
}

.home-steps {
  max-width: 600px;
  margin: 1.5rem auto;
}

.step-item {
  margin: 0 0 0.65rem;
}

.step-item span {
  font-weight: 700;
}

.step-checkbox {
  width: 57px;
  height: 57px;
  vertical-align: middle;
  margin-right: 0.5rem;
}

.step-sublist {
  list-style: none;
  padding-left: 4.5rem;
  margin: 0 0 0.65rem;
}

.home-cta {
  text-align: center;
  /* OG page has an empty whitespace <p> (20px tall) on each side of the
     button, each with the theme's default 10px paragraph bottom-margin —
     40px effective gap on both sides once margins collapse. */
  margin: 40px 0;
}

.home-offline-form {
  text-align: center;
  color: #333333;
  margin-top: 25px;
}

.home-offline-form a {
  text-decoration: none;
}

/* Registration success banner (Drupal status-message style — shown inline
   above the reset wizard on the registration page itself, not a separate
   confirmation page, matching the OG's actual behavior). */

.registration-success {
  background-color: #dcead6;
  border: 1px solid #c3d9ba;
  color: #234117;
}

.registration-success-heading {
  font-weight: 700;
  margin-bottom: 0.5rem;
}

/* Registration wizard */

.wizard-progress {
  display: flex;
  justify-content: space-between;
  list-style: none;
  padding: 0;
  margin: 2rem 0;
}

.wizard-progress li {
  flex: 1;
  text-align: center;
  position: relative;
  font-size: 13px;
  color: var(--emporia-text-muted);
}

.wizard-progress li:not(:last-child)::after {
  content: '';
  position: absolute;
  top: 14px;
  left: 50%;
  width: 100%;
  height: 2px;
  background: #717171;
  z-index: 0;
}

.wizard-progress li.is-complete:not(:last-child)::after {
  background: var(--emporia-red);
}

.wizard-progress li .marker {
  position: relative;
  z-index: 1;
  display: block;
  width: 28px;
  height: 28px;
  line-height: 26px;
  margin: 0 auto 6px;
  border-radius: 50%;
  border: thin solid #717171;
  background: #fff;
  color: #717171;
  font-weight: 600;
}

.wizard-progress li.is-active .marker {
  background: var(--emporia-red);
  border-color: var(--emporia-red);
  color: #fff;
}

.wizard-progress li.is-complete .marker {
  background: var(--emporia-red);
  border-color: var(--emporia-red);
  color: #fff;
}

.wizard-step {
  display: none;
}

.wizard-step.is-active {
  display: block;
}

.wizard-step-intro {
  margin-bottom: 1.5rem;
  color: #444;
}

.wizard-actions {
  display: flex;
  justify-content: center;
  gap: 1rem;
  margin-top: 2rem;
}

.pflichtfeld-note {
  text-align: center;
  color: #333333;
  font-size: 14px;
}

.form-label {
  font-weight: 700;
  font-size: 14px;
  color: #333333;
  margin-bottom: 5px;
  display: inline-block;
}

.form-control,
.form-select {
  padding: 6px 12px;
  font-size: 14px;
  line-height: 1.42857143;
  color: #555555;
  background-color: #fff;
  border: 1px solid #ccc;
  border-radius: 0;
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
}

.form-control:not(textarea),
.form-select {
  height: 34px;
}

.form-control:focus,
.form-select:focus {
  border-color: #66afe9;
  outline: 0;
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 8px rgba(102, 175, 233, .6);
}

.error.form-item--error-message {
  display: block;
  color: var(--emporia-red);
  font-weight: normal;
  margin-top: 5px;
}

.file-upload-control {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  position: relative;
  cursor: pointer;
}

.file-upload-control .file-upload-button {
  background: #e9ecef;
  padding: 4px 10px;
  font-size: 13px;
  white-space: nowrap;
}

.file-upload-control .file-upload-filename {
  font-size: 13px;
  color: var(--emporia-text-muted);
}

.file-upload-input {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
}

.iban-check-feedback {
  color: var(--emporia-red);
}

/* Field help tooltip ("?" icon shown next to a label, matching the original
   Drupal webform's #help popup — hover/focus reveals the explanation instead
   of always showing it as static text under the field). */

.help-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--emporia-text-muted);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  font-family: Arial, sans-serif;
  line-height: 1;
  cursor: help;
  position: relative;
  vertical-align: middle;
}

.help-icon::after {
  content: attr(data-tooltip);
  position: absolute;
  bottom: 130%;
  left: 0;
  width: 260px;
  max-width: 80vw;
  background: #333;
  color: #fff;
  padding: 10px 12px;
  border-radius: 4px;
  font-size: 13px;
  font-weight: normal;
  line-height: 1.4;
  white-space: normal;
  text-align: left;
  display: none;
  z-index: 10;
}

.help-icon:hover::after,
.help-icon:focus::after {
  display: block;
}

/* Footer */

.site-footer {
  width: 100%;
  max-width: 1020px;
  margin: 45px auto 0;
  /* Outer <footer> confirmed rendering at 942x60 total (excl. margin) with
     912x40 nav content inside — 20px left for padding+border combined, not
     the 35/36 an earlier (wrong) Rules-panel read suggested. */
  padding: 10px 15px 9px;
  border-top: 1px solid #E5E5E5;
  background-color: var(--emporia-grey);
  color: #fff;
}

.site-footer .footer-links {
  list-style: none;
  display: flex;
  justify-content: center;
  gap: 1.5rem;
  padding: 0;
  margin: 0;
}

.site-footer .footer-links a {
  display: inline-block;
  padding: 10px 15px;
  color: #fff;
  text-decoration: none;
  text-transform: uppercase;
  font-size: 14px;
}

.site-footer .footer-links a:hover {
  text-decoration: underline;
}

@media (max-width: 700px) {
  .header-banner .banner-desktop {
    display: none;
  }

  .header-banner .banner-mobile {
    display: block;
  }

  .wizard-progress {
    flex-wrap: wrap;
    gap: 0.75rem 0;
  }

  .wizard-progress li {
    flex: 0 0 50%;
  }

  .wizard-actions {
    flex-direction: column;
    gap: 0.75rem;
  }
}