/*
 Theme Name:   Saidas Child Theme
 Theme URI:    http://krishnaparalkar.in/saidas-child/
 Description:  Saidas Child Theme for Event Custom Fields
 Author:       Krishna Paralkar
 Author URI:   http://krishnaparalkar.in
 Template:     twentytwentyfive
 Version:      1.0.3
 Text Domain:  saidas-child-theme
*/

/* --- Sticky Header --- */
header.wp-block-template-part {
        position: fixed !important;
    width: 100%;
    top: 0 !important;
    z-index: 999 !important;
}

a, a:hover{
	text-decoration:none;
}


/* Firefox Support */
.custom-scroll {
    scrollbar-width: thin;
    scrollbar-color: #df7b3e #f4f4f4; /* Thumb color, Track color */
}

/* Chrome, Edge, and Safari Support */
.custom-scroll::-webkit-scrollbar {
    width: 6px;  /* Vertical scrollbar width */
    height: 6px; /* Horizontal scrollbar height */
}

.custom-scroll::-webkit-scrollbar-track {
    background: #F1F1F1; /* Light grey background track */
}

.custom-scroll::-webkit-scrollbar-thumb {
    background: var(--wp--preset--color--accent-2) !important; /* Your beautiful orange accent */
}

.custom-scroll::-webkit-scrollbar-thumb:hover {
    background: #c96b30; /* Slightly darker orange when hovered */
}

/* --- Force Mobile Menu below 1024px --- */
@media (max-width: 1024px) {
    /* 1. Hide the container when the menu is closed */
    body .wp-block-navigation .wp-block-navigation__responsive-container:not(.is-menu-open) {
        display: none !important;
    }
    
    /* 2. Show the hamburger button */
    body .wp-block-navigation .wp-block-navigation__responsive-container-open {
        display: flex !important;
    }

    /* 3. Hide the desktop links when the menu IS open, so they don't double-render inside your custom overlay */
    body .wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open > .wp-block-navigation__responsive-close > .wp-block-navigation__responsive-dialog > .wp-block-navigation__responsive-container-content > ul.wp-block-navigation__container {
        display: none !important;
    }
}

/* --- Full Height Desktop Menu Items --- */
@media (min-width: 1025px) {
    /* 1. Force the nav itself to stretch to the full height of the header row */
    .wp-block-navigation:not(.is-vertical) {
        align-self: stretch !important;
        align-items: stretch !important;
    }

    /* 2. Force the 100% height down through ALL five invisible Gutenberg wrappers */
    .wp-block-navigation:not(.is-vertical) .wp-block-navigation__responsive-container,
    .wp-block-navigation:not(.is-vertical) .wp-block-navigation__responsive-close,
    .wp-block-navigation:not(.is-vertical) .wp-block-navigation__responsive-dialog,
    .wp-block-navigation:not(.is-vertical) .wp-block-navigation__responsive-container-content,
    .wp-block-navigation:not(.is-vertical) .wp-block-navigation__container {
        height: 100% !important;
        align-items: stretch !important;
    }

    /* 3. Force list items to stretch to 100% height */
    .wp-block-navigation:not(.is-vertical) .wp-block-navigation-item {
        display: flex !important;
        align-items: stretch !important;
        height: 100% !important;
    }
    
    /* 4. Make the link tag stretch and vertically center the text */
    .wp-block-navigation:not(.is-vertical) .wp-block-navigation-item__content {
        display: flex !important;
        align-items: center !important;
        height: 100% !important;
    }
}

.footer-cols {
    width: 100% !important;
	gap:50px 80px !important;
}

/* 1st Column (About Us) */
.footer-cols > .wp-block-group:nth-child(1) {
    flex: 1 1 250px !important;
    max-width: 400px !important; /* Set your specific max-width for About Us here */
}

/* 3rd Column (Contact) */
.footer-cols > .wp-block-group:nth-child(3) {
    flex: 1 1 250px !important;
    max-width: 300px !important; /* Set your specific max-width for Contact here */
}

/* 2. Middle column just hugs its text and stays dead-center */
.footer-cols > .wp-block-group:nth-child(2) {
    flex: 0 1 auto !important;
}


.footer-cols ul {
    display: grid !important;
    grid-template-columns: minmax(auto, 200px) max-content !important;
    gap: 10px 30px;
}



/* 1. Make the individual post card the anchor point */
.wp-block-post.event {
    position: relative;
}
.banner-query-wrapper .wp-block-post.event {
	box-shadow:17px 35px 30px rgba(0,0,0,.25);
}


