body {
    scroll-padding-top: var(--navbar-offset)
}

#content {
    padding-top: var(--navbar-offset);
    padding-bottom: var(--footer-height);
    height: 100vh;
    overflow: hidden;
}

.top-wave {
    top: -90px;
    background-image: url("../images/wave-top.svg")
}

.bottom-wave {
    bottom: 0;
    background-image: url("../images/wave-bottom.svg")
}


/*
Footer
 */

footer {
    background: var(--bs-body-bg);
    position: fixed;
    bottom: 0;
    width: 100%;
    height: var(--footer-height);
    z-index: 4;
}

footer > .container {
    margin: 0;
    padding: 0 0 0.5rem 0;
    width: 100%;
    max-width: 100%;
}

footer hr {
    margin-top: 0
}

/*
Navbar
 */

.main-header .navbar {
    margin-bottom: 0
}

.navbar-brand img {
    width: auto;
    max-width: 160px;
    max-height: 120px;
    height: auto;
    object-fit: contain
}

.navbar-brand-domain {
    font-size: clamp(1.2rem, 1.5rem, 2rem);
    font-weight: 700;
    letter-spacing: 0.12em;
    color: var(--bs-body-color);
    text-transform: uppercase;
    display: inline-block;
    line-height: 1
}

.menu-main .nav-link {
    font-weight: 300;
    white-space: nowrap;
}

.menu-main.navbar-nav {
    gap: 0.5rem
}

.navbar.sticky-top {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1030
}

@media (min-width: 992px) {
    .navbar.sticky-top {
        height: var(--navbar-height);
        padding-top: 1.25rem;
        padding-bottom: 1.25rem;
        /*transition: height 200ms ease, padding 200ms ease*/
    }

    .navbar.sticky-top > .container {
        height: 100%
    }

    .navbar.sticky-top .navbar-brand img {
        max-width: 120px;
        max-height: var(--navbar-height);
        height: auto;
        width: auto;
        /*transition: height 200ms ease, padding 200ms ease*/
    }

    .navbar.sticky-top.scrolled {
        height: var(--navbar-height-scrolled);
        padding-top: 0.75rem;
        padding-bottom: 0.75rem
    }

    .navbar.sticky-top.scrolled .navbar-brand img {
        max-width: 100px;
        max-height: var(--navbar-height-scrolled);
        height: auto;
        width: auto
    }

    .navbar.sticky-top.scrolled .d-flex.order-lg-2 {
        gap: 0.5rem !important
    }
}

@media (max-width: 767.98px) {
    :root {
        --navbar-height: 170px
    }

    .navbar-brand img {
        width: 87px;
        height: 80px
    }
}

/*
Data Integration Gauge
 */

.clickable {
    cursor: pointer;
}
.gauge-container {
    --gauge-green: var(--georama-green);
    --gauge-orange: #ed7f2c;
    --gauge-red: #ed2c2c;
    --gauge-gray-light: #b0b0b0;
    --gauge-gray-dark: var(--georama-gray);
    --gauge-height: 180px;
    --gauge-padding: 10px;

    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
}

/* Creating the semi-circular ring */
.gauge-ring {
    width: var(--gauge-height);
    height: var(--gauge-height);
    margin-top: var(--gauge-padding);
    border-radius: 50%;
    mask: radial-gradient(transparent 62%, black 63%);
    -webkit-mask: radial-gradient(transparent 62%, black 63%);
}

.gauge-center {
    position: absolute;
    top: calc(var(--gauge-padding) + var(--gauge-height) / 5);
    display: flex;
    flex-direction: column;
}

.main-number {
    font-size: 3.5rem;
    font-weight: bold;
    color: var(--gauge-green);
    line-height: 1;
}

.stat-row {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 1.1rem;
}

.stat-num {
    font-size: 1.8rem;
    font-weight: bold;
    min-width: 2rem;
    text-align: right;
}

.orange { color: var(--gauge-orange); }
.gray { color: var(--gauge-gray-light); }
.red { color: var(--gauge-red); }


/*
Change List and detail forms
 */

