/**
 * Theme Name:        Kiipeilyliitto
 * Template:          twentytwentyfour
 * Description:       Kiipeilyliiton 2024:n childtheme
 * Version:           1.0.1
 * Author:            Juuso R
 * Text Domain:       kiipeilyliitto
 * Tested up to:      6.6
 * Requires at least: 6.6
 * Requires PHP:      8.1
 * License:           GNU General Public License v2.0 or later
 * License URI:       https://www.gnu.org/licenses/gpl-2.0.html
 */

/*
TODO:
valikko: alasivut transition: 0.5s. ei ole: display, flex-grow. 
*/

main {
	margin-top: 0 !important;
	padding-top: 0 !important;
}

:root :where(.is-layout-grid) {
	gap: 2.2rem !important;
}

.text-outer-glow, header .wp-block-navigation, .wp-block-cover :is(h2, p) {
	text-shadow: 0 0 15px black;
}

/* COVER */
header + .wp-block-cover, .kiipeily-cover-image {
	height: 100vh;
	margin-top: -136px;
	text-shadow: 0 0 8px #000;
	z-index: -1; /* perussivut (ei etusivu) -1 jotta valikko näkyy */
}

.kiipeily-cover-image {
	z-index: 0; /* etusivulla 0 (ei -1) jotta sliderin linkit toimii */
	height: 112vh;
}

.home main {
	margin-top: -136px !important;
}

header.wp-block-template-part, nav, header .wp-block-site-logo {
	z-index: 1000;
	position: relative;
}

header {
	/* Header logo shadow - works only with SVG  */
	.wp-block-site-logo img {
		/* filter: drop-shadow(0px 0px 5px white) !important; */
		display: none;
	}

	.wp-block-site-logo a::after { 
		filter: drop-shadow(0 0 4px black) !important; 
		content: url('https://kiipeilyliitto.fi/wp-content/uploads/2025/02/suomen-kiipeilyliitto-logo-white.svg');
	}

	:is(&:hover, .search &, .archive &, .single-tribe_events &, .error404 &, .page-template-page-no-title &) .wp-block-site-logo a::after {
		filter: none !important;
		content: url('https://kiipeilyliitto.fi/wp-content/uploads/2025/02/suomen-kiipeilyliitto-logo.svg');
	}

	:not(&:hover, .search &, .archive &, .single-tribe_events &, .error404 &) .wp-block-social-links svg {
		filter: drop-shadow(0 1px 6px black);
	}

	:is(&:hover, footer, .search &, .archive &, .single-tribe_events &, .error404 &) .wp-block-social-links svg {
		filter: none;
	}

	& nav a {
		text-shadow: 0 0 4px #000;
	}

	transition: background-color 0.5s;

	&:hover {
		background-color: white;
	}

}

@media screen and (min-width: 600px) {
	.wp-block-navigation__submenu-container {
		width: 350px !important; 
	}
}

.wp-block-navigation__responsive-container-open svg {
	filter: drop-shadow(0 0 1px black);
}

@media screen and (max-width: 600px) {
	header nav {
		& li { /* parent/top level (+all others too) */
			font-size: 1.75rem; /* TODO does not bite, why? */
			line-height: 130%;
			margin-bottom: 2em;
			text-transform: uppercase;
			text-align: center;

			& li { /* 2nd level, child */
				font-size: 1.15rem; /* TODO */
				margin-top: 0.7rem;
				margin-bottom: 0;
				text-transform: none;

				& li { /* 3rd level, child's child */
					font-size: 0.8rem !important; /* TODO */
				}
			}
		}		

	 	& a {
			text-shadow: none;
		}

		& ul > li > ul { /* all open submenus */
			padding-top: 0 !important;
		}
	}

	.wp-block-navigation__responsive-container-content {
		padding-top: 1em !important; 
		margin-bottom: 4em;
	}
}

.wp-block-navigation__submenu-container { /* nav childs */
	font-weight: 400;
}

.current-menu-item > a {
	text-decoration: underline;
	text-underline-offset: 4px;
}

/* QnD Home + koonnit */
:is(.search, .archive, .single-tribe_events, .error404, .page-template-page-no-title) header a, header:hover a {
	color: black !important;
	text-shadow: none;
}

:is(.home, .search, .archive, .error404, .page-template-page-no-title) {
	.wp-site-blocks > header + .wp-block-cover {
		display: none; 
	}

	.wp-site-blocks > main > .wp-block-spacer:first-of-type {
		display:none;
	}

	.entry-content {
		margin-top: 0 !important;
	}
}

/* TODO mobiili nav: collapse submenus by default */
@media (max-width: 600px) { 
 	header { 
 		.wp-block-navigation {
			& ul li { 
				width: 100%;
			}

			.wp-block-navigation__submenu-icon { 
				height: auto; 
				width: auto; 
				position: absolute; 
				padding: 3px; 
				right: 0; 
				top: 0; 
				border: 0 solid #ccc; 
			}
		} 
		.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
			.has-child .wp-block-navigation__submenu-container { 
				display: none; 
				width: 100%; 
			}

			.wp-block-navigation__submenu-icon { 
				display: block; 
			}
		} 
	}
}

