/* CSS Variables for Colour Palette */
:root {
    /* Primary Colors */
    --clr-primary: #188181; /* Calm Green */
    --clr-primary-hover: #0f5555; /* Darker shade of Calm Green */
    /* --clr-primary: #188181; Calm Green */
    /* --clr-primary-hover: #ffffff; Hover effect for primary */

    /* Text Colors */
    --clr-text-dark: #333333; /* Dark Grey */
    --clr-text-light: #ffffff; /* White text */

    /* Background Colors */
    --clr-bg-light: #f5f5f5; /* Light Grey */
    --clr-bg-dark: #0d1b2a; /* Deep Navy */

    /* Accent Colors */
    --clr-accent: #e6b800; /* Yellow */
    --clr-accent-hover: #ffa500; /* Soft Orange */

    /* Borders */
    --clr-border-light: #e0e0e0; /* Light Grey Border */
    --clr-border-dark: #f5f5f5; /* Subtle Divider */
}

/* Navbar Styling */
.navbar {
    background-color: var(--clr-bg-dark);
    color: var(--clr-text-light);
    border-bottom: 1px solid var(--clr-border-dark);
}

.navbar .container-fluid {
    background-color: transparent; /* Ensure navbar background is not overridden */
}

.navbar-brand span {
    font-family: "Dancing Script", cursive;
    font-size: 1.8rem;
    font-weight: bold;
    text-transform: uppercase;
    color: var(--clr-text-light);
    letter-spacing: 1.5px;
}

.nav-link {
    font-size: 1rem;
    color: var(--clr-text-light);
    transition: color 0.3s ease;
}

.nav-link:hover {
    color: var(--clr-accent);
    text-decoration: none;
}

.nav-link.active {
    color: var(--clr-accent-hover);
    font-weight: bold;
}

/* Login/Sign Up Divider */
.nav-item .divider {
    color: var(--clr-text-light); 
    margin: 0 0.25rem; 
    font-size: 1rem; 
}

/* Share a Memory Button Styling */
.btn-share {
    background-color: var(--clr-accent); /* Use the accent color */
    color: var(--clr-text-light);
    font-weight: bold;
    font-size: 1rem;
    border-radius: 0.5rem;
    padding: 0.5rem 1rem;
    text-align: center;
    display: inline-block;
    transition: background-color 0.3s ease, transform 0.3s ease;
    text-decoration: none;
}

.btn-share:hover {
    background-color: var(--clr-accent-hover); /* Darker shade on hover */
    color: var(--clr-text-light);
    transform: scale(1.05); /* Slightly enlarge on hover */
}

.btn-share:active {
    background-color: var(--clr-primary); /* Primary color when clicked */
}

/* Styling for Alerts */
.alert {
    margin-bottom: 1rem;
    border-radius: 4px;
    padding: 1rem;
}

/* Close Button */
.btn-close {
    opacity: 0.7;
}

.btn-close:hover {
    opacity: 1;
}

/* General Container Styling */
.main-content .container-fluid {
    padding: 2rem;
    background-color: var(--clr-bg-light);
    color: var(--clr-text-dark);
}

/* Footer Styling */
.footer {
    background-color: var(--clr-bg-dark);
    color: var(--clr-text-light);
    border-top: 1px solid var(--clr-border-dark);
}

.footer-text {
    font-size: 1rem;
}

.footer-link {
    color: var(--clr-accent);
    text-decoration: none;
    transition: color 0.3s ease;
}

.footer-link:hover {
    color: var(--clr-accent-hover);
}

/* Responsive Adjustments */
@media (max-width: 768px) {
    .navbar-brand span {
        font-size: 1.5rem; /* Adjust for smaller screens */
    }

    .navbar-toggler {
        border-color: var(--clr-text-light);
    }

    .navbar-toggler-icon {
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3E%3Cpath stroke='%23e6e6e6' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E");
    }
    .container-fluid {
        padding: 1rem;
    }
}