/* Lionize Website Stylesheet */
/* Version 1.3 — mobile responsiveness fixes */
/* Base Styles */
body {
    font-family: 'Roboto', sans-serif;
    color: #333;
    background-color: #f8f9fa;
    /* Was 60px to compensate for a fixed navbar.
       The navbar is now sticky in normal document flow,
       so the artificial offset is no longer needed. */
    margin-top: 0;
    line-height: 1.7;
    font-size: 1rem;
    overflow-wrap: break-word;
}

/* Typography scaling */
h1.display-6 {
    font-family: 'Georgia', serif;
    color: #005724;
    font-weight: bold;
    font-size: clamp(1.75rem, 5vw, 2.5rem);
    overflow-wrap: break-word;
}
h2, h3, h6 {
    font-family: 'Georgia', serif;
    color: #005724;
    margin-top: 2rem;
    margin-bottom: 1rem;
    font-size: clamp(1.25rem, 4vw, 1.75rem);
    overflow-wrap: break-word;
}
p {
    margin-bottom: 1.25rem;
    font-size: 1rem;
}
ul {
    padding-left: 1.25rem;
    margin-bottom: 1.25rem;
}
ul li {
    margin-bottom: 0.5rem;
}
a {
    color: #FFA500;
    text-decoration: none;
    overflow-wrap: break-word;
}
a:hover {
    color: #005724;
    text-decoration: underline;
}

/* Navbar
   Changed from `position: fixed` to `position: sticky`.
   A fixed navbar sits on top of the page and needs a hard-coded
   body margin-top that never matches the real (mobile) navbar
   height — that caused content to hide under the menu. Sticky keeps
   the navbar in normal flow so it can never cover the page content,
   while still staying pinned to the top when scrolling. */
.navbar {
    background-color: #fff !important;
    position: sticky;
    top: 0;
    width: 100%;
    z-index: 9999;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    padding: 0.5rem 1rem;
    transition: padding 0.3s ease;
}
.navbar .navbar-brand {
    min-width: 0;
    max-width: 70%;
}
.navbar .navbar-brand .logo {
    max-height: 40px;
    max-width: 100%;
    width: auto;
    transition: transform 0.3s ease;
}
.navbar .navbar-brand .logo:hover {
    transform: scale(1.1);
}
.navbar .nav-link {
    color: #000 !important;
    font-weight: bold;
    font-size: 1.075rem;
    transition: color 0.3s ease;
    overflow-wrap: break-word;
}
.navbar .nav-link:hover,
.navbar .nav-link.active {
    color: #005724 !important;
}
.navbar .nav-item {
    margin: 0 5px !important;
    position: relative;
}
.navbar .nav-item::before,
.navbar .nav-item::after {
    content: "";
    position: absolute;
    width: 0;
    height: 0;
    border: 0px solid #FFA500;
    transition: 0.5s ease;
}
.navbar .nav-item::before {
    top: 0;
    left: 0;
}
.navbar .nav-item::after {
    bottom: 0;
    right: 0;
}
.navbar .nav-item:hover::before,
.navbar .nav-item:hover::after,
.navbar .nav-item.active::before,
.navbar .nav-item.active::after {
    width: 100%;
    border-width: 1px;
}
.navbar-toggler {
    background: #005724;
    color: #fff;
    padding: 8px 15px;
    border-radius: 4px;
    flex-shrink: 0;
}

/* Expanded mobile menu must be scrollable so long link lists
   can never be cut off by the viewport edge. */
@media (max-width: 991.98px) {
    .navbar .navbar-collapse {
        max-height: calc(100vh - 90px);
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }
}

