/* Page-scoped California e-bike laws layout.
   Loaded AFTER sitewide style.css + Bootstrap so draft sizing wins
   without restyling the rest of the marketing site. */

html body.eba-laws-page {
  --eba-blue: #255995;
  --eba-orange: #F25F25;
  --eba-orange2: #f26a21;
  --eba-cream: #f5f7fb;
  --eba-ink: #1a2b42;
  --eba-muted: #5b6c80;
  background: var(--eba-cream);
  color: var(--eba-ink);
  font-family: Inter, system-ui, sans-serif;
  font-size: 16px !important;
  line-height: 1.5;
}

/* Unstick overlay nav so the hero title is not covered. */
html body.eba-laws-page .navbar-container {
  position: relative !important;
  width: 100%;
  background: #fff;
  box-shadow: 0 1px 0 rgba(37, 89, 149, 0.10);
}

html body.eba-laws-page .navbar .nav-link {
  color: var(--eba-blue);
}

/* Visible breadcrumb strip is not used on this page (JSON-LD only). */
html body.eba-laws-page nav[aria-label="Breadcrumb"],
html body.eba-laws-page nav.breadcrumb,
html body.eba-laws-page .breadcrumb {
  display: none !important;
}

/* Compact navy hero — match draft py-16 / sm:py-20, not sitewide 100vh .hero */
html body.eba-laws-page .eba-hero,
html body.eba-laws-page header.eba-hero,
html body.eba-laws-page header.eba-hero.hero {
  display: block;
  width: 100% !important;
  max-width: none;
  height: auto !important;
  min-height: 0 !important;
  padding: 4rem 1.25rem !important;
  background: var(--eba-blue) !important;
  background-image: none !important;
  color: #fff;
}

@media (min-width: 576px) {
  html body.eba-laws-page .eba-hero,
  html body.eba-laws-page header.eba-hero {
    padding: 5rem 1.25rem !important;
  }
}

html body.eba-laws-page .eba-hero .eba-hero-inner,
html body.eba-laws-page .eba-hero .container {
  max-width: 48rem !important; /* draft max-w-3xl */
  margin-left: auto;
  margin-right: auto;
}

html body.eba-laws-page .eba-kicker,
html body.eba-laws-page .eba-hero .eba-kicker {
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-size: 0.75rem !important;
  font-weight: 700;
  color: var(--eba-orange2) !important;
  margin: 0;
}

html body.eba-laws-page .eba-hero h1,
html body.eba-laws-page .eba-hero h1.display-5 {
  font-size: 2.25rem !important; /* text-4xl */
  line-height: 1.15 !important;
  font-weight: 700 !important;
  color: #fff !important;
  margin: 0.75rem 0 0;
  max-width: none;
  text-align: left;
}

@media (min-width: 576px) {
  html body.eba-laws-page .eba-hero h1,
  html body.eba-laws-page .eba-hero h1.display-5 {
    font-size: 3rem !important; /* sm:text-5xl */
  }
}

html body.eba-laws-page .eba-hero p,
html body.eba-laws-page .eba-hero .lead,
html body.eba-laws-page .eba-hero .small,
html body.eba-laws-page .eba-hero a {
  font-size: 1.125rem !important;
  line-height: 2 !important;
  font-weight: 400 !important;
  color: rgba(255, 255, 255, 0.9) !important;
}

html body.eba-laws-page .eba-hero .small,
html body.eba-laws-page .eba-hero p.small {
  font-size: 0.875rem !important;
  color: rgba(255, 255, 255, 0.75) !important;
  line-height: 1.5 !important;
}

html body.eba-laws-page .eba-hero .btn,
html body.eba-laws-page .eba-hero .btn-lg {
  font-size: 0.875rem !important;
  line-height: 1.25 !important;
  font-weight: 600 !important;
  padding: 0.65rem 1.25rem;
  border-radius: 0.5rem;
}

html body.eba-laws-page .btn-eba {
  background: var(--eba-orange2);
  border: 0;
  color: #fff !important;
  font-weight: 600;
}

html body.eba-laws-page .btn-eba:hover {
  background: #e05a14;
  color: #fff !important;
}

/* White secondary CTA: navy text. Hero `color:#fff` plus sitewide `a`/`.btn`
   rules can paint the label white-on-white, so pin fill + color here. */
