/* General body */
body {
    font-family: Arial, sans-serif;
    background-color: #f1f1f1;
    color: #333;
    margin: 0;
    padding: 0;
}

/* ================= Custom Dhivehi Font ================= */
@font-face {
    font-family: 'mmdj'; /* Replace with your font name */
    src: url('../fonts/mmdj.woff2') format('woff2'),
         url('../fonts/mmdj.woff') format('woff'),
         url('../fonts/mmdj.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

/* MV Typer */
@font-face {
    font-family: 'MV Typer';
    src: url('https://dhivehi.mv/fonts/data/df/mvtyper.ttf') format('truetype');
}

/* Apply custom font to Dhivehi section headlines */
.dv-heading + .row .card-title {
    font-family: 'mmdj', sans-serif;
    font-size: 1.1rem; /* adjust size as needed */
}

/* Optionally, apply font to section heading */
.dv-heading {
    font-family: 'mmdj', sans-serif;
    font-weight: bold; /* optional */
}

/* Recent News Dhivehi Headlines */
.sidebar .dhivehi-headline {
    font-family: 'mmdj', sans-serif;
}

/* Custom logo size */
.custom-logo {
    width: 250px;   /* Adjust the width of the logo */
    height: auto;   /* Keep the aspect ratio */
}

/* ================= STYLE SECTION HEADINGS ================= */
.section-heading {
    font-size: 22px;
    font-weight: 700;
    text-transform: uppercase;
    color: #222;
    margin-bottom: 20px;
    display: block;
    padding-bottom: 10px;
    border-bottom: 3px solid #d90000; /* red underline line */
}

/* Dhivehi RTL section heading */
.dv-heading {
    text-align: right;
    border-bottom: 3px solid #d90000;
}

/* Featured news */
.featured-main img {
    max-height: 475px;
    object-fit: cover;
    border-radius: 5px;
}
.featured-main h3 {
    font-weight: bold;
    margin-top: 10px;
    font-family: 'mmdj', sans-serif;
    text-align: center;
}
.featured-main p {
    font-size: 0.9rem;
    color: #666;
}

/* News cards */
.news-card {
    height: 100%; /* allow cards to stretch within column */
    display: flex;
    flex-direction: column;
}

.news-card .card-body {
    flex: 1 1 auto; /* let body expand */
}

/* Set a fixed height for cards */
.card.news-card {
    min-height: 350px; /* adjust as needed */
}

/* Ensure images are uniform */
.news-card img {
    height: 180px; /* fixed image height */
    object-fit: cover;
    border-radius: 5px;
}

/* Remove borders from all news cards */
.card {
    border: none !important;
    box-shadow: none !important; /* optional: remove shadows too for cleaner look */
}


/* Sidebar */
.sidebar {
    border-left: 1px solid #ddd;
    padding-left: 15px;
    padding-right: 15px;
}

.sidebar h5 {
    font-weight: bold;
    margin-bottom: 10px;
}

.sidebar ul.list-group li a {
    text-decoration: none;  /* no underline */
    color: #333;
}

.sidebar ul.list-group li a:hover {
    text-decoration: none;  /* remove underline on hover */
    color: #007bff;          /* keep hover color change */
}



/* Links */
a {
    text-decoration: none;
    color: #333;
}
a:hover {
    color: #007bff;
}
.footer-gaumu {
    background-color: #1a1a1a;
    color: #ddd;
    padding-top: 40px;
    font-size: 0.9rem;
}

/* Headings and text */
.footer-gaumu h5 {
    font-weight: 700;
    color: #fff;
    margin-bottom: 15px;
}

.footer-gaumu .footer-text {
    line-height: 1.6;
    color: #ccc;
}

.footer-gaumu .footer-links li a {
    color: #ccc;
    text-decoration: none;
}
.footer-gaumu .footer-links li a:hover {
    color: #d90000;
}


.footer-gaumu .footer-social-icons a {
    display: inline-block;
    margin-right: 12px;
    font-size: 24px; /* increased from 20px to 28px */
    color: #ccc;
    transition: color 0.3s;
}
.footer-gaumu .footer-social-icons a:hover {
    color: #d90000;
}


/* Full width copyright */
.footer-copyright {
    background-color: #111;
    color: #888;
    padding: 10px 0;
}

/* ================= HEADER ================= */

header.main-header {
    background-color: #1a1a1a !important;   /* Dark */
    padding: 30px 0;
    width: 100%;
}

header.main-header h2 {
    color: #ffffff !important;
    margin: 0;
    font-weight: 700;
}

/* ================= NAVBAR ================= */

nav.main-navbar {
    background-color: #0f0f0f !important;   /* Darker than header */
    border-top: 1px solid #222;             /* subtle separation */
}

.main-navbar .nav-link {
    color: #e0e0e0 !important;
    font-weight: 500;
    padding: 12px 30px;
    transition: 0.3s;
}

.main-navbar .nav-link:hover {
    color: #d90000 !important;
}

/* Center spacing */
.navbar-nav {
    gap: 25px;
}

nav.main-navbar {
    background-color: #454545 !important;
    padding: 5px 0;
}

.main-navbar .navbar-nav {
    gap: 1px;
}

.main-navbar .nav-link {
    color: #e0e0e0 !important;
    font-weight: 500;
    padding: 10px 20px;
}

.main-navbar .nav-link:hover {
    color: #d90000 !important;
}

/* Make author + date same size as featured */

.featured-main .text-muted {
    font-size: 14px;
    text-align: center;
}

.news-meta {
    font-size: 14px;
}

/* ================= HEADLINE SIZE ================= */

/* English + Dhivehi section headlines */
.news-card .card-title {
    font-size: 18px;        /* Increase size */
    font-weight: 100;
    transition: 0.3s;
}

/* News Card Headline Hover Color */
.news-card a {
    text-decoration: none; /* Remove underline */
    color: #000;           /* Default headline color */
    transition: color 0.3s;
}

.news-card a:hover {
    color: #d90000;        /* Hover color same as footer links */
}

/* Featured News Headline Hover Color */
.featured-main a {
    text-decoration: none; /* Remove underline */
    color: #000;           /* Default color */
    transition: color 0.3s;
}

.featured-main a:hover {
    color: #d90000;        /* Hover color same as footer links */
}

/* Sidebar Recent News Hover Color */
.sidebar ul.list-group li a:hover {
    color: #d90000; /* Same as other section headline hover color */
    text-decoration: none; /* Remove underline on hover */
}

.banner-container img {
    width: 100%;      /* full container width */
    height: auto;     /* maintain aspect ratio */
    display: block;
    border-radius: 5px;
}

/* For news page specific styles */
.news-featured img {
    width: 100%;
    height: auto;
    border-radius: 5px;
}

.news-headline {
    font-size: 28px;
    font-weight: bold;
    margin-bottom: 10px;
    color: #333; /* Default color for headlines */
}

/* Apply custom font for Dhivehi headlines */
.news-headline.dhivehi-headline {
    font-family: 'mmdj', sans-serif; /* Replace with your font family */
    color: #1f1f1f; /* Adjust the color if needed */
}

.news-meta {
    font-size: 14px;
    color: #888;
}

.news-content {
    font-size: 16px;
    line-height: 1.8;
    color: #444;
    margin-top: 20px;
    margin-bottom: 20px;
}

/* ================== Mobile adjustments for news.php ================== */
@media (max-width: 768px) {
    /* Ensure both the main content and sidebar align */
    .news-page .row {
        display: flex;
        flex-direction: column;
        width: 100%; /* Ensure full container width */
    }

    /* Main Content column styling (Left) */
    .news-page .col-lg-8 {
        padding-left: 15px !important;
        padding-right: 15px !important;
        width: 100% !important; /* Make sure it takes full width */
    }

    /* Sidebar column styling (Right) */
    .news-page .col-lg-4 {
        padding-left: 15px !important;
        padding-right: 15px !important;
        margin-top: 20px; /* Add space between content and sidebar */
        width: 100% !important; /* Make sure it takes full width */
    }

    /* Sidebar container styling */
    .news-page .sidebar {
        border: none; /* Remove borders */
        padding-left: 0;
        padding-right: 0;
    }

    /* Ensure both columns have same width behavior */
    .news-page .col-lg-8, .news-page .col-lg-4 {
        width: 100% !important; /* Make both columns take full width */
        box-sizing: border-box; /* Ensure proper padding and border handling */
    }

    /* Adjust the spacing of the recent news links */
    .news-page .sidebar .list-group-item {
        padding-left: 15px;
        padding-right: 15px;
    }
}

/* ================== News Page Custom Styles ================== */

/* Make sure the banner and content align properly */
.news-page {
    padding-left: 0;
    padding-right: 0;
}

.news-page .container {
    max-width: 100%;
}

/* Make sure the news content and sidebar align like the banner */
.news-page .row {
    margin-left: 0;
    margin-right: 0;
}

.news-page .col-lg-8, 
.news-page .col-lg-4 {
    padding-left: 15px;
    padding-right: 15px;
}

@media (max-width: 768px) {
    /* For mobile, make sure both content and sidebar have no border and align properly */
    .news-page .col-lg-8,
    .news-page .col-lg-4 {
        padding-left: 0;
        padding-right: 0;
    }
}

/* News page headline hover color */
.news-headline:hover,
.dhivehi-headline:hover {
    color: #d90000 !important; /* Use !important to ensure it overrides other styles */
    cursor: pointer;
}

/* RTL support for Dhivehi language */
[dir="rtl"] {
    text-align: right; /* Right-align text for RTL */
}

[dir="rtl"] .news-content {
    direction: rtl;
    text-align: right;
}

[dir="rtl"] .news-headline {
    font-family: 'mmdj', sans-serif; /* Add your custom font if needed */
    text-align: right;  /* Align headline text to the right */
}

[dir="rtl"] .sidebar a {
    text-align: right;  /* Right-align links in the sidebar for RTL */
}


/* ================== News Page Custom Styles ================== */

/* Headline styling */
.news-headline {
    font-size: 2rem;
    font-weight: bold;
    color: #333;
    margin-bottom: 20px;
    transition: color 0.3s ease;
}

/* Dhivehi headline custom font */
.dhivehi-headline {
    font-family: 'mmdj', sans-serif !important; /* Custom font for Dhivehi headlines */
    direction: rtl;  /* Right to left for Dhivehi */
    text-align: right; /* Align text to right for Dhivehi headlines */
}

/* Hover effect for main news headline */
.news-headline:hover {
    color: #007bff; /* match footer hover */
    cursor: pointer;
}

/* Featured image styling */
.news-featured img {
    width: 100%;
    border-radius: 5px;
    margin-bottom: 15px;
}

/* Author and date */
.news-meta {
    font-size: 0.9rem;
}

/* Sidebar recent news links */
.recent-news-link, .sidebar a {
    color: #333;
    text-decoration: none;
    transition: color 0.3s;
}

.recent-news-link:hover, .sidebar a:hover {
    color: #007bff; /* match footer hover */
}

/* Banner */
.banner-container img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 5px;
}

/* Sidebar right border removal on mobile and gap adjustment */
@media (max-width: 768px) {
    .col-lg-4 {
        border: none;
        margin-top: 20px;
        padding-left: 0;
        padding-right: 0;
    }
}

/* Apply RTL styling for Dhivehi content */
.news-content.dhivehi, .news-headline.dhivehi {
    direction: rtl; /* Right to left direction */
    text-align: right; /* Align text to right */
}

/* For Dhivehi articles */
.news-content.dhivehi {
    font-family: 'MV Typer', sans-serif; /* Apply font to the content */
}

/* ================== Category Page Custom Styles ================== */

/* Ensure the layout only affects category page */
.category-page .card {
    display: flex;
    flex-direction: column;
    height: 100%;
}

/* Category Page Headline Styling */
.category-page .card-title a {
    font-size: 1.1rem; /* Set the font size for the headline */
    color: #333; /* Default color */
    text-decoration: none; /* Remove underline */
}

/* Category Page Headline Hover Effect */
.category-page .card-title a:hover {
    color: #d90000; /* Change to match the footer hover color */
    text-decoration: none; /* Remove the underline on hover */
}

/* Card Image Styling */
.category-page .card-img-top {
    object-fit: cover; /* Ensures images fit inside the card without stretching */
    height: 200px; /* Set a fixed height for the images */
}

/* Ensuring text in the card-body is aligned properly */
.category-page .card-body {
    flex-grow: 1; /* Makes sure the body of the card stretches to fill available space */
}

/* Optional: Adds spacing between cards */
.category-page .card-body .text-muted {
    font-size: 0.9rem;
    color: #6c757d;
}

/* Mobile View: 2 Cards per Row in Category Page */
@media (max-width: 768px) {
    /* Ensure the cards are displayed 2 per row */
    .category-page .col-md-3 {
        width: 50%; /* 2 cards per row (50% width each) */
    }

    .category-page .card-img-top {
        height: auto; /* Let images resize on smaller screens */
    }

    .category-page .col-sm-6 {
        width: 50%; /* Display 2 cards per row in mobile view */
    }
}

/* RTL Styling for Dhivehi Category */
.rtl-page {
    direction: rtl; /* Right-to-left layout */
    text-align: right; /* Align text to the right for Dhivehi */
}


