/*
 * The header and footer every page shares: the home page, the Privacy Policy
 * and the Terms of Use. scripts/build_site.py generates their markup.
 *
 * Each page brings its own base styles (css/main.css on the home page, the
 * iOS app's document styles on the others), so these rules set their own
 * fonts, sizes, margins and colors rather than inheriting them.
 */

@font-face {
  font-family: "akrobat";
  src: url("../fonts/akrobat-bold-webfont.woff") format("woff"), url("../fonts/akrobat-bold-webfont.ttf") format("truetype");
  font-weight: bold;
  font-style: normal;
}

@font-face {
  font-family: "akrobat";
  src: url("../fonts/akrobat-regular-webfont.woff") format("woff"), url("../fonts/akrobat-regular-webfont.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: "icomoon";
  src: url("../fonts/icomoon.woff?y0f2id") format("woff"), url("../fonts/icomoon.ttf?y0f2id") format("truetype");
  font-weight: normal;
  font-style: normal;
}

/* Ember, the app's standard color theme, in its dark-mode colors; the light-mode pair takes white text. */
header.site,
footer.site {
  --site-accent: #ff4f4f;
  --site-companion: #ff4f8b;
  --site-accent-light: #d02f2f;
  --site-companion-light: #b5176b;
  --site-text: #d1d1d6;
  --site-border: #333;
  --site-background: #0d0d0d;
  --site-font: "akrobat", "Arial", "Helvetica Neue", "Helvetica", sans-serif;
  box-sizing: border-box;
  font-family: var(--site-font);
  font-size: 18px;
  line-height: 1.5;
  color: #fff;
}

header.site *,
footer.site * {
  box-sizing: border-box;
}

header.site a,
footer.site a {
  color: #fff;
  text-decoration: none;
  word-break: normal;
  background-color: transparent;
}

header.site img,
footer.site img {
  margin: 0;
  max-width: none;
  vertical-align: middle;
}

header.site ul,
footer.site ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

header.site li,
footer.site li {
  margin: 0;
}

footer.site i[class^="icon-"] {
  font-family: "icomoon" !important;
  font-style: normal;
  font-weight: normal;
  line-height: 1;
  text-transform: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

footer.site .icon-mail:before {
  content: "\e907";
}

footer.site .icon-instagram2:before {
  content: "\e902";
}

footer.site .icon-twitter2:before {
  content: "\e903";
}

/* The header: the logo, the page links and a language menu, over the home page's photo. */

header.site {
  position: relative;
  z-index: 20;
  background: linear-gradient(rgba(0, 0, 0, 0.55), rgba(0, 0, 0, 0.85)), url("../images/image1-2x.jpg") 70% 20% / cover;
  border-bottom: 1px solid var(--site-border);
}

/* On the home page the bar lies over the header photo itself. */
header.site.overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  background: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0));
  border-bottom: 0;
}

header.site .bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 28px;
  max-width: 1400px;
  margin: 0 auto;
  padding: 20px;
  font-weight: bold;
  letter-spacing: 2px;
  text-transform: uppercase;
}

header.site a.home {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-right: auto;
  font-size: 24px;
  letter-spacing: 6px;
}

header.site a.home img {
  width: 40px;
  height: auto;
}

header.site nav.pages {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

header.site nav.pages a {
  padding: 6px 14px;
  border: 2px solid var(--site-accent);
  transition: color 0.3s, background 0.3s;
}

header.site nav.pages a:hover {
  color: var(--site-accent);
}

header.site nav.pages a[aria-current] {
  color: #000;
  border-color: transparent;
  background: linear-gradient(135deg, var(--site-accent), var(--site-companion)) border-box;
}

header.site nav.pages a[aria-current]:hover {
  color: #fff;
  background: linear-gradient(135deg, var(--site-accent-light), var(--site-companion-light)) border-box;
}

header.site nav.languages {
  position: relative;
}

header.site nav.languages summary {
  cursor: pointer;
  list-style: none;
}

header.site nav.languages summary:hover {
  color: var(--site-accent);
}

header.site nav.languages summary::-webkit-details-marker {
  display: none;
}

header.site nav.languages ul {
  position: absolute;
  top: 100%;
  right: 0;
  z-index: 1;
  width: 24em;
  max-width: calc(100vw - 40px);
  margin: 12px 0 0;
  padding: 12px 16px;
  columns: 2;
  font-family: -apple-system, system-ui, sans-serif;
  font-size: 16px;
  font-weight: normal;
  letter-spacing: normal;
  text-transform: none;
  background-color: var(--site-background);
  border: 1px solid var(--site-border);
  border-top: 4px solid var(--site-accent);
}

header.site nav.languages li {
  margin-bottom: 0.4em;
}

header.site nav.languages a {
  color: var(--site-text);
}

header.site nav.languages a:hover,
header.site nav.languages strong {
  color: var(--site-accent);
}

/* The footer: contact details, the languages and the document links, over a photo. */

footer.site {
  padding: 110px 20px 48px;
  text-align: center;
  letter-spacing: 1px;
  background: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)), url("../images/image7-2x.jpg") center / cover;
}

