/**
 * CAR Internal Graphics Standard 2022 — web tokens
 * Official blue PMS 540 U; body black #121212; type Arial (approved families: Arial, Times New Roman, Franklin Gothic).
 */

:root {
  /* Official palette */
  --car-pms-540: #003767;
  --car-pms-540-rgb: 0, 55, 103;
  --car-black: #121212;
  --car-black-rgb: 18, 18, 18;
  --car-white: #ffffff;

  /* Secondary palette — use sparingly (guide: no more than four colors per piece) */
  --car-gray: #9c9c9c;
  --car-red: #ee484a;
  --car-teal: #3ac9bb;
  --car-amber: #ffa605;
  --car-sky: #6d9beb;

  /* Map to Bootstrap 5 */
  --bs-primary: var(--car-pms-540);
  --bs-primary-rgb: var(--car-pms-540-rgb);
  --bs-body-color: var(--car-black);
  --bs-body-bg: #f5f6f8;
  --bs-emphasis-color: var(--car-black);
  --bs-link-color: var(--car-pms-540);
  --bs-link-hover-color: #002a4d;
  --bs-focus-ring-color: rgba(var(--car-pms-540-rgb), 0.35);
  --bs-border-color: rgba(18, 18, 18, 0.12);
  --bs-secondary-color: #5c5c5c;
}

html {
  -webkit-font-smoothing: antialiased;
}

body {
  font-family: Arial, Helvetica, "Helvetica Neue", sans-serif;
  color: var(--car-black);
}

/* Optional heading weight — Franklin Gothic is approved; use system Gothic stack where available */
h1,
h2,
h3,
h4,
h5,
h6,
.h1,
.h2,
.h3,
.h4,
.h5,
.h6 {
  font-family: "Franklin Gothic Medium", "Franklin Gothic", "ITC Franklin Gothic", Arial, Helvetica, sans-serif;
  color: var(--car-black);
  letter-spacing: -0.01em;
}

/* Primary buttons stay on-brand */
.btn-primary {
  --bs-btn-bg: var(--car-pms-540);
  --bs-btn-border-color: var(--car-pms-540);
  --bs-btn-hover-bg: #002a4d;
  --bs-btn-hover-border-color: #002a4d;
  --bs-btn-active-bg: #002440;
  --bs-btn-active-border-color: #002440;
}

.btn-outline-primary {
  --bs-btn-color: var(--car-pms-540);
  --bs-btn-border-color: var(--car-pms-540);
  --bs-btn-hover-bg: var(--car-pms-540);
  --bs-btn-hover-border-color: var(--car-pms-540);
}

.text-primary {
  color: var(--car-pms-540) !important;
}

.bg-primary {
  background-color: var(--car-pms-540) !important;
}

/* Site header: white bar + CAR blue rule (logo stays full-color on white per guide) */
.car-site-header {
  background: var(--car-white);
  border-bottom: 3px solid var(--car-pms-540);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
}

.car-site-header .navbar-nav .nav-link {
  color: var(--car-black);
}

.car-site-header .navbar-nav .nav-link:hover {
  background: rgba(var(--car-pms-540-rgb), 0.08);
  color: var(--car-pms-540);
}

.car-site-header .navbar-nav .nav-link.active {
  color: var(--car-pms-540);
  font-weight: 600;
}

/* Tables: subtle hover uses brand blue */
.table-hover > tbody > tr:hover > * {
  --bs-table-hover-bg: rgba(var(--car-pms-540-rgb), 0.06);
}

/* Form controls focus */
.form-control:focus,
.form-select:focus {
  border-color: var(--car-pms-540);
  box-shadow: 0 0 0 0.2rem rgba(var(--car-pms-540-rgb), 0.2);
}

/* Public check-in — lightweight card aligned with CAR templates */
.car-checkin-page {
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  background: var(--bs-body-bg);
  padding: 1rem;
}

.car-checkin-card {
  max-width: 400px;
  width: 100%;
  padding: 1.25rem 1.25rem 1.5rem;
  background: var(--car-white);
  border-radius: 8px;
  border: 1px solid rgba(var(--car-pms-540-rgb), 0.12);
  border-top: 3px solid var(--car-pms-540);
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
  text-align: center;
}

.car-checkin-card .logo {
  width: min(300px, 100%);
  height: auto;
  margin-bottom: 0.75rem;
}

.car-checkin-test-banner {
  background: rgba(255, 166, 5, 0.15);
  border: 1px solid var(--car-amber);
  color: var(--car-black);
  border-radius: 6px;
  padding: 10px 12px;
  margin-bottom: 1rem;
  font-size: 0.95rem;
  font-weight: 600;
  text-align: left;
}

.car-checkin-success {
  color: var(--car-teal);
  font-weight: 700;
}

.car-checkin-success.car-checkin-outside {
  color: #9a3412;
}

.car-checkin-error {
  color: var(--car-red);
  font-weight: 700;
}

/* Remember-me: center the block with the rest of the card; label left-aligned within it */
.car-checkin-remember {
  display: flex;
  justify-content: center;
  width: 100%;
  margin-bottom: 0.75rem;
  padding: 0 0.5rem;
}

.car-checkin-remember .form-check {
  text-align: left;
  max-width: 19rem;
  width: 100%;
}

.car-checkin-remember-clear {
  text-align: center;
  margin-bottom: 0.75rem;
}

.car-checkin-submit {
  margin-top: 1.25rem;
}

.car-checkin-staff-link {
  margin-top: 1.25rem;
  text-align: center;
}

.car-checkin-staff-link a {
  color: var(--car-pms-540);
  text-decoration: none;
  font-weight: 600;
}

.car-checkin-staff-link a:hover {
  text-decoration: underline;
}