@font-face {
  font-family: "PT Sans";
  font-weight: normal;
  font-style: normal;
  src: url(./fonts/pt-sans-v12-latin-regular.woff2);
}

@font-face {
  font-family: "PT Sans";
  font-weight: bold;
  font-style: normal;
  src: url(./fonts/pt-sans-v12-latin-700.woff2);
}

@font-face {
  font-family: "PT Sans";
  font-weight: normal;
  font-style: italic;
  src: url(./fonts/pt-sans-v12-latin-italic.woff2);
}

:root > * {
  /* rfmondial custom variables */
  --rfm-primary: #116bb4;
  --rfm-primary-dark: #182c47;
  --rfm-secondary: #f2f2f2;
  --rfm-gap: 1rem;
  --rfm-big-gap: calc(2 * var(--rfm-gap));
  --rfm-header-height: 90px;
  --rfm-border-color: #ccc;

  /* overwrite mkdocs material variables */
  --md-text-font: "PT Sans" !important;
  --md-primary-fg-color: var(--rfm-primary) !important;
  --md-default-fg-color--light: var(--rfm-primary-dark) !important;
  --md-footer-bg-color: var(--rfm-primary) !important;
  --md-accent-fg-color: var(--rfm-primary);
}

h1,
h2,
h3 {
  text-transform: uppercase;
  text-align: center;
  font-weight: bold !important;
  color: var(--rfm-primary-dark);
}

h1 {
  font-size: 2rem !important;
}

h2 {
  font-size: 1.5rem !important;
}

h3 {
  text-align: left;
  margin: 0 !important;
  font-size: 1.25em !important;
}

footer {
  padding: var(--rfm-gap);
  font-size: 16px;
  display: flex;
  justify-content: center;
  gap: 6rem;
  line-height: 1.2rem;
}

/* use double chevrons as list style icon in link lists */
.admonition ul:has(> li > a),
ul.link-list {
  list-style-type: none !important;
}

.admonition ul > li:has(> a),
ul.link-list > li {
  margin: 0 !important;
  margin-left: 0.7rem !important;
}

.admonition ul > li > a,
ul.link-list > li > a {
  position: relative;
}

.admonition ul > li > a::before,
ul.link-list > li > a::before {
  /* double chevron */
  content: "\00BB";
  position: absolute;
  left: -0.7rem;
  color: currentColor;
  font-weight: bold;
  line-height: 1.2rem;
}

.text-center {
  text-align: center;
}

.flex-center {
  display: flex;
  justify-content: center;
  align-items: center;
}

.flex-column {
  flex-direction: column;
}

.flex-space-between {
  display: flex;
  justify-content: space-between;
}

.flex-gap {
  gap: var(--rfm-gap);
}

.gap-bottom {
  margin-bottom: var(--rfm-big-gap);
}

/* adapt back-to-top button style */
.md-top {
  top: 3.2rem !important;
}

/* remove box shadow from header styles */
.md-header--shadow {
  box-shadow: none !important;
}

/* remove "Metadata" title from news posts */
.md-post__meta .md-post__title {
  display: none;
}

/* adapt admonition and details (accordion) styles */
.md-typeset {
  :is(.admonition, details) {
    font-size: inherit !important;
    border-color: var(--rfm-border-color) !important;
  }

  :is(.admonition-title, summary) {
    font-size: 1rem;
  }

  .admonition {
    background-color: var(--rfm-secondary) !important;
    padding: var(--rfm-gap);
    box-shadow: none;

    .admonition-title {
      background-color: var(--rfm-secondary) !important;
      padding: 0;
      margin: 0;
      text-transform: uppercase;
      border-bottom: 1px solid var(--rfm-border-color);
      width: fit-content;

      &::before {
        content: none;
      }
    }
  }

  details {
    summary {
      background-color: var(--rfm-secondary) !important;
      padding: var(--rfm-gap) 0.6rem !important;
      color: var(--rfm-primary);

      &::before {
        content: none !important;
      }

      &::after {
        top: 50% !important;
        transform: translate(0, -50%);
      }
    }
  }

  details[open] > summary::after {
    transform: translate(0, -50%) rotate(90deg) !important;
  }
}

details.job:not(:last-child) {
  margin-bottom: var(--rfm-gap);
}

.md-grid {
  max-width: 50rem;
}

.responsive-columns {
  display: flex;
  gap: var(--rfm-gap);
}

.responsive-columns > * {
  flex: 1 1 0px;
}

.responsive-columns:nth-child(odd):not(.fix-direction) {
  flex-direction: row-reverse;
}

/* slider / carousel: overwrite material theme style for lists */
.splide__list {
  display: flex !important;
}

.devider-full-width {
  margin-top: var(--rfm-gap);
  margin-bottom: var(--rfm-gap);
  border-bottom-width: 2px;
  border-bottom-style: solid;
  border-bottom-color: #ccc;
}

@media screen and (max-width: 800px) {
  .responsive-columns {
    flex-direction: column !important;
  }

  footer {
    flex-direction: column;
    gap: 1rem;
  }
}