@import url('Montserrat.css');

:root {
  --phone-width: 480px;
  --small-tablet-width: 768px;
  --tablet-width: 1024px;
  --small-desktop-width: 1200px;
  --desktop-width: 1400px;
  --full-hd-width: 1920px;

  --background-color-primary: #F9F7F3;
  --background-color-secondary: #C9C9C9;
  --corporate-color-primary: #B5FFE9;
  --corporate-color-secondary: #C5E0D8;
  --cta-color-primary: #78FFD7;
  --text-color-primary: #444545;

  /* @link https://utopia.fyi/type/calculator?c=320,16,1.2,1240,20,1.25,5,2,&s=0.75|0.5|0.25,1.5|2|3|4|6,s-l&g=s,l,xl,12 */
  --fs-200: clamp(0.6944rem, 0.6577rem + 0.1836vw, 0.8rem);   
  --fs-300: clamp(0.8333rem, 0.7754rem + 0.2899vw, 1rem);     
  --fs-400: clamp(1rem, 0.913rem + 0.4348vw, 1.25rem);        
  --fs-500: clamp(1.2rem, 1.0739rem + 0.6304vw, 1.5625rem);   
  --fs-600: clamp(1.44rem, 1.2615rem + 0.8924vw, 1.9531rem);  
  --fs-700: clamp(1.728rem, 1.4799rem + 1.2407vw, 2.4414rem); 
  --fs-800: clamp(2.0736rem, 1.7334rem + 1.7011vw, 3.0518rem);
  --fs-900: clamp(2.4883rem, 2.027rem + 2.3067vw, 3.8147rem);

  --space-3xs: clamp(0.25rem, 0.2283rem + 0.1087vw, 0.3125rem);
  --space-2xs: clamp(0.5rem, 0.4565rem + 0.2174vw, 0.625rem);
  --space-xs: clamp(0.75rem, 0.6848rem + 0.3261vw, 0.9375rem);
  --space-s: clamp(1rem, 0.913rem + 0.4348vw, 1.25rem);
  --space-m: clamp(1.5rem, 1.3696rem + 0.6522vw, 1.875rem);
  --space-l: clamp(2rem, 1.8261rem + 0.8696vw, 2.5rem);
  --space-xl: clamp(3rem, 2.7391rem + 1.3043vw, 3.75rem);
  --space-2xl: clamp(4rem, 3.6522rem + 1.7391vw, 5rem);
  --space-3xl: clamp(6rem, 5.4783rem + 2.6087vw, 7.5rem);
}

a {
  color: inherit;
  text-decoration: none;
}

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

*:focus {
  outline: none;
}

html:focus-within{
  scroll-behavior: smooth;
}

@media(prefers-reduced-motion: reduce) {
  html:focus-within{
    scroll-behavior: auto;
  }
}

html,
body {
  background-color: var(--background-color-primary);
  color: var(--text-color-primary);
  font-family: 'Montserrat', Arial, Helvetica, sans-serif;
 
  width: 100%;
  overflow-x: hidden;
}

body {
    font-size: var(--fs-400);
}

.content-grid {
    --padding-inline: 2rem;
    --content-max-width: 80ch;

    display: grid;
    grid-template-columns: 
            [full-width-start] minmax(var(--padding-inline), 1fr)
            [content-start] min(100% - (var(--padding-inline) * 2), var(--content-max-width)) [content-end]
            minmax(var(--padding-inline), 1fr) [full-width-end];
}

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

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

.cookie-form {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
}

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

.primaryCorporateColor {
  color: var(--corporate-color-primary);
}

.section-heading {
  position: relative;
  text-align: center;
  font-size: var(--fs-500);
  color: var(--corporate-color-primary);
  z-index: 0;
  margin-top: 2rem;
  margin-bottom: 3rem;
  display: block;
  width: fit-content;
  margin-inline: auto;
}
.section-heading::after {
  position: absolute;
  width: calc(100% + (2 * var(--space-l)));
  height: calc(100% * 2);
  content: '';
  background-color: var(--text-color-primary);
  top: calc(-50%);
  left: calc(-1 * var(--space-l));
  z-index: -1;
  transform: skew(20deg);
}

.heading {
  margin-bottom: 3rem;
  text-align: center;
}

.text-paragraph {
  margin: 1.7rem 0;
  font-size: var(--fs-300);
  line-height: 1.6em;
}

.section {
  margin: 0 auto;
}

.link {
  color: var(--cta-color-primary);
  text-decoration: none;
  font-weight: 600;
}
.link:hover,
.link:focus {
  filter: brightness(0.9);
}

h1:focus {
    outline: none;
}

.valid.modified:not([type=checkbox]) {
    outline: 1px solid #26b050;
}

.invalid {
    outline: 1px solid #e50000;
}

.validation-message {
    color: #e50000;
}

.blazor-error-boundary {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
}

    .blazor-error-boundary::after {
        content: "An error has occurred."
    }

.darker-border-checkbox.form-check-input {
    border-color: #929292;
}

.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
    color: var(--bs-secondary-color);
    text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
    text-align: start;
}

body {
    font-family: 'Montserrat', Arial, Helvetica, sans-serif;
    background: var(--background-color-primary);
    color: var(--text-color-primary);
    margin: 0;
    padding: 0;
}

.section-heading {
    font-weight: bold;
    margin-bottom: 2rem;
    text-align: center;
}

.link {
    color: var(--corporate-color-primary);
    text-decoration: none;
}
.link:hover {
    color: var(--cta-color-primary);
    text-decoration: underline;
}

.text-paragraph {
    font-size: var(--fs-400);
    line-height: 1.7;
    margin-bottom: 1rem;
}

.heading {
    font-size: var(--fs-600);
    font-weight: bold;
    margin-bottom: 1rem;
}

.highlight {
    color: var(--cta-color-primary);
}

@media only screen and (min-width: 1200px) {
  .section-heading {
    margin-inline: 0;
  }
  .section-heading::after {
  }
}