/*
 Theme Name:   Twenty Twenty-Five Child
 Template:     twentytwentyfive
 Author:       Guenther Wurmbauer
 Description:  My custom shop and sticky header styles.
 Version:      1.0.0
*/

html {
    scroll-behavior: smooth;
}

/* overwrite automatic highlighting of highlighted text */
mark {
    background-color: transparent !important;
}

.wp-block-template-part > .no-top-margin {
	margin-top: 0 !important;
}


/* Button Templates Styling */
/* ************************ */

/* Styling for the Info Button */
.wp-block-button.is-style-info-button {
    background-color: #0f0f6d;
    color: #333;
    border: 2px solid #333;
    border-radius: 4px;
}

/* Styling for the Buy Button */
.wp-block-button.is-style-buy-button {
    background-color: #ff5733;
    color: #fff;
    font-weight: bold;
    text-transform: uppercase;
    box-shadow: 0 4px 0 #c0392b;
}

.wp-block-button.is-style-buy-button .wp-block-button__link:hover {
    transform: translateY(2px);
    box-shadow: 0 4px 0 #c0392b;
}

.wp-block-button.is-style-call-to-action-button {
	background-color: var(--wp--preset--color--special-button-background);
	color: var(--wp--preset--color--special-button-text);
	border: 2px solid var(--wp--preset--color--special-button-border);
	border-radius: 8px;
}
/* .wp-block-button.is-style-call-to-action-button .wp-block-button__link {
	background-color: var(--wp--preset--color--secondary);
	border-radius: 20px;
	border: 3px solid var(--wp--preset--color--contrast);
} */

.wp-block-button.is-style-standard-button {
	background-color: var(--wp--preset--color--button-background);
	color: var(--wp--preset--color--button-text);
	border: 2px solid var(--wp--preset--color--button-border);
	border-radius: 8px;
}


