/**************************************************
    CMS Related Styles
***************************************************/

:root {
    --box-shadow-lift: 0 1rem 2.5rem rgba(0, 0, 0, 0.9), 0 .5rem 1rem -.75rem rgba(0, 0, 0, 0.9);
    --box-shadow-lift-lg: 0 2rem 5rem rgba(0, 0, 0, 0.9), 0 .5rem 1rem -.75rem rgba(0, 0, 0, 0.95);
    --spacer: 1rem;  /* should match bootstrap theme used */
}

/** Global **/
html {
    scroll-padding-top: 5em;
}

/* Loading */
#preloader {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #fff;
    z-index: 9999;
}

    #preloader #preloader_status {
        width: 200px;
        height: 200px;
        position: absolute;
        left: 50%;
        top: 50%;
        background-image: url(https://cdn.jsdelivr.net/gh/sphere10/cdn/local-notion/themes/cms/resources/img/bx_loader.gif);
        background-repeat: no-repeat;
        background-position: center;
        margin: -100px 0 0 -100px;
    }

/* Large Spacer Classes not available in Bootstrap 5.3 */
:root {
    --scale-unit: 5; /* Base unit in rem-based scaling */
    --spacing-unit: 0.5; /* Base unit for ref-based padding and margin */

    /* Scaling Sizes */
    --scale-xxs: calc(var(--scale-unit) * 1rem);
    --scale-xs: calc(var(--scale-unit) * 2rem);
    --scale-sm: calc(var(--scale-unit) * 3rem);
    --scale-md: calc(var(--scale-unit) * 5rem);
    --scale-lg: calc(var(--scale-unit) * 7rem);
    --scale-xl: calc(var(--scale-unit) * 9rem);
    --scale-xxl: calc(var(--scale-unit) * 12rem);
    
    /* Spacing Sizes */
    --spacing-xxs: calc(var(--spacing-unit) * 1rem);
    --spacing-xs: calc(var(--spacing-unit) * 2rem);
    --spacing-sm: calc(var(--spacing-unit) * 3rem);
    --spacing-md: calc(var(--spacing-unit) * 6rem);
    --spacing-lg: calc(var(--spacing-unit) * 12rem);
    --spacing-xl: calc(var(--spacing-unit) * 20rem);
    --spacing-xxl: calc(var(--spacing-unit) * 32rem);
}

/* Percentage Width/Height (Static) */
.w-5 { width: 5% !important; }
.w-10 { width: 10% !important; }
.w-15 { width: 15% !important; }
.h-5 { height: 5% !important; }
.h-10 { height: 10% !important; }
.h-15 { height: 15% !important; }

/* REM-Based CMS Width/Height */
.w-xxs { width: var(--scale-xxs) !important; }
.w-xs { width: var(--scale-xs) !important; }
.w-sm { width: var(--scale-sm) !important; }
.w-md { width: var(--scale-md) !important; }
.w-lg { width: var(--scale-lg) !important; }
.w-xl { width: var(--scale-xl) !important; }
.w-xxl { width: var(--scale-xxl) !important; }
.h-xxs { height: var(--scale-xxs) !important; }
.h-xs { height: var(--scale-xs) !important; }
.h-sm { height: var(--scale-sm) !important; }
.h-md { height: var(--scale-md) !important; }
.h-lg { height: var(--scale-lg) !important; }
.h-xl { height: var(--scale-xl) !important; }
.h-xxl { height: var(--scale-xxl) !important; }