.preview-image-sm {
    width: 70px;
    height: 70px;
}
.preview-image {
    width: 90px;
    height: 90px;
}
.preview-image-lg {
    width: 150px;
    height: 150px;
}

@media (max-width: 767.98px) {
    .preview-image-sm, .preview-image, .preview-image-lg {
        display: none;
    }
}

#breadcrumb-container {
    height: var(--breadcrumb-height);
}

#form-header-sticky {
    max-height: 100px;
    position: relative;
    top: 0;
    left: 0;
    right: 0;
    padding: 1.5rem 0;
}

/*
Permission table
 */

.permission-icon > i {
    width: 1.5em;
}

/*
Published Item Index Cards
 */

.item-card-body {
    display: flex;
    flex-direction: column;
}
.card-meta {
    margin-top: auto;
}



/*
CTA Click to action elements on frontpage
 */

.btn-cta {
    box-shadow: 3px 3px 0 var(--georama-yellow);
}

.cta-panel {
    border-color: var(--georama-border-color);
    background: linear-gradient(135deg, rgba(var(--georama-green-rgb), 0.18) 0%, rgba(var(--georama-green-rgb), 0.05) 55%, #ffffff 100%)
}

[data-bs-theme="dark"] .cta-panel {
    background: linear-gradient(135deg, rgba(var(--georama-green-rgb), 0.18) 0%, rgba(var(--georama-green-rgb), 0.05) 55%, #2f2f2f 100%)
}

.cta-panel h3 {
    color: var(--bs-emphasis-color);
}

/*
Landing Page Mind map
 */

.mindmap {
    --mindmap-radius: min(280px, 32vw);
    position: relative;
    width: min(720px, 90vw);
    aspect-ratio: 1/1;
    margin: 2.5rem auto 0;
}

.mindmap-center {
    position: absolute;
    top: 47%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 200px;
    height: 200px;
    border-radius: 50%;
    border: 4px solid var(--georama-green);
    background: var(--bs-body-bg);
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
}

.mindmap-center img {
    width: 85%;
    max-width: 150px;
    height: auto;
    display: block;
}

.mindmap-node {
    position: absolute;
    top: 50%;
    left: 50%;
    transform-origin: center;
    transform: translate(-50%, -50%) rotate(var(--angle)) translateY(calc(-1 * var(--mindmap-radius))) rotate(calc(-1 * var(--angle)));
    transition: transform 0.35s ease;
}

.mindmap-card {
    width: 170px;
    min-height: 190px;
    padding: 1rem;
    background: var(--bs-body-bg);
    border: 1px solid var(--georama-border-color);
    border-radius: 18px;
    box-shadow: -8px 8px 20px rgba(210, 164, 68, 0.24);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    text-align: center;
    transition: box-shadow 200ms ease, transform 200ms ease;
}

.mindmap-card:hover {
    box-shadow: -10px 10px 26px rgba(210, 164, 68, 0.4);
    transform: translate(1px, -1px);
}

.mindmap-card h5 {
    font-size: 1rem;
    font-weight: 600;
    color: var(--bs-emphasis-color);
}

.mindmap-card p {
    color: var(--bs-secondary-color);
    font-size: 0.85rem;
    margin-bottom: 0.35rem;
}

.mindmap-card .icon-circle {
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 0.5rem;
}

.mindmap-card .btn {
    align-self: center;
}

.mindmap-card .d-flex {
    justify-content: center;
}

.mindmap-card a.user-btn {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
}

.icon-circle {
    width: 93px;
    height: 93px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    margin: 0 auto;
    background: var(--brand-cream);
    color: var(--georama-green-dark);
    font-size: 2.6rem
}

.icon-circle img {
    width: 60%;
    height: 60%;
    object-fit: contain;
    display: block
}

@media (max-width: 992px) {
    .mindmap {
        --mindmap-radius: min(220px, 40vw);
    }
}

@media (max-width: 768px) {
    .mindmap {
        position: static;
        display: flex;
        flex-direction: column;
        gap: 1rem;
        align-items: center;
        width: 100%;
        margin: 0;
    }

    .mindmap-center {
        display: none;
    }

    .mindmap-node {
        position: static;
        transform: none;
    }

    .mindmap-card {
        width: 360px;
    }
}