/* Shared top bar + footer for the Ride Kerala website (index.html,
   download.html). Same green-and-black tokens as the apps and legal.css.
   Classes are prefixed rk- so they never clash with a page's own styles. */
:root {
  --rk-brand: #068624;
  --rk-brand-bright: #06B62A;
  --rk-ink-dark: #0A2622;
  --rk-bar-bg: rgba(255, 255, 255, .92);
  --rk-bar-line: #DCE9DE;
  --rk-bar-ink: #141414;
  --rk-bar-soft: #4a4a4a;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --rk-bar-bg: rgba(14, 21, 18, .92);
    --rk-bar-line: #24322B;
    --rk-bar-ink: #E8F0EA;
    --rk-bar-soft: #C2CFC6;
  }
}
:root[data-theme="dark"] {
  --rk-bar-bg: rgba(14, 21, 18, .92); --rk-bar-line: #24322B; --rk-bar-ink: #E8F0EA; --rk-bar-soft: #C2CFC6;
}

.rk-bar {
  position: sticky; top: 0; z-index: 50;
  background: var(--rk-bar-bg);
  -webkit-backdrop-filter: saturate(160%) blur(10px); backdrop-filter: saturate(160%) blur(10px);
  border-bottom: 1px solid var(--rk-bar-line);
}
.rk-bar-in {
  max-width: 1120px; margin: 0 auto; padding: 0 16px; height: 60px;
  display: flex; align-items: center; gap: 16px;
}
.rk-brand {
  display: flex; align-items: center; gap: 10px; text-decoration: none;
  color: var(--rk-bar-ink); font: 700 18px/1 Poppins, system-ui, sans-serif; white-space: nowrap;
}
.rk-brand img { width: 34px; height: 34px; border-radius: 9px; border: 1px solid var(--rk-bar-line); background: #fff; }
.rk-nav { display: none; margin-left: auto; gap: 4px; }
.rk-nav a {
  color: var(--rk-bar-soft); text-decoration: none; font: 600 15px/1 Poppins, system-ui, sans-serif;
  padding: 10px 12px; border-radius: 999px;
}
.rk-nav a:hover, .rk-nav a[aria-current="page"] { color: var(--rk-bar-ink); background: rgba(6, 134, 36, .10); }
.rk-dl {
  margin-left: auto; display: inline-flex; align-items: center; gap: 8px; white-space: nowrap;
  background: var(--rk-brand); color: #fff; text-decoration: none;
  font: 700 15px/1 Poppins, system-ui, sans-serif; padding: 11px 16px; border-radius: 999px;
}
.rk-dl svg { width: 18px; height: 18px; }
.rk-dl:focus-visible, .rk-nav a:focus-visible, .rk-brand:focus-visible { outline: 3px solid var(--rk-brand-bright); outline-offset: 2px; }
@media (min-width: 760px) {
  .rk-nav { display: flex; }
  .rk-dl { margin-left: 8px; }
}