/* ===== Yellow / black / white theme ===== */
:root {
  --y: #ffc928;          /* main yellow (matches the FH logo) */
  --y-soft: #ffe08a;
  --y-deep: #8a6500;     /* yellow dark enough to read on white */
}

/* ---------- Dark mode: black + white + yellow ---------- */
[data-md-color-scheme="slate"] {
  --md-default-bg-color: #0b0b0b;
  --md-default-bg-color--light: #141414;
  --md-default-fg-color: #ffffff;
  --md-default-fg-color--light: #d6d6d6;
  --md-primary-fg-color: #000000;
  --md-primary-bg-color: #ffc928;
  --md-accent-fg-color: #ffc928;
  --md-typeset-a-color: #ffc928;
  --md-code-bg-color: #1a1a1a;
  --md-footer-bg-color: #000000;
  --md-footer-bg-color--dark: #000000;
}
[data-md-color-scheme="slate"] .md-header { border-bottom: 2px solid var(--y); }

/* ---------- Light mode: white + black + yellow ---------- */
[data-md-color-scheme="default"] {
  --md-default-bg-color: #ffffff;
  --md-default-fg-color: #111111;
  --md-primary-fg-color: #ffc928;
  --md-primary-bg-color: #111111;
  --md-accent-fg-color: #8a6500;
  --md-typeset-a-color: #8a6500;
}

/* ---------- General ---------- */
.md-header__button.md-logo img { height: 2rem; width: auto; }
.md-typeset img { max-width: 100%; height: auto; }
.md-typeset table:not([class]) { display: block; overflow-x: auto; }
.md-typeset h1 { font-weight: 800; letter-spacing: -0.01em; }
.md-typeset h1, .md-typeset h2 { border-bottom: 2px solid var(--y); padding-bottom: .25em; }

/* ---------- Wider page + bigger sidebar ---------- */
.md-grid { max-width: 90rem; }
@media screen and (min-width: 60em) {
  .md-sidebar--primary { width: 16.5rem; }
}
.md-sidebar--primary .md-nav { font-size: .95rem; line-height: 1.4; }

/* sub-pages: soft grey, yellow when active or hovered */
.md-nav__link { color: var(--md-default-fg-color--light); }
.md-nav__link:hover,
.md-nav__link--active,
.md-nav__item--active > .md-nav__link,
.md-nav__item--active > .md-nav__container > .md-nav__link {
  color: var(--y);
}
[data-md-color-scheme="default"] .md-nav__link:hover,
[data-md-color-scheme="default"] .md-nav__link--active,
[data-md-color-scheme="default"] .md-nav__item--active > .md-nav__link,
[data-md-color-scheme="default"] .md-nav__item--active > .md-nav__container > .md-nav__link {
  color: var(--y-deep);
}

/* top-level entries: big, bold, white */
.md-nav--primary > .md-nav__list > .md-nav__item > a.md-nav__link,
.md-nav--primary > .md-nav__list > .md-nav__item > .md-nav__container > a.md-nav__link,
.md-nav--primary > .md-nav__list > .md-nav__item > label.md-nav__link {
  display: flex;
  align-items: center;
  font-size: 1rem;
  font-weight: 700;
  padding: .4rem .6rem;
  margin-top: .15rem;
  border-radius: .5rem;
  color: var(--md-default-fg-color);
}
.md-nav--primary > .md-nav__list > .md-nav__item > a.md-nav__link:hover,
.md-nav--primary > .md-nav__list > .md-nav__item > .md-nav__container > a.md-nav__link:hover {
  background: rgba(255, 201, 40, .14);
  color: var(--y);
}
[data-md-color-scheme="default"] .md-nav--primary > .md-nav__list > .md-nav__item > a.md-nav__link:hover,
[data-md-color-scheme="default"] .md-nav--primary > .md-nav__list > .md-nav__item > .md-nav__container > a.md-nav__link:hover {
  background: rgba(255, 201, 40, .3);
  color: #111111;
}

/* ---------- Sidebar icons ----------
   Two kinds: a symbol (drawn in yellow, using --nav-icon)
              or a picture (shown in its own colours, using --nav-img). */
