a.nav-logo {
  --esp-logo-stroke-width: 56;
  transition: transform 0.3s ease-in-out;

  svg {
    height: var(--esp-header-height);
    width: var(--esp-header-height);
    color: var(--esp-logo-fill);
    filter: var(--esp-logo-filter);
    overflow: visible;
  }

  &:hover {
    background: none;
    transform: scale(1.1);
  }
}

esp-root[scheme="light"] {
  a.nav-logo,
  .landing-logo {
    --esp-logo-fill: oklch(from var(--esp-color-complementary) 90% 0.45 h);
    --esp-logo-filter: drop-shadow(
        0.5px 0.5px oklch(from var(--esp-color-primary) 10% 0.7 h)
      )
      drop-shadow(-0.5px -0.5px oklch(from var(--esp-color-primary) 10% 0.7 h))
      drop-shadow(0.5px -0.5px oklch(from var(--esp-color-primary) 10% 0.7 h))
      drop-shadow(-0.5px 0.5px oklch(from var(--esp-color-primary) 10% 0.7 h));
  }
}

esp-root[scheme="dark"] {
  a.nav-logo,
  .landing-logo {
    --esp-logo-fill: oklch(from var(--esp-color-complementary) 30% 0.45 h);
    --esp-logo-filter: drop-shadow(
        0.5px 0.5px oklch(from var(--esp-color-primary) 90% 0.45 h)
      )
      drop-shadow(-0.5px -0.5px oklch(from var(--esp-color-primary) 90% 0.45 h))
      drop-shadow(0.5px -0.5px oklch(from var(--esp-color-primary) 90% 0.45 h))
      drop-shadow(-0.5px 0.5px oklch(from var(--esp-color-primary) 90% 0.45 h));
  }
}

esp-button.no-padding {
  --esp-button-padding: 0;
}

esp-header {
  --esp-header-brand-placement: baseline;
}

#header-nav {
  display: flex;
  margin: 0 var(--esp-size-padding);
  height: 100%;
  align-items: center;
  gap: var(--esp-size-padding);
  width: 100%;
  overflow: hidden;
}

#header-nav a {
  flex-shrink: 0;
  white-space: nowrap;
  text-decoration: none;
  font-weight: bold;
  color: var(--esp-color-headings);
  font-family: var(--esp-font-body);
  transition: color 0.5s ease;
}

#header-nav a:hover {
  color: var(--esp-color-headings-hover);
  text-decoration: underline;
}

article#main-article {
  overflow: hidden;
  padding: var(--esp-size-padding);

  h1:first-child {
    margin-top: 0;
  }

  hgroup#title-with-svg {
    display: flex;
    align-items: center;
    gap: var(--esp-size-padding);
    margin-top: 0;

    h1 {
      margin: 0;
    }

    .page-icon {
      height: var(--esp-size-large);
      width: var(--esp-size-large);
      flex-shrink: 0;
      color: var(--esp-color-complementary);
    }
  }

  div.doc-header > p {
    display: grid;
    grid-template-columns: min-content min-content;
    gap: var(--esp-size-padding);
    align-items: center;

    code {
      white-space: nowrap;
    }
  }

  div.doc-section {
    border-bottom: var(--esp-size-tiny) dotted var(--esp-color-alt-borders);
    padding-bottom: var(--esp-size-padding);
    margin-bottom: calc(4 * var(--esp-size-padding));

    &:last-child {
      border-bottom: none;
      margin-bottom: 0;
    }
  }

  esp-info {
    margin: var(--esp-size-small-to-normal) 0;
  }

  .input-with-button {
    display: grid;
    grid-template-columns: auto min-content;
    gap: var(--esp-size-padding);
  }
}

.header-example {
  display: grid;
  place-content: center;
  height: var(--esp-header-height);
  padding: 0 var(--esp-size-padding);
}

esp-header-button#pin-button {
  svg {
    display: none;
  }
  &.is-pinned {
    .pin-icon {
      display: none;
    }
    .pinned-icon {
      display: block;
    }
  }
  &:not(.is-pinned) {
    .pin-icon {
      display: block;
    }
    .pinned-icon {
      display: none;
    }
  }
}

esp-header-button#light-dark-button {
  svg {
    display: none;
  }
  &.is-light {
    .moon-icon {
      display: block;
    }
    .sun-icon {
      display: none;
    }
  }
  &.is-dark {
    .moon-icon {
      display: none;
    }
    .sun-icon {
      display: block;
    }
  }
}

