@import url('https://fonts.googleapis.com/css2?family=Merriweather:wght@400;700&family=Open+Sans:wght@400;600;700&display=swap');

/* ==========================================
   GLOBAL RESET & BASE RESPONSIVE STYLES
   ========================================== */
html, body {
    font-family: 'Open Sans', sans-serif;
    scroll-behavior: smooth;
    overflow-x: hidden;
    max-width: 100vw;
    margin: 0;
    padding: 0;
    -webkit-text-size-adjust: 100%;
}

h1, h2, h3, h4, .font-serif {
    font-family: 'Merriweather', serif;
}

img, video, iframe, svg {
    max-width: 100%;
    /* height: auto; */
    display: block;
}

/* Touch-friendly target styling */
a, button, input, select, textarea {
    touch-action: manipulation;
}

/* ==========================================
   DROPDOWN NAVIGATION & DESKTOP HEADER
   ========================================== */
.nav-dropdown { 
    position: relative; 
}

/* Invisible hover bridge */
.nav-dropdown::after {
    content: ""; 
    position: absolute; 
    left: 0; 
    top: 100%;
    width: 100%; 
    height: 20px;
}

.nav-dropdown > .nav-menu {
    position: absolute; 
    top: calc(100% + 14px); 
    left: 0; 
    min-width: 230px;
    background: #fff; 
    border-radius: 0 0 12px 12px; 
    border-top: 3px solid #F2B824;
    box-shadow: 0 22px 45px rgba(0,0,0,0.22); 
    overflow: hidden; 
    z-index: 100;
    opacity: 0; 
    visibility: hidden; 
    transform: translateY(8px);
    transition: opacity .18s ease, transform .18s ease;
}

.nav-dropdown:hover > .nav-menu,
.nav-dropdown.open > .nav-menu { 
    opacity: 1; 
    visibility: visible; 
    transform: translateY(0); 
}

.nav-menu a {
    display: block; 
    padding: 11px 20px; 
    font-size: 12px; 
    font-weight: 700;
    text-transform: none; 
    letter-spacing: normal; 
    color: #374151; 
    white-space: nowrap;
    border-bottom: 1px solid #f1f1f1; 
    transition: background .15s ease, color .15s ease, padding .15s ease;
}

.nav-menu a:last-child { 
    border-bottom: none; 
}

.nav-menu a:hover { 
    background: #0A5C36; 
    color: #fff; 
    padding-left: 26px; 
}

.nav-menu a.current { 
    color: #0A5C36; 
    background: #f0faf4; 
}

.nav-caret { 
    font-size: 8px; 
    transition: transform .2s ease; 
}

.nav-dropdown:hover .nav-caret,
.nav-dropdown.open .nav-caret { 
    transform: rotate(180deg); 
}

.nav-dropdown.is-active > .nav-trigger { 
    border-bottom: 3px solid #F2B824; 
    padding-bottom: 3px; 
}

/* ==========================================
   SUBPAGE HERO
   ========================================== */
.page-hero { 
    position: relative; 
    width: 100%; 
    height: 52vh; 
    min-height: 340px; 
    background: #0d0d0d; 
}

.page-hero img { 
    width: 100%; 
    height: 100%; 
    object-fit: cover; 
    object-position: center; 
    display: block; 
}

.page-hero .overlay { 
    position: absolute; 
    inset: 0; 
    background: linear-gradient(to bottom, rgba(0,0,0,0.30), rgba(0,0,0,0.48)); 
}

.page-hero .hero-inner { 
    position: absolute; 
    inset: 0; 
    display: flex; 
    flex-direction: column; 
    align-items: center; 
    justify-content: center; 
    text-align: center; 
    padding: 1rem; 
}

.pillar-card { 
    transition: transform .3s ease, box-shadow .3s ease; 
}

.pillar-card:hover { 
    transform: translateY(-6px); 
    box-shadow: 0 20px 40px rgba(0,0,0,0.10); 
}

/* ==========================================
   RESPONSIVE HEADER & MOBILE HAMBURGER MENU
   ========================================== */
@media (max-width: 1024px) {
    header nav {
        gap: 0.75rem 1rem !important;
        font-size: 11px !important;
    }
}

