/* RESET */

/*
  Josh's Custom CSS Reset
  https://www.joshwcomeau.com/css/custom-css-reset/
*/

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

* {
  margin: 0;
}

@media (prefers-reduced-motion: no-preference) {
  html {
    interpolate-size: allow-keywords;
  }
}

body {
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

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

input, button, textarea, select {
  font: inherit;
}

p, h1, h2, h3, h4, h5, h6 {
  overflow-wrap: break-word;
}

p {
  text-wrap: pretty;
}
h1, h2, h3, h4, h5, h6 {
  text-wrap: balance;
}

article p + p {
  margin-block-start: 1lh;
}


#root, #__next {
  isolation: isolate;
}

/* Additions */

ul, ol {
  &:where([class]) {
    margin: 0;
    padding: 0;
    list-style: none;
  }
}

button {
  padding: 0;
  border: none;
  font: inherit;
  color: inherit;
  background-color: transparent;
  cursor: pointer;
}

/* DEFAULTS */

:root {
  --font-text: LibreBaskerville, 'Iowan Old Style', 'Palatino Linotype', 'URW Palladio L', P052, serif;
  --font-sans: NowAlt, Avenir, Montserrat, Corbel, 'URW Gothic', source-sans-pro, sans-serif;
  --font-title: Luperca, Avenir, Montserrat, Corbel, 'URW Gothic', source-sans-pro, sans-serif;
}

[hidden] {
  display: none !important;
}

html {
  font-size: 20px;
  scroll-behavior: smooth;
  margin: 1rem;
}

body, .font-serif {
  font: 1rem/1.4rem var(--font-text);
  font-weight: normal;
}

:is(h1, h2, h3) {
  font-family: var(--font-title);
  font-weight: 400;
}

.font-sans {
  font-family: var(--font-sans);
  font-weight: 300;
}

h1 {
  line-height: 1.1em;
  font-size: clamp(1.5rem, 4vw, 2.4rem);

  font-variation-settings: "opsz" 48;

  &.site-title {
    font-size: clamp(2rem, 5vw, 3.6rem);
    font-variation-settings: "opsz" 72;
  }
}
h2 {
  line-height: 1.2em;
  /* font-weight: 380; */
  font-size: clamp(1.2rem, 3vw, 2rem);
  font-variation-settings: "opsz" 36;
}
h3 {
  line-height: 1.3em;
  /* font-weight: 400; */
  font-size: clamp(1rem, 4vw, 1.6rem);
  font-variation-settings: "opsz" 36;
}

p, ol, ul {
  font-size: clamp(0.8rem, 2vw, 0.9rem);
}

a {
  color: currentColor;
  font-weight: 500;
}

/* FONTS */

@font-face {
  font-family: "LibreBaskerville";
  src: url("../fonts/LibreBaskerville[wght].woff2") format("woff2-variations");
  font-weight: 400 700;
}
@font-face {
  font-family: "LibreBaskerville";
  src: url("../fonts/LibreBaskerville-Italic[wght].woff2") format("woff2-variations");
  font-weight: 400 700;
  font-style: italic;
}
@font-face {
  font-family: "NowAlt";
  src: url("../fonts/NowAlt-Black.otf") format("opentype");
  font-weight: 900;
}
@font-face {
  font-family: "NowAlt";
  src: url("../fonts/NowAlt-Bold.otf") format("opentype");
  font-weight: 700;
}
@font-face {
  font-family: "NowAlt";
  src: url("../fonts/NowAlt-Light.otf") format("opentype");
  font-weight: 300;
}
@font-face {
  font-family: "NowAlt";
  src: url("../fonts/NowAlt-Medium.otf") format("opentype");
  font-weight: 500;
}
@font-face {
  font-family: "NowAlt";
  src: url("../fonts/NowAlt-Regular.otf") format("opentype");
  font-weight: 400;
}
@font-face {
  font-family: "NowAlt";
  src: url("../fonts/NowAlt-Thin.otf") format("opentype");
  font-weight: 200;
}

@font-face {
  font-family: "NowAlt";
  src: url("../fonts/NowAlt-Thin.otf") format("opentype");
  font-weight: 200;
}

@font-face {
  font-family: "Luperca";
  src: url("../fonts/LupercaVF.ttf") format("opentype");
  font-weight: 400;
  /* font-feature-settings: "calt"; */
}



/* UTILITIES */

/* Visually Hidden */
/* https://www.ffoodd.fr/masquage-accessible-de-pointe/ */
.visually-hidden,
.visually-hidden-focusable:not(:focus, :focus-within) {
  border: 0;
  clip-path: inset(50%);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  width: 1px;
  white-space: nowrap;
}

.visually-hidden:not(caption),
.visually-hidden-focusable:not(caption):not(:focus, :focus-within) {
  position: absolute;
}

.visually-hidden *,
.visually-hidden-focusable:not(:focus, :focus-within) * {
  overflow: hidden;
}

.wrapper {
  max-width: var(--wrapper-width, 75rem);
  margin-inline: auto;
  width: 100%;
}

.wrapper-medium {
  --wrapper-width: 60rem;
}

.wrapper-small {
  --wrapper-width: 45rem;
}

.wrapper-xsmall {
  --wrapper-width: 34rem;
}

/* Mobile */

@media (width < 40rem) {
  .mobile-hidden { display: none !important }
  .mobile-block { display: block !important }
  .mobile-flex { display: flex   !important }
}
@media (width >= 40rem) {
  .desktop-hidden { display: none !important }
  .desktop-block { display: block !important }
  .desktop-flex { display: flex   !important }
}

/* COMPOSITIONS */

