@import url('../fonts/poppins/fontfaces_relative.css');
@import url('../fonts/georgiapro/fontfaces_relative.css');

:root {
  color-scheme: light dark;
  scroll-behavior: smooth;

  --pink-100: rgb(255, 240, 240);
  --pink-200: rgb(255, 224, 224);
  --pink-300: rgb(255, 195, 195);
  --pink-400: rgb(255, 160, 160);
  --pink-500: rgb(255, 110, 115);

  --blue-100: rgb(143, 172, 255);
  --blue-200: rgb(100, 117, 255);
  --blue-300: rgb(68, 53, 156);
  --blue-400: rgb(33, 20, 82);

  --green-100: rgb(239, 255, 234);
  --green-200: rgb(212, 255, 203);

  --violet-100: rgb(235, 235, 255);
  --violet-200: rgb(210, 195, 255);

  --purple-500: rgb(95, 47, 80);

  --primary-color: light-dark(var(--blue-400), rgb(255, 255, 255));
  --primary-background: light-dark(var(--pink-100), var(--blue-400));
  --alternate-background: light-dark(var(--pink-400), var(--blue-300));
  --brand-color: light-dark(#00e6e6, rgb(0, 230, 230));
  --cta-color: light-dark(var(--pink-500), rgb(0, 230, 230));

  /* Fluid type scale */
  --size-step--2: clamp(0.6944rem, 0.6376rem + 0.284vi, 0.84rem);
  --size-step--1: clamp(0.8333rem, 0.7488rem + 0.4228vi, 1.05rem);
  --size-step-0: clamp(1rem, 0.878rem + 0.6098vi, 1.3125rem);
  --size-step-1: clamp(1.2rem, 1.028rem + 0.8598vi, 1.6406rem);
  --size-step-2: clamp(1.44rem, 1.2016rem + 1.1918vi, 2.0508rem);
  --size-step-3: clamp(1.728rem, 1.402rem + 1.6302vi, 2.5635rem);
  --size-step-4: clamp(2.0736rem, 1.6323rem + 2.2063vi, 3.2043rem);
  --size-step-5: clamp(2.4883rem, 1.8963rem + 2.9602vi, 4.0054rem);
  --size-step-6: clamp(2.986rem, 2.1974rem + 3.943vi, 5.0068rem);
  --size-step-7: clamp(3.5832rem, 2.5392rem + 5.2201vi, 6.2585rem);

  /* Fluid space scale */
  --space-3xs: clamp(0.25rem, 0.2256rem + 0.122vi, 0.3125rem);
  --space-2xs: clamp(0.5rem, 0.4268rem + 0.3659vi, 0.6875rem);
  --space-xs: clamp(0.75rem, 0.6524rem + 0.4878vi, 1rem);
  --space-s: clamp(1rem, 0.878rem + 0.6098vi, 1.3125rem);
  --space-m: clamp(1.5rem, 1.3049rem + 0.9756vi, 2rem);
  --space-l: clamp(2rem, 1.7561rem + 1.2195vi, 2.625rem);
  --space-xl: clamp(3rem, 2.6341rem + 1.8293vi, 3.9375rem);
  --space-2xl: clamp(4rem, 3.5122rem + 2.439vi, 5.25rem);
  --space-3xl: clamp(6rem, 5.2683rem + 3.6585vi, 7.875rem);

  /*  */
  --leading: 1.5;
  --leading-short: 1.3;
  --leading-fine: 1.1;
  --leading-flat: 1;
  --leading-loose: 1.7;
  --kerning: normal;
  --kerning-tight: -0.04ch;
  --kerning-loose: 0.1ch;
  --text-size-base: var(--size-step-0);
  --text-size-lede: var(--size-step-1);
  --text-size-meta: var(--size-step--1);
  --text-size-heading-1: var(--size-step-5);
  --text-size-heading-2: var(--size-step-4);
  --text-size-heading-3: var(--size-step-3);
  --text-size-heading-4: var(--size-step-2);
  --text-size-prose: var(--text-size-base);
  --space-gutter: var(--space-m);
  --space-gutter-s: var(--space-s);
  --space-gutter-l: var(--space-l);
  --space-regions: var(--space-xl);
  --size-wrapper-max-width: 1135px;

  --color-global-bg: var(--primary-background);
  --color-global-text: var(--primary-color);
  --color-surface-bg: var(--primary-background);
  --color-surface-bg-interact: var(--primary-color);
  --color-surface-text: var(--primary-color);
  --color-surface-text-interact: var(--primary-background);

  --font-base: 'Poppins', sans-serif;
  --font-interactions: 'Poppins Light', sans-serif;
  --font-headings: 'Georgia Pro Black', serif;
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-bold: 700;
  --font-weight-black: 900;
  --focus-ring: 2px solid currentColor;
  --focus-ring-offset: 2px;

  --button-bg: var(--cta-color);
  --button-text: light-dark(white, black);
}

@view-transition {
  navigation: auto;
}

body {
  font-family: var(--font-base, sans-serif);
  font-size: var(--text-size-base);
  line-height: var(--leading);
  background: var(--color-global-bg);
  color: var(--color-global-text);
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  margin: 0;
  padding: 0;

  background-image: url('/images/bolgen-light_.svg');
  background-repeat: no-repeat;
  background-position-x: left;
  background-position-y: bottom 10%;
  background-size: 100%;

  @media (prefers-color-scheme: dark) {
    & {
      background-image: url('/images/bolgen-dark.svg');
    }
  }
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--font-headings, sans-serif);
}