/* Carousel */
.service-carousel {
    max-width: 100%;
    margin-bottom: 1.5rem;
}
.carousel-inner {
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}
.carousel-item {
    text-align: center;
    padding: 20px;
    background-color: #f1f1f1;
    transition: transform 0.5s ease, opacity 0.5s ease;
}
.carousel-item img {
    max-height: 200px;
    width: 100%;
    object-fit: cover;
    border-radius: 8px;
    transition: transform 0.3s ease;
}
.carousel-item img:hover {
    transform: scale(1.05);
}
.carousel-item h3 {
    font-family: 'Georgia', serif;
    color: #005724;
    margin-top: 1rem;
    margin-bottom: 0.5rem;
    font-size: 1.5rem;
    animation: slideUp 0.5s ease;
}
.carousel-item p {
    font-size: 0.9rem;
    color: #333;
}
.carousel-item .btn {
    background-color: #005724;
    border-color: #005724;
    color: #fff;
    font-size: 0.9rem;
    padding: 8px 16px;
}
.carousel-item .btn:hover {
    background-color: #00401a;
}
.carousel-control-prev,
.carousel-control-next {
    width: 5%;
    background: rgba(0, 87, 36, 0.5);
}
.carousel-control-prev-icon,
.carousel-control-next-icon {
    background-color: #FFA500;
    border-radius: 50%;
}
.carousel-indicators {
    position: relative; /* Change from absolute to relative */
    margin-top: 1rem; /* Add margin to push it down */
    margin-bottom: 0; /* Remove default bottom margin */
}
.carousel-indicators button {
    background-color: #FFA500;
}
.carousel-indicators .active {
    background-color: #005724;
}
@keyframes slideUp {
    from {
        transform: translateY(20px);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

/* Footer */
footer {
    background-color: #f1f1f1;
    padding: 2rem 0;
    font-size: 0.95rem;
}
footer h5 {
    font-family: 'Georgia', serif;
    color: #005724;
    margin-bottom: 1rem;
}
footer a {
    color: #FFA500;
    overflow-wrap: break-word;
}
footer a:hover {
    color: #005724;
}
footer .fab {
    font-size: 1.5rem;
    margin-right: 10px;
    color: #005724;
}
footer .fab:hover {
    color: #FFA500;
}

/* Responsive: Mobile-first */
@media (max-width: 768px) {
    .navbar {
        padding: 8px 10px;
    }
    .navbar .navbar-brand .logo {
        max-height: 28px;
    }
    .navbar .nav-link {
        font-size: 0.85rem;
        padding: 10px 5px;
    }
    .carousel-item {
        padding: 15px;
    }
    .carousel-item img {
        max-height: 150px;
    }
    .carousel-item h3 {
        font-size: 1.2rem;
    }
    .carousel-item p {
        font-size: 0.8rem;
    }
    .carousel-item .btn {
        font-size: 0.8rem;
        padding: 6px 12px;
    }
    /* Removed the old `max-height` cap on article images —
       it forced `width:100%` images to a fixed height and
       distorted their aspect ratio. `img-fluid` (max-width:100%;
       height:auto) is now allowed to work as intended. */
    .carousel-indicators {
        margin-top: 0.5rem;
    }
}
@media (max-width: 576px) {
    .carousel-item {
        padding: 10px;
    }
    .carousel-item img {
        max-height: 120px;
    }
    .carousel-item h3 {
        font-size: 1rem;
    }
    .carousel-item p {
        font-size: 0.75rem;
    }
    h1.display-6 {
        font-size: 1.5rem;
    }
    .carousel-indicators {
        margin-top: 0.3rem;
    }
}
@media (min-width: 769px) and (max-width: 1024px) {
    .navbar {
        padding: 10px 20px;
    }
    .navbar .navbar-brand .logo {
        max-height: 32px;
    }
    .navbar .nav-link {
        font-size: 0.95rem;
    }
}
@media (min-width: 1025px) {
    .navbar {
        padding: 15px 30px;
    }
    .navbar .navbar-brand .logo {
        max-height: 40px;
    }
    .navbar .nav-link {
        font-size: 1.1rem;
    }
}