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

:root {
  --color-primary: var(--wp--preset--color--primary, #c67dff);
  --color-primary-light: color-mix(in oklab, var(--color-primary), white 12%);
  --color-primary-lighter: color-mix(in srgb, var(--color-primary) 30%, white);
  --color-secondary: var(--wp--preset--color--secondary, #7958b3);
  --color-secondary-light: color-mix(in oklab, var(--color-secondary), white 20%);
  --color-secondary-lighter: color-mix(in srgb, var(--color-secondary) 8%, white);
  --color-highlight: var(--wp--preset--color--highlight, #ffbd59);
  --color-on-emphasis: #fff;
  --color-on-emphasis-muted: rgb(255 255 255 / 0.6);
  --color-on-emphasis-subtle: rgb(255 255 255 / 0.16);
  --color-scrim: rgb(0 0 0 / 0.5);
  --shadow-secondary: rgb(121 88 179 / 0.25);
  --color-neutral: #4b5563;
  --color-neutral-light: color-mix(in oklab, var(--color-neutral), white 20%);
  --color-foreground: #1e1e1e;
  --color-background: #fff;
  --color-foreground-strong: color-mix(in oklab, var(--color-foreground), var(--color-background) 22%);
  --color-foreground-muted: color-mix(in oklab, var(--color-foreground), var(--color-background) 42%);
  --color-foreground-faint: color-mix(in oklab, var(--color-foreground), var(--color-background) 62%);
  --color-background-variant: color-mix(in oklab, var(--color-background), var(--color-foreground) 3%);
  --color-outline: color-mix(in oklab, var(--color-background), var(--color-foreground) 16%);
  --color-outline-variant: color-mix(in oklab, var(--color-background), var(--color-foreground) 8%);
  --color-error: #dc2626;
  --focus-ring: var(--color-secondary);
  --font-family-header: var(--wp--preset--font-family--heading, "League Spartan", sans-serif);
  --font-family-body: var(--wp--preset--font-family--body, "Lato", sans-serif);
  --font-weight-header: 600;
  --padding-body-horizontal: 64px;
  --z-index-infinite: 100000;
}

h1,
h2,
h3,
h4 {
  font-family: var(--font-family-header);
  font-weight: var(--font-weight-header);
  margin: 0;
}

p {
  line-height: 1.4;
}

body {
  margin: 0;
  padding: 0;
  font-family: var(--font-family-body);
  color: var(--color-foreground);
  background-color: var(--color-background);
}
body.overflow-hidden {
  overflow: hidden;
}

input,
textarea {
  font-family: var(--font-family-body);
  color: var(--color-foreground);
}

a.link {
  color: var(--color-secondary);
  text-decoration: none;
}
a.link.white {
  color: var(--color-on-emphasis);
}
a.link.no-color {
  color: inherit;
  transition: color 100ms ease;
}
a.link.no-color:hover {
  color: var(--color-secondary);
}

article {
  margin-top: 20px;
}
article p {
  line-height: 1.75;
  margin-bottom: 8px;
}
article summary {
  line-height: 1.75;
  margin-bottom: 1rem;
}
article details > * {
  margin-left: 2rem;
}
article details > summary {
  margin-left: 0;
}

.abs-centered {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

/* Text */
.title {
  font-size: 2.5rem;
}

.section-title {
  font-size: 2rem;
}

.subtitle {
  font-size: 1.2rem;
}

.truncate {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.alignright {
  float: right;
  margin: 1rem;
  margin-right: 0;
}

.alignleft {
  float: left;
  margin: 1rem;
  margin-left: 0;
}

.skeleton {
  background-color: var(--color-background-variant);
  border: 1px solid var(--color-outline-variant);
  border-radius: 12px;
}

/* Sections */
section {
  position: relative;
  padding: 4rem var(--padding-body-horizontal);
}
section:nth-child(odd):not(:first-child) {
  background-color: var(--color-background-variant);
}

section.centered {
  text-align: center;
}

section.reduced-top-space {
  padding-top: 3rem;
}

section .section-content {
  max-width: 1300px;
  width: 100%;
  margin: 0 auto;
}

section h1.section-title {
  margin-bottom: 0.6em;
}

.section-container {
  margin: 48px auto;
}

.section-divider {
  border-bottom: 1px solid var(--color-primary-light);
  margin: 2rem auto;
  width: 100%;
}

/* Page layout (keeps footer stuck to bottom) */
.body-inner {
  min-height: calc(100vh - 48px);
}

/* Plugin components */
.grecaptcha-badge {
  visibility: hidden;
}

/* Media queries */
@media screen and (max-width: 1000px) {
  :root {
    --padding-body-horizontal: 48px;
  }
}
@media screen and (max-width: 480px) {
  :root {
    --padding-body-horizontal: 24px;
  }
}
/* Accessibility */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  padding: 12px 20px;
  background-color: var(--color-secondary);
  color: var(--color-on-emphasis);
  text-decoration: none;
  border-radius: 0 0 6px 0;
}
.skip-link:focus {
  left: 0;
}

:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
}

.nav-screen,
footer.app-footer {
  --focus-ring: var(--color-on-emphasis);
}