/* Airscope wiki — port of open-ephys/miniscope-docs/source/_static/theme_overrides.css.
   Only the navbar color was changed. Fonts are loaded from Google Fonts (Source Sans Pro,
   Bitter) instead of shipping .ttf files. */

@import url("https://fonts.googleapis.com/css2?family=Bitter:ital,wght@0,400;0,700;1,400&family=Source+Sans+3:ital,wght@0,400;0,700;1,400&display=swap");

/* alias the Google-served families to the names the rules below expect */
:root {
  --font-source-sans: "Source Sans 3", "Source Sans Pro", sans-serif;
  --font-bitter: "Bitter", serif;

  /* === navbar color ===
     Change ONLY this line to recolor the navbar.
     The original open-ephys site used #cd98c2 (dusty pink/lavender). */
  --navbar-bg: #1f6e8c;          /* deep teal */
  --navbar-accent: #84b8c4;      /* lighter teal accent for divider */
}

/* logo / brand text — when there's no logo image, render the title as a clean wordmark */
.navbar-brand {
  position: relative;
  height: auto;
  width: auto;
  display: flex;
  align-items: center;
}

.navbar-brand,
.navbar-brand p,
.navbar-brand p.title {
  font-family: var(--font-bitter) !important;
  font-weight: 700 !important;
  font-size: 1.45rem !important;
  line-height: 1.1 !important;
  color: white !important;
  letter-spacing: 0.3px;
  margin: 0 !important;
}

.navbar-brand:hover,
.navbar-brand:hover p {
  color: #e6eddf !important;
}

/* text fonts and colors */
body {
  background-color: white;
  margin-bottom: 1.15rem;
  font-size: 1em;
  color: #242c16;
  font-family: var(--font-source-sans);
}

h1 {
  margin: 2.75rem 0 1.05rem;
  font-family: var(--font-bitter);
  font-weight: 400;
  line-height: 1.15;
  margin-top: 0;
  color: #242c16;
  font-size: 2.2em;
}

h2 {
  margin: 2.75rem 0 1.05rem;
  font-family: var(--font-bitter);
  font-weight: 400;
  line-height: 1.15;
  color: #242c16;
  font-size: 1.5em;
}

h3 {
  margin: 1.5rem 0 1.05rem;
  font-family: var(--font-bitter);
  font-weight: 400;
  line-height: 1.15;
  color: #242c16;
  font-size: 1.3em;
}

h4 {
  margin: 2.75rem 0 1.05rem;
  font-family: var(--font-bitter);
  font-weight: 400;
  line-height: 1.15;
  color: #242c16;
  font-size: 1.1em;
}

h5 {
  margin: 2.75rem 0 1.05rem;
  font-family: var(--font-source-sans);
  font-weight: 400;
  line-height: 1.15;
  color: #242c16;
  font-size: 1.1em;
}

h6 {
  margin: 2.75rem 0 1.05rem;
  font-family: var(--font-source-sans);
  font-weight: 400;
  line-height: 1.15;
  color: #242c16;
  font-size: 1em;
}

/* navigation bar colors */
.navbar {
  background: var(--navbar-bg) !important;
  font-size: 1em;
}

/* Center the section tabs against the FULL navbar width, not against the brand-offset area.
   This means the tabs sit at the visual middle of the page regardless of the brand width
   on the left or the search/icon width on the right. */
.bd-header .bd-header__inner {
  position: relative;
}

.bd-header .navbar-header-items {
  display: flex;
  flex-grow: 1;
  align-items: center;
}

.bd-header .navbar-header-items__center {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  margin: 0;
  display: flex;
  align-items: center;
}

.bd-header .navbar-header-items__end {
  margin-left: auto;
}

/* keep the brand vertically centered with the tabs */
.bd-header .navbar-brand,
.bd-header .navbar-header-items {
  align-self: center;
}

/* === Mobile navbar: show only hamburger + title ===
   On narrow screens the absolute-centered nav items would overlap the brand,
   so hide the section tabs entirely and let the hamburger reveal them via the
   primary sidebar. */
