/* ==========================================================================
HELPERS CLASSES
========================================================================== */

:root {
   --icon-angle: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23000000'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
   --bs-gutter-y: 1.5rem;
}

.mark,
mark {
   padding: unset;
   color: unset;
   background-color: unset;
}

.row {
   gap: var(--bs-gutter-x) 0;
   margin-block-start: unset;
   >* {
      margin-block-start: unset;
   }
}

figure {
   margin: unset;
}

b,
strong {
   font-weight: 600;
}

body.no-scroll {
   overflow: hidden;
   padding-inline-end: 0px;
}

.overlay {
   position: fixed;
   width: 100%;
   height: 100%;
   z-index: 990;
   left: 0;
   top: 0;
   display: none;
}

summary {
   list-style: none;
}

summary::-webkit-details-marker {
   display: none;
}

.grecaptcha-badge {
   right: -300px !important;
}

h1,
h2,
h3,
h4,
h5,
h6,
p,
ul,
hr {
   margin-block-start: var(--wp--custom--main-size);
   margin-block-end: 0;
   &:first-child {
      margin-block-start: 0;
   }
}

a {
   outline: 0;
   &:hover,
   &:focus,
   &:active {
      outline: 0;
   }
}

.btn-close:focus,
.btn.active.focus,
.btn.active:focus,
.btn.focus,
.btn.focus:active,
.btn:active:focus,
.btn:focus {
   outline: 0;
   box-shadow: none;
}

.form-control:focus {
   border-color: none;
   box-shadow: none;
}

img {
   max-width: 100%;
   height: auto;
}

.map {
   line-height: 1;
   iframe {
      width: 100%;
   }
}

@media (max-width: 1199px) {
   .mobile-scroll::-webkit-scrollbar {
      display: none;
   }
   .mobile-scroll.list-posts.list-post-grid {
      width: 100vw;
      margin-inline: -1.5rem !important;
      padding-inline: 1.5rem;
      display: flex;
      flex-wrap: nowrap;
      gap: var(--wp--custom--main-size);
      overflow-x: auto;
      scrollbar-width: none;
      -webkit-overflow-scrolling: touch;
      -ms-overflow-style: -ms-autohiding-scrollbar;
      >* {
         flex: 1 0 min(90%, 400px);
      }
   }
}

.btn-link {
   --bs-btn-color: var(--wp--preset--color--primary);
   --bs-btn-hover-color: var(--wp--preset--color--primary);
   --bs-btn-active-color: var(--wp--preset--color--primary);
   --bs-btn-disabled-color: var(--wp--preset--color--primary);
   padding: 0;
   border: none;
   font-weight: 400;
   /* line-height: 1; */
}

@keyframes loaderRotation {
   0% {
      transform: rotate(0deg);
   }
   100% {
      transform: rotate(360deg);
   }
}

.rwmb-oembed-not-available {
   display: none;
}

.page-id-6 .main-content .alm-btn-wrap .alm-load-more-btn {
   position: fixed !important;
   top: 0 !important;
   left: 0 !important;
   width: 100% !important;
   height: 100vh !important;
   margin: 0 !important;
}

/* ==========================================================================
FORMS
========================================================================== */

::placeholder {
   opacity: 0.8;
}

label {
   display: block;
}

select,
input[type='text'],
input[type='url'],
input[type='date'],
input[type='file'],
input[type='email'],
input[type='tel'],
input[type='number'],
input[type='password'],
input[type='number'],
input[type='file'],
input[type='search'],
textarea {
   display: block;
   width: 100%;
   padding: .531rem .75rem;
   line-height: 1.5;
   background-color: #fff;
   background-clip: padding-box;
   -webkit-appearance: none;
   -moz-appearance: none;
   appearance: none;
   transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
   border: 1px solid var(--border-color);
   border-radius: var(--wp--custom--border-radius);
   color: var(--wp--preset--color--primary);
   &:focus {
      outline: none;
      box-shadow: none;
   }
   &[readonly] {
      background-color: #e9ecef;
      opacity: 1;
   }
}

textarea {
   height: 120px;
}

select {
   -moz-padding-start: calc(0.75rem - 3px);
   line-height: 1.5;
   background-repeat: no-repeat;
   background-position: right 0.75rem center;
   background-size: 1.25rem auto;
   background-image: var(--icon-angle);
}

button,
input[type='button'],
input[type='submit'] {
   border: none;
   background: transparent;
   text-decoration: none;
   vertical-align: middle;
   cursor: pointer;
   -webkit-user-select: none;
   -moz-user-select: none;
   user-select: none;
}

