/*
Theme Name: RUDA
Theme URI: 
Author: RUDA
Author URI: https://www.ruda.pt
Description: Theme of RUDA's website, based on Twenty Twenty-Five
Requires at least: 6.7
Tested up to: 6.7
Requires PHP: 7.2
Version: 1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: ruda
Tags: one-column, custom-colors, custom-menu, custom-logo, editor-style, featured-images, full-site-editing, block-patterns, rtl-language-support, sticky-post, threaded-comments, translation-ready, wide-blocks, block-styles, style-variations, accessibility-ready, blog, portfolio, news

/*
 * Link styles
 * https://github.com/WordPress/gutenberg/issues/42319
 */

/*#region DEFAULT STYLES */
/*
 * Link styles
 * https://github.com/WordPress/gutenberg/issues/42319
 */
a {
	text-decoration-thickness: 1px !important;
	text-underline-offset: 0.1em;
}
/* Selection style */
::selection {
	background: #d9ff00;
}

/* Focus styles */
:where(.wp-site-blocks *:focus) {
	outline-width: 2px;
	outline-style: solid;
}

/* Increase the bottom margin on submenus, so that the outline is visible. */
.wp-block-navigation .wp-block-navigation-submenu .wp-block-navigation-item:not(:last-child) {
	margin-bottom: 3px;
}

/* Increase the outline offset on the parent menu items, so that the outline does not touch the text. */
.wp-block-navigation .wp-block-navigation-item .wp-block-navigation-item__content {
	outline-offset: 4px;
}

/* Remove outline offset from the submenus, otherwise the outline is visible outside the submenu container. */
.wp-block-navigation
	.wp-block-navigation-item
	ul.wp-block-navigation__submenu-container
	.wp-block-navigation-item__content {
	outline-offset: 0;
}

/*
 * Progressive enhancement to reduce widows and orphans
 * https://github.com/WordPress/gutenberg/issues/55190
 */
h1,
h2,
h3,
h4,
h5,
h6,
blockquote,
caption,
figcaption,
p {
	text-wrap: pretty;
}

body {
	letter-spacing: 0.6px;
	/* controla a duração da animação do gradiente hero */
	--hero-animation-duration: 5s;
}

/*
 * Change the position of the more block on the front, by making it a block level element.
 * https://github.com/WordPress/gutenberg/issues/65934
*/
.more-link {
	display: block;
}

.wp-block-post-content {
	margin-top: 0px;
}
/* #endregion */

/*#region HOME PAGE*/
/*#region Controls the hero size (controlled by the inner div)*/
.hero > div {
	min-height: 45rem;
	display: flex;
	align-items: center;
}

@media (max-width: 1366px) {
	.hero > div {
		min-height: 37rem;
	}
}

@media (max-width: 500px) {
	.hero > div {
		min-height: 33.125rem;
	}
}
/*#endregion  */

/* Query Loop Block items in the home page */
.query_block_home {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	gap: var(--wp--preset--spacing--40);
}

.query_block_home > li:last-of-type {
	display: none;
}

@media (max-width: 1200px) {
	.query_block_home {
		grid-template-columns: 1fr 1fr;
	}
	.query_block_home > li:last-of-type {
		display: initial;
	}
}

@media (max-width: 750px) {
	.query_block_home {
		grid-template-columns: 1fr;
	}
	.query_block_home > li:last-of-type {
		display: none;
	}
}

.my-loop-block {
	height: 350px;
}

@media (max-width: 1200px) {
	.my-loop-block {
		height: 300px;
	}
}

.my-loop-block a::before {
	content: " ";
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
}

.my-loop-block a {
	text-decoration: none;
	outline: none;
}

.my-loop-block .tags {
	border-radius: 30px;
	border: 1px solid var(--wp--preset--color--base);
	padding-inline: 10px;
	padding-block: 5px;
}

.my-loop-block:hover .tags.tags-hover {
	background-color: var(--wp--preset--color--accent) !important;
	color: var(--wp--preset--color--text-soft);
	border-color: var(--wp--preset--color--accent);
}

.my-loop-block img {
	transition: 0.25s ease;
}
.my-loop-block:hover img {
	transform: scale(1.1);
}

.my-loop-block .wp-block-cover__inner-container {
	height: 100%;
	min-width: 100%;
	/* display: grid; */
}

.my-loop-block .wp-block-cover__inner-container > div {
	height: 100%;
	display: grid;
	align-content: end;
}

