/* 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-header__button.md-logo {
    margin-top: 20px;
    margin-left: 0;
    margin-right: 0;
    padding: 0;
}

.md-logo img {
    width: px !important;
    height: 95px !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:          #00357A; /* PMS 7710 (UCAR Dark Blue) */

  /* the above (--md-typeset-a-color) doesn't seem to work in material>9.5, so duplicate spec here too: */
  .md-typeset a {
      color:                     #00357A; /* PMS 7710 (UCAR Dark Blue) */
  }

  .md-typeset a:hover {
      color:                     #00A2B4; /* PMS 7710 (UCAR Aqua) */
  }

  /* Primary color shades */
  --md-primary-fg-color:         #00357A; /* PMS 7710 (UCAR Dark Blue) */

  /* Accent color shades */
  --md-accent-fg-color:          #00A2B4; /* PMS 7710 (UCAR Aqua) */

  /* 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 (Old Darker UCAR Green) */


  /* 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: rgb(195,215,238) /* PMS 2707 (Background Blue 1) */
  }


  /* -------------------------- */
  /* 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(195,215,238); /* PMS 2707 (Background Blue 1) */

  /* the above (--md-typeset-a-color) doesn't seem to work in material>9.5, so duplicate spec here too: */
  .md-typeset a {
      color:                           rgb(195,215,238); /* PMS 2707 (Background Blue 1) */
  }

  --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 */


  /* 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: rgb(195,215,238); /* PMS 2707 (Background Blue 1) */
  }

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


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

body {
  background-image: var(--bg-image);
  background-size: 50%;
  background-position: right top;
  background-repeat: no-repeat;
  background-attachment: fixed;
}

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

iframe {
  background-color: var(--iframe-bg-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;
}

/* 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;}
}

/* Header elements */
p.title_text {
  width: 15%;
  font-weight: bold;
  font-size: 1.5em;
  padding-right: 30px;
}

/* Footer UCAR elements */
div.ucar_links {
  display: table;
  table-layout: fixed;    /* For cells of equal size */
}

div.ucar_links span {
  display: table-cell;
  padding-right: 15px;
  text-align: center;
}

p.bold {
    font-weight: bold;
    display: inline;
}

.md-footer {
    background-color: rgba(83,86,90,1.0);
}