.wp-block-read-more,
.wp-block-post-navigation-link a,
.wp-block-post-excerpt__more-link,
.wp-element-button,
.wp-block-button.is-style-outline .wp-element-button,
.wp-block-button__link,
.navigation.post-navigation .nav-links a,
.btn,
button,
.woocommerce .button,
input[type='button'],
input[type='submit'] {
   text-align: center;
   padding: var(--wp--custom--button-padding-y) var(--wp--custom--button-padding-x);
   border-width: var(--wp--custom--button-border-width);
   border-style: var(--wp--custom--button-border-style);
   border-radius: var(--wp--custom--button-border-radius);
   transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

.navigation.post-navigation .nav-links a,
.wp-block-read-more,
.wp-block-post-navigation-link a,
.wp-block-post-excerpt__more-link,
.btn-custom,
.xoo-wsc-ft-btn,
.xoo-wsc-body a.xoo-wsc-btn,
.woocommerce .button,
input[type='button'],
input[type='submit'] {
   text-decoration: none;
   background-color: var(--wp--preset--color--primary);
   color: #FFF;
   border-color: var(--wp--preset--color--primary);
   &:hover {
      color: #FFF;
      background-color: var(--wp--custom--color-primary-hover);
      border-color: var(--wp--custom--color-primary-hover);
   }
}

.wp-block-button {
   &.is-style-outline {
      .wp-block-button__link {
         background-color: #FFF;
         color: #000;
         &:hover {
            border-color: var(--wp--preset--color--primary);
            background-color: var(--wp--preset--color--primary);
            color: #FFFFFF;
         }
      }
   }
}

.wp-block-button {
   &.is-style-alternative {
      .wp-block-button__link {
         background-color: var(--wp--preset--color--secondary);
         border-color: var(--wp--preset--color--secondary);
         color: #FFF;
         &:hover {
            background-color: var(--wp--custom--color-secondary-hover);
            border-color: var(--wp--custom--color-secondary-hover);
         }
      }
   }
}

.light-form {
   ::placeholder {
      opacity: 0.8;
      color: #FFF;
   }
   a,
   label {
      color: #FFF;
   }
   select,
   input[type='text'],
   input[type='url'],
   input[type='date'],
   input[type='file'],
   input[type='email'],
   input[type='tel'],
   input[type='number'],
   input[type='password'],
   input[type='number'],
   input[type='file'],
   input[type='search'],
   textarea {
      background: none;
      color: #FFF;
      border-color: currentColor;
   }
   select {
      background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23FFF'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
   }
}

/* ==========================================================================
OWL CAROUSEL
========================================================================== */

.owl-carousel {
   --owl-button-size: 2.813rem;
   position: relative;
   .owl-stage {
      display: flex;
      flex-wrap: wrap;
   }
   &.owl-theme {
      .owl-nav:not(.disabled) {
         margin-top: var(--wp--custom--main-size);
         text-align: unset;
         display: flex;
         justify-content: center;
         gap: calc(var(--wp--custom--main-size) * .5);
         button {
            span {
               display: none;
            }
            &.owl-next {
               transform: rotate(180deg);
            }
         }
         [class*="owl-"] {
            transition: background-color 0.3s ease-out;
            width: var(--owl-button-size);
            height: var(--owl-button-size);
            overflow: hidden;
            background-color: var(--wp--preset--color--primary);
            background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23FFFFFF'%3e%3cpath fill-rule='evenodd' d='M11.354 1.646a.5.5 0 0 1 0 .708L5.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0'/%3e%3c/svg%3e");
            background-position: center;
            background-repeat: no-repeat;
            background-size: 50%;
            margin: 0;
         }
         [class*="owl-"] {
            margin-block: 0;
         }
         [class*="owl-"]:hover {
            background-color: var(--wp--custom--color-primary-hover);
         }
      }
   }
}

.owl-theme {
   .owl-nav.disabled+.owl-dots {
      margin-top: var(--wp--custom--main-size);
   }
   .owl-dots {
      margin-top: var(--wp--custom--main-size);
      line-height: 1;
      .owl-dot {
         span {
            width: 1rem;
            height: 1rem;
            margin: .25rem;
            background: none;
            border: 1px solid var(--wp--preset--color--primary);
            transition: background .3s ease-out;
         }
         &.active,
         &:hover {
            span {
               background-color: var(--wp--custom--color-primary-hover);
               opacity: 1;
            }
         }
      }
   }
}

@media (min-width: 1400px) {
   .is-style-middle-arrows {
      padding: 0 calc(var(--wp--custom--main-size) * 2.5);
      position: relative;
      .owl-carousel {
         .owl-nav {
            margin-top: 0;
            position: absolute;
            top: calc(50% - 1.563rem);
            left: 0;
            width: 100%;
            pointer-events: none;
            justify-content: space-between;
            button {
               margin: 0;
               pointer-events: auto;
            }
            button.owl-prev {
               margin-left: calc(var(--owl-button-size) * -1 - 0.75rem);
            }
            button.owl-next {
               margin-right: calc(var(--owl-button-size) * -1 - 0.75rem);
            }
         }
      }
   }
}

/* ==========================================================================
FANCYBOX
========================================================================== */

.fancybox-bg {
   background: #FFF;
   color: #000;
}

.fancybox-is-open .fancybox-bg {
   opacity: 1;
}

.fancybox-button.disabled,
.fancybox-button.disabled:hover,
.fancybox-button[disabled],
.fancybox-button[disabled]:hover {
   color: #000;
}

.fancybox-button--close {
   width: auto;
   padding: var(--wp--custom--main-size);
   height: auto;
   font-size: 1rem;
}

.fancybox-infobar {
   font-size: 1rem;
   padding: var(--wp--custom--main-size);
   width: auto;
   height: auto;
   line-height: 1;
}

.fancybox-button,
.fancybox-button:hover {
   color: #000;
   background: none;
}

.fancybox-navigation .fancybox-button {
   transition: background-color 0.3s ease-out;
   overflow: hidden;
   width: 45px;
   margin-inline: var(--wp--custom--main-size) !important;
   &::after,
   &::before {
      content: '';
      position: absolute;
      top: calc(50% - 1px);
      left: 0;
      width: 100%;
      height: 2px;
      background-color: #000;
   }
   &::before {
      transform: rotate(90deg);
   }
   &.fancybox-button--arrow_left {
      &::before {
         display: none;
      }
   }
   div {
      background: none;
   }
}

/* ==========================================================================
NAVIGATION
========================================================================== */

.navigation {
   padding-block-start: calc(var(--wp--custom--main-size) * 2);
   .screen-reader-text {
      display: none;
   }
   &.pagination {
      .nav-links {
         width: 100%;
         display: flex;
         justify-content: center;
         gap: calc(var(--wp--custom--main-size) / 1.5);
         font-size: 1.375rem;
         line-height: 1;
      }
      a,
      span {
         border: none;
         transition: opacity 0.3s ease-out;
         text-decoration: none;
      }
      a:hover,
      span.current {
         opacity: 0.5;
      }
   }
   &.post-navigation {
      padding: var(--wp--custom--main-size);
      padding-block-start: calc(var(--wp--custom--main-size) * 2);
      .nav-links {
         max-width: var(--wp--style--global--content-size);
         margin: 0 auto;
         display: flex;
         justify-content: space-between;
         .nav-next {
            margin-inline-start: auto;
         }
         a {
            min-width: 130px;
         }
      }
   }
}

nav.woocommerce-pagination,
.wp-block-query-pagination {
   padding-top: calc(var(--wp--custom--main-size) * 2);
   margin-block-start: 0;
   line-height: 1;
   .page-numbers {
      list-style: none;
   }
   .page-numbers,
   .wp-block-query-pagination-numbers {
      display: flex;
      justify-content: center;
      gap: calc(var(--wp--custom--main-size) / 1.5);
      font-size: 1.375rem;
      a,
      span {
         border: none;
         color: var(--wp--preset--color--primary);
         transition: opacity 0.3s ease-out;
         text-decoration: none;
      }
      a:hover,
      span.current {
         opacity: 0.5;
      }
   }
   .wp-block-query-pagination-previous-arrow,
   .wp-block-query-pagination-next-arrow {
      margin: 0;
      font-size: 1.375rem;
      line-height: 1;
   }
}

.wp-block-query-pagination>.wp-block-query-pagination-next,
.wp-block-query-pagination>.wp-block-query-pagination-numbers,
.wp-block-query-pagination>.wp-block-query-pagination-previous {
   margin: 0;
}

@media (min-width: 1200px) {
   nav.woocommerce-pagination,
   .wp-block-query-pagination,
   .navigation {
      padding-block-start: calc(var(--wp--custom--main-size) * 3);
   }
}

/* ==========================================================================
404
========================================================================== */

.error404 {
   display: grid;
   grid-template-rows: auto auto 1fr auto;
   min-height: 100vh;
   main {
      place-content: center;
   }
   section {
      h1 {
         line-height: 1;
      }
      h2 {
         line-height: 1;
      }
   }
}

/* ==========================================================================
BLOG
========================================================================== */

.type-post,
.post {
   font-size: 1.125rem;
   border-top: 1px solid currentColor;
   a {
      text-decoration: none;
   }
   .wp-block-post-terms,
   .wp-block-post-date,
   p {
      font-family: var(--wp--preset--font-family--phonic);
      -webkit-font-smoothing: auto;
      font-weight: 400;
   }
   .wp-block-post-terms,
   .wp-block-post-date {
      font-size: 0.875rem;
   }
   .wp-block-post-title {
      font-size: clamp(1.375rem, 1.2639rem + 0.5556vw, 1.75rem);
      margin-block-start: calc(var(--wp--custom--main-size) * .7);
   }
   .wp-block-post-terms {
      a {
         text-decoration: none;
      }
   }
   .wp-block-post-meta {
      margin-block-start: 0;
      align-items: center;
      display: flex;
      gap: var(--wp--custom--main-size);
      .btn-plus {
         margin-inline-start: auto;
      }
   }
   .wp-block-post-content {
      margin-block-start: calc(var(--wp--custom--main-size) * .4);
   }
   .wp-block-post-featured-image {
      margin-block-start: var(--wp--custom--main-size);
      a {
         display: block;
      }
   }
   .wp-block-post-featured-image-hover {
      display: none;
   }
   .top {
      padding-block: var(--wp--custom--main-size);
      cursor: pointer;
      &:not(.collapsed) {
         .btn-plus {
            transform: rotate(45deg);
         }
      }
   }
   @media (min-width: 992px) {
      .wp-block-post-meta {
         gap: 0;
      }
      .wp-block-post-date {
         width: 10%;
      }
      .wp-block-post-title,
      .wp-block-post-content {
         padding-inline-start: 10%;
         padding-inline-end: 40%;
      }
      .wp-block-post-featured-image {
         text-align: end;
         img {
            max-width: 18.75rem;
         }
      }
   }
   @media (min-width: 1200px) {
      position: relative;
      .top {
         h3.wp-block-post-title {
            span {
               background:
                  linear-gradient(to right, rgba(255, 255, 255, 1), rgba(255, 255, 255, 1)),
                  linear-gradient(to right, rgba(0, 0, 0, 1), rgba(0, 0, 0, 1), rgba(0, 0, 0, 1));
               background-size: 100% 1px, 0 1px;
               background-position: 100% 100%, 0 100%;
               background-repeat: no-repeat;
               transition: background-size 400ms;
            }
         }
      }
      .wp-block-post-featured-image-hover {
         display: block;
         max-width: 8.75rem;
         position: absolute;
         right: calc(var(--wp--custom--main-size) * 3);
         top: 50%;
         transform: translateY(-50%);
         opacity: 0;
         transition: opacity .3s ease-out;
         img {
            aspect-ratio: 4/3;
            object-fit: cover;
         }
      }
      .top {
         &.collapsed:hover {
            .wp-block-post-featured-image-hover {
               opacity: 1;
            }
            h3.wp-block-post-title {
               text-decoration: none;
               span {
                  background-size: 0 1px, 100% 1px;
               }
            }
         }
         &:not(.collapsed) {
            .btn-plus {
               transform: rotate(45deg);
            }
         }
      }
   }
}

/* ==========================================================================
BOOTSTRAP
========================================================================== */

.accordion {
   --bs-accordion-bg: none;
   --bs-accordion-active-bg: none;
   --bs-accordion-color: currentColor;
   --bs-accordion-active-color: currentColor;
   --bs-accordion-border-radius: 0;
   --bs-accordion-inner-border-radius: 0;
   --bs-accordion-btn-focus-box-shadow: none;
   --bs-accordion-border-color: transparent;
   --bs-accordion-btn-padding-x: 0;
   --bs-accordion-body-padding-x: 0;
   --bs-accordion-body-padding-y: var(--wp--custom--main-size);
   --bs-accordion-btn-icon: var(--icon-angle);
   --bs-accordion-btn-active-icon: var(--icon-angle);
   --bs-accordion-btn-color: currentColor;
}

.accordion-header {
   border-bottom: 1px solid currentColor;
}

@media (min-width: 1200px) {
   .accordion-button {
      font-size: 1.25rem;
   }
}

/* ==========================================================================
GENERAL
========================================================================== */

a:where(:not(.wp-element-button)) {
   transition: color .3s ease-out;
}

.section {
   padding-block: var(--wp--custom--main-size);
}

.btn-plus {
   border: none;
   padding: 0;
   position: relative;
   width: 0.75rem;
   height: 0.75rem;
   border-radius: 0;
   transition: transform .15s ease-out;
   color: var(--wp--preset--color--primary);
   &::after,
   &::before {
      content: '';
      display: block;
      width: 100%;
      height: 1px;
      background-color: currentColor;
      position: absolute;
      top: 0.3125rem;
      left: 0;
   }
   &::after {
      transform: rotate(90deg);
   }
}

/* ==========================================================================
GUTENBERG
========================================================================== */

.is-style-d-none {
   display: none !important;
}

.wp-block-details {
   summary {
      border-bottom: 1px solid currentColor;
      position: relative;
      display: flex;
      align-items: center;
      width: 100%;
      padding: 0 0 1rem 0;
      line-height: 1.3;
      &:after {
         flex-shrink: 0;
         width: 1.25rem;
         height: 1.25rem;
         margin-inline-start: auto;
         content: "";
         background-repeat: no-repeat;
         background-image: var(--icon-angle);
         transition: transform 0.2s ease-in-out;
      }
   }
   &[open] {
      padding-block-end: var(--wp--custom--main-size);
      summary {
         &:after {
            transform: rotate(-180deg);
         }
      }
   }
   &.has-background {
      border-radius: var(--wp--custom--border-radius);
      summary {
         padding-inline: var(--wp--custom--main-size);
         padding-block-start: 1rem;
      }
      > :where(:not(summary)) {
         margin-inline: var(--wp--custom--main-size);
      }
   }
}

hr,
.wp-block-separator {
   opacity: unset;
   border-top: 1px solid currentColor;
   border-block-end: 0;
}

.has-global-padding>.wp-block-group.alignfull.has-background.is-layout-constrained {
   padding-inline: var(--wp--custom--main-size);
}

.wp-block-social-link {
   transition: opacity 0.3s ease-out;
   &:hover {
      transform: scale(1);
      opacity: 0.8;
   }
}

body {
   &.page-no-top-space {
      main {
         padding-block: 0;
         margin-block: 0;
      }
   }
   &.page-no-bottom-space {
      main {
         padding-block-end: 0;
      }
   }
}

.has-alternate-font-font-family {
   font-weight: 400;
}

@media (max-width: 991px) {
   .hide-mobile {
      display: none;
   }
}

@media (min-width: 992px) {
   .hide-desktop {
      display: none;
   }
}

.main-content {
   margin-block: calc(var(--wp--custom--main-size) * 3);
}

@media (min-width: 1200px) {
   .main-content {
      margin-block-start: calc(var(--wp--custom--main-size) * 2);
   }
}

.main-navigation a {
   display: inline-block;
   position: relative;
   &:before {
      transition: all 0.5s;
      content: '';
      position: absolute;
      right: 0;
      bottom: 0;
      width: 0;
      height: 1px;
      background-color: currentColor;
   }
   &:hover {
      &:before {
         left: 0;
         width: 100%;
      }
   }
}

.is-style-small-text {
   font-size: 1rem;
   font-family: var(--wp--preset--font-family--phonic);
   -webkit-font-smoothing: auto;
   font-weight: 400;
   h2,
   h3,
   h4,
   h5,
   h6 {
      font-size: 1rem;
      font-family: var(--wp--preset--font-family--phonic);
      -webkit-font-smoothing: auto;
      font-weight: 400;
   }
}

/* ==========================================================================
HEADER
========================================================================== */

.main-header {
   padding: var(--wp--custom--main-size);
   display: flex;
   justify-content: space-between;
   position: sticky;
   width: 100%;
   z-index: 998;
   font-family: var(--wp--preset--font-family--phonic);
   -webkit-font-smoothing: auto;
   font-weight: 400;
   color: var(--wp--preset--color--white);
   font-size: var(--wp--preset--font-size--medium);
   top: 0;
   mix-blend-mode: difference;
   .btn-link {
      text-decoration: none;
      color: currentColor;
   }
   a {
      text-decoration: none;
      display: inline-block;
      position: relative;
      color: currentColor;
   }
   .btn-burguer-menu {
      color: currentColor;
      transform: translateY(5px);
   }
   .btn-menu {
      display: none;
      align-self: flex-start;
   }
   .site-name {
      width: 100%;
   }
   .titles {
      display: flex;
      flex-wrap: wrap;
      gap: .25em;
      p {
         margin: 0;
         &:not(:last-child):after {
            content: ',';
         }
         &:last-of-type:after {
            content: '.';
         }
      }
   }
   @media (min-width: 768px) {
      .btn-menu {
         display: block;
      }
      .btn-burguer-menu {
         display: none;
      }
   }
   @media (min-width: 992px) {
      .site-name {
         width: auto;
      }
   }
   @media (min-width: 1200px) {
      .btn-menu,
      .btn-link,
      a {
         position: relative;
         &:before {
            transition: all 0.5s;
            content: '';
            position: absolute;
            right: 0;
            bottom: 0.125rem;
            width: 0;
            height: 1px;
            background-color: currentColor;
         }
         &:hover {
            &:before {
               left: 0;
               width: 100%;
            }
         }
      }
   }
}

.wrap-filters {
   position: absolute;
   display: none;
   left: var(--wp--custom--main-size);
   top: calc(var(--wp--custom--main-size) * 3.75);
   line-height: 1.5;
   .btn-link {
      position: relative;
      &:before {
         transition: all 0.5s;
         content: '';
         position: absolute;
         right: 0;
         bottom: 0.125rem;
         width: 0;
         height: 1px;
         background-color: currentColor;
      }
      &:hover {
         &:before {
            left: 0;
            width: 100%;
         }
      }
   }
   .btn-link:not(:last-child):after {
      content: ',';
   }
   .btn-link.current {
      &:before {
         left: 0;
         width: 100%;
      }
   }
   @media (min-width: 992px) {
      top: calc(var(--wp--custom--main-size) * 2);
   }
}

/* ==========================================================================
MENU
========================================================================== */

.btn-burguer-menu {
   margin-inline-start: auto;
   position: relative;
   padding: 0;
   width: 20px;
   height: 1rem;
   border: none;
   line-height: 1;
   display: flex;
   justify-content: center;
   align-items: center;
   flex: 0 0 20px;
   span,
   &::after,
   &::before {
      content: '';
      position: absolute;
      width: 100%;
      height: 2px;
      left: 0;
      background-color: currentColor;
      transition: all .15s ease;
   }
   &::before {
      top: 0;
      transform-origin: 0 0;
   }
   &::after {
      transform-origin: 0 100%;
      bottom: 0;
   }
   span {
      display: block;
   }
   &.is-active {
      span {
         opacity: 0;
      }
      &::before {
         top: calc(50% - 1px);
         transform-origin: 50% 50%;
         transform: rotate(45deg);
      }
      &::after {
         bottom: calc(50% - 1px);
         transform-origin: 50% 50%;
         transform: rotate(-45deg);
      }
   }
}

.wrap-menu {
   content: '';
   position: fixed;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   background-color: #FFF;
   z-index: 997;
   display: none;
}

#main-navigation {
   padding: var(--wp--custom--main-size);
   margin-inline-start: auto;
   width: fit-content;
   padding-inline-end: calc(var(--wp--custom--main-size) * 3);
   ul {
      list-style: none;
      padding: 0;
      margin: 0;
      display: flex;
      flex-direction: column;
      line-height: 1.4;
      color: var(--wp--preset--color--primary);
      font-family: var(--wp--preset--font-family--phonic);
      -webkit-font-smoothing: auto;
      font-weight: 400;
      font-size: var(--wp--preset--font-size--medium);
      li {
         a {
            text-decoration: none;
            display: inline-block;
            position: relative;
            color: currentColor;
            &:after {
               transition: all 0.5s;
               content: '';
               position: absolute;
               right: 0;
               bottom: 0.125rem;
               width: 0;
               height: 1px;
               background-color: currentColor;
            }
         }
         &.current-menu-item {
            a {
               text-decoration: none;
               &:after {
                  left: 0;
                  width: 100%;
               }
            }
         }
      }
   }
   @media (min-width: 768px) {
      padding-inline-end: calc(var(--wp--custom--main-size) * 6);
   }
   @media (min-width: 992px) {
      ul {
         li {
            a {
               &:hover {
                  &:after {
                     left: 0;
                     width: 100%;
                  }
               }
            }
         }
      }
   }
}

