/* ==========================================================================
   EasyLog site: the product layer over easysys.css
   Landing components added here are prefixed `el-`. 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.
   ========================================================================== */

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

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

/* --------------------------------------------------------------------------
   Landing: log-type families
   -------------------------------------------------------------------------- */

.el-types {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
}

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

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

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

/* --------------------------------------------------------------------------
   Landing: dashboard screenshots and the feature grid
   -------------------------------------------------------------------------- */

.el-showcase {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  gap: 24px;
  margin-bottom: 24px;
}

.el-shot {
  position: relative;
  overflow: hidden;
  border-radius: 12px;
  border: 1px solid var(--es-border);
  background: #0b0f19;
  padding: 28px 0 0 28px;
  box-shadow: var(--es-shadow);
}

.el-shot::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 20% 0%, rgba(44, 123, 224, 0.35), transparent 60%);
}

.md-typeset .el-shot img {
  position: relative;
  display: block;
  width: 100%;
  max-width: none;
  border-radius: 10px 0 0 0;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-right: 0;
  border-bottom: 0;
}

/* The map sits edge to edge on its own dark ground */
.el-shot--map {
  display: flex;
  align-items: center;
  padding: 0;
  background: #212428;
}

.el-shot--map::before {
  display: none;
}

.md-typeset .el-shot--map img {
  border: 0;
  border-radius: 0;
}

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

.el-feature {
  padding: 28px;
}

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

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

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

/* Architecture: the stages drawn inside the EasyLog 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 .el-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) {
  .el-showcase { grid-template-columns: minmax(0, 1fr); }
  .el-features { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

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

/* ==========================================================================
   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);
}