/* Custom styles to override MkDocs defaults and enhance theme */

/*Overall colour theme*/
[data-md-color-scheme="clear"] {
  --md-primary-fg-color:#1e5c2e;  /*Header, sidebars... colour - red*/
}

[data-md-color-scheme="slate"] {
  --md-primary-fg-color: #1e5c2e;  /* Interactive elements colour - lightgrey*/
}

/*
Unordered list symbols:
    - ul default is filled disc (bullet)
    - level 2 is hollow circle
    - level 3 is filled square
*/

/*Level 2*/
article ul ul {
    list-style-type:  circle !important;
}

/*Level 3*/
article ul ul ul {
    list-style-type:  square !important;
}

/* terminal */
.md-typeset .admonition.terminal,
.md-typeset details.terminal {
  border-color: rgb(43, 155, 70);
}
.md-typeset .terminal > .admonition-title,
.md-typeset .terminal > summary {
  background-color: rgba(43, 155, 70, 0.1);
}
.md-typeset .terminal > .admonition-title::before,
.md-typeset .terminal > summary::before {
  background-color: rgb(43, 155, 70);
  -webkit-mask-image: var(--md-admonition-icon--terminal);
  mask-image: var(--md-admonition-icon--terminal);
}

/* learning */
.md-typeset .admonition.learning,
.md-typeset details.learning {
  border-color: #e20613;
}
.md-typeset .learning > .admonition-title,
.md-typeset .learning > summary {
  background-color: #ffdede;
}
.md-typeset .learning > .admonition-title::before,
.md-typeset .learning > summary::before {
  background-color: #e20613;
  -webkit-mask-image: var(--md-admonition-icon--learning);
  mask-image: var(--md-admonition-icon--learning);
}

/* people */
.md-typeset .admonition.people,
.md-typeset details.people {
  border-color: #6e59d9;
}
.md-typeset .people > .admonition-title,
.md-typeset .people > summary {
  background-color: #6e59d910;
}
.md-typeset .people > .admonition-title::before,
.md-typeset .people > summary::before {
  background-color: #6e59d9;
  -webkit-mask-image: var(--md-admonition-icon--people);
  mask-image: var(--md-admonition-icon--people);
}

/* licensing */
.md-typeset .admonition.licensing,
.md-typeset details.licensing {
  border-color: #802387;
}
.md-typeset .licensing > .admonition-title,
.md-typeset .licensing > summary {
  background-color: #80238710;
}
.md-typeset .licensing > .admonition-title::before,
.md-typeset .licensing > summary::before {
  background-color: #802387;
  -webkit-mask-image: var(--md-admonition-icon--licensing);
  mask-image: var(--md-admonition-icon--licensing);
}

/* courses */
.md-typeset .admonition.courses,
.md-typeset details.courses {
  border-color: rgb(142, 142, 142);
}
.md-typeset .courses > .admonition-title,
.md-typeset .courses > summary {
  background-color: rgba(153, 153, 153, 0.1);
  font-weight: bold;
}
.md-typeset .courses > .admonition-title::before,
.md-typeset .courses > summary::before {
  background-color: rgb(146, 146, 146);
  -webkit-mask-image: var(--md-admonition-icon--courses);
  mask-image: var(--md-admonition-icon--courses);
}

/* catalog */
.md-typeset .admonition.catalog,
.md-typeset details.catalog {
  border-color: #0DC09D;
}
.md-typeset .catalog > .admonition-title,
.md-typeset .catalog > summary {
  background-color: rgba(13, 192, 157, 0.1);
}
.md-typeset .catalog > .admonition-title::before,
.md-typeset .catalog > summary::before {
  background-color: #0DC09D;
  -webkit-mask-image: var(--md-admonition-icon--catalog);
  mask-image: var(--md-admonition-icon--catalog);
}

/* Thoa top nav: static replica of the main app's header (app/(protected)/components/header.tsx).
   Lives in the announce slot, full-bleed above Material's own header — which stays in
   place underneath purely for its search + docs-sidebar controls. Breakpoints (48em/64em)
   match Tailwind's md/lg, same as the real header, not Material's own breakpoint. */
.md-banner {
  background-color: #1e5c2e;
  padding: 0;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.22);
  /* Material defaults this to auto, which clips the Workbench dropdown menu
     since it pops out below the bar's own fixed height. */
  overflow: visible;
}
.md-banner .md-banner__inner {
  max-width: none;
  padding: 0;
  margin: 0;
}
/* NOTE: everything in this Thoa-replica section is sized in px, not rem.
   Material sets html{font-size:125%} (137.5%/150% on very wide viewports),
   so a rem value converted from a Tailwind class (which assumes a 16px root
   in the real app) would render 25%+ oversized here. px sidesteps that. */