body {
   -webkit-font-smoothing: antialiased;
   .titles {
      transition: opacity .5s ease-out;
   }
   a {
      text-decoration-thickness: 1px;
      text-underline-offset: 3px;
   }
   &.show-menu {
      overflow: hidden;
      padding-inline-end: 0px;
      .main-header {
         pointer-events: none;
      }
      .btn-open-menu {
         pointer-events: all;
      }
      .titles {
         opacity: 0;
      }
   }
   .has-phonic-font-family {
      >* {
         -webkit-font-smoothing: auto;
      }
   }
}

/* ==========================================================================
FOOTER
========================================================================== */

.main-footer {
   color: var(--wp--preset--color--white);
   mix-blend-mode: difference;
   font-weight: 400;
   a {
      text-decoration: none;
      color: currentColor;
   }
   .inner {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
   }
   .menu-footer {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      width: 100%;
      border-bottom: 1px solid var(--wp--preset--color--primary);
      padding-block-end: var(--wp--custom--main-size);
      p {
         margin: calc(var(--wp--custom--main-size) * .5) 0 0 0;
         width: 50%;
         &:nth-child(even) {
            text-align: end;
         }
      }
   }
   @media (min-width: 992px) {
      .wp-block-group {
         margin: 0;
      }
      .menu-footer {
         width: auto;
         border: none;
         padding: 0;
         order: 1;
         gap: var(--wp--custom--main-size);
         p {
            margin: 0;
            width: auto;
         }
      }
      .website-by {
         order: 2;
      }
   }
   @media (min-width: 1200px) {
      a {
         text-decoration: none;
         display: inline-block;
         position: relative;
         &:after {
            transition: all 0.5s;
            content: '';
            position: absolute;
            right: 0;
            bottom: 0.125rem;
            width: 0;
            height: 1px;
            background-color: currentColor;
         }
         &:hover {
            &:after {
               left: 0;
               width: 100%;
            }
         }
      }
   }
}


