/* ==========================================================================
   Tlicho Store Handbook : FireNet Designs brand skin for Material for MkDocs
   Palette: Warm Black #1E1E1E · Bright Green #19BC20 · Ember Orange #F3600D
   Type: Montserrat (headings) · Raleway (body)
   ========================================================================== */

@import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@700;900&family=Raleway:wght@400;500;600;700&display=swap");

:root {
  --fnd-black: #1e1e1e;
  --fnd-green: #19bc20;
  --fnd-orange: #f3600d;
  --fnd-navy: #01222d;
  --fnd-body: #3a3a3a;

  /* Material theme hooks */
  --md-primary-fg-color: #1e1e1e;
  --md-primary-fg-color--light: #2c2c2c;
  --md-primary-fg-color--dark: #000000;
  --md-accent-fg-color: var(--fnd-orange);
  --md-typeset-a-color: var(--fnd-orange);
}

/* Headings in Montserrat, body in Raleway */
.md-typeset h1,
.md-typeset h2,
.md-typeset h3,
.md-typeset h4,
.md-header__title {
  font-family: "Montserrat", sans-serif;
  font-weight: 700;
  letter-spacing: -0.01em;
}
.md-typeset h1 {
  font-weight: 900;
  color: var(--fnd-black);
}
body,
.md-typeset {
  font-family: "Raleway", sans-serif;
  color: var(--fnd-body);
}

/* Green structural accents: heading underline + h2 rule */
.md-typeset h2 {
  border-bottom: 2px solid var(--fnd-green);
  padding-bottom: 0.2em;
}

/* Links: orange on hover */
.md-typeset a:hover {
  color: var(--fnd-green);
}

/* Tasklist (Try it yourself) tick color = green */
.md-typeset .task-list-control .task-list-indicator::before {
  background-color: var(--fnd-green);
}

/* "abstract" admonition (In this lesson) tinted green */
.md-typeset .admonition.abstract,
.md-typeset details.abstract {
  border-left-color: var(--fnd-green);
}
.md-typeset .abstract > .admonition-title,
.md-typeset .abstract > summary {
  background-color: rgba(25, 188, 32, 0.1);
}

/* Loom embed: responsive 16:9 */
.loom-embed {
  position: relative;
  padding-bottom: 56.25%;
  height: 0;
  overflow: hidden;
  border-radius: 8px;
  margin: 1.2rem 0;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.12);
}
.loom-embed iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* Home page module cards (Material grid cards, FND accent) */
.md-typeset .grid.cards > ul > li {
  border-top: 4px solid var(--fnd-orange);
  border-radius: 10px;
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}
.md-typeset .grid.cards > ul > li:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 22px rgba(0, 0, 0, 0.1);
  border-color: var(--fnd-orange);
}
.md-typeset .grid.cards > ul > li > hr {
  background: var(--fnd-green);
  height: 2px;
}
.md-typeset .grid.cards .twemoji svg {
  fill: var(--fnd-orange);
}
.md-typeset .grid.cards h2,
.md-typeset .grid.cards h3 {
  border: 0;
}

/* Header bar: thin green underline = brand divider */
.md-header {
  border-bottom: 3px solid var(--fnd-green);
}

/* Dark mode adjustments */
[data-md-color-scheme="slate"] {
  & {
    --md-primary-fg-color: var(--fnd-black);
    --md-typeset-text-color: #e0e0e0;
    --fnd-body: #e0e0e0;
    --md-code-bg-color: #2c2c2c;
  }

  .md-typeset,
  .md-typeset h1 {
    color: var(--md-typeset-text-color) !important;
  }
}