/* Main frontend styles for Phytaxis Parent */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  font-kerning: none;
  text-rendering: optimizeSpeed;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--wp--preset--font-family--phytaxis-bold);
  font-weight: 700;
  line-height: 100%;
  margin-bottom: var(--px-16);
}

h1::first-letter,
h2::first-letter,
h3::first-letter {
  font-feature-settings: "salt";
}

h1 {
  font-size: var(--px-48);
  line-height: 83.333%;
  letter-spacing: -1px;

  @media (min-width: 48rem) {
    font-size: var(--px-72);
    line-height: 105.556%;
    letter-spacing: -2px;
  }

  @media (min-width: 62rem) {
    font-size: var(--px-96);
    line-height: 100%;
  }
}

h2 {
  font-size:  var(--px-30);
  line-height: 93.333%;
  letter-spacing: -1px;

  @media (min-width: 48rem) {
    font-size: var(--px-72);
    line-height: 100%;
    letter-spacing: -2px;
  }
}

h3 {
  font-size: var(--px-30);
  line-height: 93.333%;
  letter-spacing: 0.5px;

  @media (min-width: 48rem) {
    font-size: var(--px-36);
    line-height: 100%;
  }
}

.Preamble {
  font-size: var(--px-30);
  font-family: var(--wp--preset--font-family--phytaxis-bold);
  font-weight: 700;
  line-height: 93.333%;
  letter-spacing: 0.5px;
  margin-bottom: var(--px-16);

  @media (min-width: 48rem) {
    font-size: var(--px-36);
    line-height: 100%;
  }
}

p,
a,
ul,
ol,
li,
blockquote,
table,
th,
td,
pre,
code,
kbd,
samp,
input,
time,
textarea,
select,
option,
button,
label,
legend,
figcaption,
caption {
  font-family: var(--wp--preset--font-family--suisse-intl);
  line-height: 140%;
}

ul,
ol,
li {
  list-style: none;
}

a {
  text-decoration: none;
  color: inherit;
}

a:hover {
  color: inherit;
}

.wp-site-blocks {
  overflow-x: clip;
}

.bg-beige {
  background-color: var(--wp--preset--color--beige);
  color: var(--wp--preset--color--primary-text);
}

.bg-grey {
  background-color: var(--wp--preset--color--grey);
  color: var(--wp--preset--color--white);
}

.bg-light-blue {
  background-color: var(--wp--preset--color--light-blue);
  color: var(--wp--preset--color--primary-text);
}

.bg-yellow {
  background-color: var(--wp--preset--color--yellow);
  color: var(--wp--preset--color--primary-text);
}

.bg-green {
  background-color: var(--wp--preset--color--green);
  color: var(--wp--preset--color--yellow);
}

.bg-white {
  background-color: var(--wp--preset--color--white);
  color: var(--wp--preset--color--primary-text);
}

.bg-white .wp-block-button__link {
  background-color: var(--wp--preset--color--beige) !important;
  color: var(--wp--preset--color--primary-text) !important;
}

/* Image aspect ratios */
.aspect-ratio-16-9 {
  --ar: calc(16 / 9);
  aspect-ratio: 16 / 9;
}

.aspect-ratio-16-9 img {
  aspect-ratio: 16 / 9;
}

.aspect-ratio-9-16 {
  --ar: calc(9 / 16);
  aspect-ratio: 9 / 16;
}

.aspect-ratio-9-16 img {
  aspect-ratio: 9 / 16;
}

.aspect-ratio-1-1 {
  --ar: calc(1 / 1);
  aspect-ratio: 1 / 1;
}

.aspect-ratio-1-1 img {
  aspect-ratio: 1 / 1;
}

.aspect-ratio-4-3 {
  --ar: calc(4 / 3);
  aspect-ratio: 4 / 3;
}

.aspect-ratio-4-3 img {
  aspect-ratio: 4 / 3;
}

.aspect-ratio-3-4 {
  --ar: calc(3 / 4);
  aspect-ratio: 3 / 4;
}

.aspect-ratio-3-4 img {
  aspect-ratio: 3 / 4;
}

/* ========================== Utilities ========================== */
.u-salt {
  font-feature-settings: "salt" 1;
}