/* ==========================================================================
CUSTOM
========================================================================== */

body {
   display: grid;
   grid-template-rows: auto 1fr auto;
   min-height: 100svh;
}

/* ==========================================================================
HOME
========================================================================== */

.home {
   .main-header {
      .titles {
         p {
            &:last-of-type::after {
               content: unset;
            }
         }
      }
   }
   h2.wp-block-heading {
      a {
         position: relative;
         text-decoration: none;
         &:after {
            transition: all 0.5s;
            content: '';
            position: absolute;
            right: 0;
            bottom: -.025rem;
            width: 0;
            height: 1px;
            background-color: currentColor;
         }
         &:hover {
            &:after {
               left: 0;
               width: 100%;
            }
         }
      }
   }
   .list-courses {
      margin-block: calc(var(--wp--custom--main-size) * 3);
   }
   .list-posts {
      margin-block-end: calc(var(--wp--custom--main-size) * 3);
   }
   @media (min-width: 1200px) {
      .list-courses {
         margin-block: calc(var(--wp--custom--main-size) * 5);
      }
      .list-posts {
         margin-block-end: calc(var(--wp--custom--main-size) * 5);
      }
   }
}

.list-projects-home {
   article {
      .wp-block-post-media {
         overflow: hidden;
      }
      img {
         max-width: none;
         width: 100%;
         transition: transform 2s cubic-bezier(0.165, 0.84, 0.44, 1);
      }
      .wrap-title {
         z-index: 99;
         position: absolute;
         height: 100%;
         top: 0;
         width: 100%;
         align-content: end;
         mix-blend-mode: difference;
         color: #FFF;
      }
      h3 {
         font-size: 1.0625rem;
         position: sticky;
         bottom: 0;
         z-index: 99;
         padding: var(--wp--custom--main-size);
         span {
            font-family: var(--wp--preset--font-family--phonic);
            -webkit-font-smoothing: auto;
            font-weight: 400;
            font-size: 0.875rem;
         }
      }
      a {
         display: block;
         position: relative;
         color: currentColor;
      }
   }
   @media (min-width: 1200px) {
      article {
         a {
            &:hover {
               img {
                  transform: scale(1.1);
               }
            }
         }
      }
   }
}

