/* =========================================================
   WOMB & HEART
   HOMEPAGE FOUNDATION
========================================================= */

:root {
  --white: #ffffff;
  --black: #512c3e;
  --grey: #6b4c5b;

  --burgundy: #560002;
  --burgundy-mid: #512c3e;
  --burgundy-warm: #ee263e;
  --red-glow: #ff1f1f;

  --font: "Host Grotesk", sans-serif;

  --max-width: 1440px;

  --page-x:
    clamp(
      15px,
      2.8vw,
      42px
    );

  --header-h: 104px;

  --ease:
    cubic-bezier(
      0.22,
      1,
      0.36,
      1
    );
}


/* =========================================================
   RESET
========================================================= */

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


html,
body {
  margin: 0;
  padding: 0;

  background: #ffffff;
}


html {
  scroll-behavior: smooth;
}


body {
  overflow-x: hidden;

  color: var(--black);

  font-family: var(--font);

  font-size: 18px;
  line-height: 1.4;

  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}


body.menu-open {
  overflow: hidden;
}


main {
  width: 100%;
}


h1,
h2,
h3,
p,
figure {
  margin: 0;
}


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


button,
a,
span,
strong,
p {
  font-family: var(--font);
}


button {
  cursor: pointer;
}


img {
  display: block;

  max-width: 100%;
}


/* =========================================================
   SHARED HEADER + HERO WIDTH

   BOTH COMPONENTS USE THIS.
========================================================= */

.home-shell {
  width:
    min(
      calc(
        100% -
        var(--page-x) * 2
      ),
      var(--max-width)
    );

  margin-inline: auto;
}


/* =========================================================
   ACCESSIBILITY
========================================================= */

.skip-link {
  position: fixed;

  z-index: 99999;

  top: 10px;
  left: 10px;

  padding: 10px 15px;

  background: #512c3e;
  color: #ffffff;

  transform:
    translateY(-200%);
}


.skip-link:focus {
  transform: translateY(0);
}


a:focus-visible,
button:focus-visible {
  outline:
    2px
    solid
    currentColor;

  outline-offset: 4px;
}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 720px) {

  :root {
    --page-x: 10px;
    --header-h: 78px;
  }

}
/* Match desktop section gaps to the hero-to-intro gap, including hero bottom padding. */
@media (min-width: 1001px) {
  main > .intro-editorial,
  main > .angebote,
  main > .yoga-mama-feature,
  main > .nadja-feature,
  main > .reviews,
  main > .newsletter {
    padding-bottom: calc(clamp(48px, 5vw, 76px) + 14px);
  }

  main > .angebote,
  main > .yoga-mama-feature,
  main > .nadja-feature,
  main > .reviews,
  main > .newsletter {
    padding-top: 0;
  }
}