/*
 * Busboy site styles.
 *
 * Palette is lifted from the app's own Material 3 schemes in
 * composeApp/src/commonMain/kotlin/dev/lizardqueen/busboy/core/presentation/Colors.kt
 * so the site matches the product. The app re-themes per agency; the site uses
 * CTA blue as primary and AC Transit green as the accent to show both at once.
 *
 * Bootstrap's own files in this directory are vendored and must not be edited.
 * Everything custom lives here.
 */

:root {
    /* CTA blue — light scheme */
    --bb-primary: #00658D;
    --bb-on-primary: #FFFFFF;
    --bb-primary-container: #C8E6FF;
    --bb-on-primary-container: #011E2D;

    /* AC Transit green — light scheme */
    --bb-accent: #006D41;
    --bb-accent-container: #87F9B8;
    --bb-on-accent-container: #002110;

    --bb-bg: #F8F9FB;
    --bb-surface: #FFFFFF;
    --bb-text: #1A1C1D;
    --bb-muted: #5C646B;
    --bb-border: #DBE4EB;

    --bb-radius: 14px;
    --bb-shadow: 0 1px 2px rgba(16, 24, 32, .06), 0 8px 24px rgba(16, 24, 32, .06);

    /* Let Bootstrap's link utilities follow the brand. */
    --bs-link-color-rgb: 0, 101, 141;
    --bs-link-hover-color-rgb: 0, 74, 103;
}

[data-bs-theme="dark"] {
    --bb-primary: #8BCEFC;
    --bb-on-primary: #003553;
    --bb-primary-container: #004D73;
    --bb-on-primary-container: #C0E7FF;

    --bb-accent: #7FD9A5;
    --bb-accent-container: #00532C;
    --bb-on-accent-container: #9BF5C0;

    --bb-bg: #191C1E;
    --bb-surface: #21262A;
    --bb-text: #E0E3E6;
    --bb-muted: #A7AFB6;
    --bb-border: #40484E;

    --bb-shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 8px 24px rgba(0, 0, 0, .3);

    --bs-link-color-rgb: 139, 206, 252;
    --bs-link-hover-color-rgb: 192, 231, 255;
}

body {
    background-color: var(--bb-bg);
    color: var(--bb-text);
    -webkit-font-smoothing: antialiased;
}

/* The app supports a 2.0 font scale; give long-form text room to breathe too. */
main {
    line-height: 1.65;
}

/* ---------- Focus + skip link ---------- */

:focus-visible {
    outline: 3px solid var(--bb-primary);
    outline-offset: 2px;
    border-radius: 4px;
}

.skip-link {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 1100;
    padding: .75rem 1.25rem;
    background: var(--bb-primary);
    color: var(--bb-on-primary);
    font-weight: 600;
    text-decoration: none;
}

.skip-link:focus {
    left: 0;
}

/* ---------- Wordmark ---------- */

.bb-wordmark {
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    font-weight: 700;
    font-size: 1.3rem;
    letter-spacing: -.02em;
    color: var(--bb-text);
    text-decoration: none;
}

.bb-wordmark:hover {
    color: var(--bb-text);
}

.bb-wordmark svg {
    display: block;
    color: var(--bb-primary);
}

/* ---------- Nav ---------- */

.bb-nav {
    background-color: var(--bb-surface);
    border-bottom: 1px solid var(--bb-border);
}

.bb-nav .nav-link {
    color: var(--bb-muted);
    font-weight: 500;
    padding: .5rem .85rem;
    border-radius: 8px;
}

.bb-nav .nav-link:hover,
.bb-nav .nav-link:focus {
    color: var(--bb-text);
}

.bb-nav .nav-link.active {
    color: var(--bb-primary);
    font-weight: 600;
}

/* 44px minimum hit area, mirroring the app's touch-target floor. */
.bb-icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    min-height: 44px;
    padding: 0;
    border: 1px solid var(--bb-border);
    border-radius: 10px;
    background: transparent;
    color: var(--bb-text);
    line-height: 1;
}

.bb-icon-btn:hover {
    background: var(--bb-bg);
}

/* ---------- Hero ---------- */