main {
  flex: 1 0 auto;
  display: grid;
  grid-template-columns:
    1fr
    min(75ch, 100%)
    1fr;
}
main > * {
  grid-column: 2;
}
.full-bleed {
  width: 100%;
  grid-column: 1 / 4;
}

header {
  /* flex-shrink: 0; */
  /*background-color: var(--primary-background);*/
  color: var(--primary-color);
  /*border-bottom: 1px solid var(--brand-color);*/

  & .wrapper {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
  }
  & #logo {
    width: 4rem;
    height: 4rem;
    margin: 1rem;
    /*border: 3px solid var(--brand-color);*/
    rotate: -9deg;

    &.large {
      width: 6rem;
      height: 6rem;
    }
    &.xlarge {
      width: 10rem;
      height: 10rem;
    }
  }
  & #qr {
    width: 4rem;
    height: 4rem;
  }

  & ul {
    display: flex;
    margin: 0;
    padding: 0;
    list-style: none;
    position: relative;
    flex-wrap: wrap;
    touch-action: none;
  }
  & li {
    display: grid;
    place-items: center;
    font-weight: 400;
  }

  & li a {
    display: inline-block;
    padding: 0.5rem 1.25rem;
    width: 100%;
    height: 100%;
    text-decoration: none;

    &:hover {
      background-color: white;
    }
  }

  & :is(a, button) {
    outline-color: color-mix(in lch, canvasText, transparent 50%);
  }
}

footer {
  flex-shrink: 0;
  /*
  background-color: var(--primary-color);
  color: var(--primary-background);
  */
}

button,
.button {
  font-family: var(--font-interactions, sans-serif);
  text-decoration: none;
  text-transform: var(--button-text-transform, uppercase);
  font-weight: var(--button-font-weight, var(--font-weight-medium));
  letter-spacing: var(--button-kerning, var(--kerning-loose));

  width: fit-content;

  display: inline-flex;
  gap: var(--button-gap, var(--space-gutter));
  padding: var(--button-padding, 0.8em 1.5em);
  background: var(--button-bg, var(--color-surface-bg));
  color: var(--button-text, var(--color-surface-text));
  line-height: var(--button-leading, var(--leading-fine));
  border-radius: var(--button-radius, 0);
  border-width: 0;
  cursor: pointer;
}

button:hover,
.button:hover {
  background: var(--button-interact-bg, var(--color-surface-bg-interact));
  color: var(--button-interact-text, var(--color-surface-text-interact));
}

button:disabled,
.button:disabled {
  background: darkgrey;
  color: lightgray;
  cursor: default;
}

/* Table styling */

table {
  text-align: left;
  border-collapse: collapse;
  width: 100%;
  table-layout: fixed;
  background-color: light-dark(white, black);;
}
thead {
  /*border-block-end: 2px solid;*/
  /*background: color-mix(in srgb, var(--highlight-color), transparent 60%);*/
  background-color: var(--primary-color);
  color: var(--primary-background);
}

tfoot {
  border-block: 2px solid;
  /*background: color-mix(in srgb, var(--highlight-color), transparent 60%);*/
}

th,
td {
  border-width: 1px;
  border-style: solid;
  /*border-color: color-mix(in srgb, var(--highlight-color), transparent 60%);*/
  padding: 0.25rem 0.75rem;
  vertical-align: baseline;
}

thead th {
  border: none;
}

th:first-of-type {
  width: 20rem;
  border-left: none;
}
td:last-of-type {
  border-right: none;
}

thead th {
  vertical-align: bottom;
}

th,
caption {
  text-align: start;
}

tbody tr:nth-child(even) {
  background: color-mix(in srgb, var(--highlight-color), transparent 80%);
}

.tableWrapper {
  overflow: auto;
  margin-inline: 1rem;
}

th:first-child {
  position: sticky;
  inset-inline-start: 0;
}

tr:last-of-type th, td {
  border-bottom: none; 
}

/* Forms */
form {
  display: grid;
  gap: var(--space-2xs);
  line-height: var(--leading-short);
}

form > label:not(:first-child),
form [type='submit'] {
  margin-block-start: var(--space-l);
}

.form-control {
  display: flex;
  flex-direction: column;
}

#logo {
  view-transition-name: logo;
}
input {
  font-family: var(--font-base, sans-serif);
  font-size: var(--text-size-base);
  padding: 0.5rem;
  border: 1px solid var(--primary-color);
}
input:focus-visible {
  outline: 2px dashed var(--pink-500);
}