/*
Theme Name: DDT2026
Theme URI: 
Author: Andrej Uduč
Author URI: 
Description: Child theme of Twenty Twenty-five for DDT main webpage
Requires at least: 6.9
Tested up to: 6.9
Requires PHP: 5.7
Version: 0.98
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Template: twentytwentyfive
Text Domain: ddt2026
Tags: 


/* Offset for sticky header */
html {
    scroll-padding-top: 100px;
}

/* velikost fonta za breadcrumbs */
.breadcrumbs {
	font-size: var(--wp--preset--font-size--xl);
}

/* nastavitve za PRETEKLE DOGODKE    */ 
.ddt-is-past .ddt-time {
    color:gray;
  text-decoration: line-through;   
}



/* 		KVADRATKI ZA LIST ITEMS 		*/ 
/*  	.ddt-colored-squares   			*/
/*  	ddt-showtimes-list je legacy. 	*/
	/* Strip default bullets for legacy and new schedules */
	.single-event-top-content ul, 
	.event-showtimes-block ul, 
	ul.ddt-showtimes-list,
	ul.ddt-colored-squares,
	/* The "Heavy" Selector to beat WordPress defaults */
	ul.ddt-showtimes-list.ddt-colored-squares.wp-block-ddt-event-showtimes {
		list-style-type: none !important;
		margin-left: 10px !important;
		padding-left: 0;
		line-height: 1;
	}
	/* Create space for the custom squares */
	.single-event-top-content ul li, 
	.event-showtimes-block ul li, 
	ul.ddt-showtimes-list li,
	ul.ddt-colored-squares li,
	ul.ddt-showtimes-list.ddt-colored-squares.wp-block-ddt-event-showtimes li {
		position: relative;
		padding-left: 0.6cm; 
		margin-bottom: 0.2cm;
	}
	/* Base Square Design (DDT Red 1) */
	.single-event-top-content ul li::before, 
	.event-showtimes-block ul li::before, 
	ul.ddt-showtimes-list li::before,
	ul.ddt-colored-squares li::before {
		content: "";
		width: 2.6mm; 
		height: 2.6mm;
		position: absolute;
		left: 0;
		top: 0.8mm;
		background-color: var(--wp--preset--color--ddt-red-1);
	}
	/* Loop 2: DDT Purple 1 */
	.single-event-top-content ul li:nth-child(4n+2)::before, 
	.event-showtimes-block ul li:nth-child(4n+2)::before, 
	ul.ddt-showtimes-list li:nth-child(4n+2)::before, 
	ul.ddt-colored-squares li:nth-child(4n+2)::before {
		background-color: var(--wp--preset--color--ddt-purple-1);
	}
	/* Loop 3: DDT Blue 1 */
	.single-event-top-content ul li:nth-child(4n+3)::before, 
	.event-showtimes-block ul li:nth-child(4n+3)::before, 
	ul.ddt-showtimes-list li:nth-child(4n+3)::before, 
	ul.ddt-colored-squares li:nth-child(4n+3)::before {
		background-color: var(--wp--preset--color--ddt-blue-1);
	}
	/* Loop 4: DDT Green 1 */
	.single-event-top-content ul li:nth-child(4n+4)::before, 
	.event-showtimes-block ul li:nth-child(4n+4)::before, 
	ul.ddt-showtimes-list li:nth-child(4n+4)::before, 
	ul.ddt-colored-squares li:nth-child(4n+4)::before {
		background-color: var(--wp--preset--color--ddt-green-1);
	}




/*
    TOLE JE KODA ZA YOUTUBE BLOK
 */
	.ddt-youtube-embed {
	  /* 1. Establish the responsive footprint */
	  position: relative;
	  width: 100%;
	  aspect-ratio: 16 / 9;
	  
	  /* Optional visual styling */
	  background-color: #111; 
	  border-radius: 8px;
	  overflow: hidden; 
	}
	.ddt-youtube-embed iframe {
	  /* 2. Take the iframe out of the flow */
	  position: absolute;
	  top: 0;
	  left: 0;
	  
	  /* 3. Force it to perfectly fill the container */
	  width: 100%;
	  height: 100%;
	  border: 0;
	}

