@import url("https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;600;700;800;900&display=swap");
@import url("https://fonts.cdnfonts.com/css/bebas-neue?display=swap");

:root {
  /* ── Page background scene ── */
  --bg-scene-color: #1d1d1b;
  --bg-planet-op: 0.07;
  --bg-graph-op:  0.11;
  --bg-snippet-op: 0.09;

  --ifm-color-orange-jupyter: #f37726;
  --ifm-color-blue-jupyter: #0052cc;
  --ifm-color-green-xtensor: #4ecb71;
  --ifm-color-grey-condaforge: #7a7865;
  --ifm-color-orange-light: #fef9ec;
  --ifm-color-indigo-i1: rgb(79, 82, 255);
  --ifm-color-primary-p0: #fffbd7;
  --ifm-color-primary-p1: #f6f195;
  --ifm-color-primary-p2: #1c1c16;
  --ifm-text-color-on-primary-p1: #1e1c00;

  --ifm-color-secondary-s1: #a0c9ff;
  --ifm-color-secondary-s2: #0A0E2E;
  --ifm-color-secondary-s3: #00497F;


  --ifm-color-neutral-n1: #605e58;
  --ifm-color-neutral-n2: #371300;
  --ifm-color-neutral-n3: #c8c8c7;

  --ifm-color-accent-yellow: #F5E53B;
  --ifm-color-accent-red: #E8462A;

  --ifm-shadow-card: 0px 2px 12px rgba(160, 140, 40, 0.15);
  --ifm-shadow-dialog: 0 8px 16px rgba(0, 0, 0, 0.2);
  --ifm-overlay-background: rgba(0, 0, 0, 0.3);

  --ifm-text-color: var(--ifm-color-primary-p2);
  --ifm-background-color: var(--ifm-bg-neutral);

  /* Semantic background roles */
  --ifm-bg-neutral: #ffffff;                         /* default reading surface */
  --ifm-bg-brand: #ffffff;                           /* yellow dropped — white throughout */
  --ifm-bg-emphasis: var(--ifm-color-secondary-s2);  /* CTA / strong contrast — navy */
  --ifm-bg-light-blue: #edf2fb;                      /* subtle blue tint — section alternation */
  --ifm-bg-light-grey: #f5f5f3;                      /* neutral grey — section alternation */


  /* footer */
  --ifm-background-color-footer: #f5f5f3;
  --ifm-text-color-footer: black;

  /*popup overlay*/
  --ifm-background-color-popup-overlay: gray;

  /* Font sizes */
  --ifm-font-size-small: 14px;
  --ifm-font-size-normal: 18px;
  --ifm-font-size-medium: 24px;
  --ifm-font-size-main-title: 48px;
  --ifm-font-size-secondary-title: 32px;

  /*Font families */
  --ifm-font-family-roboto: "Roboto";
  --ifm-font-family-display: "Bebas Neue";

  /* Spacing for margins and paddings */
  --ifm-spacing-none: 0px;
  --ifm-spacing-2xs: 4px;
  --ifm-spacing-xs: 8px;
  --ifm-spacing-sm: 12px;
  --ifm-spacing-md: 16px;
  --ifm-spacing-lg: 24px;
  --ifm-spacing-xl: 32px;
  --ifm-spacing-2xl: 56px;
  --ifm-spacing-3xl: 64px;
  --ifm-spacing-4xl: 96px;
  --ifm-spacing-5xl: 120px;
  --ifm-spacing-6xl: 144px;
  --ifm-spacing-7xl: 240px;
  --ifm-spacing-8xl: 400px;

  --ifm-navbar-item-padding-horizontal: 2px;

  --ifm-content-width: 1200px;
}

.flex-full-centered {
  display: flex;
  align-items: center;
  justify-content: center;
}

.flex-horizontally-centered {
  display: flex;
  justify-content: center;
}

.horizontally-centered {
  justify-content: center;
}

.margin-none {
  margin: 0;
}

.padding-none {
  padding: 0;
}

ul {
  padding-left: 0;
  margin-left: 0;
}

.container {
  max-width: none;
  padding: 0;
}

/***footer*****/
.footer__item {
  color: var(--ifm-text-color-footer);
}

.footer__copyright {
  color: var(--ifm-text-color-footer);
}

.footer {
  background-color: var(--ifm-background-color-footer);
  color: var(--ifm-text-color-footer);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  max-width: none;
  padding: var(--ifm-spacing-xl) var(--ifm-spacing-2xl);
}

.footer__col {
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: 0;
  height: 240px;
}

.row.footer__links {
  display: flex;
  justify-content: center;
  margin: 0;
  padding: 0;
  color: var(--ifm-text-color-footer);
}

