/* Prose for the single-crossing pages. Loaded only by /ambassador-bridge,
   /detroit-windsor-tunnel and /gordie-howe-bridge, so the home page's
   stylesheet stays exactly as it was. Colours come from styles-v3.css. */

/* A way back to the comparison, above the fold. The crossing pages are entered
   cold from search, so without this the only route out is ~5 screens down. */
.crossing-breadcrumb {
  margin: 0 0 16px;
  font-family: var(--body);
  font-size: 14px;
  line-height: 1.4;
}

.crossing-breadcrumb ol {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 2px 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.crossing-breadcrumb li { color: var(--muted); }

.crossing-breadcrumb li + li::before {
  content: "›";
  margin-right: 8px;
  color: var(--line-strong);
}

.crossing-breadcrumb a {
  color: var(--us);
  text-underline-offset: 2px;
}

.crossing-breadcrumb a:hover { color: var(--ink); }

/* The home page H1 is a two-word city pair and can afford 114px. A crossing
   name is far longer, so it gets its own ceiling rather than wrapping badly. */
.crossing-hero h1 {
  font-size: clamp(38px, 5.6vw, 74px);
  line-height: .92;
}

.crossing-hero .crossing-name { display: block; color: var(--ink); }

@media (max-width: 560px) {
  .crossing-hero h1 { font-size: clamp(34px, 9vw, 44px); }
}

.crossing-prose {
  max-width: 66ch;
  margin: 28px 0 0;
  padding: 0;
  color: var(--ink);
  font-family: var(--body);
  font-size: 15px;
  line-height: 1.6;
}

.crossing-prose section + section { margin-top: 26px; }

.crossing-prose h2 {
  margin: 0 0 8px;
  font-family: var(--display);
  font-weight: 700;
  font-size: 20px;
  letter-spacing: 0.01em;
  color: var(--ink);
}

.crossing-prose p { margin: 0 0 10px; }
.crossing-prose p:last-child { margin-bottom: 0; }

.crossing-prose a {
  color: var(--us);
  text-underline-offset: 2px;
}

.crossing-prose a:hover { color: var(--ink); }

.crossing-prose strong { font-weight: 700; }

/* Hours and tolls read as reference data, not paragraphs. */
.fact-list {
  margin: 0 0 10px;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--line);
}

.fact-list > div {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 16px;
  justify-content: space-between;
  padding: 8px 0;
  border-bottom: 1px solid var(--line);
}

.fact-list dt { color: var(--muted); }

.fact-list dd {
  margin: 0;
  font-variant-numeric: tabular-nums;
  font-weight: 600;
}

/* Sideways scroll rather than a squeezed table on narrow phones. */
.toll-wrap {
  overflow-x: auto;
  margin: 0 0 10px;
}

.toll-table {
  width: 100%;
  min-width: 320px;
  border-collapse: collapse;
  font-variant-numeric: tabular-nums;
}

.toll-table th,
.toll-table td {
  padding: 8px 10px;
  text-align: left;
  border-bottom: 1px solid var(--line);
}

.toll-table thead th {
  font-family: var(--display);
  font-weight: 600;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted);
  border-bottom-color: var(--line-strong);
}

.toll-table td + td,
.toll-table th + th { text-align: right; }

/* "per axle" and similar qualifiers, kept subordinate to the row label. */
.toll-note {
  display: block;
  font-weight: 400;
  font-size: 13px;
  color: var(--muted);
}

/* Links across to the other two crossings. */
.crossing-nav {
  max-width: 66ch;
  margin: 26px 0 0;
  padding: 16px 0 0;
  border-top: 1px solid var(--line);
  font-family: var(--body);
  font-size: 15px;
}

.crossing-nav h2 {
  margin: 0 0 8px;
  font-family: var(--display);
  font-weight: 700;
  font-size: 16px;
}

.crossing-nav ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
}

.crossing-nav a { color: var(--us); }
.crossing-nav a:hover { color: var(--ink); }

@media (max-width: 560px) {
  .crossing-prose { margin-top: 22px; }
  .crossing-prose h2 { font-size: 18px; }
  .fact-list > div { justify-content: flex-start; }
}