.thoa-topnav {
  position: relative;
  display: flex;
  align-items: center;
  height: 64px;
  padding: 0 16px;
}
@media screen and (min-width: 48em) {
  .thoa-topnav {
    height: 86.4px;
    padding: 0 32px;
  }
}
.thoa-topnav__logo img {
  display: block;
  width: 36px;
  height: 36px;
}
@media screen and (min-width: 48em) {
  .thoa-topnav__logo img {
    width: 48px;
    height: 48px;
  }
}
.thoa-topnav__pill {
  display: none;
}
@media screen and (min-width: 64em) {
  .thoa-topnav__pill {
    display: block;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    color: #fff;
    font-size: 16px;
    font-weight: 800;
    padding: 4px 12px;
    border-radius: 9999px;
    border: 1px solid rgba(255, 255, 255, 0.4);
    text-decoration: none;
  }
  .thoa-topnav__pill:hover {
    border-color: #fff;
    background-color: rgba(255, 255, 255, 0.1);
  }
}
.thoa-topnav__pill:visited {
  color: #fff !important;
}
/* Desktop nav — real header's `nav.hidden.md:block`. Mobile has its own
   separate drawer markup below, same as the real component splits desktop
   nav vs. mobile drawer into two blocks instead of sharing one. */
.thoa-topnav__links {
  display: none;
  align-items: center;
  margin-left: 24px;
  gap: 28px;
}
@media screen and (min-width: 48em) {
  .thoa-topnav__links {
    display: flex;
  }
}
.thoa-topnav__links > a {
  color: rgba(255, 255, 255, 0.75);
  font-size: 16px;
  font-weight: 600;
  text-decoration: none;
}
.thoa-topnav__links > a:hover {
  color: #fff;
  text-decoration: underline;
}
.thoa-topnav__links > a:visited {
  color: rgba(255, 255, 255, 0.75) !important;
}
.thoa-topnav__links > a:visited:hover {
  color: #fff !important;
}

/* Workbench hover dropdown — real header only renders "Workbench" as a plain
   link while already inside /workbench; everywhere else (which is always the
   case here) it's this hover-dropdown button instead. */
.thoa-topnav__dropdown {
  position: relative;
}
.thoa-topnav__dropdown-trigger,
.thoa-topnav__dropdown-trigger:visited {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: rgba(255, 255, 255, 0.75) !important;
  font-size: 16px;
  font-weight: 600;
  text-decoration: none;
  transition: color 0.15s;
}
.thoa-topnav__dropdown-trigger:hover,
.thoa-topnav__dropdown-trigger:visited:hover {
  color: #fff !important;
  text-decoration: underline;
}
.thoa-topnav__dropdown-chevron {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}
.thoa-topnav__dropdown-menu {
  display: none;
  position: absolute;
  left: 0;
  top: 100%;
  padding-top: 8px;
  width: 192px;
  z-index: 50;
}
.thoa-topnav__dropdown:hover .thoa-topnav__dropdown-menu {
  display: block;
}
.thoa-topnav__dropdown-menu-inner {
  background-color: #164521;
  border: 1px solid #0f2e17;
  border-radius: 8px;
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.3), 0 4px 6px -4px rgba(0, 0, 0, 0.3);
  overflow: hidden;
}
.thoa-topnav__dropdown-menu a,
.thoa-topnav__dropdown-menu a:visited {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 16px;
  font-size: 14px;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.85) !important;
  text-decoration: none;
  transition: background-color 0.15s, color 0.15s;
}
.thoa-topnav__dropdown-menu a:hover,
.thoa-topnav__dropdown-menu a:visited:hover {
  background-color: rgba(255, 255, 255, 0.1);
  color: #fff !important;
}
.thoa-topnav__soon-badge {
  font-size: 10px;
  font-weight: 600;
  background-color: rgba(123, 202, 140, 0.2);
  color: #7bca8c;
  padding: 2px 6px;
  border-radius: 9999px;
}

/* Sign-in — real header opens a Clerk modal; here it's inert on purpose. */
.thoa-topnav__signin {
  display: none;
  margin-left: auto;
  color: #1e5c2e;
  background-color: #fff;
  font-size: 14px;
  font-weight: 600;
  padding: 6px 12px;
  border: none;
  border-radius: 8px;
  font-family: inherit;
  cursor: pointer;
}
@media screen and (min-width: 48em) {
  .thoa-topnav__signin {
    display: inline-block;
  }
}
.thoa-topnav__signin:hover {
  background-color: rgba(255, 255, 255, 0.9);
}
.thoa-topnav__toggle {
  display: block;
  margin-left: auto;
  background: none;
  border: 0;
  color: #fff;
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
}
@media screen and (min-width: 48em) {
  .thoa-topnav__toggle {
    display: none;
  }
}

