/* Homepage theme overrides — scoped to body.homepage-theme-* on the main page only */

body.homepage-theme-ocean {
    background-color: #f0f9ff;
}

body.homepage-theme-ocean .navbar {
    background-color: #0d3b4c;
    box-shadow: 0 2px 10px rgba(13, 59, 76, 0.15);
}

body.homepage-theme-ocean .nav-link.active,
body.homepage-theme-ocean .nav-link:hover {
    color: #38bdf8 !important;
}

body.homepage-theme-ocean .blog-section h2 {
    color: #0c4a6e;
}

body.homepage-theme-ocean .blog-section h2::after {
    background: #38bdf8;
}

body.homepage-theme-ocean .blog-title {
    color: #0c4a6e;
}

body.homepage-theme-ocean .blog-title:hover {
    color: #0284c7;
}

body.homepage-theme-ocean .blog-card::before {
    background: linear-gradient(to bottom, #38bdf8, #0d3b4c);
}

body.homepage-theme-ocean .blog-card .badge {
    background-color: #0ea5e9 !important;
    color: #fff !important;
}

body.homepage-theme-ocean #viewMore {
    background-color: #0ea5e9;
    border-color: #0ea5e9;
    color: #fff;
}

body.homepage-theme-ocean #viewMore:hover {
    background-color: #0284c7;
    border-color: #0284c7;
}

body.homepage-theme-ocean footer {
    background-color: #0d3b4c;
    border-top-color: #38bdf8;
}

body.homepage-theme-ocean footer a:hover {
    color: #38bdf8;
}

/* Sunset */
body.homepage-theme-sunset {
    background-color: #fff7ed;
}

body.homepage-theme-sunset .navbar {
    background-color: #4a1942;
    box-shadow: 0 2px 10px rgba(74, 25, 66, 0.15);
}

body.homepage-theme-sunset .nav-link.active,
body.homepage-theme-sunset .nav-link:hover {
    color: #fb923c !important;
}

body.homepage-theme-sunset .blog-section h2 {
    color: #7c2d12;
}

body.homepage-theme-sunset .blog-section h2::after {
    background: #f97316;
}

body.homepage-theme-sunset .blog-title {
    color: #7c2d12;
}

body.homepage-theme-sunset .blog-title:hover {
    color: #ea580c;
}

body.homepage-theme-sunset .blog-card::before {
    background: linear-gradient(to bottom, #f97316, #4a1942);
}

body.homepage-theme-sunset .blog-card .badge {
    background-color: #f97316 !important;
    color: #fff !important;
}

body.homepage-theme-sunset #viewMore {
    background-color: #f97316;
    border-color: #f97316;
    color: #fff;
}

body.homepage-theme-sunset #viewMore:hover {
    background-color: #ea580c;
    border-color: #ea580c;
}

body.homepage-theme-sunset footer {
    background-color: #4a1942;
    border-top-color: #f97316;
}

body.homepage-theme-sunset footer a:hover {
    color: #fb923c;
}