/* Grid Services (not used in the page, saved as template part) */
@media (min-width: 769px) and (max-width: 1100px) {
	.grid_services {
		grid-template-columns: 1fr 1fr 1fr 1fr !important;
	}
	.grid_services > div:nth-child(5) {
		grid-column: 2;
	}
}

@media (max-width: 768px) {
	.grid_services {
		grid-template-columns: 1fr 1fr 1fr !important;
	}
}

@media (max-width: 530px) {
	.grid_services {
		grid-template-columns: 1fr 1fr !important;
		column-gap: var(--wp--preset--spacing--30);
		row-gap: var(--wp--preset--spacing--50);
	}
}

.grid_services_rocket img {
	position: absolute;
	top: -10px;
	right: -10px;
	z-index: 2;
}

/* icons services not longer than 130px bellow 1050px screen sizes */
.icons-services-size {
	width: 130px;
}
@media (width <= 1050px) {
	/* avatar not longer than 100px bellow 1050px screen sizes */
	.icons-services-size {
		max-width: 110px;
	}
}

/* ========== GRID SERVICES v2 ========== */

@media (width < 1050px) {
	.grid-services-v2 {
		grid-template-columns: 1fr 1fr !important;
	}
}
@media (width < 540px) {
	.grid-services-v2 {
		grid-template-columns: 1fr !important;
	}
}

/* Background green on hover */
.grid-services-v2 > div:hover > div:nth-child(2) {
	background-color: var(--wp--preset--color--accent) !important;
}

/* icon rocket */
figure.icon-rocket {
	position: absolute !important;
	top: -10px;
	right: -10px;
	/* z-index: 2; */
}

/* Grid team members */

/* to center the avatar horizontaly */
.team figure {
	text-align: center !important;
}

/* avatar not longer than 190px in above 1050px screen sizes */
.team img {
	max-width: 170px;
}

@media (width <= 1050px) {
	.team {
		grid-template-columns: 1fr 1fr !important;
	}
	/* avatar not longer than 150px bellow 1050px screen sizes */
	.team img {
		max-width: 150px;
	}
}

@media (width < 540px) {
	.team {
		grid-template-columns: 1fr !important;
	}
}

/* Stretch items to fill column in both axis */
.team-member {
	align-items: stretch !important;
	box-shadow: 0 0 0 1px var(--wp--preset--color--border) inset;
}

.team-member > div:last-child {
	flex-grow: 1;
}

/* .team .tags {
	border-radius: 30px;
	border: 1px solid var(--wp--preset--color--background-hard);
	padding-inline: 10px;
	padding-block: 3px;
} */

/* Background green on hover */
.team > div:hover > div:nth-child(2) {
	background-color: var(--wp--preset--color--accent) !important;
}

/* ----- Grid Team Info ----- */
.grid-team-info {
	grid-template-columns: 3fr 4fr 2fr !important;
}

@media (width < 1000px) {
	.grid-team-info {
		grid-template-columns: 1fr 1fr !important;
	}
	.grid-team-info div:nth-child(2) {
		grid-row: 2;
		grid-column: span 2;
	}
}
/*#endregion*/

/*#region HEADER*/
.my-header {
	position: fixed;
	width: 100%;
	top: 0;
	z-index: 30;
}

.my-header .inner-group {
	background-color: #8080804d;
	-webkit-backdrop-filter: blur(25px);
	backdrop-filter: blur(25px);
	border: 1px solid #ffffff4d;
	border-radius: 30px;
}

@media (width < 1300px) {
	.my-header .inner-group {
		padding-block: 13px !important;
		padding-left: 25px !important;
		padding-right: 9px !important;
	}
	.my-header .inner-group .logo-ruda {
		width: 105px !important;
	}
}

.inner-group:has(#mobile-nav.is-open) {
	border-radius: 30px;
}

.my-header li a,
.button-mobile-nav a {
	text-decoration: none;
	outline: none;
}
.my-header li a:hover span {
	color: var(--wp--preset--color--text-base);
}

/* Mobile Header */
@media (max-width: 768px) {
	.my-header .inner-group {
		padding-inline: 30px !important;
		padding-block: 13px !important;
	}
}

@media (min-width: 769px) {
	.button-mobile-nav {
		display: none !important;
	}
	.mobile-nav {
		display: none !important;
	}
}

/* BUTTON INICIAR PROJETO DESKTOP HEADER */
.my-header .desktop-nav nav li:last-child > a span {
	background-color: var(--wp--preset--color--accent) !important;
	color: var(--wp--preset--color--text-base) !important;
	padding-inline: 12px !important;
	padding-block: 9px !important;
	border-radius: 30px;
}

