/* =========================================================================
   Boat Ramp US — Site Stylesheet
   Design language: nautical, factual, low-ornament. Built on Bootstrap 5.3
   CSS variables rather than fighting them — component classes below extend
   Bootstrap's own utility classes (.btn, .navbar, .card-like patterns).
   ========================================================================= */

/* -------------------------------------------------------------------------
   1. Design tokens
   ------------------------------------------------------------------------- */
:root {
    /* Brand palette */
    --abr-navy-deep:   #0A2A3D;
    --abr-navy-mid:    #123B52;
    --abr-teal:        #1C7C8C;
    --abr-teal-dark:   #145F6C;
    --abr-foam:        #F3F8F7;
    --abr-sand:        #C9A667;
    --abr-sand-dark:   #AD8B4E;
    --abr-ink:         #142430;

    /* Status colors (used on ramp fee/status badges) */
    --abr-status-open:   #2E7D5B;
    --abr-status-fee:    #B4592E;
    --abr-status-closed: #A3372F;

    /* Type scale */
    --abr-font-display: "Space Grotesk", "Helvetica Neue", Arial, sans-serif;
    --abr-font-body:     "Inter", "Helvetica Neue", Arial, sans-serif;

    /* Bootstrap 5.3 variable overrides (global re-theme, no Sass needed) */
    --bs-body-bg: var(--abr-foam);
    --bs-body-color: var(--abr-ink);
    --bs-body-font-family: var(--abr-font-body);
    --bs-link-color: var(--abr-teal);
    --bs-link-hover-color: var(--abr-teal-dark);
    --bs-primary: var(--abr-teal);
    --bs-primary-rgb: 28, 124, 140;
    --bs-border-radius: 0.75rem;
    --bs-border-color: #E1EAE8;
}

/* -------------------------------------------------------------------------
   2. Base & typography
   ------------------------------------------------------------------------- */
body {
    font-family: var(--abr-font-body);
    color: var(--abr-ink);
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--abr-font-display);
    font-weight: 600;
    color: var(--abr-navy-deep);
}

.skip-link {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2000;
    padding: 0.75rem 1.25rem;
    background: var(--abr-sand);
    color: var(--abr-navy-deep);
    font-weight: 600;
}

.eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--abr-sand);
    margin-bottom: 0.75rem;
}

.section-title {
    font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2.1rem);
    margin-bottom: 0.5rem;
}

.section-subtitle {
    color: #45606D;
    max-width: 46rem;
}

.section-subtitle--full {
    max-width: none;
}

.trust-subtitle {
    max-width: 40rem;
}

/* -------------------------------------------------------------------------
   3. Navbar
   ------------------------------------------------------------------------- */
