/* ==========================================================================
   Resets and base element styles
   ========================================================================= */

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

html {
  scroll-behavior: smooth;
}

a,
button,
[role="button"],
input:is([type="button"], [type="reset"], [type="submit"]) {
  -webkit-tap-highlight-color: transparent;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

body {
  margin: 0;
  min-height: 100vh;
  overflow-x: clip;
  font-family: var(--body-font-family);
  font-size: var(--body-font-size);
  font-weight: var(--body-font-weight);
  font-style: var(--body-font-style);
  letter-spacing: var(--body-letter-spacing);
  line-height: var(--body-line-height);
}

h1,
h2,
h3,
h4,
h5,
h6,
p {
  margin: 0;
}

ul,
ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

img,
picture,
video,
svg {
  display: block;
  max-width: 100%;
  height: auto;
}

/* --- Base typography --- */

h1 {
  font-family: var(--h1-font-family);
  font-size: var(--h1-font-size);
  font-weight: var(--h1-font-weight);
  font-style: var(--h1-font-style);
  letter-spacing: var(--h1-letter-spacing);
  line-height: var(--h1-line-height);
}

h2 {
  font-family: var(--h2-font-family);
  font-size: var(--h2-font-size);
  font-weight: var(--h2-font-weight);
  font-style: var(--h2-font-style);
  letter-spacing: var(--h2-letter-spacing);
  line-height: var(--h2-line-height);
}

h3 {
  font-family: var(--h3-font-family);
  font-size: var(--h3-font-size);
  font-weight: var(--h3-font-weight);
  font-style: var(--h3-font-style);
  letter-spacing: var(--h3-letter-spacing);
  line-height: var(--h3-line-height);
}

h4 {
  font-family: var(--h4-font-family);
  font-size: var(--h4-font-size);
  font-weight: var(--h4-font-weight);
  font-style: var(--h4-font-style);
  letter-spacing: var(--h4-letter-spacing);
  line-height: var(--h4-line-height);
}

h5 {
  font-family: var(--h5-font-family);
  font-size: var(--h5-font-size);
  font-weight: var(--h5-font-weight);
  font-style: var(--h5-font-style);
  letter-spacing: var(--h5-letter-spacing);
  line-height: var(--h5-line-height);
}

h6 {
  font-family: var(--h6-font-family);
  font-size: var(--h6-font-size);
  font-weight: var(--h6-font-weight);
  font-style: var(--h6-font-style);
  letter-spacing: var(--h6-letter-spacing);
  line-height: var(--h6-line-height);
}

p {
  font-family: var(--body-font-family);
  font-size: var(--body-font-size);
  font-weight: var(--body-font-weight);
  font-style: var(--body-font-style);
  letter-spacing: var(--body-letter-spacing);
  line-height: var(--body-line-height);
}

strong {
  font-weight: 600;
}

h1.font-bodoni {
  font-family: var(--h1-bodoni-font-family);
  font-size: var(--h1-bodoni-font-size);
  font-weight: var(--h1-bodoni-font-weight);
  font-style: var(--h1-bodoni-font-style);
  letter-spacing: var(--h1-bodoni-letter-spacing);
  line-height: var(--h1-bodoni-line-height);
  font-optical-sizing: none;
}

h2.font-bodoni {
  font-family: var(--h2-bodoni-font-family);
  font-size: var(--h2-bodoni-font-size);
  font-weight: var(--h2-bodoni-font-weight);
  font-style: var(--h2-bodoni-font-style);
  letter-spacing: var(--h2-bodoni-letter-spacing);
  line-height: var(--h2-bodoni-line-height);
  font-optical-sizing: none;
}

h3.font-bodoni {
  font-family: var(--h3-bodoni-font-family);
  font-size: var(--h3-bodoni-font-size);
  font-weight: var(--h3-bodoni-font-weight);
  font-style: var(--h3-bodoni-font-style);
  letter-spacing: var(--h3-bodoni-letter-spacing);
  line-height: var(--h3-bodoni-line-height);
  font-optical-sizing: none;
}

h4.font-bodoni {
  font-family: var(--h4-bodoni-font-family);
  font-size: var(--h4-bodoni-font-size);
  font-weight: var(--h4-bodoni-font-weight);
  font-style: var(--h4-bodoni-font-style);
  letter-spacing: var(--h4-bodoni-letter-spacing);
  line-height: var(--h4-bodoni-line-height);
  font-optical-sizing: none;
}

h5.font-bodoni {
  font-family: var(--h5-bodoni-font-family);
  font-size: var(--h5-bodoni-font-size);
  font-weight: var(--h5-bodoni-font-weight);
  font-style: var(--h5-bodoni-font-style);
  letter-spacing: var(--h5-bodoni-letter-spacing);
  line-height: var(--h5-bodoni-line-height);
  font-optical-sizing: none;
}

h6.font-bodoni {
  font-family: var(--h6-bodoni-font-family);
  font-size: var(--h6-bodoni-font-size);
  font-weight: var(--h6-bodoni-font-weight);
  font-style: var(--h6-bodoni-font-style);
  letter-spacing: var(--h6-bodoni-letter-spacing);
  line-height: var(--h6-bodoni-line-height);
  font-optical-sizing: none;
}

p.font-bodoni {
  font-family: var(--p-bodoni-font-family);
  font-weight: var(--p-bodoni-font-weight);
  font-style: var(--p-bodoni-font-style);
  letter-spacing: var(--p-bodoni-letter-spacing);
  line-height: var(--p-bodoni-line-height);
  font-optical-sizing: none;
}

.text-left {
  text-align: left;
}

.text-center {
  text-align: center;
}

/* --- Text selection --- */

::selection {
  background-color: var(--wp--preset--color--warm-brown);
  color: var(--wp--preset--color--off-white);
}

.section.brown ::selection {
  background-color: var(--wp--preset--color--off-white);
  color: var(--wp--preset--color--warm-brown);
}