.bb-hero {
    position: relative;
    overflow: hidden;
    padding: clamp(3rem, 9vw, 6.5rem) 0 clamp(2.5rem, 7vw, 5rem);
    background:
            radial-gradient(1100px 380px at 12% -10%, var(--bb-primary-container) 0%, transparent 62%),
            radial-gradient(900px 340px at 92% 6%, var(--bb-accent-container) 0%, transparent 60%);
}

.bb-hero h1 {
    font-weight: 800;
    letter-spacing: -.035em;
    font-size: clamp(2.25rem, 6vw, 3.75rem);
    line-height: 1.08;
    max-width: 16ch;
}

.bb-hero .lead {
    color: var(--bb-muted);
    font-size: clamp(1.05rem, 2.1vw, 1.3rem);
    max-width: 56ch;
}

.bb-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: .35rem .8rem;
    border-radius: 999px;
    background: var(--bb-surface);
    border: 1px solid var(--bb-border);
    color: var(--bb-muted);
    font-size: .85rem;
    font-weight: 600;
    letter-spacing: .01em;
}

/* ---------- Buttons ---------- */

.bb-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    min-height: 48px;
    padding: .7rem 1.4rem;
    border-radius: 12px;
    border: 1px solid transparent;
    font-weight: 600;
    text-decoration: none;
    transition: filter .15s ease, background-color .15s ease;
}

.bb-btn-primary {
    background: var(--bb-primary);
    color: var(--bb-on-primary);
}

.bb-btn-primary:hover {
    filter: brightness(1.08);
    color: var(--bb-on-primary);
}

.bb-btn-outline {
    background: transparent;
    border-color: var(--bb-border);
    color: var(--bb-text);
}

.bb-btn-outline:hover {
    background: var(--bb-surface);
    color: var(--bb-text);
}

/* Store badges are inert until the app ships — make that legible, not just visual. */
.bb-btn-disabled {
    background: var(--bb-surface);
    border-color: var(--bb-border);
    color: var(--bb-muted);
    cursor: not-allowed;
    flex-direction: column;
    gap: .1rem;
    align-items: flex-start;
    padding: .6rem 1.3rem;
}

.bb-btn-disabled .bb-btn-disabled-top {
    font-size: .72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .07em;
}

.bb-btn-disabled .bb-btn-disabled-main {
    font-size: 1rem;
    font-weight: 700;
}

/* ---------- Sections + cards ---------- */

.bb-section {
    padding: clamp(3rem, 7vw, 5rem) 0;
}

.bb-section-title {
    font-weight: 700;
    letter-spacing: -.025em;
    font-size: clamp(1.6rem, 3.4vw, 2.25rem);
}

.bb-section-intro {
    color: var(--bb-muted);
    max-width: 62ch;
}

.bb-card {
    height: 100%;
    padding: 1.6rem;
    background: var(--bb-surface);
    border: 1px solid var(--bb-border);
    border-radius: var(--bb-radius);
    box-shadow: var(--bb-shadow);
}

.bb-card h3 {
    font-size: 1.15rem;
    font-weight: 700;
    margin-bottom: .5rem;
}

.bb-card p {
    color: var(--bb-muted);
    margin-bottom: 0;
}

.bb-card-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    margin-bottom: 1rem;
    border-radius: 11px;
    background: var(--bb-primary-container);
    color: var(--bb-on-primary-container);
}

.bb-card-icon-accent {
    background: var(--bb-accent-container);
    color: var(--bb-on-accent-container);
}

/* ---------- Agency split ---------- */

.bb-agency {
    height: 100%;
    padding: 1.75rem;
    border-radius: var(--bb-radius);
    border: 1px solid var(--bb-border);
    background: var(--bb-surface);
}

.bb-agency-cta {
    border-top: 4px solid #00A1DE; /* CTA brand blue, per Colors.kt derivation note */
}

.bb-agency-act {
    border-top: 4px solid var(--bb-accent);
}

.bb-agency h3 {
    font-size: 1.25rem;
    font-weight: 700;
}

.bb-agency .bb-agency-city {
    color: var(--bb-muted);
    font-size: .9rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .07em;
}

.bb-agency ul {
    margin: 1rem 0 0;
    padding-left: 1.1rem;
    color: var(--bb-muted);
}

.bb-agency li + li {
    margin-top: .4rem;
}

/* ---------- Privacy summary ---------- */

.bb-privacy-panel {
    padding: clamp(1.75rem, 4vw, 2.75rem);
    border-radius: var(--bb-radius);
    background: var(--bb-surface);
    border: 1px solid var(--bb-border);
    box-shadow: var(--bb-shadow);
}

