/* NCAR Brand Standards Reference: https://news.ucar.edu/sites/default/files/documents/related-links/2020-03/NCAR-UCAR_BrandStandards_031020-Spreads.pdf */

/* enlarge logo */
.md-logo img {
    width: px !important;
    height: 53px !important;
}


:root {
  /* Default properties & color shades */
    --md-text-font: "Poppins";
    --md-code-font: "Roboto Mono";
}

[data-md-color-scheme="default"] {

  --md-text-font: "Poppins";
  --md-code-font: "Roboto Mono";
  
  /* Background Image */
  --bg-image:                    url('../assets/images/NCAR-Waves.png');

  /* Default properties & color shades */
  --md-default-bg-color:         #f1f4f7;
  --md-typeset-a-color:          rgb(28,101,143); /* PMS 2152 (NCAR Blue) */

  /* Primary color shades */
  --md-primary-fg-color:         rgb(28,101,143); /* PMS 2152 (NCAR Blue) */

  /* Accent color shades */
  --md-accent-fg-color:          rgb(0,121,124);       /* PMS 3557 (UCAR Green) */

  /* Code color shades */
  --md-code-bg-color:            rgb(210,227,235,0.3);
  --md-code-fg-color:            rgb(11,33,57);
  --md-code-hl-number-color:     rgb(11,33,57);
  --md-code-hl-comment-color:    #8F0B0B;        /* ref: https://creativebooster.net/blogs/colors/shades-of-maroon-color */
  --md-code-hl-variable-color:   rgb(1,33,105);  /* PMS 280 (Deep Blue) */
  --md-code-hl-string-color:     rgb(0,121,124); /* PMS 3557 (UCAR Green) */

  /* Misc colors */
  --md-title-color:              rgb(11,33,57);
  --md-title-small:              rgb(219,226,233); /* PMS 649 (Background Blue 3) */


  /* Custom colorind for admonition boxes */
  /* -------------------------- */
  /* Coloring for Examples */
  .md-typeset :is(.admonition,details):is(.example) {
      border-color: rgb(0,193,213);  /* PMS 3115 (NCAR Lightest Blue) */
  }

  /* Coloring for header of Examples */
  .md-typeset :is(.example)>:is(.admonition-title,summary) {
      background-color: rgba(0,193,213,0.25);   /* PMS 3115 (NCAR Lightest Blue) */
  }

  /* Coloring for icon of Examples */
  .md-typeset :is(.example)>:is(.admonition-title,summary):before {
      background-color: rgb(28,101,143);  /* PMS 2152 (NCAR Blue) */
  }

  /* -------------------------- */
  /* Coloring for Questions */
  .md-typeset :is(.admonition,details):is(.question) {
    border-color: rgb(0,127,163);  /* PMS 314 (NCAR Lighter Blue) */
  }

  /* Coloring for header of Questions */
  .md-typeset :is(.question)>:is(.admonition-title,summary) {
    background-color: rgba(0,127,163,0.25);  /* PMS 314 (NCAR Lighter Blue) */
  }

  /* Coloring for icon of Questions */
  .md-typeset :is(.question)>:is(.admonition-title,summary):before {
    background-color: rgb(1,33,105);   /* PMS 280 (Deep Blue) */
  }

  /* -------------------------- */
  /* Coloring for Tip,Hint,and Important */
  .md-typeset :is(.admonition,details):is(.tip,.hint,.important) {
      border-color: rgb(0,121,124); /* PMS 3557 (UCAR Green) */
  }
  /* Coloring for header of Tip,Hint,and Important */
  .md-typeset :is(.tip,.hint,.important)>:is(.admonition-title,summary){
      background-color: rgba(0,121,124,0.25); /* PMS 3557 (UCAR Green) */
  }

  /* Coloring for icon of Tip,Hint,and Important */
  .md-typeset :is(.tip,.hint,.important)>:is(.admonition-title,summary):before {
      background-color: rgba(0,121,124,1); /* PMS 3557 (UCAR Green) */
  }


  /* -------------------------- */
  /* standard HTML elements */
}



