/* https://piccalil.li/blog/a-more-modern-css-reset/ */

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

/* Prevent font size inflation */
html {
  -moz-text-size-adjust: none;
  -webkit-text-size-adjust: none;
  text-size-adjust: none;
}

/* Remove default margin in favour of better control in authored CSS */
body, h1, h2, h3, h4, p,
figure, blockquote, dl, dd {
  margin-block-end: 0;
}

/* Remove list styles on ul, ol elements with a list role, which suggests default styling will be removed */
ul[role='list'],
ol[role='list'] {
  list-style: none;
}

/* Set core body defaults */
body {
  min-height: 100vh;
  line-height: 1.5;
}

/* Set shorter line heights on headings and interactive elements */
h1, h2, h3, h4,
button, input, label {
  line-height: 1.1;
}

/* Balance text wrapping on headings */
h1, h2,
h3, h4 {
  text-wrap: balance;
}

/* A elements that don't have a class get default styles */
a:not([class]) {
  text-decoration-skip-ink: auto;
  color: currentColor;
}

/* Make images easier to work with */
img,
picture {
  max-width: 100%;
  display: block;
}

/* Inherit fonts for inputs and buttons */
input, button,
textarea, select {
  font-family: inherit;
  font-size: inherit;
}

/* Make sure textareas without a rows attribute are not tiny */
textarea:not([rows]) {
  min-height: 10em;
}

/* Anything that has been anchored to should have extra scroll margin */
:target {
  scroll-margin-block: 5ex;
}

/* main styles start */

:root {
  --color-dark: #252525;
  --color-light: #efefef;
  --color-django-green: #092e20;
  --color-django-green-light: #198058;
  --color-link: #268bd2;
  /* https://utopia.fyi/type/calculator?c=320,18,1.25,1240,18,1.333,5,2,&s=0.75|0.5|0.25,1.5|2|3|4|6,s-l&g=s,l,xl,12 */
  --size-step-0: clamp(1rem, calc(0.96rem + 0.22vw), 1.13rem);
  --size-step-1: clamp(1.25rem, calc(1.16rem + 0.43vw), 1.5rem);
  --size-step-2: clamp(1.56rem, calc(1.41rem + 0.76vw), 2rem);
  --size-step-3: clamp(1.95rem, calc(1.71rem + 1.24vw), 2.66rem);
  --size-step-4: clamp(2.44rem, calc(2.05rem + 1.93vw), 3.55rem);
}

body {
  margin: 0;
  background: var(--color-light);
  color: var(--color-dark);
  font-family: Avenir, Montserrat, Corbel, 'URW Gothic', source-sans-pro, sans-serif;
  font-weight: normal;
  font-size: var(--size-step-0);
  line-height: 1.7;
}

a {
  color: currentColor;
  -webkit-text-decoration-color: var(--color-link);
          text-decoration-color: var(--color-link);
  text-decoration-thickness: 0.3ex;
  text-underline-offset: 0.3ex;
}

h1,
h2,
h3 {
  font-weight: 700;
  line-height: 1.1;
  text-wrap: balance;
}

h1 {
  font-size: var(--size-step-4);
}

h2 {
  font-size: var(--size-step-3);
}

h3 {
  font-size: var(--size-step-2);
}

ul,
ol {
  -webkit-padding-start: 1em;
          padding-inline-start: 1em;
  margin-block-end: 0;
}

blockquote {
  -webkit-padding-start: 1em;
          padding-inline-start: 1em;
  -webkit-border-start: 0.3em solid;
          border-inline-start: 0.3em solid;
  font-style: italic;
  font-size: var(--size-step-1);
}

/* Utilities */
.flow > * + * {
  -webkit-margin-before: var(--flow-space, 1em);
          margin-block-start: var(--flow-space, 1em);
}

/* Flow and rhythm */
:is(h1, h2, h3, blockquote) {
  --flow-space: 1.5em;
}

:is(h1, h2, h3) + :is(h1, h2, h3) {
  --flow-space: 0.5em;
}

/* Line lengths */
article {
  max-width: 65ch;
  margin-inline: auto;
}

blockquote {
  max-width: 50ch;
}

h1 {
  max-width: 20ch;
}

h2,
h3 {
  max-width: 28ch;
}

label {
  font-weight: 700;
}

textarea, input {
  width: 100%;
}

textarea {
  resize: block;
}

button {
  font-weight: 700;
  padding-inline: 0.5em;
  border: 1px var(--color-dark);
}

header {
  background: var(--color-django-green);
  color: var(--color-light);
  padding: 1.5em 2em;

  & .inner {
    max-width: 65ch;
    margin-inline: auto;
  }

  & a {
    text-decoration-line: none;
    text-decoration-color: var(--color-light);


    &:hover,
    &:focus {
      text-decoration-line: underline;
    }
  }
}