.footer__title {
  color: var(--ifm-text-color-footer);
}

.footer__bottom {
  margin-top: var(--ifm-spacing-xl);
}

.footer__link-item {
  color: var(--ifm-text-color-footer);
}

@media (min-width: 1440px) {
  .container {
    max-width: none;
  }
}

/******  Class that are specific for smaller screens*/
@media (max-width: 996px) {
  h1 {
    color: var(--ifm-text-color-main-title);
    font-family: var(--ifm-font-family-display);
    font-size: 44px;
    font-style: normal;
    font-weight: 900;
    line-height: 110%;
    letter-spacing: 0;
    text-align: center;
    padding: 0;
  }

  h2 {
    font-family: var(--ifm-font-family-display);
    font-size: 36px;
    font-style: normal;
    font-weight: 800;
    line-height: 115%;
    letter-spacing: 0;
    text-align: center;
  }

  p {
    font-family: var(--ifm-font-family-roboto);
    font-size: 14px;
    font-style: normal;
    line-height: 150%;
    line-height: 20px;
    letter-spacing: 0.25px;
    padding: 0 var(--ifm-spacing-lg);
  }

  li {
    font-size: 14px;
    margin-left: 24px;
  }

  .link-to-button {
    margin-top: var(--ifm-spacing-lg);
    margin-bottom: var(--ifm-spacing-lg);
  }
}

/* Tablet range: overrides phone sizes for wider mobile viewports. */
@media (max-width: 996px) and (min-width: 600px) {
  body h1 {
    font-size: 56px;
  }

  body h2 {
    font-size: 42px;
  }

  body p {
    font-size: 16px;
    line-height: 24px;
  }
}

/******  Class that are specific to larger screens*/
@media (min-width: 996px) {
  h1 {
    color: var(--ifm-color-primary-p2);
    font-family: var(--ifm-font-family-display);
    font-size: 64px;
    font-style: normal;
    font-weight: 900;
    line-height: 110%;
    letter-spacing: 0;
    text-align: start;
    padding: 0;
    margin: var(--ifm-spacing-md) 0;
  }

  h2 {
    font-family: var(--ifm-font-family-display);
    font-size: 40px;
    font-style: normal;
    font-weight: 800;
    line-height: 115%;
    letter-spacing: 0;
    text-align: start;
  }

  p {
    font-family: var(--ifm-font-family-roboto);
    font-size: var(--ifm-font-size-normal);
    font-style: normal;
    letter-spacing: 0.25px;
    text-align: left;
  }

  .link-to-button {
    margin-top: var(--ifm-spacing-2xl);
    margin-bottom: var(--ifm-spacing-2xl);
  }
}

/***********************************************************/

/* Headings inside dark sections need explicit white */
[class*="section_dark"] h1,
[class*="section_dark"] h2,
[class*="section_dark"] h3 {
  color: white;
}

/* Single-word red accent inside headings for energy */
.highlight {
  color: var(--ifm-color-orange-jupyter);
}

/* Punchy blue tagline used in page header sections */
.page-tagline {
  color: var(--ifm-color-blue-jupyter);
  font-weight: 700;
  padding: 0;
}

/* BD-style red accent bar below section headings */
.page-content h2::after {
  content: '';
  display: block;
  width: 36px;
  height: 3px;
  background: var(--ifm-color-orange-jupyter);
  margin-top: 10px;
  clip-path: polygon(3px 0%, 100% 0%, calc(100% - 3px) 100%, 0% 100%);
}

.page-content h2.text--center::after {
  margin-left: auto;
  margin-right: auto;
}

@media (max-width: 996px) {
  .page-content h2::after {
    margin-left: auto;
    margin-right: auto;
  }
}

/* No red bar on dark-background sections */
[class*="section_dark"] .page-content h2::after {
  display: none;
}


/***********************************************************/

.link-to-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: auto;
  font-family: var(--ifm-font-family-roboto);
  border-radius: 35px;
  background: var(--ifm-color-secondary-s2);
  color: white;
  font-size: 15px;
  font-style: normal;
  font-weight: 700;
  letter-spacing: 0.5px;
  padding: 14px 36px;
  border: none;
  text-align: center;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
  text-decoration: none;
}

.link-to-button:hover {
  color: white;
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(10, 14, 46, 0.35);
  text-decoration: none;
}

.link-to-button:active {
  transform: translateY(0);
  box-shadow: none;
}

/*
Hyperlink states are crucial for accessibility.
Please double check before changing the rules below.
*/
a {
  /*text-decoration: underline;
  text-decoration-thickness: var(--pydata-link-underline-thickness);
  text-underline-offset: var(--pydata-link-underline-offset);*/
  color: var(---ifm-text-color);
}

