/* ---- Hero portrait (Master Ganesh photo) ----
   Keeps its aspect ratio at every width instead of the fixed
   width+height that used to squash it on medium screens, and
   centers it once the columns stack on mobile. */
.hero-portrait {
    display: block;
    height: auto;
    max-width: 286px;
    width: 100%;
}

.logo-size {
    max-width: 6rem;
    height: auto;
}

.title-block {
    min-width: 150px;
}

.header-grid {
    gap: 12px;
}

@media (max-width: 781px) {
    .hero-portrait {
        margin-left: auto;
        margin-right: auto;
    }
}

.site-header {
    position: sticky;
    top: 0;
    z-index: 1000;
}

.header-container {
    background-color: #e0ece4;
    padding-top: 20px;
    padding-right: 30px;
    padding-bottom: 20px;
    padding-left: 30px;
}

/* ---- Floating WhatsApp chat button ---- */
.whatsapp-float {
    position: fixed;
    right: 20px;
    bottom: 20px;
    width: 56px;
    height: 56px;
    background-color: #25d366;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 12px rgba(0, 0, 0, .25);
    z-index: 999999;
    text-decoration: none;
    transition: transform .15s ease, background-color .15s ease;
}

.whatsapp-float:hover {
    background-color: #1ebe57;
    transform: scale(1.06);
}

@media (max-width: 480px) {
    .whatsapp-float {
        width: 50px;
        height: 50px;
        right: 14px;
        bottom: 14px;
    }
}

/* ---- Body copy typeface ----
   WordPress's own global-styles rule (core.css) sets body to the
   system font stack and loads after theme.css, so it wins the cascade
   over theme.css's Libre Baskerville. This restores Libre Baskerville
   as the actual rendered body/text font. */
html {
    scroll-padding-top: 230px;
    scroll-behavior: smooth;
}

body {
    font-family: 'Libre Baskerville', serif;
}

.Image-gallery {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    width: 100%;
}

.Gallery-block {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: min-content;
    background-color: whitesmoke;
    box-shadow: 0 4px 12px rgba(0, 0, 0, .16);
    border-radius: 8px;
    padding: 18px;
    margin-bottom: 0;
    justify-content: flex-end;
}


.Image-gallery .Gallery-block img {
    min-width: 600px;
    max-height: 600px;
    object-fit: contain;
}

@media (max-width: 600px) {
    .Gallery-block {
        width: 100%;
    }

    .Image-gallery .Gallery-block img {
        min-width: 100%;
    }
}

.Image-gallery .Gallery-block .image-caption {
    width: 100%;
    text-align: center;
    padding: 12px;
    font-size: 1.12rem;
    line-height: 1.5;

}

.img-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 24px;
    width: 100%;
}

.img-block {
    display: flex;
    flex-direction: column;
    align-items: center;
    background-color: whitesmoke;
    box-shadow: 0 4px 12px rgba(0, 0, 0, .16);
    border-radius: 8px;
    margin-bottom: 0;
    text-align: center;
}

.img-block figure {
    width: 100%;
    margin: 0;
}

.img-block figure img {
    width: 100%;
    height: 660px;
    object-fit: contain;
    border-radius: 4px;
}

.img-block .img-caption {
    width: 100%;
    margin: 14px 0 0;
    line-height: 1.4;
    font-size: 1.75rem;
    padding: 18px;
}

.img-office-blessing{
    padding: 0 0 48px 48px;
}

.mantraClasses-img-grid{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 24px;
    width: 100%;
}

.mantraClasses-img-grid div {
   max-width: 45%;
}

@media (max-width: 600px) {
    .img-block {
        width: 100%;
    }

    .img-block figure img {
        height: auto;
        max-height: 500px;
    }

    .img-office-blessing{
        padding: 0 0 48px 0;
    }

    .mantraClasses-img-grid div {
        max-width: 100%;
    }

}

.block-navigation .block-navigation-item__label {
    color: #3a79a0;
}

/* The header nav's mobile drawer inherits the desktop header's
   right-justified alignment, which shrink-wraps each link to its own
   text width flush against the right edge and crowds/overflows it.
   Center it instead, matching the footer nav's mobile drawer. */
.block-navigation__responsive-container.is-menu-open .block-navigation__responsive-container-content,
.block-navigation__responsive-container.is-menu-open .block-navigation__container {
    align-items: center;
}

.block-navigation__responsive-container.is-menu-open .block-navigation-item__content {
    text-align: center;
}

.ganesh-quote{
    font-size: 1.5rem;
}