html body.eba-laws-page .btn-eba-outline,
html body.eba-laws-page .eba-hero a.btn.btn-eba-outline,
html body.eba-laws-page header.eba-hero a.btn.btn-eba-outline.btn-lg,
html body.eba-laws-page header.eba-hero a.btn.btn-light {
  background: #fff !important;
  background-color: #fff !important;
  color: #255995 !important;
  -webkit-text-fill-color: #255995 !important;
  border: 0 !important;
  font-weight: 600 !important;
}

html body.eba-laws-page .btn-eba-outline:hover,
html body.eba-laws-page .eba-hero a.btn.btn-eba-outline:hover,
html body.eba-laws-page header.eba-hero a.btn.btn-light:hover {
  background: #eef3f8 !important;
  color: #255995 !important;
  -webkit-text-fill-color: #255995 !important;
}

/* Content column matches draft max-w-6xl */
html body.eba-laws-page main.eba-laws-main,
html body.eba-laws-page main.container {
  max-width: 72rem !important;
  padding-top: 3rem;
  padding-bottom: 3rem;
}

html body.eba-laws-page main h2 {
  font-size: 1.875rem !important; /* text-3xl */
  line-height: 1.2 !important;
  font-weight: 700 !important;
  color: var(--eba-blue) !important;
  letter-spacing: -0.02em;
}

@media (min-width: 576px) {
  html body.eba-laws-page main h2 {
    font-size: 2.25rem !important; /* sm:text-4xl */
  }
}

html body.eba-laws-page main h3 {
  font-size: 1.125rem !important;
  line-height: 1.35 !important;
  font-weight: 600 !important;
  color: var(--eba-blue) !important;
}

html body.eba-laws-page main p,
html body.eba-laws-page main li {
  font-size: 1rem !important;
  line-height: 2 !important;
  color: var(--eba-muted);
}

/* Beat fonts.css / style.css `a { font-size: fluid/clamp !important }`
   (those selectors are ~0,2,1). Header .nav-link is outside main and is not targeted. */
html body.eba-laws-page main a,
html body.eba-laws-page article a,
html body.eba-laws-page main a:not(.nav-link):not(.dropdown-item):not(.btn):not(.breadcrumb-item-link):not(.label-link),
html body.eba-laws-page article a:not(.nav-link):not(.dropdown-item):not(.btn):not(.breadcrumb-item-link):not(.label-link),
html body.eba-laws-page .eba-card a:not(.btn):not(.breadcrumb-item-link):not(.label-link),
html body.eba-laws-page .eba-table a:not(.breadcrumb-item-link):not(.label-link),
html body.eba-laws-page details.eba-faq a:not(.breadcrumb-item-link):not(.label-link),
html body.eba-laws-page #sources a:not(.breadcrumb-item-link):not(.label-link),
html body.eba-laws-page #official-sources a:not(.breadcrumb-item-link):not(.label-link),
html body.eba-laws-page #about-eba a:not(.breadcrumb-item-link):not(.label-link),
html body.eba-laws-page #author a:not(.breadcrumb-item-link):not(.label-link) {
  font-size: inherit !important;
  line-height: inherit !important;
  color: var(--eba-blue);
}

html body.eba-laws-page main ul {
  list-style: disc;
  padding-left: 1.5rem;
  margin: 1rem 0;
}

html body.eba-laws-page main ol {
  list-style: decimal;
  padding-left: 1.5rem;
}

html body.eba-laws-page .eba-card {
  background: #fff;
  border-radius: 16px;
  padding: 1.5rem;
  box-shadow: 0 1px 2px rgba(23, 54, 91, 0.06);
}

@media (min-width: 576px) {
  html body.eba-laws-page .eba-card {
    padding: 2rem;
  }
}

html body.eba-laws-page .eba-card.p-0 {
  padding: 0 !important;
}

html body.eba-laws-page .row.g-3 {
  --bs-gutter-x: 1.25rem;
  --bs-gutter-y: 1.25rem;
}

html body.eba-laws-page .eba-pill {
  display: inline-block;
  border-radius: 999px;
  padding: 0.25rem 0.75rem;
  font-size: 0.75rem !important;
  font-weight: 600;
  line-height: 1.35;
  background: rgba(37, 89, 149, 0.1);
  color: var(--eba-blue);
}

html body.eba-laws-page .eba-pill-2027 {
  background: rgba(242, 106, 33, 0.15);
  color: #e05a14;
}

html body.eba-laws-page .eba-pill-pending {
  background: #fff3d6;
  color: #c48912;
}

html body.eba-laws-page .eba-pill-local {
  background: #fff;
  border: 1px solid rgba(37, 89, 149, 0.15);
  color: #5b6c80;
}