main {
  max-width: 65ch;
  margin-inline: auto;
  padding-block: 2em;
}

nav {
  background: var(--color-django-green-light);
  color: #fff;
  padding: 0.5em 2em;

  & .inner {
    max-width: 65ch;
    margin-inline: auto;
    display: flex;
    flex-wrap: wrap;
    gap: 1.5em;
  }

  & a {
    text-decoration-line: none;
    text-decoration-color: #fff;
    font-weight: 700;

    &:hover,
    &:focus {
      text-decoration-line: underline;
    }
  }
}

.links-list {
  padding-inline-start: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5em 1em;

  & li {
    list-style: none;
  }

  & a {
    display: inline-block;
    background: var(--color-django-green);
    color: var(--color-light);
    padding: 0.3em 0.8em;
    border-radius: 0.3em;
    text-decoration: none;
    font-weight: 700;

    &:hover,
    &:focus {
      background: var(--color-django-green-light);
    }
  }
}

/* Prize draws */

/*
 * Prize draw pages stand alone, with no site header or nav: the screen page
 * goes up on a projector, and the entry page is held in one hand. Sizes are in
 * em so that the whole page scales with the viewport-relative font size below.
 */
.prize-draw {
  --flow-space: 0.8em;
  min-height: 100dvh;
  display: flex;
  background: var(--color-django-green);
  color: var(--color-light);
  font-size: clamp(1.125rem, 2.6vmin, 2.5rem);
  text-align: center;
}

.prize-draw-main {
  width: 100%;
  max-width: 34ch;
  margin: auto;
  padding: 1.5em 1em;
}

/* The screen page has two halves, so it needs the room for them. */
.prize-draw-projected .prize-draw-main {
  max-width: 68ch;
}

.prize-draw-columns {
  display: grid;
  gap: 1em;
}

/* Landscape and roomy: stand the QR code beside the draw itself, so both can
   be read from the back of the room. Phones keep the single column. */
@media (min-width: 45em) {
  .prize-draw-columns {
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: 1.5em;
  }
}

.prize-draw :is(h1, h2) {
  max-width: none;
  text-wrap: balance;
}

.prize-draw h1 {
  font-size: 1.7em;
}

.prize-draw h2 {
  font-size: 1.3em;
}

.prize-draw a {
  text-decoration-color: var(--color-light);
}

/* Entry URLs are long, and must never push the page sideways. */
.prize-draw-qr p {
  overflow-wrap: anywhere;
}

.prize-draw label {
  display: block;
}

.prize-draw input {
  padding: 0.3em 0.4em;
  border: 0.05em solid var(--color-light);
  border-radius: 0.2em;
  font-size: 1.2em;
  text-align: center;
}

.prize-draw button {
  display: block;
  width: 100%;
  margin-block-start: 0.6em;
  padding: 0.4em 0.6em;
  border: 0;
  border-radius: 0.2em;
  background: var(--color-light);
  color: var(--color-django-green);
  font-size: 1.3em;
  font-weight: 700;
  line-height: 1.2;

  &:hover:enabled,
  &:focus-visible:enabled {
    background: #fff;
    cursor: pointer;
  }

  &:disabled {
    opacity: 0.4;
  }
}

.prize-draw .errorlist {
  padding-inline-start: 0;
  color: #ffb4a2;
  font-weight: 700;

  & li {
    list-style: none;
  }
}

.prize-draw-qr svg {
  /* segno draws the quiet zone, so the code needs no padding of its own. */
  width: 100%;
  max-width: 15em;
  aspect-ratio: 1;
  margin-inline: auto;
  border-radius: 0.2em;
}

.prize-draw-count {
  font-size: 1.4em;
  font-weight: 700;
}

.prize-draw-button {
  font-size: 1.8em;
}

.prize-draw-winners {
  padding-inline-start: 0;

  & li {
    list-style: none;
  }

  & .latest {
    font-size: 1.6em;
    font-weight: 700;
    line-height: 1.2;
  }
}

.prize-draw-entrants {
  padding-inline-start: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.3em;
  font-size: 0.75em;

  & li {
    list-style: none;
    display: flex;
    align-items: center;
    gap: 0.2em;
    padding: 0.1em 0.3em 0.1em 0.7em;
    border-radius: 1em;
    background: var(--color-django-green-light);
  }

  /* So the remove button sits inside the chip rather than below it. */
  & form {
    display: contents;
  }

  & button {
    width: auto;
    margin: 0;
    padding: 0 0.3em;
    background: none;
    color: var(--color-light);
    font-size: 1em;
    opacity: 0.6;

    &:hover:enabled,
    &:focus-visible:enabled {
      background: none;
      opacity: 1;
    }
  }
}