/*
 * Design tokens and the shared site shell: header, footer, and section bar.
 * Every page loads this before its own stylesheet, including pages built by other
 * tools (the documentation, the Cookbooks, the Push Lab workshop). Page stylesheets
 * must not restyle these elements; the markup comes from tools/site-shell.js.
 */

/* Inter 4.1 (SIL Open Font License, assets/fonts/Inter-LICENSE.txt), served so every visitor sees the same
   type instead of their system font. Variable files cover the 650 and 750 control and heading weights. */
@font-face {
  font-family: Inter;
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("/assets/fonts/InterVariable.v4-1.woff2") format("woff2");
}

@font-face {
  font-family: Inter;
  font-style: italic;
  font-weight: 100 900;
  font-display: swap;
  src: url("/assets/fonts/InterVariable-Italic.v4-1.woff2") format("woff2");
}

:root {
  --bg: #f3f1ec;
  --bg-soft: #e9e6df;
  --panel: rgba(255, 255, 255, 0.78);
  --panel-solid: #fbfaf7;
  --panel-strong: #ffffff;
  --ink: #17191d;
  --muted: #17191d;
  --line: rgba(23, 25, 29, 0.13);
  --line-strong: rgba(23, 25, 29, 0.24);
  --accent: #ff4a4a;
  --accent-dark: #d93636;
  --accent-soft: rgba(255, 74, 74, 0.22);
  --on-accent: #fff; /* Text and icons on an --accent fill: buttons, the current nav item, selected text. */
  --blue: #426fe8;
  --blue-soft: rgba(66, 111, 232, 0.12);
  --green: #1f8b66;
  --header: #f3f1ec; /* Opaque so the header looks the same over light and dark pages. */
  --shadow: 0 24px 70px rgba(23, 25, 29, 0.13);
  --shadow-soft: 0 14px 38px rgba(23, 25, 29, 0.08);
  --radius-sm: 12px;
  --radius: 22px;
  --radius-lg: 32px;
  --shell: min(1240px, calc(100vw - 48px));
  /* Type for every clickable control: nav links, the header button, and page buttons like the docs hero.
     Pixels, not rem, because Bootstrap on the Cookbook pages changes the root size. 650 renders as
     Segoe UI Semibold on Windows; 500 has no face there and falls back to Regular. */
  --control-font-size: 14.4px;
  --control-font-weight: 650;
  --control-font-size-small: 13px; /* Filter chips and compact toggles. */
  --font-sans: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

/* Selected text everywhere: white on the accent red. Lives here so the docs and Cookbooks get it too. */
::selection {
  color: var(--on-accent);
  background: var(--accent);
}

/* The phone menu is open; script.js sets this. */
body.nav-open {
  overflow: hidden;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Pin type and box model so the host page's base styles cannot leak in. */
:is(.site-header, .site-footer, .section-bar) {
  box-sizing: border-box;
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.6;
  letter-spacing: normal;
  text-align: left;
  -webkit-font-smoothing: antialiased;
  -webkit-user-select: none;
  user-select: none;
}

:is(.site-header, .site-footer, .section-bar) *,
:is(.site-header, .site-footer, .section-bar) *::before,
:is(.site-header, .site-footer, .section-bar) *::after {
  box-sizing: border-box;
}

:is(.site-footer, .section-bar) a {
  color: inherit;
  text-decoration: none;
}

.site-header img {
  display: block;
  max-width: 100%;
}

.site-header button {
  margin: 0;
  color: inherit;
  font: inherit;
}

.site-header {
  position: sticky;
  z-index: 100;
  top: 0;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  min-height: 84px;
  margin: 0;
  padding: 0 max(24px, calc((100vw - 1240px) / 2));
  background: var(--header);
  border-bottom: 1px solid transparent;
  transition: border-color 180ms ease, box-shadow 180ms ease;
}

/* Hosts that own the fixed bar (the documentation, the Cookbooks) wrap the shell in .site-chrome. */
.site-chrome .site-header {
  position: relative;
}

.site-header.is-scrolled {
  border-bottom-color: var(--line);
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.06);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  color: var(--ink);
  text-decoration: none;
}

.brand-mark {
  display: grid;
  width: 56px;
  height: 56px;
  place-items: center;
  background: transparent;
}

.brand-mark img {
  width: 56px;
  height: 56px;
  object-fit: contain;
}

.brand-copy {
  font-size: 1.25em;
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1;
}

.brand-copy strong {
  font-weight: inherit;
}

.site-nav {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 4px;
}

.site-nav a {
  position: relative;
  padding: 9px 13px;
  color: var(--muted);
  border-radius: 10px;
  font-size: var(--control-font-size);
  font-weight: var(--control-font-weight);
  line-height: 1.6;
  text-decoration: none;
  transition: color 160ms ease, background 160ms ease, box-shadow 160ms ease;
}

.site-nav a:not(.nav-social):hover {
  color: var(--ink);
  background: var(--accent-soft);
  box-shadow: inset 0 0 0 1px rgba(255, 74, 74, 0.3);
}

.site-nav a.is-active {
  color: var(--on-accent);
  background: var(--accent);
  box-shadow: none;
}

.site-nav a.is-active:hover {
  color: var(--on-accent);
  background: var(--accent-dark);
}

.nav-socials {
  display: flex;
  margin-left: 8px;
  align-items: center;
  gap: 10px;
}

.site-nav .nav-social {
  display: grid;
  width: auto;
  height: 30px;
  padding: 0;
  place-items: center;
  background: transparent;
  border: 0;
  border-radius: 0;
}

.site-nav .nav-social img {
  display: block;
  transition: transform 160ms ease, opacity 160ms ease;
}

.site-nav .nav-social[data-discord-link] img {
  width: 27px;
  height: 20px;
}

.site-nav .nav-social:hover {
  background: transparent;
  box-shadow: none;
}

.site-nav .nav-social:hover img {
  opacity: 0.82;
  transform: translateY(-1px) scale(1.06);
}

/* Learn: a hub link whose sections drop down on hover or keyboard focus. */
.nav-group {
  position: relative;
}

.site-nav .nav-group-link {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

/* A drawn chevron centers on the text; a rotated border box sits high. */
.nav-group-link::after {
  flex: none;
  width: 10px;
  height: 10px;
  content: "";
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M2 3.5l3 3 3-3' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M2 3.5l3 3 3-3' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
  transition: transform 160ms ease;
}

.nav-submenu {
  position: absolute;
  z-index: 10;
  top: 100%;
  left: 50%;
  display: grid;
  min-width: 200px;
  padding: 8px;
  gap: 2px;
  visibility: hidden;
  opacity: 0;
  background: var(--panel-solid);
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: var(--shadow-soft);
  transform: translate(-50%, 4px);
  transition: opacity 140ms ease, transform 140ms ease, visibility 0s linear 140ms;
}

/* Bridges the gap under the Learn link so the pointer can reach the menu. */
.nav-submenu::before {
  position: absolute;
  right: 0;
  bottom: 100%;
  left: 0;
  height: 12px;
  content: "";
}

.nav-group:is(:hover, :focus-within):not(.is-dismissed) .nav-submenu {
  visibility: visible;
  opacity: 1;
  transform: translate(-50%, 10px);
  transition: opacity 140ms ease, transform 140ms ease;
}

.nav-group:is(:hover, :focus-within):not(.is-dismissed) .nav-group-link::after {
  transform: rotate(180deg);
}

.site-nav .nav-submenu a {
  display: block;
  white-space: nowrap;
}

.site-nav .nav-submenu a.is-active {
  color: var(--ink);
  background: var(--accent-soft);
  box-shadow: inset 0 0 0 1px rgba(255, 74, 74, 0.3);
}

.nav-toggle {
  display: none;
  width: 42px;
  height: 42px;
  padding: 0;
  gap: 4px;
  place-items: center;
  cursor: pointer;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 12px;
}

.nav-toggle > span:not(.sr-only) {
  display: block;
  width: 18px;
  height: 2px;
  background: var(--ink);
  border-radius: 2px;
}

.header-cta {
  display: inline-flex;
  min-height: 42px;
  padding: 0 17px;
  align-items: center;
  justify-content: center;
  color: var(--on-accent);
  background: var(--accent);
  border-radius: 12px;
  box-shadow: none;
  font-size: var(--control-font-size);
  font-weight: var(--control-font-weight);
  line-height: 1.6;
  text-decoration: none;
  transition: background 160ms ease;
}

/* Color only: a transform here re-rasterizes the label mid-animation and the text visibly shifts. */
.header-cta:hover {
  color: var(--on-accent);
  background: var(--accent-dark);
  box-shadow: none;
}

/* Page buttons share the header button's size, type, and colors. Primary is red with white text;
   secondary is a light outlined button. Hover changes color only, like the header button. */
.button {
  display: inline-flex;
  min-height: 42px;
  padding: 0 17px;
  align-items: center;
  justify-content: center;
  gap: 9px;
  border: 1px solid transparent;
  border-radius: 12px;
  box-shadow: none;
  font-family: var(--font-sans);
  font-size: var(--control-font-size);
  font-weight: var(--control-font-weight);
  letter-spacing: normal;
  line-height: 1.6;
  text-decoration: none;
  cursor: pointer;
  transition: background 160ms ease, border-color 160ms ease;
}

.button-primary {
  color: var(--on-accent);
  background: var(--accent);
  box-shadow: none;
}

.button-primary:hover {
  color: var(--on-accent);
  background: var(--accent-dark);
}

.button-secondary {
  color: var(--ink);
  background: var(--panel);
  border-color: var(--line-strong);
}

.button-secondary:hover {
  color: var(--ink);
  background: var(--panel-strong);
}

.site-footer {
  margin: 0;
  padding: 22px max(24px, calc((100% - var(--shell)) / 2));
  color: var(--muted);
  background: var(--bg);
  border-top: 1px solid var(--line);
  text-align: center;
}

.site-footer p {
  margin: 0;
  color: inherit;
  font-size: 0.82em;
}

/* Section bar: the section name, a label, and the section's own search, under the header. */
.section-bar {
  height: 56px;
  background: var(--bg);
  border-block: 1px solid var(--line);
}

.section-bar-inner {
  display: flex;
  width: min(1240px, calc(100% - 48px));
  height: 100%;
  margin-inline: auto;
  align-items: center;
  gap: 16px;
}

.section-bar-title {
  color: var(--ink);
  font-size: 0.9em;
  font-weight: 750;
  letter-spacing: -0.02em;
  white-space: nowrap;
}

.section-bar-tag {
  overflow: hidden;
  padding: 3px 9px;
  color: #42454c;
  border: 1px solid var(--line);
  border-radius: 8px;
  font-size: 0.75em;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.section-bar-tools {
  display: flex;
  margin-inline-start: auto;
  align-items: center;
  gap: 10px;
}

/* Breadcrumbs: the trail from Learn down to the current page, at the top of each Learn page.
   Sizes are in pixels and margins are reset because the Cookbook and manual hosts style lists. */
.breadcrumbs {
  margin: 0 0 18px;
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 1.5;
  letter-spacing: normal;
}

.breadcrumbs ol {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 2px 0;
  margin: 0;
  padding: 0;
  list-style: none;
}

.breadcrumbs li {
  display: inline-flex;
  min-width: 0;
  margin: 0;
  padding: 0;
  align-items: baseline;
  color: #5b5f66;
}

.breadcrumbs li + li::before {
  content: "/";
  margin-inline: 8px;
  color: var(--line-strong);
}

.breadcrumbs a {
  color: inherit;
  text-decoration: none;
  border-radius: 4px;
}

.breadcrumbs a:hover {
  color: var(--ink);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.breadcrumbs a:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.breadcrumbs [aria-current="page"] {
  color: var(--ink);
  font-weight: 600;
}

@media (max-width: 1120px) {
  :root {
    --shell: min(100% - 36px, 960px);
  }

  .site-header {
    grid-template-columns: auto 1fr auto;
    padding-inline: 18px;
  }

  .nav-toggle {
    display: inline-grid;
    justify-self: end;
    margin-right: 10px;
  }

  .site-nav {
    position: fixed;
    z-index: 120;
    top: 85px;
    right: 18px;
    left: 18px;
    display: none;
    padding: 14px;
    align-items: stretch;
    flex-direction: column;
    background: var(--panel-solid);
    border: 1px solid var(--line);
    border-radius: 18px;
    box-shadow: var(--shadow);
  }

  .site-nav.is-open {
    display: flex;
  }

  .site-nav a {
    padding: 13px 14px;
  }

  /* There is no hover on a phone, so the sections sit indented under Learn. */
  .site-nav .nav-group-link {
    display: flex;
  }

  .nav-group-link::after {
    display: none;
  }

  .nav-submenu,
  .nav-group:is(:hover, :focus-within):not(.is-dismissed) .nav-submenu {
    position: static;
    min-width: 0;
    margin: 2px 0 4px 14px;
    padding: 0 0 0 10px;
    visibility: visible;
    opacity: 1;
    background: none;
    border: 0;
    border-left: 2px solid var(--line);
    border-radius: 0;
    box-shadow: none;
    transform: none;
    transition: none;
  }

  .nav-submenu::before {
    display: none;
  }

  .site-nav .nav-socials {
    margin-left: 0;
    padding: 4px 12px;
  }

  .section-bar-inner {
    width: calc(100% - 36px);
  }
}

@media (max-width: 780px) {
  :root {
    --shell: calc(100% - 28px);
    --radius: 17px;
    --radius-lg: 22px;
  }

  .site-header {
    min-height: 72px;
    grid-template-columns: auto 1fr;
  }

  .site-nav {
    top: 73px;
  }

  .header-cta {
    display: none;
  }

  .brand-mark,
  .brand-mark img {
    width: 48px;
    height: 48px;
  }

  .section-bar-inner {
    gap: 10px;
  }
}

@media (max-width: 520px) {
  .brand-copy {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .site-header,
  .site-nav a,
  .site-nav .nav-social img,
  .nav-submenu,
  .nav-group-link::after,
  .header-cta,
  .button {
    transition: none;
  }
}