@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700;800&display=swap');

/* ============================================
   Ejaz Hospital — Custom Styles
   Companion to Tailwind utility classes.
   ============================================ */

.brand-logo-text,
.footer-brand-text {
    font-family: 'Montserrat', 'Segoe UI', sans-serif;
    letter-spacing: -0.04em;
}

/* Keep shared content inside the viewport at narrow widths. */
html, body { min-width: 0; }
img, video, iframe { max-width: 100%; }
button, a { -webkit-tap-highlight-color: transparent; }

@media (max-width: 1023px) {
    body { padding-bottom: 64px; }
}

@media (max-width: 639px) {
    h1, h2, h3, p, a, li, button { overflow-wrap: anywhere; }
}

@media (min-width: 768px) and (max-width: 1023px) {
    .doctor-card > div:nth-child(2) { height: 28rem; }
}

/* --- Scrollbar --- */
/* Custom slim scrollbar for the whole site */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: #ECFEFF; }
::-webkit-scrollbar-thumb { background: #99D6D9; border-radius: 10px; }
::-webkit-scrollbar-thumb:hover { background: #0E7490; }

/* --- Navigation --- */
/* Animated underline on nav links (expands from center on hover/active) */
.nav-link { position: relative; }
.nav-link::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: -2px;
    width: 0%;
    height: 2px;
    background-color: #0E7490;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    transform: translateX(-50%);
}
.nav-link:hover::after,
.nav-link.active::after {
    width: 100%;
}

/* Keep the full navigation from crowding the logo and actions on laptops. */
#navbar > div > ul a,
#mobile-menu a {
    white-space: nowrap;
}

#navbar > div:first-child > ul > li + li {
    margin-left: clamp(0.5rem, 0.9vw, 0.8rem);
}

@media (min-width: 1024px) and (max-width: 1365px) {
    #navbar > div:first-child > ul {
        display: none !important;
    }

    #navbar #hamburger-btn {
        display: flex !important;
    }

    #navbar > div > div > a[href="contact.html#booking-form"] {
        display: none !important;
    }

    #navbar #mobile-menu:not(.hidden) {
        display: block !important;
    }
}

@media (min-width: 1366px) {
    #navbar > div:first-child {
        max-width: 90rem;
    }
}

@media (max-width: 639px) {
    #mobile-menu > ul > li > div > a {
        font-size: 0.95rem;
    }
}

/* Slim scrollbar inside dropdown menus */
.custom-scrollbar::-webkit-scrollbar { width: 5px; }
.custom-scrollbar::-webkit-scrollbar-thumb { background: #A8DEE0; border-radius: 10px; }

/* --- Gallery Layout --- */
.gallery-masonry {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 2rem 1.25rem;
}
.gallery-item {
    min-width: 0;
    margin-bottom: 0;
}
.gallery-open {
    aspect-ratio: 4 / 3;
}
.gallery-open img {
    width: 100%;
    height: 100%;
}
@media (min-width: 640px) {
    .gallery-masonry { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
    .gallery-masonry { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* --- Blog --- */
/* Anchor offset so sticky nav doesn't cover jump targets */
html {
    scroll-padding-top: 110px;
}