.wp-element-button {
	font-weight: 700 !important;
	text-shadow: none !important;
	letter-spacing: 1px;
}

/* query loop > button */
.wp-block-query > ul > li > .wp-element-button h2 {
	font-weight: 600;
	padding-top: 0.9rem;
}

/* Query Loop .kortti > Layout:Grid = korttinäkymä */
.wp-block-query.kortti .is-layout-grid {
	:is(a, p, h2, h3, time) {
		color: white !important;
	}
	& h2 {
		font-size: 1.1rem;
		font-weight: 600;
		margin-top: 40%;
	}
	& .wp-block-post-date {
		margin: 1em 0;
		position: absolute:
		top: 1em;
	}
	& .taxonomy-post_tag {
		position: absolute;
		bottom: 1em;
		text-align: left;		
	}

	& > li {
		height: 360px;
		position: relative;
	    background: var(--wp--preset--color--base-2); /* fallback bg color */
		border-radius: 0 !important; /* was 25px */
		& > :not(figure) {
			padding: 0 1.5rem;
			z-index: 99;
			position: relative;
			text-align: center;
			vertical-align: middle;
			text-shadow: 0 0 5px black;
		}
		& > figure {
		   height: 100%;
		   width: 100%;
		   position: absolute;
		   opacity: 0.6;
		}

		/* kuvalle overlay */
		&::before {
			content: "";
			display: block;
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			background-color: rgba(0, 0, 0, 0.9);
			border-radius: 0 !important; /* was 25px */ 
		}

		& > figure img {
			object-fit: cover;
			height: 100%;
			z-index: -1;
			opacity: 0.8;
			border-radius: 0;
		}
		
		&:hover figure {
			opacity: 0.4;
			transition: opacity 0.5s;

		}
	}
}

/* POSTS artikkelit tarinat */
/* tummalla taustalla muuta otsikotkin vaaleaksi, esim. artikkelit-sivupohja */
.group-bg-dark {
	& :is(h2, h3, h4, h5) {
		color: white;
	}
	/* vaihda Lainaus- ja Nosto-lohkojen tausta vaaleasta tummaksi, oletuksena teksti on vaalea */
	& blockquote {
		background: var(--wp--preset--color--primary);
	}
}

.wp-block-columns {
	gap: 3rem !important;
	li &, & + & { /* Ei pure jos välissä spacer tms */
		margin-bottom: 100px;
	}
}

/* TODO QnD */
.wp-block-columns.alignfull {
	padding-right: 12px;
	padding-left: 12px;
}

/* Slider carousel */
/* How to insert: Add a Query Loop with .sliderTop and Post Template with .slider */
.wp-block-query.sliderTop {
    overflow: hidden;
}

.slider {
    display: flex;
    transition: transform 0.5s ease-in-out;
    animation: slide 25s infinite; /* was 15s, said to be too fast */
	& > .wp-block-post {
	    min-width: 100%;
	    box-sizing: border-box;
	}
}

@keyframes slide {
    0% { transform: translateX(0%); }
    20% { transform: translateX(0%); }
    25% { transform: translateX(-100%); }
    45% { transform: translateX(-100%); }
    50% { transform: translateX(-200%); }
    70% { transform: translateX(-200%); }
    75% { transform: translateX(-300%); }
    95% { transform: translateX(-300%); }
    100% { transform: translateX(0%); }
}

/* Events calendar plugin */
/* List: hide dates as they are listed already once */
.tribe-events-widget-events-list {
	& time {
		display: none;
	}

	/* list: hide last link "view  calendar" */
	& > .tribe-events-widget-events-list__view-more {
		display: none;
	}
}

/* archive: hide bar */
.tribe-events-header__events-bar {
	display: none !important;
}

/* .tribe-events-single-event-title */
.tribe-events-schedule {
}

.tribe-events-event-image img {
	object-fit: cover;
	height: 100%;
	width: inherit;
}

.tribe-events-venue-map, #tribe-events-footer {
	display: none;
}

.tribe-events-event-meta {
	width: 320px !important;
}

.grecaptcha-badge { 
	visibility: hidden; 
}

.text-shadow-none {
	&, & h1, & h2, & h3, & h4, & p, & a {
		text-shadow: none !important;
	}
}


/* Kiipeilysummit 2025: 7709 */
@font-face {
	font-family: abril-fatface;
	src: url("https://kiipeilyliitto.fi/wp-content/uploads/abril-fatface-regular.ttf");
}
@font-face {
	font-family: brother;
	font-weight: 500;
	src: url("https://kiipeilyliitto.fi/wp-content/uploads/brother-1816-regular.ttf");
}
@font-face {
	font-family: brother;
	font-weight: light;
	src: url("https://kiipeilyliitto.fi/wp-content/uploads/brother-1816-light.otf");
}

.page-id-7725 {
	font-family: brother, sans-serif !important;
	font-weight: light;
	& .font-abril {
		font-family: abril-fatface, serif;
	}
	& h1, h2, h3, h4, h5, .allcaps-bold {
		text-transform: uppercase;
		font-weight: bold; 
	}
}