@import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.13.1/font/bootstrap-icons.min.css");
@import url('https://fonts.googleapis.com/css2?family=Newsreader:ital,opsz,wght@0,6..72,200..800;1,6..72,200..800&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Raleway:ital,wght@0,100..900;1,100..900&display=swap');

/* variables */
:root {
    --bs-font-sans-serif: "Raleway", sans-serif !important;
    --jr-font-serif: "Newsreader", serif;

    --jr-primary: #0082c4;
    --jr-primary-hover: #0074ac;

    --jr-dark: #1e1e1e;
}

/* override selection colors */
::selection {
    background: var(--jr-primary);
    color: white;
}

/* change all cursors to default */
html, body {
    cursor: default;
}

/* caret only for text entry */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="search"],
input[type="url"],
input[type="number"],
textarea {
    cursor: text;
}

/* viewable images show magnifying glass */
img.viewable {
    cursor: zoom-in;
}

/* pointer for clickable/interactable elements */
a,
button,
[role="button"],
[role="link"],
input[type="submit"],
input[type="button"],
input[type="reset"],
select,
summary {
    cursor: pointer;
}

/* nav styles */
.jr-nav {
    background: #fffd;
    backdrop-filter: blur(3px);
}

.jr-nav-link {
    font-size: 1.15rem;
    color: var(--bs-dark);
    text-decoration: none;

    padding-bottom: 0.25rem;
    border-bottom: 1px solid transparent;

    transition: border-color 0.1s ease-in-out;
}

.jr-nav-link:hover {
    border-bottom: 1px solid var(--jr-primary);
}

@media (max-width: 767.98px) {
    .jr-nav {
        position: sticky;
        top: 0;
        left: 0;
    }
}

/* text utils */
.jr-text-serif {
    font-family: var(--jr-font-serif), serif;
}

.jr-text-shadow {
    text-shadow: 0 0 5px #0008;
}

/* form styles */
.jr-form-control {
    border-radius: 0 !important;
}

.jr-form-control:focus {
    border-color: var(--jr-primary) !important;
}

.form-check-input:checked {
    background-color: var(--jr-primary) !important;
    border-color: var(--jr-primary) !important;
}

.form-check-input:focus {
    outline: 4px solid #00000030 !important;
    box-shadow: none;
    border-color: var(--jr-primary) !important;
}


.jr-btn-primary {
    color: white;
    border: 0 !important;
    background-color: var(--jr-primary) !important;
}

.jr-btn-primary:hover {
    color: white;
    background-color: var(--jr-primary-hover) !important;
}

.jr-btn-primary:focus {
    color: white !important;
}

/* carousel styles */
.jr-carousel-slide {
    aspect-ratio: 3;
    max-height: 75vh;
}

.jr-header-banner {
    width: 100%;
    aspect-ratio: 3;
    max-height: 40vh;
}

@media (max-width: 991.98px) {
    /* lg */
    .jr-carousel-slide, .jr-header-banner {
        aspect-ratio: 2;
    }
}

@media (max-width: 767.98px) {
    /* md */
    .jr-carousel-slide, .jr-header-banner {
        aspect-ratio: 1.25;
    }
}

/* card styles */
.jr-card-image {
    overflow: hidden;
    transition: box-shadow 0.1s ease;
}

.jr-card-image img {
    transition: transform 0.1s ease;
}

.jr-card:hover .jr-card-image img {
    transform: scale(1.05);
}

.jr-card:hover .jr-card-image {
    box-shadow: var(--bs-box-shadow-sm);
}

/* toast styles */
#toast-container {
    position: fixed;
    bottom: 1rem;
    right: 1rem;
    z-index: 1080;
}

.jr-toast {
    opacity: 0;
    transform: translateY(100px);
    transition: all 0.3s ease-in-out;
    min-width: 220px;
}

.jr-toast.show {
    opacity: 1;
    transform: translateY(0);
}

/* random utils */
/* Hide scrollbar for Chrome, Safari and Opera */
.disable-scroll-bar::-webkit-scrollbar {
    display: none;
}

/* Hide scrollbar for IE, Edge and Firefox */
.disable-scroll-bar {
    -ms-overflow-style: none; /* IE and Edge */
    scrollbar-width: none; /* Firefox */
}

.jr-figure {
    border-left: 5px solid var(--jr-dark);
    padding: 0.25rem 0 0.25rem 1rem;
}