.site-navbar {
    background-color: var(--abr-navy-deep);
    padding-top: 0.85rem;
    padding-bottom: 0.85rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.navbar-brand {
    display: inline-flex;
    align-items: center;
}

.navbar-brand .brand-logo {
    height: 50px;
    width: auto;
}

.site-navbar .nav-link {
    color: rgba(255, 255, 255, 0.85);
    font-weight: 500;
}

.site-navbar .nav-link:hover,
.site-navbar .nav-link:focus {
    color: #FFFFFF;
}

/* No custom toggler-icon override needed: .navbar-dark already provides
   a light-colored hamburger icon and border by default. */

/* -------------------------------------------------------------------------
   3b. Share bar (mobile/tablet only)
   ------------------------------------------------------------------------- */
.share-bar {
    background: var(--abr-navy-mid);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.share-bar-inner {
    height: 42px;
}

.share-bar-label {
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: rgba(255, 255, 255, 0.65);
}

.share-bar-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    color: #FFFFFF;
    font-size: 0.9rem;
    text-decoration: none;
    border: none;
}

.share-bar-btn--facebook  { background: #1877F2; }
.share-bar-btn--linkedin  { background: #0A66C2; }
.share-bar-btn--whatsapp  { background: #25D366; }
.share-bar-btn--native    { background: var(--abr-sand); color: var(--abr-navy-deep); }
.share-bar-btn--copy      { background: var(--abr-teal); }
.share-bar-btn--google    { background: var(--abr-teal-dark); }
.share-bar-btn--apple     { background: var(--abr-navy-deep); }

/* Ramp quick-access bar: coordinates + directions (mobile/tablet, ramp
   pages only). Sits directly below the share bar. */
.ramp-quick-access-bar {
    background: #FFFFFF;
    border-bottom: 1px solid var(--bs-border-color);
}

.ramp-quick-access-inner {
    height: 42px;
}

.ramp-quick-access-pointer {
    color: var(--abr-teal);
    font-size: 0.85rem;
}

.ramp-quick-access-coords-wrap {
    min-width: 0;
}

.ramp-quick-access-coords {
    font-size: 0.8rem;
    color: var(--abr-navy-deep);
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* -------------------------------------------------------------------------
   4. Buttons (extend Bootstrap's .btn base, custom color modifiers)
   ------------------------------------------------------------------------- */
.btn-sand {
    background-color: var(--abr-sand);
    border-color: var(--abr-sand);
    color: var(--abr-navy-deep);
    font-weight: 600;
}

.btn-sand:hover,
.btn-sand:focus {
    background-color: var(--abr-sand-dark);
    border-color: var(--abr-sand-dark);
    color: var(--abr-navy-deep);
}

.btn-teal {
    background-color: var(--abr-teal);
    border-color: var(--abr-teal);
    color: #FFFFFF;
    font-weight: 600;
}

.btn-teal:hover,
.btn-teal:focus {
    background-color: var(--abr-teal-dark);
    border-color: var(--abr-teal-dark);
    color: #FFFFFF;
}

.btn-outline-navy {
    background-color: transparent;
    border-color: var(--abr-navy-deep);
    color: var(--abr-navy-deep);
    font-weight: 600;
}

.btn-outline-navy:hover,
.btn-outline-navy:focus {
    background-color: var(--abr-navy-deep);
    color: #FFFFFF;
}

/* -------------------------------------------------------------------------
   5. Hero
   ------------------------------------------------------------------------- */
.hero {
    position: relative;
    background: linear-gradient(160deg, var(--abr-navy-deep) 0%, var(--abr-navy-mid) 100%);
    color: #FFFFFF;
    padding-bottom: 3rem;
    overflow: hidden;
}

.hero-title {
    font-size: clamp(2rem, 1.5rem + 2.2vw, 3rem);
    color: #FFFFFF;
    line-height: 1.1;
    margin-bottom: 1rem;
}

.hero-subtitle {
    font-size: 1.05rem;
    color: rgba(255, 255, 255, 0.82);
    max-width: 34rem;
    margin-bottom: 1.75rem;
}

.hero-search {
    margin-bottom: 1rem;
}

.hero-search .form-control {
    border-radius: var(--bs-border-radius);
    border: none;
}

.hero-or-divider {
    display: flex;
    align-items: center;
    text-align: center;
    color: rgba(255, 255, 255, 0.5);
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin: 0.75rem 0;
}

.hero-or-divider::before,
.hero-or-divider::after {
    content: '';
    flex: 1;
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}

.hero-or-divider span {
    padding: 0 0.75rem;
}

.hero-map-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: linear-gradient(0deg, rgba(10, 42, 61, 0.85) 0%, rgba(10, 42, 61, 0) 100%);
    color: #FFFFFF;
    padding: 2rem 1rem 1rem;
    font-size: 0.85rem;
    font-weight: 600;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    pointer-events: none;
    z-index: 400;
}

.hero-map-overlay i {
    color: var(--abr-sand);
    margin-right: 0.35rem;
}

.hero-stats {
    max-width: 30rem;
}

.stat-number {
    font-family: var(--abr-font-display);
    font-size: clamp(1.5rem, 1.1rem + 1.2vw, 2rem);
    font-weight: 700;
    color: var(--abr-sand);
    line-height: 1.1;
}

.stat-label {
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.7);
}

.wave-divider {
    position: absolute;
    left: 0;
    right: 0;
    bottom: -1px;
    line-height: 0;
}

.wave-divider svg {
    width: 100%;
    height: 60px;
    display: block;
}

.wave-divider path {
    fill: var(--abr-foam);
}

/* -------------------------------------------------------------------------
   6. State cards
   ------------------------------------------------------------------------- */
/* Layout/box utilities (d-flex, flex-column, gap-1, p-3, bg-white, border,
   rounded, text-decoration-none, h-100) are applied directly in the
   template. Only the hover behavior is custom. */
.state-card {
    transition: border-color 0.15s ease, transform 0.15s ease;
}

.state-card:hover,
.state-card:focus {
    border-color: var(--abr-teal);
    transform: translateY(-2px);
}

.state-name {
    font-family: var(--abr-font-display);
    font-weight: 600;
    color: var(--abr-navy-deep);
}

.state-count {
    font-size: 0.85rem;
    color: var(--abr-teal-dark);
}

/* -------------------------------------------------------------------------
   7. Ramp cards (recently verified)
   ------------------------------------------------------------------------- */
/* Layout/box utilities (d-block, h-100, bg-white, border, rounded,
   text-decoration-none) are applied directly in the template.
   Only the accent left-border and hover behavior are custom. */
.ramp-card {
    border-left-width: 4px;
    border-left-color: var(--abr-status-open);
    transition: border-color 0.15s ease, transform 0.15s ease;
}

.ramp-card:hover,
.ramp-card:focus {
    border-color: var(--abr-teal);
    border-left-color: var(--abr-status-open);
    transform: translateY(-2px);
}

.ramp-card-body {
    padding: 1.1rem 1.25rem;
}

.ramp-name {
    font-size: 1.05rem;
    margin-bottom: 0.35rem;
}

.ramp-location,
.ramp-updated {
    font-size: 0.85rem;
    color: #45606D;
    margin-bottom: 0.2rem;
}

.ramp-updated {
    color: var(--abr-teal-dark);
}

/* -------------------------------------------------------------------------
   8. Trust / EEAT section
   ------------------------------------------------------------------------- */
/* h-100, p-4, rounded are applied directly in the template.
   Only the brand background tint is custom (not a Bootstrap theme color). */
.trust-card {
    background: var(--abr-foam);
}

.rollout-feature-box {
    background: linear-gradient(135deg, var(--abr-navy-deep) 0%, var(--abr-navy-mid) 100%);
    color: #FFFFFF;
}

.rollout-feature-box .eyebrow {
    color: var(--abr-sand);
}

.rollout-checklist li {
    margin-bottom: 0.4rem;
}

.rollout-checklist i {
    color: var(--abr-sand);
    margin-right: 0.4rem;
}

.rollout-feature-box .progress {
    background-color: rgba(255, 255, 255, 0.15);
}

.rollout-feature-box .text-muted {
    color: rgba(255, 255, 255, 0.75) !important;
}

.ramp-info-card {
    background: var(--abr-foam);
}

.text-teal {
    color: var(--abr-teal) !important;
}

.trust-icon {
    font-size: 1.6rem;
    color: var(--abr-teal);
    margin-bottom: 0.75rem;
    display: block;
}

.trust-title {
    font-size: 1.05rem;
    margin-bottom: 0.4rem;
}

.trust-card p {
    font-size: 0.9rem;
    color: #45606D;
    margin-bottom: 0;
}

/* -------------------------------------------------------------------------
   9. Tips teaser
   ------------------------------------------------------------------------- */
/* d-flex, align-items-center, gap-3, bg-white, border, rounded, p-4 are
   applied directly in the template. Only the dashed style + brand color
   are custom (Bootstrap's .border utility is solid by default). */
.tips-card {
    border-style: dashed;
    border-color: var(--abr-sand);
}

.tips-icon {
    font-size: 1.75rem;
    color: var(--abr-sand-dark);
    flex-shrink: 0;
}

/* -------------------------------------------------------------------------
   10. CTA band
   ------------------------------------------------------------------------- */
.section-cta {
    background: var(--abr-navy-deep);
}

.section-cta .section-title {
    margin-bottom: 0.5rem;
}

.cta-subtitle {
    color: rgba(255, 255, 255, 0.75);
    margin-bottom: 1.5rem;
}

/* -------------------------------------------------------------------------
   11. Footer
   ------------------------------------------------------------------------- */
.site-footer {
    background-color: var(--abr-navy-mid);
    color: rgba(255, 255, 255, 0.85);
}

.footer-brand {
    display: inline-flex;
    align-items: center;
    text-decoration: none;
    margin-bottom: 0.75rem;
}

.footer-brand .brand-logo {
    height: 50px;
    width: auto;
}

.footer-tagline {
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.65);
    max-width: 22rem;
}

.footer-email {
    font-size: 0.9rem;
    color: var(--abr-sand);
    text-decoration: none;
    font-weight: 600;
}

.footer-heading {
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: rgba(255, 255, 255, 0.55);
    margin-bottom: 0.85rem;
}

.footer-links {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.footer-links a {
    color: rgba(255, 255, 255, 0.85);
    text-decoration: none;
    font-size: 0.9rem;
}

.footer-links a:hover,
.footer-links a:focus {
    color: var(--abr-sand);
}

.footer-rule {
    border-color: rgba(255, 255, 255, 0.12);
    margin: 2rem 0 1.25rem;
}

.footer-copy,
.footer-sync {
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.55);
}

/* -------------------------------------------------------------------------
   12. Accessibility niceties
   ------------------------------------------------------------------------- */
a:focus-visible,
button:focus-visible,
.form-control:focus {
    outline: 2px solid var(--abr-sand);
    outline-offset: 2px;
}

/* Honeypot field for spam bots — hidden off-screen, not display:none,
   since some bots specifically skip display:none fields. */
.add-ramp-honeypot {
    position: absolute;
    left: -9999px;
    top: -9999px;
}

/* -------------------------------------------------------------------------
   15. Tips articles
   ------------------------------------------------------------------------- */
/* -------------------------------------------------------------------------
   16. Tips index card thumbnails
   ------------------------------------------------------------------------- */
/* -------------------------------------------------------------------------
   17. Photo banner (tips teaser)
   ------------------------------------------------------------------------- */
.tips-teaser-banner {
    position: relative;
    background-image:
        linear-gradient(90deg, rgba(10, 42, 61, 0.90) 0%, rgba(10, 42, 61, 0.62) 55%, rgba(10, 42, 61, 0.25) 100%),
        url('/img/launching-first-time-banner.webp');
    background-size: cover;
    background-position: center;
    border-radius: var(--bs-border-radius);
    padding: 3.5rem 2.5rem;
}

.tips-teaser-banner .section-title {
    color: #fff;
}

.tips-teaser-banner .section-subtitle {
    color: rgba(255, 255, 255, 0.85);
}

.waterways-banner {
    position: relative;
    background-image:
        linear-gradient(90deg, rgba(10, 42, 61, 0.90) 0%, rgba(10, 42, 61, 0.62) 55%, rgba(10, 42, 61, 0.25) 100%),
        url('/img/top-waterways-banner.webp');
    background-size: cover;
    background-position: center;
}

.waterways-banner .section-title,
.waterways-banner .section-subtitle {
    color: #fff;
}

.waterways-banner .section-subtitle {
    color: rgba(255, 255, 255, 0.85);
}

.tips-card-thumb {
    aspect-ratio: 1.91 / 1;
    overflow: hidden;
    border-radius: calc(var(--bs-border-radius) - 0.25rem);
    background: var(--abr-foam);
}

.tips-card-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.tips-card-thumb--placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--abr-sand-dark);
    font-size: 1.75rem;
}

.tips-article-body h2 {
    font-size: 1.4rem;
    margin-top: 2rem;
    margin-bottom: 0.75rem;
}

.tips-article-body h3 {
    font-size: 1.15rem;
    margin-top: 1.5rem;
    margin-bottom: 0.5rem;
    color: var(--abr-navy-deep);
}

.tips-article-body p {
    color: #33505E;
    line-height: 1.7;
}

.tips-article-body ul,
.tips-article-body ol {
    color: #33505E;
    line-height: 1.7;
}

/* Table-of-contents box for tips articles — reuses the same foam
   background + teal left-border pattern already used for
   .waterway-ramp-count-message, so it reads as "site-standard callout"
   rather than a one-off. Bootstrap's .list-unstyled handles removing
   bullets; only the box and the small label needed custom rules. */
.article-toc {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    padding: 1.1rem 1.5rem;
    margin: 1.25rem 0 1.75rem;
    background: var(--abr-foam);
    border-left: 4px solid var(--abr-teal);
    border-radius: var(--bs-border-radius);
}

.article-toc-heading {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.15rem;
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--abr-teal-dark);
}

