/*
Theme Name: Magnolis
Author: SU—F Studio
Description: Custom theme for Magnolis
Version: 0.0.1
Tags: custom, su-f, souncalledfor, design studio, design, studio
*/


:root {
  --spacing-xs: 0.2rem;
  --spacing-sm: 0.7rem;
  --spacing-md: 1rem;
  --spacing-lg: 2.25rem;
  --spacing-xl: 4.5rem;
  --spacing-2xl: 6.5rem;
  --spacing-3xl: 9rem;
  --spacing-4xl: 12rem;

  --max-w-xxs: 20rem;
  --max-w-xs: 28rem;
  --max-w-sm: 40rem;
  --max-w-md: 48rem;
  --max-w-lg: 64rem;
  --max-w-xl: 80rem;
  --max-w-2xl: 96rem;
  --max-w-screen: 1600px;
  --max-w-content: 1200px;

  --text-xs: clamp(0.8rem, 0.77rem + 0.15vw, 0.9rem);
  --text-sm: clamp(0.625rem, 0.6rem + 0.1vw, 0.7rem);
  --text-base: clamp(0.9rem, 0.867rem + 0.17vw, 1rem);
  --text-base-lg: calc(clamp(0.9rem, 0.867rem + 0.17vw, 1rem) * 1.5);
  --text-lg: clamp(1.375rem, 1rem + 1.6vw, 2.375rem);
  --text-lg-xl: clamp(1.5625rem, 1.167rem + 1.84vw, 2.6875rem);
  --text-xl: clamp(1.75rem, 1.334rem + 2.08vw, 3rem);
  --text-2xl: clamp(2rem, 1.334rem + 3.33vw, 4rem);

  --leading-none: 1;
  --leading-tight: 1.25;
  --leading-snug: 1.375;
  --leading-normal: 1.5;
  --leading-relaxed: 1.625;
  --leading-loose: 2;

  --h-header: 4.5rem;
  --h-footer: 32rem;

  --p-header: var(--spacing-lg);
  --p-button: calc(var(--spacing-sm) / 2.5) var(--spacing-sm);

  --rounded: .6rem;

  --color-light: #FFEDE4;
  --color-dark: #5F3E24;

  --font-serif: 'Kazimir', Georgia, serif;
  --font-sans: 'Area', system-ui, sans-serif;
}


.section:has(.scheme--light),
.section.scheme--light {
  --color: var(--color-dark);
  color: var(--color);
}

.section:has(.scheme--dark),
.section.scheme--dark {
  --color: var(--color-light);
  color: var(--color);
}



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

body {
  margin: 0;
  padding: 0;
  font-family: var(--font-sans);
  color: var(--color-dark);
  line-height: 1.6;
  overflow-x: hidden;
}

main {
  position: relative;
  z-index: 1;
}

button {
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
}

ul {
  margin: 0;
  padding: 0;
}

li {
  list-style: none;
}

a {
  color: inherit;
  text-decoration: none;
  font-size: var(--text-base);
}

figcaption>a,
p>a {
  text-decoration: underline;
}

p:has(a) {
  margin-top: var(--spacing-lg);
}

figcaption>a::before,
p>a::before {
  content: '';
  display: inline-block;
  width: var(--text-base);
  height: var(--text-base);
  -webkit-mask-image: url('svgs/magnolis--chevron-circle-right.svg');
  mask-image: url('svgs/magnolis--chevron-circle-right.svg');
  mask-size: contain;
  mask-repeat: no-repeat;
  mask-position: center;
  background-color: currentColor;
  vertical-align: middle;
  margin-right: var(--spacing-sm);
}

details>summary::marker {
  content: none
}

details>summary::before {
  content: '';
  display: inline-block;
  width: var(--text-sm);
  height: var(--text-sm);
  -webkit-mask-image: url('svgs/magnolis--chevron-down.svg');
  mask-image: url('svgs/magnolis--chevron-down.svg');
  mask-size: contain;
  mask-repeat: no-repeat;
  mask-position: center;
  background-color: currentColor;
  vertical-align: middle;
  margin-right: var(--spacing-sm);
}

details[open]>summary::before {
  transform: rotate(180deg);
}


figure img {
  width: 100%;
  height: auto;
  display: block;
}


h1,
h2,
h3,
h4 {
  font-family: var(--font-serif);
  line-height: var(--leading-tight);
  font-weight: 400;
}

