/*
 * Helakit brand styling for mkdocs-material.
 *
 * Palette and typography below override Material's CSS variables so the
 * site picks up the brand colours from helakit-brandkit.pdf.
 *
 * Brand tokens (kept in one place so they're easy to update):
 *   --hk-teal       primary accent across both schemes
 *   --hk-teal-soft  lighter teal for dark-mode contrast
 *   --hk-cream      warm off-white background (light mode)
 *   --hk-forest     deep forest green text (light mode) / bg (dark mode)
 *   --hk-forest-2   slightly lighter forest, used for subtle surfaces
 */

:root {
  --hk-teal:        #20808d;
  --hk-teal-soft:   #3fb8c7;
  --hk-teal-deep:   #155f6a;
  --hk-cream:       #f8f4ec;
  --hk-cream-2:     #f1ebde;
  --hk-forest:      #091717;
  --hk-forest-2:    #122525;
}

/* --- Light scheme ------------------------------------------------------ */

[data-md-color-scheme="default"] {
  /* Header / nav bar uses forest so the teal icon stands out — the old
     teal primary was the same hue as the logo and made it disappear. */
  --md-primary-fg-color:        var(--hk-forest);
  --md-primary-fg-color--light: var(--hk-forest-2);
  --md-primary-fg-color--dark:  var(--hk-forest);
  --md-primary-bg-color:        var(--hk-cream);
  --md-primary-bg-color--light: var(--hk-cream-2);

  --md-accent-fg-color:         var(--hk-teal-soft);
  --md-accent-fg-color--transparent: rgba(63, 184, 199, 0.12);
  --md-accent-bg-color:         var(--hk-cream);

  --md-default-bg-color:        var(--hk-cream);
  --md-default-fg-color:        var(--hk-forest);
  --md-default-fg-color--light: rgba(9, 23, 23, 0.72);
  --md-default-fg-color--lighter: rgba(9, 23, 23, 0.5);
  --md-default-fg-color--lightest: rgba(9, 23, 23, 0.07);

  --md-typeset-a-color:         var(--hk-teal-deep);
  --md-code-bg-color:           var(--hk-cream-2);
  --md-code-fg-color:           var(--hk-forest);
  --md-footer-bg-color:         var(--hk-forest);
  --md-footer-bg-color--dark:   var(--hk-forest);
}

/* --- Dark scheme (Material's "slate" data attribute) ------------------ */

[data-md-color-scheme="slate"] {
  --md-primary-fg-color:        var(--hk-forest);
  --md-primary-fg-color--light: var(--hk-forest-2);
  --md-primary-fg-color--dark:  var(--hk-forest);
  --md-primary-bg-color:        var(--hk-cream);

  --md-accent-fg-color:         var(--hk-teal-soft);
  --md-accent-fg-color--transparent: rgba(63, 184, 199, 0.12);

  --md-default-bg-color:        var(--hk-forest);
  --md-default-bg-color--light: var(--hk-forest-2);
  --md-default-fg-color:        var(--hk-cream);
  --md-default-fg-color--light: rgba(248, 244, 236, 0.78);
  --md-default-fg-color--lighter: rgba(248, 244, 236, 0.55);
  --md-default-fg-color--lightest: rgba(248, 244, 236, 0.1);

  --md-typeset-a-color:         var(--hk-teal-soft);
  --md-code-bg-color:           var(--hk-forest-2);
  --md-code-fg-color:           var(--hk-cream);
  --md-footer-bg-color:         #060f0f;
  --md-footer-bg-color--dark:   #060f0f;
}

/* --- Typography: slab serif headings echo the wordmark ---------------- */

