/*
Theme Name: Sanviva
Author: Anders Feldinger
Description: A custom theme for Sanviva.com.
Text Domain: sanviva
Version: 0.1
*/


*, *::before, *::after {
  box-sizing: border-box;
}

body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}


a {
	text-decoration-thickness: 1px !important;
	text-underline-offset: .1em;
	transition-duration: .3s;
	transition-property: color, background-color;
}

a:is([href^='mailto:'], [href^='tel:']) {
	text-decoration: none;
}
a:is([href^='mailto:'], [href^='tel:']):hover {
	text-decoration: underline;
}

strong, b {
  font-weight: var(--wp--custom--font-weight--bold, bold);
}


/* 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;
}

/*
 * 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;
}


/*
 * Site wrapper and elements
 */

:where(.wp-site-blocks) > * {
	margin-block-start: 0;
	margin-block-end: 0;
}



/*
 * Define negative layout offset variables
 */

.is-layout-constrained > :where(:not(.alignleft):not(.alignright):not(.alignfull)) {
  --offset-left-to-full:  min( ( 100vw - var(--wp--style--global--content-size) ) / -2 , var(--wp--style--root--padding-left)  * -1 );
  --offset-right-to-full: min( ( 100vw - var(--wp--style--global--content-size) ) / -2 , var(--wp--style--root--padding-right) * -1 );

  --offset-left-to-wide:  min( ( min(100vw, var(--wp--style--global--wide-size)) - var(--wp--style--global--content-size) ) / -2, var(--wp--style--root--padding-left)  * -1 );
  --offset-right-to-wide: min( ( min(100vw, var(--wp--style--global--wide-size)) - var(--wp--style--global--content-size) ) / -2, var(--wp--style--root--padding-right) * -1 );

  --offset-left-to-content:  calc(var(--wp--style--root--padding-left)  * -1);
  --offset-right-to-content: calc(var(--wp--style--root--padding-right) * -1);
}
.is-layout-constrained > .alignwide {
  --offset-left-to-full:  min( ( 100vw - var(--wp--style--global--wide-size) ) / -2 , var(--wp--style--root--padding-left)  * -1 );
  --offset-right-to-full: min( ( 100vw - var(--wp--style--global--wide-size) ) / -2 , var(--wp--style--root--padding-right) * -1 );

  --offset-left-to-wide:  calc(var(--wp--style--root--padding-left)  * -1);
  --offset-right-to-wide: calc(var(--wp--style--root--padding-right) * -1);
}
.has-global-padding > .alignfull {
  --offset-left-to-full:  0px;
  --offset-right-to-full: 0px;
}


/**
 * Inline SVG
 */
.inline-svg svg,
svg.inline-svg,
svg {
  fill: currentColor;
}
svg[data-inline] {
  max-width: 100%;
}



.has-location-marker:before {
  content: '';
  display: inline-block;
  vertical-align: middle;
  /* position: absolute; */

  position: relative;
  margin-top: -.2em;
  /* margin-left: -1.2em; */
  
  height: 1em;
  width: .83em;

  background-image: url('assets/img/location-marker.svg');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: 0 0;
}


/**
 * Site header 
 */

:root .site-header--wrapper {
  padding-top: var(--wp--preset--spacing--40);
  padding-bottom: var(--wp--preset--spacing--40);

  font-size: var(--wp--preset--font-size--x-small);

}

/**
 * Site footer 
 */

:root .site-footer--wrapper {
	margin-block-start: 0;
  background-color: var(--wp--preset--color--purple-dark);
  background-image: var(--wp--preset--gradient--purple-dark);
  color:  var(--wp--preset--color--white);
  font-size: var(--wp--preset--font-size--small);
}

:root .site-footer--primary {
  padding-top: var(--wp--preset--spacing--50);
  padding-bottom: var(--wp--preset--spacing--40);

}
:root .site-footer--secondary {
  margin-block-start: 0;
  border-top: 1px solid var(--wp--preset--color--purple-light);
  padding-top: var(--wp--preset--spacing--40);
  padding-bottom: var(--wp--preset--spacing--40);

  font-size: var(--wp--preset--font-size--x-small);
}

:root .site-footer--branding {
  /* max-width: 25rem; */
}

:root .site-footer--cols {
  gap: 0;

}
:root .site-footer--cols > * {
  padding-top: var(--wp--preset--spacing--40);
  padding-bottom: var(--wp--preset--spacing--40);
  
}
:root .site-footer--cols > :not(:first-child) {
  padding-left: var(--wp--preset--spacing--60);
  
}
:root .site-footer--cols > :not(:last-child) {
  padding-right: var(--wp--preset--spacing--60);
  border-right: 1px solid var(--wp--preset--color--purple-light);
}


/**
 * Sticky header and footer
 */

:root {
	--header-height: 0px;
	--footer-height: 200px;
	--advance-page-top: 0px;
}	

.wp-site-blocks > header {
	top: 0
}
body.admin-bar {
	--advance-page-top: var(--wp-admin--admin-bar--height, 0);
}
@media screen and (max-width:600px) {
	body.admin-bar:not(.scroll-top) {
		--advance-page-top: 0;
	}
}


.wp-site-blocks > header {
	position: sticky;
	width: 100%;
	top: var(--advance-page-top, 0);
	z-index: 10;
  background-color: var(--wp--preset--color--white);
	color: var(--wp--preset--color--purple-dark);
  
	/* transition: .3s all; */
	transition-duration: .3s;
	transition-property: color, background-color, transform;
}


.wp-site-blocks > header.hide {
	transform: translateY(-100%);
}

body:is(.scroll-not-top) .wp-site-blocks > header {
  background-color: var(--wp--preset--color--white) !important;
  color: var(--wp--preset--color--purple-dark) !important;
}


