/* ==========================================================================
   EasyDC 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. Mirrors EasyLog's easylog.css.
   ========================================================================== */

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

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

/* --------------------------------------------------------------------------
   Landing: what you manage
   -------------------------------------------------------------------------- */

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

.ed-area {
  display: flex;
  flex-direction: column;
  padding: 28px;
}

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

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

/* --------------------------------------------------------------------------
   Landing: health check categories
   -------------------------------------------------------------------------- */

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

.ed-check {
  padding: 28px;
}

.ed-check-head {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 14px;
}

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

.es-home .ed-check-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.es-home .ed-check-list li {
  position: relative;
  margin: 0 0 8px;
  padding-left: 18px;
  font-size: 15px;
  line-height: 1.55;
  color: var(--es-fg-4);
}

.es-home .ed-check-list li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 0.62em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--es-accent);
}

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

/* Architecture: the parts drawn inside the EasyDC 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-areas,
  .ed-checks { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media screen and (max-width: 760px) {
  .ed-areas,
  .ed-checks { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .ed-area,
  .ed-check { 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);
}