/*
  Theme Name: SIP Basel Area
  Author: die Gestalter
  Author URI: https://gestalter.ch
  Version: 1.0
*/

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

* {
  margin: 0;
}

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

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

blockquote,
dl,
dd,
h1,
h2,
h3,
h4,
h5,
h6,
hr,
figure,
p,
pre {
  margin: 0;
}

ol,
ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

img,
svg,
video,
canvas,
audio,
iframe,
embed,
object {
  display: block;
}

img,
video {
  max-width: 100%;
  height: auto;
}

*,
::before,
::after {
  border-width: 0;
  border-style: solid;
  border-color: theme('borderColor.DEFAULT', currentColor);
}

@font-face {
  font-family: "DINPro";
  src: url("./assets/fonts/dinnextpro-regular.woff2") format("woff2"),
    url("./assets/fonts/dinnextpro-regular.woff") format("woff");
  font-weight: 400;
  font-style: normal;
  text-rendering: optimizeLegibility;
  font-display: swap;
}

@font-face {
  font-family: "DINPro";
  src: url("./assets/fonts/dinnextpro-medium.woff2") format("woff2"),
    url("./assets/fonts/dinnextpro-medium.woff") format("woff");
  font-weight: 500;
  font-style: bold;
  text-rendering: optimizeLegibility;
  font-display: swap;
}

/* @font-face {
  font-family: "DINPro";
  src: url("./assets/fonts/dinnextpro-bold.woff2") format("woff2"),
    url("./assets/fonts/dinnextpro-bold.woff") format("woff");
  font-weight: 800;
  font-style: bold;
  text-rendering: optimizeLegibility;
  font-display: swap;
} */