/* BUTTON INICIAR PROJETO DESKTOP HEADER - abaixo de 1300px */
.my-header .desktop-nav nav li:last-child > a span {
	padding-block: 7px !important;
}
/* BUTTON INICIAR PROJETO DESKTOP HEADER  - on hover */
.my-header .desktop-nav nav li:last-child > a:hover span {
	background-color: var(--wp--preset--color--text-base) !important;
	color: var(--wp--preset--color--accent) !important;
}

#mobile-nav {
	display: grid;
	grid-template-rows: 0fr;
	grid-template-columns: 1fr;
	/* transition: grid-template-rows 3s ease; */
}
#mobile-nav > nav {
	overflow-y: hidden;
}
#mobile-nav.is-open {
	grid-template-rows: 1fr;
	padding-top: 20px !important;
	padding-bottom: 20px !important;
}

.button-mobile-nav .icon-container {
	height: 20px;
}
#button-mobile-nav {
	padding-left: 20px;
	padding-block: 2px;
}

/* Space between menu items on mobile */
.mobile-nav nav ul li {
	margin-top: 15px;
}

/* BUTTON INICIAR PROJETO MOBILE HEADER */
#mobile-nav.is-open > nav li:last-child > a {
	background-color: var(--wp--preset--color--accent) !important;
	color: var(--wp--preset--color--text-base) !important;
	padding-inline: 15px !important;
	padding-block: 10px !important;
	border-radius: 30px;
	margin-top: -10px;
}
/*#endregion*/

/*#region FOOTER*/
/* Footer below 500px */
@media (max-width: 500px) {
	footer > div > div {
		flex-direction: column-reverse;
	}
}
/*#endregion*/

/*#region PROJETOS PAGE*/
.lista-categorias {
	list-style-type: none;
	display: flex;
	justify-content: center;
	gap: 20px;
	flex-wrap: wrap;
}
.lista-categorias > li {
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 30px;
	padding-inline: 20px;
	padding-top: 2px;
	padding-bottom: 4px;
	background-color: var(--wp--preset--color--background-medium);
	position: relative;
}

.lista-categorias > li > a {
	text-decoration: none;
	outline: none;
	font-size: 16px;
	color: var(--wp--preset--color--text-soft);
}

.lista-categorias > li > a::before {
	content: " ";
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
}

/* Controla a grid da lista de projetos */
.lista-projetos > ul {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	gap: var(--wp--preset--spacing--40);
}

@media (max-width: 1200px) {
	.lista-projetos > ul {
		grid-template-columns: 1fr 1fr;
	}
}

@media (max-width: 750px) {
	.lista-projetos > ul {
		grid-template-columns: 1fr;
	}
}
/*#endregion*/

/*#region INDIVIDUAL PROJECTS PAGE*/
/* Controla o hero das páginas de projetos individuais */

.hero-projeto {
	height: 70vh;
	min-height: 44rem;
	max-height: 60rem;
}

@media screen and (max-width: 500px) {
	.hero-projeto {
		height: 58vh;
	}
}

@media (max-width: 1366px) {
	.hero-projeto {
		min-height: 500px;
	}
}

@media screen and (max-width: 1200px) {
	.hero-projeto {
		max-height: 800px;
	}
}

.hero-projeto figure {
	width: 100%;
	height: 100%;
}
.hero-projeto figure img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Largura superior a 500 não mostra o hero mobile, apenas o desktop */
@media (width > 500px) {
	.hero-projeto .hero-img-mobile {
		display: none !important;
	}
}

/* Largura inferior ou igual a 500 não mostra o hero desktop, apenas o mobile */
@media (width <= 500px) {
	.hero-projeto .hero-img-desktop {
		display: none;
	}
}

/* Informações de cada projeto individual */
.grid-info-projeto {
	grid-template-columns: 1fr 1fr;
}

@media (width <= 950px) {
	/* Seleciona o avô do .grid-info-projeto para ficar vertical aos 950px*/
	div:has(div > .grid-info-projeto) {
		flex-direction: column;
	}
	.grid-info-projeto {
		grid-template-columns: repeat(4, 1fr);
	}
}

@media (width < 600px) {
	.grid-info-projeto {
		grid-template-columns: 1fr 1fr;
	}
}

.servicos a:first-child {
	background-color: var(--wp--preset--color--text-base);
	color: var(--wp--preset--color--base);
	border: 1px solid var(--wp--preset--color--text-base);
	border-radius: 30px;
	padding-top: 4px;
	padding-bottom: 5px;
	padding-inline: 15px;
}