footer.site a:hover {
  color: var(--site-accent);
}

footer.site a.logo {
  display: inline-block;
  margin: 0 0 50px;
}

footer.site a.logo img {
  width: 120px;
  height: auto;
}

footer.site .contact {
  max-width: 820px;
  margin: 0 auto 40px;
}

footer.site .contact h2 {
  margin: 0 0 20px;
  padding: 0;
  border: 0;
  font-family: var(--site-font);
  font-size: 56px;
  font-weight: bold;
  line-height: 1.2;
  letter-spacing: 7px;
  text-transform: uppercase;
  color: #fff;
}

footer.site .contact p {
  margin: 0 0 30px;
  font-size: 20px;
  font-weight: bold;
  line-height: 1.6;
  letter-spacing: 3px;
}

footer.site .contact p a {
  color: var(--site-accent);
}

footer.site .contact p a:hover {
  color: #fff;
}

footer.site a.email {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  font-size: 20px;
  font-weight: bold;
  letter-spacing: 2px;
}

footer.site a.email i {
  font-size: 32px;
}

footer.site ul.social {
  display: flex;
  justify-content: center;
  gap: 20px;
  margin: 0 0 60px;
}

footer.site ul.social i {
  font-size: 36px;
}

footer.site nav.language-list {
  max-width: 900px;
  margin: 0 auto 64px;
}

footer.site nav.language-list ul {
  font-size: 14px;
  line-height: 1.6;
}

footer.site nav.language-list li {
  display: inline-block;
  margin: 0 10px 8px;
}

footer.site nav.language-list strong {
  color: var(--site-accent);
  font-weight: normal;
}

footer.site .copyright {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 12px 40px;
  max-width: 1200px;
  margin: 0 auto;
  font-size: 14px;
  font-weight: bold;
  letter-spacing: 2px;
}

footer.site .copyright nav {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 40px;
}

footer.site .copyright a[aria-current] {
  color: var(--site-accent);
}

@media (max-width: 767px) {
  header.site .bar {
    gap: 12px 16px;
    padding: 16px;
    font-size: 14px;
    letter-spacing: 1px;
  }
  header.site a.home {
    font-size: 20px;
    letter-spacing: 4px;
  }
  header.site a.home img {
    width: 32px;
  }
  /* The language menu sits beside the logo, and the page links get a row of their own. */
  header.site nav.languages {
    order: 1;
  }
  header.site nav.pages {
    order: 2;
    flex-basis: 100%;
    gap: 8px;
  }
  header.site nav.pages a {
    padding: 4px 10px;
  }
  footer.site {
    padding: 64px 20px 32px;
  }
  footer.site a.logo {
    margin: 0 0 30px;
  }
  footer.site a.logo img {
    width: 90px;
  }
  footer.site .contact h2 {
    font-size: 36px;
    letter-spacing: 4px;
  }
  footer.site .contact p {
    font-size: 15px;
    letter-spacing: 2px;
  }
  footer.site a.email {
    font-size: 15px;
  }
  footer.site a.email i {
    font-size: 22px;
  }
  footer.site ul.social {
    margin: 0 0 40px;
  }
  footer.site ul.social i {
    font-size: 26px;
  }
  footer.site nav.language-list {
    margin-bottom: 40px;
  }
  footer.site nav.language-list ul {
    font-size: 12px;
  }
  footer.site nav.language-list li {
    margin: 0 6px 6px;
  }
  footer.site .copyright {
    flex-direction: column;
    align-items: center;
    font-size: 11px;
  }
  footer.site .copyright nav {
    justify-content: center;
    gap: 8px 24px;
  }
}

/* Printing shows the page's content only. */
@media print {
  header.site,
  footer.site {
    display: none;
  }
}