@media (max-width: 959.98px) {
  .bd-header .navbar-header-items,
  .bd-header .navbar-header-items__center,
  .bd-header .navbar-header-items__end {
    display: none !important;
  }

  /* iOS Safari fix: PyData sets height: 100vh on the mobile sidebar, but on iOS
     100vh resolves to the LARGE viewport (no address bar), so the panel overflows
     the visible area and its top sits behind the URL bar until Safari collapses
     its chrome on scroll. Use the dynamic viewport unit so the panel matches the
     currently-visible area. -webkit-fill-available is the fallback for iOS < 15.4. */
  .bd-sidebar-primary {
    height: -webkit-fill-available;
    height: 100dvh;
    max-height: -webkit-fill-available;
    max-height: 100dvh;
  }

  /* When the mobile sidebar <dialog> opens via showModal(), the browser auto-focuses
     the first link. iOS Safari treats that as keyboard-visible focus and PyData
     paints a pink :focus-visible ring on it — so the previously-tapped tab looks
     stuck-selected every time the menu reopens. Mobile has no keyboard, so drop
     the focus-visible ring inside the sidebar. */
  #pst-primary-sidebar .nav-link:focus-visible,
  #pst-primary-sidebar-modal .nav-link:focus-visible,
  #pst-primary-sidebar a:focus-visible,
  #pst-primary-sidebar-modal a:focus-visible {
    box-shadow: none !important;
    outline: none !important;
  }
}

.navbar-nav > .active > .nav-link {
  background-color: #e6eddf !important;
  color: #2f401f !important;
  font-weight: normal !important;
  transition-duration: 0.4s;
}

.navbar-nav > .active > .nav-link:hover {
  color: #519141 !important;
  transition-duration: 0.4s;
}

.navbar a {
  color: white !important;
  font-family: var(--font-bitter);
  transition-duration: 0.4s;
  margin-right: 10px;
}

.search-button {
  color: white !important;
  margin-right: 30px;
}

.navbar a:hover {
  color: #2f401f !important;
  transition-duration: 0.4s;
}

/* Remove skip link from top of page */
.skip-link {
  display: none;
}

/* Bonsai workflows & copy button */
.download-copy-img {
  text-align: right;
}

.download-copy-img:active {
  filter: invert(75%);
  cursor: pointer;
}

.download-copy-img:hover {
  cursor: pointer;
}

.bonsai-workflow-container {
  display: grid;
  grid-template-columns: 1fr max-content max-content min-content;
  grid-template-rows: min-content min-content;
  gap: 0px 0px;
  grid-template-areas:
    "workflow-filler workflow-download workflow-copy workflow-name"
    "workflow-image workflow-image workflow-image workflow-image";
}

.bonsai-workflow-zip-container {
  display: grid;
  grid-template-columns: 1fr max-content max-content min-content;
  grid-template-rows: min-content min-content;
  gap: 0px 0px;
  grid-template-areas:
    "workflow-filler workflow-download workflow-name"
    "workflow-image workflow-image workflow-image";
}

.workflow-filler {
  grid-area: workflow-filler;
  margin-top: 10px;
}

.workflow-download {
  grid-area: workflow-download;
  border-style: solid hidden hidden solid;
  border-width: 1px;
  padding: 2px 0 2px 5px;
  margin-top: 10px;
  background-color: #f0f0f0;
  border-radius: 4px 0 0 0;
}

.workflow-copy {
  grid-area: workflow-copy;
  border-style: solid hidden hidden hidden;
  border-width: 1px;
  padding: 2px 0 2px 5px;
  margin-top: 10px;
  background-color: #f0f0f0;
}

.workflow-name {
  grid-area: workflow-name;
  border-style: solid solid hidden hidden;
  border-width: 1px;
  padding: 2px 5px;
  margin-top: 10px;
  background-color: #f0f0f0;
  border-radius: 0 4px 0 0;
  white-space: nowrap;
}

.workflow-image {
  grid-area: workflow-image;
  border-style: solid;
  border-width: 1px;
  padding: 10px 10px 15px 10px;
  border-radius: 4px 0 4px 4px;
}

/* Landing page cards */
.card-columns {
  column-count: 3 !important;
}

.card-title {
  margin: 1rem;
}

.intro-card .card-text {
  margin: 20px 0;
  color: var(--onix-txt-color) !important;
}

.card-img-top {
  margin-top: 2em;
}

.card {
  border: 0;
}

.intro-card {
  transition: transform 0.2s ease;
  border: 0;
}

.intro-card:hover {
  transform: scale(1.05);
}

.col-lg-6 {
  margin-top: 2em;
}

/* Gallery cards */
.gallery-card .card-header {
  height: 100%;
  margin-top: 0;
  align-items: center;
  justify-content: center;
  text-align: center;
}