.servicos a {
	border: 1px solid var(--wp--preset--color--text-base);
	border-radius: 30px;
	padding-top: 4px;
	padding-bottom: 5px;
	padding-inline: 15px;
}

.servicos span {
	width: 15px;
	display: inline-block;
}

/* Estilo da galeria de cada projeto individual */
.filebird-block-filebird-gallery {
	max-width: var(--wp--style--global--wide-size); /*1600px*/
}
.filebird-block-filebird-gallery li {
	margin-bottom: 35px !important;
}

@media (width <= 500px) {
	.filebird-block-filebird-gallery li {
		margin-bottom: 20px !important;
	}
}

.filebird-block-filebird-gallery img {
	border-radius: 30px;
}

/* Largura superior a 500 não mostra a galeria mobile, apenas a desktop */
@media (width > 500px) {
	.filebird-block-filebird-gallery:nth-child(2) {
		display: none;
	}
}

/* Largura inferior ou igual a 500 não mostra a galeria desktop, apenas a mobile */
@media (width <= 500px) {
	div:has(.filebird-block-filebird-gallery:nth-of-type(2))
		.filebird-block-filebird-gallery:nth-child(1) {
		display: none;
	}
}
/*#endregion*/

/*#region CONTACTOS PAGE*/
/* Grid contactos */
.grid-contactos {
	grid-template-columns: 2fr 4fr !important;
}

@media (width < 1000px) {
	.grid-contactos {
		grid-template-columns: 3fr 4fr !important;
	}
}

@media (width < 740px) {
	.grid-contactos {
		grid-template-columns: 1fr !important;
	}
}

/* GRID localização RUDA */
@media (width < 1000px) and (width > 600px) {
	.grid-localizacao-ruda {
		grid-template-columns: 1fr 1fr !important;
	}

	.grid-localizacao-ruda div:first-child {
		grid-row: 2;
		grid-column: 1 / -1;
	}
}

@media (width <= 600px) {
	.grid-localizacao-ruda {
		grid-template-columns: 1fr !important;
	}
	.grid-localizacao-ruda div:first-child {
		grid-row-start: 3;
	}
	.grid-localizacao-ruda div:nth-child(3) {
		grid-row-start: 1;
	}
}

/* Formulário contactos */
#form-contactos ul li a span {
	display: none;
}

#form-contactos.wsf-form ul.wsf-group-tabs.wsf-steps.wsf-steps-success > li > a::before {
	color: var(--wp--preset--color--text-soft);
}

#form-contactos.wsf-form {
	--wsf-form-color-success: var(--wp--preset--color--accent);
	--wsf-group-li-color-focus: var(--wp--preset--color--background-hard);
	--wsf-field-box-shadow-color-focus: var(--wp--preset--color--background-hard);
	--wsf-field-box-shadow-width-focus: 1px;
}

#form-contactos.wsf-form input.wsf-field,
#form-contactos.wsf-form textarea.wsf-field {
	border: 1px solid var(--wp--preset--color--background-hard);
	border-radius: 10px;
}

#form-contactos.wsf-form input.wsf-field:focus,
#form-contactos.wsf-form textarea.wsf-field:focus {
	box-shadow: 0 0 0 2px var(--wp--preset--color--background-hard);
}

#form-contactos.wsf-form button.wsf-button {
	background-color: var(--wp--preset--color--accent);
	border-color: var(--wp--preset--color--accent);
	border-radius: 30px;
	color: var(--wp--preset--color--text-base);
}

#form-contactos.wsf-form button.wsf-button:is(:hover, :focus, :active) {
	background-color: var(--wp--preset--color--text-base);
	border-color: var(--wp--preset--color--text-base);
	color: var(--wp--preset--color--accent);
	box-shadow: 0 0 0 0px;
}

/* Para corrigir pequena margem na parte inferior do mapa  */
.wp-block-gmap-gmap-block.gmap-block-ajzjt7hq {
	height: 350px;
}
.gmap-block-ajzjt7hq.wp-block-gmap-gmap-block iframe {
	height: 100%;
}
/*#endregion*/

/*#region OUTDOOR PAGE*/
@media (width < 550px) {
	.hero-outdoor {
		padding-top: 200px !important;
	}
}

/* Coloca por trás a div (tem margem negativa para puxar acima) que vem a seguir ao hero do outdoor, para se ver o border radius do outdoor */
.hero-outdoor {
	z-index: 10;
}

