/* stylelint-disable prettier/prettier */
/* stylelint-disable @stylistic/indentation */
@import url('preflight.css');

/* ============================
   ROOT VARIABLES
   Define global typography and layout variables
============================= */
:root {
  /* prettier-ignore */
  --header-background: linear-gradient(0deg, #313f55 0%, #192334 50%, #000712 100%);
  --body-font-family: 'Montserrat', sans-serif;
  --default-element-line-height: 24px;
  --default-element-margin: var(--size-4x);
  --default-heading-line-height: 1.25;
  --default-heading-margin: var(--size-20) var(--size-4x);
  --grid-column-desktop-width: calc((1280px - (11 * 40px)) / 12);
  --gutter-width: 40px;
  --header-block-size: 62px;
  --header-border: 1px solid #d9d9d9;
  --heading-color: var(--bg-dark-blue);
  --heading-font-family: 'Teodor', serif;
  --section-desktop-padding-block: var(--size-60);
  --section-mobile-padding-block: var(--size-5x);
  --section-padding: 0;
  --theme-based-text-color: var(--bg-slate);

  /* Headlines Desktop */
  --font-size-h1: 36px;
  --font-size-h2: 32px;
  --font-size-h3: 28px;
  --font-size-h4: 24px;
  --font-size-h5: 20px;
  --font-size-h6: 16px;

  /* Headlines Mobile */
  --font-size-m1: 28px;
  --font-size-m2: 24px;
  --font-size-m3: 22px;
  --font-size-m4: 20px;
  --font-size-m5: 18px;
  --font-size-m6: 16px;
  --font-size-m7: 14px;

  /* Body Typography */
  --font-size-l1: 24px;
  --font-size-l2: 20px;
  --font-size-b1: 16px;
  --font-size-b2: 12px;
  --font-size-b3: 12px;

  /* Hero / Billboard */
  --hero-heading-size-desktop: 64px;
  --proposition-heading-size: 70px;
  --hero-heading-size-mobile: 36px;

  /* Font Weights */
  --font-weight-light: 300;
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;

  /* Colors */
  --bg-berry: #902b8a;
  --bg-blue: #005c9f;
  --bg-dark-blue: #182436;
  --bg-green: #47853d;
  --bg-dark-green: #2e6130;
  --bg-gradient-dark: linear-gradient(180deg, #182436 0%, #313f55 100%);
  --bg-gradient-light: linear-gradient(180deg, #313f55 0%, #000712 100%);
  --bg-grey8: #6f7682;
  --bg-light: #f3f5fb;
  --bg-navy: #002257;
  --bg-light-blue: #aad9f3;
  --bg-slate: #313f55;
  --bg-table-cell-color: #595959;
  --bg-slate-dark: #000712;
  --bg-white: #fff;
  --color-slate-accent: #222e41;
  --color-spindle: #c6d4ec;
  --light-color: #f8f8f8;
  --link-color: #3b63fb;
  --link-dark-visited: #b9b9b9;
  --link-hover-color: #1d3ecf;
  --text-color: #131313;
  --color-slate: #505357;
  --border-color: rgb(49 63 85 / 30%);
  --bg-gradient-nav: linear-gradient(
    0deg,
    #313f55 0%,
    #192334 50%,
    #000712 100%
  );
  --input-range-track-color-lower: #07c;
  --input-range-track-color-upper: #dddfe3;
  --input-label-color: #000712;
  --input-range-label-color: #465979;
  --radio-label-color: #6d7178;
  --radio-label-checked-border-color: #313f55;

  /* Sizes */
  --size-base: 8px;
  --size-half: 4px;
  --size-1x: var(--size-base);
  --size-base-plus: 12px;
  --size-2x: calc(var(--size-base) * 2);
  --size-20: 20px;
  --size-3x: calc(var(--size-base) * 3);
  --size-4x: calc(var(--size-base) * 4);
  --size-5x: calc(var(--size-base) * 5);
  --size-60: 60px;
  --size-80: 80px;
  --size-100: 100px;
  --size-120: 120px;
}

@media screen and (min-width: 1024px) {
  :root {
    /* prettier-ignore */
    --header-background: linear-gradient(0deg, #313f55 -421.38%, #192334 -160.69%, #000712 100%);
    --header-border: none;
    --header-block-size: 124px;
  }
}

/* ============================
   Theme-based Color Overrides
============================= */

/* Light background themes → dark text */
.section--bg-white,
.section--bg-light,
.section--bg-lightgradient-with-sprite {
  --heading-color: var(--bg-dark-blue);
  --theme-based-text-color: var(--bg-dark-blue);
  --theme-based-heading-color: var(--heading-color);
  --btn-default-border: var(--theme-based-text-color);
}

/* Dark background themes → light text */
.section--bg-dark,
.section--bg-dark-blue,
.section--bg-darkgradient,
.section--bg-darkgradient-with-sprite,
.section--bg-darkgradient-with-sprite-lb,
.section--bg-lightgradient, /* bg-lightgradient is a dark theme */
.image-text__grid--dark,
.section--bg-slate-dark {
  --heading-color: var(--bg-white);
  --theme-based-text-color: var(--bg-white);
  --theme-based-heading-color: var(--bg-white);
  --btn-default-border: var(--theme-based-text-color);
}

/* ============================
   BASE STYLES
   Apply typography, base font, and color to body
============================= */
/* stylelint-disable selector-max-type */
html {
  scroll-behavior: smooth;
}

body {
  background-color: var(--bg-white);
  color: var(--text-color);
  font-family: var(--body-font-family);
  font-size: var(--font-size-b1);

  /* Mobile default */
  font-weight: var(--font-weight-regular);
  inline-size: 100vw;
  line-height: 1.6;
  margin: 0;
  overflow-x: hidden;
  padding: 0 var(--size-2x);
}

.page--with-no-scroll {
  overflow: hidden;
}

@media screen and (min-width: 768px) {
  body.page {
    padding: 0 var(--size-4x);
  }
}

@media screen and (min-width: 1344px) {
  body.page {
    margin-inline: auto;
    max-inline-size: 1280px;
    padding: 0;
  }
}

body.appear {
  display: block;
}

body.template-blank {
  --heading-color: var(--bg-white);
  --theme-based-text-color: var(--bg-white);
  --theme-based-heading-color: var(--bg-white);
  --text-color: var(--theme-based-text-color);
  --btn-default-border: var(--theme-based-text-color);

  background-color: var(--bg-slate-dark);
  color: var(--theme-based-text-color);
}

/* ============================
   Primary background Colors
    Usage: <div class="bg-white">Content</div>
============================= */
.bg-light {
  background-color: var(--bg-light);
}

.bg-gradient-light {
  background: var(--bg-gradient-light);
}

.bg-gradient-dark {
  background: var(--bg-gradient-dark);
}

/* ============================
   HEADLINES (Mobile First)
   Usage: <h1> to <h6> or class-based
============================= */
.h1,
h1 {
  font-size: var(--font-size-m1);
}

.h2,
h2 {
  font-size: var(--font-size-m2);
}

.h3,
h3 {
  font-size: var(--font-size-m3);
}

.h4,
h4 {
  font-size: var(--font-size-m4);
}

.h5,
h5 {
  font-size: var(--font-size-m5);
}

.h6,
h6 {
  font-size: var(--font-size-m6);
}

@media screen and (min-width: 768px) {
  /* stylelint-disable-next-line rule-empty-line-before */
  .h1,
  h1 {
    font-size: var(--font-size-h1);
  }

  .h2,
  h2 {
    font-size: var(--font-size-h2);
  }

  .h3,
  h3 {
    font-size: var(--font-size-h3);
  }

  .h4,
  h4 {
    font-size: var(--font-size-h4);
  }

  .h5,
  h5 {
    font-size: var(--font-size-h5);
  }

  .h6,
  h6 {
    font-size: var(--font-size-h6);
  }
}

h1,
.h1,
h2,
.h2,
h3,
.h3,
h4,
.h4,
h5,
.h5,
h6,
.h6 {
  color: var(--heading-color);
  font-family: var(--heading-font-family);
  font-weight: var(--font-weight-regular);
  line-height: var(--default-heading-line-height);
  margin-block: var(--default-heading-margin);
  scroll-margin: 40px;
}

ol,
ul {
  padding-inline-start: var(--size-5x);
}

/* ============================
   HERO TEXT (T1)
   Usage: <h2 class="hero__heading">Billboard</h2>
============================= */

/* Use class "hero__heading" if used with other Heading tag. */
.hero__heading {
  font-family: var(--heading-font-family);
  font-size: var(--hero-heading-size-mobile);
  font-weight: var(--font-weight-regular);
  line-height: 1.2;
}

@media screen and (min-width: 768px) {
  .hero__heading {
    font-size: var(--hero-heading-size-desktop);
  }
}

/* Default for <h1> */
.hero h1,
.carousel__hero h1 {
  font-family: var(--heading-font-family);
  font-size: var(--hero-heading-size-mobile);
  font-weight: var(--font-weight-regular);
  line-height: 1.28;
}

@media screen and (min-width: 768px) {
  .hero h1,
  .carousel__hero h1 {
    font-size: var(--hero-heading-size-desktop);
    line-height: normal;
  }
}

/* ============================
   LEAD TEXT (L1 & L2)
   Usage:
   <p class="l1 l1-medium">Desktop lead</p>
   <p class="l2">Mobile lead</p>
============================= */
.l1,
.l2 {
  color: var(--text-color);
  font-family: var(--body-font-family);
  line-height: 1.5;
}

.l1 {
  font-size: var(--font-size-l1);
  font-weight: 400;
}

.l1-medium {
  font-weight: 500;
}

.l2 {
  font-size: var(--font-size-l2);
  font-weight: 400;
}

.l2-medium {
  font-weight: 500;
}

/* ============================
   BODY TEXT (B1, B2, B3)
   Usage:
   <p class="b1 b1-bold">Bold desktop body</p>
   <p class="b3 b3-semibold">Disclaimer</p>
============================= */
.b1 {
  font-size: var(--font-size-b1);
  font-weight: var(--font-weight-regular);
  line-height: 1.6;
}

.b1-medium {
  font-weight: var(--font-weight-medium);
}

.b1-semibold {
  font-weight: var(--font-weight-semibold);
}

.b1-bold {
  font-weight: var(--font-weight-bold);
}

.b2 {
  font-size: var(--font-size-b1);
  font-weight: var(--font-weight-regular);
  line-height: 1.6;
}

.b2-medium {
  font-weight: var(--font-weight-medium);
}

.b3,
.b3-regular,
.b3-medium,
.b3-semibold {
  font-size: var(--font-size-b3);
  line-height: 1.5;
}

span.b3-regular,
span.b3-medium,
span.b3-semibold {
  display: inline-block;
}

.b3-regular {
  font-weight: var(--font-weight-regular);
}

.b3-medium {
  font-weight: var(--font-weight-medium);
  line-height: 1.67;
}

.b3-semibold {
  font-weight: var(--font-weight-semibold);
  line-height: 1.67;
}

.small-caps {
  font-variant: small-caps;
}

/* ============================
   DEFAULT BODY ELEMENTS
   p, ul, ol, dl, blockquote
============================= */
p,
dl,
ol,
ul,
pre,
blockquote {
  color: var(--theme-based-text-color);
  font-family: var(--body-font-family);
  font-size: var(--font-size-b1);
  font-weight: var(--font-weight-regular);
  line-height: var(--default-element-line-height);
  margin-block: var(--default-element-margin);
}

li > p,
li > ul,
li > ol {
  --default-element-margin: 0;
}

@media screen and (min-width: 768px) {
  /* stylelint-disable-next-line rule-empty-line-before */
  p,
  dl,
  ol,
  ul,
  pre,
  blockquote {
    font-size: var(--font-size-b1);
  }
}

/* ============================
   CODE & PRE
============================= */
code,
pre {
  font-size: var(--font-size-b1);
}

pre {
  background-color: var(--light-color);
  border-radius: 8px;
  overflow-x: auto;
  padding: 16px;
  white-space: pre;
}

/* ============================
   FORM ELEMENTS
============================= */
input,
textarea,
select,
button {
  font: inherit;
}

/* ============================
   PAGE STRUCTURE
============================= */
header {
  --btn-outline: 2px dashed var(--bg-white);
  --btn-default-outline: 2px dashed var(--bg-white);
  --link-focus-color: var(--bg-white);

  background: var(--header-background);
  block-size: var(--header-block-size);
  border-block-end: var(--header-border);
  display: flex;
  inline-size: 100vw;
  inset-inline: 50%;
  margin-inline: -50vw;
  position: relative;
  z-index: 3;
}

body.template-blank > header {
  display: none;
}

.header__nav-wrapper,
.footer {
  visibility: hidden;
}

.header__nav-wrapper[data-block-status='loaded'],
.footer[data-block-status='loaded'] {
  visibility: visible;
}

main {
  --section-padding: 40px 0;

  position: relative;
  z-index: 0;
}

.page--with-open-menu main,
.page--with-open-menu footer {
  display: none;
}

/* ============================
   ICONS
============================= */

.icon {
  display: inline-block;
  margin-inline: 6px;
}

/* ============================
   CONTENT AND NAVIGATION COLORS
   Usage: .bg-slate-dark, .text-slate-dark, etc.
============================= */
.bg-slate-dark {
  background-color: var(--bg-slate-dark);
}

.bg-slate {
  background-color: var(--bg-slate);
}

.bg-grey8 {
  background-color: var(--bg-grey8);
}

.bg-white {
  background-color: var(--bg-white);
}

.bg-blue {
  background-color: var(--bg-blue);
}

.bg-navy {
  background-color: var(--bg-navy);
}

.bg-berry {
  background-color: var(--bg-berry);
}

.bg-gradient-nav {
  background: var(--bg-gradient-nav);
}

.text-slate-dark {
  color: var(--bg-slate-dark);
}

.text-slate {
  color: var(--bg-slate);
}

.text-grey8 {
  color: var(--bg-grey8);
}

.text-white {
  color: var(--bg-white);
}

.text-blue {
  color: var(--bg-blue);
}

.text-navy {
  color: var(--bg-navy);
}

.text-berry {
  color: var(--bg-berry);
}

.hidden {
  display: none;
}

/* ===================
   Override 404 styles
====================== */
/* stylelint-disable */
.experience-404-wrapper
  .fof-container__body--module
  .fof-container__body--module--page
  .--fof-related-url-color {
  word-break: normal;
}

/* stylelint-enable */