html body.eba-laws-page .eba-jump a,
html body.eba-laws-page main .eba-jump a:not(.breadcrumb-item-link):not(.label-link) {
  display: inline-block;
  margin: 0 0.25rem 0.5rem 0;
  padding: 0.35rem 0.85rem;
  border-radius: 999px;
  background: #fff;
  color: var(--eba-blue) !important;
  text-decoration: none;
  font-size: 0.875rem !important;
  line-height: 1.25 !important;
  border: 1px solid rgba(37, 89, 149, 0.15);
}

html body.eba-laws-page .eba-table,
html body.eba-laws-page .eba-table th,
html body.eba-laws-page .eba-table td,
html body.eba-laws-page .table {
  font-size: 0.875rem !important;
  line-height: 1.5 !important;
  vertical-align: top;
}

html body.eba-laws-page .eba-table thead {
  background: var(--eba-blue);
  color: #fff;
}

html body.eba-laws-page .eba-table thead th {
  color: #fff !important;
  font-weight: 600;
  padding: 0.75rem 1rem;
}

html body.eba-laws-page .eba-table tbody th,
html body.eba-laws-page .eba-table tbody td {
  padding: 0.75rem 1rem;
  color: var(--eba-ink);
}

html body.eba-laws-page .eba-table tbody th {
  color: var(--eba-blue);
  font-weight: 600;
}

html body.eba-laws-page details.eba-faq {
  background: var(--eba-cream);
  border-radius: 16px;
  padding: 1.25rem;
  margin-bottom: 0.75rem;
}

html body.eba-laws-page details.eba-faq summary {
  cursor: pointer;
  font-weight: 600;
  color: var(--eba-blue);
  font-size: 1rem !important;
}

html body.eba-laws-page details.eba-faq p {
  font-size: 0.875rem !important;
  line-height: 1.75 !important;
}

html body.eba-laws-page #sources .eba-card h3,
html body.eba-laws-page #official-sources .eba-card h3 {
  font-size: 1.125rem !important;
  line-height: 1.35 !important;
}

/* Official sources: beat sitewide fonts.css fluid type (h2 24–40px, a 16–24px).
   Draft Next uses ~text-3xl heading, text-sm intro, body-size list. */
html body.eba-laws-page #sources h2,
html body.eba-laws-page #official-sources h2,
html body.eba-laws-page section#sources h2,
html body.eba-laws-page section#official-sources h2 {
  font-size: 1.875rem !important;
  line-height: 1.25 !important;
  font-weight: 700 !important;
  letter-spacing: -0.02em;
  margin: 0 0 0.5rem !important;
}

html body.eba-laws-page #sources > p,
html body.eba-laws-page #official-sources > p,
html body.eba-laws-page #sources p.eba-sources-intro,
html body.eba-laws-page #official-sources p.eba-sources-intro {
  font-size: 0.875rem !important;
  line-height: 1.5 !important;
  font-weight: 400 !important;
  color: var(--eba-muted) !important;
  margin: 0.5rem 0 0.75rem !important;
}

html body.eba-laws-page #sources ul,
html body.eba-laws-page #official-sources ul {
  list-style: disc;
  padding-left: 1.25rem;
  margin: 0.75rem 0 1.25rem !important;
}

html body.eba-laws-page #sources li,
html body.eba-laws-page #official-sources li {
  font-size: 1rem !important;
  line-height: 1.5 !important;
  font-weight: 400 !important;
  margin: 0.25rem 0 !important;
}

html body.eba-laws-page #sources a,
html body.eba-laws-page #official-sources a,
html body.eba-laws-page #sources a:not(.breadcrumb-item-link):not(.label-link),
html body.eba-laws-page #official-sources a:not(.breadcrumb-item-link):not(.label-link) {
  font-size: inherit !important;
  line-height: inherit !important;
  font-weight: 500 !important;
}

@media (min-width: 1500px) {
  html body.eba-laws-page #sources h2,
  html body.eba-laws-page #official-sources h2 {
    font-size: 1.875rem !important;
  }
  html body.eba-laws-page #sources li,
  html body.eba-laws-page #official-sources li {
    font-size: 1rem !important;
  }
  html body.eba-laws-page #sources a:not(.breadcrumb-item-link):not(.label-link),
  html body.eba-laws-page #official-sources a:not(.breadcrumb-item-link):not(.label-link),
  html body.eba-laws-page #sources a,
  html body.eba-laws-page #official-sources a {
    font-size: inherit !important;
    line-height: inherit !important;
  }
}