:root {
  --font-sans: 							"sw", -apple-system, sans-serif;
  --font-sans-italic: 			"sw-i", -apple-system, sans-serif;
}

@font-face {
  font-family: "sw";
  src: url("/assets/fonts/sw.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
  font-style: normal;
}

@font-face {
  font-family: "sw-i";
  src: url("/assets/fonts/sw-i.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
  font-style: italic;
}

.request-url .post { color: var(--green); }
.request-url .put { color: var(--purple); }
.request-url .delete { color: var(--pink); }
.request-url .get { color: var(--blue); }



.request-url, .response .title {
  margin: 0;
  padding: var(--space);
  font-family: var(--font-mono);
  font-size: var(--font-size-sm);
  letter-spacing: -0.025rem !important;
}

.request-url {
  border-radius: var(--border-rad);
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
  background: var(--gray-11);
  color: var(--gray-0);
}

.response .title {
  margin-top: var(--space-xl);
  border-radius: var(--border-rad);
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
  background: var(--gray-11);
  color: var(--gray-0);
}

code.torchlight {
  background: var(--gray-9) !important;
}

:where(.response, .request-code) code { background: var(--gray-0) !important; }

/* Shiki (Astro Code component) global styles */
pre.astro-code {
  padding: var(--space-xl);
  border-radius: var(--border-rad);
  font-size: var(--font-size-sm);
  letter-spacing: -0.025rem;
  overflow-x: auto;
}

/* Shiki overrides for API snippets (tighter fit under request-url/title bars) */
:where(.response, .request-code) pre.astro-code {
  margin: 0;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}

:where(.response, .request-code) pre.astro-code code {
  background: transparent !important;
}

@media (prefers-color-scheme: dark) {
  .request-url {
    background: var(--gray-3);
    color: var(--gray-11);
  }

  :where(.response, .request-code) code { background: var(--gray-2) !important; }
  :where(.response, .request-code) pre.astro-code { background-color: var(--gray-2) !important; }
  :where(.response, .request-code) pre.astro-code code { background: transparent !important; }

  .response .title {
    background: var(--gray-3);
    color: var(--gray-11);
  }

  code.torchlight {
    background: var(--gray-0) !important;
  }
}

.response pre, .request-code, .request-url pre, .request-code pre, .response pre.astro-code {
    margin: 0;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
}

.homepage-graphic-wrapper {
  position: relative;
  width: 100%;
  padding-top: 71.7%; /* Height / Width * 100% */
}

.homepage-graphic-wrapper picture {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover; /* Adjust as needed, could also be contain, depending on your needs */
}

.logo-wrapper {
  width: 100px;
}

.logo-wrapper picture {
  display: block;
  width: 100%;
}

.logo-wrapper img {
  display: block;
  width: 100%;
  height: auto;
}

[x-cloak] { display: none !important; }



.dropdown, .dropup {
    position: relative;
    display: inline-block;
    outline: none;
}

a.dropdown-link:active, a.dropup-link:active, a.dropdown-link:focus, a.dropup-link:focus {
    outline: 0;
    border: none;
    -moz-outline-style: none;
}

.dropdown.block, .dropup.block {
    width: 100%;
}

.dropdown-scroll {
    max-height: 16rem;
    overflow-x: auto;
    margin: 0 !important;
}

.dropdown-menu.show {
    display: block;
}

.dropdown-menu {
    position: absolute;
    z-index: 1080;
    display: none;
    min-width: 12rem;
    max-width: 16rem;
    margin: 0;
    text-align: left;
    background-color: var(--gray-0);
    background-clip: padding-box;
    padding: var(--space-sm);
    border: var(--border-sm) solid var(--gray-3);
    border-radius: var(--border-rad);
    filter: var(--drop);
}

b-grid .dropdown-menu {
    z-index: 3;
}

.dropdown-menu.dropdown-sm {
    min-width: 8rem;
}

@media screen and (min-width: 32rem) {
    .dropdown-menu.dropdown-lg {
        min-width: 32rem;
    }

    .dropdown-menu.dropdown-md {
        min-width: 28rem;
    }
}

@media (prefers-color-scheme: dark) {
    .dropdown-menu {
        border: var(--border-sm) solid var(--gray-3);
    }
} /* dark */

.dropdown-menu[data-bs-popper] {
    top: 100%; left: 0;
    margin-top: var(--space-xs);
}

.dropdown-menu-start[data-bs-popper] {
    right: auto; left: 0;
}

.dropdown-menu-start {
    --bs-position: start;
}

.dropdown-menu-end {
    --bs-position: end;
}

.dropdown-menu-end[data-bs-popper] {
    right: 0; left: auto;
}

.dropup .dropdown-menu[data-bs-popper] {
    top: auto;
    bottom: 100%;
    margin-top: 0;
    margin-bottom: var(--space-sm);
}

.dropdown-item-text {
    display: block;
    width: 100%;
    padding: var(--space-lg);
    border-radius: var(--border-rad-sm);
}

.dropdown li, .dropup li {
    padding-left: 0 !important;
}

.dropdown li:not(:last-child) {
    margin-bottom: var(--space-sm);
}

.dropdown li a:focus, .dropup li a:focus {
    box-shadow: inset 0 0 0 var(--border) var(--purple-3);
}

.dropdown li a:focus-visible, .dropup li a:focus-visible {
    outline: none;
}


.dropdown-item, .dropdown-item-header {
    display: block;
    padding: var(--space) var(--space-md);
    border-radius: var(--border-rad-sm);
    clear: both;
    text-align: inherit;
    text-decoration: none;
    background-color: transparent;
    color: var(--gray-6);
    font-size: var(--font-size-sm);
    transition: color var(--time), background var(--time);
}

.dropdown-menu.dropdown-sm .dropdown-item {
    padding: var(--space-sm) var(--space);
    font-size: var(--font-size-xs);
}

.dropdown-menu.dropdown-md .dropdown-item {
    padding: var(--space) var(--space-lg);

}

.dropdown-sm .dropdown-item, .dropdown-sm .dropdown-item-header {
    padding: var(--space-sm) var(--space);
}

.dropdown-item label {
    font-size: var(--font-size-sm);
}

.dropdown-item-header {
    background-color: transparent;
    color: var(--purple);
}

.team-header {
    color: var(--purple-8);
    font-weight: var(--font-weight-bold);
    padding: var(--space-sm) var(--space);
}

.dropdown-item.active {
    background: var(--purple) !important;
    color: var(--gray-0) !important;
}

.dropdown-item span {
  display: block;
  font-weight: var(--font-weight-h);
  color: var(--gray-10);
  font-size: var(--font-size) !important;
}

.dropdown-item.disabled {
    color: var(--gray-3) !important;
}

.dropdown-item:hover:not(.disabled, .active), .dropdown-item-child:hover {
    background: var(--gray-2);
    color: var(--gray-10);
}

.dropdown-divider {
    display: block;
    height: var(--border);
    margin: var(--space-sm) 0;
    background: var(--gray-3);
}

.team-divider {
    display: block;
    height: var(--border);
    margin: var(--space);
    background: var(--gray-3);
}

.dropdown-scroll {
    max-height: 16rem;
    overflow-x: auto;
    margin: 0 !important;
}

.dropdown-menu input {
    padding: var(--space) var(--space-lg) var(--space-md) var(--space-lg);
    width: 100%;
}

.dropdown-form .dropdown-scroll {
    padding: var(--space-sm);
}

.dropdown-menu .floating-form {
    margin: 0;
    border-bottom: var(--border) solid var(--gray-3);
}


/* ===========================================
   Morphing Nav (Vercel/Linear-style dropdowns)
   =========================================== */

.site header nav,
.site header nav a {
    margin-bottom: 0;
}

.morph-nav {
    position: relative;
    display: inline-flex;
    align-items: center;
}

.morph-nav-items {
    display: flex;
    align-items: center;
    gap: var(--space-xl);
}

.morph-nav-link,
.morph-nav-trigger {
    appearance: none;
    background: none;
    border: none;
    margin: 0;
    padding: var(--space) 0;
    font-family: inherit;
    font-size: var(--font-size-alt);
    color: var(--gray-7);
    font-weight: var(--font-weight);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    transition: color var(--time);
    line-height: var(--leading-sm);
    cursor: pointer;
    white-space: nowrap;
}

.morph-nav-link:hover,
.morph-nav-trigger:hover,
.morph-nav-trigger.is-active {
    color: var(--gray-11);
}

.morph-nav-trigger svg {
    width: 10px;
    height: 6px;
    transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
    opacity: 0.5;
}

.morph-nav-trigger.is-active svg {
    transform: rotate(180deg);
    opacity: 0.8;
}

/* Dropdown container */
.morph-nav-dropdown {
    position: absolute;
    top: calc(100% + 10px);
    left: 0;
    z-index: 1080;
    background: var(--gray-0);
    border: var(--border-sm) solid var(--gray-3);
    border-radius: var(--border-rad);
    box-shadow: 0 8px 30px hsla(0, 0%, 0%, 0.08), 0 1px 4px hsla(0, 0%, 0%, 0.03);
    opacity: 0;
    transform: translateY(8px);
    pointer-events: none;
    overflow: visible;
    text-align: left;
    transition: opacity 0.15s ease, transform 0.2s cubic-bezier(0.16, 1, 0.3, 1);
    will-change: opacity, transform;
}

.morph-nav-dropdown.is-open {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

.morph-nav-dropdown.can-morph {
    transition: opacity 0.15s ease, transform 0.2s cubic-bezier(0.16, 1, 0.3, 1),
                left 0.25s cubic-bezier(0.16, 1, 0.3, 1),
                width 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Viewport clips content and transitions height */
.morph-nav-viewport {
    position: relative;
    overflow: hidden;
    transition: height 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Panels */
.morph-nav-panel {
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
    pointer-events: none;
    transform: translateX(0);
    transition: opacity 0.15s ease, transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.morph-nav-panel.is-active {
    position: relative;
    opacity: 1;
    pointer-events: auto;
    transform: translateX(0);
}

.morph-nav-panel.slide-left {
    opacity: 0;
    transform: translateX(-20px);
}

.morph-nav-panel.slide-right {
    opacity: 0;
    transform: translateX(20px);
}

/* Why Fathom panel */
.morph-nav-panel[data-panel="why"] {
    width: 22rem;
    padding: var(--space-sm);
}

/* Resources panel */
.morph-nav-panel[data-panel="resources"] {
    width: 14rem;
    padding: var(--space-sm);
}

/* Card items (Why Fathom panel) */
.morph-nav-card {
    display: block;
    padding: var(--space) var(--space-md);
    border-radius: var(--border-rad-sm);
    text-decoration: none !important;
    transition: background var(--time);
}

.morph-nav-card:hover {
    background: var(--gray-2);
}

.morph-nav-card-title {
    display: block;
    font-weight: var(--font-weight-h);
    color: var(--gray-10);
    font-size: var(--font-size-sm);
    margin-bottom: 2px;
}

.morph-nav-card-desc {
    display: block;
    color: var(--gray-6);
    font-size: var(--font-size-xs);
    line-height: var(--leading-sm);
}

/* Simple list items (Resources panel) */
.morph-nav-item {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: var(--space) var(--space-md);
    border-radius: var(--border-rad-sm);
    text-decoration: none !important;
    color: var(--gray-7);
    font-size: var(--font-size-sm);
    transition: background var(--time), color var(--time);
    white-space: nowrap;
}

.morph-nav-item:hover {
    background: var(--gray-2);
    color: var(--gray-10);
}

.morph-nav-item svg {
    opacity: 0.35;
    flex-shrink: 0;
}

@media (prefers-color-scheme: dark) {
    .morph-nav-dropdown {
        box-shadow: 0 8px 30px hsla(0, 0%, 0%, 0.3), 0 1px 4px hsla(0, 0%, 0%, 0.15);
    }
}