.md-nav--primary > .md-nav__list > .md-nav__item > a.md-nav__link::before,
.md-nav--primary > .md-nav__list > .md-nav__item > .md-nav__container > a.md-nav__link::before,
.md-nav--primary > .md-nav__list > .md-nav__item > label.md-nav__link::before {
  content: "";
  flex: none;
  width: 1.5rem;
  height: 1.5rem;
  margin-right: .6rem;
  background-color: var(--nav-bg, var(--y));
  background-image: var(--nav-img, none);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  -webkit-mask-image: var(--nav-icon, none);
  mask-image: var(--nav-icon, none);
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  image-rendering: pixelated;
}
[data-md-color-scheme="default"] .md-nav--primary > .md-nav__list > .md-nav__item > a.md-nav__link::before,
[data-md-color-scheme="default"] .md-nav--primary > .md-nav__list > .md-nav__item > .md-nav__container > a.md-nav__link::before,
[data-md-color-scheme="default"] .md-nav--primary > .md-nav__list > .md-nav__item > label.md-nav__link::before {
  background-color: var(--nav-bg, var(--y-deep));
}

/* ===== Sidebar: fit every main entry without scrolling ===== */
@media screen and (min-width: 60em) {
  .md-sidebar--primary {
    width: 19rem;
    /* row height adapts to the window height; the 13 is the number of top-level entries */
    --row: clamp(2.2rem, calc((100vh - 13.5rem) / 13), 3rem);
  } 
/* Material keeps the menu column narrow; let it use the full sidebar width */
  .md-sidebar--primary .md-sidebar__inner {
    padding-right: 0 !important;
  }
  .md-sidebar--primary .md-nav--primary > .md-nav__list > .md-nav__item > .md-nav__link,
  .md-sidebar--primary .md-nav--primary > .md-nav__list > .md-nav__item > .md-nav__container > .md-nav__link {
    display: flex !important;
    align-items: center !important;
    min-height: var(--row) !important;
    padding: 0 .6rem !important;
    margin-top: 0 !important;
    font-size: clamp(.95rem, calc(var(--row) * .42), 1.15rem) !important;
    line-height: 1.2 !important;
  }
  .md-sidebar--primary .md-nav--primary > .md-nav__list > .md-nav__item > .md-nav__link::before,
  .md-sidebar--primary .md-nav--primary > .md-nav__list > .md-nav__item > .md-nav__container > .md-nav__link::before {
    width: clamp(1.2rem, calc(var(--row) * .55), 1.7rem) !important;
    height: clamp(1.2rem, calc(var(--row) * .55), 1.7rem) !important;
    margin-right: .55rem !important;
  }
}

/* ===== Sub-pages sit under their parent, indented ===== */
@media screen and (min-width: 60em) {
  /* Material wraps an opened section's link in an extra box; it must not get padding too */
  .md-sidebar--primary .md-nav--primary > .md-nav__list > .md-nav__item > .md-nav__container {
    padding: 0 !important;
    min-height: 0 !important;
  }
  /* children start exactly under the parent's text:
     link padding (.6rem) + icon size + icon gap (.55rem) + Material's own gap (.4rem).
     If you change the icon size above (clamp(1.2rem, ..., 1.7rem)), change it here too. */
  .md-sidebar--primary .md-nav--primary > .md-nav__list > .md-nav__item > .md-nav > .md-nav__list {
    padding-left: calc(.6rem + clamp(1.2rem, calc(var(--row) * .55), 1.7rem) + .55rem + .4rem) !important;
  }
}

/* ---------- Home page ---------- */
.hero { text-align: center; padding: 1.2rem 0 .4rem; }
.hero img { width: 220px; max-width: 60%; }
.hero p { max-width: 38rem; margin: .4rem auto; }

/* picture used instead of a symbol in a home-page card */
.md-typeset .card-icon {
  width: 1.25em;
  height: 1.25em;
  vertical-align: -.25em;
  image-rendering: pixelated;
}

[data-md-color-scheme="slate"] .md-typeset .md-button {
  color: var(--y);
  border-color: var(--y);
}
[data-md-color-scheme="slate"] .md-typeset .md-button--primary {
  background-color: var(--y);
  color: #000000;
}
[data-md-color-scheme="slate"] .md-typeset .md-button:hover {
  background-color: var(--y-soft);
  border-color: var(--y-soft);
  color: #000000;
}
[data-md-color-scheme="default"] .md-typeset .md-button {
  color: #111111;
  border-color: #111111;
}
[data-md-color-scheme="default"] .md-typeset .md-button--primary {
  background-color: var(--y);
  border-color: var(--y);
  color: #111111;
}

/* cards */
.md-typeset .grid.cards > ul > li {
  border: 1px solid rgba(255, 201, 40, .35);
  border-radius: .6rem;
  transition: border-color .2s, transform .2s, box-shadow .2s;
}
.md-typeset .grid.cards > ul > li:hover {
  border-color: var(--y);
  transform: translateY(-2px);
  box-shadow: 0 .4rem 1.2rem rgba(0, 0, 0, .35);
}

