/* ! Base */
/* ----------------------------------------------------------------------------------- */
.logo *, #theme-changer, body{transition: all 0.4s cubic-bezier(.215, .61, .355, 1);}


/* ! Grid systems */
/*----------------------------------------------------------------------------------- */
:root{
  --padding-inline: 2.4rem;
  --large-content-mw: 132rem;
  --medium-content-mw: 100rem;
  --short-content-mw: 64rem;
  --medium-content-size: calc((var(--medium-content-mw) - var(--short-content-mw)) / 2);
  --large-content-size: calc((var(--large-content-mw) - var(--medium-content-mw)) / 2);
}

.grid-container{
  display: grid;
  gap: 0;
  grid-template-columns: 
    [full-content-start] minmax(var(--padding-inline), 1fr) 
    [large-content-start] minmax(0, var(--large-content-size)) 
    [medium-content-start] minmax(0, var(--medium-content-size))
    [short-content-start] min(calc(100% - (var(--padding-inline) * 2)), var(--short-content-mw)) [short-content-end]
    minmax(0, var(--medium-content-size)) [medium-content-end] 
    minmax(0, var(--large-content-size)) [large-content-end] 
    minmax(var(--padding-inline), 1fr) [full-content-end] !important;
}

.container{width: min(calc(100% - (var(--padding-inline) * 2)), var(--large-content-mw)); margin: 0 auto;}
.reduced-container{width: min(calc(100% - (var(--padding-inline) * 2)), var(--medium-content-mw)); margin: 0 auto;}

.grid-high-height{width: 100%; position: relative; grid-template-rows: minmax(19.6rem, 1fr) 50% minmax(6.4rem, 0.8fr);}
@media (max-width: 1184px){.grid-high-height{min-height: 0; height: auto; grid-template-rows: minmax(12rem, 1fr) auto 1fr;}}

.grid-full-height{min-height: 720px; height: 100vh; width: 100%; position: relative; grid-template-rows: minmax(12rem, 1fr) 1fr 1fr;}
.grid-high-height > .top, .grid-full-height > .top{grid-row: 1; margin-bottom: 0; padding-bottom: 24px;}
.grid-high-height > .middle, .grid-full-height > .middle{grid-row: 2;}
.grid-high-height > .bottom, .grid-full-height > .bottom{grid-row: 3;}
.grid-full-height > img:not(.grid-full-height > .hero__img){width: 100%; min-height: inherit; height: inherit; object-fit: cover; z-index: -1;}

.grid-container .full-content{grid-column: full-content;}
.grid-container .large-content{grid-column: large-content;}
.grid-container .medium-content{grid-column: medium-content;}
.grid-container .short-content{grid-column: short-content;}

.grid-container.min-320{grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));}
.grid-container.min-400{grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));}
.grid-container.min-480{grid-template-columns: repeat(auto-fit, minmax(480px, 1fr));}
@media(max-width: 540px) {
  .grid-container.min-320{grid-template-columns: repeat(auto-fit, 100%);}
  .grid-container.min-400{grid-template-columns: repeat(auto-fit, 100%);}
  .grid-container.min-480{grid-template-columns: repeat(auto-fit, 100%);}
}


/* ! Fonts */
/* ----------------------------------------------------------------------------------- */
@font-face {
  font-family: 'Aeonik Light';
  src: url('../../mncstarter/fonts/Aeonik-Light.woff2') format('woff2'),
      url('../../mncstarter/fonts/Aeonik-Light.woff') format('woff');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Aeonik Light';
  src: url('../../mncstarter/fonts/Aeonik-LightItalic.woff2') format('woff2'),
      url('../../mncstarter/fonts/Aeonik-LightItalic.woff') format('woff');
  font-weight: 300;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'Aeonik';
  src: url('../../mncstarter/fonts/Aeonik-Regular.woff2') format('woff2'),
      url('../../mncstarter/fonts/Aeonik-Regular.woff') format('woff');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Aeonik';
  src: url('../../mncstarter/fonts/Aeonik-RegularItalic.woff2') format('woff2'),
      url('../../mncstarter/fonts/Aeonik-RegularItalic.woff') format('woff');
  font-weight: normal;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'Aeonik';
  src: url('../../mncstarter/fonts/Aeonik-Bold.woff2') format('woff2'),
      url('../../mncstarter/fonts/Aeonik-Bold.woff') format('woff');
  font-weight: bold;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Aeonik';
  src: url('../../mncstarter/fonts/Aeonik-BoldItalic.woff2') format('woff2'),
      url('../../mncstarter/fonts/Aeonik-BoldItalic.woff') format('woff');
  font-weight: bold;
  font-style: italic;
  font-display: swap;
}