/* Min/Max Width/Height */
.w-min-xxs { min-width: var(--scale-xxs) !important; }
.w-min-xs { min-width: var(--scale-xs) !important; }
.w-min-sm { min-width: var(--scale-sm) !important; }
.w-min-md { min-width: var(--scale-md) !important; }
.w-min-lg { min-width: var(--scale-lg) !important; }
.w-min-xl { min-width: var(--scale-xl) !important; }
.w-min-xxl { min-width: var(--scale-xxl) !important; }
.w-max-xxs { max-width: var(--scale-xxs) !important; }
.w-max-xs { max-width: var(--scale-xs) !important; }
.w-max-sm { max-width: var(--scale-sm) !important; }
.w-max-md { max-width: var(--scale-md) !important; }
.w-max-lg { max-width: var(--scale-lg) !important; }
.w-max-xl { max-width: var(--scale-xl) !important; }
.w-max-xxl { max-width: var(--scale-xxl) !important; }
.h-min-xxs { min-height: var(--scale-xxs) !important; }
.h-min-xs { min-height: var(--scale-xs) !important; }
.h-min-sm { min-height: var(--scale-sm) !important; }
.h-min-md { min-height: var(--scale-md) !important; }
.h-min-lg { min-height: var(--scale-lg) !important; }
.h-min-xl { min-height: var(--scale-xl) !important; }
.h-min-xxl { min-height: var(--scale-xxl) !important; }
.h-max-xxs { max-height: var(--scale-xxs) !important; }
.h-max-xs { max-height: var(--scale-xs) !important; }
.h-max-sm { max-height: var(--scale-sm) !important; }
.h-max-md { max-height: var(--scale-md) !important; }
.h-max-lg { max-height: var(--scale-lg) !important; }
.h-max-xl { max-height: var(--scale-xl) !important; }
.h-max-xxl { max-height: var(--scale-xxl) !important; }

/* Margin Classes */
.m-xxs { margin: var(--spacing-xxs) !important; }
.m-xs { margin: var(--spacing-xs) !important; }
.m-sm { margin: var(--spacing-sm) !important; }
.m-md { margin: var(--spacing-md) !important; }
.m-lg { margin: var(--spacing-lg) !important; }
.m-xl { margin: var(--spacing-xl) !important; }
.m-xxl { margin: var(--spacing-xxl) !important; }

.mt-xxs { margin-top: var(--spacing-xxs) !important; }
.mt-xs { margin-top: var(--spacing-xs) !important; }
.mt-sm { margin-top: var(--spacing-sm) !important; }
.mt-md { margin-top: var(--spacing-md) !important; }
.mt-lg { margin-top: var(--spacing-lg) !important; }
.mt-xl { margin-top: var(--spacing-xl) !important; }
.mt-xxl { margin-top: var(--spacing-xxl) !important; }

.mb-xxs { margin-bottom: var(--spacing-xxs) !important; }
.mb-xs { margin-bottom: var(--spacing-xs) !important; }
.mb-sm { margin-bottom: var(--spacing-sm) !important; }
.mb-md { margin-bottom: var(--spacing-md) !important; }
.mb-lg { margin-bottom: var(--spacing-lg) !important; }
.mb-xl { margin-bottom: var(--spacing-xl) !important; }
.mb-xxl { margin-bottom: var(--spacing-xxl) !important; }

.ms-xxs { margin-inline-start: var(--spacing-xxs) !important; }
.ms-xs { margin-inline-start: var(--spacing-xs) !important; }
.ms-sm { margin-inline-start: var(--spacing-sm) !important; }
.ms-md { margin-inline-start: var(--spacing-md) !important; }
.ms-lg { margin-inline-start: var(--spacing-lg) !important; }
.ms-xl { margin-inline-start: var(--spacing-xl) !important; }
.ms-xxl { margin-inline-start: var(--spacing-xxl) !important; }

.me-xxs { margin-inline-end: var(--spacing-xxs) !important; }
.me-xs { margin-inline-end: var(--spacing-xs) !important; }
.me-sm { margin-inline-end: var(--spacing-sm) !important; }
.me-md { margin-inline-end: var(--spacing-md) !important; }
.me-lg { margin-inline-end: var(--spacing-lg) !important; }
.me-xl { margin-inline-end: var(--spacing-xl) !important; }
.me-xxl { margin-inline-end: var(--spacing-xxl) !important; }

