/* ===================================================
   KATHA SAGAR DESIGN SYSTEM
=================================================== */

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@400;500;600;700&family=Poppins:wght@300;400;500;600&display=swap');

:root{

    --ks-bg:#FFFFFF;
    --ks-white:#ffffff;
    --ks-gold:#B78A39;
    --ks-dark:#4B3520;
    --ks-brown:#85623A;
    --ks-border:#E7D6C2;
    --ks-light:#F8EFE5;

}

/* ================= BODY ================= */

body{

    background:var(--ks-bg);
    color:var(--ks-dark);
    font-family:'Poppins',sans-serif;
    font-size:16px;
    line-height:1.8;

}

/* ================= HEADINGS ================= */

h1,h2,h3,h4,h5,h6{

    font-family:'Cormorant Garamond',serif;
    color:var(--ks-dark);
    font-weight:600;

}

/* ================= LINKS ================= */

a{

    color:var(--ks-brown);
    text-decoration:none;
    transition:.3s;

}

a:hover{

    color:var(--ks-gold);

}

/* ================= BUTTONS ================= */

.btn,
.btn-primary{

    background:var(--ks-gold);
    color:#fff;
    border:none;
    border-radius:10px;
    padding:12px 25px;

}

.btn:hover,
.btn-primary:hover{

    background:#8B652B;

}

/* ================= CARDS ================= */

.card,
.moduletable{

    background:#fff;
    border:1px solid var(--ks-border);
    border-radius:12px;
    box-shadow:0 8px 30px rgba(0,0,0,.06);

}

/* ================= MODULE TITLE ================= */

.card-header,
.moduletable h3{

    background:#FCF8F2;
    border-bottom:1px solid var(--ks-border);
    color:var(--ks-dark);
    font-family:'Cormorant Garamond',serif;
    font-size:28px;
    font-weight:500;

}

/* ================= HEADER ================= */

.container-header{

    background:#FFF8F2 !important;
    background-image:none !important;
    border-bottom:2px solid var(--ks-border);
    padding:10px 0;
    text-align:center;

}

.container-header::before,
.container-header::after{

    display:none !important;

}

.navbar-brand{

    display:flex;
    justify-content:center;
    align-items:center;
    margin-bottom:10px;

}

.navbar-brand img{

    max-height:80px;
    width:auto;

}

/* ================= LOGO ================= */

.grid-child:first-child{

    width:100%;
    display:flex;
    justify-content:center;

}

.navbar-brand{

    display:flex !important;
    justify-content:center;
    align-items:center;
    width:90%;
    margin:0 auto 25px auto;

}

.brand-logo{

    display:inline-block;

}

.brand-logo img,
.navbar-brand img{

    max-height:65px !important;
    width:auto !important;
    height:auto !important;
    max-width:none !important;

}

.site-description{

    text-align:center;

}
/* ================= NAVIGATION ================= */

.container-nav{

    width:100%;
    display:flex;
    justify-content:center;
    border-top:1px solid var(--ks-border);
    border-bottom:1px solid var(--ks-border);
    padding:8px 0;

}

.metismenu{

    display:flex !important;
    justify-content:center;
    align-items:center;
    flex-wrap:wrap;
    gap:10px;
    list-style:none;
    margin:0;
    padding:0;

}

.metismenu>li{

    list-style:none;

}

.metismenu>li>a{

    font-family:'Poppins',sans-serif;
    font-size:15px;
    font-weight:500;
    text-transform:uppercase;
    letter-spacing:1px;
    color:var(--ks-dark) !important;
    padding:8px 18px !important;
    position:relative;

}

.metismenu>li>a:hover{

    color:var(--ks-gold) !important;
    background:none !important;

}

.metismenu>li>a::after{

    content:"";
    position:absolute;
    left:18px;
    right:18px;
    bottom:2px;
    height:2px;
    background:var(--ks-gold);
    transform:scaleX(0);
    transition:.3s;

}

.metismenu>li>a:hover::after,
.metismenu>.active>a::after{

    transform:scaleX(1);

}

/* ================= DROPDOWN ================= */

.metismenu .mm-collapse{

    background:#fff;
    border:1px solid var(--ks-border);
    border-radius:10px;
    box-shadow:0 15px 40px rgba(0,0,0,.08);

}

.metismenu .mm-collapse a{

    color:var(--ks-dark) !important;
    padding:12px 20px !important;

}

.metismenu .mm-collapse a:hover{

    background:#FFF8F2 !important;
    color:var(--ks-gold) !important;

}

/* ================= BREADCRUMB ================= */

.breadcrumb{

    background:#fff;
    border:1px solid var(--ks-border);
    border-radius:10px;
    padding:15px 20px;
    box-shadow:0 5px 15px rgba(0,0,0,.04);

}
/* Hide custom fields on the Category Blog Grid view */
.blog .fields-container,
.blog-item .fields-container {
    display: none !important;
}

/* ======== Footer =========*/
.footer-about {
   background: #ffd966;
   padding: 20px;
   border-radius: 8px;
}


/* ================= 1. FIX THE IMAGE BEHAVIOR ================= */
/* In a 4 or 6 column layout, floated images break the grid. 
   This stacks the image cleanly above the title and fills the column. */
.item-image,
.article-intro-image,
.blog-item-image {
    float: none !important; 
    max-width: 100% !important; 
    margin: 0 0 10px 0 !important; /* Pushes the title 10px below the image */
    display: block;
}

.item-image img,
.article-intro-image img,
.blog-item-image img {
    width: 100%;
    height: auto;
    border-radius: 12px;
}

.full-image img, .com-content-article .item-image img {
    width: 100% !important; /* Forces the image to scale to container width */
    max-width: 400px !important; /* Set your desired maximum width in pixels */
    height: auto !important; /* Maintains the aspect ratio */
}

/* ================= 2. RESTORE THE NATIVE GRID & FIX GAPS ================= */
/* This removes any lingering margins pushing the grid apart without breaking Bootstrap */
.blog-item,
.item {
    margin-bottom: 20px !important; 
}

.blog-item .page-header {
    margin-top: 0 !important;
    padding-top: 0 !important;
    border: none !important;
}

/* ================= 3. ADJUST TITLE FOR SMALLER COLUMNS ================= */
.item-title,
.item-title a,
.blog-item .page-header h2 {
    font-size: 18px !important; /* Reduced for 4 to 6 column layouts */
    margin-top: 0 !important; 
    line-height: 1.3;
}

/* ================= FORCE HEADER & LOGO HEIGHT REDUCTION ================= */

/* 1. Force header padding reduction */
.container-header {
    padding: 5px 0 !important; 
}

/* 2. Force the space below the logo to shrink */
.navbar-brand {
    margin: 0 auto 5px auto !important; 
}

/* 3. Force the logo image itself to be smaller */
.brand-logo img,
.navbar-brand img {
    max-height: 50px !important; 
}

/* 4. Force navigation container to be slimmer */
.container-nav {
    padding: 0 !important; 
}

/* 5. Force menu links to take up less vertical space */
.metismenu>li>a {
    padding: 2px 15px !important; 
}