.article-toc-list li {
    padding: 0.15rem 0;
}

/* Finalized photo (as opposed to .article-photo-placeholder, which is
   only for the dashed-border "photo pending" state before an image
   exists). No border/foam background here - just the image and a small
   caption underneath. */
.article-photo {
    margin: 1.5rem 0;
    padding: 1.25rem;
    background: var(--abr-foam);
    border-radius: var(--bs-border-radius);
}

.article-photo img {
    display: block;
    width: 100%;
}

.article-photo-caption {
    margin: 0.5rem 0 0;
    font-size: 0.8rem;
    font-style: italic;
    color: #6C8791;
    text-align: center;
}

.article-photo-placeholder {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1.25rem;
    margin: 1.5rem 0;
    background: var(--abr-foam);
    border: 1px dashed var(--abr-sand);
    border-radius: var(--bs-border-radius);
}

.article-photo-placeholder i {
    font-size: 1.5rem;
    color: var(--abr-sand-dark);
    flex-shrink: 0;
}

.article-photo-placeholder p {
    margin-bottom: 0;
    font-size: 0.9rem;
    font-style: italic;
    color: var(--abr-navy-mid);
}

.article-product-callout {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 1.25rem;
    margin: 1.5rem 0;
    background: #FFFFFF;
    border: 1px solid var(--abr-sand);
    border-left: 4px solid var(--abr-sand);
    border-radius: var(--bs-border-radius);
}

