/* Potos theme: green primary, purple accent. */

:root,
[data-md-color-scheme="default"] {
  /* Primary (header, nav highlights) — brand green. */
  --md-primary-fg-color:        #3eaf7c;
  --md-primary-fg-color--light: #4abf8a;
  --md-primary-fg-color--dark:  #349469;
  --md-primary-bg-color:        #ffffff;
  --md-primary-bg-color--light: rgba(255, 255, 255, 0.7);

  /* Accent (links on hover, focus rings, selection) — Potos purple. */
  --md-accent-fg-color:             #7c3aed;
  --md-accent-fg-color--transparent: rgba(124, 58, 237, 0.1);

  /* Links resting state — brand green; slate body text like the site. */
  --md-typeset-a-color: #3aa675;
  --md-typeset-color:   #2c3e50;
}

[data-md-color-scheme="slate"] {
  --md-primary-fg-color:        #3eaf7c;
  --md-primary-fg-color--light: #4abf8a;
  --md-primary-fg-color--dark:  #2f8862;
  --md-primary-bg-color:        #ffffff;

  --md-accent-fg-color:             #a78bfa;
  --md-accent-fg-color--transparent: rgba(167, 139, 250, 0.1);

  --md-typeset-a-color: #4abf8a;
}

/* A purple underline grows under links on hover, tying the two brand colors
   together without recoloring the resting link. */
.md-typeset a {
  text-decoration: none;
  background-image: linear-gradient(var(--md-accent-fg-color), var(--md-accent-fg-color));
  background-position: 0 100%;
  background-repeat: no-repeat;
  background-size: 0 2px;
  transition: background-size 0.2s ease, color 0.2s ease;
}

.md-typeset a:hover {
  color: var(--md-accent-fg-color);
  background-size: 100% 2px;
}

/* Keep nav/header links (already on a colored or chromeless surface) free of
   the underline treatment. */
.md-header a,
.md-nav a,
.md-tabs a,
.md-typeset .md-button {
  background-image: none;
}

/* ───────────────────────────────────────────────────
   Hero section (home page)
─────────────────────────────────────────────────── */
.tx-hero {
  display: block;
  margin: 0 -0.8rem;
  padding: 2.4rem 1.6rem 2.8rem;
  border-radius: 0 0 8px 8px;
  background: linear-gradient(
    135deg,
    var(--md-primary-fg-color--dark) 0%,
    var(--md-primary-fg-color) 60%,
    var(--md-primary-fg-color--light) 100%
  );
  color: #fff;
}

.tx-hero__content {
  max-width: 34rem;
  color: #fff;
}

.md-typeset .tx-hero h1,
.tx-hero h1 {
  color: #fff;
  font-size: 2.2rem;
  font-weight: 700;
  line-height: 1.2;
  margin: 0 0 0.8rem;
}

.tx-hero p {
  font-size: 0.9rem;
  line-height: 1.6;
  margin-bottom: 1.6rem;
  opacity: 0.92;
}

.md-typeset .tx-hero .md-button {
  border-radius: 4px;
  font-size: 0.8rem;
  font-weight: 600;
  margin-right: 0.6rem;
  margin-bottom: 0.6rem;
  padding: 0.5rem 1.2rem;
}

.md-typeset .tx-hero .md-button--primary {
  background-color: #fff;
  color: var(--md-primary-fg-color--dark);
  border: 2px solid #fff;
}

.md-typeset .tx-hero .md-button--primary:hover {
  background-color: rgba(255, 255, 255, 0.88);
  color: var(--md-primary-fg-color--dark);
}

.md-typeset .tx-hero .md-button:not(.md-button--primary) {
  background-color: transparent;
  border: 2px solid rgba(255, 255, 255, 0.75);
  color: #fff;
}

.md-typeset .tx-hero .md-button:not(.md-button--primary):hover {
  border-color: #fff;
  background-color: rgba(255, 255, 255, 0.12);
  color: #fff;
}

/* ───────────────────────────────────────────────────
   Feature grid (home page)
─────────────────────────────────────────────────── */
.tx-features {
  display: block;
  padding: 2.4rem 0 1.2rem;
}

.tx-features__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 1.2rem;
}

.tx-feature {
  padding: 1.2rem 1.4rem;
  border-radius: 8px;
  border: 1px solid var(--md-default-fg-color--lightest);
  transition: box-shadow 0.2s, border-color 0.2s;
}

.tx-feature:hover {
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
  border-color: var(--md-accent-fg-color);
}

.tx-feature__icon {
  font-size: 1.8rem;
  line-height: 1;
  margin-bottom: 0.6rem;
}

.md-typeset .tx-feature h2,
.tx-feature h2 {
  font-size: 0.9rem;
  font-weight: 700;
  margin: 0 0 0.4rem;
  border: none;
  color: var(--md-typeset-color);
}

.tx-feature p {
  font-size: 0.72rem;
  line-height: 1.55;
  margin: 0;
  color: var(--md-default-fg-color--light);
}