/* Custom styles for the website */

/* Navigation bar */
.navbar {
    background-color: #b00000; /* Light grey similar to Apple's website */
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; /* Helvetica Neue font */
    font-weight: 300; /* Thin font weight */
}

/* Main content */
body {
    background-color: #fcfcfc; /* Same light grey as navigation bar */
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; /* Helvetica Neue font */
    font-weight: 300; /* Thin font weight */
    opacity: 0; /* Initially hide body */
    transition: opacity 1.8s ease; /* Smooth fade-in transition */
}

/* Apply Helvetica Neue font to specific elements */
h1, h2, h3, h4, h5, h6, p, li, a {
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif !important;
}

/* Change the color of individual navigation items when hovered, focused, or active */
.navbar .navbar-nav li a:hover,
.navbar .navbar-nav li a:focus,
.navbar .navbar-nav li a:active {
    background-color: #8b0000 !important; /* Light red */
    color: #ffcccc !important; /* Complementary dark red text color */
}

/* Specific styles for active navigation items */
.navbar-nav li.active a,
.navbar-nav li.home-active a {
    background-color: transparent; /* Ensure no background color */
    color: #8b0000; /* Dark grey text color */
}

/* Links styling */
a {
    font-style: bold; /* Italicize links */
    font-weight: bold; /* Bold links */
    text-decoration: none; /* Remove underline by default */
    color: #8b0000; /* Set the default link color to dark grey */
    position: relative; /* Needed for the hover effect */
    display: inline-block; /* Needed for the hover effect */
    transition: color 0.3s ease; /* Smooth color transition */
}

/* Hover effect for links */
a::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(255, 0, 0, 0.2); /* Light red color with transparency */
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.8s ease-in-out; /* Slowed down to 0.8s */
}

a:hover::before {
    transform: scaleX(1);
}

/* Ensure the text remains above the hover effect and no underline */
a:hover {
    color: rgba(255, 0, 0, 0.2); /* Ensure text color is visible over the hover effect */
    text-decoration: none; /* Ensure no underline on hover */
}

/* Show body with fade-in effect on load */
body.loaded {
    opacity: 1;
}

/* Fade-out effect for body when leaving page */
body.fading {
    opacity: 0;
    pointer-events: none; /* Disable pointer events during fade-out */
}

/* Active state for navigation items */
.navbar .navbar-nav li.active {
    background-color: #8b0000 !important; /* Light red background */
}

.navbar .navbar-nav li.active a {
    color: #ffffff !important; /* White text for contrast */
}

.navbar .navbar-nav > li.active {
    background-color: #8b0000 !important;
}

.navbar .navbar-nav li.active {
    background-color: #8b0000 !important; /* A darker red for active background */
}

.navbar .navbar-nav li.active a {
    background-color: #8b0000 !important; /* A darker red */
    color: #ffffff !important; /* White text for contrast */
}

/* Hover state to maintain visual consistency */
.navbar .navbar-nav li a:hover,
.navbar .navbar-nav li a:focus {
    background-color: #8b0000 !important; /* Match active state background */
    color: #ffffff !important; /* Match active state text color */
}

/* Change background color of the active TOC item */
.tocify-item.list-group-item.active {
    background-color: #b00000 !important; /* Complementary red color */
    color: #ffffff !important; /* White text for contrast */
}

/* Optional: Hover effect for TOC items */
.tocify-item.list-group-item:hover {
    background-color: #8b0000; /* Darker red for hover */
    color: #ffffff; /* White text for hover */
}

/* Override inline styles if necessary */
.tocify-item.list-group-item.active[style] {
    background-color: #b00000 !important; /* Complementary red color */
    color: #ffffff !important; /* White text for contrast */
}