/* 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: 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;
}

/* ------------------------------------------------------------------------- */
/* Globals */
/* ------------------------------------------------------------------------- */

:root {
  --transition: 0.2s ease;
}

/* ------------------------------------------------------------------------- */
/* Utilities */
/* ------------------------------------------------------------------------- */

.sr-only {
  border: 0                      !important;
  clip: rect(1px, 1px, 1px, 1px) !important;
  clip-path: inset(50%)          !important;
  height: 1px                    !important;
  overflow: hidden               !important;
  padding: 0                     !important;
  position: absolute             !important;
  width: 1px                     !important;
  white-space: nowrap            !important;
}

/* ------------------------------------------------------------------------- */
/* Typography */
/* ------------------------------------------------------------------------- */

@font-face {
  font-family: 'Sono';
  font-style: normal;
  font-weight: 200 800;
  src: url('fonts/Trispace.woff2') format("woff2-variations");
  font-display: swap;
}

body {
  font-family: "Sono", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
  font-variation-settings: "wdth" 90;
}

h1 {
  font-variation-settings: "wdth" 120;
}

h2 {
  margin-block-start: 3rem;
  font-variation-settings: "wdth" 110;
}

h3 {
  font-variation-settings: "wdth" 100;
}

h4 {
  font-variation-settings: "wdth" 90;
}

h3 small {
  font-size: 0.65em;
}

strong {
  font-variation-settings: "wdth" 95;
  font-weight: 600;
}

footer {
  font-weight: 300;
  font-variation-settings: "wdth" 100;
  font-size: 0.8rem;
}

/* ------------------------------------------------------------------------- */
/* Layout */
/* ------------------------------------------------------------------------- */

body {
  display: flex;
  flex-direction: column;
  gap: 3rem;
  margin: 0;
  padding-inline: clamp(1rem, 5vw, 3rem);
}

main {
  flex: 1 0 auto;
}

main > :not(section.liste) {
  max-width: 90ch;
}

footer {
  padding-block-start: 2rem;
  padding-block-end: 0.5rem;
  border-block-start: 1px solid #999;
}

/* ------------------------------------------------------------------------- */
/* Components */
/* ------------------------------------------------------------------------- */

pre {
  background-color: #f3f3f3;
  padding-inline: 0.5em;
  overflow: scroll;
}

section.liste {
  margin-block: 1.5rem;
  gap: 2rem 1.5rem;
}

@media (width < 700px) {
  section.liste {
    display: flex;
    flex-direction: column;
  }
}

@media (width >= 700px) {
  section.liste {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
  }
}

section.liste article {
  --emoji-size: 3rem;
  --hsl-base: hsl(var(--hue, 0deg), 50%, 50%);

  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  justify-content: end;
  padding-top: calc(var(--emoji-size) + 0.5rem);

  &:has(> a:active, > a:hover, > a:focus-within)::before {
    --circle-size: 2;

    opacity: 1;
  }
}

section.liste article::before {
  content: "";
  display: block;
  width: calc(var(--circle-size, 1.4) * var(--emoji-size));
  height: calc(var(--circle-size, 1.4) * var(--emoji-size));
  position: absolute;
  transform: translate(-50%, -50%);
  inset-block-start: calc(var(--emoji-size) / 2);
  inset-inline-start: calc(var(--emoji-size) / 2);
  background-image: linear-gradient(oklch(from var(--hsl-base) 95% 0.05 h), oklch(from var(--hsl-base) 75% 0.15 h));
  z-index: -1;
  opacity: 0.5;
  border-radius: calc(1.4 * var(--emoji-size));
  transition:
    width var(--transition),
    height var(--transition),
    opacity var(--transition);
}

section.liste article h3, section.liste article p {
  margin: 0;
}

section.liste article a {
  display: block;
  position: absolute;
  inset-block: 0;
  inset-inline: 0;
  border-radius: 1.2rem;
}

section.liste article a:focus-visible {
  outline-offset: 0.4rem;
  outline: 2px solid var(--hsl-base);
}

section.liste article .adresse {
  display: block;
  max-width: 100%;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  text-decoration: underline;
  text-decoration-skip-ink: auto;
}

section.liste article .emoji {
  display: block;
  position: absolute;
  inset-block-start: 0;
  inset-inline-start: 0;
  font-size: var(--emoji-size);
  line-height: 1;
  height: var(--emoji-size);
}

@-moz-document url-prefix() { 
  section.liste article::before {
    background-image: linear-gradient(hsl(var(--hue, 0deg), 80%, 90%), hsl(var(--hue, 0deg), 60%, 70%));
  }
}