/*
  Theme Overrides
  ================
  These rules override the default MkDocs Material theme to match the
  Figma design for elements like the header, navigation, search, and buttons.
*/

:root {
  --strands-logo-green: #00cc5f;
  --strands-green-bright: #00FF77;
  --strands-green-hover: #00D965;
  --strands-green-active: #00B353;
  --strands-dark-text: #0E0E0E;
  --strands-light-text: white;
  --strands-dark-bg: #0E0E0E;
  --strands-light-bg: white;
  --strands-dark-border: #0E0E0E;
  --strands-light-border: #FFFFFF;

  /* Override MkDocs Variables */
  --md-primary-fg-color: var(--strands-dark-text);
  --md-primary-fg-color--light: var(--strands-dark-text);
  --md-accent-fg-color: var(--strands-green-bright);
  --md-default-fg-color--lightest: var(--strands-dark-text);
  --md-default-bg-color: var(--strands-dark-bg);
  --md-default-bg-color--light: var(--strands-light-bg);
  --md-accent-fg-color--transparent: hsla(0, 0%, 100%, 0); /* Not used for primary */
  --strands-gradient-primary: var(--strands-green-bright); /* Override marketing.css */
}

[data-md-color-scheme=default] {
  --md-typeset-a-color: var(--strands-logo-green);
}

[data-md-color-scheme="slate"] {
  --md-typeset-a-color: var(--strands-logo-green);
  --md-primary-fg-color: var(--strands-light-text);
  --md-primary-fg-color--light: var(--strands-dark-text);
  --md-default-fg-color--lightest: var(--strands-dark-text);
  --md-default-bg-color: var(--strands-dark-bg);
  --md-default-bg-color--light: var(--strands-light-bg);
}

.md-nav--primary .md-nav__title[for=__drawer]{
  background-color: var(--strands-light-bg);
  color: var(--strands-dark-text);
}


[data-md-color-scheme="slate"] .md-nav--primary .md-nav__title[for=__drawer]{
  background-color: var(--strands-dark-bg);
  color: var(--strands-light-text);
}


/* Hide the homepage sidebar on large screens.
   TODO: Why do we have two sets of nav tabs in the first place?
*/
@media (min-width: 1220px) {
  body:has(.strands-hero-wrap) .md-sidebar {
    display: none;
  }
}


/* Change the styling of left nav menu github banner */
@media screen and (max-width: 59.9844em) {
    .md-nav__source {
        background: inherit;
        color: inherit;
    }
}


/* General Header & Controls */
.strands-header-controls {
  display: flex !important;
  gap: 16px !important;
  align-items: center !important;
  margin-left: auto !important;
}

.strands-theme-toggle {
  order: unset;
}

/* Remove padding from theme toggle button */
.strands-theme-toggle .md-header__button {
  padding: 0 !important;
}

/* Version Dropdown */
.md-header__topic{
  position: unset;
}

.md-version {
  display: flex;
  align-items: center;
  position: relative;
}

.md-version__current {
  display: flex;
  align-items: center;
  gap: 8px;
  background-color: #F9F9F9;
  border: none;
  border-radius: 8px;
  padding: 12px 16px;
  cursor: pointer;
  transition: all 0.15s ease-in-out;
  font-family: Figtree;
  border: none;
  outline: none;
}

.md-version__current:hover {
  background-color: rgba(0, 255, 119, 0.1);
}

.md-version__current::content {
  font-family: Figtree !important;
  font-weight: 600 !important;
  font-size: 16px !important;
  line-height: 1.2 !important;
  color: #1F1F1F !important;
}

.md-version__current::after {
  display: flex;
  align-items: center;
  width: 20px;
  height: 20px;
  transition: transform 0.15s ease-in-out;
}

.md-version__current::after svg {
  width: 100%;
  height: 100%;
  stroke: #555555;
}

/* Dropdown Menu */
.md-version__list {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background-color: #FFFFFF;
  border: 1px solid #E0E0E0;
  border-radius: 8px;
  box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1);
  z-index: 5;
  margin-top: 4px;
  opacity: 0;
  transform: translateY(-8px);
  transition: opacity 0.15s ease-in-out, visibility 0.15s ease-in-out, transform 0.15s ease-in-out;
}