/* Padding Classes */
.p-xxs { padding: var(--spacing-xxs) !important; }
.p-xs { padding: var(--spacing-xs) !important; }
.p-sm { padding: var(--spacing-sm) !important; }
.p-md { padding: var(--spacing-md) !important; }
.p-lg { padding: var(--spacing-lg) !important; }
.p-xl { padding: var(--spacing-xl) !important; }
.p-xxl { padding: var(--spacing-xxl) !important; }

.pt-xxs { padding-top: var(--spacing-xxs) !important; }
.pt-xs { padding-top: var(--spacing-xs) !important; }
.pt-sm { padding-top: var(--spacing-sm) !important; }
.pt-md { padding-top: var(--spacing-md) !important; }
.pt-lg { padding-top: var(--spacing-lg) !important; }
.pt-xl { padding-top: var(--spacing-xl) !important; }
.pt-xxl { padding-top: var(--spacing-xxl) !important; }

.pb-xxs { padding-bottom: var(--spacing-xxs) !important; }
.pb-xs { padding-bottom: var(--spacing-xs) !important; }
.pb-sm { padding-bottom: var(--spacing-sm) !important; }
.pb-md { padding-bottom: var(--spacing-md) !important; }
.pb-lg { padding-bottom: var(--spacing-lg) !important; }
.pb-xl { padding-bottom: var(--spacing-xl) !important; }
.pb-xxl { padding-bottom: var(--spacing-xxl) !important; }

.ps-xxs { padding-inline-start: var(--spacing-xxs) !important; }
.ps-xs { padding-inline-start: var(--spacing-xs) !important; }
.ps-sm { padding-inline-start: var(--spacing-sm) !important; }
.ps-md { padding-inline-start: var(--spacing-md) !important; }
.ps-lg { padding-inline-start: var(--spacing-lg) !important; }
.ps-xl { padding-inline-start: var(--spacing-xl) !important; }
.ps-xxl { padding-inline-start: var(--spacing-xxl) !important; }

.pe-xxs { padding-inline-end: var(--spacing-xxs) !important; }
.pe-xs { padding-inline-end: var(--spacing-xs) !important; }
.pe-sm { padding-inline-end: var(--spacing-sm) !important; }
.pe-md { padding-inline-end: var(--spacing-md) !important; }
.pe-lg { padding-inline-end: var(--spacing-lg) !important; }
.pe-xl { padding-inline-end: var(--spacing-xl) !important; }
.pe-xxl { padding-inline-end: var(--spacing-xxl) !important; }


/* Lifting effect */
.lift {
    box-shadow: 0 0 0 rgba($black, 0);
    transition: box-shadow .25s ease, transform .25s ease;
}

    .lift:hover,
    .lift:focus {
        box-shadow: var(--box-shadow-lift) !important;
        transform: translate3d(0, -3px, 0);
    }

.lift-lg:hover,
.lift-lg:focus {
    box-shadow: var(--box-shadow-lift-lg) !important;
    transform: translate3d(0, -5px, 0);
}

/* Text Shadows */
.text-shadow-sm { text-shadow: 0 0.08em 0.15em rgba(0, 0, 0, 0.1); }
.text-shadow { text-shadow: 0 0.1em 0.2em rgba(0, 0, 0, 0.15), 0 0.06em 0.12em rgba(0, 0, 0, 0.1); }
.text-shadow-md { text-shadow: 0 0.2em 0.3em rgba(0, 0, 0, 0.15), 0 0.1em 0.2em rgba(0, 0, 0, 0.1); }
.text-shadow-lg { text-shadow: 0 0.35em 0.45em rgba(0, 0, 0, 0.15), 0 0.2em 0.3em rgba(0, 0, 0, 0.1); }
.text-shadow-xl { text-shadow: 0 0.5em 0.7em rgba(0, 0, 0, 0.2), 0 0.3em 0.4em rgba(0, 0, 0, 0.1); }
.text-shadow-2xl { text-shadow: 0 0.6em 1.2em rgba(0, 0, 0, 0.3); }
.text-shadow-none { text-shadow: none; }