/* ==========================================================================
SINGLE PROJECT
========================================================================== */

.single-project {
   .main-header {
      position: fixed;
   }
   .project-info {
      font-family: var(--wp--preset--font-family--phonic);
      -webkit-font-smoothing: auto;
      font-weight: 400;
      color: var(--wp--preset--color--primary);
      font-size: var(--wp--preset--font-size--small);
      position: fixed;
      bottom: 0;
      width: 100%;
      left: 0;
      padding-block: var(--wp--custom--main-size);
      a {
         text-decoration: none;
         display: inline-block;
         position: relative;
         color: currentColor;
         &:after {
            transition: all 0.5s;
            content: '';
            position: absolute;
            right: 0;
            bottom: 0.125rem;
            width: 0;
            height: 1px;
            background-color: currentColor;
         }
         &:hover {
            &:after {
               left: 0;
               width: 100%;
            }
         }
      }
   }
   .project-meta {
      display: flex;
      gap: var(--wp--custom--main-size);
      p {
         margin: 0;
         span {
            color: var(--wp--preset--color--grey);
            display: block;
         }
      }
   }
   .next-project {
      display: none;
      font-size: var(--wp--preset--font-size--medium);
      margin: 0;
   }
   @media (min-width: 768px) {
      .project-info {
         display: flex;
         flex-wrap: wrap;
         justify-content: space-between;
         align-items: flex-end;
      }
      .next-project {
         display: block;
      }
   }
   @media (min-width: 992px) {
      .main-footer {
         position: fixed;
         bottom: 0;
         width: 100%;
         display: none;
      }
   }
}