.article-product-callout i {
    font-size: 1.4rem;
    color: var(--abr-sand-dark);
    flex-shrink: 0;
    margin-top: 0.15rem;
}

.article-product-callout p {
    margin-bottom: 0.25rem;
    font-size: 0.92rem;
}

.article-product-link {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--abr-teal-dark);
    text-decoration: none;
}

.article-product-link:hover,
.article-product-link:focus {
    color: var(--abr-teal);
    text-decoration: underline;
}

/* State bubble markers on /states/ — size varies per state (set via
   inline iconSize from JS), this just handles the visual styling. */
.state-bubble-marker-wrap {
    background: transparent;
    border: none;
}

.user-location-marker-wrap {
    background: transparent;
    border: none;
}

.user-location-marker {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: #1A73E8;
    border: 2px solid #FFFFFF;
    box-shadow: 0 0 0 4px rgba(26, 115, 232, 0.25), 0 2px 6px rgba(10, 42, 61, 0.35);
}

.state-card--nearest {
    border-color: var(--abr-teal) !important;
    box-shadow: 0 0 0 2px var(--abr-teal);
}

.state-bubble-marker {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: var(--abr-teal);
    border: 2px solid #FFFFFF;
    box-shadow: 0 2px 6px rgba(10, 42, 61, 0.35);
    color: #FFFFFF;
    font-family: var(--abr-font-display);
    font-weight: 700;
    font-size: 0.8rem;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    cursor: pointer;
}

