/*=====
Theme Name: Rifugio
Author: weco.digital
Author URI: https://weco.digital/
Description: A custom WordPress theme developed with ♥ by weco.digital, specifically designed for the Rifugio website. All rights reserved. This theme is not intended for redistribution, modification, or resale.
Version: 1.0.0
Requires at least: 5.0
Tested up to: 6.6.1
Requires PHP: 7.0
License: Proprietary - All Rights Reserved
License URI: https://weco.digital/license
Text Domain: rifugio
Tags: custom, modern, responsive, SEO-friendly, accessible
=======*/

@import url('https://fonts.googleapis.com/css2?family=Parkinsans:wght@300..800&display=swap');

/* BASIC */

:root {
	--black: #000;
	--white: #ffffff;
	--red: #f16439;
	--orange: #ff873c;
	--blue: #4a44ce;
	--pink: #FEC5FC;
	--pink-alt: #F8C1FD;
	--text-extra-small: clamp(16px, 1.25vw, 20px);
	--text-small: clamp(18px, 1.5vw, 24px);
	--text-medium: clamp(26px, 3vw, 34px);
	--text-big: clamp(26px, 3vw, 50px);
	interpolate-size: allow-keywords;
}

::-moz-selection {
	color: var(--white);
	background: var(--black);
}
  
::selection {
	color: var(--white);
	background: var(--black);
}

.nojq  {
	display: none;
}

* {
	/* border: 1px solid blue; */
	margin: 0;
	padding: 0;
	-webkit-tap-highlight-color: rgba(0,0,0,0);
}

body,
html {
	overflow-x:hidden;
}

body {
	width: 100%;
	height: 100%;
	font-family: "Parkinsans", sans-serif;
    font-weight: 300;
    font-style: normal;
	color: var(--black);
	background-color: var(--white);
	font-size: 18px;
	letter-spacing: .5px;
	margin: 0;
	padding: 0;
	transition: background-color .15s;
}

h1,
h2,
h3,
h4,
h5,
h6 {
	font-weight: 300;
	font-family: "Parkinsans", sans-serif;
	text-wrap: balance;
}

h1 {
	font-size: 50px;
	letter-spacing: -3%;
}

h2 {
	font-size: 18px;
	letter-spacing: -3%;
}

h3 {  
	font-size: 26px;
	letter-spacing: -3%;
}

h4 {  
	font-size: 22px;
}

h5 {  
	font-size: 20px;
}

h6 {  
	font-size: 18px;
}

p {
	font-family: "Parkinsans", sans-serif;
}

b,
strong {
	font-weight: 500;
}

a {
	color: var(--black);
}

img {
	display: block;
	object-fit: cover;
	width: 100%;
}

.char {
	display: inline-block;
}

.navigation {
	position: fixed;
	inset: 0 0 auto 0;
	padding: 20px 30px;
	z-index: 20;
	
	width: calc(100% - 60px);
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: space-between;

	font-size: var(--text-small);

	@media (max-width:900px) {
		& {
			padding: 10px 10px 10px 20px;
            width: calc(100vw - 30px);
		}
	}

	.logo {
		display: block;
		width: 150px;
		height: fit-content;

		path {
			stroke: var(--black);
			stroke-dashoffset: 200;
			stroke-dasharray: 200;
			animation: path 1.5s steps(6) forwards;
		}
	
		path:nth-child(-n + 10) {
			animation: path-reverse 1s steps(6) forwards;
		}
	
		path:nth-child(1) { animation-delay: .45s }
		path:nth-child(2) { animation-delay: .5s }
		path:nth-child(3) { animation-delay: .55s }
		path:nth-child(4) { animation-delay: .6s }
		path:nth-child(5) { animation-delay: .65s }
		path:nth-child(6) { animation-delay: .7s }
		path:nth-child(7) { animation-delay: .75s }
		path:nth-child(8) { animation-delay: .8s }
		path:nth-child(9) { animation-delay: .85s }
		path:nth-child(10) { animation-delay: .9s }
		
	}

	ul {
		font-weight: 400;
		display: flex;
		flex-direction: row;
		align-items: center;
		gap: 1rem;

		@media (max-width:900px) {
			& {
				display: none;
			}
		}

		li {
			list-style: none;
			opacity: 0;

			a {
				text-decoration: none;
			}
		}

		svg {
			display: block;
			width: calc(50px + 1vw);
			height: fit-content;

			path {
				stroke-dashoffset: 300;
				stroke-dasharray: 300;
				stroke-width: 3px;
				stroke: var(--black);
			}
		}
	}

	.button {
		font-weight: 400;
		position: relative;
		opacity: 0;

		@media (max-width:900px) {
			& {
				font-weight: 500;
			}
		}

		svg {
			display: block;
			width: calc(130px + 1vw);
			height: 100%;
            padding: .1rem .35rem;
			margin-top: .55rem;

			path {
				stroke-width: 3px;
				stroke: var(--black);
				stroke-dashoffset: -1000;
                stroke-dasharray: 1000;
			}
		}

		.text {
			position: absolute;
			inset: 0;
			margin: auto;
			width: fit-content;
			height: fit-content;
			color: var(--black);
		}

		img {
			position: absolute;
			inset: 0;
			margin: auto;
			transform: translateY(5px);
			width: calc(140px + 1vw);
			z-index: -1;
		}

		&:hover {
			svg {
				path {
					stroke-dashoffset: 0;
				}
			}
		}
	}
}