.project-media {
   figure {
      padding-inline: calc(var(--wp--custom--main-size) * 2);
      padding-block: var(--wp--custom--main-size);
      align-content: center;
      video,
      img {
         max-width: 100%;
         height: auto;
      }
      &:first-child:not(.fullwidth-image) {
         height: 100svh;
      }
   }
   a {
      display: block;
   }
   .fullwidth-image {
      padding-inline: 0;
   }
   @media (min-width: 768px) {
      figure {
         padding: calc(var(--wp--custom--main-size) * 4);
      }
   }
   @media (min-width: 992px) {
      height: 100vh;
      overflow-y: scroll;
      scroll-snap-type: y mandatory;
      .item {
         scroll-snap-align: start;
      }
      figure {
         height: 100svh;
         padding-block: calc(var(--wp--custom--main-size) * 5);
         padding-inline: 0;
         video,
         img {
            max-height: 100%;
            max-width: 52.5rem;
            height: auto;
            width: auto;
            display: block;
            margin-inline: auto;
            object-fit: cover;
         }
         .fitvideo {
            max-width: 52.5rem;
            margin-inline: auto;
         }
      }
      .fullwidth-image {
         padding: 0;
         img {
            max-width: unset;
            width: 100%;
            height: 100svh;
         }
      }
   }
}