/* 
		blok SOCIAL ICONS pokaže vsebino anchorja
*/
	/* Only apply to screens larger than 1024px (desktops/laptops) */
	@media (min-width: 1024px) {
		
		/* Make the link the positioning reference point */
		.wp-block-social-link-anchor {
			position: relative;
			overflow: visible !important; 
			display: flex; /* Helps align the triangle properly */
		}

		/* Un-hide and style the screen reader text on hover */
		.wp-block-social-link-anchor:hover .screen-reader-text {
			/* 1. Override WordPress core hiding rules */
			clip: auto !important;
			clip-path: none !important;
			height: auto !important;
			width: auto !important;
			overflow: visible !important;
			
			/* 2. Style it as the tooltip box */
			position: absolute;
			top: 100%; 
			right: 0; /* Aligns right edge with the icon */
			background-color: var(--wp--preset--color--ddt-blue-1); 
			color: #ffffff; 
			padding: 12px 12px;
			border-radius: 4px;
			white-space: nowrap;
			font-size: 14px;
			margin: 0 !important; /* Resets core margins */
			margin-top: 10px !important; /* Space between icon and tooltip */
			pointer-events: none; 
			z-index: 999;
		}

		/* Create the upward pointing triangle */
		.wp-block-social-link-anchor:hover::before {
			content: "";
			position: absolute;
			top: 100%;
			left: 50%;
			transform: translateX(-50%);
			border-width: 6px;
			border-style: solid;
			border-color: transparent transparent var(--wp--preset--color--ddt-blue-1) transparent; 
			margin-top: -2px; 
			z-index: 999;
		}
	}



/* MAILERLITE popravek fonta */
	.mailerlite-form-title h3 {
		font-weight: bold;
		font-size: clamp(0.984rem, 0.984rem + ((1vw - 0.2rem) * 0.645), 1.5rem);
	}
	.mailerlite-form .mailerlite-subscribe-button-container {
		text-align: left !important;
	}



/* 
HACK - LINK se stretcha prek cover imagea na strani z našimi prostori 
*/
	/* 1. Make the Cover block the master boundary and crop excess */
	.wp-block-cover.stretched-link {
		position: relative;
		overflow: hidden; 
	}

	/* 2. Break out of the corner by making the link infinitely large */
	.wp-block-cover.stretched-link a::after {
		content: "";
		position: absolute;
		top: -5000px;
		right: -5000px;
		bottom: -5000px;
		left: -5000px;
		z-index: 10;
	}

	/* 3. Focus State for Accessibility (adjusted for the new crop) */
	.wp-block-cover.stretched-link:focus-within {
		outline: 4px solid #007cba; /* Match your site's focus color if needed */
		outline-offset: -4px; /* Draws the line INSIDE the image so it doesn't get cropped */
	}

	/* 4. Optional: Remove the underline from the title text */
	.wp-block-cover.stretched-link a {
		text-decoration: none;
	}
	



/* VERJETNO SE NE RABI - scroll za digitalni pano  */

/* Turns the post template into a horizontal scrolling row */
/*.my-post-carousel {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    gap: 20px; /* Space between slides 
    scroll-snap-type: x mandatory;
    padding-bottom: 15px; /* Room for a scrollbar if visible 
}*/

/* Forces each post to act as a slide */
/*.my-post-carousel > li {
    flex: 0 0 100%; /* Shows 1 post at a time. Change to 33.3% for 3 posts 
    scroll-snap-align: center;
}*/

/* Optional: Hides the ugly default scrollbar for a cleaner look */
/*.my-post-carousel::-webkit-scrollbar {
    display: none;
}*/