@keyframes animacao-botao-outdoor {
	0%,
	100% {
		transform: rotate(0deg);
		transform-origin: 50% 50%;
	}

	10% {
		transform: rotate(5deg);
	}

	20%,
	40%,
	60% {
		transform: rotate(-10deg);
	}

	30%,
	50%,
	70% {
		transform: rotate(10deg);
	}

	80% {
		transform: rotate(-5deg);
	}

	90% {
		transform: rotate(5deg);
	}
}

.botao-outdoor {
	animation: animacao-botao-outdoor 2s ease infinite normal;
}

.botao-outdoor {
	position: absolute;
	width: 170px;
	right: 8%;
	bottom: 34%;
}

@media (width < 1500px) {
	.botao-outdoor {
		bottom: 32%;
	}
}

@media (width < 1300px) {
	.botao-outdoor {
		width: 160px;
		bottom: 32%;
	}
}
@media (width < 1250px) {
	.botao-outdoor {
		width: 160px;
		bottom: 31%;
	}
}
@media (width < 1100px) {
	.botao-outdoor {
		width: 150px;
		right: 7%;
		bottom: 31%;
	}
}

@media (width < 1000px) {
	.botao-outdoor {
		width: 140px;
		bottom: 30%;
	}
}
@media (width < 900px) {
	.botao-outdoor {
		width: 130px;
		right: 6%;
		bottom: 29%;
	}
}
@media (width < 750px) {
	.botao-outdoor {
		bottom: 28%;
	}
}
@media (width < 700px) {
	.botao-outdoor {
		width: 120px;
		right: 5%;
	}
}
@media (width < 650px) {
	.botao-outdoor {
		width: 110px;
	}
}

@media (width < 600px) {
	.botao-outdoor {
		width: 100px;
	}
}

@media (width < 550px) {
	.botao-outdoor {
		width: 90px;
	}
}
@media (width < 500px) {
	.botao-outdoor {
		width: 80px;
		bottom: 28%;
	}
}
@media (width < 450px) {
	.botao-outdoor {
		width: 70px;
	}
}
@media (width < 380px) {
	.botao-outdoor {
		width: 60px;
	}
}

.botao-preco-dia {
	z-index: 20;
	animation: scale-up-center 1s cubic-bezier(0.39, 0.575, 0.565, 1) infinite alternate both;
}

@keyframes scale-up-center {
	0% {
		transform: scale(1);
	}
	100% {
		transform: scale(1.1);
	}
}

@media (width < 1000px) {
	.grid-vantagens-outdoor {
		grid-template-columns: 1fr 1fr 1fr 1fr !important;
	}
	.grid-vantagens-outdoor div:first-child {
		grid-row: span 2;
	}
}

@media (width < 750px) {
	.grid-vantagens-outdoor {
		grid-template-columns: 1fr 1fr !important;
	}
	.grid-vantagens-outdoor div:first-child {
		grid-row: 1/2;
	}
}

@media (width < 1024px) and (width >= 500px) {
	.grid-localizacao {
		grid-template-columns: 3fr 2fr;
	}
	.grid-localizacao div:nth-of-type(2) {
		grid-column-start: 2;
		grid-row-start: 1;
	}
	.grid-localizacao div:nth-of-type(1) {
		grid-column: 1 / 3;
		grid-row-start: 2;
	}
}

@media (width < 500px) {
	.grid-localizacao {
		grid-template-columns: 1fr;
	}
}
/*#endregion*/

/*#region UTILITARY CLASSES */
.tags {
	border-radius: 30px;
	border: 1px solid var(--wp--preset--color--background-hard);
	padding-inline: 10px;
	padding-block: 3px;
	font-size: 0.7rem !important;
}

* {
	transition: background-color 0.25s ease, border-color 0.25s, grid-template-columns 0.25s,
		grid-template-rows 0.3s ease, box-shadow 0.25s;
}
.box-shadow-hover:hover {
	box-shadow: 4px 4px 4px 2px var(--wp--preset--color--border);
}

@media (max-width: 768px) {
	.hide-on-mobile {
		display: none !important;
	}
}

.accent-button-hover:hover > a {
	background-color: var(--wp--preset--color--text-base);
	color: var(--wp--preset--color--accent);
}

.text-soft {
	color: var(--wp--preset--color--text-soft);
}

.weight-600 {
	font-weight: 600;
}
.weight-normal {
	font-weight: normal;
}
.sf-light {
	font-family: "SF Pro Display Light";
}
.no-underline a {
	text-decoration: none;
	outline: none;
}

.position-relative {
	position: relative;
}
/*#endregion  */