/* Base typography, layout chrome and Bootstrap-to-token mappings (design-system boards: Actions, Components, Typography). */

:root {
  --bs-body-font-family: var(--elx-font);
  --bs-body-font-size: var(--elx-body);
  --bs-body-font-weight: var(--elx-weight-regular);
  --bs-body-line-height: var(--elx-lh-body);
  --bs-body-color: var(--elx-blue);
  --bs-body-bg: var(--elx-white);
  --bs-link-color: var(--elx-blue);
  --bs-link-hover-color: var(--elx-blue-mid);
  --bs-border-color: var(--elx-blue-light);
  --bs-border-radius: var(--elx-radius);
  --bs-focus-ring-color: var(--elx-blue-mid);
}

html {
  font-size: var(--elx-body);
  min-height: 100%;
}

body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  margin: 0;
  font-family: var(--elx-font);
  font-size: var(--elx-body);
  font-weight: var(--elx-weight-regular);
  line-height: var(--elx-lh-body);
  letter-spacing: var(--elx-tracking);
  color: var(--elx-blue);
  background: var(--elx-white);
}

h1, h2, h3, h4, .h1, .h2, .h3, .h4 {
  font-family: var(--elx-font);
  font-weight: var(--elx-weight-semibold);
  line-height: var(--elx-lh-heading);
  color: var(--elx-blue);
}
h1, .h1 { font-size: var(--elx-h1); }
h2, .h2 { font-size: var(--elx-h2); }
h3, .h3 { font-size: var(--elx-h3); }
h4, .h4 { font-size: var(--elx-h4); }

small, .small { font-size: max(0.875rem, var(--elx-size-min)); }

/* Links stay underlined and hover to Blue-Mid */
a {
  color: var(--elx-blue);
  font-weight: var(--elx-weight-semibold);
  text-decoration: underline;
}
a:hover { color: var(--elx-blue-mid); }

:focus-visible {
  outline: 2px solid var(--elx-blue);
  outline-offset: 2px;
}

/* Header and footer */
.elx-header {
  background: var(--elx-blue);
  color: var(--elx-white);
  min-height: 72px;
  display: flex;
  align-items: center;
  padding: 0 1rem;
}
/* White logo on the blue header; it never shrinks, the user name gives way first. */
.elx-header__brand {
  display: block;
  height: 1.5rem;
  width: auto;
  flex-shrink: 0;
}

/* Phones have no room for the name next to the language switch and Log out, so it shows from tablet up.
   It is the only header item allowed to shrink: a long name is cut with an ellipsis (full name in title). */
.elx-header__user {
  display: none;
  margin-left: auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: max(0.875rem, var(--elx-size-min));
}
@media (min-width: 768px) {
  .elx-header__user {
    display: block;
  }
  .elx-header__user + .elx-lang-switch {
    margin-left: 0.75rem;
  }
}

/* Language switch: a native disclosure, flag + code on the blue header, the languages in a white panel below it. */
.elx-lang-switch {
  position: relative;
  margin-left: auto;
  flex-shrink: 0;
}
.elx-lang-switch__toggle {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  min-height: var(--elx-tap-min);
  padding: 0 0.5rem;
  list-style: none;
  cursor: pointer;
  color: var(--elx-white);
  font-weight: var(--elx-weight-semibold);
  font-size: max(0.875rem, var(--elx-size-min));
}
.elx-lang-switch__toggle::-webkit-details-marker {
  display: none;
}
.elx-lang-switch__toggle:hover {
  color: var(--elx-blue-tint);
}
.elx-lang-switch__toggle:focus-visible {
  outline-color: var(--elx-white);
}
.elx-lang-switch__flag {
  display: block;
  height: 1rem;
  width: auto;
}
/* Foundations chevron (600 grid, square ends), drawn pointing right and turned down (up when open).
   The stroke is doubled from the board's 24 because at 12px the original would render under one pixel. */