/* Base Style Enhancements */
.wp-block-button.is-style-standard-coloured-button {
    display: inline-block;
    background-color: var(--wp--preset--color--secondary-dark);
    color: var(--wp--preset--color--button-text);

    border: none;
    border-radius: 4px; /* Slight rounding softens sharp edges, but change to 0px if you prefer hard corners */
    padding: 6px 12px; /* Increased horizontal padding for balanced button proportions */
    margin: 18px 0;
    font-weight: 700;
		font-size: 1.2em;
    text-decoration: none;
    cursor: pointer;
    
    /* Smooth transition for hover dynamics */
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* Interactive Hover Effect */
.wp-block-button.is-style-standard-coloured-button:hover {
    /* Subtle color dimming without needing extra variables */
    /* background-color: var(--wp--preset--color--secondary-dark); */
    filter: brightness(0.92); 
    
    /* Slight lift and enhanced drop shadow */
    transform: translateY(-2px);
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
}

.wp-block-button.is-style-standard-coloured-button > a {
	padding: 6px 12px;
	/* font-size: 0.9rem; */
	color: #FFF;
	/* font-weight: 500; */
}




/* Group styling */
.wp-block-group.is-style-floating-button-container {
	position: fixed;
	display: none;
	/* left not needed if it's anyway hidden */
	/* left: min(calc(100% - 200px), calc(50vw + 350px)); */
	bottom: 25px;
	z-index: 9999;
	max-width: 200px;	
}
.wp-block-group.is-style-floating-button-container .wp-block-buttons {
	flex-direction: column;
	align-items: flex-end;
}
/* floating button goes with container above :) */
.wp-block-group.is-style-floating-button-container .wp-block-button{
	background-color: var(--wp--preset--color--special-button-background);
	color: var(--wp--preset--color--special-button-text);
	border: 2px solid var(--wp--preset--color--special-button-border);
	border-radius: 8px;
	padding: 8px 18px 8px 36px;
	cursor: pointer;
	position: relative;
	transition: transform 0.3s ease, box-shadow 0.3s ease, filter 0.3s ease;
	width: 100%;
	box-sizing: border-box;
}
.wp-block-group.is-style-floating-button-container .wp-block-button::before {
	content: '♥';
	position: absolute;
	left: 18px;
	top: 50%;
	transform: translateY(-50%);
}
.wp-block-group.is-style-floating-button-container .wp-block-button>a{
	padding: 0;
}
.wp-block-group.is-style-floating-button-container .wp-block-button:hover {
	filter: brightness(0.92); 
    transform: translateY(-2px);
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
	transition: transform 0.3s ease, box-shadow 0.3s ease, filter 0.3s ease;
}

@media screen and (max-width: 540px) {
	.wp-block-group.is-style-floating-button-container {
		display: block;
		right: 36px;
	}
}





/* Image Template Styles */
.wp-block-image.is-style-blurry-image {
	filter: blur(2px);
}

/* Cover Image styles */
/* Targets background image, otherwise text is blurry */
.wp-block-cover.is-style-blurry-cover-image .wp-block-cover__image-background {
	filter: blur(2px);
	opacity: 0.8;
}


.wp-block-cover.is-style-blurry-cover .wp-block-cover__background {
    mix-blend-mode: overlay; /* Try: overlay, multiply, soft-light, screen, or color */
    opacity: 0.7; /* Adjust strength of the color mix */
}


/* Paragraph Template stylings */
/* ****************** */
/* Text for Cover Image (image with text placed on top of it */
.is-style-cover-text {
	font-size: 0.8rem;
	line-height: 1.2rem;
}


/* Text for Info Box paragraph */
.is-style-info-box {
    font-style: italic;
	font-size: 1.1rem;
	/* color: var(--wp--preset--color--dark); */
}

.is-style-sub-title {
	font-style: italic;
	font-size: 1.1rem;
}

.is-style-text-link {
	text-decoration: underline;
	color: var(--wp--preset--color--primary);
}

.is-style-text-link-box {
	border: 1px solid var(--wp--preset--color--secondary);
	background-color: var(--wp--preset--color--primary);
	padding: 12px;
	text-decoration: none;
	cursor: pointer;
}

.is-style-highlight-number {
	font-weight: bold;
	color: var(--wp--preset--color--primary);
}

.info-box-icon {
	width: 80px;
	height: 80px;
}


/* mobile adjustments */
@media(max-width:768px) {
	.mobile-order-1 {
		order: 1;
	}
	.mobile-order-2 {
		order: 2;
	}
	.mobile-full-width > div {
		max-width: 100%;
		width: 100%;
	}
}

/* ==========================================================================
   Team Grid Layout 
   ========================================================================== */


/* team card */
.team-card {
    transition: transform 0.3s ease, box-shadow 0.3s ease, background-color 0.3s ease;
}

/* 2. What happens when hovering over the card */
.team-card:hover {
    transform: translateY(-5px); /* Lifts the card up slightly */
    box-shadow: 0 10px 20px rgba(0,0,0,0.1); /* Adds a soft drop shadow */
    background-color: color-mix(in srgb, var(--wp--preset--color--primary) 15%, transparent); /* Optional: subtle background shift */
    border-color: var(--wp--preset--color--primary) !important; /* Highlights border */
}


/* generic WP dashboard custom items */
/* back button */
.back_button {margin-left: 10px; background: #f6f7f7; border-color: #ccd0d4; color: #2271b1;}
.back_button > span {font-size: 16px; line-height: 1.3; margin-right: 4px; vertical-align: text-top;}

/* sponsors */
.sponsor-img-toggle-wrapper {max-width: 400px;}

/* fancy sponsorlist texts (for footer) */
.sponsors-block {display: flex; flex-flow: row; justify-content: center; flex-wrap: wrap;}
.sponsors-block a {text-decoration: none;}
.sponsors-block h4 {margin:0; display: inline; vertical-align: middle;}
.sponsors-block > div {margin: 12px 24px;}

.sponsor-amount-cat1 {color: #999;}
.sponsor-amount-cat2 {color: #555;}
.sponsor-amount-cat3 {color: #000;}
.sponsor-amount-cat4 {color: #0a0; /*width: 100%; flex-basis: 1; text-align: center;*/}
.sponsor-amount-cat5 {color: #0f0; /* width: 100%; flex-basis: 1; */}


.priority-default > h4 {font-size: 1.0em; font-weight:normal;}
.priority-low > h4 {font-size: 0.8em; font-weight: 100;}
.priority-medium > h4 {font-size: 1.2em; font-weight: 300}
.priority-high > h4 {font-size: 1.3em; font-weight: 600;}
.priority-very-high > h4 {font-size: 1.4em; font-weight: 700;}
.priority-vip > h4 {font-size: 1.5em; font-weight: 900;}

/* make groups clickable for links */
.clickable-group {
    position: relative;
    /* transition: transform 0.2s ease, box-shadow 0.2s ease; */
    transition: scale 0.3s ease, box-shadow 0.3s ease;
}
.clickable-group:hover {
    cursor: pointer;
    /* transform: translateY(-4px); */
	scale: 1.02;
    box-shadow: 0 4px 20px rgba(0,0,0,0.08);
}
.clickable-group .stretched-link a,
.clickable-group a.stretched-link {
    position: static;
	text-decoration-line: none;
}
.clickable-group .stretched-link a::after,
.clickable-group a.stretched-link::after {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1;
    content: "";
}


/* Pagination CSS */
/* 1. Add breathing room around the whole pagination wrapper */
.wp-block-query-pagination {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 1.5rem; /* Separates Previous, Numbers, and Next */
	margin-top: 2rem;
}

/* 2. Space out individual page numbers */
.wp-block-query-pagination-numbers {
	display: flex;
	gap: 0.5rem; /* Space between numbers 1, 2, 3... */
}

/* 3. Style both links (<a>) AND active page (<span>) */
.wp-block-query-pagination-numbers a,
.wp-block-query-pagination-numbers span {
	padding: 6px 12px;
	text-decoration: none;
	border-radius: 4px;
}

/* 4. Highlight current active page number */
.wp-block-query-pagination-numbers .current {
	font-weight: bold;
	background-color: #f0f0f0;
}

.checkout-button {
	border: 1px solid #333;
	background-color: var(--wp--preset--color--primary);
}