/* https://6elements.io/assets/styles/6elements.css */

/* Root variables */
:root {
  --color-promoting-process: rgb(237, 29, 36);
  --color-thinking-process:  rgb(0, 114, 188);
  --color-gray-dark:         rgb(88, 89, 91);
  --color-gray-medium:       rgb(119, 119, 119);
  --color-gray-light:        rgb(211, 211, 211);
  --color-gray-lighter:      rgb(245, 245, 245);
  --color-white:             rgb(255, 255, 255);
}

*, *::before, *::after {
  box-sizing: border-box; /* Apply border-box globally for easier sizing and layout */
}

/* Base layout */
html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}

html {
  font-size: 15px;
}

body {
  display: flex;
  flex-direction: column;
  background-color: var(--color-gray-dark);
  font-family: PingFangSC-Light, "PingFang SC", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, 
    "Hiragino Sans GB", "Heiti SC", "Microsoft YaHei", "WenQuanYi Micro Hei", sans-serif;
  line-height: 1.5; /* Improves readability by adding space between lines */
}

.main-content {
  flex: 1;
}

/* Typography */
.text-promoting-process { color: var(--color-promoting-process); }
.text-thinking-process  { color: var(--color-thinking-process); }
.text-gray-dark         { color: var(--color-gray-dark); }

.font-18 { font-size: 1.125rem; } /* 18px */
.font-24 { font-size: 1.5rem;   } /* 24px */
.font-36 { font-size: 2.25rem;  } /* 36px */

.underline-promoting-process {
  border-bottom: 1px solid var(--color-promoting-process);
}

/* Full-width layouts */
.full-width,
.full-width-white,
.full-width-gray-lighter {
  width: 100%;
  position: relative;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}

.full-width-white,
.full-width-gray-lighter {
  padding-left: 6vw;
  padding-right: 6vw;
}

.full-width {
  margin-top: 3.125rem; /* 50px */
}

.full-width-white {
  color: var(--color-gray-dark);
  background-color: var(--color-white);
}

.full-width-gray-lighter {
  color: var(--color-gray-dark);
  background-color: var(--color-gray-lighter);
}

/* Navbar branding */
.navbar-brand-img {
/* Override global border-box because height and padding
    need to behave traditionally for correct vertical alignment */
  box-sizing: content-box;
  padding-top: 0.5rem;    /* 8px */
  padding-bottom: 0.5rem; /* 8px */
  height: 2.25rem;        /* 36px */
}

.body-offset {
  padding-top: 3.75rem; /* 60px */
}

/* Sticky footer */
.footer {
  width: 100%;
  padding: 2rem 0;
  color: var(--color-white);
  background-color: var(--color-gray-dark);
}

/* Footer & nav links */
a.footer-link,
a.switch-language {
  text-decoration: none;
}

a.footer-link {
  color: var(--color-gray-light);
}

a.switch-language {
  color: var(--color-gray-medium);
}

a.footer-link:hover,
a.switch-language:hover {
  filter: brightness(1.2);
  text-decoration: none;
}

.footer-text {
  margin-top: 1em;
  margin-bottom: 1em;
}

/* Patches */
.img-medium-60-percent {
  width: 60%;
  max-width: 100%;
}

.row-padding {
  padding-top: 1.25rem;    /* 20px */
  padding-bottom: 1.25rem; /* 20px */
}

.section {
  margin-top: 2rem;
}

/* The 404 page */
.main-content-fullheight {
  flex: 1 0 auto; /* grows to fill remaining space */
  display: flex; /* enable flexbox to align content inside */
  flex-direction: column; /* stack children vertically */
  min-height: 0; /* fix potential flexbox overflow issues */
}

.full-width-white.body-offset-fullheight {
  flex: 1 0 auto;        /* allow growing inside main-content */
  display: flex;         /* flex container for centering */
  flex-direction: column;/* vertical stack */
  justify-content: center; /* vertical center */
  padding-top: 3.75rem;  /* keep your nav offset */
  padding-bottom: 3.75rem; /* add bottom padding if needed */
  min-height: 0;         /* prevent overflow inside flex */
}