/* Kimem Meter Taxi site skin. Values mirror packages/ui_kit/lib/src/theme/
   bd_colors.dart and bd_tokens.dart; keep the two in step. Contrast for every
   text pair verified >= 4.5:1 in both themes; the one 3.15:1 pair is the
   white CTA label on orange, legal only at >= 19px bold. */

@font-face { font-family: "Noto Sans"; font-style: normal; font-weight: 400; font-display: swap; src: url("/assets/fonts/noto-sans-latin-400.woff2") format("woff2"); }
@font-face { font-family: "Noto Sans"; font-style: normal; font-weight: 700; font-display: swap; src: url("/assets/fonts/noto-sans-latin-700.woff2") format("woff2"); }
@font-face { font-family: "Noto Sans Ethiopic"; font-style: normal; font-weight: 400; font-display: swap; src: url("/assets/fonts/noto-sans-ethiopic-400.woff2") format("woff2"); }
@font-face { font-family: "Noto Sans Ethiopic"; font-style: normal; font-weight: 700; font-display: swap; src: url("/assets/fonts/noto-sans-ethiopic-700.woff2") format("woff2"); }
@font-face { font-family: "Noto Serif"; font-style: normal; font-weight: 700; font-display: swap; src: url("/assets/fonts/noto-serif-latin-700.woff2") format("woff2"); }
@font-face { font-family: "Noto Serif Ethiopic"; font-style: normal; font-weight: 700; font-display: swap; src: url("/assets/fonts/noto-serif-ethiopic-700.woff2") format("woff2"); }

:root {
  color-scheme: light;
  --bg: #F5F5F5;
  --surface: #FFFFFF;
  --canvas: #F4FAFD;
  --ink: #232020;
  --muted: #6E6E6E;
  --line: #E0E0E0;
  --primary: #F26522;
  --primary-down: #D4501A;
  --primary-text: #A83D0F;
  --primary-subtle: #FEF0E9;
  --secondary: #116466;
  --secondary-text: #0A3F40;
  --secondary-subtle: #E7F0F0;
  --road: #116466;
  --link: #116466;
  --danger: #C62828;
  --door-bg: #0A3F40;
  --door-ink: #F5F2F0;
  --door-muted: #B8B2AE;
  --door-accent: #5CC1C3;
  --shadow-card: 0 4px 12px rgba(0, 0, 0, 0.08);
  --shadow-sheet: 0 -4px 16px rgba(0, 0, 0, 0.10);
  --t-feedback: 120ms;
  --t-state: 220ms;
  --t-transition: 320ms;
  --t-exit: 160ms;
  --ease-enter: cubic-bezier(0.215, 0.61, 0.355, 1);
  --ease-leave: cubic-bezier(0.55, 0.055, 0.675, 0.19);
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 14px;
  --radius-xl: 20px;
  --sans: "Noto Sans", "Noto Sans Ethiopic", "Ebrima", "Kefa", system-ui, sans-serif;
  --serif: "Noto Serif", "Noto Serif Ethiopic", "Nyala", "Kefa", Georgia, serif;
  --measure: 44rem;
  --wide: 68rem;
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #1A1817;
  --surface: #232020;
  --canvas: #2A2523;
  --ink: #F5F2F0;
  --muted: #B8B2AE;
  --line: #3A3634;
  --primary-text: #F58B57;
  --primary-subtle: #33231C;
  --secondary-text: #5CC1C3;
  --secondary-subtle: #16302F;
  --road: #5CC1C3;
  --link: #5CC1C3;
  --danger: #E57373;
  --shadow-card: 0 4px 12px rgba(0, 0, 0, 0.35);
  --shadow-sheet: 0 -4px 16px rgba(0, 0, 0, 0.40);
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; background: var(--bg); }
body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 1rem;
  line-height: 1.65;
  overflow-wrap: break-word;
}
img, svg { max-width: 100%; height: auto; display: block; }

/* The two scripts never share one line-height: Amharic carries diacritics
   and needs more leading than Latin at the same size. */
