/* Nabu Casa visual brand basics: colors, fonts, shapes. */

:root {
  --brand-tin-blue: #a8b7cd;
  --brand-orange: #ec7523;
  --brand-soft-green: #4a7d50;
  --brand-sun-yellow: #ffde77;
  --brand-grey-1: #ecebe7;
  --brand-grey-2: #b0b0a8;

  --brand-charcoal: #1f1f1c;
  /* Lighter green used for card backgrounds on the reference site; keeps
     charcoal text legible. Links use the brand doc's Soft Green. */
  --brand-card-green: #559361;

  --brand-radius: 1rem;
  --brand-icon-size: 2rem;

  --md-text-font: "Outfit";
  --md-code-font: "JetBrains Mono";
}

/* Light mode: white background, black text, Soft Green links, Orange hover. */
[data-md-color-scheme="default"] {
  --md-primary-fg-color: var(--brand-soft-green);
  --md-primary-fg-color--light: #6a9a70;
  --md-primary-fg-color--dark: #3a6440;
  --md-primary-bg-color: #fff;
  --md-primary-bg-color--light: #ffffffb3;
  --md-accent-fg-color: var(--brand-orange);
  --md-accent-fg-color--transparent: #ec75231a;
  --md-accent-bg-color: #000;
  --md-typeset-a-color: var(--brand-soft-green);
  --brand-nav-active-bg: var(--brand-grey-1);
  /* Search-term highlight on pages: Orange tint, matching the orange
     match text in the search popup. */
  --md-typeset-mark-color: #ec752347;

  --md-code-bg-color: var(--brand-grey-1);
  --md-code-bg-color--light: #ecebe7b3;
  --md-code-bg-color--lighter: #ecebe74d;
}

/* Dark mode: black background, white text, Tin Blue links, Orange hover. */
[data-md-color-scheme="slate"] {
  --md-default-fg-color: #ffffffde;
  --md-default-fg-color--light: #ffffff99;
  --md-default-fg-color--lighter: #ffffff52;
  --md-default-fg-color--lightest: #ffffff1f;
  --md-default-bg-color: #000;
  --md-default-bg-color--light: #000000b3;
  --md-default-bg-color--lighter: #0000004d;
  --md-default-bg-color--lightest: #0000001f;

  --md-primary-fg-color: var(--brand-tin-blue);
  --md-primary-fg-color--light: #c3cedd;
  --md-primary-fg-color--dark: #8a9bb5;
  --md-primary-bg-color: #000;
  --md-primary-bg-color--light: #000000b3;
  --md-accent-fg-color: var(--brand-orange);
  --md-accent-fg-color--transparent: #ec75231a;
  --md-accent-bg-color: #000;
  --md-typeset-a-color: var(--brand-tin-blue);
  --brand-nav-active-bg: #ffffff14;
  --md-typeset-mark-color: #ec752466;

  --md-code-bg-color: #1a1a19;
  --md-code-bg-color--light: #1a1a19b3;
  --md-code-bg-color--lighter: #1a1a194d;
}

/* Logo: show the variant for the active color scheme. The light-mode image
   is dark grey, for light backgrounds; the dark-mode image is white. */
[data-md-color-scheme="default"] .brand-logo--dark,
[data-md-color-scheme="slate"] .brand-logo--light {
  display: none !important;
}

/* Wider layout on large screens. The theme caps .md-grid at 61rem; the
   sidebars keep their width, so the extra space goes to the content. */
@media screen and (min-width: 100em) {
  .md-grid {
    max-width: 70rem;
  }
}

@media screen and (min-width: 125em) {
  .md-grid {
    max-width: 76rem;
  }
}

/* Active nav item: link color on a quiet grey, instead of low-contrast orange. */
.md-nav--primary .md-nav__item .md-nav__link--active {
  color: var(--md-typeset-a-color);
  background: var(--brand-nav-active-bg);
}

/* Typography, after the reference site: all headings in Outfit at weight
   450 with tight leading, charcoal in light mode. Source Serif 4 is kept
   for secondary text: the breadcrumb works as the eyebrow above the title. */
[data-md-color-scheme="default"] .md-typeset :is(h1, h2, h3, h4, h5, h6) {
  color: var(--brand-charcoal);
}

.md-typeset :is(h1, h2, h3, h4, h5, h6) {
  font-weight: 450;
  line-height: 1.1;
  letter-spacing: -0.01em;
  text-wrap: balance;
}

.md-typeset h1 {
  font-size: 2.25em;
  line-height: 1.05;
}

.md-typeset h2 {
  font-size: 1.6em;
  line-height: 1.05;
}

.md-typeset h3 {
  font-size: 1.3em;
}

.md-typeset h4 {
  font-size: 1.1em;
}

.md-header__topic:first-child {
  font-weight: 450;
}

.md-path {
  font-family: "Source Serif 4", Georgia, serif;
  font-size: 0.8rem;
  font-weight: 300;
}