ul#all-color-names {
  display: grid;
  border: 1px solid var(--esp-color-border);
  padding: 0;
  margin: 0;

  li {
    display: block;
    padding: var(--esp-size-padding);
    margin: 0;
  }

  @media (min-width: 400px) {
    grid-template-columns: auto auto;
  }

  @media (min-width: 750px) {
    grid-template-columns: auto auto auto;
  }

  @media (min-width: 1000px) {
    grid-template-columns: auto auto auto auto;
  }
}

div#espalier-colors {
  ul {
    display: grid;
    grid-template-columns: repeat(21, auto);
    padding: 0;
    list-style: none;

    li {
      display: block;
      height: var(--esp-size-medium-to-big);
    }
  }
}

/* ── Landing page ──────────────────────────────────────────── */

.landing-hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: calc(2 * var(--esp-size-medium-to-big)) 0
    var(--esp-size-medium-to-big);
}

.landing-logo {
  --esp-logo-stroke-width: 22;
  width: clamp(200px, 30vw, 300px);
}

.landing-logo svg {
  width: 100%;
  height: auto;
  color: var(--esp-logo-fill);
  filter: var(--esp-logo-filter);
  overflow: visible;
}

.landing-hero h1 {
  font-size: clamp(2.5rem, 6vw, 4.5rem);
  margin: var(--esp-size-small-to-normal) 0 0;
  line-height: 1;
  letter-spacing: -0.03em;
}

.landing-tagline {
  font-size: clamp(1.05rem, 2vw, 1.3rem);
  color: var(--esp-color-headings);
  max-width: 44ch;
  line-height: 1.6;
  margin: var(--esp-size-padding) 0 0;
}

.landing-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--esp-size-padding);
  margin-top: calc(2 * var(--esp-size-padding));
}

hr.landing-divider {
  border: none;
  border-top: 1px solid var(--esp-color-alt-borders);
  margin: var(--esp-size-medium-to-big) 0;
}

.landing-intro {
  max-width: 72ch;
  margin: 0 auto;
  text-align: center;
  line-height: 1.7;
  font-size: 1.05rem;
}

.landing-intro code {
  font-size: 0.95em;
}

.landing-features {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--esp-size-small-to-normal);
  padding: var(--esp-size-medium-to-big) 0;
}

esp-box.landing-feature {
  --esp-size-box-padding: 0;
  transition: transform 0.15s ease;
}

esp-box.landing-feature:hover {
  transform: translateY(-2px);
}

esp-box.landing-feature a {
  display: block;
  padding: var(--esp-size-small-to-normal);
  height: 100%;
  box-sizing: border-box;
  text-decoration: none;
  color: inherit;
}

esp-box.landing-feature a:hover {
  text-decoration: none;
}

.landing-feature svg {
  width: 2rem;
  height: 2rem;
  color: var(--esp-color-primary);
}

.landing-feature h3 {
  margin: var(--esp-size-padding) 0 calc(0.5 * var(--esp-size-padding));
  font-size: 1.15rem;
}

.landing-feature p {
  margin: 0;
  line-height: 1.6;
}

.landing-feature code {
  font-size: 0.9em;
}

.landing-quickstart {
  max-width: 72ch;
  margin: 0 auto;
}

.landing-quickstart h2 {
  text-align: center;
}

.landing-quickstart pre.landing-code {
  background: var(--esp-color-layer-1);
  border: 1px solid var(--esp-color-alt-borders);
  border-radius: calc(2 * var(--esp-size-tiny));
  padding: var(--esp-size-small-to-normal);
  overflow-x: auto;
  font-size: 0.9rem;
  line-height: 1.7;
  margin: var(--esp-size-padding) 0;
}

.landing-quickstart > p {
  text-align: center;
  line-height: 1.6;
}

.landing-quickstart > p code {
  font-size: 0.95em;
}

.landing-explore h2 {
  text-align: center;
}

.landing-explore-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--esp-size-padding);
  padding-bottom: var(--esp-size-medium-to-big);
}

esp-box.landing-explore-card {
  --esp-size-box-padding: 0;
  transition: transform 0.15s ease;
}

esp-box.landing-explore-card:hover {
  transform: translateY(-2px);
}

esp-box.landing-explore-card a {
  display: block;
  padding: var(--esp-size-small-to-normal);
  height: 100%;
  box-sizing: border-box;
  text-decoration: none;
  color: inherit;
}

esp-box.landing-explore-card a:hover {
  text-decoration: none;
}

esp-box.landing-explore-card svg {
  width: 1.75rem;
  height: 1.75rem;
  color: var(--esp-color-primary);
}

esp-box.landing-explore-card h3 {
  margin: var(--esp-size-padding) 0 calc(0.5 * var(--esp-size-padding));
  color: var(--esp-color-headings);
  font-size: 1.1rem;
}

esp-box.landing-explore-card p {
  margin: 0;
  line-height: 1.5;
  font-size: 0.95rem;
}