/**
 * Any CSS included here will be global. The classic template
 * bundles Infima by default. Infima is a CSS framework designed to
 * work well for content-centric websites.
 */

/* You can override the default Infima variables here. */
:root {
  --ifm-color-primary: #00796B; /* Teal */
  --ifm-color-primary-dark: #00695c;
  --ifm-color-primary-darker: #00564d;
  --ifm-color-primary-darkest: #00362e;
  --ifm-color-primary-light: #009688; /* Brighter Teal */
  --ifm-color-primary-lighter: #00a995;
  --ifm-color-primary-lightest: #00c2b1;

  --ifm-heading-color: #005073; /* Dark Blue for headings */
  --ifm-background-color: var(--ifm-color-emphasis-100); /* Off-white background */
  --ifm-link-color: var(--ifm-color-primary);
  --ifm-link-hover-color: var(--ifm-color-primary-dark);
  
  --ifm-code-font-size: 95%;
  --docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.1);

  --ifm-color-content: var(--ifm-color-emphasis-800);
  --ifm-color-content-inverse: var(--ifm-color-emphasis-100);

  --ifm-font-family-base: 'EB Garamond', serif;
  --ifm-font-size-base: 110%;

}

/* For readability concerns, you should choose a lighter palette in dark mode. */
[data-theme='dark'] {
  --ifm-color-primary: #00a995; /* Brighter Teal */
  --ifm-color-primary-dark: #00887a;
  --ifm-color-primary-darker: #00796b;
  --ifm-color-primary-darkest: #00564d;
  --ifm-color-primary-light: #00a995; /* Brighter Teal */
  --ifm-color-primary-lighter: #00c2b1;
  --ifm-color-primary-lightest: #00e0cd;

  --ifm-heading-color: #7490b2; /* Light Blue for headings */

  --ifm-link-color: var(--ifm-color-primary-lightest);
  --ifm-link-hover-color: var(--ifm-color-primary-light);

  --docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.3);
}

h1, h2, h3, h4, h5, h6, .table-of-contents__link {
  font-family: 'DM Sans', sans-serif;
}

html {
  -webkit-font-smoothing: auto;
}

/* Search */
.algolia-autocomplete .ds-dropdown-menu .ds-suggestions {
  overflow-y: scroll;
  height: 100vh;
}

.navbar__search-input {
  width: 1rem !important;
}

.navbar__search-input:focus {
  width: 9rem !important;
}

/* Footer */

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

/* homepage */
.hero--primary {
  position: relative;
  background-image: url('/img/knight-on-map.jpg');
  background-size: cover;
  background-position: bottom;
  background-repeat: no-repeat;
  background-attachment: fixed;
  color: white; /* ensure text is white */
}

.hero--primary::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(255, 255, 255, 0.7);
  z-index: 1;
}

.hero--primary .container {
  position: relative;
  z-index: 2; /* bring text above overlay */
}

.hero__title, .hero__subtitle {
  color: black;
}

.hero--primary .button--primary {
  background-color: var(--ifm-color-primary);
  color: white;
}

.hero--primary .button--primary:hover {
  background-color: var(--ifm-heading-color);
  color: white;
}

.hero--primary .button--secondary {
  border-color: black;
  color: black;
}




[data-theme='dark'] .hero--primary::before {
  background: rgba(0, 0, 0, 0.7);
}

[data-theme='dark'] .hero__title, [data-theme='dark']  .hero__subtitle {
  color: white;
}

[data-theme='dark'] .hero--primary .button--primary {
  background-color: var(--ifm-color-primary-darkest);
  color: white;
}

[data-theme='dark'] .hero--primary .button--secondary {
  background: black;
  border-color: white;
  color: white;
}

[data-theme='dark'] .hero--primary .button--primary:hover {
  background-color: var(--ifm-heading-color);
  color: white;
}

[data-theme='dark'] .hero--primary .button--secondary:hover {
  background-color: var(--ifm-heading-color);
  color: white;
}

/* Links to strategies. this applies to all links that start with `/strategies/` */
article a[href^='/strategies/'] {
  font-weight: bold;
}
article a[href^='/strategies/']::before {
  content: '♘';
  font-size: 1.4em;
  margin-right: 0.1em;
  line-height: 0; /* ensure the large font doesnt affect the layout */
}

/**external links*/
article a[href^='http']::after {
  content: '↗';
  font-size: 1.5em;
  font-family:monospace;
  vertical-align: super;
  line-height: 0;
  margin-left: 0.2em;
}