.section-quote {
   padding: calc(var(--wp--custom--main-size) * 2);
   align-content: center;
   &.layout-1 {
      &>* {
         max-width: 37.5rem;
         margin-inline: auto;
      }
   }
   &.layout-3 {
      &>* {
         max-width: 18.75rem;
         margin-inline: auto;
      }
   }
   @media (min-width: 992px) {
      min-height: 100svh;
      padding-block: calc(var(--wp--custom--main-size) * 3);
   }
}

.project-description {
   position: fixed;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   background-color: #FFF;
   padding: var(--wp--custom--main-size);
   padding-block-start: calc(var(--wp--custom--main-size) * 6);
   z-index: 99;
   overflow-y: auto;
   display: none;
   &>* {
      max-width: 37.5rem;
      margin-inline: 0 !important;
   }
}

/* ==========================================================================
COURSES
========================================================================== */

.list-courses {
   display: grid;
   gap: calc(var(--wp--custom--main-size) * 3) var(--wp--custom--main-size);
   grid-template-columns: minmax(0, 1fr);
   article {
      font-size: 0.875rem;
      max-width: 17.5rem;
      margin-inline: auto;
      position: relative;
      h3 {
         font-size: 1.5rem;
         margin-block-start: calc(var(--wp--custom--main-size) * .5);
      }
      a {
         text-decoration: none;
         text-underline-offset: 4px;
      }
      p {
         font-family: var(--wp--preset--font-family--phonic);
         -webkit-font-smoothing: auto;
         font-weight: 400;
         display: flex;
         gap: calc(var(--wp--custom--main-size) * .5);
         span {
            display: inline-block;
            margin-inline-start: auto;
         }
      }
   }
   @media (min-width: 768px) {
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: calc(var(--wp--custom--main-size) * 4) var(--wp--custom--main-size);
      align-items: end;
      article {
         max-width: 280px;
         figure {
            aspect-ratio: 1/1;
            align-content: end;
         }
      }
   }
   @media (min-width: 992px) {
      grid-template-columns: repeat(3, minmax(0, 1fr));
   }
   @media (min-width: 1200px) {
      article {
         max-width: 20vw;
         h3 {
            a {
               background:
                  linear-gradient(to right, rgba(255, 255, 255, 1), rgba(255, 255, 255, 1)),
                  linear-gradient(to right, rgba(0, 0, 0, 1), rgba(0, 0, 0, 1), rgba(0, 0, 0, 1));
               background-size: 100% 1px, 0 1px;
               background-position: 100% 100%, 0 100%;
               background-repeat: no-repeat;
               transition: background-size 400ms;
            }
         }
         .wp-block-post-media {
            a {
               display: block;
               overflow: hidden;
            }
            img {
               transition: transform 2s cubic-bezier(0.165, 0.84, 0.44, 1);
            }
         }
         &:has(a):hover {
            .wp-block-post-media {
               img {
                  transform: scale(1.1);
               }
            }
            h3 {
               a {
                  background-size: 0 1px, 100% 1px;
               }
            }
         }
      }
   }
}