.md-version__item {
  padding: 12px 16px;
  cursor: pointer;
  transition: background-color 0.15s ease-in-out;
}


.md-version__item:hover {
  background-color: rgba(0, 255, 119, 0.1);
}

.md-version__item:active {
  background-color: rgba(0, 255, 119, 0.05);
}

.md-version__link {
  font-family: Figtree !important;
  font-weight: 600 !important;
  font-size: 16px !important;
  line-height: 1.2 !important;
  color: #1F1F1F !important;
}


.md-version__list:hover .strands-version-icon {
  transform: rotate(180deg);
}

/* Dark mode styles for version dropdown */
[data-md-color-scheme="slate"] .md-version__current {
  background-color: #1F1F1F;
}

[data-md-color-scheme="slate"] .md-version__current:hover {
  background-color: rgba(0, 255, 119, 0.05);
}

[data-md-color-scheme="slate"] .md-version__current::content {
  color: #E0E0E0 !important;
}

[data-md-color-scheme="slate"] .md-version__current::after svg {
  stroke: #777777;
}

[data-md-color-scheme="slate"] .md-version__list {
  background-color: #1F1F1F;
  border-color: #333333;
}

[data-md-color-scheme="slate"] .md-version__item:hover {
  background-color: rgba(0, 255, 119, 0.05);
}

[data-md-color-scheme="slate"] .md-version__item:active {
  background-color: rgba(0, 255, 119, 0.02);
}

[data-md-color-scheme="slate"] .md-version__link {
  color: #E0E0E0 !important;
}

.strands-header {
  display: flex !important;
  flex-direction: column !important;
  gap: 16px !important;
  background-color: var(--strands-light-bg) !important;
  border-bottom: 0 !important;
  position: relative !important;
  z-index: 5 !important;
  width: 100% !important;
  max-width: 100% !important;
  padding: 0 min(20px, 2vw) !important;
}

.strands-tabs {
  gap: 16px !important;
  background-color: var(--strands-light-bg) !important;
  position: relative !important;
  width: 100% !important;
  max-width: 100% !important;
  padding: 0 0 0 16px;
}


.strands-header-top-wrap {
  display: flex !important;
  width: 100% !important;
  max-width: 1440px !important;
  align-items: center !important;
  margin: 0 auto !important;
}

.strands-header-top-wrap * {
  color: #1F1F1F;
  font-family: Figtree, sans-serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 150%;
  letter-spacing: 0;
}

.strands-tabs__link{
  margin: 0;
  font-size: 16px;
  font-weight: 600;
}

.md-header {
  z-index: 5;
}


.md-header__source {
  margin-left: 0 !important;
}

.md-source__fact:before{
  margin-top: 3px;
}

.strands-nav-tabs {
  width: 100%;
  max-width: 1440px;
  display: flex;
  gap: 4px;
  align-items: center;
  margin: 0 auto;
}


.strands-nav-tabs:before {
  content: none;
}

/* Link Button Base Styles */
.strands-nav-item {
  font-family: Figtree, sans-serif !important;
  font-weight: 600 !important;
  font-size: 16px !important;
  line-height: 1.2 !important;
  letter-spacing: 0 !important;
  color: #555555 !important;
  background-color: transparent !important;
  border-radius: 0 !important;
  text-decoration: none !important;
  display: inline-flex !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 4px !important;
  transition: background-color 0.15s ease-in-out, color 0.15s ease-in-out !important;
  border: none !important;
  box-shadow: none !important;
}

/* Link Button Hover State */
.strands-nav-item:hover {
  background-color: rgba(0, 255, 119, 0.1) !important;
  color: #0E0E0E !important;
  border-radius: 8px !important;
}

/* Link Button Selected/Active State */
.strands-nav-tab--active,
.strands-nav-item:active {
  color: #0E0E0E !important;
  background-color: transparent !important;
  border-radius: 0 !important;
}

/* Link Button Focused State */
.strands-nav-item:focus {
  background-color: rgba(0, 255, 119, 0.1) !important;
  color: #0E0E0E !important;
  border-radius: 8px !important;
  outline: none !important;
}

.strands-nav-tab--active::after {
  content: none !important;
}

/* Navigation item with icon (Contribute) */
.strands-nav-item-with-icon {
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
}

