/* klipper-auto-eject website: colours and the home page. */

:root {
  --ae-orange: #e65c00;
  --ae-orange-soft: rgba(230, 92, 0, 0.12);
  --ae-ok: #2e7d32;
  --ae-warn: #b26a00;
  --ae-no: #c62828;
  /* a dark header and tabs in both themes, orange for links and buttons */
  --md-primary-fg-color: #161b22;
  --md-primary-fg-color--light: #2a323d;
  --md-primary-fg-color--dark: #0d1117;
  --md-primary-bg-color: #f0f3f6;
  --md-primary-bg-color--light: rgba(240, 243, 246, 0.7);
  --md-accent-fg-color: #ff7a1a;
  --md-accent-fg-color--transparent: rgba(255, 122, 26, 0.1);
  --md-typeset-a-color: #c45000;
}

[data-md-color-scheme="slate"] {
  --md-hue: 215;
  --md-default-bg-color: #0d1117;
  --md-default-bg-color--light: #161b22;
  --md-code-bg-color: #161b22;
  --md-footer-bg-color: #0a0d12;
  --md-footer-bg-color--dark: #07090d;
  --md-typeset-a-color: #ff8a3d;
  --ae-orange: #ff8a3d;
  --ae-orange-soft: rgba(255, 138, 61, 0.13);
  --ae-ok: #5cc26a;
  --ae-warn: #f0a63b;
  --ae-no: #ff6b6b;
}

.md-header, .md-tabs { background-color: var(--md-primary-fg-color); }
.md-tabs { border-bottom: 1px solid rgba(255, 255, 255, 0.06); }
.md-header__button.md-logo img { height: 1.6rem; }



.md-typeset .md-button {
  border-radius: 0.4rem;
  font-weight: 600;
  padding: 0.55em 1.3em;
  margin: 0.2rem 0.4rem 0.2rem 0;
}
.md-typeset .md-button--primary,
.md-button--primary {
  background-color: var(--ae-orange);
  border-color: var(--ae-orange);
  color: #fff;
}
.md-typeset .md-button--primary:hover,
.md-button--primary:hover {
  background-color: var(--ae-orange);
  border-color: var(--ae-orange);
  filter: brightness(1.08);
  color: #fff;
}

/* ------------------------------------------------------------- hero */
.ae-hero {
  background:
    radial-gradient(60rem 30rem at 85% -10%, var(--ae-orange-soft), transparent 70%),
    var(--md-default-bg-color);
  border-bottom: 1px solid var(--md-default-fg-color--lightest);
}
.ae-hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: 3rem;
  align-items: center;
  padding: 3.6rem 0.8rem 3.4rem;
}
.ae-eyebrow {
  margin: 0;
  font-family: var(--md-code-font-family);
  font-size: 0.62rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ae-orange);
}
.ae-hero h1 {
  margin: 0.5rem 0 1rem;
  font-size: 2.5rem;
  line-height: 1.1;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--md-default-fg-color);
}
.ae-lead { font-size: 0.86rem; line-height: 1.65; color: var(--md-default-fg-color--light); max-width: 32rem; }
.ae-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem 0.8rem; margin: 1.5rem 0 1.1rem; }
.ae-actions .md-button {
  border-radius: 0.4rem;
  font-weight: 600;
  padding: 0.55em 1.3em;
  font-size: 0.72rem;
}
.ae-actions .md-button:not(.md-button--primary) { color: var(--md-default-fg-color); border-color: var(--md-default-fg-color--lighter); }
.ae-source { display: inline-flex; align-items: center; gap: 0.4rem; font-size: 0.72rem; color: var(--md-default-fg-color--light); }
.ae-source:hover { color: var(--md-default-fg-color); }
.ae-source .twemoji svg { width: 1rem; height: 1rem; fill: currentColor; }
.ae-release { font-size: 0.64rem; color: var(--md-default-fg-color--light); margin: 0; }
.ae-pill {
  margin-left: 0.4rem;
  padding: 0.15rem 0.55rem;
  border-radius: 1rem;
  background: var(--ae-orange-soft);
  color: var(--ae-orange) !important;
  font-family: var(--md-code-font-family);
}
.ae-hero__media { margin: 0; }
.ae-hero__media img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  object-position: 50% 45%;
  border-radius: 0.6rem;
  border: 1px solid var(--md-default-fg-color--lightest);
  box-shadow: 0 1.2rem 3rem rgba(0, 0, 0, 0.28);
  display: block;
}
.ae-hero__media figcaption { font-size: 0.6rem; color: var(--md-default-fg-color--light); margin-top: 0.6rem; }
@media screen and (max-width: 59.9375em) {
  .ae-hero__grid { grid-template-columns: minmax(0, 1fr); gap: 2rem; padding: 2.2rem 0.8rem 2.4rem; }
  .ae-hero h1 { font-size: 1.9rem; }
}

/* the home page has no page title of its own */
.md-content__inner > .ae-section:first-child { margin-top: 0.6rem; }

