/* Outfit for headings, keeping the regular Inter font (--md-text-font) for
   body copy. See: https://zensical.org/docs/setup/fonts/#additional-fonts */
@import url("https://fonts.googleapis.com/css2?family=Outfit:wght@400;500;600;700&display=swap");

/* Brand colors. Requires palette primary/accent = "custom" in zensical.toml,
   otherwise the theme's own indigo values (set via [data-md-color-primary])
   override these. Links use --md-typeset-a-color, hover/focus states use the
   accent colors — both must be set here, they do not derive from primary.
   See: https://zensical.org/docs/setup/colors/#custom-colors */
:root {
  --md-primary-fg-color:        #1E90FF;
  --md-primary-fg-color--light: #63b0ff;
  --md-primary-fg-color--dark:  #1273d4;
  --md-primary-bg-color:        #ffffff;
  --md-primary-bg-color--light: #ffffffb3;
  --md-accent-fg-color:              #1273d4;
  --md-accent-fg-color--transparent: #1273d41a;
  --md-accent-bg-color:              #ffffff;
  --md-accent-bg-color--light:       #ffffffb3;
  --md-typeset-a-color: #1273d4;
}

/* Lighter link/accent blues for legibility on the dark background */
[data-md-color-scheme="slate"] {
  --md-typeset-a-color: #63b0ff;
  --md-accent-fg-color: #63b0ff;
  --md-accent-fg-color--transparent: #63b0ff1a;
}

.md-typeset h1,
.md-typeset h2,
.md-typeset h3,
.md-typeset h4,
.md-typeset h5,
.md-typeset h6 {
  font-family: "Outfit", var(--md-text-font-family);
}

/* Homepage (hc-* classes are only used on index.md).
   Design language: shadcn/Vercel — flat 1px borders, small radii, muted
   foregrounds, hover = darker border instead of shadow lift. */
.hc-hero {
  max-width: 40rem;
  margin: 2.4rem auto 3rem;
  text-align: center;
}

.md-typeset .hc-hero h1 {
  margin-bottom: 0.3em;
  font-size: 2.1em;
  font-weight: 600;
  letter-spacing: -0.02em;
}
.md-typeset .hc-hero h1 .headerlink {
	display: none;
}

.hc-hero p {
  margin: 0;
  color: var(--md-default-fg-color--light);
}

/* Search: flat input-style button that opens the built-in search dialog */
.md-typeset .hc-search {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  width: 100%;
  max-width: 26rem;
  margin: 1.6rem auto 0;
  padding: 0.5rem 0.5rem 0.5rem 0.8rem;
  font: inherit;
  font-size: 0.75rem;
  text-align: left;
  color: var(--md-default-fg-color--light);
  background-color: var(--md-default-bg-color);
  border: 0.05rem solid var(--md-default-fg-color--lightest);
  border-radius: 0.4rem;
  cursor: pointer;
  transition: border-color 125ms;
}

.md-typeset .hc-search:hover,
.md-typeset .hc-search:focus-visible {
  border-color: var(--md-default-fg-color--lighter);
}

.hc-search svg {
  flex: none;
  width: 0.9rem;
  height: 0.9rem;
  opacity: 0.7;
}

/* Flat shadcn-style key hint instead of the theme's 3D kbd */
.md-typeset .hc-search kbd {
  margin-left: auto;
  padding: 0.1rem 0.3rem;
  font-size: 0.55rem;
  color: var(--md-default-fg-color--light);
  background-color: var(--md-code-bg-color);
  border: 0.05rem solid var(--md-default-fg-color--lightest);
  border-radius: 0.2rem;
  box-shadow: none;
  vertical-align: baseline;
}

/* No keyboard, no hotkey hint */
@media (hover: none) {
  .md-typeset .hc-search kbd {
    display: none;
  }
}

/* Category cards: flatten the theme's shadow-lift hover; icon stacked
   above the title; the title link is stretched over the whole card */
.md-typeset .hc-cats.grid.cards > ul > li {
  position: relative;
  padding: 1rem;
  border-radius: .75rem
}

