/* sigillum — home hero.
 *
 * Deliberately built on the publication palette (deep petrol-teal, warm amber,
 * brass-gold, soft cream, dark charcoal) rather than copied from go-tool-base,
 * whose hero is neon-on-dark and hard-codes its colours. Everything here reads
 * from the theme's own variables where it can, so the page works in light and
 * dark without a second set of rules.
 */

:root {
  --sig-teal: #1f5f6b;
  --sig-teal-deep: #14454e;
  --sig-amber: #e08a2e;
  --sig-brass: #d9a441;
  --sig-cream: #f6efe2;
  --sig-charcoal: #26221e;
}

[data-md-color-scheme="slate"] {
  --sig-teal: #2d8393;
  --sig-amber: #f0a04b;
}

/* ---------------------------------------------------------------- hero ---- */

.hero {
  display: flex;
  align-items: center;
  gap: 3rem;
  margin: 1rem auto 3.5rem;
  padding: 2.5rem 2rem;
  border-radius: 18px;
  background:
    radial-gradient(circle at 18% 25%, rgba(224, 138, 46, 0.13), transparent 55%),
    radial-gradient(circle at 82% 75%, rgba(31, 95, 107, 0.16), transparent 55%);
  border: 1px solid rgba(31, 95, 107, 0.18);
}

.hero-mark {
  flex: 0 0 auto;
  width: 190px;
  height: 190px;
}

.hero-mark img {
  width: 100%;
  height: auto;
  /* The mark is a press coming down on wax; a soft shadow sells the weight. */
  filter: drop-shadow(0 10px 18px rgba(38, 34, 30, 0.22));
}

.hero-body {
  flex: 1;
  min-width: 0;
}

.hero-title {
  font-size: 3.1rem !important;
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.02em;
  margin: 0 0 0.35rem !important;
  /* the theme's own .md-typeset h1 rule outranks a plain declaration here */
  color: var(--sig-teal) !important;
}

.hero-tagline {
  font-size: 1.35rem;
  font-weight: 600;
  margin: 0 0 1rem;
  color: var(--md-default-fg-color--light);
}

.hero-description {
  font-size: 1.02rem;
  line-height: 1.65;
  margin: 0 0 1.5rem;
  color: var(--md-default-fg-color--light);
}

/* -------------------------------------------------------- install box ---- */

.install-box {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  /* The install line is 62 characters; sized so it fits outright rather than
     scrolling under the copy button, which reads as a broken layout. */
  max-width: 700px;
  margin: 0 0 1.6rem;
  padding: 0.7rem 0.9rem;
  border-radius: 10px;
  background: var(--md-code-bg-color);
  border: 1px solid rgba(31, 95, 107, 0.28);
  font-family: var(--md-code-font-family, "JetBrains Mono", monospace);
  font-size: 0.76rem;
}

.install-command {
  min-width: 0;
  overflow-x: auto;
  white-space: nowrap;
  color: var(--md-code-fg-color);
}

.install-copy {
  flex: 0 0 auto;
  cursor: pointer;
  border: 0;
  border-radius: 6px;
  padding: 0.3rem 0.55rem;
  font-size: 0.78rem;
  font-weight: 600;
  background: var(--sig-teal);
  color: #fff;
  transition: background 0.2s ease, transform 0.2s ease;
}

.install-copy:hover { background: var(--sig-teal-deep); transform: translateY(-1px); }
.install-copy.copied { background: var(--sig-amber); }

/* ------------------------------------------------------------ buttons ---- */

.hero-buttons { display: flex; flex-wrap: wrap; gap: 0.75rem; }

.btn {
  display: inline-flex;
  align-items: center;
  padding: 0.7rem 1.5rem;
  border-radius: 8px;
  font-weight: 600;
  text-decoration: none !important;
  transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

.btn-primary { background: var(--sig-teal); color: #fff !important; }
.btn-primary:hover { background: var(--sig-teal-deep); transform: translateY(-2px); box-shadow: 0 6px 16px rgba(31, 95, 107, 0.3); }

.btn-secondary { background: transparent; color: var(--sig-teal) !important; border: 1.5px solid var(--sig-teal); }
.btn-secondary:hover { background: rgba(31, 95, 107, 0.09); transform: translateY(-2px); }

/* ------------------------------------------------------- capability grid - */

.cap-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1rem;
  margin: 1.5rem 0 2.5rem;
}

.cap {
  padding: 1.15rem 1.25rem;
  border-radius: 12px;
  border: 1px solid var(--md-default-fg-color--lightest);
  border-top: 3px solid var(--sig-amber);
  background: var(--md-default-bg-color);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.cap:hover { transform: translateY(-3px); box-shadow: 0 8px 22px rgba(38, 34, 30, 0.1); }
.cap h3 { margin: 0 0 0.35rem; font-size: 1.05rem; color: var(--sig-teal); }
.cap p { margin: 0; font-size: 0.9rem; line-height: 1.55; color: var(--md-default-fg-color--light); }

/* ------------------------------------------------------------ responsive - */

@media screen and (max-width: 60em) {
  /* align-items: center on a column flex container sizes children to
     max-content, which the nowrap install line then blows past — the page
     scrolls sideways. Stretch them to the container instead. */
  .hero {
    flex-direction: column;
    align-items: stretch;
    text-align: center;
    gap: 1.75rem;
    padding: 2rem 1.25rem;
  }
  .hero-mark { width: 150px; height: 150px; align-self: center; }
  .hero-body { width: 100%; max-width: 100%; }
  .hero-title { font-size: 2.4rem !important; }
  .hero-buttons { justify-content: center; }
  .install-box { max-width: 100%; margin-left: auto; margin-right: auto; }
}