[lang="am"] { line-height: 1.65; }
[lang="en"] { line-height: 1.45; }
h1[lang="am"], h2[lang="am"], h3[lang="am"] { line-height: 1.35; }
h1[lang="en"], h2[lang="en"], h3[lang="en"] { line-height: 1.2; }

/* One language visible at a time; the html data-lang attribute decides. */
html[data-lang="am"] body [lang="en"] { display: none; }
html[data-lang="en"] body [lang="am"] { display: none; }

h1, h2 { font-family: var(--serif); font-weight: 700; }
h1 { font-size: clamp(2rem, 5.5vw, 3rem); }
h2 { font-size: clamp(1.5rem, 3.5vw, 2rem); }
h3 { font-family: var(--sans); font-weight: 700; font-size: 1.25rem; }
/* Even out the line lengths a headline breaks into. This moves where lines
   break, never the top of the first line, so the stop dots stay put. */
h1, h2, h3 { text-wrap: balance; }
p, li { max-width: var(--measure); text-wrap: pretty; }
.lead { font-size: 1.125rem; }
small, .small { font-size: 0.875rem; }
a { color: var(--link); text-underline-offset: 3px; }
a:hover { color: var(--primary-text); }
::selection { background: var(--primary-subtle); color: var(--ink); }
:root[data-theme="dark"] ::selection { background: #4A2E1E; color: var(--ink); }

:focus-visible { outline: 2px solid var(--primary); outline-offset: 3px; border-radius: 2px; }
.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip-link {
  position: absolute; left: -999px; top: 0; z-index: 100;
  background: var(--surface); color: var(--ink);
  padding: 12px 20px; border-radius: 0 0 var(--radius-sm) 0;
}
.skip-link:focus { left: 0; }

/* Header */
.site-header {
  background: var(--surface);
  border-bottom: 1px solid var(--line);
}
.site-header .bar {
  max-width: var(--wide); margin: 0 auto;
  padding: 12px 20px;
  display: flex; align-items: center; gap: 12px;
}
.site-header .brand { display: flex; align-items: center; min-height: 48px; }
.site-header .brand img { height: 34px; width: auto; }
.site-header nav { margin-left: auto; display: flex; align-items: center; gap: 4px; }
.site-header nav a {
  display: inline-flex; align-items: center;
  min-height: 48px; padding: 0 12px;
  color: var(--ink); text-decoration: none;
  font-weight: 700; font-size: 0.9375rem;
  border-radius: var(--radius-sm);
}
.site-header nav a:hover { background: var(--secondary-subtle); color: var(--secondary-text); }
.site-header nav a[aria-current="page"] { color: var(--primary-text); }
.toggle-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  min-height: 48px; min-width: 48px; padding: 0 12px;
  background: none; border: 1px solid var(--line); border-radius: var(--radius-sm);
  color: var(--ink); font: inherit; font-weight: 700; font-size: 0.9375rem;
  cursor: pointer;
  transition: background var(--t-feedback) var(--ease-enter);
}
.toggle-btn:hover { background: var(--secondary-subtle); }
.toggle-btn svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; }
.only-am, html[data-lang="en"] .only-en { display: inline; }
html[data-lang="am"] .only-en, html[data-lang="en"] .only-am { display: none; }
@media (max-width: 719px) {
  .site-header .bar { padding: 10px 12px; gap: 6px; }
  .site-header .brand img { height: 28px; }
  .site-header nav { gap: 2px; }
  .site-header nav a { padding: 0 8px; font-size: 0.875rem; }
  .toggle-btn { padding: 0 8px; font-size: 0.875rem; }
}