@media (max-width: 768px) {
    header {
        padding: 0.6rem 1rem !important;
    }

    /* Hide navigation by default on mobile and tablet screens */
    #site-nav {
        display: none !important;
        width: 100% !important;
        padding-top: 0.75rem !important;
        margin-top: 0.5rem !important;
        border-top: 1px solid rgba(255, 255, 255, 0.2) !important;
    }

    /* Show vertical menu list when mobile-open class is active */
    #site-nav.mobile-open {
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 0.5rem !important;
        animation: fadeInDown 0.22s ease-out forwards;
    }

    /* Style nav items as full-width vertical touch items */
    #site-nav > a,
    #site-nav .nav-trigger {
        display: flex !important;
        width: 100% !important;
        padding: 10px 14px !important;
        font-size: 13px !important;
        font-weight: 700 !important;
        background: rgba(255, 255, 255, 0.08) !important;
        border-radius: 8px !important;
        color: #ffffff !important;
        text-align: left !important;
        justify-content: space-between !important;
        align-items: center !important;
    }

    #site-nav > a:hover,
    #site-nav .nav-trigger:hover,
    #site-nav .nav-dropdown.open > .nav-trigger {
        background: #F2B824 !important;
        color: #0A5C36 !important;
    }

    /* Vertical inline dropdown expansion on mobile */
    .nav-dropdown {
        width: 100% !important;
    }

    .nav-dropdown > .nav-menu {
        position: static !important;
        display: none !important;
        width: 100% !important;
        min-width: 0 !important;
        background: #ffffff !important;
        border-radius: 8px !important;
        margin-top: 6px !important;
        border-top: none !important;
        box-shadow: 0 4px 15px rgba(0,0,0,0.2) !important;
        opacity: 1 !important;
        visibility: visible !important;
        transform: none !important;
        overflow: hidden !important;
    }

    .nav-dropdown.open > .nav-menu {
        display: block !important;
    }

    .nav-menu a {
        padding: 11px 18px !important;
        font-size: 12px !important;
        color: #374151 !important;
        border-bottom: 1px solid #f1f1f1 !important;
    }

    .nav-menu a:last-child {
        border-bottom: none !important;
    }

    .nav-menu a:hover {
        background: #0A5C36 !important;
        color: #ffffff !important;
    }
}

@keyframes fadeInDown {
    from { opacity: 0; transform: translateY(-6px); }
    to { opacity: 1; transform: translateY(0); }
}

@media (max-width: 480px) {
    header h1 {
        font-size: 0.95rem !important;
    }

    header p {
        font-size: 8px !important;
    }
}

/* ==========================================
   CAROUSEL & HERO RESPONSIVENESS
   ========================================== */
.slide {
    width: 100%;
    position: relative;
    overflow: hidden;
}

.slide img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center !important;
    display: block !important;
}

@media (max-width: 768px) {
    .slide {
        height: 38vh !important;
        min-height: 240px !important;
        max-height: 340px !important;
    }

    .slide img {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
        object-position: center !important;
    }

    /* Carousel Text Badges on Mobile */
    .slide .absolute {
        display: block !important;
        bottom: 12px !important;
        right: 12px !important;
        left: auto !important;
        max-width: calc(100% - 24px) !important;
        padding: 6px 12px !important;
        background: rgba(10, 92, 54, 0.92) !important;
        backdrop-filter: blur(4px) !important;
        border-radius: 8px !important;
        border-left: 4px solid #F2B824 !important;
        box-shadow: 0 4px 12px rgba(0,0,0,0.3) !important;
        z-index: 10 !important;
    }

    .slide .absolute p {
        font-size: 11px !important;
        font-weight: 700 !important;
        letter-spacing: 0.04em !important;
        color: #ffffff !important;
        margin: 0 !important;
    }

    /* Carousel Navigation Arrows */
    button[onclick="changeSlide(-1)"],
    button[onclick="changeSlide(1)"] {
        padding: 8px 12px !important;
        font-size: 14px !important;
    }

    button[onclick="changeSlide(-1)"] {
        left: 8px !important;
    }

    button[onclick="changeSlide(1)"] {
        right: 8px !important;
    }

    /* Subpage Heros */
    .page-hero {
        height: 35vh !important;
        min-height: 220px !important;
        max-height: 300px !important;
    }

    .page-hero .hero-inner h1 {
        font-size: 1.85rem !important;
        line-height: 1.25 !important;
    }

    .page-hero .hero-inner p {
        font-size: 10px !important;
        margin-bottom: 0.5rem !important;
    }
}