:root {
  --clr-offblack: #202020;
  --clr-white: #ffffff;
  --clr-background: #f5f3ed;
  --clr-pink: #f02071;
  --clr-yellow: #f4bd00;
  --clr-blue: #5578df;
  --clr-green: #1CD956;

  --grd-pink-light: linear-gradient(90deg, #fd6246 9.2%, #f6524f 33.7%, #e42a67 80.9%, #dc1873 100%);
  --grd-pink-dark: linear-gradient(90deg, #ab307a 0%, #c72275 33.0%, #f14658 100%);
  --grd-green-light: linear-gradient(90deg, #d6df00 0%, #9ce13c 19.5%, #00e9e3 100%);
  --grd-green-dark: linear-gradient(90deg, #00c60c 0%, #00a841 50.0%, #0d7d7e 100%);
  --grd-blue-light: linear-gradient(90deg, #944ebc 0%, #47abfb 45.5%, #56c1ff 92.2%);
  --grd-blue-dark: linear-gradient(90deg, #0088d0 0%, #685ec1 45.5%, #944ebc 100%);
  --grd-yellow-light: linear-gradient(90deg, #e2af00 0%, #dfcc1c 50.0%, #f3de20 100%);
  --grd-yellow-dark: linear-gradient(90deg, #ff9251 0%, #e3af54 33.3%, #dfd048 100%);

  --clr-light: var(--clr-white);
  --clr-dark: var(--clr-offblack);

  --grd-light: var(--grd-pink-light);
  --grd-dark: var(--grd-pink-dark);
  --clr-accent: var(--clr-pink);

  /* https://utopia.fyi/type/calculator/?c=370,18,1.2,1280,22,1.25,8,2,&s=0.75%7C0.5%7C0.25,1.5%7C2%7C3%7C4%7C6,s-l&g=s,l,xl,12 */

  --step--2: clamp(0.7813rem, 0.7411rem + 0.1736vi, 0.88rem);
  --step--1: clamp(0.9375rem, 0.8714rem + 0.2857vi, 1.1rem);
  --step-0: clamp(1.125rem, 1.0234rem + 0.4396vi, 1.375rem);
  --step-1: clamp(1.35rem, 1.2001rem + 0.6484vi, 1.7188rem);
  --step-2: clamp(1.62rem, 1.4051rem + 0.9291vi, 2.1484rem);
  --step-3: clamp(1.944rem, 1.6425rem + 1.3038vi, 2.6855rem);
  --step-4: clamp(2.3328rem, 1.9164rem + 1.8007vi, 3.3569rem);
  --step-5: clamp(2.7994rem, 2.2314rem + 2.4559vi, 4.1962rem);
  --step-6: clamp(3.3592rem, 2.5924rem + 3.316vi, 5.2452rem);
  --step-7: clamp(4.0311rem, 3.0043rem + 4.4403vi, 6.5565rem);
  --step-8: clamp(4.8373rem, 3.4718rem + 5.9048vi, 8.1956rem);

  --space-3xs: clamp(0.3125rem, 0.2871rem + 0.1099vi, 0.375rem);
  --space-2xs: clamp(0.5625rem, 0.5117rem + 0.2198vi, 0.6875rem);
  --space-xs: clamp(0.875rem, 0.7988rem + 0.3297vi, 1.0625rem);
  --space-s: clamp(1.125rem, 1.0234rem + 0.4396vi, 1.375rem);
  --space-m: clamp(1.6875rem, 1.535rem + 0.6593vi, 2.0625rem);
  --space-l: clamp(2.25rem, 2.0467rem + 0.8791vi, 2.75rem);
  --space-xl: clamp(3.375rem, 3.0701rem + 1.3187vi, 4.125rem);
  --space-2xl: clamp(4.5rem, 4.0934rem + 1.7582vi, 5.5rem);
  --space-3xl: clamp(6.75rem, 6.1401rem + 2.6374vi, 8.25rem);

  /* One-up pairs */
  --space-3xs-2xs: clamp(0.3125rem, 0.16rem + 0.6593vi, 0.6875rem);
  --space-2xs-xs: clamp(0.5625rem, 0.3592rem + 0.8791vi, 1.0625rem);
  --space-xs-s: clamp(0.875rem, 0.6717rem + 0.8791vi, 1.375rem);
  --space-s-m: clamp(1.125rem, 0.7438rem + 1.6484vi, 2.0625rem);
  --space-m-l: clamp(1.6875rem, 1.2555rem + 1.8681vi, 2.75rem);
  --space-l-xl: clamp(2.25rem, 1.4876rem + 3.2967vi, 4.125rem);
  --space-xl-2xl: clamp(3.375rem, 2.511rem + 3.7363vi, 5.5rem);
  --space-2xl-3xl: clamp(4.5rem, 2.9753rem + 6.5934vi, 8.25rem);

  /* Custom pairs */
  --space-s-l: clamp(1.125rem, 0.4643rem + 2.8571vi, 2.75rem);

  /* Other Variables */
  --contain: 1280px;
  --gutter: var(--space-s-l, clamp(1rem, 0.4975rem + 2.5126vw, 2.25rem));

  --ease: cubic-bezier(0.645, 0.045, 0.355, 1);
  --menu-trs: .2s;

  --flow: var(--space-m-l);
  --flow-s: var(--space-s-m);
  --flow-xs: var(--space-3xs-2xs);

  --system-ui: system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
}

html {
  height: 100%;
  font-family: "DINPro", var(--system-ui);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-synthesis: none;
  text-rendering: optimizeLegibility;
  min-width: 320px;
  scroll-behavior: smooth;
  scroll-margin-top: var(--mobileHeader, var(--flow));
}

body.preload>* {
  transition: none !important;
}

@media screen and (prefers-reduced-motion: reduce) {
  * {
    transition: none !important;
    animation: none !important;
  }
}

body {
  height: 100%;
  display: flex;
  flex-direction: column;
  scrollbar-gutter: stable;
  font-size: var(--step-0);
}

body[data-theme="pink"] {
  --grd-light: var(--grd-pink-light);
  --grd-dark: var(--grd-pink-dark);
  --clr-accent: var(--clr-pink);
}

body[data-theme="yellow"] {
  --grd-light: var(--grd-yellow-light);
  --grd-dark: var(--grd-yellow-dark);
  --clr-accent: var(--clr-yellow);
}

body[data-theme="blue"] {
  --grd-light: var(--grd-blue-light);
  --grd-dark: var(--grd-blue-dark);
  --clr-accent: var(--clr-blue);
}

body[data-theme="green"] {
  --grd-light: var(--grd-green-light);
  --grd-dark: var(--grd-green-dark);
  --clr-accent: var(--clr-green);
}

address {
  font-style: normal;
}

a,
button {
  outline-color: var(--clr-dark);
  outline-width: 1px;
}

.honeypot {
  position: absolute;
  left: -9999px;
}

::-moz-selection {
  color: var(--clr-light);
  background-color: var(--clr-dark);
}

::selection {
  color: var(--clr-light);
  background-color: var(--clr-dark);
}

.hideOnLandscape {
  visibility: visible;
}

@media (orientation: landscape) {
  .hideOnLandscape {
    visibility: hidden;
  }
}

.skip {
  left: -100%;
  position: absolute;
  z-index: 3;
  font-size: var(--step-0);
  width: auto;
}

.skip:focus-visible {
  left: .5rem;
  top: .5rem;
}

.flow>*+* {
  margin-block-start: var(--flow, 1em);
}

.flow-s>*+* {
  margin-block-start: var(--flow-s, 0.75em);
}

.flow-xs>*+* {
  margin-block-start: var(--flow-xs, 0.5em);
}

.content-grid {
  --padding-inline: var(--gutter);
  --content-max-width: var(--contain, 80ch);
  --breakout-max-width: calc(var(--content-max-width, 80ch) * 1.2);
  --content-size: min(100% - (var(--padding-inline) * 2),
      var(--content-max-width));
  --breakout-size: calc((var(--breakout-max-width) - var(--content-max-width)) / 2);

  display: grid;
  grid-template-columns:
    [full-width-start] minmax(var(--padding-inline), 1fr) [breakout-start] minmax(0, var(--breakout-size)) [content-start] var(--content-size) [content-end] minmax(0, var(--breakout-size)) [breakout-end] minmax(var(--padding-inline), 1fr) [full-width-end];
}

.content-grid> :not(.breakout, .full-width),
.full-width> :not(.breakout, .full-width) {
  grid-column: content;
}

.content-grid>.breakout {
  grid-column: breakout;
}

.content-grid>.breakout-left {
  grid-column: breakout / content;
}

.content-grid>.breakout-right {
  grid-column: content / breakout;
}

.content-grid>.full-left {
  grid-column: full-width / content;
}

.content-grid>.full-right {
  grid-column: content / full-width;
}

.content-grid>.full-width {
  grid-column: full-width;
}

.content-grid>.full-width.mobile-only {
  grid-column: full-width;
}

@media screen and (min-width: 640px) {
  .content-grid>.full-width.mobile-only {
    grid-column: content;
  }
}

[x-cloak] {
  display: none !important;
}

/* typography */
.default {
  font-weight: 400;
  line-height: 1.2;
}

.prose {
  font-weight: 400;
  line-height: 1.6;
}

.strong {
  font-weight: 500;
  line-height: 1.2;
}

.step-8 {
  font-size: var(--step-8);
}

.step-7 {
  font-size: var(--step-7);
}

.step-6 {
  font-size: var(--step-6);
}

.step-5 {
  font-size: var(--step-5);
}

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

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

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

.step-1 {
  font-size: var(--step-1);
}

.step-0 {
  font-size: var(--step-0);
}

.step--1 {
  font-size: var(--step--1);
}

/* images */
picture img,
img {
  user-select: none;
  max-width: 100%;
  height: auto;
  /* Removes the empty space on the bottom without using 'display'. */
  vertical-align: middle;
  /* If image doesn't load, the alt text is visible in italic. */
  font-style: italic;
  /* Used on images with LQIP backgrounds: see snippet 'image-with-lqip'. */
  background-repeat: no-repeat;
  background-size: cover;
  /* In case you are using 'float' on the image. */
  shape-margin: 1rem;
}

.image {
  width: 100%;
  max-width: 100%;
  height: auto;
  object-fit: cover;
}

.lqip {
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
}

.tap-highlight {
  -webkit-tap-highlight-color: transparent;
}

a:visited,
a:focus,
a {
  color: inherit;
}

/* Menu */
.menu {
  position: relative;

  width: 100%;
  min-height: 30vh;
  min-height: 30dvh;

  display: grid;
  grid-template-columns: minmax(0, 1fr);
}

@media screen and (min-width: 1024px) {
  .menu {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.menu ul li a {
  display: inline;
}

.level {
  overflow: hidden;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;

  pointer-events: none;
}

@media screen and (min-width: 1024px) {
  .level {
    overflow: hidden;
    position: relative;
  }
}

[data-item] {
  pointer-events: all;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;

  background-color: var(--clr-accent);

  transition: transform var(--menu-trs) var(--ease);
  transform: translateX(-101%);
}

[data-item].selected {
  transition: transform var(--menu-trs) var(--ease);
  transform: translateX(0%);
}

[data-item="1"] {
  transform: unset;
}

[data-show] {
  height: 100%;
  width: 100%;
  display: none;
}

[data-show].selected {
  display: block;
}

[data-level] {
  display: flex;
  flex-wrap: nowrap;
  gap: 1rem;
  cursor: pointer;
  background-color: transparent;
  width: auto;
}

[data-back] {
  display: block;
  visibility: hidden;
}

[data-back].show {
  visibility: visible;
  display: block;
}