[data-md-color-scheme="slate"] {

    /* Default properties & color shades */
    --md-text-font: "Poppins";
    --md-code-font: "Roboto Mono";

  /* Background Image */
  --bg-image:                          url('../assets/images/NCAR-Waves-Dark.png');

  /* Default properties & color shades */
  --md-typeset-color:                  rgb(217,217,214); /* PMS Cool Gray 1 */
  --md-typeset-a-color:                rgb(28,101,143); /* PMS 2152 (NCAR Blue) */
  --md-default-bg-color:               #0f1010;
  --md-default-fg-color:               rgb(219,226,233);      /* PMS 649 (Background Blue 3) */
  --md-default-fg-color--light:        rgba(219,226,233,0.8); /* PMS 649 (Background Blue 3) */
  --md-default-fg-color--lighter:      rgba(219,226,233,0.5); /* PMS 649 (Background Blue 3) */
  --md-default-fg-color--lightest:     rgba(219,226,233,0.1); /* PMS 649 (Background Blue 3) */

  /* Primary color shades */
  --md-primary-fg-color:               rgb(83,86,90); /* PMS Cool Gray 11 */

  /* Accent color shades */
  --md-accent-fg-color:                rgb(168,199,0);   /* PMS 3570 (Highlight Green) */

  /* Code color shades */
  --md-code-fg-color:                  rgb(219,226,233); /* PMS 649 (Background Blue 3) */
  --md-code-bg-color:                  rgb(30,30,30);
  --md-code-hl-generic-color:          rgb(219,226,233); /* PMS 649 (Background Blue 3) */
  --md-code-hl-number-color:           rgb(219,226,233); /* PMS 649 (Background Blue 3) */
  --md-code-hl-variable-color:         rgb(219,226,233); /* PMS 649 (Background Blue 3) */
  --md-code-hl-comment-color:          #e7afa1;          /* ref: https://icolorpalette.com/download/palette/565174_color_palette.jpg */
  --md-code-hl-keyword-color:          rgb(168,199,0);   /* PMS 3570 (Highlight Green) */
  --md-code-hl-punctuation-color:      rgb(168,199,0);   /* PMS 3570 (Highlight Green) */
  --md-code-hl-function-color:         rgb(195,215,238); /* PMS 2707 (Background Blue 1) */
  --md-code-hl-operator-color:         rgb(195,215,238); /* PMS 2707 (Background Blue 1) */
  --md-code-hl-constant-color:         rgb(195,215,238); /* PMS 2707 (Background Blue 1) */
  --md-code-hl-name-color:             rgb(206,217,229); /* PMS 650 (Background Blue 2) */
  --md-code-hl-variable-color:         rgb(0,193,213);   /* PMS 3115 (NCAR Lightest Blue) */
  --md-code-hl-string-color:           rgb(64,193,172);  /* PMS 7465 (UCAR LIghtest Green) */

  /* Admonition color shades */
  --md-admonition-bg-color:            #0f1010;
  --md-admonition-fg-color:            rgb(219,226,233); /* PMS 649 (Background Blue 3) */

  /* Misc colors */
  --iframe-bg-color:                   rgb(187,188,188); /* PMS Cool Gray 4 */ /*rgb(217,217,214); /* PMS Cool Gray 1 */
  --md-typeset-table-color:            rgb(83,86,90);    /* PMS Cool Gray 11 */
  --md-title-color:                    rgb(219,226,233); /* PMS 649 (Background Blue 3) */
  --md-title-small:                    rgb(219,226,233); /* PMS 649 (Background Blue 3) */

  /* Custom colorind for admonition boxes */
  /* -------------------------- */
  /* Coloring for Examples */
  .md-typeset :is(.admonition,details):is(.example) {
    border-color: rgb(28,101,143);  /* PMS 2152 (NCAR Blue) */
  }

  /* Coloring for header of Examples */
  .md-typeset :is(.example)>:is(.admonition-title,summary) {
    background-color: rgba(28,101,143,0.25);  /* PMS 2152 (NCAR Blue) */
  }

  /* Coloring for icon of Examples */
  .md-typeset :is(.example)>:is(.admonition-title,summary):before {
    background-color: rgb(168,199,0);  /* PMS 3570 (Highlight Green) */
  }

  /* -------------------------- */
  /* Coloring for Questions */
  .md-typeset :is(.admonition,details):is(.question) {
    border-color: rgb(0,127,163);  /* PMS 314 (NCAR Lighter Blue) */
  }

  /* Coloring for header of Questions */
  .md-typeset :is(.question)>:is(.admonition-title,summary) {
    background-color: rgba(0,127,163,0.25);  /* PMS 314 (NCAR Lighter Blue) */
  }

  /* Coloring for icon of Questions */
  .md-typeset :is(.question)>:is(.admonition-title,summary):before {
    background-color: rgb(195,215,238); /* PMS 2707 (Background Blue 1) */
  }

  /* -------------------------- */
  /* Coloring for Tip,Hint,and Important */
  .md-typeset :is(.admonition,details):is(.tip,.hint,.important) {
      border-color: rgb(0,121,124); /* PMS 3557 (UCAR Green) */
  }
  /* Coloring for header of Tip,Hint,and Important */
  .md-typeset :is(.tip,.hint,.important)>:is(.admonition-title,summary){
      background-color: rgba(0,121,124,0.25); /* PMS 3557 (UCAR Green) */
  }

  /* Coloring for icon of Tip,Hint,and Important */
  .md-typeset :is(.tip,.hint,.important)>:is(.admonition-title,summary):before {
      background-color: rgba(0,121,124,1); /* PMS 3557 (UCAR Green) */
  }

  /* -------------------------- */
  /* standard HTML elements */
}