.md-typeset h1,
.md-typeset h2,
.md-typeset h3,
.md-header__topic .md-ellipsis {
  font-family: "Roboto Slab", "Roboto", -apple-system, BlinkMacSystemFont, sans-serif;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.md-typeset h1 {
  font-weight: 700;
  font-size: 2.4rem;
  line-height: 1.15;
  margin: 0 0 1rem;
}

.md-typeset h2 {
  margin-top: 2.4rem;
}

/* Tighten the header logo so the icon doesn't overpower the wordmark */
.md-header__button.md-logo img,
.md-header__button.md-logo svg {
  height: 1.6rem;
  width: 1.6rem;
}

/* --- Sidebar polish -------------------------------------------------- *
 * Section headers (Validators, API Reference) get a touch more weight
 * so they stand apart from the leaf links underneath, and indentation
 * stays at Material's default so the column edge is consistent.
 */

.md-nav__item--section > .md-nav__link,
.md-nav__title {
  font-weight: 700;
  letter-spacing: 0.01em;
  color: var(--md-default-fg-color);
}

.md-nav__link--active {
  font-weight: 600;
  color: var(--hk-teal-soft);
}

[data-md-color-scheme="default"] .md-nav__link--active {
  color: var(--hk-teal-deep);
}

/* Footer prev / next navigation pair: a touch tighter */
.md-footer__inner.md-grid {
  padding-block: 0.6rem;
}

.md-footer__direction {
  font-family: "Roboto Slab", serif;
  font-size: 0.7rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

/* --- Homepage hero ---------------------------------------------------- *
 * Triggered by adding `class: hk-home` to a page's frontmatter or by
 * wrapping content in a div.hk-hero block in markdown.
 */

.hk-hero {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: 2.5rem;
  align-items: center;
  padding: 3.5rem 0 2rem;
  margin-bottom: 2rem;
  border-bottom: 1px solid var(--md-default-fg-color--lightest);
}

.hk-hero__copy h1 {
  font-size: 3.2rem;
  line-height: 1.05;
  margin: 0;
}

.hk-hero__tagline {
  display: inline-block;
  padding: 0.25rem 0.75rem;
  margin-bottom: 1.4rem;
  font-family: "Roboto Slab", serif;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-size: 0.72rem;
  color: var(--hk-teal-soft);
  background: rgba(63, 184, 199, 0.16);
  border-radius: 999px;
}

.hk-hero__lede {
  font-size: 1.05rem;
  line-height: 1.5;
  max-width: 32rem;
  color: var(--md-default-fg-color--light);
}

.hk-hero__cta {
  margin-top: 1.6rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
}

/* --- Buttons: visible on both schemes -------------------------------- *
 * Material's default md-button uses primary fg as border; in dark mode
 * we set primary to forest (=body bg) which made the secondary buttons
 * disappear. Pin everything to teal-soft so both schemes have contrast.
 */

.md-typeset .md-button {
  border-color: var(--hk-teal-soft);
  color: var(--hk-teal-soft);
  background: transparent;
  border-radius: 999px;
  font-weight: 600;
  transition: background 120ms ease, color 120ms ease, border-color 120ms ease;
}

.md-typeset .md-button:hover,
.md-typeset .md-button:focus {
  background: var(--hk-teal-soft);
  color: var(--hk-forest);
  border-color: var(--hk-teal-soft);
}

.md-typeset .md-button--primary {
  background: var(--hk-teal-soft);
  border-color: var(--hk-teal-soft);
  color: var(--hk-forest);
}

.md-typeset .md-button--primary:hover,
.md-typeset .md-button--primary:focus {
  background: var(--hk-cream);
  border-color: var(--hk-cream);
  color: var(--hk-forest);
}

[data-md-color-scheme="default"] .md-typeset .md-button {
  border-color: var(--hk-teal);
  color: var(--hk-teal-deep);
}

[data-md-color-scheme="default"] .md-typeset .md-button:hover,
[data-md-color-scheme="default"] .md-typeset .md-button:focus {
  background: var(--hk-teal);
  color: var(--hk-cream);
  border-color: var(--hk-teal);
}

[data-md-color-scheme="default"] .md-typeset .md-button--primary {
  background: var(--hk-teal);
  border-color: var(--hk-teal);
  color: var(--hk-cream);
}

[data-md-color-scheme="default"] .md-typeset .md-button--primary:hover,
[data-md-color-scheme="default"] .md-typeset .md-button--primary:focus {
  background: var(--hk-teal-deep);
  border-color: var(--hk-teal-deep);
  color: var(--hk-cream);
}

/* Make sure the icon inside a button picks up the button colour */
.md-typeset .md-button svg {
  fill: currentColor;
  vertical-align: middle;
}

.hk-hero__art {
  position: relative;
  border-radius: 1.25rem;
  overflow: hidden;
  aspect-ratio: 1 / 1;
  background:
    radial-gradient(120% 120% at 70% 30%, rgba(63, 184, 199, 0.25), transparent 60%),
    radial-gradient(80% 80% at 30% 80%, rgba(32, 128, 141, 0.18), transparent 70%),
    linear-gradient(180deg, var(--hk-forest), var(--hk-forest-2));
  display: flex;
  align-items: center;
  justify-content: center;
}

.hk-hero__art img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

@media (max-width: 60em) {
  .hk-hero {
    grid-template-columns: 1fr;
    padding: 2rem 0 1rem;
  }
  .hk-hero__copy h1 {
    font-size: 2.4rem;
  }
}

/* --- Decorative section divider (drop a piece of art into one) ------- */

.hk-decoration {
  margin: 3rem 0;
  border-radius: 1rem;
  overflow: hidden;
  aspect-ratio: 16 / 6;
  background:
    radial-gradient(60% 100% at 50% 50%, rgba(32, 128, 141, 0.18), transparent 70%),
    var(--hk-forest);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--hk-cream);
}

.hk-decoration img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* --- Featured-validator block + roadmap row (homepage) --------------- *
 * One available validator (NIC) doesn't need a card grid. A wide
 * featured block calls it out, and a small roadmap pill row below
 * acknowledges what's planned without burning visual real estate.
 */

.md-typeset .hk-feature,
.hk-feature {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.85rem;
  max-width: 820px;
  margin: 3rem auto 1.5rem;
  padding: 2.25rem 2.5rem 2.5rem;
  border-radius: 1.25rem;
  background:
    radial-gradient(120% 100% at 0% 0%, rgba(63, 184, 199, 0.14), transparent 55%),
    var(--md-default-fg-color--lightest);
  border: 1px solid var(--md-default-fg-color--lightest);
}

.hk-feature__badge {
  font-family: "Roboto Slab", serif;
  font-weight: 700;
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0.25rem 0.7rem;
  border-radius: 999px;
  color: var(--hk-teal-soft);
  background: rgba(63, 184, 199, 0.18);
}

[data-md-color-scheme="default"] .hk-feature__badge {
  color: var(--hk-teal-deep);
  background: rgba(32, 128, 141, 0.14);
}

.md-typeset .hk-feature__name,
h2.hk-feature__name {
  margin: 0;
  font-family: "Roboto Slab", serif;
  font-weight: 700;
  font-size: 2rem;
  line-height: 1.1;
  letter-spacing: -0.01em;
  color: var(--md-default-fg-color);
  border: none;
}

.md-typeset .hk-feature__desc,
.hk-feature__desc {
  margin: 0;
  font-size: 1rem;
  line-height: 1.55;
  max-width: 56ch;
  color: var(--md-default-fg-color--light);
}

.md-typeset .hk-feature .md-button {
  margin-top: 0.5rem;
}

.hk-roadmap {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  margin: 0 auto 3.5rem;
  padding: 0 1rem;
  max-width: 820px;
}

.hk-roadmap__label {
  font-family: "Roboto Slab", serif;
  font-weight: 700;
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--md-default-fg-color--light);
  margin-right: 0.4rem;
}

.md-typeset .hk-roadmap__item,
.hk-roadmap__item {
  font-family: "Roboto Slab", serif;
  font-weight: 600;
  font-size: 0.85rem;
  padding: 0.35rem 0.85rem;
  border-radius: 999px;
  border: 1px solid var(--md-default-fg-color--lightest);
  color: var(--md-default-fg-color--light);
  text-decoration: none;
  transition: border-color 120ms ease, color 120ms ease, background 120ms ease;
}

.md-typeset a.hk-roadmap__item:hover {
  border-color: var(--hk-teal-soft);
  color: var(--md-default-fg-color);
  background: rgba(63, 184, 199, 0.08);
}

@media (max-width: 50em) {
  .md-typeset .hk-feature,
  .hk-feature {
    padding: 1.6rem 1.4rem 1.8rem;
  }
  .md-typeset .hk-feature__name,
  h2.hk-feature__name {
    font-size: 1.6rem;
  }
}