.strands-nav-icon {
  display: inline-flex;
  padding: 0 0 0 4px;
}

.strands-nav-icon svg {
  width: 100%;
  height: 100%;
  fill: none;
  stroke: #555555;
  margin: 0 !important;
}

.strands-nav-item-with-icon:hover .strands-nav-icon svg {
  stroke: #0E0E0E !important;
}

/* Button Overrides */
/* Base button styles */
.md-button {
  border-radius: 8px !important;
  font-family: Figtree, sans-serif !important;
  font-weight: 600 !important;
  font-size: 16px !important;
  line-height: 1.2 !important;
  padding: 12px 16px !important;
  border-width: 2px !important;
  border-style: solid !important;
  transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out !important;
  text-decoration: none !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
}

/* Primary Button */
.md-button--primary {
  background-color: var(--strands-green-bright) !important;
  color: var(--strands-dark-text) !important;
  border-color: transparent !important;
}

.md-button--primary:hover,
.md-button--primary:focus {
  background: linear-gradient(rgba(0, 0, 0, 0.15), rgba(0, 0, 0, 0.15)), var(--strands-green-bright) !important;
  border-color: var(--strands-dark-border) !important;
  color: var(--strands-dark-text) !important;
}

.md-button--primary:active {
  background: linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3)), var(--strands-green-bright) !important;
  border-color: transparent !important;
  color: var(--strands-dark-text) !important;
}

.md-button--primary .md-icon svg {
  fill: var(--strands-dark-text) !important;
  stroke: var(--strands-dark-text) !important;
}

.md-button--primary:hover .md-icon svg,
.md-button--primary:focus .md-icon svg,
.md-button--primary:active .md-icon svg {
  fill: var(--strands-dark-text) !important;
  stroke: var(--strands-dark-text) !important;
}

/* Secondary Button */
.md-button--secondary {
  background-color: transparent !important;
  color: #555555 !important;
  border-color: var(--strands-dark-border) !important;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.1) !important;
}

.md-button--secondary:hover,
.md-button--secondary:focus {
  background-color: transparent !important;
  color: var(--strands-dark-text) !important;
  border-color: var(--strands-dark-border) !important;
}

.md-button--secondary:active {
  background-color: #E0E0E0 !important;
  color: var(--strands-dark-text) !important;
  border-color: var(--strands-dark-border) !important;
}

.md-button--secondary .md-icon svg {
  fill: #555555 !important;
  stroke: #555555 !important;
}

.md-button--secondary:hover .md-icon svg,
.md-button--secondary:focus .md-icon svg {
  fill: var(--strands-dark-text) !important;
  stroke: var(--strands-dark-text) !important;
}

.md-button--secondary:active .md-icon svg {
  fill: var(--strands-dark-text) !important;
  stroke: var(--strands-dark-text) !important;
}

/* Tertiary Button */
.md-button--tertiary {
  background-color: transparent !important;
  color: #555555 !important;
  border-color: transparent !important;
  padding: 12px !important;
}

.md-button--tertiary:hover,
.md-button--tertiary:focus {
  background-color: rgba(0, 255, 119, 0.05) !important;
  color: var(--strands-dark-text) !important;
  border-color: var(--strands-dark-border) !important;
}

.md-button--tertiary:active {
  background-color: rgba(0, 255, 119, 0.1) !important;
  color: var(--strands-dark-text) !important;
  border-color: transparent !important;
}

.md-button--tertiary .md-icon svg {
  fill: #555555 !important;
  stroke: #555555 !important;
}

.md-button--tertiary:hover .md-icon svg,
.md-button--tertiary:focus .md-icon svg {
  fill: var(--strands-dark-text) !important;
  stroke: var(--strands-dark-text) !important;
}

.md-button--tertiary:active .md-icon svg {
  fill: var(--strands-dark-text) !important;
  stroke: var(--strands-dark-text) !important;
}

/* Dark Mode Overrides */
[data-md-color-scheme="slate"] .strands-header {
  background-color: var(--strands-dark-bg) !important;
}

[data-md-color-scheme="slate"] .strands-header-top-wrap *:not(mark) {
    color: var(--strands-light-text);
}

/* Dark Mode Overrides */
[data-md-color-scheme="slate"] .strands-tabs {
  background-color: var(--strands-dark-bg) !important;
}


