/* =========================================================================
   AllBoatRamps.com — 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;
}

.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;
    gap: 0.5rem;
    font-family: var(--abr-font-display);
    font-weight: 700;
    font-size: 1.25rem;
    color: #FFFFFF;
}

.navbar-brand .brand-icon {
    color: var(--abr-sand);
    font-size: 1.35rem;
}

.brand-word-accent {
    color: var(--abr-sand);
}

.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. */

/* -------------------------------------------------------------------------
   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: 2.25rem;
}

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

.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
   ------------------------------------------------------------------------- */
.section-trust {
    background-color: #FFFFFF;
    border-top: 1px solid #E1EAE8;
    border-bottom: 1px solid #E1EAE8;
}

/* 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);
}

.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;
    gap: 0.5rem;
    font-family: var(--abr-font-display);
    font-weight: 700;
    font-size: 1.1rem;
    color: #FFFFFF;
    text-decoration: none;
    margin-bottom: 0.75rem;
}

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

.footer-hcard {
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.65);
    margin-top: 1rem;
}

.footer-hcard .email {
    color: var(--abr-sand);
    text-decoration: none;
}

.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;
}

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

/* -------------------------------------------------------------------------
   13. Ramp profile page
   ------------------------------------------------------------------------- */
.ramp-breadcrumb-nav .breadcrumb {
    margin-bottom: 1.5rem;
}

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

.ramp-summary-paragraph {
    font-size: 1.02rem;
    color: #33505E;
    max-width: 42rem;
}

/* 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-map-placeholder {
    border: 1px solid var(--bs-border-color);
}

.ramp-source-note {
    font-size: 0.85rem;
    color: #45606D;
    padding: 0.85rem 1rem;
    background: var(--abr-foam);
    border-radius: var(--bs-border-radius);
}

.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);
}

/* 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;
}