.md-typeset strong,
.md-typeset b {
  font-weight: 600;
}

/* Cards, after the reference site: solid accent-colored rectangles with
   1rem corners, no outlines or shadows, charcoal text on every color. Hover
   grows the card with a ring in its own color and nudges the arrow button. */
.md-typeset .grid.cards > ul > li,
.md-typeset .grid > .card {
  --card-bg: var(--brand-grey-1);
  position: relative;
  padding: 1.2rem 1.2rem calc(1.2rem + var(--brand-icon-size) + 0.6rem);
  border: none;
  border-radius: var(--brand-radius);
  background-color: var(--card-bg);
  color: var(--brand-charcoal);
  transition: box-shadow 0.22s ease-out;
}

.md-typeset .grid.cards > ul > li:hover,
.md-typeset .grid > .card:hover {
  border: none;
  box-shadow: 0 0 0 0.15rem var(--card-bg);
}

.md-typeset .grid.cards > ul > li:focus-within,
.md-typeset .grid > .card:focus-within {
  border: none;
  box-shadow: 0 0 0 0.15rem var(--card-bg);
  outline: 0.1rem solid var(--md-default-fg-color);
  outline-offset: 0.3rem;
}

.md-typeset .grid.cards > ul > li:nth-child(5n + 1) { --card-bg: var(--brand-tin-blue); }
.md-typeset .grid.cards > ul > li:nth-child(5n + 2) { --card-bg: var(--brand-orange); }
.md-typeset .grid.cards > ul > li:nth-child(5n + 3) { --card-bg: var(--brand-card-green); }
.md-typeset .grid.cards > ul > li:nth-child(5n + 4) { --card-bg: var(--brand-sun-yellow); }
.md-typeset .grid.cards > ul > li:nth-child(5n + 5) { --card-bg: var(--brand-grey-1); }

/* Card title: large, regular weight, tight leading. */
.md-typeset .grid.cards > ul > li > p:first-child {
  margin-bottom: 0.8em;
}

.md-typeset .grid.cards > ul > li > p:first-child strong {
  font-size: 1.6em;
  font-weight: 450;
  line-height: 1.1;
  letter-spacing: -0.01em;
}

/* The title link covers the whole card, so the card is one click target. */
.md-typeset .grid.cards > ul > li a {
  color: inherit;
  text-decoration: none;
  outline: none;
}

.md-typeset .grid.cards > ul > li a::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: var(--brand-radius);
}

/* "Learn more" button, bottom right: a charcoal pill with a right arrow, as
   on nabucasa.com. On hover a charcoal ring grows around the pill and the
   arrow moves right; the text stays still. ::after is the pill, ::before the
   arrow on top of it. */
.md-typeset .grid.cards > ul > li::after {
  content: "Learn more";
  content: "Learn more" / "";
  position: absolute;
  z-index: 1;
  right: 0.8rem;
  bottom: 0.8rem;
  box-sizing: border-box;
  height: var(--brand-icon-size);
  padding: 0 var(--brand-icon-size) 0 0.8rem;
  border-radius: var(--brand-icon-size);
  background-color: var(--brand-charcoal);
  color: #fff;
  font-size: 0.7rem;
  font-weight: 300;
  line-height: var(--brand-icon-size);
  white-space: nowrap;
  transition: box-shadow 0.22s ease-out;
  pointer-events: none;
}

.md-typeset .grid.cards > ul > li::before {
  content: "";
  position: absolute;
  z-index: 2;
  right: 0.8rem;
  bottom: 0.8rem;
  width: var(--brand-icon-size);
  height: var(--brand-icon-size);
  background: no-repeat center / 50%
    url("data:image/svg+xml,%3Csvg width='23' height='23' viewBox='0 0 23 23' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0.5 11.085H20M13 4.085L20 11.085L13 18.085' stroke='%23ECEBE7' stroke-width='2.33'/%3E%3C/svg%3E");
  transition: transform 0.22s ease-out;
  pointer-events: none;
}

.md-typeset .grid.cards > ul > li:is(:hover, :focus-within)::after {
  box-shadow: 0 0 0 0.15rem var(--brand-charcoal);
}

.md-typeset .grid.cards > ul > li:is(:hover, :focus-within)::before {
  transform: translateX(12%);
}

/* Images: rounded corners to match the cards, no backdrop. */
.md-typeset p > img:only-child {
  border-radius: var(--brand-radius);
}

/* Smaller display size for large, square-ish images, centered. Add
   { .img-compact } after the image in Markdown. */
.md-typeset img.img-compact {
  display: block;
  max-height: 450px;
  width: auto;
  margin-inline: auto;
}

@media (prefers-reduced-motion: reduce) {
  .md-typeset .grid.cards > ul > li,
  .md-typeset .grid.cards > ul > li::before,
  .md-typeset .grid.cards > ul > li::after {
    transition: none;
  }
}