@import "../basic.css";
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@100;200;300;400;500;600;700;800;900&display=swap');

:root {
    /* Font Size */
    --pst-font-size-base: 16px;
    --pst-font-size-h1: 36px;
    --pst-font-size-h2: 30px;
    --pst-font-size-h3: 26px;
    --pst-font-size-h4: 22px;
    --pst-font-size-h5: 18px;
    --pst-font-size-h6: 16px;

    /* Font Family */
    --pst-font-family-base: 'Montserrat', sans-serif;

    /* ---- Brisk Colour Palette ---- */

    /* Blue */
    --blue: #3d98f0;
    --blue-dark: #07315a;

    /* Green */
    --green: #00a878;
    --green-dark: #006b4c;
    --green-light: #00b27f;

    /* Orange */
    --orange: #de6b48;
    --orange-dark: #a03b1d;
    --orange-light: #e48568;

    /* ---- Semantic Colour Aliases ---- */
    --primary-color: var(--blue);
    --accent-color: var(--green);
    --accent-color-dark: var(--green-dark);
    --accent-color-light: var(--green-light);
    --important-color: var(--orange);
    --important-color-dark: var(--orange-dark);
    --important-color-light: var(--orange-light);
}

a {
    text-decoration: none;
}

a:hover {
    color: var(--primary-color) !important;
}

strong {
    color: var(--primary-color);
}

em {
    color: var(--primary-color);
}

.reference.external {
    color: var(--accent-color);
}

.std.std-ref {
    color: var(--accent-color);
}
.std.std-ref:hover {
    color: var(--primary-color);
}

/* ----------------- */
/* Grid Card         */
/* ----------------- */
.sd-card {
    background-color: var(--bg-color-dark) !important;
    border: 2px solid var(--border-color) !important;
    border-radius: 0 !important;
}
.sd-card .sd-card-header,
.sd-card .sd-card-body,
.sd-card .sd-card-footer {
    background-color: transparent !important;
}
.sd-card .sd-card-header {
    border-bottom: 1px solid var(--border-color) !important;
}
.sd-card:hover {
    border-color: var(--primary-color) !important;
}
.sd-card-header {
    font-size: var(--pst-font-size-h4);
    font-weight: 600;
}
.sd-card-body {
    font-size: var(--pst-font-size-base);
}

/* ----------------- */
/* Code Block         */
/* ----------------- */
.code-block-caption span{
    font-size: var(--pst-font-size-h5);
    font-weight: 600;
}

/* ----------------- */
/* Primary Sidebar */
/* ----------------- */
.bd-sidebar-primary {
    --pst-color-primary: var(--brand-color);
    background-color: var(--bg-color-light) !important;
    border-right: 1px solid var(--border-color) !important;
    box-shadow: -100vw 0 0 0 var(--bg-color-light);
}
.bd-links-nav a:hover {
    color: var(--accent-color) !important;
}

/* ----------------- */
/* Secondary Sidebar */
/* ----------------- */
.bd-sidebar-secondary {
    --pst-color-primary: var(--brand-color);
    background-color: var(--bg-color-light) !important;
    border-left: 1px solid var(--border-color) !important;
    box-shadow: 100vw 0 0 0 var(--bg-color-light);
}

/* ----------------- */
/* Prev/Next Buttons */
/* ----------------- */
.prev-next-title {
    color: var(--accent-color) !important;
}
.prev-next-title:hover {
    color: var(--primary-color) !important;
}

/* ----------------- */
/* Light/Dark Theme */
/* ----------------- */
html[data-theme="light"] {
    --brand-color: #1175d5;
    --bg-color: #ebebeb;
    --bg-color-dark: #d5d5d5;
    --bg-color-light: #f5f5f5;
    --border-color: #c3c3c3;
    --border-color-muted: #b7b7b7;

    --pst-color-primary: var(--accent-color);
    --pst-color-secondary: var(--accent-color);
    --pst-text-color: #000000 !important;

    background: linear-gradient(to bottom, var(--bg-color-light), var(--bg-color-dark)) fixed;

    body {
        background: transparent !important;
    }

    /* Navbar */
    .bd-header {
        background-color: var(--bg-color-dark) !important;
    }
    .bd-header a p {
        color: var(--pst-text-color) !important;
    }
}

html[data-theme="dark"] {
    --brand-color: #1175d5;
    --bg-color: #181818;
    --bg-color-dark: #121212;
    --bg-color-light: #282828;
    --border-color: #404040;
    --border-color-muted: #363636;

    --pst-color-primary: var(--accent-color);
    --pst-color-secondary: var(--accent-color);
    --pst-text-color: #EFEFEF !important;

    background: linear-gradient(to bottom, var(--bg-color-light), var(--bg-color-dark)) fixed;

    body {
        background: transparent !important;
    }

    /* Navbar */
    .bd-header {
        background-color: var(--bg-color-dark) !important;
    }
    .bd-header a p {
        color: var(--pst-text-color) !important;
    }
}

/* -------------------- */
/* API Reference Tables */
/* -------------------- */
.pst-scrollable-table-container tr:nth-child(odd) {
    background-color: var(--bg-color-light) !important;
}
.pst-scrollable-table-container tr:nth-child(even) {
    background-color: var(--bg-color-dark) !important;
}
.pst-scrollable-table-container tr:hover {
    background-color: inherit !important;
}

.pst-scrollable-table-container th {
    padding: 0.75rem;
    vertical-align: bottom;
    border-bottom: 2px solid var(--accent-color);
    font-weight: 600;
}

/* First column (Object column) styling */
.pst-scrollable-table-container td:first-child {
    width: 30%;
    font-family: var(--pst-font-family-monospace);
}

/* Second column (Description column) styling */
.pst-scrollable-table-container td:last-child {
    width: 70%;
}

/* ----------------------- */
/* API Function Signatures */
/* ----------------------- */
dt:target {
    background-color: rgba(0, 224, 161, 0.1) !important;
    border-left: 3px solid var(--accent-color);
}

dt.sig {
    transition: background-color 1.0s ease;
}


/* Navbar */
#navbar-main-elements .nav-link {
    color: var(--pst-text-color) !important;
}

#navbar-main-elements .nav-link:hover {
    color: var(--accent-color) !important;
}

#navbar-main-elements .active-nav-link {
    color: var(--brand-color) !important;
    font-weight: bold;
}