/* fixed header on page-template-page-no-title */
body.page-template-page-no-title .wp-site-blocks > header {
	position: fixed;
  background-color: transparent;
}
body.page-template-page-no-title:is(.has-light-menu) .wp-site-blocks > header {
  color: var(--wp--preset--color--white);
}





/**
 * General transitions
 */
 
.has-transition {
	opacity: 0;
	transform: translate(0, -20px);
}

.has-transition.wp-block-image {
	transform: translate(0, 0);
}

.has-transition.transition-complete {
	opacity: 1;
	transform: translate(0, 0);
	transition: transform 0.6s, opacity 0.9s;
	transition-delay: 0s;
	transition-timing-function: ease-out;
}



h1.has-transition,
h2.has-transition,
h3.has-transition,
h4.has-transition {
    opacity: 0;
    mask-image: linear-gradient(to top, #0000 25%, #000 75%);
    mask-size: 100% 500%;
}

h1.has-transition.transition-complete,
h2.has-transition.transition-complete,
h3.has-transition.transition-complete,
h4.has-transition.transition-complete {
    animation-name: text-wipe;
    animation-duration: 2;
    animation-timing-function: ease-out;
    animation-iteration-count: 1;
}


/**
 * Safari has issues if you try to animate
 * mask-size, so we set that on the element
 * and only translate the position.
 */
@keyframes text-wipe {
    0% {
        opacity: 1;
        -webkit-mask-position: 0 100%;
    }

    100% {
        opacity: 1;
        -webkit-mask-position: 0 0%;
    }
}



/**
 * USP connector module
 */

.sanviva-usp-connnector {
  --connector-sides: max((100% - 410px) / 2, 20px);
  --connector-center: min(30vw, 180px);
  --connector-logo: min(38vw, 187px);
  
  --mask-center-radius: calc((var(--connector-logo) / 2) + 5px);
  
  position: relative;
  opacity: 1;
  transform: unset;

}

.sanviva-usp-connnector:before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;

  background-image: url(assets/img/sanviva-usp-connector-logo.svg), url(assets/img/sanviva-usp-connector-lines-vertical.svg);
  background-repeat:  no-repeat;
  background-position: 50% 50%;
  background-size: var(--connector-logo) var(--connector-logo), min(100%, 470px) auto;

  mask-image: 
    radial-gradient(circle at center, rgba(0, 0, 0, 1) 0, rgba(0, 0, 0, 1) var(--mask-center-radius), rgba(0, 0, 0, 0) var(--mask-center-radius)),
    linear-gradient(to bottom, rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, 1) 50px, rgba(0, 0, 0, 1) calc(100% - 50px), rgba(0, 0, 0, 0) 100%);
  mask-size: auto auto, 100% 100%;
  mask-position: 50% 50%;
  mask-repeat: no-repeat;
}

.sanviva-usp-connnector.has-transition:before {
  transition: mask-size 1s ease-out;
  transition-delay: 300ms;
  mask-size: auto auto, 100% 10px;
}
.sanviva-usp-connnector.has-transition.transition-complete:before {
  mask-size: auto auto, 100% 100%;
}


.sanviva-usp-connnector > .wp-block-column {
  position: relative;
  align-content: center;
  text-align: center;
}
.sanviva-usp-connnector > .wp-block-column:nth-child(1) {
  padding: 40px var(--connector-sides) var(--connector-center) var(--connector-sides);
}
.sanviva-usp-connnector > .wp-block-column:nth-child(2) {
  padding: var(--connector-center) var(--connector-sides) 40px var(--connector-sides);
}

.sanviva-usp-connnector > .wp-block-column:nth-child(n+3) { 
  display: none;
}


@media (min-width: 782px) {
  .sanviva-usp-connnector {
    --connector-logo: 187px;
  }
  .sanviva-usp-connnector:before {
    background-image: url(assets/img/sanviva-usp-connector-logo.svg), url(assets/img/sanviva-usp-connector-lines.svg);
    background-size: auto auto;

    mask-image: 
      radial-gradient(circle at center, rgba(0, 0, 0, 1) 0, rgba(0, 0, 0, 1) var(--mask-center-radius), rgba(0, 0, 0, 0) var(--mask-center-radius)),
      linear-gradient(to right, rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, 1) 50px, rgba(0, 0, 0, 1) calc(100% - 50px), rgba(0, 0, 0, 0) 100%);
  }
  
  .sanviva-usp-connnector.has-transition:before {
    mask-size: auto auto, 10px 100%;
  }

  .sanviva-usp-connnector > .wp-block-column {
    height: 470px;
  }
  .sanviva-usp-connnector > .wp-block-column:nth-child(1) {
    padding: 50px 120px 50px 0;
  }
  .sanviva-usp-connnector > .wp-block-column:nth-child(2) {
    padding: 50px 0 50px 120px;
  }
}

/**
 * Logo backgrounds
 */
.has-gray-light-gradient-background.has-gray-light-logo-background-image {
  background-image: url(assets/img/bg-logo-clipped-gray-light.svg), var(--wp--preset--gradient--gray-light) !important;
  background-repeat: no-repeat !important;
  background-position: calc(50% + 300px) 100%, 0 0 !important;
  background-size: contain, auto !important;
 }
.has-gray-light-gradient-background.has-gray-medium-logo-background-image {
  background-image: url(assets/img/bg-logo-clipped-gray-medium.svg), var(--wp--preset--gradient--gray-light) !important;
  background-repeat: no-repeat !important;
  background-position: calc(50% + 300px) 100%, 0 0 !important;
  background-size: contain, auto !important;
 }