.md-typeset .hc-cats.grid.cards > ul > li:hover,
.md-typeset .hc-cats.grid.cards > ul > li:focus-within {
  background-color: var(--md-code-bg-color);
  border-color: var(--md-default-fg-color--lighter);
  box-shadow: none;
}

/* icon + title paragraph -> vertical stack */
.md-typeset .hc-cats.grid.cards > ul > li > p:first-child {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: .75rem;
  margin-bottom: unset
}

.md-typeset .hc-cats a {
  color: var(--md-default-fg-color);
  font-family: "Outfit", var(--md-text-font-family);
  text-decoration: none;
}

/* make the whole card clickable */
.md-typeset .hc-cats a::after {
  content: "";
  position: absolute;
  inset: 0;
}

.hc-cats .twemoji {
  --md-icon-size: 1.5rem;
  color: var(--md-typeset-a-color);
}

.md-typeset .hc-cats strong {
  font-weight: 600;
  font-size: .875rem
}

.md-typeset .hc-cats.grid.cards li > p + p {
  margin-top: unset;
  font-size: .7rem;
  color: var(--md-default-fg-color--light);
}

/* Popular articles: small clickable cards */
.hc-popular {
  margin-top: 3rem;
}

.md-typeset .hc-popular h2 {
  font-size: 0.75rem;
  font-weight: 600;
  /* text-transform: uppercase; */
  letter-spacing: 0.08em;
  /* color: var(--md-default-fg-color--light); */
}
.md-typeset .hc-popular h2 .headerlink {
	display: none;
}

.md-typeset .hc-popular ul {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
  gap: 0.5rem;
  margin: 1em 0 0;
  padding: 0;
  list-style: none;
}

/* "ul li" needed to outrank the theme's [dir=ltr] li margin rule */
.md-typeset .hc-popular ul li {
  margin: 0;
}

.md-typeset .hc-popular li a {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.55rem 0.75rem;
  font-size: 0.7rem;
  color: var(--md-default-fg-color);
  border: 0.05rem solid var(--md-default-fg-color--lightest);
  border-radius: .5rem;
  text-decoration: none;
  transition: border-color 125ms, background-color 125ms;
}

/* fontawesome/solid/angle-right as a mask so it tints via background-color */
.md-typeset .hc-popular li a::after {
  content: "";
  flex: none;
  width: 0.6rem;
  height: 0.6rem;
  margin-left: auto;
  background-color: var(--md-default-fg-color--lighter);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cpath d='M439.1 297.4C451.6 309.9 451.6 330.2 439.1 342.7L279.1 502.7C266.6 515.2 246.3 515.2 233.8 502.7C221.3 490.2 221.3 469.9 233.8 457.4L371.2 320L233.9 182.6C221.4 170.1 221.4 149.8 233.9 137.3C246.4 124.8 266.7 124.8 279.2 137.3L439.2 297.3z'/%3E%3C/svg%3E") no-repeat center / contain;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cpath d='M439.1 297.4C451.6 309.9 451.6 330.2 439.1 342.7L279.1 502.7C266.6 515.2 246.3 515.2 233.8 502.7C221.3 490.2 221.3 469.9 233.8 457.4L371.2 320L233.9 182.6C221.4 170.1 221.4 149.8 233.9 137.3C246.4 124.8 266.7 124.8 279.2 137.3L439.2 297.3z'/%3E%3C/svg%3E") no-repeat center / contain;
  transition: transform 125ms;
}

.md-typeset .hc-popular li a:hover,
.md-typeset .hc-popular li a:focus {
  background-color: var(--md-code-bg-color);
  border-color: var(--md-default-fg-color--lighter);
}

.md-typeset .hc-popular li a:hover::after {
  transform: translateX(0.15rem);
  background-color: var(--md-default-fg-color--light);
}

/* Feedback widget: mirror the thumbs-down icon so both thumbs face inward */
.md-feedback__icon[data-md-value="0"] svg {
  transform: scaleX(-1);
}

/* 404 page: back-home link under the search button */
.md-typeset .hc-hero .hc-404-home {
  margin-top: 1.2rem;
  font-size: 0.7rem;
}

.hc-contact {
  margin-top: 3rem;
  text-align: center;
  font-size: 0.7rem;
  color: var(--md-default-fg-color--light);
}