/* styling for section headers */
.md-typeset h1,
.md-typeset h2,
.md-typeset h3 {
    /* font-weight: bold */
}

.md-typeset a {
  font-weight: bold;
}

body {
  background-image: var(--bg-image);
  background-size: 14rem 70rem;
  background-position: right center;
  background-repeat: no-repeat;
  background-attachment: fixed;
}

.md-nav--secondary .md-nav__title {
  background: unset;
  box-shadow: unset;
}

table {
  background-color: var(--table-bg-color);
  color: var(--table-fg-color);
}

iframe {
  background-color: var(--iframe-bg-color);
}

/* Nav formatting */

.md-main__inner { 
  margin-top: 0rem;
}

.md-sidebar__inner {
  margin-right: 16px;
}

.md-nav__home {
  color: var(--md-title-color);
}
.md-nav__home:hover {
  color: var(--md-accent-fg-color);
}

.md-nav__title, .md-nav__item--section {
  font-size: medium;
  color: var(--md-title-color);

}

.md-nav__item--section {
  padding-bottom: 16px;
  border-bottom-style: solid;
  border-bottom-width: 1px;
  border-bottom-color: var(--md-primary-fg-color);
}

/* improve accessibility tweaks: makes the current section bold in the navigation */
.md-nav__link.md-nav__link--active {
    color: var(--md-typeset-a-color);
    font-weight: bold;
}

/* Maximum space for text block (https://github.com/squidfunk/mkdocs-material/discussions/3692) */
.md-grid {
    max-width: 100%;
}

/* Highlight Color*/
.md-typeset mark {
  background-color: #ffff0000;
  animation-name: highlight-ease;
  animation-duration: 10s;
}

@keyframes highlight-ease {
  0% {background-color: #ffff2080;}
  90% {background-color: #ffff2080;}
  100% {background-color: #ffff0000;}
}

/* Media queries for smaller displays */

@media screen and (max-width: 76.2344em){
  .md-nav__home {
    font-size: medium;
    color: var(--md-title-small);
    padding-top: 10px;
  }
  .md-nav__home:hover {
    font-size: medium;
    color: inherit;
    padding-top: 10px;
  }

  .md-nav--primary .md-nav__title {
    padding: 3.6rem .8rem 2rem;
  }

}

@media screen and (min-width: 76.25em) {
    .md-nav__item--section>.md-nav__link[for] {
        color: inherit;
    }
}