.stack {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: var(--space, var(--spacing-20));

  &.stack-center {
    align-items: center;
  }
}


.clickable-card {
  position: relative;
  z-index: 1;

  & a::after {
    content: "";
    display: block;
    position: absolute;
    inset: 0;
  }

  & a.clickable-card-over {
    position: relative;

    & a::after {
      inset: -0.25rem;
    }
  }
}

/* BLOCKS */

html {
  padding: 0; margin: 0;
}

body {
  margin: 0;
  padding: 1rem;
  display: flex;
  flex-direction: column;
  gap: 2rem;
  min-height: 100vh;

  main {
    flex: 1 0 auto;
  }
}

header {
  margin-block-end: 5vw;

  > div {
    display: flex;
    gap: 2lh;
    justify-content: space-between;
    align-items: baseline;

    @media (width < 40rem) {
      gap: 0;
      display: grid;
      grid-template-columns: 1fr auto 1fr;

      .header-title {
        grid-column: 2;
        grid-row: 1;
      }
      .mobile-navigation {
        grid-column: 3;
        grid-row: 1;
        justify-self: end;
      }
    }

    .header-title {
      font: 1.33rem/1 var(--font-sans);
      font-weight: 700;

    }

    nav ul {
      list-style: none;
      margin: 0; padding: 0;
      font: 0.8rem/1rem var(--font-sans);
      display: flex;
      gap: 1lh;
      align-items: baseline;
    }
  }

  a {
    text-decoration: none;
    color: currentColor;
    font-weight: 500;

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

nav.breadcrumb {
  display: flex;
  gap: 0.4em;
  font: 0.66rem/1 var(--font-sans);
  font-weight: 500;

  ol {
    margin: 0; padding: 0;
    display: flex;
    list-style: none;
    gap: inherit;
    flex-wrap: wrap;
    
    a {
      color: inherit;
    }
  }
}

main {
  display: flex;
  flex-direction: column;
  gap: 1.3rem;

  > :is(h1, h2, h3, h4, h5, h6):not(:first-child) {
    margin-block-start: 1.4em;
    margin-block-start: 1lh;
  }

  &.template-default.centered {
    align-items: center;

    p, h1, h2, h3, h4 {
      text-align: center;
    }
  }
}

body:has(dialog[open]) {
  overflow: hidden;
  filter: blur(10px);
}

dialog.borgar-dialog[open] {
  border: none;
  width: 100vw;
  height: 100vh;
  max-width: 100vw;
  max-height: 100vh;
  overflow-x: scroll;
  padding: 1rem;
  background: white;
  display: flex;
  flex-direction: column;
  gap: 1rem;

  ul {
    list-style: none;
    margin: 0; padding: 0;
    font: 0.8rem/1rem var(--font-sans);
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
  }

  hr {
    border: none;
    border-block-start: 1px solid grey;
  }

  form[method=dialog] {
    display: flex;
    justify-content: end;

    button {
      margin: -0.5rem;
      padding: 0.5rem;
    }
  }
}

.gaufrier {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat( auto-fit, minmax(300px, 1fr) );

  article {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;

    img {
      aspect-ratio: 4/3;
      object-fit: cover;
    }
    
    a {
      position: absolute;
      inset: 0;
      display: block;
    }
  }
}

.galerie {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat( auto-fit, minmax(250px, 1fr) );

  &.galerie-four {
    grid-template-columns: repeat( 4, 1fr );
  }
  
  &.galerie-three {
    grid-template-columns: repeat( 3, 1fr );
  }
  
  .preview-wrapper dialog[open] {
    border: none;
    width: 100vw;
    height: 100vh;

    background: white;
    position: relative;
    max-width: 80vw;
    max-height: 90vh;
    margin: auto;
    aspect-ratio: 16/9;
    padding: 0.9rem 1.6rem;

    display: flex;
    align-items: stretch;
    justify-content: stretch;

    button {
      display: block;
      z-index: 1;
      margin: 0; padding: 0;
      position: absolute;
      right: 0;
      top: 0;
      border-radius: 1lh;
      background: white;
      font-size: 5em;
      line-height: 1;
      width: 1lh;
      height: 1lh;
      display: flex;
      align-items: center;
      justify-content: center;

      span {
        line-height: inherit;
      }
    }

    .container {
      overflow: hidden;
      width: 100%;
      height: 100%;

      img {
        max-height: 100%;
        max-width: 100%;
        margin: auto;
        display: block;
      }
    }
  }

  .preview-wrapper.render-as-email dialog[open] .container {
    overflow: scroll;
    display: block;
    
    &::after {
      position: absolute;
      content: "";
      inset-inline: 0;
      inset-block-end: 0;
      height: 20vh;
      background: linear-gradient(to bottom, transparent, white 60%);
      pointer-events: none;
    }

    img {
      max-height: unset;
      max-width: 100%;
    }
  }
}


.article.has-img {
  display: flex;
  gap: 2em 1em;

  > img {
    display: block;
    height: auto;
    object-fit: contain;
    flex: 1 1 25%;
  }

  @media (width >= 40rem) {
    img {
      max-width: 25%;
    }
  }
  @media (width < 40rem) {
    flex-direction: column;
  }
}

::backdrop {
  background-color: black;
  opacity: 0.75;
}

footer {
  text-align: center;
  margin-block: 5vh;
  padding-top: 3vh;
  margin-inline: auto;
  border-top: 1px solid color-mix(currentColor, transparent 60%);
  align-set: center;

  p {
    font-size: 1.2rem;
    line-height: 1.2;
  }

  a {
    color: inherit;
    font-weight: 700;
  }
}