[data-md-color-scheme="slate"] .strands-nav-item {
  color: #777777 !important;
}

[data-md-color-scheme="slate"] .strands-nav-item:hover {
  background-color: rgba(0, 255, 119, 0.05) !important;
  color: #FFFFFF !important;
  border-radius: 8px !important;
}

[data-md-color-scheme="slate"] .strands-nav-tab--active,
[data-md-color-scheme="slate"] .strands-nav-item:active {
  color: #FFFFFF !important;
  background-color: transparent !important;
  border-radius: 0 !important;
}

[data-md-color-scheme="slate"] .strands-nav-item:focus {
  background-color: rgba(0, 255, 119, 0.05) !important;
  color: #FFFFFF !important;
  border-radius: 8px !important;
}

[data-md-color-scheme="slate"] .strands-nav-icon svg {
  fill: none !important;
  stroke: #777777 !important;
}

[data-md-color-scheme="slate"] .strands-nav-item-with-icon:hover .strands-nav-icon svg {
  stroke: #FFFFFF !important;
}

[data-md-color-scheme="slate"] .md-button--primary {
  background-color: var(--strands-green-bright) !important;
  color: var(--strands-dark-text) !important;
}

[data-md-color-scheme="slate"] .md-button--primary:hover,
[data-md-color-scheme="slate"] .md-button--primary:focus {
  background: linear-gradient(rgba(0, 0, 0, 0.15), rgba(0, 0, 0, 0.15)), var(--strands-green-bright) !important;
  border-color: var(--strands-light-border) !important;
  color: var(--strands-dark-text) !important;
}

[data-md-color-scheme="slate"] .md-button--primary:active {
  background: linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3)), var(--strands-green-bright) !important;
  border-color: transparent !important;
  color: var(--strands-dark-text) !important;
}

[data-md-color-scheme="slate"] .md-button--primary .md-icon svg,
[data-md-color-scheme="slate"] .md-button--primary:hover .md-icon svg,
[data-md-color-scheme="slate"] .md-button--primary:focus .md-icon svg,
[data-md-color-scheme="slate"] .md-button--primary:active .md-icon svg {
  fill: var(--strands-dark-text) !important;
  stroke: var(--strands-dark-text) !important;
}

/* Dark Mode Secondary Button */
[data-md-color-scheme="slate"] .md-button--secondary {
  background-color: transparent !important;
  color: #777777 !important;
  border-color: #1F1F1F !important;
}

[data-md-color-scheme="slate"] .md-button--secondary:hover,
[data-md-color-scheme="slate"] .md-button--secondary:focus {
  background-color: transparent !important;
  color: var(--strands-green-bright) !important;
  border-color: #1F1F1F !important;
}

[data-md-color-scheme="slate"] .md-button--secondary:active {
  background-color: #1A1A1A !important;
  color: var(--strands-green-bright) !important;
  border-color: #1F1F1F !important;
}

[data-md-color-scheme="slate"] .md-button--secondary .md-icon svg {
  fill: #777777 !important;
  stroke: #777777 !important;
}

[data-md-color-scheme="slate"] .md-button--secondary:hover .md-icon svg,
[data-md-color-scheme="slate"] .md-button--secondary:focus .md-icon svg,
[data-md-color-scheme="slate"] .md-button--secondary:active .md-icon svg {
  fill: var(--strands-green-bright) !important;
  stroke: var(--strands-green-bright) !important;
}

/* Dark Mode Tertiary Button */
[data-md-color-scheme="slate"] .md-button--tertiary {
  background-color: transparent !important;
  color: #777777 !important;
  border-color: transparent !important;
}

[data-md-color-scheme="slate"] .md-button--tertiary:hover,
[data-md-color-scheme="slate"] .md-button--tertiary:focus {
  background-color: rgba(0, 255, 119, 0.05) !important;
  color: var(--strands-green-bright) !important;
  border-color: var(--strands-light-border) !important;
}

[data-md-color-scheme="slate"] .md-button--tertiary:active {
  background-color: rgba(0, 255, 119, 0.1) !important;
  color: var(--strands-green-bright) !important;
  border-color: transparent !important;
}

[data-md-color-scheme="slate"] .md-button--tertiary .md-icon svg {
  fill: #777777 !important;
  stroke: #777777 !important;
}