a:hover,
/* We need to (re)override some of the infima rules to have proper states on
navbar links, table of contents, and docs sidebar links, respectively */
a.navbar__link:hover,
/* Top bar navigation links */
a.table-of-contents__link:hover,
/*Right sidebar links (table of contents) */
a[class^="sidebarItemLink"]:hover

/* The docs sidebar links do not have its own class */
  {
  /*text-decoration: underline;
  text-decoration-thickness: var(--pydata-link-hover-decoration-thickness);
  text-decoration-skip-ink: none;
  text-decoration-skip: none;*/
}

a:active,
a.navbar__link:active,
a.table-of-contents__link:active,
a[class^="sidebarItemLink"]:active {
  text-decoration-thickness: var(--pydata-link-decoration-thickness);
}

/* In some cases, we override the underlines because there are other elements that
already report the state (e.g. borders, background colors, etc) */
a[class^="sidebarItemLink"][aria-current="page"],
/* No underline if this is the current page */
a.navbar__link,
.navbar-sidebar__item,
.menu a,
.navbar__items--right a,
.pagination-nav__link,
a.card,
/* These cards are used in index-like documentation pages */
a.card:hover {
  text-decoration: none;
}

/* On these elements, we only rely on background color changes. They are navigation items,
so they are already assumed to be clickable anyway */
.pagination-nav__link:active,
a.card:active,
a.menu__link:active {
  background: var(--ifm-bg-neutral);
  color: #000;
}

[data-theme="dark"] .pagination-nav__link:active,
[data-theme="dark"] a.card:active,
[data-theme="dark"] a.menu__link:active {
  background: black;
  color: #fff;
}

/* Animate the top navbar conda-forge logo a bit */
.navbar__logo img:hover {
  transform: scale(1.05);
}

.navbar__logo img:active {
  transform: scale(1);
}



/* Scroll-adaptive navbar */
.navbar {
  transition: background-color 0.25s ease, box-shadow 0.25s ease;
  background-color: var(--ifm-navbar-background-color);
}

html[data-bg-dark] {
  --bg-scene-color: #ffffff;
  --bg-planet-op: 0.10;
  --bg-graph-op:  0.15;
  --bg-snippet-op: 0.13;
}

html:not([data-navbar-scrolled]) .navbar {
  background-color: transparent !important;
  box-shadow: none !important;
}

html[data-navbar-scrolled] .navbar {
  background-color: var(--ifm-bg-neutral) !important;
  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.08) !important;
}

/* Home page at top: dark links over white hero */
html[data-navbar-home-top] .navbar__link,
html[data-navbar-home-top] .custom_navbar_item {
  color: var(--ifm-color-primary-p2);
}

html[data-navbar-home-top] .custom_navbar_item:hover {
  background-color: var(--ifm-color-primary-p1);
  color: var(--ifm-color-primary-p2);
}

html[data-navbar-home-top] .navbar__link:hover {
  color: var(--ifm-color-primary-p2);
}

/* Dark-hero pages (e.g. /notebooklink/): white links over dark section */
html[data-navbar-dark-top] .navbar__link,
html[data-navbar-dark-top] .custom_navbar_item {
  color: white;
}

html[data-navbar-dark-top] .custom_navbar_item:hover {
  background-color: var(--ifm-color-primary-p1);
  color: var(--ifm-color-primary-p2);
}

html[data-navbar-dark-top] .navbar__link:hover {
  color: var(--ifm-color-primary-p1);
}

html[data-navbar-dark-top] .github-icon,
html[data-navbar-dark-top] .linkedin-icon,
html[data-navbar-dark-top] .bluesky-icon,
html[data-navbar-dark-top] .mastodon-icon,
html[data-navbar-dark-top] .rss-circle-icon {
  filter: invert(1);
}

html[data-navbar-dark-top] .navbar__toggle {
  color: white;
}

/* Sidebar opens over a light background — reset dark-top overrides */
html[data-navbar-dark-top] .navbar-sidebar a {
  color: var(--ifm-color-primary-p2) !important;
}

html[data-navbar-dark-top] .navbar-sidebar a:hover {
  color: black !important;
}

html[data-navbar-dark-top] .navbar-sidebar .navbar__logo img {
  filter: invert(1);
}

html[data-navbar-dark-top] .navbar-sidebar .github-icon,
html[data-navbar-dark-top] .navbar-sidebar .linkedin-icon,
html[data-navbar-dark-top] .navbar-sidebar .bluesky-icon,
html[data-navbar-dark-top] .navbar-sidebar .mastodon-icon,
html[data-navbar-dark-top] .navbar-sidebar .rss-circle-icon {
  filter: none;
}

