@import "./reset.css";

/* Styles intended only for the front.*/
html {
  scroll-behavior: smooth;
}

@media screen and (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

:root {
  --webvibe-accent: var(--wp--preset--color--accent, #de070d);
  --webvibe-accent-bg: var(--wp--preset--color--accent-bg, #0b7fea);
  --webvibe-text-dark: var(--wp--preset--color--text-dark, #000000);
  --webvibe-text-light: var(--wp--preset--color--text-light, #ffffff);
  --webvibe-container-max: var(--wp--style--global--wide-size, 1360px);
  --webvibe-container-padding: var(--wp--custom--layout--container-padding, 20px);
  --webvibe-spacing-none-desktop: 0px;
  --webvibe-spacing-none-tablet: 0px;
  --webvibe-spacing-none-mobile: 0px;
  --webvibe-spacing-sm-desktop: 50px;
  --webvibe-spacing-sm-tablet: 40px;
  --webvibe-spacing-sm-mobile: 30px;
  --webvibe-spacing-md-desktop: 80px;
  --webvibe-spacing-md-tablet: 60px;
  --webvibe-spacing-md-mobile: 40px;
  --webvibe-spacing-lg-desktop: 100px;
  --webvibe-spacing-lg-tablet: 75px;
  --webvibe-spacing-lg-mobile: 50px;
  --webvibe-spacing-xl-desktop: 175px;
  --webvibe-spacing-xl-tablet: 120px;
  --webvibe-spacing-xl-mobile: 80px;
}

body {
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  font-family: var(--wp--preset--font-family--barlow);
  font-style: normal;
  font-size: var(--wp--preset--font-size--medium);
  line-height: 1.5;
  overflow-x: hidden;
  color: var(--webvibe-text-dark);
  padding: 0;
}

body .is-layout-constrained > * + *,
body .is-layout-flow > * + * {
  margin-block-start: 0;
}

:where(h1, h2, h3, h4, h5, h6) {
  font-family: var(--wp--preset--font-family--barlow-condensed);
  letter-spacing: 0;
  margin-top: 0;
}

:where(p, ul, ol, figure) {
  margin-top: 0;
}

:where(.wp-site-blocks) > * {
  margin-block-start: 0;
}

.has-global-padding {
  padding-right: 0;
  padding-left: 0;
}

.wrapper {
  width: min(100% - (var(--webvibe-container-padding) * 2), var(--webvibe-container-max));
  margin-inline: auto;
  padding-left: 0;
  padding-right: 0;
  box-sizing: border-box;
}

.webvibe-section {
  width: 100%;
  max-width: none;
  box-sizing: border-box;
}

.webvibe-spacing-pt-none {
  padding-top: var(--webvibe-spacing-none-desktop);
}

.webvibe-spacing-pb-none {
  padding-bottom: var(--webvibe-spacing-none-desktop);
}

.webvibe-spacing-mt-none {
  margin-top: var(--webvibe-spacing-none-desktop);
}

.webvibe-spacing-mb-none {
  margin-bottom: var(--webvibe-spacing-none-desktop);
}

.webvibe-spacing-pt-sm {
  padding-top: var(--webvibe-spacing-sm-desktop);
}

.webvibe-spacing-pb-sm {
  padding-bottom: var(--webvibe-spacing-sm-desktop);
}

.webvibe-spacing-mt-sm {
  margin-top: var(--webvibe-spacing-sm-desktop);
}

.webvibe-spacing-mb-sm {
  margin-bottom: var(--webvibe-spacing-sm-desktop);
}

.webvibe-spacing-pt-md {
  padding-top: var(--webvibe-spacing-md-desktop);
}

.webvibe-spacing-pb-md {
  padding-bottom: var(--webvibe-spacing-md-desktop);
}

.webvibe-spacing-mt-md {
  margin-top: var(--webvibe-spacing-md-desktop);
}

.webvibe-spacing-mb-md {
  margin-bottom: var(--webvibe-spacing-md-desktop);
}

.webvibe-spacing-pt-lg {
  padding-top: var(--webvibe-spacing-lg-desktop);
}

.webvibe-spacing-pb-lg {
  padding-bottom: var(--webvibe-spacing-lg-desktop);
}

.webvibe-spacing-mt-lg {
  margin-top: var(--webvibe-spacing-lg-desktop);
}

.webvibe-spacing-mb-lg {
  margin-bottom: var(--webvibe-spacing-lg-desktop);
}

.webvibe-spacing-pt-xl {
  padding-top: var(--webvibe-spacing-xl-desktop);
}

.webvibe-spacing-pb-xl {
  padding-bottom: var(--webvibe-spacing-xl-desktop);
}

.webvibe-spacing-mt-xl {
  margin-top: var(--webvibe-spacing-xl-desktop);
}

.webvibe-spacing-mb-xl {
  margin-bottom: var(--webvibe-spacing-xl-desktop);
}

.webvibe-section-small {
  padding-top: var(--webvibe-spacing-sm-desktop);
  padding-bottom: var(--webvibe-spacing-sm-desktop);
}

.webvibe-section-medium {
  padding-top: var(--webvibe-spacing-md-desktop);
  padding-bottom: var(--webvibe-spacing-md-desktop);
}

.webvibe-section-large {
  padding-top: var(--webvibe-spacing-lg-desktop);
  padding-bottom: var(--webvibe-spacing-lg-desktop);
}

@media (max-width: 1024px) {
  .webvibe-spacing-pt-sm {
    padding-top: var(--webvibe-spacing-sm-tablet);
  }

  .webvibe-spacing-pb-sm {
    padding-bottom: var(--webvibe-spacing-sm-tablet);
  }

  .webvibe-spacing-mt-sm {
    margin-top: var(--webvibe-spacing-sm-tablet);
  }

  .webvibe-spacing-mb-sm {
    margin-bottom: var(--webvibe-spacing-sm-tablet);
  }

  .webvibe-spacing-pt-md {
    padding-top: var(--webvibe-spacing-md-tablet);
  }

  .webvibe-spacing-pb-md {
    padding-bottom: var(--webvibe-spacing-md-tablet);
  }

  .webvibe-spacing-mt-md {
    margin-top: var(--webvibe-spacing-md-tablet);
  }

  .webvibe-spacing-mb-md {
    margin-bottom: var(--webvibe-spacing-md-tablet);
  }

  .webvibe-spacing-pt-lg {
    padding-top: var(--webvibe-spacing-lg-tablet);
  }

  .webvibe-spacing-pb-lg {
    padding-bottom: var(--webvibe-spacing-lg-tablet);
  }

  .webvibe-spacing-mt-lg {
    margin-top: var(--webvibe-spacing-lg-tablet);
  }

  .webvibe-spacing-mb-lg {
    margin-bottom: var(--webvibe-spacing-lg-tablet);
  }

  .webvibe-spacing-pt-xl {
    padding-top: var(--webvibe-spacing-xl-tablet);
  }

  .webvibe-spacing-pb-xl {
    padding-bottom: var(--webvibe-spacing-xl-tablet);
  }

  .webvibe-spacing-mt-xl {
    margin-top: var(--webvibe-spacing-xl-tablet);
  }

  .webvibe-spacing-mb-xl {
    margin-bottom: var(--webvibe-spacing-xl-tablet);
  }

  .webvibe-section-small {
    padding-top: var(--webvibe-spacing-sm-tablet);
    padding-bottom: var(--webvibe-spacing-sm-tablet);
  }

  .webvibe-section-medium {
    padding-top: var(--webvibe-spacing-md-tablet);
    padding-bottom: var(--webvibe-spacing-md-tablet);
  }

  .webvibe-section-large {
    padding-top: var(--webvibe-spacing-lg-tablet);
    padding-bottom: var(--webvibe-spacing-lg-tablet);
  }
}

@media (max-width: 640px) {
  .webvibe-spacing-pt-sm {
    padding-top: var(--webvibe-spacing-sm-mobile);
  }

  .webvibe-spacing-pb-sm {
    padding-bottom: var(--webvibe-spacing-sm-mobile);
  }

  .webvibe-spacing-mt-sm {
    margin-top: var(--webvibe-spacing-sm-mobile);
  }

  .webvibe-spacing-mb-sm {
    margin-bottom: var(--webvibe-spacing-sm-mobile);
  }

  .webvibe-spacing-pt-md {
    padding-top: var(--webvibe-spacing-md-mobile);
  }

  .webvibe-spacing-pb-md {
    padding-bottom: var(--webvibe-spacing-md-mobile);
  }

  .webvibe-spacing-mt-md {
    margin-top: var(--webvibe-spacing-md-mobile);
  }

  .webvibe-spacing-mb-md {
    margin-bottom: var(--webvibe-spacing-md-mobile);
  }

  .webvibe-spacing-pt-lg {
    padding-top: var(--webvibe-spacing-lg-mobile);
  }

  .webvibe-spacing-pb-lg {
    padding-bottom: var(--webvibe-spacing-lg-mobile);
  }

  .webvibe-spacing-mt-lg {
    margin-top: var(--webvibe-spacing-lg-mobile);
  }

  .webvibe-spacing-mb-lg {
    margin-bottom: var(--webvibe-spacing-lg-mobile);
  }

  .webvibe-spacing-pt-xl {
    padding-top: var(--webvibe-spacing-xl-mobile);
  }

  .webvibe-spacing-pb-xl {
    padding-bottom: var(--webvibe-spacing-xl-mobile);
  }

  .webvibe-spacing-mt-xl {
    margin-top: var(--webvibe-spacing-xl-mobile);
  }

  .webvibe-spacing-mb-xl {
    margin-bottom: var(--webvibe-spacing-xl-mobile);
  }

  .webvibe-section-small {
    padding-top: var(--webvibe-spacing-sm-mobile);
    padding-bottom: var(--webvibe-spacing-sm-mobile);
  }

  .webvibe-section-medium {
    padding-top: var(--webvibe-spacing-md-mobile);
    padding-bottom: var(--webvibe-spacing-md-mobile);
  }

  .webvibe-section-large {
    padding-top: var(--webvibe-spacing-lg-mobile);
    padding-bottom: var(--webvibe-spacing-lg-mobile);
  }
}

/* Legacy aliases for older section markup. */
.webvibe-container {
  width: min(100% - (var(--webvibe-container-padding) * 2), var(--webvibe-container-max));
  margin-inline: auto;
  padding-left: 0;
  padding-right: 0;
  box-sizing: border-box;
}