.bb-check-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.bb-check-list li {
    display: flex;
    align-items: flex-start;
    gap: .7rem;
    padding: .45rem 0;
    color: var(--bb-text);
}

.bb-check-list svg {
    flex: 0 0 auto;
    margin-top: .3rem;
    color: var(--bb-accent);
}

/* ---------- Footer ---------- */

.bb-footer {
    padding: 2.5rem 0;
    background: var(--bb-surface);
    border-top: 1px solid var(--bb-border);
    color: var(--bb-muted);
    font-size: .925rem;
}

.bb-footer a {
    color: var(--bb-muted);
    text-decoration: none;
}

.bb-footer a:hover {
    color: var(--bb-text);
    text-decoration: underline;
}

/* ---------- Legal / long-form pages ---------- */

.bb-legal {
    max-width: 74ch;
}

.bb-legal h1 {
    font-weight: 800;
    letter-spacing: -.03em;
    font-size: clamp(1.9rem, 4.5vw, 2.6rem);
}

.bb-legal h2 {
    margin-top: 2.75rem;
    padding-top: 1.75rem;
    border-top: 1px solid var(--bb-border);
    font-size: 1.4rem;
    font-weight: 700;
    letter-spacing: -.02em;
}

.bb-legal h3 {
    margin-top: 1.75rem;
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--bb-muted);
}

.bb-legal p,
.bb-legal li {
    color: var(--bb-text);
}

.bb-legal .bb-legal-meta {
    padding: 1.1rem 1.25rem;
    border-radius: 12px;
    background: var(--bb-surface);
    border: 1px solid var(--bb-border);
    font-size: .95rem;
}

.bb-legal .bb-legal-meta p {
    margin-bottom: .3rem;
}

.bb-legal .bb-legal-meta p:last-child {
    margin-bottom: 0;
}

.bb-legal code {
    padding: .12em .38em;
    border-radius: 5px;
    background: var(--bb-primary-container);
    color: var(--bb-on-primary-container);
    font-size: .875em;
}

/* Wide tables must scroll inside themselves, never widen the page. */
.bb-table-wrap {
    overflow-x: auto;
    margin: 1.25rem 0;
    border: 1px solid var(--bb-border);
    border-radius: 12px;
}

.bb-table-wrap table {
    width: 100%;
    min-width: 34rem;
    margin: 0;
    border-collapse: collapse;
    font-size: .95rem;
}

.bb-table-wrap th,
.bb-table-wrap td {
    padding: .8rem 1rem;
    text-align: left;
    vertical-align: top;
    border-bottom: 1px solid var(--bb-border);
}

.bb-table-wrap thead th {
    background: var(--bb-bg);
    font-weight: 700;
}

.bb-table-wrap tbody tr:last-child td {
    border-bottom: 0;
}

/* The two "callout" paragraphs that open the policy. */
.bb-callout {
    margin: 1.5rem 0;
    padding: 1.25rem 1.4rem;
    border-left: 4px solid var(--bb-accent);
    border-radius: 0 12px 12px 0;
    background: var(--bb-surface);
}

.bb-callout ul {
    margin: 0;
    padding-left: 1.1rem;
}

.bb-callout li + li {
    margin-top: .75rem;
}

/* Sticky in-page contents for the policy, on wide screens only. */
.bb-toc {
    position: sticky;
    top: 5.5rem;
    padding: 1.25rem;
    border: 1px solid var(--bb-border);
    border-radius: 12px;
    background: var(--bb-surface);
    font-size: .9rem;
}

/* Deliberately not a heading: it would land an <h2> before the page's <h1>.
   The nav landmark's aria-label already exposes this block to screen readers. */
.bb-toc-title {
    margin: 0 0 .75rem;
    font-size: .78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--bb-muted);
}

.bb-toc ol {
    margin: 0;
    padding-left: 1.15rem;
}

.bb-toc li {
    margin-bottom: .35rem;
}

.bb-toc a {
    color: var(--bb-muted);
    text-decoration: none;
}

.bb-toc a:hover {
    color: var(--bb-primary);
    text-decoration: underline;
}

@media (prefers-reduced-motion: reduce) {
    * {
        transition: none !important;
        scroll-behavior: auto !important;
    }
}