.elx-lang-switch__chevron {
  width: 0.75rem;
  height: 0.75rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 48;
  stroke-linecap: square;
  transform: rotate(90deg);
  transition: transform 0.2s ease;
}
.elx-lang-switch[open] .elx-lang-switch__chevron {
  transform: rotate(-90deg);
}
/* Drops to the bottom edge of the 72px header; right-aligned so it never leaves a phone screen. */
.elx-lang-switch__panel {
  position: absolute;
  top: calc(100% + 0.75rem);
  right: 0;
  z-index: 20;
  min-width: 11rem;
  max-width: calc(100vw - 2rem);
  padding: 0.25rem 0;
  background: var(--elx-white);
  border: 1px solid var(--elx-blue-light);
  border-radius: var(--elx-radius);
}
.elx-lang-switch__option {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  width: 100%;
  min-height: var(--elx-tap-min);
  padding: 0 1rem;
  background: transparent;
  border: 0;
  color: var(--elx-blue);
  font-family: var(--elx-font);
  font-size: var(--elx-body);
  text-align: left;
}
.elx-lang-switch__option:hover {
  background: var(--elx-blue-tint);
}
.elx-lang-switch__option[aria-current="true"] {
  font-weight: var(--elx-weight-semibold);
  box-shadow: inset 4px 0 0 var(--elx-blue);
}
@media (prefers-reduced-motion: reduce) {
  .elx-lang-switch__chevron {
    transition: none;
  }
}

/* Logout: a POST form, styled as a design-system link (underlined, SemiBold) in light-on-dark. */
.elx-header__logout {
  margin-left: auto;
  flex-shrink: 0;
}
/* A thin divider before Log out, as tall as the text rather than the 48px tap target. */
.elx-header__user + .elx-header__logout,
.elx-lang-switch + .elx-header__logout {
  margin-left: 0.25rem;
  display: flex;
  align-items: center;
}
.elx-header__user + .elx-header__logout {
  margin-left: 0.75rem;
}
.elx-header__user + .elx-header__logout::before,
.elx-lang-switch + .elx-header__logout::before {
  content: "";
  width: 1px;
  height: 1.5rem;
  margin-right: 0.25rem;
  background: var(--elx-blue-mid);
}
.elx-header__logout button {
  min-height: var(--elx-tap-min);
  padding: 0 0.5rem;
  background: transparent;
  border: 0;
  color: var(--elx-white);
  font-family: var(--elx-font);
  font-size: var(--elx-body);
  font-weight: var(--elx-weight-semibold);
  text-decoration: underline;
}
.elx-header__logout button:hover {
  color: var(--elx-blue-tint);
}
.elx-header__logout button:focus-visible {
  outline-color: var(--elx-white);
}

.elx-main {
  flex: 1 0 auto;
  padding-top: 2rem;
  padding-bottom: 2rem;
}

.elx-footer {
  background: var(--elx-blue);
  color: var(--elx-blue-tint);
  padding: 1.5rem 1rem;
  font-size: max(0.875rem, var(--elx-size-min));
}

/* Buttons: solid, SemiBold, 2px corners, 48px tap target, no shadows */
.btn {
  --bs-btn-font-family: var(--elx-font);
  --bs-btn-font-weight: var(--elx-weight-semibold);
  --bs-btn-border-radius: var(--elx-radius);
  --bs-btn-focus-box-shadow: none;
  min-height: var(--elx-tap-min);
  padding: 0 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: var(--elx-body);
  font-weight: var(--elx-weight-semibold);
  line-height: var(--elx-lh-body);
  border: 0;
  border-radius: var(--elx-radius);
  box-shadow: none;
  text-decoration: none;
}

.btn-primary,
.btn-primary:disabled {
  --bs-btn-bg: var(--elx-blue);
  --bs-btn-color: var(--elx-white);
  --bs-btn-hover-bg: var(--elx-blue-mid);
  --bs-btn-hover-color: var(--elx-blue);
  --bs-btn-active-bg: var(--elx-blue-mid);
  --bs-btn-active-color: var(--elx-blue);
  --bs-btn-disabled-bg: var(--elx-blue);
  --bs-btn-disabled-color: var(--elx-white);
  background: var(--elx-blue);
  color: var(--elx-white);
}
.btn-primary:hover,
.btn-primary:active,
.btn-primary:focus-visible {
  background: var(--elx-blue-mid);
  color: var(--elx-blue);
}