.btn-link.btn-arrow {
   display: inline-flex;
   gap: calc(var(--wp--custom--main-size) * .25);
   color: #838383;
   &:after {
      content: '↑';
      font-family: var(--wp--preset--font-family--phonic);
      -webkit-font-smoothing: auto;
      font-weight: 400;
      transform: rotate(180deg);
   }
   &.is-active {
      &:after {
         transform: rotate(0);
      }
   }
}

.section-page-info {
   content: '';
   position: fixed;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   background-color: #FFF;
   padding: var(--wp--custom--main-size);
   padding-block-start: calc(var(--wp--custom--main-size) * 7);
   z-index: 5;
   margin: 0;
   display: none;
   overflow-y: auto;
   @media (min-width: 992px) {
      padding-block-start: calc(var(--wp--custom--main-size) * 4);
   }
}

.mt-0 {
   margin-block-start: 0;
}

/* ==========================================================================
LIST PROJECTS
========================================================================== */

.list-projects {
   display: grid;
   gap: calc(var(--wp--custom--main-size) * 3);
   grid-template-columns: minmax(0, 1fr);
   article {
      a {
         display: block;
         text-decoration: none;
      }
      h3 {
         margin: calc(var(--wp--custom--main-size) * .5) 0 0 0;
         font-size: 1rem;
         span {
            font-family: var(--wp--preset--font-family--phonic);
            -webkit-font-smoothing: auto;
            font-weight: 400;
            font-size: .9em;
         }
      }
      figure {
         img {
            display: block;
         }
      }
   }
   @media (min-width: 768px) {
      grid-template-columns: repeat(2, minmax(0, 1fr));
      align-items: end;
   }
   @media (min-width: 992px) {
      grid-template-columns: repeat(9, minmax(0, 1fr));
      gap: calc(100vw / 9) calc(var(--wp--custom--main-size) * .5);
      align-items: end;
      article {
         grid-column: span 3;
         &:nth-child(3n + 1) {
            grid-column: 2 / span 3;
         }
         &:nth-child(3n + 2) {
            grid-column: 6 / span 3;
         }
         &:nth-child(3n + 3) {
            grid-column: 3 / span 5;
         }
      }
   }
   @media (min-width: 1200px) {
      article {
         a {
            figure {
               img {
                  max-width: none;
                  width: 100%;
                  transition: transform 2s cubic-bezier(0.165, 0.84, 0.44, 1);
               }
            }
         }
         figure {
            overflow: hidden;
            &:hover {
               img {
                  transform: scale(1.1);
               }
            }
         }
      }
   }
}

/* ==========================================================================
BIO
========================================================================== */

.wp-block-categories-list {
   list-style: none;
   padding: 0;
   margin: 0;
   a {
      text-decoration: none;
      position: relative;
      overflow: hidden;
      &:after {
         transition: all 0.5s;
         content: '';
         position: absolute;
         right: 0;
         bottom: 0;
         width: 0;
         height: 1px;
         background-color: currentColor;
      }
      &:hover {
         &:after {
            left: 0;
            width: 100%;
         }
      }
   }
}

.fh-section {
   min-height: 100svh;
}

.section-img {
   align-content: center;
   min-height: 100svh;
}

.bio-img {
   @media (max-width: 768px) {
      img {
         max-width: 80%;
         aspect-ratio: 3/4;
         object-fit: cover;
      }
   }
   @media (min-width: 992px) {
      img {
         max-width: 850px;
      }
   }
}

.page-id-10 {
   .main-content {
      margin: 0 !important;
   }
}

@media (min-width: 992px) {
   .fh-section-bio-img {
      min-height: calc(100svh);
      align-content: center;
   }
   .page-id-10 {
      .main-content {
         margin: 0 !important;
      }
      .main-footer {
         position: fixed;
         width: 100%;
         bottom: 0;
         transition: opacity .3s ease-out;
         opacity: 0;
         pointer-events: none;
         &.show {
            opacity: 1;
            pointer-events: all;
         }
      }
   }
}

.carousel figure.fullwidth-image {
   img {
      max-width: none;
      width: 100%;
   }
}

/* ==========================================================================
VIEW TRANSITION
========================================================================== */

@view-transition {
   navigation: auto
}