/* 

1. Add your custom Css styles below
2. Place the this code in your template: 

 <link href="css/custom.css" rel="stylesheet">

*/

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+Sinhala:wght@400;500;600;700&family=Noto+Sans+Tamil:wght@400;500;600;700&display=swap');

/* ==========================================================================
   Global Typography & Color Refinements
   ========================================================================== */
body {
    line-height: 1.6;
    color: #333;
}

html[lang="si"],
html[lang="si"] body {
    font-family: 'Noto Sans Sinhala', sans-serif !important;
}

html[lang="ta"],
html[lang="ta"] body {
    font-family: 'Noto Sans Tamil', sans-serif !important;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    letter-spacing: 0.5px;
    color: #2d2d2d;
}

/* ==========================================================================
   Notice Block Enhancements (Clean & Simplistic)
   ========================================================================== */
.notice-style-1 {
    background-color: #fcf4f4 !important; /* Extremely soft red/pink */
    border: 1px solid #f5e6e6 !important;
    border-radius: 8px;
    margin-bottom: 15px;
    padding: 16px 20px;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    box-shadow: 0 2px 5px rgba(0,0,0,0.02);
}

.notice-style-2 {
    background-color: #f8f9fa !important; /* Extremely soft grey */
    border: 1px solid #e9ecef !important;
    border-radius: 8px;
    margin-bottom: 15px;
    padding: 16px 20px;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    box-shadow: 0 2px 5px rgba(0,0,0,0.02);
}

.notice-style-1:hover,
.notice-style-2:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.05) !important;
    z-index: 10;
}

/* ==========================================================================
   Smooth Hover Effects & Micro-animations
   ========================================================================== */
a,
button,
.btn {
    transition: all 0.3s ease-in-out;
}

/* Navbar smooth hover lift */
#mainMenu nav>ul>li>a {
    transition: transform 0.2s ease, color 0.2s ease;
}

#mainMenu nav>ul>li:hover>a {
    transform: translateY(-2px);
}

/* Elegant box-shadows and lift on cards/notices */
.list-group-item,
.card,
.post-item {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    border-radius: 6px;
    border: none;
}

.list-group-item:hover,
.card:hover,
.post-item:hover {
    transform: translateY(-3px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08) !important;
    z-index: 10;
}

/* ==========================================================================
   Sidebar & Widget Enhancements
   ========================================================================== */
.widget-title {
    color: #0e3f7f !important;
    font-weight: 700 !important;
    position: relative;
    padding-bottom: 8px;
    border-bottom: 2px solid #e0e0f0;
}

/* ==========================================================================
   Responsiveness Polish (Mobile & Tablet)
   ========================================================================== */
@media (max-width: 768px) {

    .btn,
    button,
    a.btn {
        padding: 12px 20px !important;
    }

    #mainMenu nav>ul>li>a {
        padding: 15px 0 !important;
    }

    .list-group-item {
        margin: 10px;
    }
}