/* Bootstrap 5 components used on app pages, matched to TheEvent's maroon accent. */
:root {
  --bs-primary: #500000;
  --bs-primary-rgb: 80, 0, 0;
  --bs-link-color: #500000;
  --bs-link-color-rgb: 80, 0, 0;
  --bs-link-hover-color: #3a0000;
  --bs-font-sans-serif: var(--default-font);
}
.btn-primary {
  --bs-btn-bg: #500000; --bs-btn-border-color: #500000;
  --bs-btn-hover-bg: #3a0000; --bs-btn-hover-border-color: #3a0000;
  --bs-btn-active-bg: #2a0000; --bs-btn-active-border-color: #2a0000;
  --bs-btn-disabled-bg: #500000; --bs-btn-disabled-border-color: #500000;
}
.btn-outline-primary {
  --bs-btn-color: #500000; --bs-btn-border-color: #500000;
  --bs-btn-hover-bg: #500000; --bs-btn-hover-border-color: #500000;
  --bs-btn-active-bg: #3a0000; --bs-btn-active-border-color: #3a0000;
}
.form-check-input:checked { background-color: #500000; border-color: #500000; }
.form-control:focus, .form-select:focus, .form-check-input:focus {
  border-color: #500000;
  box-shadow: 0 0 0 .2rem rgba(80, 0, 0, .2);
}
/* Sign-out is a POST form inside TheEvent's nav dropdown; make its button match the dropdown links. */
.navmenu .dropdown ul form { margin: 0; }
.navmenu .dropdown ul form button {
  all: unset; box-sizing: border-box; cursor: pointer; display: block; width: 100%;
  padding: 10px 20px; font-size: 15px; font-family: var(--nav-font); color: var(--nav-dropdown-color);
}
.navmenu .dropdown ul form button:hover { color: var(--nav-dropdown-hover-color); }

/* Header call-to-action sits on the photo and on the maroon scrolled header, so it's white. */
.header .cta-btn, .header .cta-btn:focus { background: #ffffff; color: #500000; font-weight: 600; }
.header .cta-btn:hover, .header .cta-btn:focus:hover { background: #f3d6d6; color: #500000; }

/* Raleway's "ff"/"fi" ligatures merge letters in words like "Handoff"; keep letters separate. */
body, h1, h2, h3, h4, h5, h6, .sitename, .navmenu, .btn, .buy-btn, .cta-btn {
  font-variant-ligatures: no-common-ligatures;
  font-feature-settings: "liga" 0, "clig" 0;
}

/* Keep the Sign In / My Tickets button visible on phones, between the logo and the menu toggle. */
@media (max-width: 1199px) {
  .header .cta-btn { order: 2; margin: 0 14px 0 0; padding: 6px 16px; font-size: 13px; white-space: nowrap; }
}
@media (max-width: 400px) {
  .header .logo img { max-height: 28px; }
  .header .logo h1 { font-size: 24px; }
}

/* TheEvent styles text/email inputs in forms; match password and phone fields to them. */
.contact .php-email-form input[type=password],
.contact .php-email-form input[type=tel] {
  font-size: 14px; padding: 10px 15px; box-shadow: none; border-radius: 0;
  color: var(--default-color); background-color: var(--surface-color);
  border-color: color-mix(in srgb, var(--default-color), transparent 80%);
}
.contact .php-email-form input[type=password]:focus,
.contact .php-email-form input[type=tel]:focus { border-color: var(--accent-color); }