/* eClimber look (colours and fonts of www.eclimber.ch) on top of Material for MkDocs. */
@import url("/assets/fonts/fonts.css");   /* served by the website; without it the fallbacks apply */

:root {
  --md-primary-fg-color: #135E5D;
  --md-primary-fg-color--light: #4E8786;
  --md-primary-fg-color--dark: #0E4847;
  --md-accent-fg-color: #0FB00F;
  --md-typeset-a-color: #135E5D;
  --md-text-font: "Denim WD Regular", "Denim WD", "Poppins", system-ui, sans-serif;
  --md-code-font: "IBM Plex Mono", ui-monospace, monospace;
  --ec-green: #14DA14;
  --ec-dark: #0E2A2A;
}

body, input { font-family: var(--md-text-font); }
.md-typeset { color: var(--ec-dark); font-size: .8rem; line-height: 1.65; }
.md-typeset h1, .md-typeset h2, .md-typeset h3 {
  font-family: "Denim WD INK Medium", "Denim WD", "Barlow Semi Condensed", sans-serif;
  color: #135E5D; font-weight: 700; letter-spacing: -.01em;
}
.md-typeset h1 { font-size: 2.1rem; line-height: 1.1; }
.md-typeset h2 { font-size: 1.45rem; margin-top: 2em; }
.md-header, .md-tabs { background: #135E5D; }
.md-header__button.md-logo img { height: 1.1rem; width: auto; }

/* The website's header (theme/main.html) sits on top; Material's header below it is the manual's own bar
   (chapters, search, version), a little darker, without a second logo. */
.md-header { background: #0E4847; box-shadow: none; }
.md-header__button.md-logo { display: none; }
.md-header__title { margin-left: .8rem; }
/* Slim bar of www.eclimber.ch above and below (theme/main.html): logo and the way back */
.ec-bar { background: #135E5D; color: #FFFFFF; display: flex; align-items: center; justify-content: space-between; gap: 16px;
  flex-wrap: wrap; padding: 8px max(16px, calc((100% - 61rem) / 2 + .8rem)); font-size: 14px; line-height: 1.4; }
.ec-bar a { color: #FFFFFF; text-decoration: none; }
.ec-bar a:hover { color: #FFFFFF; text-decoration: underline; }
.ec-bar-logo img { height: 22px; width: auto; display: block; }
.ec-bar-back { font-weight: 500; }
.ec-bar nav { display: flex; flex-wrap: wrap; gap: 6px 18px; }
.ec-bar-foot { padding-top: 12px; padding-bottom: 12px; }
/* Back/next links and the version note in the light grey of the website, then the website's footer */
.md-footer { background: #F4F5F6; color: #135E5D; }
.md-footer__link, .md-footer__title { color: #135E5D; }
.md-footer__direction { color: #4E6B6B; opacity: 1; }
.md-footer-meta { background: #F4F5F6; border-top: 1px solid #DDE3E3; }
.md-footer-meta .md-copyright, .md-footer-meta .md-copyright__highlight { color: #4E6B6B; }
/* site.css enlarges h1/h2 on phones for the website's hero titles; the manual keeps its own sizes */
@media (max-width: 640px) {
  .md-typeset h1 { font-size: 1.6rem !important; }
  .md-typeset h2 { font-size: 1.25rem !important; }
}
.md-nav__link--active, .md-nav__link:hover { color: #135E5D !important; font-weight: 600; }

/* Screenshots: panel pictures with rounded corners like the 7" display, phone pictures narrow */
.md-typeset img { border-radius: 10px; box-shadow: 0 6px 24px rgba(14, 42, 42, .14); }
/* Screenshots are drawn inside the device (docs/anleitung/rahmen.py): no frame or shadow of their own */
.md-typeset img[src*="bilder/"][src*=".png"] { box-shadow: none; border-radius: 0; max-width: 100%; height: auto; }
.md-typeset img[src*="bilder/"][src*=".png"]:not([src*="dashboard-"]) { width: 720px; display: block; }
/* Phone pictures (dashboard on the phone): small and centred */
.md-typeset img[src*="bilder/dashboard-anmelden"], .md-typeset img[src*="bilder/dashboard-handy"] { width: 260px; display: block; margin: 0 auto; }
.md-typeset figure { margin: 1.4em 0; }
.md-typeset figcaption { font-size: .7rem; color: #4E6B6B; max-width: none; }

/* Drawings (panel layout) without the screenshot frame */
.md-typeset img.zeichnung { box-shadow: none; border-radius: 0; width: 100%; max-width: 520px; height: auto; display: block; margin: 0 auto; }

/* Several pictures side by side, e.g. the loading countdown; stacked on a phone */
.md-typeset .bildreihe { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .8rem; margin: 1.4em 0; }
.md-typeset .bildreihe img { max-width: 100%; width: 100%; }
.md-typeset .bildreihe figure { margin: 0; }
@media (max-width: 600px) { .md-typeset .bildreihe { grid-template-columns: 1fr; } }

/* Beta badge in a heading */
.md-typeset .beta { display: inline-block; vertical-align: middle; font-size: .8rem; font-weight: 600; letter-spacing: .02em;
  padding: .1em .6em; border-radius: 999px; background: #F2A516; color: #0E2A2A; }

/* Physical buttons, e.g. <kbd>Starttasten</kbd> */
.md-typeset kbd { background: var(--ec-dark); color: #fff; box-shadow: none; border-radius: 6px; padding: 0 .4em; }

.md-typeset .admonition.warning, .md-typeset details.warning { border-color: #E8A317; }
.md-typeset .warning > .admonition-title { background: rgba(232, 163, 23, .12); }
.md-typeset .warning > .admonition-title::before { background-color: #E8A317; }
.md-typeset .admonition.tip > .admonition-title::before { background-color: #0FB00F; }

/* Role badges */
.rolle { white-space: nowrap; display: inline-block; padding: 0 .55em; border-radius: 999px; font-size: .7rem; font-weight: 600; }
.rolle.normal { background: #E6EFEE; color: #135E5D; }
.rolle.trainer { background: #135E5D; color: #fff; }
.rolle.service { background: #F2A516; color: #0E2A2A; }