/***********/
/** FONTS **/
/***********/
@font-face {
    font-family: "Crimson Pro";
    src: url("/fonts/CrimsonPro-VariableFont_wght.ttf") format("truetype");
    font-weight: 400 800;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Crimson Pro";
    src: url("/fonts/CrimsonPro-Italic-VariableFont_wght.ttf") format("truetype");
    font-weight: 400 800;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: "Iosevka Medium";
    src: url("/fonts/IosevkaTerm-Medium.woff2") format("woff2");
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Iosevka Medium";
    src: url("/fonts/IosevkaTerm-MediumItalic.woff2") format("woff2");
    font-weight: normal;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: "Latin Modern Math";
    src: url("/fonts/LatinModernMath-Regular.woff2") format("woff2");
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "XITS Math";
    src: url("/fonts/XITSMath-Bold.woff2") format("woff2");
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "XITS Math";
    src: url("/fonts/XITSMath-Regular.woff2") format("woff2");
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Noto Nastaliq Urdu";
    src: url("/fonts/NotoNastaliqUrdu-VariableFont_wght.ttf") format("truetype");
    font-weight: 400 700;
    font-style: normal;
    font-display: swap;
}

/**********/
/** VARS **/
/**********/
:root {
    /** FONT ASSIGNMENTS **/
    --serif: "Crimson Pro", "Palatino Linotype", "Book Antiqua", Cambria, "Lucida Bright", serif;
    --sans-serif: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    --monospace: "Iosevka Medium", "Cascadia Code", Consolas, Monaco, "Lucida Console", "Andale Mono", monospace;

    /** COLORSCHEMES **/
    /** NOTE: Just add "dark" to include aks as well. **/
    color-scheme: light dark;

    /** BASIC COLOURS -- LAZYFOX **/
    --color-lzf-shade0:  #F6F2EE;
    --color-lzf-shade1:  #EBE5DF;
    --color-lzf-shade2:  #E5DBD1;
    --color-lzf-shade3:  #BBAFB5;
    --color-lzf-shade4:  #8B8FA2;
    --color-lzf-shade5:  #625C87;
    --color-lzf-shade6:  #4D4872;
    --color-lzf-shade7:  #393263;
    --color-lzf-accent0: #E9214F;
    --color-lzf-accent1: #E79925;
    --color-lzf-accent2: #DDC805;
    --color-lzf-accent3: #07B34C;
    --color-lzf-accent4: #16A0BE;
    --color-lzf-accent5: #0C67A8;
    --color-lzf-accent6: #EC3484;
    --color-lzf-accent7: #9335C6;
    --color-lzf-aux0:    #BEDEDE;
    --color-lzf-aux1:    #E5D3DB;

    /** BASIC COLOURS -- AKS DARK **/
    --color-aks-shade0:  #222430;
    --color-aks-shade1:  #2B2E3D;
    --color-aks-shade2:  #36394B;
    --color-aks-shade3:  #3E4856;
    --color-aks-shade4:  #5B697B;
    --color-aks-shade5:  #CBD1EC;
    --color-aks-shade6:  #E2E6F8;
    --color-aks-shade7:  #ECEFF4;
    --color-aks-accent0: #EF476F;
    --color-aks-accent1: #FE995E;
    --color-aks-accent2: #FADD5C;
    --color-aks-accent3: #66DB8D;
    --color-aks-accent4: #4ECDC4;
    --color-aks-accent5: #5596F7;
    --color-aks-accent6: #FC56B1;
    --color-aks-accent7: #A972FF;
    --color-aks-aux0:    #1C517D;
    --color-aks-aux1:    #071A4C;

    /** SEMANTIC **/
    --color-bg-primary:       light-dark(var(--color-lzf-shade0), var(--color-aks-shade0));
    --color-bg-secondary:     light-dark(var(--color-lzf-shade1), var(--color-aks-shade1));
    --color-fg-primary:       light-dark(var(--color-lzf-shade7), var(--color-aks-shade7));
    --color-border-primary:   light-dark(var(--color-lzf-shade4), var(--color-aks-shade4));
    --color-border-secondary: light-dark(var(--color-lzf-shade3), var(--color-aks-shade3));
    --color-selection:        light-dark(var(--color-lzf-aux0), var(--color-aks-aux0));

    /** COLORED **/
    --color-red:    light-dark(var(--color-lzf-accent0), var(--color-aks-accent0));
    --color-orange: light-dark(var(--color-lzf-accent1), var(--color-aks-accent1));
    --color-yellow: light-dark(var(--color-lzf-accent2), var(--color-aks-accent2));
    --color-green:  light-dark(var(--color-lzf-accent3), var(--color-aks-accent3));
    --color-cyan:   light-dark(var(--color-lzf-accent4), var(--color-aks-accent4));
    --color-blue:   light-dark(var(--color-lzf-accent5), var(--color-aks-accent5));
    --color-pink:   light-dark(var(--color-lzf-accent6), var(--color-aks-accent6));
    --color-purple: light-dark(var(--color-lzf-accent7), var(--color-aks-accent7));

    /** ELEMENTS **/
    --color-hyperlink: var(--color-purple);
    --color-warning-border: var(--color-red);
    --color-warning-bg: color-mix(in srgb, var(--color-red), transparent 75%);
    --color-success-border: var(--color-green);
    --color-success-bg: color-mix(in srgb, var(--color-green), transparent 75%);
}