/* Text Alignment (missing from Bootstrap 5.3) */
.text-justify { text-align: justify !important; }
    
/* Cursors */
.cursor-auto { cursor: auto; }
.cursor-default { cursor: default; }
.cursor-pointer { cursor: pointer; }
.cursor-wait { cursor: wait; }
.cursor-text { cursor: text; }
.cursor-move { cursor: move; }
.cursor-not-allowed { cursor: not-allowed; }
.cursor-crosshair { cursor: crosshair; }
.cursor-help { cursor: help; }


/** NAVBAR **/
.nav-logo-size {
    max-height: 3rem !important;
}

.nav-link {
    border-bottom: 2px solid transparent;
    border-radius: var(--bs-border-radius);
    transition: border-color .1s ease-in-out, border-radius .1s ease-in-out;
}

    .nav-link:hover {
        border-bottom-color: currentColor;
        border-radius: 0;
    }

    .nav-link.active {
        border-radius: var(--bs-border-radius);
        pointer-events: none;
    }

.dropdown-menu {
    min-width: 22rem;
}

.placeholder-secondary::placeholder {
    --bs-text-opacity: 1;
    color: rgba(var(--bs-secondary-rgb), var(--bs-text-opacity)) !important;
}

/** ARTICLES **/
.article-summary {
    margin-bottom: 40px;
    padding-bottom: 40px;
    border-bottom: 2px solid #DFE7FB;
    transition: all .4s ease;
}

.article-summary-thumbnail {
    border: none;
    box-shadow: none;
    padding: 0.25rem;
    max-width: 8em;
    max-height: 8em;
    min-width: 8em;
    min-height: 8em;
}


.article-category-indent-1 {
    padding-left: calc(1.25rem * 1 + 1rem) !important;
}

.article-category-indent-2 {
    padding-left: calc(1.25rem * 2 + 1rem) !important;
}

.article-category-indent-3 {
    padding-left: calc(1.25rem * 3 + 1rem) !important;
}

.article-category-indent-4 {
    padding-left: calc(1.25rem * 4 + 1rem) !important;
}

.article-category-indent-4 {
    padding-left: calc(1.25rem * 5 + 1rem) !important;
}

.article-category-indent-6 {
    padding-left: calc(1.25rem * 6 + 1rem) !important;
}

/** SECTIONS **/

.ln-badge-rounded-circle {
    height: calc(1em + var(--bs-badge-padding-y) * 2);
    padding-left: var(--bs-badge-padding-y);
    padding-right: var(--bs-badge-padding-y);
    border-radius: var(--bs-border-radius-pill)
}

.ln-badge-rounded-circle > * {
    display: block;
    width: 1em
}

.ln-badge-rounded-circle.badge-lg {
    height: calc(1em + var(--bs-badge-padding-y-lg) * 2);
    padding-left: var(--bs-badge-padding-y-lg);
    padding-right: var(--bs-badge-padding-y-lg)
}


.shape {
    pointer-events: none;
    position: absolute
}

    .shape > * {
        display: block
    }

    .shape:not([class*=shape-blur]) {
        overflow: hidden
    }

        .shape:not([class*=shape-blur]) > * {
            transform: scale(2)
        }

@media (-ms-high-contrast:active), (-ms-high-contrast:none) {
    .shape > svg {
        display: none
    }
}

/** SECTION SHAPE SEPARATORS **/
.shape-top {
    left: 0;
    right: 0;
    top: 0
}

    .shape-top > * {
        transform-origin: bottom center
    }

.shape-end {
    bottom: 0;
    left: 0;
    right: 0;
    top: 0
}

    .shape-end > * {
        bottom: inherit;
        position: inherit;
        right: inherit;
        top: inherit;
        transform-origin: center left
    }

