:root {
    --bg-color: #f8f9fa;
    --text-color: #212529;
    --card-bg: #ffffff;
    --primary: #0d6efd;
    --gold: #f1c40f;
}
[data-theme="dark"] {
    --bg-color: #1a1a2e;
    --text-color: #e0e0e0;
    --card-bg: #16213e;
    --primary: #0f3460;
}
body {
    background-color: var(--bg-color);
    color: var(--text-color);
}
.card { background-color: var(--card-bg); }
.navbar { background-color: var(--primary) !important; }

.navbar-brand img {
    height: 50px !important;
    width: auto !important;
    max-width: none !important;
}

/* Vertical Carousel */
.custom-carousel-vertical {
    position: relative;
    overflow: hidden;
    height: 160px; /* adjust as needed */
}
.carousel-vertical-wrapper {
    position: relative;
    height: 100%;
}
.carousel-vertical-slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    transform: translateY(100%);
    transition: transform 0.5s ease-in-out;
}
.carousel-vertical-slide.active {
    transform: translateY(0);
}
.carousel-vertical-slide.exit-up {
    transform: translateY(-100%);
}
.carousel-prev, .carousel-next {
    position: absolute;
    right: 10px;
    background: rgba(0,0,0,0.5);
    color: white;
    border: none;
    padding: 0.2rem 0.5rem;
    cursor: pointer;
    z-index: 10;
}
.carousel-prev { top: 10px; }
.carousel-next { bottom: 10px; }

.category-card {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.category-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(0,0,0,0.2) !important;
}
.category-card .card {
    border-radius: 15px;
    transition: background-color 0.3s;
}
.category-card:hover .card {
    background-color: #f8f9fa;
}

#breakingNewsCarousel {
    min-height: 140px;       /* gives the carousel a base height before JS loads */
}

@media (max-width: 576px) {
    .card-img-overlay h2 {
        font-size: 1.2rem;           /* smaller title on mobiles */
        word-wrap: break-word;
    }
    .card-img-overlay p {
        font-size: 0.85rem;
        word-wrap: break-word;
    }
}

/* Global link styling */
a {
    color: #212529;             /* dark gray instead of blue */
    text-decoration: none;      /* remove underline */
}
a:hover {
    color: #0d6efd;             /* optional: blue on hover for feedback */
    text-decoration: none;
}

/* Override Bootstrap's default link color in cards, nav, etc. */
.navbar-nav .nav-link,
.card a,
.list-group-item a {
    color: inherit;
}
.navbar-nav .nav-link:hover,
.card a:hover {
    color: #0d6efd;
}

/* Form pages (login, signup, contact) – add a subtle card container for better looks */
.auth-form, .contact-form {
    max-width: 500px;
    margin: 0 auto;
    padding: 2rem;
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 0 20px rgba(0,0,0,0.05);
}

/* Make form inputs look nicer */
.form-control {
    border-radius: 6px;
}
.btn-primary {
    background-color: #0d6efd;
    border-color: #0d6efd;
    border-radius: 6px;
}
.btn-primary:hover {
    background-color: #0b5ed7;
    border-color: #0a58ca;
}