/*
 Theme Name:   Villa Sandoval 
 Theme URI:    https://generatepress.com
 Description:  Villa Sandoval's GeneratePress Child
 Author:       Roberto Enrique Briceno Garcia
 Author URI:   https://robertobriceno.eu
 Template:     generatepress
 Version:      0.1
*/

/* For browsers that support clamp  */
@supports (font-size: clamp(1rem, 1vi, 1rem)) {
  :root {
		--font-size-sm: clamp(0.9rem, 0.07vi + 0.88rem, 0.94rem);
		--font-size-base: clamp(1rem, 0.24vi + 1.07rem, 1.25rem);
		--font-size-md: clamp(1.41rem, 0.5vi + 1.28rem, 1.67rem);
		--font-size-lg: clamp(1.76rem, 0.88vi + 1.54rem, 2.22rem);
		--font-size-xl: clamp(2.2rem, 1.45vi + 1.83rem, 2.96rem);
		--font-size-xxl: clamp(2.75rem, 2.29vi + 2.18rem, 3.95rem);
		--font-size-xxxl: clamp(3.43rem, 3.48vi + 2.56rem, 5.26rem);
	  
	  	--padding-d: clamp(1rem, 0.848rem + 0.758vw, 1.5rem);
  }
}
/* For browsers that don't support clamp */
@supports not (font-size: clamp(1rem, 1vi, 1rem)) {
  :root {
		--font-size-sm: 0.9rem;
		--font-size-base: 1.13rem;
		--font-size-md: 1.41rem;
		--font-size-lg: 1.76rem;
		--font-size-xl: 2.2rem;
		--font-size-xxl: 2.75rem;
		--font-size-xxxl: 3.43rem;
	 
	  	--padding-d: 1.5rem;
  }
  @media screen and (min-width: 1240px) {
    :root {
			--font-size-sm: 0.94rem;
			--font-size-base: 1.25rem;
			--font-size-md: 1.67rem;
			--font-size-lg: 2.22rem;
			--font-size-xl: 2.96rem;
			--font-size-xxl: 3.95rem;
			--font-size-xxxl: 5.26rem;
		
			--padding-d: 1.5rem;
    }
  }
}

/* Fluid Typography Scale */

h1, .fs-h1 {
	font-size: clamp(3.375rem, 3.1832rem + 0.767vw, 3.7969rem);
}
h2, .fs-h2 {
	font-size: clamp(2.5313rem, 2.3874rem + 0.5753vw, 2.8477rem);
}
h3, .fs-h3 {
	font-size: clamp(2.1094rem, 1.9895rem + 0.4794vw, 2.373rem);
}
h4, .fs-h4 {
	font-size: clamp(1.6875rem, 1.5916rem + 0.3835vw, 1.8984rem);
}
h5, .fs-h5 {
	font-size: clamp(1.4063rem, 1.3263rem + 0.3196vw, 1.582rem);
}
h6, .fs-h6 {
	font-size: clamp(1.2656rem, 1.1937rem + 0.2876vw, 1.4238rem);
}
p, .fs-p {
	font-size: clamp(1rem, 0.9432rem + 0.2273vw, 1.125rem);
}

/*Overrides (Maybe put it in a separate file?) */

.site-header,
.is_stuck .inside-navigation .main-nav{
	padding-inline: var(--padding-d);
}

is:(h1, h2, h3, h4, h5, h6), .balance{
	text-wrap: balance;
}

p, blockquote, li {
	text-wrap: pretty;
}

p:last-child:last-of-type {
	margin-bottom:0px;
}


/*Navigation Tweaks*/

/* Mobile merged header */
.site-logo.mobile-header-logo img{
	height:70px!important;
}

@media (max-width:1024px){
	.page-hero.special-merge-hero{
		padding-top:70px;
	}
}

/* Sticky Color + Size */

.is_stuck .inside-navigation{
	background: var(--base-3);
}

@media (min-width:1024px){
	.is_stuck .inside-navigation{
		padding-top:40px;
		padding-bottom:40px
	}
}

.main-navigation.sticky-navigation-transition .navigation-branding img{
	width:150px;
	height:auto;
}

/* Transitions */

.transition {
	transition: all .25s ease-in-out;
}

/* Borrowed from Bootstrap */ 
/* Tutorial: https://youtu.be/HBriBrnRlQE?si=DLiSXEiBHt6lw91l */ 
/* Make sure you only have ONE link inside your card 😅 or this will not work!  */ 