/* Buttons. The primary label is white on orange: legal only >= 19px bold,
   so this size never shrinks. */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 56px; padding: 12px 28px;
  border-radius: var(--radius-md); border: 0;
  font-family: var(--sans); font-size: 1.25rem; font-weight: 700;
  text-decoration: none; cursor: pointer;
  transition: background var(--t-feedback) var(--ease-enter), transform var(--t-feedback) var(--ease-enter);
}
.btn-primary { background: var(--primary); color: #FFFFFF; box-shadow: 0 2px 8px rgba(35, 32, 32, 0.18); }
.btn-primary:hover { background: var(--primary-down); color: #FFFFFF; }
.btn-primary:active { background: var(--primary-down); transform: translateY(1px); }
.btn-quiet {
  background: none; color: var(--secondary-text);
  border: 1.5px solid var(--secondary);
  font-size: 1.0625rem;
}
.btn-quiet:hover { background: var(--secondary-subtle); color: var(--secondary-text); }
.door-dark .btn-quiet { color: var(--door-accent); border-color: var(--door-accent); }
.door-dark .btn-quiet:hover { background: rgba(92, 193, 195, 0.12); color: var(--door-accent); }

/* Page rhythm */
.wrap { max-width: var(--wide); margin: 0 auto; padding: 0 20px; }
/* Vertical only: the shorthand would reset the left padding a stop needs to
   clear the road. */
.section { padding-block: 72px; }
.section-head { margin-bottom: 28px; }
.section-head p { color: var(--muted); margin-top: 8px; }

/* The road: one continuous route line threading the page.
   The line sits against the wrap's padding box and the dots against their own
   section, which starts 20px further in, so the road carries that 20px too. */
.road-page {
  position: relative;
  --head-half: calc(clamp(1.5rem, 3.5vw, 2rem) * 0.6);
}
html[data-lang="am"] .road-page { --head-half: calc(clamp(1.5rem, 3.5vw, 2rem) * 0.675); }
.road {
  position: absolute; bottom: 0; left: 50px; width: 4px;
  top: calc(72px + var(--head-half));
  border-radius: 2px;
  background: repeating-linear-gradient(
    to bottom, var(--road) 0 14px, transparent 14px 28px);
}
.stop { position: relative; padding-left: 64px; }
/* Each dot centres on the first line of its own heading: section padding, plus
   half a heading line, less half the dot. */
.stop-dot {
  position: absolute; left: 22px;
  top: calc(72px + var(--head-half) - 10px);
  width: 20px; height: 20px; border-radius: 50%;
  background: var(--bg); border: 3px solid var(--road);
  transition: background var(--t-state) var(--ease-enter);
}
/* The driver stop opens on a door, so its heading starts a door padding lower. */
#drivers .stop-dot { top: calc(112px + var(--head-half) - 10px); }
.stop.passed .stop-dot, .no-js .stop-dot { background: var(--road); }
/* The last stop is where the road ends, so it carries a second ring. */
.stop:last-child .stop-dot { box-shadow: 0 0 0 3px var(--bg), 0 0 0 5px var(--road); }
@media (max-width: 719px) {
  .road { left: 34px; }
  .stop { padding-left: 40px; }
  .stop-dot { left: 6px; }
}
@media (min-width: 720px) {
  .road { top: calc(96px + var(--head-half)); }
  .stop-dot { top: calc(96px + var(--head-half) - 10px); }
  #drivers .stop-dot { top: calc(152px + var(--head-half) - 10px); }
}

/* Doors. Canvas sits 1.04:1 against the page ground in light mode, so field
   colour alone cannot make the pale door read as a panel; the card shadow does
   it. One elevation cue only, never a shadow and a border together. */
.door {
  border-radius: var(--radius-xl);
  padding: 40px 28px;
  box-shadow: var(--shadow-card);
}
.door-pale { background: var(--canvas); }
.door-dark { background: var(--door-bg); color: var(--door-ink); }
.door-dark h2, .door-dark h3 { color: var(--door-ink); }
.door-dark p { color: var(--door-muted); }
.door-dark .accent { color: var(--door-accent); }
.door-dark a { color: var(--door-accent); }
/* The door palette overrides the global a:hover, so hover feedback has to be
   restated here or links inside a door have none. */
.door-dark a:hover { color: var(--door-ink); text-decoration-color: var(--door-accent); }

/* Store badges. Both official images are cropped to bare artwork with no
   built-in clear space (Play 564x168, Apple 119.66x40), so one height rule
   sizes them equally. */
.badge-row { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; }
/* The badge artwork is never touched; the link around it carries the hover. */
.badge-store {
  display: inline-flex; min-height: 48px; align-items: center;
  transition: transform var(--t-feedback) var(--ease-enter);
}
.badge-store:hover { transform: translateY(-2px); }
.badge-store:active { transform: translateY(0); }
.badge-store img { height: 40px; width: auto; }

/* Steps */
.steps { display: grid; gap: 28px; counter-reset: step; }
.step { position: relative; padding-left: 56px; max-width: var(--measure); }
.step::before {
  counter-increment: step; content: counter(step);
  position: absolute; left: 0; top: 0;
  width: 40px; height: 40px; border-radius: 50%;
  background: var(--secondary-subtle); color: var(--secondary-text);
  font-weight: 700; font-size: 1.125rem;
  display: flex; align-items: center; justify-content: center;
}
/* Connector from one numeral disc down to the next, echoing the road. It runs
   the 28px grid gap, so the last step carries none. */
.step::after {
  content: ""; position: absolute; left: 19px; top: 40px; bottom: -28px;
  width: 2px; background: var(--road); opacity: 0.7;
}
.step:last-child::after { content: none; }
.step h3 { margin-bottom: 4px; }
.step p { color: var(--muted); }

/* Fare figure */
.fare-figure { margin: 28px 0; }
.fare-figure svg { width: 100%; max-width: 560px; height: auto; }
.fare-equation {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
  font-weight: 700; font-size: 1.0625rem;
}
.fare-equation .term {
  background: var(--secondary-subtle); color: var(--secondary-text);
  border-radius: var(--radius-sm); padding: 8px 14px;
}
.fare-equation .op { color: var(--muted); font-size: 1.25rem; }
.fare-equation .result {
  background: var(--primary-subtle); color: var(--primary-text);
  border-radius: var(--radius-sm); padding: 8px 14px;
}

/* Blog strip and listing */
.post-list { display: grid; gap: 4px; max-width: var(--measure); }
.post-link {
  display: block; text-decoration: none; color: var(--ink);
  padding: 18px 16px; border-radius: var(--radius-md);
  border-bottom: 1px solid var(--line);
}
.post-list > .post-link:last-child { border-bottom: 0; }
.post-link:hover { background: var(--secondary-subtle); color: var(--ink); }
.post-link .title { display: block; font-weight: 700; font-size: 1.125rem; color: var(--secondary-text); }
.post-link:hover .title { color: var(--primary-text); }
.post-link .sub { display: block; color: var(--muted); margin-top: 2px; font-size: 0.9375rem; }
.post-link .date { display: block; color: var(--muted); margin-top: 6px; font-size: 0.875rem; }

/* Long-form prose (legal pages, blog posts) */
.prose { max-width: var(--measure); }
.prose h2 { margin-top: 44px; }
.prose h3 { margin-top: 26px; color: var(--secondary-text); }
.prose p, .prose ul { margin-top: 10px; }
.prose ul { padding-left: 22px; }
.prose li { margin: 6px 0; }
.meta-line { color: var(--muted); font-size: 0.875rem; margin-top: 6px; }

/* Notes and warnings */
.note {
  background: var(--primary-subtle);
  border-radius: var(--radius-md);
  padding: 14px 18px; max-width: var(--measure);
}

/* Footer */
.site-footer {
  background: var(--surface);
  border-top: 1px solid var(--line);
  margin-top: 72px;
  padding: 44px 0;
  font-size: 0.9375rem; color: var(--muted);
}
.site-footer .cols { display: grid; gap: 28px; }
.site-footer h2 {
  font-family: var(--sans); font-weight: 700;
  font-size: 1rem; color: var(--ink); margin-bottom: 10px;
}
.site-footer ul { list-style: none; }
.site-footer li { margin: 8px 0; }
.site-footer a { color: var(--secondary-text); text-decoration: none; }
.site-footer a:hover { color: var(--primary-text); text-decoration: underline; }
.site-footer .legal { margin-top: 32px; padding-top: 20px; border-top: 1px solid var(--line); }

@media (min-width: 720px) {
  .site-footer .cols { grid-template-columns: 2fr 1fr 1fr; }
  .door { padding: 56px 48px; }
  .section { padding-block: 96px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0.01ms !important; animation: none !important; }
  .stop-dot { background: var(--road); }
}