::selection {
    background-color: var(--color-selection);
}

/*************/
/** GENERAL **/
/*************/

body {
    color: var(--color-fg-primary);
    background: var(--color-bg-primary);
    font-family: var(--serif);
    font-size: 1.1em;
}

/* Sidenote */
note {
    margin: 0 -30% 0 0;
    float: right;
    clear: right;
    width: 25%;
    color: var(--color-fg-primary);
    font-size: 0.9em;
    border-left: 3px solid var(--color-border-primary);
    padding: 0 0 0 7px;
    text-align: left;
}

header {
    cursor: default;
}

img {
    max-width: 100%;
}

ul {
    padding-left: 5%;
    li {
        p {
            margin: 5px auto;
        }
    }
}

math {
    font-weight: bold;
}

math[display="block"] {
    margin: 0.7em auto;
}

main p {
    text-align: justify;
}

table:not(.plain-table) {
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 24px;
    border-spacing: 0;
    border-bottom: 2px solid var(--color-border-primary);
    border-top: 2px solid var(--color-border-primary);
}

table th:not(.plain-table) {
    padding: 3px 10px;
    border-top: none;
    border-left: none;
    border-right: none;
    border-bottom: 1px solid var(--color-border-primary);
}

table td:not(.plain-table) {
    padding: 3px 10px;
    border-top: none;
    border-left: none;
    border-bottom: none;
    border-right: none;
}

.urdu {
    direction: rtl;
    text-align: right;
    font-family: "Noto Nastaliq Urdu", serif;
}

.header-section-number {
    margin-right: 10px;
}

#footer-logo {
    float: right;
    max-width: 30px;
    max-height: 30px;

    path {
        stroke: var(--color-fg-primary);
    }
}

div.post-list-item {
    h3 {
        margin: 0;
    }

    p#date {
        margin: 0;
        font-size: 0.8em;
    }

    p#description {
        margin: 5px 0 0 0;
        padding: 0;
    }
}

div.post-list-item:not(:last-child) {
    margin-bottom: 1.2em;
}

/**********/
/** HOME **/
/**********/

body.home {
    margin: 0 15%;

    header {
        margin-top: 5%;
        margin-bottom: 5vh;
    }

    #logo {
        margin: 3vh 3vh;
        svg {
            width: 30vw;
            height: 30vh;
            max-width: 30vw;
            max-height: 30vh;
        }

        path {
            stroke: var(--color-bg-secondary);
        }
    }

    main {
        nav {
            font-size: 1.3em;

            ul {
                list-style: none;
                padding: 0;
                margin: 0;
                display: flex;
                flex-direction: row;
                justify-content: center;

                li {
                    margin: 0 10px;
                }
            }
        }
    }
}

