/*
 * Canada Border Times — loaded after alpuente.css on site 2 only
 * (templates/base.html). Same components, a Canadian look: maple red on a
 * warm off-white, charcoal text, a red "flag" stripe on the header and a red
 * hero with the lanes-and-leaf mark. Wait-time colours (green/amber/red) stay
 * the same on both sites: they carry meaning, not brand.
 */
:root {
  --cbt-red: #c8102e;        /* 5.9:1 on white */
  --cbt-red-dark: #9e0c22;
  --cbt-red-darker: #7a0a1b;
  --cbt-red-soft: #fbe9eb;
  --cbt-charcoal: #23262b;

  --ap-navy: var(--cbt-charcoal);
  --ap-blue: var(--cbt-red);
  --ap-cyan: #ff8a95;
  --ap-surface: #f8f6f5;
  --ap-line: #ece5e3;

  --bs-primary: #c8102e;
  --bs-primary-rgb: 200, 16, 46;
  --bs-link-color: #b0102a;
  --bs-link-color-rgb: 176, 16, 42;
  --bs-link-hover-color: #7a0a1b;
  --bs-link-hover-color-rgb: 122, 10, 27;
}

.btn-primary {
  --bs-btn-bg: var(--cbt-red); --bs-btn-border-color: var(--cbt-red);
  --bs-btn-hover-bg: var(--cbt-red-dark); --bs-btn-hover-border-color: var(--cbt-red-dark);
  --bs-btn-active-bg: var(--cbt-red-darker); --bs-btn-active-border-color: var(--cbt-red-darker);
  --bs-btn-disabled-bg: var(--cbt-red); --bs-btn-disabled-border-color: var(--cbt-red);
  --bs-btn-focus-shadow-rgb: 200, 16, 46;
}
.btn-outline-primary {
  --bs-btn-color: var(--cbt-red); --bs-btn-border-color: var(--cbt-red);
  --bs-btn-hover-color: #fff; --bs-btn-hover-bg: var(--cbt-red); --bs-btn-hover-border-color: var(--cbt-red);
  --bs-btn-active-color: #fff; --bs-btn-active-bg: var(--cbt-red-dark); --bs-btn-active-border-color: var(--cbt-red-dark);
  --bs-btn-focus-shadow-rgb: 200, 16, 46;
}
.form-control:focus, .form-select:focus { border-color: #e88a97; box-shadow: 0 0 0 .25rem rgba(200, 16, 46, .15); }

/* Type: the geometric caps of the original CBT wordmark for headlines. */
.cbt-logo-word, .ap-hero h1, h1.h2, .section-title {
  font-family: 'Josefin Sans', var(--bs-font-sans-serif);
  letter-spacing: .01em;
}
.ap-hero h1, h1.h2 { padding-top: .12em; } /* Josefin sits high on its line */
.cbt-logo-word {
  font-size: 1.05rem; font-weight: 700; text-transform: uppercase; letter-spacing: .07em;
  color: var(--cbt-charcoal); padding-bottom: 0; padding-top: .18em; white-space: nowrap;
}
.cbt-logo-word .ap-logo-accent { color: var(--cbt-red); }
@media (min-width: 400px) { .cbt-logo-word { font-size: 1.15rem; } }

/* Header: a red stripe across the top. */
.ap-navbar {
  border-top: 4px solid var(--cbt-red);
  box-shadow: 0 1px 2px rgba(35, 38, 43, .05);
}
.ap-navbar .nav-link:hover, .ap-navbar .nav-link:focus { color: var(--cbt-red); }

/* Hero: maple red with the mark, large and faint, on the right. */
.ap-hero {
  background:
    url('../images/cbt-hero-mark.svg') no-repeat right -40px center / 340px auto,
    linear-gradient(135deg, var(--cbt-red-darker) 0%, var(--cbt-red-dark) 45%, var(--cbt-red) 100%);
}
@media (max-width: 767.98px) {  /* the text runs full width on phones: no mark behind it */
  .ap-hero { background: linear-gradient(135deg, var(--cbt-red-darker) 0%, var(--cbt-red-dark) 45%, var(--cbt-red) 100%); }
}
.ap-search { box-shadow: 0 8px 24px rgba(122, 10, 27, .18); }
.dolar-chip { background: rgba(255, 255, 255, .16); }

/* Footer: charcoal with the red stripe. */
.ap-footer { background: var(--cbt-charcoal); border-top: 4px solid var(--cbt-red); }
.ap-footer .cbt-logo-word { color: #fff; }
.ap-footer .cbt-logo-word .ap-logo-accent { color: #ff8a95; }

/* smbs_base's cookie banner ships Bootstrap blue. */
body .smbs-cookie-consent__btn--accept { background: var(--cbt-red); border-color: var(--cbt-red); }
body .smbs-cookie-consent__btn--accept:hover { background: var(--cbt-red-dark); border-color: var(--cbt-red-dark); }

/* Light-blue accents in alpuente.css, in red here. */
.feed-avatar { background: var(--cbt-red-soft); color: var(--cbt-red); }
.feed-tag:hover, .best-window { background: var(--cbt-red-soft); }
@keyframes ap-flash { from { background: var(--cbt-red-soft); } to { background: transparent; } }
.border-card.is-top { border-top-color: var(--cbt-red); }
.border-card:hover { box-shadow: 0 6px 20px rgba(35, 38, 43, .08); }
.report-fab { box-shadow: 0 8px 20px rgba(35, 38, 43, .25); }
.direction-label { color: var(--cbt-charcoal); }