/* Global Styles */
*,
*::before,
*::after {
    box-sizing: border-box;
}

/* Body and HTML Styles */
html {
    font-family: sans-serif;
    line-height: 1.15;
    -webkit-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
}

body, html {
    font-family: "Noto Serif", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
    font-size: 14px;
    line-height: 1.43rem;
    color: rgba(0,0,0,0.87);
    background: #fff;
    margin: 0;
}

/* Typography */
body {
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    color: #212529;
    text-align: left;
}

/* Paragraph Styles */
p {
    margin-top: 0;
    margin-bottom: 1rem;
    text-align: justify;
    line-height: 1.785rem;
}

.pkp_structure_main p:last-child,
.pkp_page_index .additional_content>p:last-child {
    margin-bottom: 0;
}

/* Root Variables */
:root {
    --main-color: #1d419f;
    --text-color: #fff;
    --text-inverse-color: #444;
    --main-hover-color: #033262;
    --nav-background: #ffffff;
    --nav-hover: var(--main-color);
    --nav-color: #1b2c3d;
    --nav-hover-inverse: #fff;
    --sidebar-main-color: var(--main-color);
    --sidebar-background-color: #f8f9fa;
    --sidebar-title-color: #fff;
    --sidebar-item-color: #1b2c3d;
    --sidebar-hover-color: #ddd;
    --sidebar-link-color: var(--main-color);
    --header-background-color: var(--main-color);
    --tab-header-color: var(--main-color);
    --tab-background-color: #f2f5fc;
    --tab-text-color: var(--text-color);
    --tab-hover-color: var(--sidebar-hover-color);
    --border-color: #f9fbfeef;
    --toc-heading-background: #f8f9fa;
    --body-link-color: var(--main-color);
    --body-link-hover-color: var(--main-hover-color);
}

/* Color Palette */
:root {
    --blue: #007bff;
    --indigo: #6610f2;
    --purple: #6f42c1;
    --pink: #e83e8c;
    --red: #dc3545;
    --orange: #fd7e14;
    --yellow: #ffc107;
    --green: #28a745;
    --teal: #20c997;
    --cyan: #17a2b8;
    --white: #fff;
    --gray: #6c757d;
    --gray-dark: #343a40;
    --primary: #007bff;
    --secondary: #6c757d;
    --success: #28a745;
    --info: #17a2b8;
    --warning: #ffc107;
    --danger: #dc3545;
    --light: #f8f9fa;
    --dark: #343a40;
    --breakpoint-xs: 0;
    --breakpoint-sm: 576px;
    --breakpoint-md: 768px;
    --breakpoint-lg: 992px;
    --breakpoint-xl: 1200px;
    --font-family-sans-serif: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
    --font-family-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}

/* Header and Navigation */
nav {
    background-color: var(--nav-background);
}

nav a:hover {
    color: var(--nav-hover);
}

/* Sidebar */
.sidebar {
    background-color: var(--sidebar-background-color);
    color: var(--sidebar-item-color);
}

.sidebar a {
    color: var(--sidebar-link-color);
}

.sidebar a:hover {
    color: var(--sidebar-hover-color);
}

/* Links */
a {
    color: var(--body-link-color);
}

a:hover {
    color: var(--body-link-hover-color);
}

/* Sidebar Subheadings - Add Blue Colored Blocks */
.sidebar .latest-publications, 
.sidebar .browse, 
.sidebar .make-submission, 
.sidebar .information, 
.sidebar .language {
    background-color: var(--main-color); /* Blue background */
    color: var(--text-color); /* White text color */
    padding: 10px; /* Add padding for spacing */
    margin-bottom: 15px; /* Space between blocks */
    font-weight: bold; /* Make the text bold */
    border-radius: 5px; /* Optional: rounded corners */
}

/* Optional: Hover effect for when the user hovers over these blocks */
.sidebar .latest-publications:hover, 
.sidebar .browse:hover, 
.sidebar .make-submission:hover, 
.sidebar .information:hover, 
.sidebar .language:hover {
    background-color: var(--main-hover-color); /* Darker blue when hovered */
}