h1:first-of-type,
h2:first-of-type,
h3:first-of-type,
h4:first-of-type {
  margin-top: 0;
}

h1 {
  margin: 0;
}

h2 {
  font-size: var(--text-xl);
}

h3 {
  font-size: var(--text-lg);
}

h4,
h5 {
  font-size: var(--text-base);
}

.home .section--hero {
  /* height: 150svh;for  */
}

.home .section--hero .wp-block-heading {
  font-size: var(--text-xl);
  max-width: var(--max-w-xl);
}

.home .wp-block-column h3.wp-block-heading {
  font-size: var(--text-lg-xl);
}

.section--hero .wp-block-heading {
  font-size: var(--text-lg);
  max-width: var(--max-w-md);
}

.h-scroll {
  gap: 0;
}

.h-scroll>div {
  min-width: calc(100svw - var(--spacing-xl));
  display: flex;
  align-items: center;
  justify-content: center;
}

.h-scroll .wp-block-heading {
  max-width: var(--max-w-md);
  /* min-height: 100%; */
  margin-bottom: 0;
}

.h-scroll .wp-block-video,
.h-scroll .wp-block-image {
  position: relative;
  margin: 0;
}

.h-scroll .wp-block-image figcaption,
.h-scroll .wp-block-video figcaption {
  display: flex;
  gap: var(--spacing-md);
  position: absolute;
  right: 0;
  bottom: 0;
  margin: 0;
  padding: var(--spacing-lg);
}

.section-container--contact .wp-block-heading {
  font-size: var(--text-lg);
  max-width: var(--max-w-sm);
  margin: auto var(--spacing-xl);
}

.section-container--s-scroll .wp-block-heading,
.section-container--h-o-scroll>.wp-block-columns>.wp-block-column>.wp-block-columns .wp-block-heading {
  font-size: var(--text-base-lg);
  margin-bottom: var(--spacing-lg);
}

.section-container--s-scroll .wp-block-heading {
  margin-top: var(--spacing-2xl);
}

.section-container--h-o-scroll>.wp-block-columns>.wp-block-column>.wp-block-heading {
  font-size: var(--text-xl);
  margin-bottom: var(--spacing-4xl);
}

.section-container--h-o-scroll .wp-block-column:nth-child(odd) a {
  margin-left: 0;
}

.section-container--h-o-scroll p:has(a) {
  margin-top: var(--spacing-2xl);
}

.section-container--h-o-scroll>.wp-block-columns>.wp-block-column>.wp-block-columns {
  gap: var(--spacing-2xl);
  counter-reset: step-counter;
}

.section-container--h-o-scroll>.wp-block-columns>.wp-block-column>.wp-block-columns,
.section-container--s-scroll>.wp-block-columns {
  gap: var(--spacing-2xl);
}

.section-container:has(.team)>.wp-block-columns {
  margin-inline: var(--spacing-xl);
}

.team .wp-block-columns {
  gap: var(--spacing-xl);
}

.team figure {
  width: 100%;
  margin-bottom: var(--spacing-lg);
}


.section-container--h-o-scroll>.wp-block-columns>.wp-block-column>.wp-block-columns>.wp-block-column {
  counter-increment: step-counter;
}

.section-container--h-o-scroll>.wp-block-columns>.wp-block-column>.wp-block-columns>.wp-block-column::before {
  content: counter(step-counter, decimal-leading-zero);
  display: block;
  font-size: var(--text-base);
  margin-bottom: var(--spacing-md);
}

.section-container .wp-block-columns.bg--cazimir,
.section-container--contact .wp-block-columns {
  width: 100%;
  gap: 0;
}

.header-container,
.footer-container,
.section-container {
  padding: 0 var(--spacing-lg);
  max-width: var(--max-w-screen);
  height: 100%;
  margin: 0 auto;
}

.section-container--contact .wp-block-column:nth-child(odd)>*,
.wp-block-column:nth-child(odd) a,
.section-container:has(.t-reveal + .t-reveal) .t-reveal:nth-child(odd) {
  margin-left: var(--spacing-xl);
}

.section-container:has(.t-reveal + .t-reveal) .t-reveal:nth-child(even) {
  margin-left: 50%;
  margin-right: var(--spacing-xl);
}

.section-container:has(.t-reveal + .t-reveal) .t-reveal {
  max-width: calc(50% - var(--spacing-xl));
}

.section-container>div {
  margin: 0;
}

.grid {
  display: grid;
  gap: var(--spacing-md);
  width: 100%;
}

