/***** General Styles *****/
:root {
  --font-size: clamp(1rem, -0.875rem + 6.333vw, 1.3rem);
  --font-size--h2: clamp(2rem, -0.875rem + 8.333vw, 2.5rem);
}

html {
	box-sizing: border-box;
	scroll-behavior: smooth;
}

body {
  font-size: var(--font-size);
}

p {
  font-size: var(--font-size);
  letter-spacing: .03rem;
  /* line-height: 2.2rem; */
}

main {
  margin-block-start: 0;
}

section.wp-block-cover, h2, section:focus-within {
	scroll-margin-top: 130px;
}

h2 {
  font-size: var(--font-size--h2);
  padding-top: 2rem;
}

.wp-site-blocks {
  --wp--custom--gap--horizontal: 0px;
  padding-inline: 0;
}


.custom-logo-link {
  display: block;
}

.site-header.wp-block-group.alignwide {
  padding: 1rem 2rem;
}

.wp-block-group.site-brand.is-layout-flex.wp-block-group-is-layout-flex {
  width: 30%;
}

.nav-primary ul {
  gap: unset;
}

.nav-primary ul li {
  padding-inline: .8rem;
}

.wp-block-navigation, .nav-primary a {
  /* padding-left: 15px; */
  /* padding-right: 15px; */
  text-transform: uppercase;
  font-size: clamp(.8rem, -0.875rem + 3.333vw, 1.2rem);
  font-weight: 600;
}

.nav-primary a:hover {
  color: rgba(var(--wp--preset--color--secondary), .2);
  box-shadow: 0px 11px 8px -9px var(--wp--preset--color--primary)
}

.nav-primary li:not(:last-child) {
  /* border-right: solid 2px var(--wp--preset--color--theme-secondary); */
}

.nav-primary li:not(:last-child)::after {
  border-right: solid 2px var(--wp--preset--color--secondary);
  content: '';
  position: absolute;
  height: 80%;
  top: 10%;
  right: calc(-1 * var(--wp--custom--gap--baseline) );
  right: -1px;
  transform: skewX(-45deg);
}

@media (max-width: 670px) {

  h2 {
    text-align: center;
  }

  .site-header.wp-block-group.alignwide {
    max-width:100vw;
    width: 100vw;
    padding-inline:0;
    justify-content: center;
    --wp--custom--gap--baseline: .8rem;
    padding-inline: 1rem;
  }

  .wp-site-blocks .site-header .wp-block-site-logo {
    margin-top: 0;
    margin-bottom: 0;
    flex-basis: 85%;
    text-align: center;
    max-width: 250px;
  }

  .wp-site-blocks .site-header .site-brand {
    display: contents;
  }

  .nav-primary {
    justify-content: center;
    --wp--custom--gap--baseline: 0;
  }

  .nav-primary ul li {
    padding-inline: .4rem;
  }

  .nav-primary li:not(:last-child)::after {
    /* right: 0; */
    transform: skewX(-35deg);
  }
}



/***** Welcome Section *****/
.welcome {
	padding-bottom: 8rem;
}

.welcome .wp-block-cover__image-background{
  background-position: 10% 50% !important;
}

.welcome-p:nth-of-type(2) {
	margin-top: 8rem;
}

.welcome p em {
  display: inline-block;
}

.welcome-lead {
  position: relative;
  font-size: clamp(1.8rem, -0.875rem + 8.333vw, 2.3rem);
  padding-top: 2rem;
}

.welcome-lead::after {
	content: '';
	position: absolute;
	background: var(--wp--preset--color--primary);
	opacity: .5;
	inset: -75px;
	transform: skew( 0deg, -5deg);
	z-index: -1;
}

/***** Welcome Section Contact Button *****/

.welcome .wp-block-buttons {
	position: absolute;
    /* inset: 0; */
    transform: skewY(-5deg);
    transform-origin: left;
    width: 100vw;
    max-width: 100vw;
    height: 250px;
    bottom: 0;
    left: 0;
    right: 0;
    margin: 0 auto;
}

.welcome .wp-block-buttons .button-contact {
	position: absolute;
	right: 10%;
	top: 100%;
	transform: translateY(-40%) skewY(5deg);
	
	left: 50%;
    top: 100%;
    width: 100%;
    max-width: 1200px;
    display: flex;
    margin: 0 auto;
    transform: translateY(-37%) skewY(5deg) translateX(-50%);
    justify-content: flex-end;
		padding-inline: 3rem;
}