.md-copyright { width: 100%; text-align: center; }
.md-copyright a { text-decoration: underline; }

/* Powers: generic lightning-bolt symbol instead of a picture */
.md-nav--primary > .md-nav__list > .md-nav__item:nth-child(5) {
  --nav-img: none;
  --nav-bg: initial;
  --nav-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 2v11h3v9l7-12h-4l4-8z'/%3E%3C/svg%3E");
}
/* which icon for which entry (1 = Home, 2 = Installation, ... in menu order) */
.md-nav--primary > .md-nav__list > .md-nav__item:nth-child(1) { --nav-img: url("../uploads/2703a3f0b163b13baac62a9fe5115772/logo_big.png"); --nav-bg: transparent; } /* Home - FH logo */
.md-nav--primary > .md-nav__list > .md-nav__item:nth-child(2) { --nav-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 20h14v-2H5m14-9h-4V3H9v6H5l7 7z'/%3E%3C/svg%3E"); } /* Installation */
.md-nav--primary > .md-nav__list > .md-nav__item:nth-child(3) { --nav-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m15.07 11.25-.9.92C13.45 12.89 13 13.5 13 15h-2v-.5c0-1.11.45-2.11 1.17-2.83l1.24-1.26c.37-.36.59-.86.59-1.41a2 2 0 0 0-2-2 2 2 0 0 0-2 2H8a4 4 0 0 1 4-4 4 4 0 0 1 4 4 3.2 3.2 0 0 1-.93 2.25M13 19h-2v-2h2M12 2A10 10 0 0 0 2 12a10 10 0 0 0 10 10 10 10 0 0 0 10-10c0-5.53-4.5-10-10-10'/%3E%3C/svg%3E"); } /* FAQs */
.md-nav--primary > .md-nav__list > .md-nav__item:nth-child(4) { --nav-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20 19V7H4v12zm0-16a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2zm-7 14v-2h5v2zm-3.42-4L5.57 9H8.4l3.3 3.3c.39.39.39 1.03 0 1.42L8.42 17H5.59z'/%3E%3C/svg%3E"); } /* Commands */
.md-nav--primary > .md-nav__list > .md-nav__item:nth-child(6) { --nav-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 3c-1.27 0-2.4.8-2.82 2H3v2h1.95L2 14c-.47 2 1 3 3.5 3s4.06-1 3.5-3L6.05 7h3.12c.33.85.98 1.5 1.83 1.83V20H2v2h20v-2h-9V8.82c.85-.32 1.5-.97 1.82-1.82h3.13L15 14c-.47 2 1 3 3.5 3s4.06-1 3.5-3l-2.95-7H21V5h-6.17C14.4 3.8 13.27 3 12 3m0 2a1 1 0 0 1 1 1 1 1 0 0 1-1 1 1 1 0 0 1-1-1 1 1 0 0 1 1-1m-6.5 5.25L7 14H4zm13 0L20 14h-3z'/%3E%3C/svg%3E"); } /* Karma */
.md-nav--primary > .md-nav__list > .md-nav__item:nth-child(7) { --nav-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M16.23 18 12 15.45 7.77 18l1.12-4.81-3.73-3.23 4.92-.42L12 5l1.92 4.53 4.92.42-3.73 3.23zM12 2C6.47 2 2 6.5 2 12a10 10 0 0 0 10 10 10 10 0 0 0 10-10A10 10 0 0 0 12 2'/%3E%3C/svg%3E"); } /* Skill Point System */
.md-nav--primary > .md-nav__list > .md-nav__item:nth-child(8) { --nav-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20.5 11H19V7a2 2 0 0 0-2-2h-4V3.5A2.5 2.5 0 0 0 10.5 1 2.5 2.5 0 0 0 8 3.5V5H4a2 2 0 0 0-2 2v3.8h1.5c1.5 0 2.7 1.2 2.7 2.7S5 16.2 3.5 16.2H2V20a2 2 0 0 0 2 2h3.8v-1.5c0-1.5 1.2-2.7 2.7-2.7s2.7 1.2 2.7 2.7V22H17a2 2 0 0 0 2-2v-4h1.5a2.5 2.5 0 0 0 2.5-2.5 2.5 2.5 0 0 0-2.5-2.5'/%3E%3C/svg%3E"); } /* Accessory Support */
.md-nav--primary > .md-nav__list > .md-nav__item:nth-child(9) { --nav-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M21 16.5c0 .38-.21.71-.53.88l-7.9 4.44c-.16.12-.36.18-.57.18s-.41-.06-.57-.18l-7.9-4.44A.99.99 0 0 1 3 16.5v-9c0-.38.21-.71.53-.88l7.9-4.44c.16-.12.36-.18.57-.18s.41.06.57.18l7.9 4.44c.32.17.53.5.53.88zM12 4.15 6.04 7.5 12 10.85l5.96-3.35zM5 15.91l6 3.38v-6.71L5 9.21zm14 0v-6.7l-6 3.37v6.71z'/%3E%3C/svg%3E"); } /* Blocks */
.md-nav--primary > .md-nav__list > .md-nav__item:nth-child(10) { --nav-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 4h14a3 3 0 0 1 3 3v4h-7v-1H9v1H2V7a3 3 0 0 1 3-3m6 7h2v2h-2zm-9 1h7v1l2 2h2l2-2v-1h7v8H2z'/%3E%3C/svg%3E"); } /* Items */
.md-nav--primary > .md-nav__list > .md-nav__item:nth-child(11) { --nav-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M16 21H8a1 1 0 0 1-1-1v-7.93l-1.3 1a.996.996 0 0 1-1.41 0l-2.83-2.78a.996.996 0 0 1 0-1.41L7.34 3H9c0 1.1 1.34 2 3 2s3-.9 3-2h1.66l5.88 5.88c.39.39.39 1.02 0 1.41l-2.83 2.83c-.39.38-1.02.38-1.41 0l-1.3-1V20a1 1 0 0 1-1 1'/%3E%3C/svg%3E"); } /* Suitsets */
.md-nav--primary > .md-nav__list > .md-nav__item:nth-child(12) { --nav-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M2 13h2v2h2v-2h2v2h2v-2h2v2h2v-5l3-3V1h2l4 2-4 2v2l3 3v12H11v-3a2 2 0 0 0-2-2 2 2 0 0 0-2 2v3H2zm16-3c-.55 0-1 .54-1 1.2V13h2v-1.8c0-.66-.45-1.2-1-1.2'/%3E%3C/svg%3E"); } /* Structures */
.md-nav--primary > .md-nav__list > .md-nav__item:nth-child(13) { --nav-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 5.5A3.5 3.5 0 0 1 15.5 9a3.5 3.5 0 0 1-3.5 3.5A3.5 3.5 0 0 1 8.5 9 3.5 3.5 0 0 1 12 5.5M5 8c.56 0 1.08.15 1.53.42-.15 1.43.27 2.85 1.13 3.96C7.16 13.34 6.16 14 5 14a3 3 0 0 1-3-3 3 3 0 0 1 3-3m14 0a3 3 0 0 1 3 3 3 3 0 0 1-3 3c-1.16 0-2.16-.66-2.66-1.62a5.54 5.54 0 0 0 1.13-3.96c.45-.27.97-.42 1.53-.42M5.5 18.25c0-2.07 2.91-3.75 6.5-3.75s6.5 1.68 6.5 3.75V20h-13zM0 20v-1.5c0-1.39 1.89-2.56 4.45-2.9-.59.68-.95 1.62-.95 2.65V20zm24 0h-3.5v-1.75c0-1.03-.36-1.97-.95-2.65 2.56.34 4.45 1.51 4.45 2.9z'/%3E%3C/svg%3E"); /* Villagers */ }

/* Hide Material's hidden "table of contents" link that the sidebar code made visible */
.md-sidebar--primary .md-nav--primary > .md-nav__list > .md-nav__item > label.md-nav__link[for="__toc"] {
  display: none !important;
}
/* ===== Lighter dark mode (was almost pure black) ===== */
[data-md-color-scheme="slate"] {
  --md-default-bg-color: #1f1f1f;        /* page background */
  --md-default-bg-color--light: #2a2a2a; /* cards, panels */
  --md-code-bg-color: #2b2b2b;
  --md-primary-fg-color: #2a2a2a;        /* top bar */
  --md-footer-bg-color: #181818;
  --md-footer-bg-color--dark: #181818;
}

/* ===== Search bar next to the title, theme switch pushed to the right ===== */
@media screen and (min-width: 60em) {
  .md-header__title { flex: 0 0 16rem; margin-right: 1rem; }
  .md-search { order: 2; margin-left: 0; }
  .md-header__option { order: 3; margin-left: auto; }
  .md-header__source { order: 4; }
  .md-search__inner { width: 22rem; }
}