/**
 * Theme Name:     ColorMag Child
 * Author:         ThemeGrill
 * Template:       colormag
 * Text Domain:	   colormag-child
 * Description:    ColorMag is always the best choice when it comes to magazine, news, and blog WordPress themes. You can create elegant and modern websites for news portals, online magazines, and publishing sites. With ColorMag’s 8 and counting free starter demos for health, food, entertainment, sports, and fashion industries, building a magazine style website is super easy. Best of all, the ColorMag WordPress theme offers multiple ad spaces in its layout. So, you can monetize your website by displaying ads in these slots without any fuss. And if you plan to sell products and services online, you can rely on the theme’s compatibility with WooCommerce. Some of its key features are: >> SEO Optimized >> Translation & RTL Ready >> Cross-browser Compatible >> Custom Widgets >> Responsive Design >> Sticky Menu. So, download the free ColorMag theme and create professional magazine websites quickly. You can get free support for ColorMag at https://themegrill.com/contact/ and check our demos at https://themegrilldemos.com/colormag/
 */
.full-width-post {
    width: 100%;
    max-width: 100%;
    padding: 0;
    margin: 0;
}

/* Optional: Center the text column if it's TOO wide */
.full-width-post .entry-content {
    max-width: 1200px; 
    margin: 0 auto;
}


/*--------- My Custom CSS -----------*/
.wp-block-accordion-heading__toggle-title {
    padding: 0px 10px;
}

.mzb-grid-module .mzb-post-title a {
	font-size: 16px;
}

/*----- Program Custom Grid ------*/
.grid-program-custom.wp-block-query.is-layout-flow .post:first-child, 
.grid-program-custom.wp-block-query.is-layout-flow .page:first-child {
     grid-column: auto 
}

.grid-program-custom .wp-block-post .wp-block-group {
    position: relative;
    padding: 0;
}

.grid-program-custom .wp-block-post-featured-image {
	  position: relative;
    margin: 0;
		overflow: hidden; /* clips the enlarged image */
}

.grid-program-custom .wp-block-post-title {
    position: absolute;
    bottom: 20px;
    left: 20px;
    right: 20px;
    color: white;
    background: linear-gradient(
        to top,
				rgba(0,0,0,0.9) 0%,
				rgba(0,0,0,0.6) 10%,
				rgba(0,0,0,0.3) 80%,
				rgba(0,0,0,0) 100%
    );
    padding: 70px 12px 12px 12px;
    margin: 0;
}

.grid-program-custom .wp-block-post-title a {
    color: white;
    text-decoration: none;
}

.grid-program-custom .wp-block-post-featured-image img {
    display: block;
    transition: transform 0.35s ease;
}

.grid-program-custom .wp-block-post:hover .wp-block-post-featured-image img {
    transform: scale(1.08);
}

/*----- Full Width Button -----*/
.custom-button-100 .mzb-button-link {
	display: block;
}

/*---- dd-custom-footer ----*/
.dd-custom-footer .block-title h2 {
  background: none;
	font-size: x-large;
	margin-bottom: 8px;
	padding-left: 0;
}

.dd-custom-footer {
	margin-left: auto;
    margin-right: auto;
}

.cm-footer .widget ul li {
	border: none;
}
.cm-footer-top-row .mzb-container {
	margin-right: 20px;
}


/*--espa advertisement above footer--*/
@media (min-width: 1024px) {
	.espa-logo-footer {
		max-width: 70%;
	}
}
/*--image links row footer--*/
@media (min-width: 1024px) {
	#footer-custom-row {
		max-width: 86%;
	}
}

#block-109 {
	background: none;
}

.cm-footer-main-row .mzb-icon-block .mzb-icon-wrapper svg {
    fill: #ffffff;
}

.cm-footer-builder .cm-bottom-row {
	grid-template-columns: 67% 30%;
}

/*------------------------------ Banner Posts ------------------------------*/
/* Hide the "uncategorized" category pill from Magazine Blocks */
.mzb-banner-posts .mzb-post-categories a[href*="/category/uncategorized/"] {
    display: none !important;
}

/*--------------------- Video Posts ---------------------*/
/* 1. Let clicks pass through the content box so we can hit the Play button */
.mzb-banner-posts .mzb-post-content {
    pointer-events: none !important;
}

/* 2. Re-enable clicks for text links */
.mzb-banner-posts .mzb-post-content a {
    pointer-events: auto !important;
}

/* 3. Hide the Title on video posts (as requested) */
.mzb-banner-posts .mzb-post:has(.mzb-video-lightbox-trigger) .mzb-post-title {
    display: none !important;
}

/* 4. Add a smooth hover effect to the new Play Button */
.mzb-play-overlay {
    transition: all 0.3s ease;
}
.mzb-banner-posts .mzb-post:hover .mzb-play-overlay {
    background: #e52d27 !important; /* YouTube Red */
    transform: translate(-50%, -50%) scale(1.1);
}