/* ! Colors */
/*----------------------------------------------------------------------------------- */
.dark{
  --primary-bg-color: #080343;
  --accents-color: #CF4E08;
  --accents-color-hover: #BF4000;
  --secondary-color: #9E9CB4;
  --text-bolds: #FFFFFF;
  --logo-color-1: #CF4E08;
  --logo-color-2: #9E9CB4;
  --important-bg: var(--accents-color);
}

.light{
  --primary-bg-color: #D1D0E7;
  --accents-color: #CF4E08;
  --accents-color-hover: #BF4000;
  --secondary-color: #4b4770;
  --text-bolds: #040223;
  --logo-color-1: #CF4E08;
  --logo-color-2: #040223;
  --important-bg: var(--accents-color);
}

body{color: var(--secondary-color); background-color: var(--primary-bg-color); font-family: 'Aeonik', sans-serif;}

a{color: var(--accents-color);}
a:hover{color: var(--accents-color-hover);}
a.neutral{color: var(--secondary-color); text-decoration: none; transition: all 0.32s cubic-bezier(0.075, 0.82, 0.165, 1);}
a.neutral:hover{color: var(--text-bolds);}
h1, h2, strong:not(.no-style-color strong){color: var(--text-bolds);}
a strong:not(.no-style-color a strong){color: var(--accents-color);}
a:hover > strong:not(.no-style-color a:hover > strong){color: var(--accents-color-hover);}

.logo svg .color-1{fill: var(--logo-color-1);}
.logo svg .color-2{fill: var(--logo-color-2);}
.logo span.color-1{color: var(--logo-color-1);}
.logo span.color-2{color: var(--logo-color-2);}
@media (max-width: 800px) {
  .logo #logo-payload{display: none;}
}

.important-bg, .important-bg h1, .important-bg h2, .important-bg strong{background-color: var(--important-bg); color: var(--primary-bg-color);}


/* ! Buttons */
/*----------------------------------------------------------------------------------- */
.button{border-radius: 100px; padding: 16px 32px!important; transition: all 0.32s cubic-bezier(0.075, 0.82, 0.165, 1);}
.button:hover{transform: none!important}
.button-primary{background-color: var(--accents-color); color: var(--primary-bg-color);}
.button-primary:hover{background-color: var(--accents-color-hover);}
.button-secondary{border: 2px solid var(--primary-bg-color)!important; color: var(--primary-bg-color)!important;}
.button-secondary:hover{background-color: var(--primary-bg-color); color: var(--accents-color)!important;}

.wp-block-social-link.button a{flex-direction: row-reverse; gap: 40px}


/* ! Header */
/*----------------------------------------------------------------------------------- */
.header{transition: all 0.4s cubic-bezier(.215, .61, .355, 1); padding: 40px; z-index: 99998;}
@media (max-width: 960px) {
  .header{padding: 24px; }
}

.menu{display: flex; max-width: 0; gap: 0; opacity: 0; width: fit-content; overflow: hidden; transition: all 0.8s cubic-bezier(.215, .61, .355, 1);}
.menu-wrapper{transition: all 0.4s cubic-bezier(.215, .61, .355, 1); gap: 0; height: 56px;}
.menu-wrapper:has(.opened){gap: 24px;}
.menu-wrapper:has(.opened) .menu{max-width: 400px; gap: 24px; opacity: 1;}
.menu-wrapper:has(.isclosing) .menu{max-width: 0;}
.dark .menu-wrapper:has(.opened){background-color: rgba(0, 0, 0, 0.40); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);}
.light .menu-wrapper:has(.opened){background-color: rgba(255, 255, 255, 0.64); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);}

