/* Global Transitions */
html {
    /* Smooth scrolling makes the jump less jarring */
    scroll-behavior: smooth;
}

body {
    transition: background-color 0.7s ease-in-out;
    background-color: #FFFFFF;
}

/* Overrides the default behaviour for the side nav that blocks the sticky behaviour */

.pusher {
    overflow: visible !important;
    /* transform: none !important; */
    background-color: #ffffff; 
    transition: background-color 0.5s ease-in-out !important;
    
}

/* Layout adjustment for scroll-sections */

.scroll-story {
    padding-top: 140px !important; 
    min-height: 100vh;
}

/* Left Navigation Menu */
.ui.vertical.menu {
    width: 100% !important;
    border: none;
    background: transparent;
}

.ui.vertical.menu .item {
    color: rgba(0,0,0,0.4);
    font-weight: 700;
    transition: color 0.3s ease;
    padding-left: 1.5em;
}

.ui.vertical.menu .item.active {
    color: rgba(0,0,0,1);
    background: transparent !important;
    text-decoration:underline;
}

/* Section Styling */
.scroll-section {
    scroll-margin-top: 140px; 
    padding: 2rem 2rem;
    min-height: 100vh; /* Full viewport height min */
    background-color: transparent !important;
}

/* Sticky magic */

.global-sticky-menu {
    position: sticky;
    top: 10em; /* Distance from top of browser */
    max-height: calc(100vh - 40px);
    overflow-y: auto;
}

.section-intro-sticky {
    position: -webkit-sticky; /* Safari support */
    position: sticky;
    top: 10em;
    z-index: 10;
    height: fit-content;
}

.ui.grid > .row {
  display: flex;
  align-items: stretch; 
}

/* Typography for the sticky headers */
.section-intro-sticky h1.header {
    font-size: 2em;
    line-height: 1;
    margin-bottom: 0.5em;
}

.section-intro-sticky p {
    font-size: 1.2em;
    opacity: 0.6;
    max-width: 250px;
}

/* Mobile Responsiveness */
@media only screen and (max-width: 768px) {
    .ui.left.fixed.vertical.menu { display: none; } /* Hide Side Nav on Mobile */
    .section-intro-sticky { position: relative; top: 0; margin-bottom: 30px;} /* Unstick on mobile */
    .section-intro-sticky h1.header { font-size: 2.5em; }
    .scroll-section { padding: 40px 20px; }
}

.chartBox {
    min-height: 18rem;
}

.bad { color: #b91c1c; font-weight: 700; }
.good { color: #15803d; font-weight: 700; }
.muted { color: #666; }