/*

Theme Name: KumundhooNext

Author: Jeyilam

Description: Created for future Kumundhoo.

Version: 4.0

*/

/* Main Heading Font - Faagathi Dheli */

@font-face {

    font-family: 'MainHeadingFont';

    src: url('fonts/DAM_Kathivalhi.otf') format('truetype');

    font-weight: normal;

    font-style: normal;

    font-display: swap;

}



/* Secondary Heading Font - Faagathi Neon */

@font-face {

    font-family: 'SecondaryHeadingFont';

    src: url('fonts/DAM_Kathivalhi.otf') format('truetype');

    font-weight: normal;

    font-style: normal;

    font-display: swap;

}



/* Body text Font - MV Faseyha */

@font-face {

    font-family: 'BodyTextFont';

    src: url('fonts/MV_Faseyha.otf') format('opentype');

    font-weight: normal;

    font-style: normal;

    font-display: swap;

}



/* 1. Custom Scrollbar */

::-webkit-scrollbar { width: 8px; }

::-webkit-scrollbar-track { background: #000; }

::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.2); border-radius: 10px; }

::-webkit-scrollbar-thumb:hover { background: rgba(255, 255, 255, 0.5); }





/* 2. Base Styles - އާންމު ލިޔުންތަކަށް */

body {

    background-color: #000;

    color: #fff;

    font-family: 'BodyTextFont', sans-serif; /* MV Faseyha */

    direction: rtl;

    margin: 0;

    overflow-x: hidden;

}



.container {

    max-width: 1200px;

    margin: auto;

    padding: 0 20px;

}



/* 3. Unique Glass Card with Hover Transition (V1.4 Style) */

.glass-box {

    background: rgba(255, 255, 255, 0.03);

    backdrop-filter: blur(15px);

    -webkit-backdrop-filter: blur(15px);

    border: 1px solid rgba(255, 255, 255, 0.08);

    border-radius: 20px;

    padding: 25px;

    position: relative;

    overflow: hidden;

    transition: all 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);

    animation: slideUpFade 0.8s ease forwards;

}



.glass-box:hover {

    background: rgba(255, 255, 255, 0.08);

    border-color: rgba(255, 255, 255, 0.3);

    transform: translateY(-10px);

}



.glass-box img { transition: transform 0.8s ease; }

.glass-box:hover img { transform: scale(1.05); opacity: 1 !important; }



/* 4. Page Load Animation */

@keyframes slideUpFade {

    from { opacity: 0; transform: translateY(30px); }

    to { opacity: 1; transform: translateY(0); }

}



/* 5. Typography - ސުރުޚީތަކުގެ ސައިޒު ވަރަށް ބޮޑުކުރުން (Bold ނުކޮށް) */



/* މައިގަނޑު ސުރުޚީ (Main Titles) */

h1, h1 a {

    font-family: 'MainHeadingFont', sans-serif !important;

    font-size: 3rem !important; /* ވަރަށް ބޮޑުކޮށްލީ */

    line-height: 1;

    font-weight: normal !important; /* ބޯ ނުކުރަން */

    color: #fff !important;

    text-decoration: none !important;

}



h2, h2 a {

    font-family: 'MainHeadingFont', sans-serif !important;

    font-size: 2.0rem !important; 

    line-height: 1;

    font-weight: normal !important;

    color: #fff !important;

    text-decoration: none !important;

}



/* ސައިޑް ސުރުޚީތަކާއި ކާޑުތަކުގެ ސުރުޚީ (Secondary Titles) */

h3, h3 a {

    font-family: 'SecondaryHeadingFont', sans-serif !important;

    font-size: 1.0rem !important;

    line-height: 1.1;

    font-weight: normal !important;

    color: #fff !important;

    text-decoration: none !important;

}



h4, h4 a {

    font-family: 'SecondaryHeadingFont', sans-serif !important;

    font-size: 2.0rem !important;

    line-height: 1.1;

    font-weight: normal !important;

    color: #fff !important;

    text-decoration: none !important;

}



/* ފޯނުން ބަލާއިރު (Mobile View) */

@media (max-width: 768px) {

    h1, h1 a { font-size: 1.5rem !important; }

    h2, h2 a { font-size: 1.5rem !important; }

    h3, h3 a { font-size: 1.2rem !important; }

    h4, h4 a { font-size: 1.2rem !important; }

}