@media (max-width: 480px) {
    .slide {
        height: 32vh !important;
        min-height: 200px !important;
        max-height: 260px !important;
    }

    .page-hero {
        height: 28vh !important;
        min-height: 180px !important;
    }

    .page-hero .hero-inner h1 {
        font-size: 1.5rem !important;
    }
}

/* ==========================================
   MAIN CONTENT & CONTAINER GRID LAYOUTS
   ========================================== */
@media (max-width: 768px) {
    main, .max-w-7xl {
        padding-left: 1rem !important;
        padding-right: 1rem !important;
    }

    /* Reduce vertical spacing gaps on mobile */
    .py-16 {
        padding-top: 2.5rem !important;
        padding-bottom: 2.5rem !important;
    }

    .space-y-20 > :not([hidden]) ~ :not([hidden]) {
        margin-top: 2.5rem !important;
    }

    .space-y-16 > :not([hidden]) ~ :not([hidden]) {
        margin-top: 2rem !important;
    }

    .space-y-12 > :not([hidden]) ~ :not([hidden]) {
        margin-top: 1.75rem !important;
    }

    .space-y-8 > :not([hidden]) ~ :not([hidden]) {
        margin-top: 1.25rem !important;
    }

    .space-y-6 > :not([hidden]) ~ :not([hidden]) {
        margin-top: 1rem !important;
    }

    /* Grid Gaps */
    .gap-12 {
        gap: 1.5rem !important;
    }

    .gap-10 {
        gap: 1.25rem !important;
    }

    .gap-8 {
        gap: 1rem !important;
    }

    /* Typography Scalings */
    h2.text-3xl, h2.text-4xl, h3.text-3xl {
        font-size: 1.5rem !important;
        line-height: 1.3 !important;
    }

    /* Cards Padding */
    .p-8 {
        padding: 1.25rem !important;
    }

    .p-6 {
        padding: 1rem !important;
    }

    /* Sanskrit Quote Section */
    .bg-\[\#0A5C36\].py-10 {
        padding: 2rem 1rem !important;
    }

    .bg-\[\#0A5C36\].py-10 h2 {
        font-size: 1.35rem !important;
        line-height: 1.4 !important;
    }
}

@media (max-width: 480px) {
    /* Glance Table / Flex row adjustments */
    .bg-white.rounded-2xl .flex.justify-between {
        flex-wrap: wrap;
        gap: 2px 8px;
        padding-bottom: 0.5rem;
    }

    .bg-white.rounded-2xl .flex.justify-between > span:first-child {
        width: 100%;
        font-size: 11px;
        color: #6b7280;
    }

    .bg-white.rounded-2xl .flex.justify-between > span:last-child {
        font-size: 13px;
    }

    /* Form Inputs on Mobile (Prevent iOS Auto-Zoom) */
    input[type="text"],
    input[type="tel"],
    input[type="email"],
    select,
    textarea {
        font-size: 16px !important;
        padding: 0.6rem 0.75rem !important;
    }
}

/* ==========================================
   LIGHTBOX MODAL RESPONSIVENESS
   ========================================== */
@media (max-width: 640px) {
    #lightbox img {
        max-width: 94vw !important;
        max-height: 72vh !important;
    }

    #lightbox-prev, #lightbox-next {
        font-size: 20px !important;
        padding: 8px 12px !important;
    }

    #lightbox-prev {
        left: 8px !important;
    }

    #lightbox-next {
        right: 8px !important;
    }

    #lightbox-close {
        top: 14px !important;
        right: 16px !important;
        font-size: 28px !important;
    }

    #lightbox-caption {
        bottom: 14px !important;
        font-size: 10px !important;
        padding: 4px 12px !important;
        max-width: 90vw;
        text-align: center;
    }
}

/* ==========================================
   FOOTER RESPONSIVENESS
   ========================================== */
@media (max-width: 768px) {
    footer .py-12 {
        padding-top: 2rem !important;
        padding-bottom: 2rem !important;
    }

    footer .grid-cols-1.md\:grid-cols-3 {
        gap: 1.75rem !important;
    }

    footer .border-t .flex {
        flex-direction: column !important;
        text-align: center;
        gap: 0.4rem !important;
    }
}