/*
Theme Name:   Lýkos Studio
Description:  Twenty Twenty Five Child Theme
Author:       Sérgio Alves Santos
Website:      www.studio.hanko.lu
Template:     twentytwentyfive
Version:      1.0
Year:         2025
*/

/* Global styles =======================================================================================
===================================================================================================== */
html {
	scroll-behavior: smooth;
}
:root {
	--fade: .5;
	--smooth: ease-in-out .15s all;
	--pastel-purple: #cabcff;
	--text-color: #333;
}
.wp-block-button {
	transition: var(--smooth);
	&.wp-block-button:hover {
		transition: var(--smooth);
		opacity: var(--fade);
	}
}
.has-global-padding > .alignfull {
	margin: 0 !important;
	padding: 0 !important;
}
h1, h2, h3, h4, h5, h6 {
    letter-spacing: 0;
}
/* Animations ==========================================================================================
===================================================================================================== */
.animated {
    opacity: 0;
    position: relative;
}
.bottom-to-top {
    top: 350px;
}
.left-to-right {
    left: -350px;
}
.in-view {
    opacity: 1;
    top: 0;
    left: 0;
    transition: opacity 1.75s ease-in-out .15s, top .75s ease-in-out .1s,
    left .75s ease-in-out .1s;
}
.delay-01 {
    transition-delay: .5s;
}
.delay-02 {
    transition-delay: .75s;
}
/* Contact Form ========================================================================================
===================================================================================================== */
#wpforms-207 {
	button[type="submit"] {
		transition: var(--smooth);
		border-radius: 25px;
		border: none;
		background-color: var(--pastel-purple);
		color: var(--text-color);
		font-size: clamp(0.875rem, 0.875rem + ((1vw - 0.2rem) * 0.094), 0.95rem);
		padding: 12px 45px;
		font-family: var(--wp--preset--font-family--space-grotesk);
	}
	button[type="submit"]:is(:hover, :active, :focus) {
		opacity: var(--fade);
		transition: var(--smooth);
	}
	button[type="submit"]:after {
		display: none;
	}
	input:is([type="text"], [type="email"]), textarea {
		background: #737373;
		color: #FFF;
	}
	legend, label {
		color: white;
		margin-bottom: 7px;
	}
	span.wpforms-required-label {
		color: #CCC;
	}
	input::placeholder {
		color: #FFF;
	}
}
div.wpforms-container-full .wpforms-confirmation-container-full, div[submit-success]>.wpforms-confirmation-container-full:not(.wpforms-redirection-message) {
    background: white;
    border: none;
    text-align: center;
    padding: 50px 25px;
}
/* Landing Page ========================================================================================
===================================================================================================== */
#service-01, #service-02, #service-03 {
	display: none;
}
#services {
	padding: 20px;
	max-width: 100%;
	&.active:after {
		content: "";
		background: rgba(0,0,0,.8);
		display: block;
		position: fixed;
		z-index: 999;
		inset: 0;
	}
}
.modal-overlay {
    max-width: 100%;
    padding: 25px;
	display: flex;
	justify-content: center;
	.service-box {
		max-width: 1100px;
		margin: 20px;
		position: absolute;
        z-index: 10000;
        top: 20px;
	}
	#service-03.service-box {
		top: 220px;
	}
	figure {
		min-width: 52px;
	}
}
.close-service {
	cursor: pointer;
	word-break: keep-all;
	&:hover {
		opacity: var(--fade);transition: var(--smooth);
	}
	figure {
		min-width: 28px;
	}
	img {
		transform: rotate(45deg);
	}
}
.align-end-column {
	display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-self: unset !important;
	figure {
		align-self: flex-end;
		margin-right: -20px !important;
	}
}
.service-boxes div {
	cursor: pointer;
	transition: var(--smooth);	
	&:hover {
		opacity: var(--fade);
	}
}
.service-boxes>div {
    height: 100%;
}
.services-grid {
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    justify-content: center; 
}
@media (max-width: 782px) { 

	h1 {
		padding: 5% 0 !important;
    	text-align: center;
	}
	h2 {
		text-align: center;
	}
	.wp-block-buttons {
		justify-content: center;
	}
	.align-end-column {
		figure {
			align-self: center;
			margin: 40px 0 45px;
		}
	}
    .service-box div div>.wp-block-column-is-layout-flow figure {
        display: flex;
        justify-content: center;
    }
	img.wp-image-182 {
		display: none;
	}
	.mobile-center>div {
		justify-content: center;
	}
	.mobile-single-column {
		display: block !important;
	}
}
@media (max-width: 730px) {  
    .services-grid {
        grid-template-columns: repeat(auto-fit, minmax(330px, 1fr));
        justify-content: center; 
    }
}
/* Header ==============================================================================================
===================================================================================================== */
.wp-block-navigation__responsive-container-content .wp-block-navigation-item, .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .wp-block-navigation__container {
	 align-items: flex-end;
	align-self: flex-end;
}
.wp-block-site-logo {
	max-width: 110px;
}
@media (max-width: 1100px) {
	.header-columns {
		div {
			flex-basis: content !important;
		}
		nav {
			justify-content: flex-end;
		}
	}	
}
@media (max-width: 781px) {
    div .wp-block-columns:not(.is-not-stacked-on-mobile)>.wp-block-column {
        flex-basis: content !important;
    }
}
header a {
  transition: var(--smooth);
  &:is(:hover, :active, :focus) {
    text-decoration: none;
    opacity: var(--fade);
  }
}
/* Footer ==============================================================================================
===================================================================================================== */
footer {
	margin: 0;
	.copyright-year strong {
		font-weight: 400;
	}
}