/*
 * Fits the site shell (shell.css) into the Quarto-built books: the Cookbooks and the tutorial books.
 * tools/sync-site-shell.cjs links this file and swaps Quarto's navbar for the site header.
 * Only layout lives here; the header, footer, and section bar look the same as everywhere else.
 */

/* Quarto's search box sits in the section bar, where its navbar rules no longer reach. */
.section-bar #quarto-search {
  display: flex;
  align-items: center;
}

.section-bar #quarto-search .aa-Autocomplete {
  width: 40px;
}

.section-bar #quarto-search .aa-Form {
  background-color: transparent;
  border: none;
}

.section-bar #quarto-search .aa-Form:focus-within {
  box-shadow: none;
  outline: none;
}

.section-bar #quarto-search .aa-Form .aa-InputWrapper {
  display: none;
}

.section-bar #quarto-search .aa-Form .aa-InputWrapper:focus-within {
  display: inherit;
}

.section-bar #quarto-search :is(.aa-Label svg, .aa-LoadingIndicator svg, svg.aa-SubmitIcon) {
  width: 22px;
  height: 22px;
  color: var(--ink);
  opacity: 1;
}

/* Download buttons in the chapters match the site's primary button. */
.myth-download-button {
  font-family: var(--font-sans);
  color: var(--on-accent);
  background: var(--accent);
  border-radius: 12px;
  box-shadow: none;
  transition: background 160ms ease;
}

.myth-download-button:hover {
  background: var(--accent-dark);
  box-shadow: none;
  transform: none;
}

.myth-download-title {
  font-size: var(--control-font-size);
  font-weight: var(--control-font-weight);
  letter-spacing: normal;
}

.section-bar #quarto-search .aa-DetachedSearchButton {
  border: 0;
  background: transparent;
}

/* The site breadcrumbs open <main> on every page, so the phone sidebar bar keeps only its toggle
   instead of repeating Quarto's shorter trail. */
#quarto-header .quarto-secondary-nav nav.quarto-page-breadcrumbs {
  display: none;
}

#quarto-document-content > .breadcrumbs {
  margin-top: 4px;
}

/* Long expressions in book prose must wrap within the phone reading column. */
#quarto-document-content p {
  overflow-wrap: anywhere;
}