/* ==========================================================================
   EasyDecoy site: the product layer over easysys.css
   Landing components added here are prefixed `ed-`. The rest themes the
   documentation pages (Material's own chrome) with the EasySYS tokens, so the
   landing page and the docs read as one site. Taken from EasyLog's
   easylog.css, which the documentation half matches line for line.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Landing: Material's footer would repeat what .es-footer already says
   -------------------------------------------------------------------------- */

body:has(.es-home) .md-footer {
  display: none;
}

/* --------------------------------------------------------------------------
   Landing: the decoys
   -------------------------------------------------------------------------- */

.ed-types {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
}
/* The card about every decoy spans the row under the two it describes. */
.ed-type-wide { grid-column: 1 / -1; }

.ed-type {
  display: flex;
  flex-direction: column;
  padding: 32px;
}

.ed-type-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 22px;
}

.ed-type .es-tags {
  margin: auto 0 0;
}

/* --------------------------------------------------------------------------
   Landing: the feature grid
   -------------------------------------------------------------------------- */

.ed-features {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
}

.ed-feature {
  padding: 28px;
}

.ed-feature .es-icon {
  margin-bottom: 18px;
}

.es-home .ed-feature-title {
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--es-fg);
  margin-bottom: 6px;
}

.es-home .ed-feature-text {
  font-size: 15px;
  line-height: 1.6;
  color: var(--es-fg-4);
}

/* Architecture: the stages drawn inside the EasyDecoy box */
.es-diagram .a-box rect {
  fill: var(--es-card);
  stroke: var(--es-border-strong);
}

.es-diagram .a-box .a-title {
  font-size: 15px;
}

.es-home .ed-small {
  margin-top: 4px;
  max-width: 300px;
  font-size: 15px;
  line-height: 1.6;
  color: var(--es-fg-4);
}

@media screen and (max-width: 1100px) {
  .ed-features { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media screen and (max-width: 760px) {
  .ed-types,
  .ed-features { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .ed-type,
  .ed-feature { padding: 24px; }
}

/* ==========================================================================
   Documentation pages
   Scoped with body:not(:has(.es-home)) wherever a rule could reach the landing
   page's own headings and margins.
   ========================================================================== */

[data-md-color-scheme] {
  --md-default-bg-color: var(--es-bg);
  --md-typeset-a-color: var(--es-accent-text);
}

/* Header and tabs: the easysys.io navbar look, light on light and dark on dark */
.md-header,
.md-tabs {
  background-color: var(--es-bg);
  color: var(--es-fg);
}

.md-header {
  box-shadow: 0 1px 0 var(--es-border);
}

.md-header--shadow {
  box-shadow: 0 1px 0 var(--es-border), 0 4px 16px rgba(15, 23, 42, 0.06);
}

.md-tabs {
  border-bottom: 1px solid var(--es-border);
}

.md-header__button.md-logo img,
.md-header__button.md-logo svg {
  height: 1.8rem;
  width: auto;
}

.md-header__title {
  font-weight: 800;
  letter-spacing: -0.02em;
}

.md-tabs__link {
  font-weight: 600;
  opacity: 1;
  color: var(--es-fg-4);
}

.md-tabs__item--active .md-tabs__link,
.md-tabs__link:hover {
  color: var(--es-accent-text);
}

.md-header .md-search__form {
  background-color: var(--es-tag-bg);
  border: 1px solid var(--es-border);
  border-radius: 8px;
}

.md-header .md-search__input {
  color: var(--es-fg);
}

.md-header .md-search__input::placeholder,
.md-header .md-search__icon {
  color: var(--es-fg-4);
}

.md-source {
  color: var(--es-fg-3);
}

/* Headings: the gradient title and tight tracking of the landing page */
body:not(:has(.es-home)) .md-typeset h1 {
  font-weight: 800;
  letter-spacing: -0.03em;
  color: var(--es-fg);
  background: var(--es-title-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

body:not(:has(.es-home)) .md-typeset h2 {
  font-weight: 750;
  letter-spacing: -0.02em;
  color: var(--es-fg);
}

body:not(:has(.es-home)) .md-typeset h3 {
  font-weight: 700;
  color: var(--es-fg);
}

/* Cards: admonitions, tables, tabs, code and figures share the card radius */
.md-typeset .admonition,
.md-typeset details {
  border-width: 1px;
  border-radius: 12px;
  box-shadow: var(--es-shadow);
}

.md-typeset pre > code,
.md-typeset .highlight pre {
  border-radius: 10px;
}

.md-typeset .tabbed-set {
  border-radius: 12px;
}

.md-typeset table:not([class]) {
  border: 1px solid var(--es-border);
  border-radius: 12px;
  box-shadow: var(--es-shadow);
}

.md-typeset figure img {
  border-radius: 12px;
  border: 1px solid var(--es-border);
  box-shadow: var(--es-shadow-hover);
}

.md-typeset hr {
  border-bottom-color: var(--es-border);
}

.md-nav__link--active {
  color: var(--es-accent-text);
  font-weight: 600;
}

/* Footer: quiet, on the page ground, like .es-footer */
.md-footer {
  background-color: var(--es-bg-subtle);
  color: var(--es-fg);
  border-top: 1px solid var(--es-border);
}

.md-footer-meta {
  background-color: var(--es-bg);
  border-top: 1px solid var(--es-border);
}

.md-footer-meta,
.md-footer-meta a,
.md-copyright {
  color: var(--es-fg-4);
}