.welcome .wp-block-buttons .button-contact .wp-block-button__link:hover {
	/* top: -5px; */
	position: relative;
	box-shadow:  0 0 200px rgba(230, 230, 230, 0.25);
	scale: 1.02;
  background: var(--wp--preset--color--primary);
  border: solid .01rem transparent;
  filter:brightness(1.1);
}

.welcome .wp-block-buttons .button-contact .wp-block-button__link {
	border-radius: 100%;
	width: 250px;
	height: 250px;
	top: 0;
	padding-top: 3rem;
  padding-inline: 0;
	transition: .3s;
  border: solid .01rem transparent;
}



/***** About Section *****/
.img-about {
	position: relative;
	width: 50%;
  box-shadow: 0px 0px 20px -10px white;
  border-radius: 100%;
  width: 300px;
  margin-top: 0;
  margin-bottom: 2rem;
  /* aspect-ratio: 1; */
}

@media screen and (max-width: 750px) {
	.img-about {
		width: 100%;
	}

	.img-about figure{
		width: 100%;
	}
}

/***** CV Download Button *****/
.btn-download a {
  padding: 1rem 3rem;
  border-radius: 4rem;
  transition: .3s;
}

.wp-block-file.btn-download a.wp-block-file__button.wp-element-button:hover {
  --wp--custom--button--color--background: var(--wp--preset--color--primary);
  background-color: var(--wp--preset--color--primary) ;
  box-shadow: 0 0 20px -5px white;
}


/***** Section Styling For Skewed Edges *****/
.wp-block-cover .wp-block-cover__inner-container, .wp-block-cover-image .wp-block-cover__inner-container {
	max-width: 900px;
	padding-bottom: 7vw;
	padding-inline: 2rem;
  margin-top: -2vw;
  
}

.wp-block-cover.skew-up, .wp-block-cover.skew-down {
	overflow: visible;
  margin-block-start: 0;
}

.skew-up span.wp-block-cover__background::before {
	content: '';
    display: block;
    background: inherit;
    position: absolute;
    /* top: -5rem; */
    /* inset: 0; */
    width: 100%;
    height: 9vw;
    transform: skewY(-5deg);
    transform-origin: left;
}

.skew-down span.wp-block-cover__background::before {
	content: '';
    display: block;
    background: inherit;
    position: absolute;
    /* top: -5rem; */
    /* inset: 0; */
    width: 100%;
    height: 9vw;
    transform: skewY(5deg);
    transform-origin: right;
}



/***** Contact Form *****/

.wpforms-submit-container {
	display: flex;
	justify-content: center;
}

div.wpforms-container-full .wpforms-field-label {
  font-weight: 400;
  font-size: var(--font-size);
}

div.wpforms-container-full input[type=date], div.wpforms-container-full input[type=datetime], div.wpforms-container-full input[type=datetime-local], div.wpforms-container-full input[type=email], div.wpforms-container-full input[type=month], div.wpforms-container-full input[type=number], div.wpforms-container-full input[type=password], div.wpforms-container-full input[type=range], div.wpforms-container-full input[type=search], div.wpforms-container-full input[type=tel], div.wpforms-container-full input[type=text], div.wpforms-container-full input[type=time], div.wpforms-container-full input[type=url], div.wpforms-container-full input[type=week], div.wpforms-container-full select, div.wpforms-container-full textarea {
  padding: 1.5rem;
  font-weight: 500;
}

.form-contact input, 
.form-contact select,
.form-contact textarea {
	background-color: #fff;
	border: 1px solid #ddd;
	color: #333;
	font-size: 18px;
	font-weight: 400;
	padding: 15px;
	width: 100%;
}


.form-contact button,
input[type="button"],
input[type="reset"],
input[type="submit"],
.site-container div.wpforms-container-full .wpforms-form input[type="submit"],
.site-container div.wpforms-container-full .wpforms-form button[type="submit"],
.button {
	background-color: #333;
	border: 0;
	border-radius: 50px;
	color: #fff;
	cursor: pointer;
	font-size: 1.1rem;
	font-weight: 500;
	padding: 0px 3rem;
	width: 300px;
	height: 50px;
	text-align: center;
	text-decoration: none;
	white-space: normal;
  transition: .3s;
	/* width: auto; */
}
div.wpforms-container-full button[type=submit] {
  height: auto;
  padding: 1.3rem;
  font-size: var(--font-size);
  font-weight: 400;
}
div.wpforms-container-full button[type=submit]:hover {
  box-shadow: 0 0 20px -5px white;
  background: var(--wp--preset--color--primary);
}