/* Reset */
*, *::before, *::after { box-sizing: border-box }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100% }

/* Global variables */
:root {
  --cream: #f3dbc8;
  --dark-blue: hsl(230, 36%, 44%);
  --dark-green: #224823;
  --gold: #b99250;
  --gray: #d5d1cd;
  --light-blue: #c7cbdf;
  --light-green: #8d9ab2;
  /* --maroon: hsl(15, 50%, 25%);  */
  /* variant of #632413; */
  --maroon: #a08c7d;
  --pink: #c37d92;
  --red: #cd563c;
  --orange: #de4c31;

  --font-white: hsl(180, 2%, 91%);
  --font-black: #333127ed;
  /* --font-black: #1d1907; */

  --background: #fffff6;
  --background-dark: hsl(50, 11%, 89%);

  /* --bg-light: hsl(43, 28%, 94%); */
  --bg-light: hsl(45, 35%, 96%);

  --rem: min(calc(0.8vw + 12px), 20px);
  --margin: min(2vw, 2rem);
}

/* Fonts */
@font-face { font-family: dance;    font-weight: 400 700; src: url("/fonts/dance/dance.woff2") format("woff2-variations") }
@font-face { font-family: lato;     font-weight: 400;     src: url("/fonts/lato/Lato-Regular.woff2") }
@font-face { font-family: vollkorn; font-weight: 400;     src: url("/fonts/vollkorn/Medium.woff2") }
@font-face { font-family: vollkorn; font-weight: 700;     src: url("/fonts/vollkorn/Bold.woff2") }

/* Typography */
html { font: 400 var(--rem) / 1.3 lato }
h1   { font: 800        2em / 1.3 vollkorn }
h2   { font: 700      1.2em / 1.3 lato, lato }

/* Structural elements */

html {
  background: var(--background-dark);
}

body {
  max-width: 64em;
  margin: 0 auto;
  color: var(--font-black);
  background: var(--background);
  box-shadow: 0 0 2em #0001;
}

section {
  max-width: 50em;
  margin: calc(var(--margin) * 3) auto;
  padding-inline: var(--margin);
  scroll-margin-top: 5.5em;
}

footer {
  padding: 2em;
  text-align: center;
  background: var(--background-dark);
}

/* Text elements */

/*
  First, set up the margins.
  (Note: Ivan doesn't like this, but it's less bad than a bunch of special-case stuff scattered across the stylesheet.)
*/
h1, h2, p { margin: 0 }
h2 { margin-bottom: .3rem }
p { margin-bottom: .7rem }
p:last-child { margin-top: 0 }

h1 {
  color: var(--light-green);
}

h2 {
  color: var(--maroon);
}

a {
  color: var(--dark-blue);
  font-weight: bold;
  cursor: pointer;
}

.no-break {
    white-space: nowrap;
}

/* Media elements */

img {
  max-width: 100%;
  height: auto;
  vertical-align: middle;
}

/* Form and input elements */

form {
  --bg: #fff8;
  --bg-active: #fffe;
  --outline: #0003;
  --shadow: 0 4px 12px #0002;
}

form.dark {
  --bg: #333d;
  --bg-active: #555d;
  --outline: #fff;
  --shadow: 0 3px 6px #0004;
}

form div {
  display: flex;
  box-shadow: var(--shadow);
  border-radius: .3em; /* we need this for the box shadow… */
}

/* and these for the focus outline… */
form div > :first-child { border-top-left-radius: .3em; border-bottom-left-radius: .3em; }
form div > :last-child { border-top-right-radius: .3em; border-bottom-right-radius: .3em; }

input {
  padding: 0.3em 0.4em .2em;
  border: 0;
  font: inherit;
  color: inherit;
  background: var(--bg);
}

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

input[type="email"] {
  width: 100%;
}

input[type="submit"] {
  width: auto;
  cursor: pointer;
}

input[type="submit"]:hover {
  background: var(--bg-active);
}

input[type="submit"]:disabled {
  opacity: 0.5;
  pointer-events: none;
}

a.luma-checkout--button {
  background-color: var(--cream);
  color: inherit;
  border-radius: 8px;
  padding: .3em .8em;
  transition: none;
}

a.luma-checkout--button:hover {
  background-color: var(--cream);
  color: #000;
  box-shadow: none;
}