/* -------------------------------------------------------- sections */
.md-typeset h2.ae-section {
  font-size: 1.15rem;
  font-weight: 700;
  margin-top: 2.6rem;
  letter-spacing: -0.01em;
  color: var(--md-default-fg-color);
}
.md-typeset .grid.cards > ul > li,
.md-typeset .grid.cards > ol > li {
  border-radius: 0.55rem;
  background: var(--md-default-bg-color--light, transparent);
}
.md-typeset .grid.cards .lg { color: var(--ae-orange); }
.md-typeset .ae-steps > ul > li { border-top: 3px solid var(--ae-orange); }
.md-typeset .ae-figure {
  display: block;
  margin: 1.4rem auto 0;
  border-radius: 0.6rem;
  border: 1px solid var(--md-default-fg-color--lightest);
  background: #fff;
}

.ae-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.8rem; }
.ae-stats > div {
  border: 1px solid var(--md-default-fg-color--lightest);
  border-radius: 0.55rem;
  padding: 0.9rem 1rem 1rem;
  font-size: 0.68rem;
  line-height: 1.5;
  color: var(--md-default-fg-color--light);
  background: var(--md-default-bg-color--light, transparent);
  border-bottom: 3px solid var(--ae-orange);
}
.ae-stats p { margin: 0; }
.ae-stat {
  display: block;
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--ae-orange);
  font-family: var(--md-code-font-family);
  margin-bottom: 0.3rem;
}
@media screen and (max-width: 59.9375em) { .ae-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.ae-split { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 1.8rem; align-items: center; }
.md-typeset .ae-shot { border-radius: 0.6rem; border: 1px solid var(--md-default-fg-color--lightest); box-shadow: 0 1rem 2.5rem rgba(0, 0, 0, 0.25); }
@media screen and (max-width: 59.9375em) { .ae-split { grid-template-columns: minmax(0, 1fr); } }

.ae-photos p { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.8rem; margin: 0 0 1rem; }
.ae-photos img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 0.55rem; border: 1px solid var(--md-default-fg-color--lightest); }

.md-typeset .ae-ok { color: var(--ae-ok); }
.md-typeset .ae-warn { color: var(--ae-warn); }
.md-typeset .ae-no { color: var(--ae-no); }
.md-typeset .ae-compat > ul > li { font-size: 0.7rem; }

/* ------------------------------------------------------------ demo */
.ae-demo {
  margin-top: 1.2rem;
  border: 1px solid var(--md-default-fg-color--lightest);
  border-radius: 0.6rem;
  overflow: hidden;
  box-shadow: 0 1rem 2.5rem rgba(0, 0, 0, 0.25);
}
.ae-demo iframe { width: 100%; height: min(80vh, 52rem); border: 0; display: block; }

/* pictures in the documentation pages sit on white like on GitHub */
.md-typeset img[src$=".svg"] { background: #fff; border-radius: 0.5rem; }

/* four across on wide screens */
.md-typeset .grid.ae-steps,
.md-typeset .grid.ae-compat { grid-template-columns: repeat(auto-fit, minmax(min(100%, 10.5rem), 1fr)); }
/* outlined buttons that show in both themes */
.md-typeset .md-button:not(.md-button--primary) {
  color: var(--md-default-fg-color);
  border-color: var(--md-default-fg-color--lighter);
}
.md-typeset .md-button:not(.md-button--primary):hover {
  color: var(--md-default-fg-color);
  background: var(--md-default-fg-color--lightest);
  border-color: var(--md-default-fg-color--light);
}
.ae-actions .md-button:not(.md-button--primary) { border-color: var(--md-default-fg-color--lighter); }

.md-typeset h1 { font-weight: 700; letter-spacing: -0.015em; color: var(--md-default-fg-color); }
.md-typeset h2 { font-weight: 600; }

/* the announcement bar, the same in both themes */
.md-banner { background: #2a1a0d; color: #f5ebe2; }
.md-banner a, .md-banner a:hover { color: #ff9a52; text-decoration: underline; }
.md-banner .md-banner__button { color: #f5ebe2; }
.ae-actions .md-button:not(.md-button--primary) { border: 0.1rem solid var(--md-default-fg-color--light); }

/* Arabic pages: right to left, code and commands left to right */
.ae-rtl pre, .ae-rtl code, .ae-rtl .highlight { direction: ltr; text-align: left; unicode-bidi: isolate; }
.ae-rtl table { direction: rtl; }
.ae-rtl .admonition { border-left: 0; border-right: .2rem solid var(--md-admonition-fg-color, currentColor); }

/* "works with" logos, on light tiles so they read in both themes */
.ae-logos { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; margin: 1.6em 0 .6em; }
.ae-logos a { display: grid; place-items: center; background: #fff; border-radius: 12px; padding: 10px 16px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .12); }
.ae-logos img { height: 44px; width: auto; display: block; }
/* a wordmark (Tailscale): lower, in a tile as tall as the others */
.ae-logos img.ae-wordmark { height: 24px; margin: 10px 0; }