/* Size for brand */
nav .navbar-brand
{
    font-size: xx-large;
}

/* Colors for brand */
nav .navbar-brand .blue
{
    color: #537fbe;
}
nav .navbar-brand .red
{
    color: #ea433b;
}
nav .navbar-brand .yellow
{
    color: #f5b82e;
}
nav .navbar-brand .green
{
    color: #2e944b;
}

/* Sticky navbar and colors */
#main-navbar {
    position: sticky;
    top: 0;
    z-index: 1030; /* above page content */
    background-color: #0b5fa5; /* marine blue shade */
}

#main-navbar .navbar-brand,
#main-navbar .nav-link {
    color: #ffffff !important;
}

/* Page background classes */
.bg-index {
    background-image: 
        linear-gradient(135deg, rgba(43, 43, 43, 0.7) 0%, rgba(31, 31, 31, 0.7) 100%),
        url('/static/bg0.jpeg');
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    color: #ffffff;
}
.bg-lists {
    background-image: 
        linear-gradient(135deg, rgba(255, 241, 241, 0.75) 0%, rgba(255, 214, 214, 0.75) 100%),
        url('/static/bg1.jpeg');
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
}
.bg-meals {
    background-image: 
        linear-gradient(135deg, rgba(255, 255, 255, 0.75) 0%, rgba(242, 242, 242, 0.75) 100%),
        url('/static/bg2.jpeg');
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
}
.bg-stores {
    background-image: 
        linear-gradient(135deg, rgba(248, 255, 248, 0.75) 0%, rgba(230, 247, 233, 0.75) 100%),
        url('/static/bg3.jpeg');
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
}

/* Index card link variants */
.index-link.lists-link .card-body { background-image: linear-gradient(135deg, #fff1f1 0%, #ffd6d6 100%); }
.index-link.meals-link .card-body { background-image: linear-gradient(135deg, #ffffff 0%, #f2f2f2 100%); }
.index-link.stores-link .card-body { background-image: linear-gradient(135deg, #f8fff8 0%, #e6f7e9 100%); }

/* Ensure card text stands out on colored backgrounds */
.index-link .card-body h2, .index-link .card-body p {
    color: #111 !important;
}