/* adunopay brand colors: navy #0f2337 + lime #cbff0a.
   Source: the adunopay brand style guide (adunopay-website
   `docs/brand-style-guide.md`). Palette `primary`/`accent` are intentionally
   left unset in mkdocs.yml so these CSS variable overrides take effect. */

:root,
[data-md-color-scheme="default"] {
  --md-primary-fg-color:        #0f2337; /* navy header */
  --md-primary-fg-color--light: #1c3a5c;
  --md-primary-fg-color--dark:  #091422;
  --md-accent-fg-color:         #8a9e00; /* darkened lime — readable link hover on light bg */
}

[data-md-color-scheme="slate"] {
  --md-primary-fg-color:        #0f2337;
  --md-primary-fg-color--light: #1c3a5c;
  --md-primary-fg-color--dark:  #091422;
  --md-accent-fg-color:         #cbff0a; /* full lime pops on dark bg */
}

/* Keep the lime mark from washing out against the navy header */
.md-header__button.md-logo img {
  height: 1.5rem;
}

/* ============================================================
   Landing page (docs/index.md)
   Brand: navy #0f2337 background, lime #cbff0a accents.
   index.md hides the nav + toc (front matter) so the hero gets the
   full content width; the styles below are scoped to its wrapper classes.
   ============================================================ */

/* ---- Hero ---- */
.ap-hero {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  align-items: center;
  gap: 2.5rem;
  padding: 3.5rem clamp(1.2rem, 4vw, 4rem);
  background:
    radial-gradient(120% 140% at 85% 15%, rgba(203, 255, 10, 0.18), transparent 55%),
    linear-gradient(160deg, #0f2337 0%, #091422 100%);
  border-radius: 1rem;
  color: #fff;
  overflow: hidden;
}

.ap-hero__text h1 {
  margin: 0 0 0.6rem;
  color: #fff;
  font-weight: 800;
  font-size: clamp(2rem, 4vw, 3rem);
  line-height: 1.1;
  letter-spacing: -0.02em;
}

.ap-hero__text .ap-hero__lead {
  margin: 0 0 1.6rem;
  color: rgba(255, 255, 255, 0.82);
  font-size: 1.05rem;
  max-width: 38ch;
}

/* Lime highlight on key words */
.ap-hero mark {
  background: transparent;
  color: #cbff0a;
  font-weight: 800;
}

.ap-hero__art {
  text-align: center;
}
.ap-hero__art img {
  width: 100%;
  max-width: 360px;
  height: auto;
  filter: drop-shadow(0 18px 40px rgba(0, 0, 0, 0.45));
}

/* Brand buttons inside the hero */
.ap-hero .md-button {
  margin: 0.3rem 0.5rem 0.3rem 0;
}
.ap-hero .md-button--primary {
  background: #cbff0a;
  border-color: #cbff0a;
  color: #0f2337;
  font-weight: 700;
}
.ap-hero .md-button--primary:hover {
  background: #fff;
  border-color: #fff;
  color: #0f2337;
}
.ap-hero .md-button:not(.md-button--primary) {
  color: #fff;
  border-color: rgba(255, 255, 255, 0.5);
}
.ap-hero .md-button:not(.md-button--primary):hover {
  background: rgba(255, 255, 255, 0.12);
  border-color: #fff;
  color: #fff;
}

/* ---- Section heading helper ---- */
.ap-section-title {
  margin: 3rem 0 0.4rem;
  font-size: 1.5rem;
  font-weight: 800;
  letter-spacing: -0.01em;
}
.ap-section-sub {
  margin: 0 0 1.2rem;
  color: var(--md-default-fg-color--light);
}

/* ---- Product showcase (mobile app + payment device) ---- */
.ap-showcase {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.2rem;
  margin: 1rem 0 0;
}
.ap-showcase__card {
  display: flex;
  gap: 1.2rem;
  align-items: center;
  padding: 1.4rem;
  border-radius: 0.8rem;
  background: var(--md-code-bg-color);
  border: 1px solid var(--md-default-fg-color--lightest);
}
.ap-showcase__card img {
  width: 130px;
  height: auto;
  flex: 0 0 auto;
}
.ap-showcase__card h3 {
  margin: 0 0 0.3rem;
  font-size: 1.1rem;
}
.ap-showcase__card p {
  margin: 0;
  font-size: 0.85rem;
  color: var(--md-default-fg-color--light);
}

/* ---- Responsive ---- */
@media screen and (max-width: 76.1875em) {
  .ap-hero {
    grid-template-columns: 1fr;
    text-align: center;
    gap: 1.5rem;
  }
  .ap-hero__text .ap-hero__lead {
    margin-left: auto;
    margin-right: auto;
  }
  .ap-hero__art {
    order: -1;
  }
  .ap-showcase {
    grid-template-columns: 1fr;
  }
}