/* ========================== Cutouts ========================== */
.u-cutout {
  /* ~32deg angle — cut-y = cut-x * tan(32deg) ≈ 0.6249 */
  --cut-x: 10rem;
  --cut-y: 6.25rem;

  @media (max-width: 74.999rem) {
    --cut-x: 8rem;
    --cut-y: 5rem;
  }

  @media (max-width: 62rem) {
    --cut-x: 6.5rem;
    --cut-y: 4.06rem;
  }

  @media (max-width: 48rem) {
    --cut-x: 5rem;
    --cut-y: 3.12rem;
  }
}

.u-cutout.u-cutoutSmall {
  --cut-x: 4rem;
  --cut-y: 2.5rem;

  @media (max-width: 74.999rem) {
    --cut-x: 3.25rem;
    --cut-y: 2.03rem;
  }

  @media (max-width: 62rem) {
    --cut-x: 2.5rem;
    --cut-y: 1.56rem;
  }

  @media (max-width: 48rem) {
    --cut-x: 2rem;
    --cut-y: 1.25rem;
  }
}

.u-cutout.u-cutoutXs {
  --cut-x: 2rem;
  --cut-y: 1.25rem;

  @media (max-width: 74.999rem) {
    --cut-x: 1.625rem;
    --cut-y: 1.02rem;
  }

  @media (max-width: 62rem) {
    --cut-x: 1.25rem;
    --cut-y: 0.78rem;
  }

  @media (max-width: 48rem) {
    --cut-x: 1rem;
    --cut-y: 0.625rem;
  }
}

.u-cutout.u-cutoutTopLeft {
  clip-path: polygon(
    var(--cut-x) 0%,
    100% 0%,
    100% 100%,
    0% 100%,
    0% var(--cut-y)
  );
}

.u-cutout.u-cutoutTopRight {
  clip-path: polygon(
    0% 0%,
    calc(100% - var(--cut-x)) 0%,
    100% var(--cut-y),
    100% 100%,
    0% 100%
  );
}

.u-cutout.u-cutoutBottomLeft {
  clip-path: polygon(
    0% 0%,
    100% 0%,
    100% 100%,
    var(--cut-x) 100%,
    0% calc(100% - var(--cut-y))
  );
}

.u-cutout.u-cutoutBottomRight {
  clip-path: polygon(
    0% 0%,
    100% 0%,
    100% calc(100% - var(--cut-y)),
    calc(100% - var(--cut-x)) 100%,
    0% 100%
  );
}

.u-cutout.u-cutoutDiagonal {
  clip-path: polygon(
    var(--cut-x) 0%,
    100% 0%,
    100% calc(100% - var(--cut-y)),
    calc(100% - var(--cut-x)) 100%,
    0% 100%,
    0% var(--cut-y)
  );
}

.u-cutout.u-cutoutTop {
  clip-path: polygon(
    var(--cut-x) 0%,
    calc(100% - var(--cut-x)) 0%,
    100% var(--cut-y),
    100% 100%,
    0% 100%,
    0% var(--cut-y)
  );
}

.u-cutout img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

main.SiteContent {
  position: relative;
  padding-top: var(--header-height);
}

/* ========================== Button Component ========================== */

.Button {
  display: inline-flex;
  position: relative;
  padding: 8px 16px;
  padding-right: 58px;
  align-items: center;
  gap: 8px;
  font-size: var(--px-16);
  font-weight: 700;
  background: var(--wp--preset--color--white);
  color: var(--wp--preset--color--contrast);

  @media (min-width: 48rem) {
    font-size: var(--px-18);
  }
}

.bg-white .Button {
  background: var(--wp--preset--color--contrast);
  color: var(--wp--preset--color--base);
}

.Button::before {
  content: '';
  position: absolute;
  right: var(--px-14);
  width: var(--px-32);
  top: 50%;
  height: 1.5px;
  background: currentColor;
  transform: translateY(-50%);
  transition: right 0.2s ease-in-out;
}

.Button::after {
  content: '';
  position: absolute;
  right: var(--px-15);
  top: 50%;
  width: var(--px-10);
  height: var(--px-10);
  border-top: 1.5px solid currentColor;
  border-right: 1.5px solid currentColor;
  transform: translateY(-50%) rotate(45deg);
  transition: right 0.2s ease-in-out;
}

.Button:hover {
  background: var(--wp--preset--color--contrast);
  color: var(--wp--preset--color--white);
}

.bg-white .Button:hover {
  background: var(--wp--preset--color--white);
  color: var(--wp--preset--color--contrast);
}

.Button:hover::before {
  right: var(--px-12);
}

.Button:hover::after {
  right: 11px;
}