.shape-bottom {
    bottom: 0;
    left: 0;
    right: 0
}

    .shape-bottom > * {
        transform-origin: top center
    }

.shape-bottom-100 {
    bottom: 100%;
    left: 0;
    right: 0
}

    .shape-bottom-100 > * {
        transform-origin: top center
    }

.shape-start {
    bottom: 0;
    left: 0;
    right: 0;
    top: 0
}

    .shape-start > * {
        bottom: inherit;
        left: inherit;
        position: inherit;
        top: inherit;
        transform-origin: center right
    }

.shape-fluid-x > * {
    height: auto;
    width: 100%
}

.shape-fluid-y > * {
    height: 100%;
    width: auto
}

.shape-flip-x {
    transform: scaleX(-1)
}

.shape-blur-1 {
    left: 0;
    right: 0;
    top: 0
}

@media(min-width:992px) {
    .shape-blur-1 {
        bottom: 0;
        left: 50%;
        right: auto
    }
}

.shape-blur-1 > * {
    height: auto;
    width: 100%
}

@media(min-width:992px) {
    .shape-blur-1 > * {
        height: 100%;
        width: auto
    }
}

.shape-blur-2 {
    left: 0;
    right: 0;
    top: 0
}

@media(min-width:992px) {
    .shape-blur-2 {
        bottom: 0;
        left: auto;
        right: 50%
    }
}

.shape-blur-2 > * {
    height: auto;
    width: 100%
}

@media(min-width:992px) {
    .shape-blur-2 > * {
        float: right;
        height: 100%;
        width: auto
    }
}

.shape-blur-3 {
    left: 0;
    right: 0;
    top: 0
}

    .shape-blur-3 > * {
        height: auto;
        width: 100%
    }

.shape-blur-4 {
    bottom: 0;
    left: 50%;
    top: 0;
    transform: translateX(-50%) scale(1.3);
    width: 100%
}

    .shape-blur-4 > * {
        height: 100%;
        margin-left: auto;
        margin-right: auto;
        width: auto
    }


/** HEADER **/

/* Ensure carousel content stays on top */
.carousel-inner {
    z-index: 1; /* Keeps carousel controls and content above particles */
}

.carousel-control-prev, .carousel-control-next, .carousel-indicators {
    z-index: 2; /* Keeps carousel controls above caption and particles */
}

.carousel-caption {
    position: absolute;
    top: 0%;
    left: 0%;
    height: 100%;
    width: 100%;
    text-align: center;
    align-content: center;
    z-index: 2; /* Ensures caption is on top */
}

/* Default styles for small screens */
.carousel h1 {
    font-size: 3rem; /* Adjust for small screens */
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3); /* Softer shadow */
}

.carousel h2 {
    font-size: 2.5rem; /* Adjust for small screens */
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);
}

.carousel h3 {
    font-size: 1.5rem; /* Adjust for small screens */
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);
}


/* Medium screens and up (>= 768px) */
@media (min-width: 768px) {
    .carousel h1 {
        font-size: 4rem; /* Larger font for medium screens */
        text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.4); /* Slightly stronger shadow */
    }

    .carousel h2 {
        font-size: 3rem;
        text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.4);
    }

    .carousel h3 {
        font-size: 2rem;
        text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.4);
    }
}

/* Large screens and up (>= 992px) */
@media (min-width: 992px) {
    .carousel h1 {
        font-size: 5rem; /* Full size for large screens */
        text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5); /* Stronger shadow */
    }

    .carousel h2 {
        font-size: 3.5rem;
        text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
    }

    .carousel h3 {
        font-size: 2.5rem;
        text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
    }
}

/* GALLERY */

.ln-gallery > nav > a {
    background-color: transparent;
    color: var(--bs-body-color);
    font-weight: lighter;
    align-content: center;
    text-decoration: none;
}

    .ln-gallery > nav > a.active {
        background-color: var(--bs-primary);
        color: var(--bs-white);
    }