.grid--2 {
  grid-template-columns: repeat(2, 1fr);
}

.grid--3 {
  grid-template-columns: repeat(3, 1fr);
}

.grid--4 {
  grid-template-columns: repeat(4, 1fr);
}

.header {
  position: fixed;
  top: var(--spacing-lg);
  left: 0;
  width: 100%;
  z-index: 100;
  color: var(--color-dark);
  transition: color 0.2s ease;
}

.header--light {
  color: var(--color-light);
}

.header a,
.header button,
.header label {
  color: inherit;
}

.header svg,
.header svg * {
  fill: currentColor !important;
  transition: fill 0.2s ease;
}

.header-container {
  display: flex;
  align-items: center;
}

.header .nav {
  display: grid;
  grid-template-columns: 2fr 1fr 2fr;
  width: 100%;
}

.header .nav .nav--center {
  justify-content: center;
}

.header .nav .nav--right {
  justify-content: flex-end;
  gap: var(--spacing-lg);
}

.header .nav>* {
  display: flex;
  align-items: center;
}

.footer {
  width: 100%;
  background-image: url('textures/magnolis--texture-bg-footer.webp');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.footer-container {
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-end;
  padding-top: var(--spacing-2xl);
  padding-bottom: var(--spacing-lg);
  gap: var(--spacing-3xl);
}

.footer .inner-container:first-of-type {
  display: grid;
  gap: var(--spacing-lg);
  width: 100%;
}

.footer .inner-container:first-of-type::before {
  content: '';
  display: block;
  width: 100%;
  height: var(--spacing-xs);
  -webkit-mask-image: url('svgs/magnolis--separator-full.svg');
  mask-image: url('svgs/magnolis--separator-full.svg');
  mask-repeat: no-repeat;
  background-color: currentColor;
}

.footer .inner-container:last-of-type {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: var(--spacing-md);
  width: 100%;
}

.footer-logo {
  display: flex;
  align-items: baseline;
  gap: var(--spacing-lg);
}

.footer-menu {
  display: grid;
}

.footer .grid--4>ul:last-of-type {
  text-align: right;
}

.wp-block-button,
.button--outline {
  position: relative;
  display: inline-flex;
}

.wp-block-buttons .wp-block-button__link,
.button--outline {
  padding: var(--spacing-md) var(--spacing-lg);
}

.wp-block-button::before,
.button--outline::before {
  content: '';
  position: absolute;
  inset: 0;
  -webkit-mask-image: url('svgs/magnolis--button-light.svg');
  mask-image: url('svgs/magnolis--button-light.svg');
  mask-size: 100% 100%;
  mask-repeat: no-repeat;
  background-color: currentColor;
  pointer-events: none;
}

.wp-block-button>.wp-block-button__link,
.button--outline>span {
  color: inherit;
  background-color: transparent;
  text-transform: uppercase;
  font-size: var(--text-sm);
  border: 0;
}

.burger-button {
  text-transform: uppercase;
  background: transparent;
  border: none;
  padding: 0;
  cursor: pointer;
  font-size: var(--text-sm);
}

.burger-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  visibility: hidden;
}

.menu-item.instagram a::before,
.menu-item.linkedin a::before {
  content: '';
  display: inline-block;
  width: var(--text-base);
  height: var(--text-base);
  background-color: currentColor;
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  margin-right: var(--spacing-md);
}

.menu-item.instagram a::before {
  -webkit-mask-image: url('svgs/magnolis--instagram.svg');
  mask-image: url('svgs/magnolis--instagram.svg');
}

.menu-item.linkedin a::before {
  -webkit-mask-image: url('svgs/magnolis--linkedin.svg');
  mask-image: url('svgs/magnolis--linkedin.svg');
}

.menu-item.instagram a,
.menu-item.linkedin a {
  text-decoration: underline;
  align-items: anchor-center;
}

.menu-item.privacy a {
  text-decoration: underline;
  opacity: 0.5;
}

.section--hero .section-container,
.section--s-scroll .section-container,
.section--h-o-scroll .section-container {
  min-height: 100svh;
  display: flex;
  align-items: center;
  justify-content: center;
}

.home .section--hero {
  z-index: 0;
  background-image: url('textures/magnolis--hero-bg-1.webp');
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
}

.section--wrapper {
  position: relative;
  z-index: 1;
  isolation: isolate;
  background-image: url('textures/magnolis--texture-bg-flow-1.webp');
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
}