.darkMode {
	color: var(--white);
	background-color: var(--blue);

	.navigation {
		.logo {
			path {
				stroke: var(--white);
			}		
		}
	
		ul {
			li {
				a {
					color: var(--white);
				}
			}
	
			svg {
				path {
					stroke: var(--white);
				}
			}
		}
	}
}

.pinkMode {
	background-color: var(--pink-alt);
}

@keyframes path {
	0%,20% {
	stroke-dashoffset: -100;
	}
	100% {
	stroke-dashoffset: 0;
	}
}

@keyframes path-reverse {
	0%,20% {
	stroke-dashoffset: 200;
	}
	100% {
	stroke-dashoffset: 0;
	}
}

.newNavigation {
	position: fixed;
	inset: 0 0 auto 0;
	padding: 20px 30px;
	z-index: 20;
	
	width: calc(100% - 60px);
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: space-between;

	font-size: var(--text-small);

	transform: translateY(-100%);
	transition: transform .5s;

	@media (max-width:900px) {
		& {
			padding: 10px 10px 10px 20px;
            width: calc(100vw - 30px);
		}
	}

	.logo {
		display: block;
		width: 150px;
		height: fit-content;

		path {
			stroke: var(--black);
			stroke-dashoffset: 200;
			stroke-dasharray: 200;
			animation: path 1.5s steps(6) forwards;
		}

		@media (max-width:900px) {
			& {
				width: 120px;
			}
		}
	}

	ul {
		font-weight: 400;
		display: flex;
		flex-direction: row;
		align-items: center;
		gap: 1rem;
		padding: .75rem 1.25rem;
		border-radius: 10px;
		border: 1px solid var(--black);
		background-color: #ffffffab;
        backdrop-filter: blur(20px);

		@media (max-width:900px) {
			& {
				display: none;
			}
		}

		li {
			list-style: none;

			a {
				text-decoration: none;
			}
		}

		svg {
			display: block;
			width: calc(50px + 1vw);
			height: fit-content;

			path {
				stroke-width: 3px;
				stroke: var(--black);
			}
		}
	}

	.button {
		font-weight: 400;
		position: relative;

		@media (max-width:900px) {
			& {
				font-weight: 500;
			}
		}

		svg {
			display: block;
			width: calc(130px + 1vw);
			height: 100%;
            padding: .1rem .35rem;
			margin-top: .55rem;

			path {
				stroke-width: 3px;
				stroke: var(--black);
				stroke-dashoffset: -1000;
                stroke-dasharray: 1000;
			}
		}

		.text {
			width: fit-content;
			height: fit-content;
			color: var(--black);
		}

		img {
			position: absolute;
			inset: 0;
			margin: auto;
			transform: translateY(5px);
			width: calc(140px + 1vw);
			z-index: -1;
		}

		&:hover {
			svg {
				path {
					stroke-dashoffset: 0;
				}
			}
		}
	}
}

.loaded {
	.newNavigation {
		transform: translateY(0);
	}
}

.placeholder {
    min-height: 100vh;
}

.transitionIn {
	position: fixed;
	inset: 0;
	object-fit: cover;
	z-index: 10000;
	height: 100svh;
}