/* Mobile drawer — separate block below the bar, same as the real header's
   `md:hidden` drawer that sits in normal flow under the nav row (pushing
   content down) rather than overlaying it. Brand Hover (#164521) + its
   border (#0f2e17), matching the real drawer's colors exactly. */
.thoa-topnav__mobile {
  display: none;
  background-color: #164521;
  border-top: 1px solid #0f2e17;
}
.thoa-topnav__mobile--open {
  display: block;
}
@media screen and (min-width: 48em) {
  .thoa-topnav__mobile {
    display: none !important;
  }
}
.thoa-topnav__mobile-nav {
  display: flex;
  flex-direction: column;
  padding: 4px 0;
}
.thoa-topnav__mobile-link,
.thoa-topnav__mobile-sublink {
  display: block;
  text-decoration: none;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  transition: color 0.15s;
}
.thoa-topnav__mobile-link,
.thoa-topnav__mobile-link:visited {
  padding: 12px 20px;
  font-size: 16px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.85) !important;
}
.thoa-topnav__mobile-link:hover,
.thoa-topnav__mobile-link:visited:hover {
  color: #fff !important;
}
.thoa-topnav__mobile-link--collab,
.thoa-topnav__mobile-link--collab:visited {
  color: #fff !important;
  font-weight: 800;
}
.thoa-topnav__mobile-sublink,
.thoa-topnav__mobile-sublink:visited {
  padding: 10px 32px;
  font-size: 14px;
  color: rgba(255, 255, 255, 0.65) !important;
}
.thoa-topnav__mobile-sublink:hover,
.thoa-topnav__mobile-sublink:visited:hover {
  color: #fff !important;
}
.thoa-topnav__mobile-signin-wrap {
  padding: 12px 20px;
}
.thoa-topnav__mobile-signin {
  display: block;
  width: 100%;
  padding: 8px 12px;
  color: #1e5c2e;
  background-color: #fff;
  font-size: 16px;
  font-weight: 600;
  border: none;
  border-radius: 8px;
  font-family: inherit;
  cursor: pointer;
}
.thoa-topnav__mobile-signin:hover {
  background-color: rgba(255, 255, 255, 0.9);
}

/* Material's own header stays for search + the docs sidebar toggle, but its
   logo/title would just duplicate the Thoa top nav above it. */
.md-header__button.md-logo,
.md-header__title {
  display: none;
}

/* Match the page's own background instead of standing out as a colored bar.
   Material assumes a dark/colored header, so its icon, search-icon, and
   placeholder colors default to white and need to flip to dark to stay
   legible against this now-light background. A hairline border keeps it
   from visually merging into the content below. */
.md-header {
  background-color: var(--md-default-bg-color);
  color: var(--md-default-fg-color);
  box-shadow: none;
  border-bottom: 1px solid var(--md-default-fg-color--lightest);
}
.md-header .md-search__input,
.md-header .md-search__input::placeholder {
  color: var(--md-default-fg-color);
}
.md-header .md-search__input::placeholder {
  opacity: 0.6;
}
.md-header .md-search__input + .md-search__icon {
  color: var(--md-default-fg-color--light);
}

/* The search box itself: Material's resting-state fill (26% black) assumes a
   colored header to sit on top of — on our white header that just reads as a
   flat gray blob. Swap it for a bordered pill in the brand's input style
   (stone-200 border, 0.5rem radius) with a green focus ring to match. */
.md-header .md-search__form {
  background-color: var(--md-default-bg-color);
  border: 1px solid #e7e5e4;
  border-radius: 0.5rem;
  box-shadow: none;
}
.md-header .md-search__form:hover {
  border-color: #d4e6d8;
}
[data-md-toggle="search"]:checked ~ .md-header .md-search__form {
  border-color: #1e5c2e;
  border-radius: 0.5rem 0.5rem 0 0;
  box-shadow: none;
}
.md-header .md-search__output {
  border: 1px solid #e7e5e4;
  border-top: none;
  border-radius: 0 0 0.5rem 0.5rem;
}

/* Custom right-hand-side sidebar */
.sidebar_resources {
  margin-top: 2rem;
}
.sidebar_resources svg {
  fill: currentcolor;
  max-height: 100%;
  width: 1.125em;
  margin-right: 0.5rem;
  opacity: 0.6;
}
.sidebar_resources .md-nav__link {
  justify-content: left;
}
@media screen and (min-width: 59.9375em) {
  .md-sidebar--secondary .md-sidebar__inner > nav > .md-nav__list {
    border-left: 3px solid var(--md-default-fg-color--lightest);
  }
}
@media screen and (max-width: 59.9375em) {
  .sidebar_resources {
    display: none !important;
  }
}