@media (prefers-reduced-motion: reduce) {
    .state-card,
    .ramp-card {
        transition: none;
    }
}

/* -------------------------------------------------------------------------
   13. Ramp profile page
   ------------------------------------------------------------------------- */

/* Sidebar sticks below the sticky navbar while scrolling the main column */
.ramp-sidebar-sticky {
    position: sticky;
    top: 5.5rem;
}
.ramp-breadcrumb-nav .breadcrumb {
    margin-bottom: 1.5rem;
}

.ramp-breadcrumb-nav .breadcrumb-item a {
    color: var(--abr-teal-dark);
    text-decoration: none;
}

.ramp-breadcrumb-nav .breadcrumb-item a:hover,
.ramp-breadcrumb-nav .breadcrumb-item a:focus {
    color: var(--abr-navy-deep);
    text-decoration: underline;
}

.ramp-breadcrumb-nav .breadcrumb-item.active {
    color: var(--abr-navy-mid);
}

.ramp-profile-heading {
    font-size: clamp(1.6rem, 1.3rem + 1.2vw, 2.25rem);
    margin-bottom: 0.75rem;
}

/* Status badges: Bootstrap's .badge handles size/padding/pill radius,
   only the brand colors per status are custom here. */
.ramp-badge-fee-free {
    background-color: var(--abr-status-open);
    color: #FFFFFF;
}