/* 2. Stretch the Post Title link to cover the entire card */
 .wp-block-post.event .wp-block-post-title a::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 10; 
}

/* 1. Prevent the zoomed image from spilling out of its box */
 .wp-block-post-featured-image {
    overflow: hidden !important;
	border-radius:16px;
}

/* 2. Tell the image to animate smoothly over 0.4 seconds */
.wp-block-post-featured-image img {
    transition: transform 0.4s ease-in-out !important;
}

/* 3. When hovering anywhere on the whole card, zoom the image by 5% */
.wp-block-post:hover .wp-block-post-featured-image img {
    transform: scale(1.05) !important;
}


/* 1. Trap the zoom so it doesn't spill out of the banner */
.home-banner {
    position: relative !important;
    overflow: hidden !important;
}

/* 2. Create a phantom layer that copies the background image and zooms */
.home-banner::before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    z-index: 0;
    
    /* This magically copies the inline image URL from the parent! */
    background-image: inherit; 
    
    /* Match your existing inline settings */
    background-position: 51% 38%;
    background-size: cover;
    background-repeat: no-repeat;
    
    /* The 20-second infinite slow zoom */
    animation: cinematicZoom 20s ease-in-out infinite alternate;
}

/* 3. Keep your events card and text safely on top of the zooming background */
.home-banner > * {
    position: relative;
    z-index: 1;
}

/* 4. The actual zoom animation */
@keyframes cinematicZoom {
    0% { transform: scale(1); }
    100% { transform: scale(1.15); }
}

.timetable .wp-block-group p:first-child {
    min-width: 150px;
}


@media (max-width: 781px) {
.banner-query-wrapper {
	padding-top:300px;
justify-content: center;
}
	
.banner-query-wrapper .wp-block-group.has-custom-css{
		max-width:280px
	}
}





/* ── Dynamic Column Grid (Container Query) ── */
.row-2-col {
    --cols: 2;
}

.row-3-col {
    --cols: 3;
}

.row-4-col {
    --cols: 4;
}

.row-5-col {
    --cols: 5;
}

.row-6-col {
    --cols: 6;
}

.row-7-col {
    --cols: 7;
}

.row-8-col {
    --cols: 8;
}

.row-9-col {
    --cols: 9;
}

.row-10-col {
    --cols: 10;
}

/* ── Tablet Overrides ── */
.tab-1-col {
    --tab-cols: 1;
}

.tab-2-col {
    --tab-cols: 2;
}

.tab-3-col {
    --tab-cols: 3;
}

.tab-4-col {
    --tab-cols: 4;
}

.tab-5-col {
    --tab-cols: 5;
}

.tab-6-col {
    --tab-cols: 6;
}

/* ── Mobile Overrides ── */
.mob-1-col {
    --mob-cols: 1;
}

.mob-2-col {
    --mob-cols: 2;
}

.mob-3-col {
    --mob-cols: 3;
}

.mob-4-col {
    --mob-cols: 4;
}

[class*="row-"][class*="-col"] {
    --gap: 24px;
    flex-wrap: wrap !important;
    align-items: stretch !important;
    width: 100%;
}


/* Desktop: N columns */
[class*="row-"][class*="-col"]>* {
    flex: 1 1 calc((100% - (var(--cols) - 1) * var(--gap)) / var(--cols)) !important;
}

/* Tablet: 2 columns */
@media (max-width: 800px) {
    [class*="row-"][class*="-col"]>* {
        flex: 1 1 calc((100% - var(--gap)) / 2) !important;
    }
}

/* Override: keep 2 columns on mobile */
@media (max-width: 480px) {
    [class*="row-"][class*="-col"].mob-2-col>* {
        flex: 1 1 calc((100% - var(--gap)) / 2) !important;
    }
}

@media (max-width: 800px) {
    [class*="row-"][class*="-col"][class*="tab-"]>* {
        flex: 1 1 calc((100% - (var(--tab-cols) - 1) * var(--gap)) / var(--tab-cols)) !important;
    }
}

@media (max-width: 480px) {
    [class*="row-"][class*="-col"][class*="mob-"]>* {
        flex: 1 1 calc((100% - (var(--mob-cols) - 1) * var(--gap)) / var(--mob-cols)) !important;
    }
}


/* ── Column Spanning: Desktop (col-span-1 to 5) ── */
[class*="row-"][class*="-col"]>.col-span-1 {
    flex: 1 1 calc((100% - (var(--cols) - 1) * var(--gap)) / var(--cols)) !important;
}

[class*="row-"][class*="-col"]>.col-span-2 {
    flex: 1 1 calc((100% - (var(--cols) - 1) * var(--gap)) / var(--cols) * 2 + var(--gap)) !important;
}

