/***
  Extra CSS for AOE Wiki
***/

/* Custom AOE color-schemes, based on AOE logo */
:root {
--aoe-red:    oklch(60.21% 0.1792 19.68);    /* hsl(355deg 64% 56%);  */
--aoe-teal:   oklch(63.11% 0.0492 189.47);  /* hsl(175deg 18% 49%);  */
--aoe-purple: oklch(53.14% 0.0308 313.25);  /* hsl(283deg 13% 37%); */
}

[data-md-color-scheme="aoe-light"] {
  color-scheme: light;
  
  --md-primary-fg-color:            var(--aoe-teal);
  --md-accent-fg-color:             oklch(from var(--aoe-purple) 64% 0.08 h);
  
  /* Default color shades */
  --md-default-fg-color:            oklch(from var(--aoe-purple) 4% c h);
  --md-default-fg-color--light:     oklch(from var(--md-default-fg-color) calc(l/0.54) c h);
  --md-default-fg-color--lighter:   oklch(from var(--md-default-fg-color) calc(l/0.32) c h);
  --md-default-fg-color--lightest:  oklch(from var(--md-default-fg-color) calc(l/0.07) c h);
  
  --md-default-bg-color:            oklch(from var(--aoe-purple) calc(l/0.25) calc(c*0.05) h);
  --md-default-bg-color--light:     oklch(from var(--md-default-bg-color) 40% c h);
  --md-default-bg-color--lighter:   oklch(from var(--md-default-bg-color) 70% c h);
  --md-default-bg-color--lightest:  oklch(from var(--md-default-bg-color) 90% c h);

  /* Code color shades */
  --md-code-bg-color:               oklch(from var(--md-accent-fg-color) 92% 0.01 h);
  
  /* Typeset color shades */
  --md-typeset-color:               var(--md-default-fg-color);
  --md-typeset-a-color:             var(--md-primary-fg-color);

  /* Admonition color shades */
  --md-admonition-fg-color:         var(--md-default-fg-color);
  --md-admonition-bg-color:         var(--md-default-bg-color);

  /* Footer color shades */
  --md-footer-fg-color:             hsla(0, 0%, 100%, 1);
  --md-footer-fg-color--light:      hsla(0, 0%, 100%, 0.7);
  --md-footer-fg-color--lighter:    hsla(0, 0%, 100%, 0.45);
  --md-footer-bg-color:             oklch(from var(--aoe-red) calc(l/1) calc(c*0.75) h);
  --md-footer-bg-color--dark:       oklch(from var(--md-footer-bg-color) calc(l/1.75) calc(c/1) h);

  /* hide vampiric images */  
  img[src$="#only-dark"] { display: none; }

}

@media screen {
  [data-md-color-scheme="aoe-dark"] {
     color-scheme: dark;

    --md-primary-fg-color:            var(--aoe-red);
    --md-accent-fg-color:             oklch(from var(--aoe-teal) l calc(c/0.5) h);
    
    /* Default color shades */
    --md-default-fg-color:            hsl(225 15% 90% / 0.82);
    --md-default-fg-color--light:     oklch(from var(--md-default-fg-color) calc(l/0.56) c h);
    --md-default-fg-color--lighter:   oklch(from var(--md-default-fg-color) calc(l/0.32) c h);
    --md-default-fg-color--lightest:  oklch(from var(--md-default-fg-color) calc(l/0.12) c h);

    --md-default-bg-color:            oklch(from var(--aoe-purple) calc(l*0.36) calc(c*0.5) h);
    --md-default-bg-color--light:     oklch(from var(--md-default-bg-color) calc(l/0.54) c h);
    --md-default-bg-color--lighter:   oklch(from var(--md-default-bg-color) calc(l/0.26) c h);
    --md-default-bg-color--lightest:  oklch(from var(--md-default-bg-color) calc(l/0.07) c h);

    /* Code color shades */
    --md-code-fg-color:               oklch(from var(--md-default-fg-color) 90% c h);
    --md-code-bg-color:               oklch(from var(--md-accent-fg-color) 35% 0.025 h);
    
    /* Typeset color shades */
    --md-typeset-color:               var(--md-default-fg-color);
    --md-typeset-a-color:             var(--md-primary-fg-color);
    
    /* Admonition color shades */
    --md-admonition-fg-color:         var(--md-default-fg-color);
    --md-admonition-bg-color:         var(--md-default-bg-color);

    /* Footer color shades */
    --md-footer-bg-color:             oklch(from var(--aoe-purple) calc(l*0.5) calc(c/0.5) h);
    --md-footer-bg-color--dark:       oklch(from var(--md-footer-bg-color) calc(l*0.4) calc(c/0.5) h);

    /* hide images that are afraid of the dark(-mode) */  
    img[src$="#only-light"] { display: none; }
     
  }
}

/* center the git dates and authors thing at bottom */
aside.md-source-file{
  margin: auto;
  text-align: center
}

/* Nav styling for mobile */
@media screen and (max-width: 76.25em) {
  .md-nav--primary .md-nav__title {
    background-color: var(--md-primary-fg-color);
  }
}

@media screen and (max-width: 59.984375em) {
   .md-nav__source {
      background-color: var( --md-footer-bg-color);
      
   }
}

/* Bold-er Nav-section headings */
label.md-nav__title { font-style: italic; }
div[data-md-type='navigation'] { font-weight: 600; }
div[data-md-type='toc'] { font-weight: 600; }

/* older mkdocs-material style admonitions */
/* 
.md-typeset .admonition,
.md-typeset details {
  border-width: 0;
  border-left-width: 4px;
}
*/