a { color: inherit; text-decoration: none; transition: 0.3s; }

header h1 a:hover { opacity: 0.5; }



/* 6. Navigation */

.nav-links {

    list-style: none;

    display: flex;

    justify-content: center;

    gap: 30px;

    padding: 20px 0;

}



/* 7. News Ticker */

.ticker-wrapper {

    background: rgba(255, 255, 255, 0.05);

    padding: 12px 0;

    overflow: hidden;

    white-space: nowrap;

    margin-bottom: 30px;

}

.ticker-content { display: inline-block; animation: ticker 40s linear infinite; }

@keyframes ticker { from { transform: translateX(100%); } to { transform: translateX(-100%); } }



/* =============================================

   MOBILE FIX (CSSJ)

   ============================================= */

@media (max-width: 768px) {

    .container { padding: 0 15px; }

    

    header h1 a { font-size: 2rem !important; }

    

    .nav-links { 

        gap: 15px; 

        flex-wrap: wrap; 

        font-size: 0.9rem;

    }



    /* Homepage GridJ*/

    .mobile-grid-fix {

        grid-template-columns: 1fr !important;

    }



    .glass-box { padding: 20px; }

}



/* Home Page Hero */

.main-hero-card {

    position: relative;

    min-height: 450px;

    display: flex;

    align-items: flex-end;

    padding: 0 !important;

    overflow: hidden;

    margin-bottom: 40px;

    border-radius: 25px;

}

.hero-bg-img {

    position: absolute;

    width: 100%;

    height: 100%;

    object-fit: cover;

    z-index: -1;

    opacity: 0.6;

}

.hero-overlay {

    padding: 30px;

    background: linear-gradient(to top, rgba(0,0,0,0.9), transparent);

    width: 100%;

}



/* Section Titles */

.section-title-bar {

    display: flex;

    justify-content: space-between;

    align-items: center;

    margin-bottom: 20px;

    border-right: 4px solid #fff;

    padding-right: 15px;

}

.section-title-bar h3 { margin: 0; font-size: 1.4rem; }

.view-all { font-size: 0.8rem; opacity: 0.6; }



/* Category Grid Setup */

.home-cat-grid {

    display: grid;

    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));

    gap: 20px;

    margin-bottom: 50px;

}



/* Post Cards */

.post-card { padding: 15px !important; }

.card-thumb { height: 180px; overflow: hidden; border-radius: 12px; margin-bottom: 12px; }

.card-thumb img { width: 100%; height: 100%; object-fit: cover; opacity: 0.8; }

.card-meta a { font-size: 0.7rem; color: #fff; opacity: 0.5; text-decoration: none; }



/* Category Badge Style */

.category-badge a {

    background: #fff;

    color: #000 !important;

    padding: 3px 10px;

    border-radius: 5px;

    font-size: 0.75rem;

    font-weight: bold;

}



/* === MOBILE LAYOUTJ === */

@media (max-width: 768px) {

    .main-hero-card { min-height: 300px; }

    .hero-overlay h2 { font-size: 1.4rem; }

    

    /* Phone Grid Single Colunm */

    .home-cat-grid {

        grid-template-columns: 1fr !important; 

        gap: 15px;

    }

    

    .home-cat-section { margin-bottom: 40px; }

}



@media (max-width: 768px) {

    /* Hero Grid resizeJ */

    .main-hero-card { 

        min-height: 320px !important; 

    }

    .hero-overlay h2 { 

        font-size: 1.3rem !important; 

    }



    /*Post Colunm SetJ (2 Column) */

    .home-cat-grid {

        grid-template-columns: repeat(2, 1fr) !important; /* 2 post in colunmJ */

        gap: 12px !important;

    }



    /*Mobile cardsizesJ */

    .card-thumb { 

        height: 120px !important; 

    }

    .post-card h4 { 

        font-size: 0.9rem !important; 

        line-height: 1.3 !important;

    }

    

    .container { 

        padding: 0 10px !important; 

    }

}
/* --- Body Text Size Adjustment --- */

body {
    /* އާދައިގެ ލިޔުންގަނޑުގެ ސައިޒު ކުޑަކުރުން */
    font-size: 0.95rem !important; 
    line-height: 1.6; /* ދެބަރި ދެމެދުގައި ރީތި ޖާގައެއް ބެހެއްޓުމަށް */
    letter-spacing: 0.2px;
}

/* ޕޯސްޓްތަކުގެ އެތެރޭގައި ހުންނަ ޕެރެގްރާފްތަކަށް */
p {
    font-size: 0.95rem;
    margin-bottom: 1.5rem;
    opacity: 0.9; /* ކުޑަކޮށް ފަނޑުކޮށްލުމުން ސުރުޚީތައް މާ ބޮޑަށް ފާހަގަވާނެ */
}

/* މޯބައިލް ފޯނުގައި ލިޔުންގަނޑު ހުންނާނެ ސައިޒު */
@media (max-width: 768px) {
    body, p {
        font-size: 1.1rem !important;
        line-height: 1.5;
    }
}

/* Comment Section Styling */
#commentform {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

#commentform textarea {
    width: 100%;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: #fff;
    padding: 15px;
    border-radius: 12px;
    font-family: 'BodyTextFont';
    resize: none;
}