.section--wrapper>.section-container {
  padding-bottom: var(--spacing-4xl);
}

.section--wrapper>.section-container:first-of-type {
  padding-top: var(--spacing-4xl);
}




.section:has(.bg--1) {
  min-height: 100svh;
  background-image: url('textures/magnolis--texture-bg-1.webp');
  background-size: cover;
  background-repeat: no-repeat;
  background-position: top center;
}

.section:has(.bg--2) {
  min-height: 100svh;
  background-image: url('textures/magnolis--texture-bg-2.webp');
  background-size: cover;
  background-repeat: no-repeat;
  background-position: top center;
  display: flex;
  align-items: center;
  justify-content: center;
}

.section:has(.bg--3) {
  min-height: 100svh;
  height: 100%;
  background-image: url('textures/magnolis--texture-bg-3.webp');
  background-size: cover;
  background-repeat: no-repeat;
  background-position: top center;
}

.section:has(.h-scroll) {
  background-image: none;

  & .section-container {
    min-height: 100svh;
    min-width: 100svw;
    background-image: url('textures/magnolis--texture-bg-3.webp');
    background-size: cover;
    background-repeat: no-repeat;
    background-position: top center;
    display: flex;
    align-items: center;
  }
}

.section-container:has(.bg--cazimir) {
  position: relative;
  min-height: 100svh;
  max-width: 100%;
  display: flex;
  align-items: center;
  padding: 0;
}

.section-container .bg--cazimir {
  padding: 0 var(--spacing-lg);
  max-width: var(--max-w-screen);
  margin: 0 auto;
}

.bg--cazimir::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 0;
  width: 45%;
  aspect-ratio: 4/3;
  transform: translateY(-50%);
  background-image: url('textures/magnolis--texture-bg-cazimir.webp');
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-position: bottom left;
  z-index: 0;
  pointer-events: none;
}

.bg--cazimir .wp-block-image {
  margin-left: var(--spacing-xl);
  position: relative;
}

.bg--cazimir .wp-block-heading {
  max-width: var(--max-w-xs);
  font-size: var(--text-lg-xl);
}

.bg--cazimir p {
  max-width: var(--max-w-xs);
}

.section--sticky {
  position: sticky;
  top: 0;
  overflow: hidden;
}

.wp-block-gallery.swiper {
  display: block !important;
  height: 100svh;
  width: 100%;
}

body .swiper-pagination-bullet {
  opacity: 1;
  background: transparent;
  border: 1px solid var(--color-dark);
}

body .swiper-pagination-bullet-active {
  background: var(--color-dark);
}

.wp-block-gallery .swiper-slide {
  display: flex;
  align-items: center;
  justify-content: center;
}

.wp-block-gallery .swiper-slide figure {
  max-width: var(--max-w-sm) !important;
  height: auto;
}

.wp-block-gallery .swiper-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ───── c-swiper: scroll-synced gallery ───── */
.c-swiper {
  display: grid !important;
  grid-template-columns: auto 1fr 1fr;
  gap: var(--spacing-xl);
}

.c-swiper__pagination {
  position: sticky;
  top: 0;
  height: 100svh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.c-swiper__texts>div {
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.c-swiper__texts .wp-block-heading {
  font-size: var(--text-base-lg);
}

.team>.wp-block-column>.wp-block-heading,
.c-swiper__texts .wp-block-heading:first-child {
  font-family: var(--font-sans);
  font-size: var(--text-lg);
}

.team>.wp-block-column>:not(.wp-block-heading):not(.wp-block-columns) {
  font-family: var(--font-serif);
  font-size: var(--text-base-lg);
  max-width: var(--max-w-xs);
  margin-inline: auto;
}


.team>.wp-block-column>.wp-block-columns>.wp-block-column {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.team .wp-block-columns .wp-block-heading {
  font-size: var(--text-base-lg);
  margin: 0;
}

.team>.wp-block-column> :not(.wp-block-columns) {
  margin-bottom: var(--spacing-xl);
}

.c-swiper__texts .wp-block-details {
  position: relative;
}

.c-swiper__texts .wp-block-details>*:not(:first-child) {
  position: absolute;
}

.c-swiper__texts .wp-block-details>summary {
  text-decoration: underline;
}

.c-swiper__images {
  position: sticky;
  top: 0;
  height: 100svh;
}

.c-swiper__images>.wp-block-column {
  position: absolute;
  inset: 0;
  opacity: 0;
  display: flex;
  align-items: center;
}