[data-md-color-scheme="slate"] .md-button--tertiary:hover .md-icon svg,
[data-md-color-scheme="slate"] .md-button--tertiary:focus .md-icon svg,
[data-md-color-scheme="slate"] .md-button--tertiary:active .md-icon svg {
  fill: var(--strands-green-bright) !important;
  stroke: var(--strands-green-bright) !important;
}

/* Specific fix for Get Started button arrow icon */
.strands-splash-welcome-content-cta .md-button--primary .md-icon svg {
  fill: none !important;
  stroke: var(--strands-dark-text) !important;
}

.strands-splash-welcome-content-cta .md-button--primary:hover .md-icon svg,
.strands-splash-welcome-content-cta .md-button--primary:focus .md-icon svg,
.strands-splash-welcome-content-cta .md-button--primary:active .md-icon svg {
  fill: none !important;
  stroke: var(--strands-dark-text) !important;
}

/* Dark mode version of the Get Started button arrow */
[data-md-color-scheme="slate"] .strands-splash-welcome-content-cta .md-button--primary .md-icon svg,
[data-md-color-scheme="slate"] .strands-splash-welcome-content-cta .md-button--primary:hover .md-icon svg,
[data-md-color-scheme="slate"] .strands-splash-welcome-content-cta .md-button--primary:focus .md-icon svg,
[data-md-color-scheme="slate"] .strands-splash-welcome-content-cta .md-button--primary:active .md-icon svg {
  fill: none !important;
  stroke: var(--strands-dark-text) !important;
}

/* Logo Theme Switching */
.strands-logo--dark {
  display: none !important;
}
.strands-logo--light {
  display: block !important;
}
[data-md-color-scheme="slate"] .strands-logo--dark {
  display: block !important;
}
[data-md-color-scheme="slate"] .strands-logo--light {
  display: none !important;
}

/* Logo SVG Styling */
.strands-logo svg {
  display: block !important;
  width: auto !important;
  height: 59px !important;
  fill: none !important;
}

/* Responsive logo sizing */
@media (max-width: 1024px) {
  .strands-header {
    padding-top: 0 !important;
  }

  .strands-logo svg {
    height: 48px !important;
  }
}

@media (max-width: 768px) {
  .strands-header {
    padding-top: 0 !important;
  }

  .strands-logo svg {
    height: 35px !important;
  }
}

.strands-logo-container {
  display: flex !important;
  align-items: center !important;
}

[data-md-color-scheme="slate"] .strands-feature:not(:hover) * {
    color: var(--strands-light-text) !important;
    stroke: var(--strands-light-text) !important;
}

[data-md-color-scheme="slate"] .strands-feature + .strands-feature {
    border-left: 1.5px solid #EFEFEF40;
}

/* Search Form Styles - Based on Figma Design */
.md-search__form {
  background-color: #E0E0E0 !important;
  border-radius: 8px !important;
  border: none !important;
  box-shadow: none !important;
}

.md-search__input {
  background-color: transparent !important;
  border: none !important;
  outline: none !important;
  font-family: Figtree !important;
  font-weight: 400 !important;
  font-size: 16px !important;
  line-height: 1.5em !important;
  color: #555555 !important;
}

.md-search__input::placeholder {
  color: #555555 !important;
  font-family: Figtree !important;
  font-weight: 400 !important;
  font-size: 16px !important;
  line-height: 1.5em !important;
}

/* Remove bottom border-radius when search input is focused */
.md-search__input:focus-visible {
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
}

.md-search__form:has(.md-search__input:focus-visible) {
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
}

/* Dark mode search form styles */
[data-md-color-scheme="slate"] .md-search__form {
  background-color: #1A1A1A !important;
}

[data-md-color-scheme="slate"] .md-search__input {
  color: #777777 !important;
}

[data-md-color-scheme="slate"] .md-search__input::placeholder {
  color: #777777 !important;
}

/* Header Source Widget Icon Styling */
.md-header__source svg {
  fill: #555555;
}

[data-md-color-scheme="slate"] .md-header__source svg {
  fill: #777777;
}

.md-footer {
  z-index: 5 !important;
  background-color: var(--strands-dark-bg);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 1.5);
}

.md-consent {
  z-index: 1000;
}