.ramp-badge-fee-required {
    background-color: var(--abr-status-fee);
    color: #FFFFFF;
}

.ramp-badge-fee-unknown {
    background-color: #D8E2E4;
    color: #45606D;
}

.ramp-badge-status-open {
    background-color: var(--abr-status-open);
    color: #FFFFFF;
}

.ramp-badge-status-closed-temp {
    background-color: var(--abr-status-fee);
    color: #FFFFFF;
}

.ramp-badge-status-closed-perm {
    background-color: var(--abr-status-closed);
    color: #FFFFFF;
}

.ramp-badge-status-unknown {
    background-color: #D8E2E4;
    color: #45606D;
}

.ramp-badge-access-type {
    background-color: var(--abr-navy-mid);
    color: #FFFFFF;
}

.ramp-badge-special-access {
    background-color: var(--abr-sand);
    color: var(--abr-navy-deep);
}

.ramp-amenity-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.35rem 0.75rem;
    background: var(--abr-foam);
    border-radius: 999px;
    font-size: 0.85rem;
    color: var(--abr-navy-deep);
}

.ramp-amenity-badge i {
    color: var(--abr-status-open);
}

.ramp-map-placeholder {
    height: 490px;
}

.ramp-source-note {
    font-size: 0.85rem;
    color: #45606D;
}

.ramp-source-link {
    color: var(--abr-teal-dark);
    font-weight: 600;
    text-decoration: underline;
    text-decoration-color: rgba(28, 124, 140, 0.35);
}

.ramp-source-link:hover,
.ramp-source-link:focus {
    color: var(--abr-navy-deep);
}

.ramp-section-heading {
    font-size: 1.2rem;
    margin-bottom: 0.75rem;
}

.nearby-ramps-list .nearby-ramp-item {
    padding-left: 0;
    padding-right: 0;
    border-color: var(--bs-border-color);
}

.nearby-ramp-link {
    color: var(--abr-navy-deep);
    text-decoration: none;
    font-weight: 500;
}

.nearby-ramp-link:hover,
.nearby-ramp-link:focus {
    color: var(--abr-teal);
}

.nearby-ramp-info {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

.nearby-ramp-waterbody {
    font-size: 0.78rem;
    color: #6C8791;
}

/* Waterway ramp count block */
.waterway-ramp-count-message {
    font-size: 0.95rem;
    color: var(--abr-navy-deep);
    background: var(--abr-foam);
    border-left: 4px solid var(--abr-teal);
    padding: 0.85rem 1rem;
    border-radius: var(--bs-border-radius);
    margin-bottom: 0.75rem;
}

.waterway-ramp-count-message a {
    color: var(--abr-teal-dark);
    font-weight: 600;
}

.waterway-ramp-count-message--solo {
    border-left-color: var(--abr-sand);
}

.waterway-ramps-list .waterway-ramp-item {
    padding-left: 0;
    padding-right: 0;
    border-color: var(--bs-border-color);
}

.waterway-ramp-link {
    color: var(--abr-navy-deep);
    text-decoration: none;
    font-weight: 500;
}

.waterway-ramp-link:hover,
.waterway-ramp-link:focus {
    color: var(--abr-teal);
}

.ramp-distance-label {
    font-size: 0.8rem;
    color: #6C8791;
    white-space: nowrap;
    flex-shrink: 0;
    margin-left: 0.75rem;
}

/* Sidebar quick-facts panel */
.ramp-fact-panel-heading {
    font-size: 1.05rem;
    margin-bottom: 1rem;
}

.ramp-fact-list dt {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--abr-teal-dark);
    margin-top: 0.85rem;
}