.menu ul{display: flex; gap: 24px;}
.menu ul li:first-child{margin-left: 6px;}
.menu ul li a{color: var(--secondary-color); text-decoration: none; text-wrap: nowrap;}
.menu ul li:hover a{color: var(--text-bolds);}

.hamburger{height: 24px; width: 32px;}
.hamburger *{transition: all 0.4s cubic-bezier(.215, .61, .355, 1);}
.hamburger span{width: 32px; height: 2px; min-height: 2px; transform-origin: center center;}
.hamburger span{background-color: var(--secondary-color);}
.hamburger:hover span{background-color: var(--text-bolds);}

.hamburger.opened span:first-child{animation: move-down-span1 0.4s cubic-bezier(.215, .61, .355, 1) forwards, rotate-span1 0.8s cubic-bezier(.215, .61, .355, 1) forwards;}
.hamburger.opened span:last-child{animation: move-up-span2 0.4s cubic-bezier(.215, .61, .355, 1) forwards, rotate-span2 0.8s cubic-bezier(.215, .61, .355, 1) forwards;}
.hamburger.isclosing span:first-child{animation: derotate-span1 0.4s cubic-bezier(.215, .61, .355, 1) forwards, move-up-span1 0.8s cubic-bezier(.215, .61, .355, 1) forwards;}
.hamburger.isclosing span:last-child{animation: derotate-span2 0.4s cubic-bezier(.215, .61, .355, 1) forwards, move-down-span2 0.8s cubic-bezier(.215, .61, .355, 1) forwards;}

#theme-changer{position: fixed; bottom: 40px; right: 40px; width: 32px; height: 32px; border-radius: 100%; border: 2px solid var(--secondary-color); cursor: pointer; overflow: hidden;}
#theme-changer::after{position: absolute; content: " "; width: 50%; height: 100%; background-color: var(--secondary-color);}
#theme-changer:hover{border-color: var(--text-bolds);}
#theme-changer:hover::after{background-color: var(--text-bolds);}
#theme-changer, #theme-changer::after{transition: all 0.32s cubic-bezier(.215, .61, .355, 1);}

.header #logo-payload{transition: 0.24s ease-in;}
.header--onscroll #logo-payload{transform: scale(0); transform-origin: 0 0;}


/* ! Hero */
/*----------------------------------------------------------------------------------- */
.hero figure{transform-origin: right; border-radius: 24px; width: 100%; overflow: hidden;}
.hero .wp-block-media-text{display: grid;}
.hero .wp-block-media-text.is-image-fill-element>.wp-block-media-text__media{min-height: 64vh; position: absolute; right: 0; top: auto;}
.hero .wp-block-media-text__content{grid-column-start: 1! important; max-width: 800px; width: 100%; z-index: 200; padding: 0 !important; position: absolute;}


/* ! Index */
/*----------------------------------------------------------------------------------- */


/* ! Single */
/*----------------------------------------------------------------------------------- */


/* ! Footer */
/*----------------------------------------------------------------------------------- */
.footer{padding: 24px;}


/* ! Animations*/
/*----------------------------------------------------------------------------------- */
@keyframes move-down-span1{
  0% {transform: translateY(0);}
  100% {transform: translateY(5px);}
}

@keyframes move-up-span2{
  0% {transform: translateY(0);}
  100% {transform: translateY(-5px);}
}

@keyframes rotate-span1{
  50% {transform: translateY(5px) rotate(0deg);}
  100% {transform: translateY(5px) rotate(45deg);}
}

@keyframes rotate-span2{
  50% {transform: translateY(-5px) rotate(0deg);}
  100% {transform: translateY(-5px) rotate(-45deg);}
}

@keyframes move-up-span1{
  50% {transform: translateY(5px);}
  100% {transform: translateY(0);}
}

@keyframes move-down-span2{
  50% {transform: translateY(-5px);}
  100% {transform: translateY(0);}
}

@keyframes derotate-span1{
  0% {transform: translateY(5px) rotate(45deg);}
  100% {transform: translateY(5px) rotate(0deg);}
}

@keyframes derotate-span2{
  0% {transform: translateY(-5px) rotate(-45deg);}
  100% {transform: translateY(-5px) rotate(0deg);}
}