/* ===== HEROES OF HEX - MEDIEVAL FANTASY THEME ===== */

/* ===== FONTS ===== */
@import url('https://fonts.googleapis.com/css2?family=BBH+Sans+Bartle&family=Cinzel:wght@400;500;600;700;800;900&family=Open+Sans:ital,wght@0,300..800;1,300..800&family=Pirata+One&family=Quintessential&family=UnifrakturCook:wght@700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@400;500;600;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=EB+Garamond:wght@400;500;600;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=IM+Fell+English:ital,wght@0,400;1,400&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Alegreya:wght@400;500;600;700&display=swap');
/* ===== LAYOUT ===== */
.md-grid {
    max-width: 1600px;
}

/* ===== BODY & BACKGROUND ===== */
body {
    color: #4b2c1c;
    font-family: "Alegreya", serif;
    background-color: hsl(39, 71%, 92%);
    background-image:
            url("../images/Paper_top.png"),
            url("../images/Paper_base.png");
    background-repeat: no-repeat, repeat;
    background-position: center top, left top;
    background-size: contain, auto;
}

.md-content {
    border-radius: 0;
}

@media screen and (max-width: 1220px) {
    .md-nav--primary, .md-nav--primary .md-nav {
        background-color: #FFFAF5FF;
        border-right: 3px double #b8874e;
    }
}

[dir=ltr] .md-top{
    background-color: #FFFAF5FF;
}

/* ===== TYPOGRAPHY ===== */

.md-typeset {
    -webkit-print-color-adjust: exact;
    color-adjust: exact;
    line-height: 1.5;
    overflow-wrap: break-word;
    font-size: 4ex;
}

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

/* Headings */
.md-typeset h1,
.md-typeset h2,
.md-typeset h3,
.md-typeset h4 {
    font-family: "Cinzel", serif;
    font-weight: bold;
    color: #4b2c1c;
    margin: 2.0em 0 0.2em 0;
    line-height: 1.0em;
    margin-top: 1.0em;
}

.md-typeset h1 {
    font-family: "Cinzel", serif;
    font-size: 2.6em;
    padding-bottom: 0.5em;
    letter-spacing: 1px;
    margin: 0;
    line-height: 1.0em;
}

.md-typeset h2 {
    font-size: 2.1em;
    line-height: 1.0em;
}

.md-typeset h3 {
    font-size: 1.6em;
    line-height: 1.0em;
}

/* Links */
.md-typeset a {
    font-weight: bold;
    color: #a32f11;
}

.md-typeset a:hover {
    color: #f38a6e;
}

/* ===== IMAGES ===== */
.md-typeset img {
    display: block;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    pointer-events: none;
}

/* Keep emoji (twemoji) icons inline instead of the block rule above */
.md-typeset img.twemoji {
    display: inline-block;
    margin: 0 0.05em;
    height: 1.1em;
    width: auto;
    vertical-align: -0.18em;
}

@media screen and (max-width: 900px) {
    .md-typeset img.hide-on-mobile {
        display: none !important;
    }
    
    .md-typeset img.show-on-mobile {
        display: block;
        margin-left: auto;
        margin-right: auto;
        text-align: center;
    }
}

@media screen and (min-width: 901px) {
    .md-typeset img.show-on-mobile {
        display: none;
    }
}


/* ===== TABLES ===== */
.md-typeset table:not([class]) {
    border: 1px solid #bc814a;
    background-color: #FFFAF5FF
}

.md-typeset table:not([class]) th {
    border: 1px solid #bc814a;
    font-size: 1.3em;
    padding: 6px 12px;
}

.md-typeset table:not([class]) td {
    border: 1px solid #bc814a;
    font-size: 1.2em;
    padding: 6px 12px;
}

.md-typese__.table {
    background-color: #b8874e;
    color: #FFFAF5FF
}


/* ===== CODE BLOCKS ===== */
.md-typeset code,
.md-typeset pre {
    background-color: rgba(75, 44, 28, 0.08);
    border-radius: 6px;
    padding: 2px 6px;
    color: #3b2412;
}


/* ===== NAVIGATION ===== */
.md-nav__link {
    color: #2e160c;
    font-size: 2.8ex;
    font-weight: 500;
}

.md-nav__link--active {
    color: #2e160c;
}

.md-nav__item .md-nav__link--active {
    color: #ae341a;
    font-weight: bold;
    font-size: 3.0ex;
}

.md-nav__item .md-nav__link:hover {
    color: #ae341a;
}

.md-nav--primary .md-nav__item--active>.md-nav__link{
    color: #ae341a;
}

/* ===== ADMONITION ===== */

.md-typeset .admonition.admonition, .md-typeset details.admonition{
    background-color: #FFFAF5FF;
    border-color: #FFFAF5FF;
    color: #2e160c;
    font-size: 2ex;
}

.md-typeset .admonition > .admonition-title, .md-typeset details.admonition > summary{
    border-color: #2e160c;
    background-color: #2e160c;
    color: #fff;
}

/* ===== SEARCH ===== */
[data-md-toggle=search]:checked~.md-header .md-search__output{
    background-color: #FFFAF5FF;
}

/* ===== VERSION SELECTOR ===== */
.md-version__header {
    color: #2e160c;
    font-family: "Cinzel", serif;
    text-align: center;
}

.md-version__item {
    text-align: center;
}


/* ===== FOOTER ===== */
.md-footer {
    background-color: #161413;
    border-top: 3px double #b8874e;
}


/* ===== DARK MODE ===== */
[data-md-color-scheme="slate"] {
    --md-primary-fg-color: #161413;
    --md-default-bg-color: hsla(20, 18%, 12%,0%);
    --md-default-fg-color--light: #ae341a;
    --md-default-fg-color--lighter: #ae341a;
    --md-accent-fg-color: #d1b089;
    --md-code-bg-color: rgba(255, 255, 255, 0.04);
    --md-code-fg-color: #f0e5d0;
    --md-typeset-a-color: #d1b089;
}

[data-md-color-scheme="slate"] .md-typeset h1 {
    color: #492714;
    font-weight: bold;
}

[data-md-color-scheme="slate"] .md-typeset h2 {
    color: #6c381c;
}