/******************************************************************************
denguedatasets
Material for MkDocs Theme
Author: Felipe Dzul
Palette source: official package logo (navy / coral / teal / periwinkle)
******************************************************************************/

/******************************************************************************
PALETTE
******************************************************************************/

:root{

  /* Primary — logo navy (title "dengue", border, map) */

  --md-primary-fg-color:            #132A6B;
  --md-primary-fg-color--light:     #1F5FBF;
  --md-primary-fg-color--dark:      #0E1F4D;

  /* Accent — logo coral (title "datasets", accent dot, "Serotype" slice) */

  --md-accent-fg-color:             #F06A78;
  --md-accent-fg-color--transparent: #F06A7826;

  /* Secondary logo colors — from the pie chart legend, used below for
     admonitions, badges, and chart-like UI elements (not native MkDocs
     variables, defined here for our own custom rules) */

  --dd-teal:                        #4FB8A0;   /* "Surveillance" slice, palms */
  --dd-periwinkle:                  #93A8DA;   /* "Entomology" slice, bars */
  --dd-pale-pink:                   #F6C9CD;   /* map fill */

  /* Background */

  --md-default-bg-color:            #FFFFFF;
  --md-default-bg-color--light:     #F7F9FC;

  /* Text */

  --md-default-fg-color:            #1B1F24;
  --md-default-fg-color--light:     #5F6C7B;

  /* Links */

  --md-typeset-a-color:             #1F5FBF;

}

/******************************************************************************
Dark Mode
******************************************************************************/

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

  --md-primary-fg-color:#1F5FBF;

  --md-accent-fg-color:#F06A78;
  --md-accent-fg-color--transparent: #F06A7833;

  --dd-teal:#5FCBB2;
  --dd-periwinkle:#A9BCE6;

  --md-default-bg-color:#111827;

  --md-default-fg-color:#F9FAFB;

}

/******************************************************************************
HEADER
******************************************************************************/

.md-header{

    background:#132A6B;

    box-shadow:none;

}

/******************************************************************************
TABS
******************************************************************************/

.md-tabs{

    background:#132A6B;

}

/******************************************************************************
SIDEBAR
******************************************************************************/

.md-sidebar{

    border-right:1px solid #E5EAF2;

}

/******************************************************************************
LINKS
******************************************************************************/

.md-typeset a{

    color:#1F5FBF;

    font-weight:500;

}

.md-typeset a:hover{

    color:#F06A78;

}

/******************************************************************************
BUTTONS
******************************************************************************/

.md-button{

    border-radius:10px;

    border-width:2px;

}

.md-button--primary{

    background:#132A6B;

    color:white;

}

.md-button--primary:hover{

    background:#1F5FBF;

}

/******************************************************************************
TABLES
******************************************************************************/

.md-typeset table:not([class]){

    border-radius:10px;

    overflow:hidden;

}

.md-typeset table:not([class]) th{

    background:#132A6B;

    color:white;

}

.md-typeset table:not([class]) tr:nth-child(even){

    background:#F7F9FC;

}

/******************************************************************************
CODE
******************************************************************************/

code{

    border-radius:6px;

    background:#EEF3F8;

    color:#132A6B;

}

pre{

    border-radius:10px;

}

/******************************************************************************
SEARCH
******************************************************************************/

.md-search__input{

    border-radius:10px;

}

/******************************************************************************
ADMONITIONS — mapped to the logo's pie-chart legend colors, so the docs
site visually echoes the same four categories shown in the logo
(Incidence=navy, Serotype=coral, Surveillance=teal, Entomology=periwinkle)
******************************************************************************/

.md-typeset .admonition.note{

    border-left:5px solid var(--dd-periwinkle);

}

.md-typeset .admonition.tip{

    border-left:5px solid var(--dd-teal);

}

.md-typeset .admonition.warning{

    border-left:5px solid var(--md-accent-fg-color);

}

.md-typeset .admonition.danger{

    border-left:5px solid #C43D4E;

}

/******************************************************************************
FOOTER
******************************************************************************/

.md-footer{

    background:#132A6B;

}

.md-footer-meta{

    background:#0E1F4D;

}

/******************************************************************************
HERO IMAGE
******************************************************************************/

.hero{

    border-radius:18px;

    background:white;

    padding:2rem;

    box-shadow:0 10px 35px rgba(19,42,107,.08);

}

/******************************************************************************
CARDS
******************************************************************************/

.md-typeset .grid.cards>ul>li{

    border-radius:16px;

    border:1px solid #E5EAF2;

    transition:.25s;

}

.md-typeset .grid.cards>ul>li:hover{

    transform:translateY(-4px);

    box-shadow:0 8px 30px rgba(19,42,107,.12);

}

/******************************************************************************
ICONS
******************************************************************************/

.md-typeset svg{

    color:#132A6B;

}