/* KEEP EVERYTHING SAME — YOUR CSS UNCHANGED */

body{
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

.tamil-text {
  font-family: "Noto Sans Tamil", "Latha", sans-serif;
  line-height: 1.8;
}
/* HEADER */
.header{
    background:#f5c242;
    padding:10px;
    text-align:center;
    position:relative;
}

.center-block{text-align:center;}
.center-block img{height:80px;}
.sri{font-size:18px;font-weight:bold;}
.site-title{margin-top:5px;font-size:18px;font-weight:600;color:#7a4d00;}

.hamburger{
    position:absolute;
    right:15px;
    top:15px;
    font-size:22px;
    cursor:pointer;
    display:none;
}

/* NAV */
.nav{
    display:flex;
    justify-content:center;
    gap:15px;
    padding:10px;
    border-bottom:1px solid #ddd;
    flex-wrap:wrap;
}

.nav a{
    text-decoration:none;
    color:#5a3a00;
    font-weight:500;
}

/* MOBILE MENU */
.mobile-menu{
    position:fixed;
    top:0;
    right:-100%;
    width:75%;
    height:100vh;
    background:#f5c242;
    display:flex;
    flex-direction:column;
    padding-top:80px;
    transition:0.3s ease;
    z-index:1000;
}

.mobile-menu.show{right:0;}

.mobile-menu a{
    padding:15px;
    border-bottom:1px solid rgba(0,0,0,0.1);
    text-decoration:none;
    color:#5a3a00;
    font-weight:600;
}

/* LANGUAGE */
.lang-switch{
    display:grid;
    grid-template-columns: repeat(4, 1fr);
    gap:8px;
    padding:8px 10px;
    max-width:500px;
    margin:0 auto;
}

.lang-item{text-align:center;font-size:14px;}
.lang-item span{font-size:9px;}

/* CONTENT */
.content{
    max-width:800px;
    margin:20px auto;
    padding:0 15px;
    line-height:1.8;
}

/* FOOTER */
.footer{
    background:#f5c242;
    text-align:center;
    padding:15px 10px;
    font-size:13px;
}

.footer-text{font-size:13px;line-height:1.6;}

.footer-links{margin-top:8px;}
.footer-links a{margin:0 8px;font-size:12px;color:#000;text-decoration:none;}

.social-icons{margin-top:10px;}
.social-icons a{margin:0 10px;font-size:18px;color:#333;transition:0.3s;}
.social-icons a:hover{color:#b8860b;transform:scale(1.2);}

/* MOBILE */
@media(max-width:768px){
    .nav{display:none;}
    .hamburger{display:block;}
    .site-title{font-size:16px;}
    .center-block img{height:60px;}
}

/* TEXT LIST STYLE (TREE) */
/* LIST CONTAINER */
.tree-list {
  margin-top: 20px;
}

/* EACH ITEM */
.tree-item {
  padding: 14px 12px;
  margin: 8px 0;                /* 🔥 spacing between items */
  font-size: 17px;
  color: #5a3a00;
  cursor: pointer;

  background: #fff8e1;          /* 🔥 soft backlight */
  border-radius: 8px;

  transition: all 0.2s ease;
}

/* HOVER (DESKTOP) */
.tree-item:hover {
  background: #fde8a3;          /* slightly brighter */
  transform: translateX(4px);   /* subtle movement */
}

/* ACTIVE (MOBILE TAP) */
.tree-item:active {
  background: #f5c242;          /* stronger feedback */
  color: #000;
}