/**********/
/** PAGE **/
/**********/

body.page {
    margin: 0 33%;

    header {
        margin-top: 5vh;
        text-align: center;
    }

    footer {
        margin-bottom: 5vh;
    }
}

/**********/
/** POST **/
/**********/

body.post {
    margin: 0 33%;

    header {
        margin-top: 5vh;
        text-align: center;
    }

    footer {
        margin-bottom: 5vh;
    }
}

/******************/
/** BLOCK QUOTES **/
/******************/

blockquote {
    margin: 10px 0;
    padding: 7px 7px 7px 10px;
    border-style: solid;
    border-width: 0 0 0 7px;
    border-radius: 3px;
    border-color: var(--color-border-secondary);
    background-color: var(--color-bg-secondary);
    text-align: left;

    p {
        margin: 0;
        padding: 0;
    }
}

blockquote.warning {
    border-radius: 3px;
    border-width: 0 0 0 7px;
    border-color: var(--color-warning-border);
    background-color: var(--color-warning-bg);
}

blockquote.success {
    border-radius: 3px;
    border-width: 0 0 0 7px;
    border-color: var(--color-success-border);
    background-color: var(--color-success-bg);
}

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

a {
    color: var(--color-hyperlink);
    text-decoration: none;
}

a:visited {
    color: var(--color-hyperlink);
}

a:hover {
    text-decoration: underline;
    text-decoration-thickness: 1.5px;
    text-underline-offset: 0.1em;
    text-decoration-color: currentColor;
}

a.colorless {
    color: inherit;
    font-weight: inherit;
}

a.colorless:visited {
    color: inherit;
}

a.colorless:hover {
    color: var(--color-hyperlink);
}

/***********/
/** FONTS **/
/***********/

.serif {
    font-family: var(--serif);
}

.sans-serif {
    font-family: var(--sans-serif);
}

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

/*****************/
/** INLINE CODE **/
/*****************/
code {
    font-size: 0.9em;
    font-family: var(--monospace);
    padding: 1px 3px;
    border-radius: 2px;
    background-color: var(--color-bg-secondary);
}

/***************/
/** CODEBLOCK **/
/***************/

div.sourceCode {
    background-color: var(--color-bg-secondary);
    border-radius: 5px;
}

pre.sourceCode {
    padding: 5px;
}

/***************/
/** NOT FOUND **/
/***************/

body.notfound {
    main {
        margin: 25vh 25%;

        h1 {
            font-size: 5em;
        }
    }
}

/********************/
/** RESPONSIVENESS **/
/********************/

/* Tablets */
@media screen and (min-width: 768px) and (max-width: 1268px) {
    body.home,
    body.page,
    body.post {
        margin: 0 15%;
    }

    note {
        margin: 1em 0;
        padding: 5px 0;
        width: 100%;
        display: block;
        border-left-width: 0;
        border-right-width: 0;
        border-top: 2px solid var(--color-border-primary);
        border-bottom: 2px solid var(--color-border-primary);
    }
}

/* Mobiles */
@media screen and (max-width: 768px) {
    body.home,
    body.page,
    body.post {
        margin: 0 5%;
    }

    note {
        margin: 1em 0;
        padding: 5px 0;
        width: 100%;
        display: block;
        border-left-width: 0;
        border-right-width: 0;
        border-top: 2px solid var(--color-border-primary);
        border-bottom: 2px solid var(--color-border-primary);
    }
}

/* Printing! */
@media print {
    body.page {
        margin: 0 10%;
    }

    body.post {
        margin: 0 10%;
    }

    note {
        margin: 1em 0;
        padding: 5px 0;
        width: 100%;
        display: block;
        border-left-width: 0;
        border-right-width: 0;
        border-top: 2px solid var(--color-border-primary);
        border-bottom: 2px solid var(--color-border-primary);
    }
}