.stretch-link:hover{
	opacity: 0.8;
}

.stretch-link{
	position: relative;
}

.stretch-link a::after{
	content: '';
	position: absolute;
	inset: 0;
}

.stretch-link a:is(:focus-visible)::after{
	outline: 2px solid;
}

.stretch-link a:is(:hover, :focus){
	outline: none;
}

/* Hover Tweak for Main Menu Accessibility Stuff*/

#site-navigation ul.submenu{
	display:block;
}

#site-navigation li:hover .gp-icon svg{
	transform: rotate(180deg);
}

#site-navigation li:hover .submenu {
	visibility: visible;
}

/* nav links effect */
.main-navigation .menu > .menu-item > a::after {
    content: "";
    position: absolute;
    right: 0;
    left: 50%;
    bottom: 1px;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
    display: block;
    width: 0;
    height: 1px;
    background-color: var(--contrast-3);
    transition: 0.3s width ease;
}
.main-navigation .menu > .menu-item.current-menu-item > a::after,
.main-navigation .menu > .menu-item > a:hover::after {
    width: calc(100% - 40px);
}

/* Center Menu in Navigation */

@media(min-width: 1024px) {
    .inside-header>.site-branding,
    .inside-header>.navigation-branding,
    .inside-header>.site-logo,
    .site-branding-container,
    #site-navigation .navigation-branding .site-logo,
    #sticky-navigation .navigation-branding {
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        z-index: 1000;
    }

    #site-navigation {
        margin-left: unset !important;
        display: flex;
    }

    .site-header .main-navigation:not(#sticky-navigation) .inside-navigation {
        margin: unset;
    }

    #site-navigation,
    #primary-menu,
    .main-navigation .inside-navigation {
        flex: 1;
		min-width: 100%;
    }

    /* Change nth-child(#) to first item to right */
    .main-navigation ul li:nth-child(4)      
	  {
        margin-left: auto;
    }
	 .mmain-navigation ul li:first-child a      
	  {
        padding-left:0 !important;
    }
	.mmain-navigation ul li:last-child a      
	  {
        padding-right:0 !important;
    }
}

/*Header Video BG*/

.background-video #metaslider-id-161 { /* Replace with metaslider ID */
	/*position: fixed;*/
	left: 0;
	top: 0;
	z-index: 0;
	width: 100vw !important;
	height: 100vh !important;
	background: #fff;
}
.background-video #metaslider_container_161 img { /* Replace with metaslider ID */
	object-fit: cover;
	height: 100vh;
}

.background-video {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    opacity: 0.4;
	overflow: hidden;
}

.background-video-content {
    position: relative;
    z-index: 1;
}

/*video[poster] {
    object-fit: cover;
    width: 100%;
    height: 100%;
}*/

/*Metaslider Ken Burns Knock Off*/

.zoom-in-slideshow ul.slides li{
	overflow:hidden;
}

.zoom-in-slideshow ul.slides li img {
	transition: all 3s ease-in-out;
	transform: scale(1);
}
.zoom-in-slideshow ul.slides li.flex-active-slide img {
	transform: scale(1.03);
}

/* Scroll Icon Animation */

.scrolldown-icon {
  position: absolute;
  top: calc(100vh - 110px);
  left: calc(50% - 0px);
  width: 0;
  height: 40px;
  border: 1px solid var(--base-2);
  border-radius: 1px;
  animation: jumpInfinite 1.5s infinite;
}

.scrolldown-icon:after {
  content: " ";
  position: absolute;
  top: 20px;
  left: -8px;
  width: 16px;
  height: 16px;
  border-bottom: 2px solid var(--base-2);
  border-right: 2px solid var(--base-2);
  border-radius: 2px;
  transform: rotateZ(45deg);
}

@keyframes jumpInfinite {
  0% {
    margin-top: 0;
  }
  50% {
    margin-top: 20px;
  }
  100% {
    margin-top: 0;
  }
}

/*Lightbox BG*/

.pswp__bg {
  background: rgba(13, 27, 42, 0.8);
  backdrop-filter: blur(8px);
}

/* Breadcrumbs */

.inpage-breadcrumb {
  font-size: calc( var(--font-size-sm) * 0.9 );
  color: var(--contrast-3);
  text-transform: uppercase;
}

.inpage-breadcrumb a,.inpage-breadcrumb a:hover{
	color: var(--contrast-3);
	text-decoration: none !important;
}

.inpage-breadcrumb a:hover{
	color: var(--contrast-2);
}