[class*="row-"][class*="-col"]>.col-span-3 {
    flex: 1 1 calc((100% - (var(--cols) - 1) * var(--gap)) / var(--cols) * 3 + var(--gap) * 2) !important;
}

[class*="row-"][class*="-col"]>.col-span-4 {
    flex: 1 1 calc((100% - (var(--cols) - 1) * var(--gap)) / var(--cols) * 4 + var(--gap) * 3) !important;
}

[class*="row-"][class*="-col"]>.col-span-5 {
    flex: 1 1 calc((100% - (var(--cols) - 1) * var(--gap)) / var(--cols) * 5 + var(--gap) * 4) !important;
}

/* ── Column Spanning: Tablet (tab-col-span-1 to 5) ── */
@media (max-width: 800px) {
    [class*="row-"][class*="-col"]>.tab-col-span-1 {
        flex: 1 1 calc((100% - var(--gap)) / 2) !important;
    }

    [class*="row-"][class*="-col"]>.tab-col-span-2 {
        flex: 1 1 100% !important;
    }

    [class*="row-"][class*="-col"][class*="tab-"]>.tab-col-span-1 {
        flex: 1 1 calc((100% - (var(--tab-cols) - 1) * var(--gap)) / var(--tab-cols)) !important;
    }

    [class*="row-"][class*="-col"][class*="tab-"]>.tab-col-span-2 {
        flex: 1 1 calc((100% - (var(--tab-cols) - 1) * var(--gap)) / var(--tab-cols) * 2 + var(--gap)) !important;
    }

    [class*="row-"][class*="-col"][class*="tab-"]>.tab-col-span-3 {
        flex: 1 1 calc((100% - (var(--tab-cols) - 1) * var(--gap)) / var(--tab-cols) * 3 + var(--gap) * 2) !important;
    }

    [class*="row-"][class*="-col"][class*="tab-"]>.tab-col-span-4 {
        flex: 1 1 calc((100% - (var(--tab-cols) - 1) * var(--gap)) / var(--tab-cols) * 4 + var(--gap) * 3) !important;
    }

    [class*="row-"][class*="-col"][class*="tab-"]>.tab-col-span-5 {
        flex: 1 1 calc((100% - (var(--tab-cols) - 1) * var(--gap)) / var(--tab-cols) * 5 + var(--gap) * 4) !important;
    }

    /* Reset desktop spans on tablet */
    [class*="row-"][class*="-col"]>.col-span-2,
    [class*="row-"][class*="-col"]>.col-span-3,
    [class*="row-"][class*="-col"]>.col-span-4,
    [class*="row-"][class*="-col"]>.col-span-5 {
        flex: 1 1 calc((100% - var(--gap)) / 2) !important;
    }
}

/* ── Column Spanning: Mobile (mob-col-span-1 to 3) ── */
@media (max-width: 480px) {
    [class*="row-"][class*="-col"]>.mob-col-span-1 {
        flex: 1 1 100% !important;
    }

    [class*="row-"][class*="-col"][class*="mob-"]>.mob-col-span-1 {
        flex: 1 1 calc((100% - (var(--mob-cols) - 1) * var(--gap)) / var(--mob-cols)) !important;
    }

    [class*="row-"][class*="-col"][class*="mob-"]>.mob-col-span-2 {
        flex: 1 1 calc((100% - (var(--mob-cols) - 1) * var(--gap)) / var(--mob-cols) * 2 + var(--gap)) !important;
    }

    [class*="row-"][class*="-col"][class*="mob-"]>.mob-col-span-3 {
        flex: 1 1 calc((100% - (var(--mob-cols) - 1) * var(--gap)) / var(--mob-cols) * 3 + var(--gap) * 2) !important;
    }

    /* Reset desktop + tablet spans on mobile */
    [class*="row-"][class*="-col"]>.col-span-2,
    [class*="row-"][class*="-col"]>.col-span-3,
    [class*="row-"][class*="-col"]>.col-span-4,
    [class*="row-"][class*="-col"]>.col-span-5,
    [class*="row-"][class*="-col"]>.tab-col-span-2,
    [class*="row-"][class*="-col"]>.tab-col-span-3,
    [class*="row-"][class*="-col"]>.tab-col-span-4,
    [class*="row-"][class*="-col"]>.tab-col-span-5 {
        flex: 1 1 100% !important;
    }
}

/* Custom width override */
[class*="row-"][class*="-col"]>.col-auto {
    flex: 0 0 auto !important;
}