.navbar__inner {
  position: relative;
}

.navbar__inner .navbar__brand {
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
}

.theme-layout-navbar-left {
  flex: 1;
  justify-content: center;
}

@media (max-width: 996px) {
  .theme-layout-navbar-left {
    justify-content: flex-end;
  }
}

.theme-layout-navbar-right {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
}

/* At 997–1300px: switch to left-aligned to avoid overlap */
@media (max-width: 1300px) and (min-width: 997px) {
  .navbar__inner .navbar__brand {
    position: static;
    transform: none;
  }

  .theme-layout-navbar-left {
    justify-content: flex-start;
  }

  .theme-layout-navbar-right {
    position: static;
    transform: none;
  }

  .navbar_hide_mid {
    display: none;
  }
}

/* Tighten item padding at narrower intermediate widths */
@media (max-width: 1150px) and (min-width: 997px) {
  .custom_navbar_item {
    padding: 6px 8px;
  }
}

.custom_navbar_item {
  font-family: var(--ifm-font-family-roboto);
  height: 36px;
  padding: 6px 14px;
  text-align: center;
  white-space: nowrap;
}

.custom_navbar_item:hover {
  background-color: var(--ifm-color-primary-p1);
  justify-items: center;
  border-radius: 4px;
}

.navbar_notebooklink {
  font-family: var(--ifm-font-family-roboto);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.3px;
  padding: 6px 14px;
  border: 2px solid var(--ifm-color-orange-jupyter);
  border-radius: 4px;
  color: var(--ifm-color-orange-jupyter) !important;
  white-space: nowrap;
  transition: background-color 0.15s ease, color 0.15s ease;
  margin-right: var(--ifm-spacing-sm);
}

.navbar_notebooklink:hover {
  background-color: var(--ifm-color-orange-jupyter) !important;
  color: white !important;
  text-decoration: none;
}

html[data-navbar-dark-top] .navbar_notebooklink {
  border-color: var(--ifm-color-accent-yellow);
  color: var(--ifm-color-accent-yellow) !important;
}

html[data-navbar-dark-top] .navbar_notebooklink:hover {
  background-color: var(--ifm-color-accent-yellow) !important;
  color: var(--ifm-color-primary-p2) !important;
}

html[data-navbar-scrolled] .navbar__link:hover,
html:not([data-navbar-home-top]) .navbar__link:hover {
  color: black;
}

.rss-circle-icon:hover {
  opacity: 0.6;
}

.rss-circle-icon:before {
  background: url(@site/static/img/socialmedias/RSS.svg);
  content: "";
  display: flex;
  height: 32px;
  width: 32px;
  background-repeat: no-repeat;
}

.github-icon:hover {
  opacity: 0.6;
}

.github-icon:before {
  background: url(@site/static/img/socialmedias/GH.svg);
  content: "";
  display: flex;
  height: 32px;
  width: 32px;
  background-repeat: no-repeat;
}

.linkedin-icon:hover {
  opacity: 0.6;
}

.linkedin-icon:before {
  background: url(@site/static/img/socialmedias/LinkedIn.svg);
  content: "";
  display: flex;
  height: 32px;
  width: 32px;
  background-repeat: no-repeat;
}

.bluesky-icon:hover {
  opacity: 0.6;
}

.bluesky-icon:before {
  background: url(@site/static/img/socialmedias/Bluesky.svg);
  content: "";
  display: flex;
  height: 32px;
  width: 32px;
  background-repeat: no-repeat;
}

.mastodon-icon:hover {
  opacity: 0.6;
}

.mastodon-icon:before {
  background: url(@site/static/img/socialmedias/Mastodon.svg);
  content: "";
  display: flex;
  height: 32px;
  width: 32px;
  background-repeat: no-repeat;
}

.close-button {
  background: url(@site/static/img/icons/CloseButton.svg);
  content: "";
  display: flex;
  height: 36px;
  width: 36px;
  background-repeat: no-repeat;
  border: 0px solid;
}

.page-content {
  max-width: var(--ifm-content-width);
  width: 100%;
  margin: 0 auto;
  padding-left: var(--ifm-spacing-2xl);
  padding-right: var(--ifm-spacing-2xl);
}

@media (max-width: 996px) {
  .page-content {
    padding-left: var(--ifm-spacing-lg);
    padding-right: var(--ifm-spacing-lg);
  }
}

/* fix scrolling issue in blog post */
.row {
  margin: 0 auto;
}