/* === Lock the three-column layout so every page is the same shape, regardless of content. ===
   PyData's defaults size the article column based on its content (max-width: 60em with
   overflow-x: auto), which means pages with wider content (sphinx-design grids, big images)
   render at a different effective width than text-only pages. We override that. */

.bd-page-width {
  max-width: 100rem;
}

.bd-content {
  display: flex;
  flex-grow: 1;
  justify-content: flex-start;
  max-width: 100%;
}

/* The article container fills the available space (no 60em content-based cap) so its width
   is determined by the layout, not by its contents. */
.bd-article-container {
  max-width: none;
  width: 100%;
  flex-grow: 1;
  flex-shrink: 1;
  min-width: 0;
}

/* Both sidebars are fixed-em — same width regardless of TOC entry length or page content. */
.bd-sidebar-primary {
  width: 18rem;
  flex-shrink: 0;
  flex-grow: 0;
}

.bd-sidebar-secondary {
  width: 14rem;
  flex-shrink: 0;
  flex-grow: 0;
}

strong {
  font-weight: bold;
}

ul,
ol,
h1,
h2,
h3,
h4,
h5,
h6 {
  line-height: 1.5;
  margin-bottom: 0.7em;
}

/* List items in main area, but not in side bars */
body > li,
p {
  line-height: 1.5;
  margin: 0.7rem 0;
}

/* keep images within column bounds */
img {
  max-width: 100%;
}

/* ===== image sizing for centered / class-tagged figures ===== */
/* default centered images via :align: center — e.g. assembly step photos */
.bd-content img.align-center {
  display: block;
  margin: 1.2em auto;
  max-width: 420px;          /* was 600px — shrunk ~30% */
}

/* small part photos via :class: narrow — filters, chips, small baseplates */
.bd-content img.narrow {
  max-width: 250px;          /* was 360px — shrunk ~30% */
}

/* mid-size part photos via :class: medium — flash PCB, SD card converter, housing */
.bd-content img.medium {
  max-width: 310px;
}

/* wider diagram / concept figures via :class: wide */
.bd-content img.wide {
  max-width: 620px;          /* was 880px — shrunk ~30% */
}


/* sphinx-design grid cards on the home page */
.bd-content .sd-card {
  border: 1px solid var(--pst-color-border, #dee2e6);
  box-shadow: none;
  transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}
.bd-content .sd-card:hover {
  border-color: var(--navbar-bg);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06);
}

/* admonition colors */
.admonition.attention {
  border-color: #927a90;
}
.attention > .admonition-title {
  background-color: #efe8ef !important;
}
.attention > .admonition-title:before {
  color: #927a90 !important;
}

.admonition.note {
  border-color: #5fb5dc;
}
.note > .admonition-title {
  background-color: #d9e7f3 !important;
}
.note > .admonition-title:before {
  color: #5fb5dc !important;
}

.admonition.error,
.admonition.warning,
.admonition.danger {
  border-color: #da714a;
}
.error > .admonition-title,
.warning > .admonition-title,
.danger > .admonition-title {
  background-color: #f1d7c7 !important;
}
.error > .admonition-title:before,
.warning > .admonition-title:before,
.danger > .admonition-title:before {
  color: #da714a !important;
}

.admonition.caution {
  border-color: #f4d050;
}
.caution > .admonition-title {
  background-color: #f9f2d5 !important;
}
.caution > .admonition-title:before {
  color: #f4d050 !important;
}

.admonition.tip,
.admonition.hint {
  border-color: #519141;
}
.tip > .admonition-title,
.hint > .admonition-title {
  background-color: #d1dac5 !important;
}
.tip > .admonition-title:before,
.hint > .admonition-title:before {
  color: #519141 !important;
}

.custom-announcement {
  background: #e0d7f1;
  text-align: center;
  font-size: 1.1rem;
  padding: 0.1rem 0.1rem;
}

/* Footer attribution sits on the right side of the footer, replacing the framework version lines */
.bd-footer .footer-item p.attribution {
  margin: 0;
  font-size: 0.85em;
  color: var(--pst-color-text-muted, #6c757d);
  text-align: right;
}
.bd-footer .footer-item p.attribution a {
  color: inherit;
  text-decoration: underline;
}
.bd-footer .footer-item p.attribution a:hover {
  color: var(--navbar-bg);
}