/* Make the Play button light up on Archive pages too */
.archive-video-lightbox:hover .mzb-play-overlay {
    background: #e52d27 !important;
    transform: translate(-50%, -50%) scale(1.1);
}

/* 1. Push the Video Trigger layer ABOVE the invisible Elementor links */
.mzb-banner-posts .mzb-featured-image.mzb-video-lightbox-trigger {
    position: relative !important;
    z-index: 9999 !important; 
    pointer-events: auto !important;
}

/* 2. Ensure the invisible Elementor wrapper doesn't trap the click */
.mzb-banner-posts .mzb-post {
    position: relative !important;
}

/* 3. Make sure the Play icon itself passes the click cleanly to our wrapper */
.mzb-play-overlay, 
.mzb-play-overlay svg {
    pointer-events: none !important;
}

/**/
/* Force the meta and read-more links to sit above invisible overlays */
.mzb-post-content a, 
.mzb-post-meta a, 
.mzb-read-more a {
    position: relative !important;
    z-index: 99999 !important;
    pointer-events: auto !important;
}


/*---------------------------------------------------------------*/

/* Target tablets: screens between 600px and 900px */

@media (max-width: 900px) and (min-width: 600px) {
    .mzb-posts.mzb-layout-2.mzb-post-col--4 {
        display: grid; /* Or display: flex; depending on the theme */
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 20px; /* Adjust spacing as needed */
    }
}

/* Target mobile devices in landscape orientation */
@media only screen and (min-width: 480px) and (max-width: 932px) and (orientation: landscape) {
    .wp-block-post-template.is-layout-grid.columns-5 {
        display: grid !important;
        grid-template-columns: repeat(3, 1minmax(0, 1fr)) !important;
        gap: 1.5em; /* Adjust spacing as needed */
    }
}

@media (max-width: 900px) and (min-width: 600px) {
  .wp-block-post-template.is-layout-grid {
    grid-template-columns: repeat(3, 1fr) !important;
    display: grid;
  }
}



/*------------------------ Category page for Programma Category --------------------------*/
/* ========================================================= */
/* 1. STRUCTURAL WRAPPER (Forces Vertical Stacking)          */
/* ========================================================= */
.programma-archive-wrapper {
    display: flex;
    flex-direction: column; /* This is the magic rule that stacks the rows */
    width: 100%;
    clear: both;
}

/* ========================================================= */
/* 2. STICKY POST (Row 1 - Full Width)                       */
/* ========================================================= */
.programma-sticky-row {
	display: block;
    width: 100%;
    margin-bottom: 3em; /* Creates breathing room before the grid starts */
}

/* Make sure the image scales responsively but respects theme max-widths */
.programma-sticky-post .sticky-image img {
    width: 80%;
    height: auto;
    display: block;
	margin-left: auto;
	margin-right: auto;
}

/* Center the title under the sticky image, inheriting theme fonts */
.programma-sticky-post .sticky-title {
    text-align: center;
    margin-top: 0.5em;
}

/* ========================================================= */
/* 3. GRID POSTS (Row 2 - 3 Columns)                         */
/* ========================================================= */
.programma-grid-row {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 4em; /* Space between grid items */
}

/* Create the uniform box for the image and overlay */
.programma-grid-post {
    position: relative;
    aspect-ratio: 4 / 4; /* Keeps all grid items exactly the same shape */
    overflow: hidden;
}

/* Ensure the link covers the whole box */
.programma-grid-post .grid-post-link {
    display: block;
    width: 100%;
    height: 100%;
}

/* Make the image fill the aspect-ratio box without stretching */
.programma-grid-post .grid-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* ========================================================= */
/* 4. GRID TITLE OVERLAY                                     */
/* ========================================================= */
.programma-grid-post .grid-overlay-title {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    margin: 0;
	text-align: center;
    padding: 1.5em 1em 1em; /* Extra top padding for the gradient fade */
    
    /* Dark gradient so the white text is readable over any image */
    background: linear-gradient(to top, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0) 100%);
    color: #ffffff; /* Hardcoded to white to contrast with the dark gradient */
    box-sizing: border-box;
}

/* Inherit theme heading sizes, just ensure it behaves inside the box */
.programma-grid-post .grid-overlay-title span {
    display: block;
    line-height: 1.3;
	font-size: 20px;
}

/* ========================================================= */
/* 5. RESPONSIVE FALLBACKS                                   */
/* ========================================================= */
@media (max-width: 992px) {
    .programma-grid-row {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 576px) {
    .programma-grid-row {
        grid-template-columns: 1fr;
    }
}
/*------------------------------------------End Programma Category---------------------------------------------------*/

.widget .play-button-wrapper, .cm-featured-image .play-button-wrapper {
	display: none;
}