/* The Framework brand styling — colors taken from the logo gradient
   (#09638e deep blue → #2bdabe teal) and theframework.be (dark, teal accent).
   Shared by www.theframework.be and its subsites; master copy lives in the
   theframework.be repository (theme/overrides/assets/tf/tf-brand.css). */

:root {
  --tf-deep-blue: #09638e;
  --tf-teal: #2bdabe;
}

/* Palette hooks (mkdocs.yml: primary/accent = custom) */
[data-md-color-primary="custom"] {
  --md-primary-fg-color: #0c0e11;        /* near-black header, like the website */
  --md-primary-fg-color--light: #1a1e24;
  --md-primary-fg-color--dark: #06080a;
  --md-primary-bg-color: #ffffff;
  --md-primary-bg-color--light: rgba(255, 255, 255, 0.7);
}

[data-md-color-accent="custom"] {
  --md-accent-fg-color: var(--tf-teal);
  --md-accent-fg-color--transparent: rgba(43, 218, 190, 0.1);
  --md-accent-bg-color: #0c0e11;
  --md-accent-bg-color--light: rgba(12, 14, 17, 0.7);
}

/* Dark scheme (site default): darker canvas + teal links */
[data-md-color-scheme="slate"] {
  --md-default-bg-color: #111318;
  --md-typeset-a-color: var(--tf-teal);
}

/* Light scheme: deep blue links */
[data-md-color-scheme="default"] {
  --md-typeset-a-color: var(--tf-deep-blue);
}

/* Website background image, with an overlay per color scheme to keep the
   content readable. */
body[data-md-color-scheme="slate"] {
  background: linear-gradient(rgba(12, 14, 17, 0.72), rgba(12, 14, 17, 0.72)),
    url("background.jpg") center / cover no-repeat fixed;
}

body[data-md-color-scheme="default"] {
  background: linear-gradient(rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0.8)),
    url("background.jpg") center / cover no-repeat fixed;
}

/* Header logos */
.md-header .md-logo img,
.md-header .md-logo svg {
  height: 1.4rem;
  width: auto;
}

.md-header__button.tf-home {
  margin-right: 0;
  padding-right: 0.2rem;
}

/* Teal underline on the active nav tab, echoing theframework.be */
.md-tabs__item--active .md-tabs__link {
  color: var(--tf-teal);
  border-bottom: 2px solid var(--tf-teal);
}

/* Global menu (partials/tf-menu.html): shown from the same breakpoint as
   Material's tabs; below it the regular header title and drawer are used. */
.tf-menu {
  display: none;
}

@media screen and (min-width: 76.25em) {
  .tf-menu {
    display: flex;
    flex-grow: 1;
    align-items: center;
    margin: 0 0.4rem;
  }

  .md-header__title {
    display: none;
  }
}

.tf-menu__list {
  display: flex;
  margin: 0;
  padding: 0;
  list-style: none;
}

.tf-menu__item {
  position: relative;
}

.tf-menu__link {
  display: block;
  padding: 0.6rem 0.7rem;
  border: 0;
  border-bottom: 2px solid transparent;
  background: none;
  color: var(--md-primary-bg-color--light);
  font: inherit;
  font-size: 0.75rem;
  white-space: nowrap;
  cursor: pointer;
  transition: color 125ms;
}

.tf-menu__item--nested > .tf-menu__link::after {
  content: "";
  display: inline-block;
  margin-left: 0.35rem;
  vertical-align: 0.15em;
  border: 0.22rem solid transparent;
  border-top-color: currentcolor;
  border-bottom: 0;
}

.tf-menu__link:hover,
.tf-menu__link:focus-visible,
.tf-menu__item--nested:hover > .tf-menu__link,
.tf-menu__item--nested:focus-within > .tf-menu__link {
  color: var(--tf-teal);
}

.tf-menu__list > .tf-menu__item--active > .tf-menu__link {
  color: var(--tf-teal);
  border-bottom-color: var(--tf-teal);
}

.tf-menu__sub {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 5;
  min-width: 12rem;
  margin: 0;
  padding: 0.3rem 0;
  list-style: none;
  background-color: var(--md-primary-fg-color);
  border-radius: 0.1rem;
  box-shadow: 0 0.4rem 1rem rgba(0, 0, 0, 0.35);
}

.tf-menu__item--nested:hover > .tf-menu__sub,
.tf-menu__item--nested:focus-within > .tf-menu__sub {
  display: block;
}

.tf-menu__sub .tf-menu__link {
  padding: 0.45rem 0.9rem;
  border-bottom: 0;
}

.tf-menu__sub .tf-menu__item--active > .tf-menu__link {
  color: var(--tf-teal);
}

/* Sidebar on wide screens: show only the section you're in (e.g. Blogs).
   The global menu covers the rest. The same navigation is the mobile drawer,
   which keeps the full site, so items are hidden here rather than removed. */
@media screen and (min-width: 76.25em) {
  .md-nav--primary > .md-nav__title {
    display: none;
  }

  .md-nav--primary > .md-nav__list > .md-nav__item:not(.md-nav__item--active) {
    display: none;
  }
}

/* Legal links in the footer (partials/copyright.html) */
.tf-legal a {
  margin-right: 0.8rem;
  color: var(--md-footer-fg-color--light);
}

.tf-legal a:hover {
  color: var(--tf-teal);
}