#commentform input[type="text"], #commentform input[type="email"] {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: #fff;
    padding: 10px;
    border-radius: 8px;
    width: 100%;
}

#commentform .submit {
    background: #fff;
    color: #000;
    border: none;
    padding: 10px 25px;
    border-radius: 50px;
    font-weight: bold;
    cursor: pointer;
    align-self: flex-start;
    transition: 0.3s;
}

#commentform .submit:hover {
    transform: scale(1.05);
    background: #e0e0e0;
}

.comment-list {
    list-style: none;
    padding: 0;
    margin-top: 30px;
}

.comment-body {
    background: rgba(255, 255, 255, 0.03);
    padding: 15px;
    border-radius: 15px;
    margin-bottom: 15px;
    border: 1px solid rgba(255, 255, 255, 0.05);
}

.comment-author cite {
    font-family: 'SecondaryHeadingFont';
    font-style: normal;
    color: #fff;
}

/* Comment List Styling */
.comment-list { list-style: none; padding: 0; margin-bottom: 40px; }
.comment { 
    background: rgba(255, 255, 255, 0.04); 
    padding: 20px; 
    border-radius: 20px; 
    margin-bottom: 20px; 
    border: 1px solid rgba(255, 255, 255, 0.08);
}
.comment-author .avatar { border-radius: 50%; margin-left: 15px; float: right; }
.comment-meta { font-size: 0.8rem; opacity: 0.5; margin-bottom: 10px; }
.comment-content { font-size: 1rem; line-height: 1.6; clear: both; }

/* Comment Form Styling */
#commentform input, #commentform textarea {
    width: 100%;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: #fff;
    padding: 12px 15px;
    border-radius: 12px;
    margin-bottom: 15px;
    font-family: 'BodyTextFont';
}

#commentform .submit {
    background: #fff;
    color: #000;
    border: none;
    padding: 10px 30px;
    border-radius: 50px;
    font-weight: bold;
    cursor: pointer;
    transition: 0.3s;
}

/* ފޭސްބުކް ސްޓައިލް ކޮމެންޓް ބޮކްސް */
.comment-respond {
    background: rgba(255, 255, 255, 0.03);
    padding: 15px;
    border-radius: 15px;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

#commentform textarea {
    background: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 20px !important;
    padding: 12px 20px !important;
    font-size: 0.95rem;
    min-height: 45px; /* ފޭސްބުކް ކޮމެންޓް ބޮކްސްއެއްހެން ކުޑަކޮށް */
}

/* ނަމާއި އީމެއިލް ޖަހާ ގޮޅިތައް ކުޑަކޮށް އެއްބަރިއަކަށް */
.comment-form-author, .comment-form-email {
    width: 48%;
    display: inline-block;
    margin-bottom: 10px;
}

#commentform input[type="text"], #commentform input[type="email"] {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 50px;
    padding: 8px 15px;
    color: #fff;
}

#commentform .submit {
    background: #0084ff !important; /* ފޭސްބުކް ބްލޫ ކުލަ */
    color: #fff !important;
    border-radius: 50px !important;
    padding: 6px 20px !important;
    font-size: 0.85rem !important;
    float: left; /* ބަޓަން ވާތްފަރާތަށް */
}