/*
Theme Name:       Twenty Twenty-Four Child
Theme URI:        https://lloydcleaningservices.nl/twenty-twenty-four-child/
Description:      My custom child theme for Twenty Twenty-Four.
Author:           Albert
Author URI:       https://webweaversonline.com/about/#team
Template:         twentytwentyfour
Version:          1.0.0
*/

/* Add your custom CSS here */

html {
  scroll-behavior: smooth;
}

a {
	
	transition: all 0.2s ease-in-out;
}

a:hover {
	cursor: pointer;
}

.wp-block-navigation .wp-block-navigation-item__content.wp-block-navigation-item__content:hover {
	text-decoration: none;
	color: #043257 ;
}

/* Highlight parent link and submenu button if a child is current */

/* Only highlight the parent link and toggle, not the submenu */
.wp-block-navigation-item.current-menu-ancestor > .wp-block-navigation-item__content,
.wp-block-navigation-item.current-menu-ancestor > .wp-block-navigation__submenu-icon {
  color: #043257;   /* highlight only parent text + button */
  font-weight: 600;
}

/* Reset submenu items to normal so they don't inherit the parent color */
.wp-block-navigation-item.current-menu-ancestor > .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
  color: inherit;
  font-weight: inherit;
}


.current-menu-item a span 
{
  color: #043257;     /* highlight color */
  font-weight: 600;   /* make it stand out */
}


/* Animista kenburns */
.image-container {
	overflow: hidden;
}

.cover {
	cursor: pointer;
} 

.cover:hover > img {-webkit-animation:kenburns-top 5s ease-out both;animation:kenburns-top 8s ease-out both;
}

@-webkit-keyframes kenburns-top{0%{-webkit-transform:scale(1) translateY(0);transform:scale(1) translateY(0);-webkit-transform-origin:50% 16%;transform-origin:50% 16%}100%{-webkit-transform:scale(1.25) translateY(-15px);transform:scale(1.25) translateY(-15px);-webkit-transform-origin:top;transform-origin:top}}@keyframes kenburns-top{0%{-webkit-transform:scale(1) translateY(0);transform:scale(1) translateY(0);-webkit-transform-origin:50% 16%;transform-origin:50% 16%}100%{-webkit-transform:scale(1.25) translateY(-15px);transform:scale(1.25) translateY(-15px);-webkit-transform-origin:top;transform-origin:top}}

/* Animista fade-in animation */
.fade-in {
	-webkit-animation: fade-in 1.2s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
	        animation: fade-in 1.2s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}

/* ----------------------------------------------
 * Generated by Animista on 2025-8-21 11:38:11
 * Licensed under FreeBSD License.
 * See http://animista.net/license for more info. 
 * w: http://animista.net, t: @cssanimista
 * ---------------------------------------------- */

@-webkit-keyframes fade-in {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes fade-in {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

/* Initial state for the container */
.bg-fade-in {
  opacity: 1;
  transition: opacity 0.5s ease-in-out;
}

/* State to be added by JavaScript */
.bg-fade-in.is-loaded {
  opacity: 1;
}

@media (prefers-reduced-motion: no-preference) {
.onscroll-fade-in {
	animation: onscroll-fade-in linear forwards;
	animation-timeline: view();
	animation-range: entry -20%;
}

@keyframes onscroll-fade-in {
	0% {
		opacity: 0;
		transform: scale(0.8);
		transform: translatey(30px);
	}
	
	50% {
		transform: scale(0.9);
		opacity: 0.4;
	}
	
	100% {
		opacity: 1;
		transform: scale(1);
		transform: translatey(0px);
	}
 }
}

/*
 * --------------------
 * DETAILS BLOCK STYLES 
 * --------------------
 */

details summary {
    cursor: pointer;
    list-style: none; /* Removes the default arrow/marker */
	-webkit-tap-highlight-color: transparent;
}

/*
 * 1. Remove the default border and bluish highlight on the summary element
 * for a cleaner look.
 */
* {
    outline: none;
    box-shadow: none;
	-webkit-tap-highlight-color: transparent;
}

/*
 * 2. Add a smooth transition to the GenerateBlocks grid when it opens.
 * We use max-height to animate a container with dynamic height.
 */


/* Use a pseudo-element for a custom arrow icon */
details summary::after {
    content: "▼"; /* Downward-pointing triangle or any other symbol */
    float: right;
    transition: transform 0.2s ease-out;
}

/* Rotate the arrow when the details block is open */
details[open] summary::after {
    transform: rotate(180deg);
}

/* Call Button animation */

.call-btn {
	transition: transform 0.2s ease-in-out;
}

.call-btn:hover {
	transform: translatey(-7px);
}

/* Item Pricing Tooltip*/
/* Ensure the elements are positioned correctly relative to the tooltip */
#forminator-module-955 .has-calculation-tooltip {
    position: relative;
    cursor: help;
}

/* Tooltip container styles (hidden by default) */
#forminator-module-955 .has-calculation-tooltip::after {
    content: attr(data-tooltip-content); /* Pull content from the JS-set attribute */
    position: absolute;
    bottom: 100%; /* Position above the field */
    left: 50%;
    transform: translateX(-50%) translateY(-5px);
    
    /* Styling */
    background-color: #10b1c7; /* WordPress primary color */
    color: white;
    padding: 4px 8px;
    border-radius: 3px;
    white-space: nowrap;
    z-index: 1000;
    pointer-events: none; /* Allows user to click the element below */
    opacity: 0;
    transition: opacity 0.3s ease, transform 0.3s ease;
}

/* Tooltip arrow/triangle */
#forminator-module-955 .has-calculation-tooltip::before {
    content: '';
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    border-width: 5px;
    border-style: solid;
    border-color: #10b1c7 transparent transparent transparent;
    z-index: 1001;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.3s ease;
}

/* Show tooltip on hover */
#forminator-module-955 .has-calculation-tooltip:hover::after,
#forminator-module-955 .has-calculation-tooltip:hover::before {
    opacity: 1;
}

/* Apply the upward movement ONLY to the tooltip body */
#forminator-module-955 .has-calculation-tooltip:hover::after {
    transform: translateX(-50%) translateY(-10px);
}