﻿:root {
    --accent: #eb586f;
    --muted: #6c757d;
    --card-bg: #fff;
    --bg: #F6F6F6;
}

body {
    background: var(--bg);
    color: #222;
    font-family: Inter,system-ui,Segoe UI,Roboto,Arial;
}

.hero {
    background: linear-gradient(90deg, #072f2f44, rgba(11,95,106,0.05));
    padding: 40px 0
}

.logo {
    height: 72px;
    object-fit: contain
}

.stat-card {
    border: 0;
    border-radius: 12px;
    box-shadow: 0 6px 18px rgba(14,30,37,.06);
    padding: 18px;
    background: var(--card-bg)
}

.stat-value {
    font-weight: 700;
    font-size: 1.4rem;
    color: var(--accent)
}

.section-title {
    font-weight: 700;
    margin-bottom: 0.5rem
}

.gallery-img {
    height: 160px;
    object-fit: cover;
    border-radius: 8px;
    cursor: pointer
}

.pdf-link {
    background: var(--accent);
    color: #fff;
    padding: .45rem .7rem;
    border-radius: 6px;
    text-decoration: none;
    display: inline-block
}

.pdf-link:hover {
    background-color: #f5dade !important;
    color: #222 !important;
}

a.small-link {
    font-size: small;
    text-decoration: none;
}
a.small-link:hover {
    text-decoration:underline;
}

.card-compact {
    padding: 12px;
    border-radius: 10px;
    background: #fff;
    box-shadow: 0 4px 10px rgba(0,0,0,.04)
}

footer {
    /*padding: 24px 0;*/
    color: var(--muted)
}

    footer small {
        font-size: .675em !important;
    }

.top-nav .nav-link {
    color: #222
}
/* responsive */
@media(min-width:992px) {
    .hero {
        padding: 56px 0
    }

    .gallery-img {
        height: 200px
    }
}

/* adjust this value to match your navbar height (in px) */
:root {
    --nav-height: 52px;
}

/* make native anchor jumps account for the sticky header */
[id] {
    scroll-margin-top: calc(var(--nav-height) + 5px); /* 12px extra gap */
}

/* optional smooth scrolling */
html {
    scroll-behavior: smooth;
    scroll-padding-top: var(--nav-height);
}

.ftr_CBWTF {
    color: #003366 !important;
    font-weight: bold !important;
    font-family: Arial !important;
}

.ftr_Smart {
    color: #FF5C00 !important;
    font-weight: bold !important;
    font-family: Georgia !important;
}

.ftr_Care {
    color: #7DC607 !important;
    font-weight: bold !important;
    font-family: Georgia !important;
}

/* gallery modal nav buttons */
.modal .btn-icon {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width:44px;
  height:44px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  z-index:1051;
  background: rgba(0,0,0,0.55);
  color: #fff;
  border: 0;
  box-shadow: 0 6px 18px rgba(0,0,0,0.4);
}
.modal .btn-icon:focus { outline: 3px solid rgba(255,255,255,0.12); }
.modal .btn-prev { left: 12px; }
.modal .btn-next { right: 12px; }

/* make modal image adapt nicely */
#mediaModalImg { width:100%; height:auto; display:block; }

/* smaller screens: move buttons inward */
@media (max-width: 576px){
  .modal .btn-icon { width:38px; height:38px; }
  .modal .btn-prev { left:8px; }
  .modal .btn-next { right:8px; }
}


/* Make images inside the document modal responsive and avoid horizontal scroll */
#pdfModal .modal-body { overflow-x: hidden; } /* prevent horizontal scroll on modal body */
#pdfImage {
  display: block;
  max-width: 100%;
  height: auto;
  margin: 0 auto;
  object-fit: contain;
}

/* gallery modal nav buttons */
.modal .btn-icon {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 44px;
    height: 44px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1051;
    background: rgba(0,0,0,0.55);
    color: #fff;
    border: 0;
    box-shadow: 0 6px 18px rgba(0,0,0,0.4);
}

.modal .btn-icon:focus {
    outline: 3px solid rgba(255,255,255,0.12);
}

.modal .btn-prev {
    left: 12px;
}

.modal .btn-next {
    right: 12px;
}

#mediaModalImg {
    width: 100%;
    height: auto;
    display: block;
    max-height: 78vh;
    object-fit: contain;
    background: #111;
}

@media (max-width: 576px) {
    .modal .btn-icon {
        width: 38px;
        height: 38px;
    }

    .modal .btn-prev {
        left: 8px;
    }

    .modal .btn-next {
        right: 8px;
    }
}

/* Card equal-height helpers and equipment styling */
#stats .stat-card {
    border-radius: 8px;
    min-height: 300px;
    display: flex;
    flex-direction: column;
}
@media (max-width:767px) {
    #stats .stat-card {
        min-height: auto;
    }
}

#stats .equip-icon {
    width: 44px;
    height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    background: #f7fbff;
    color: var(--bs-primary,#0b6efd);
    flex-shrink: 0;
    box-shadow: 0 4px 10px rgba(11,110,253,0.06);
}
#stats .equip-name {
    font-size: 0.98rem;
}
#stats .equip-sub {
    display: block;
    font-size: 0.82rem;
    color: #6c757d;
}
#stats .equipment-list .equip-row + hr {
    border-top: 1px solid #eef4ff;
}
#stats .stat-card .fw-bold {
    font-size: 1.02rem;
}

/* Make sure lists look clean */
#stats #vehicle-list ul li, #hcfs-list li {
    border-bottom: 1px dashed #eef6ff;
}
#stats #vehicle-list ul li:last-child, #hcfs-list li:last-child {
    border-bottom: none;
}