.ramp-fact-list dt:first-child {
    margin-top: 0;
}

.ramp-fact-list dd {
    font-size: 0.95rem;
    color: var(--abr-ink);
    margin-bottom: 0;
}

.ramp-coords-copy-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: var(--abr-foam);
    color: var(--abr-teal-dark);
    font-size: 0.8rem;
    flex-shrink: 0;
}

.ramp-coords-copy-button:hover,
.ramp-coords-copy-button:focus {
    background: var(--abr-teal);
    color: #FFFFFF;
}

.ramp-coords-format-toggle {
    padding: 0.1rem 0.5rem;
    border: 1px solid var(--bs-border-color);
    border-radius: 999px;
    background: #FFFFFF;
    color: var(--abr-teal-dark);
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.ramp-coords-format-toggle:hover,
.ramp-coords-format-toggle:focus {
    background: var(--abr-foam);
    border-color: var(--abr-teal);
}

/* -------------------------------------------------------------------------
   14. State & county profile pages
   ------------------------------------------------------------------------- */
.county-page-indicator {
    font-size: 0.9rem;
    font-weight: 400;
    color: #6C8791;
}

.county-ramp-card {
    transition: border-color 0.15s ease, transform 0.15s ease;
}

.county-ramp-card:hover,
.county-ramp-card:focus {
    border-color: var(--abr-teal);
    transform: translateY(-2px);
}

.county-ramp-card-name {
    font-weight: 500;
    color: var(--abr-navy-deep);
    font-size: 0.95rem;
}

.county-ramp-waterbody {
    font-size: 0.78rem;
    color: #6C8791;
}

.county-ramp-badges .badge {
    font-size: 0.7rem;
}

.county-waterway-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.35rem 0.75rem;
    background: var(--abr-foam);
    border-radius: 999px;
    font-size: 0.85rem;
    color: var(--abr-navy-deep);
}

.county-waterway-badge--link {
    text-decoration: none;
    transition: background-color 0.15s ease;
}

.county-waterway-badge--link:hover,
.county-waterway-badge--link:focus {
    background: var(--abr-teal);
    color: #FFFFFF;
}

.county-waterway-badge--link:hover .county-waterway-count,
.county-waterway-badge--link:focus .county-waterway-count {
    color: var(--abr-teal-dark);
}

.county-waterway-count {
    background: #FFFFFF;
    color: var(--abr-teal-dark);
    font-weight: 700;
    font-size: 0.75rem;
    padding: 0.05rem 0.45rem;
    border-radius: 999px;
}

/* Re-theme Bootstrap's pagination component to the site palette */
.pagination {
    --bs-pagination-color: var(--abr-teal-dark);
    --bs-pagination-hover-color: var(--abr-navy-deep);
    --bs-pagination-hover-bg: var(--abr-foam);
    --bs-pagination-active-bg: var(--abr-teal);
    --bs-pagination-active-border-color: var(--abr-teal);
    --bs-pagination-focus-color: var(--abr-navy-deep);
    --bs-pagination-focus-box-shadow: 0 0 0 0.2rem rgba(28, 124, 140, 0.25);
}

/* Quick stats strip */
.county-quick-stats {
    margin-top: 1.25rem;
}

.county-stat-block {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    padding: 0.85rem;
    background: var(--abr-foam);
    border-radius: var(--bs-border-radius);
    text-align: center;
}

.county-stat-number {
    font-family: var(--abr-font-display);
    font-weight: 700;
    font-size: 1.5rem;
    color: var(--abr-navy-deep);
    line-height: 1.1;
}

.county-stat-label {
    font-size: 0.75rem;
    color: var(--abr-teal-dark);
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

/* Re-theme Bootstrap's accordion (FAQ) to the site palette */
.accordion {
    --bs-accordion-active-bg: var(--abr-foam);
    --bs-accordion-active-color: var(--abr-navy-deep);
    --bs-accordion-btn-focus-box-shadow: 0 0 0 0.2rem rgba(28, 124, 140, 0.25);
    --bs-accordion-border-color: var(--bs-border-color);
}