/* Outlined: only ever paired with a solid button */
.btn-outline-primary {
  --bs-btn-hover-bg: var(--elx-blue-tint);
  --bs-btn-hover-color: var(--elx-blue);
  background: transparent;
  color: var(--elx-blue);
  border: 2px solid var(--elx-blue);
}
.btn-outline-primary:hover,
.btn-outline-primary:active {
  background: var(--elx-blue-tint);
  color: var(--elx-blue);
}

/* Hot CTA: one per view, final purchase-like step only */
.btn-hot {
  background: var(--elx-hot);
  color: var(--elx-white);
}
.btn-hot:hover,
.btn-hot:active {
  background: var(--elx-hot-hover);
  color: var(--elx-white);
}

.btn:disabled,
.btn.disabled {
  opacity: 0.55;
}

/* Form fields: label above, 1px Blue-Mid edge, 2px corners */
.form-label {
  margin-bottom: 6px;
  font-size: max(0.875rem, var(--elx-size-min));
  font-weight: var(--elx-weight-semibold);
}

.form-control,
.form-select {
  min-height: var(--elx-tap-min);
  padding: 0 14px;
  font-family: var(--elx-font);
  font-size: var(--elx-body);
  color: var(--elx-blue);
  background-color: var(--elx-white);
  border: 1px solid var(--elx-blue-mid);
  border-radius: var(--elx-radius);
  box-shadow: none;
}
.form-control:focus,
.form-select:focus {
  color: var(--elx-blue);
  border-color: var(--elx-blue);
  outline: 2px solid var(--elx-blue);
  outline-offset: 1px;
  box-shadow: none;
}

.form-check {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-left: 0;
  min-height: 0;
}
.form-check-input {
  width: 20px;
  height: 20px;
  margin: 0;
  float: none;
  border: 1px solid var(--elx-blue-mid);
  border-radius: var(--elx-radius);
  background-color: var(--elx-white);
}
.form-check-input[type="radio"] { border-radius: 50%; }
.form-check-input:checked {
  background-color: var(--elx-blue);
  border-color: var(--elx-blue);
}
.form-check-input:focus {
  border-color: var(--elx-blue);
  outline: 2px solid var(--elx-blue);
  outline-offset: 2px;
  box-shadow: none;
}
.form-check-label { font-size: var(--elx-body); }

/* Validation: Hot red stands in for the alert colour, as the Offline row in the Components board does */
.text-danger,
.field-validation-error,
.validation-summary-errors {
  color: var(--elx-hot) !important;
  font-size: max(0.875rem, var(--elx-size-min));
  font-weight: var(--elx-weight-semibold);
}
.input-validation-error,
.form-control.input-validation-error {
  border-color: var(--elx-hot);
}
.validation-summary-errors ul { margin: 0; padding-left: 1.25rem; }

/* Progress */
.progress {
  --bs-progress-height: 8px;
  --bs-progress-bg: var(--elx-blue-tint);
  --bs-progress-bar-bg: var(--elx-blue);
  --bs-progress-border-radius: var(--elx-radius);
  border-radius: var(--elx-radius);
}
.progress-bar {
  background-color: var(--elx-blue);
  color: var(--elx-white);
}

/* Alerts: primary palette, 2px corners, no shadows */
.alert {
  --bs-alert-border-radius: var(--elx-radius);
  padding: 16px 20px;
  color: var(--elx-blue);
  background: var(--elx-blue-tint);
  border: 1px solid var(--elx-blue-light);
  border-radius: var(--elx-radius);
}
.alert-danger {
  color: var(--elx-hot);
  background: var(--elx-white);
  border-color: var(--elx-hot);
  font-weight: var(--elx-weight-semibold);
}
.alert-success {
  color: var(--elx-moss-rich);
  background: var(--elx-moss-tint);
  border-color: var(--elx-moss-mid);
}
.alert-warning {
  color: var(--elx-umber-rich);
  background: var(--elx-umber-tint);
  border-color: var(--elx-umber-mid);
}