/* ══════════════════════════════════════
   Section Heads — Vaikom Vartha
   ══════════════════════════════════════ */

:root {
    --ink: #111111;
    --border: #E0DADA;
    
    /* New Colors */
    --red: #C0211B;
    --orange: #E67E22;
    --green: #27AE60;
    --blue: #2980B9;
    --purple: #8E44AD;
    --teal: #16A085;
    --magenta: #E84393;
    --gold: #F1C40F;
}

.section-head {
    display: flex;
    align-items: baseline;
    gap: 14px;
    padding: 20px 0 12px;
    border-bottom: 2.5px solid var(--ink);
    margin-bottom: 16px;
    position: relative;
    overflow: hidden;
    animation: slideInFade 0.8s ease-out forwards;
}

@keyframes slideInFade {
    0% { opacity: 0; transform: translateY(15px); }
    100% { opacity: 1; transform: translateY(0); }
}

/* Base Title */
.section-head h2 {
    font-family: 'Noto Serif Malayalam', serif;
    font-size: 19px;
    font-weight: 700;
    color: var(--ink);
    margin: 0;
    line-height: 1.2;
    transition: transform 0.3s ease;
}

.section-head:hover h2 {
    transform: translateX(4px);
}

.section-head .see-all {
    margin-left: auto;
    font-size: 13px;
    color: var(--ink);
    font-weight: 600;
    cursor: pointer;
    letter-spacing: .03em;
    text-decoration: none;
    white-space: nowrap;
    transition: all .2s;
    display: flex;
    align-items: center;
    gap: 4px;
}

.section-head .see-all:hover {
    opacity: .8;
    transform: translateX(3px);
}

/* ── Theming Mixins ── */

/* 1. Red Variant (Latest News, Latest Report) */
.section-head.section-red { border-bottom-color: var(--red); }
.section-head.section-red h2, .section-head.section-red .see-all { color: var(--red); }
.section-head.section-red::after { background: var(--red); }

/* 2. Orange Variant (Local News) */
.section-head.section-orange { border-bottom-color: var(--orange); }
.section-head.section-orange h2, .section-head.section-orange .see-all { color: var(--orange); }
.section-head.section-orange::after { background: var(--orange); }

/* 3. Green Variant (Kerala) */
.section-head.section-green { border-bottom-color: var(--green); }
.section-head.section-green h2, .section-head.section-green .see-all { color: var(--green); }
.section-head.section-green::after { background: var(--green); }

/* 4. Purple Variant (Politics) */
.section-head.section-purple { border-bottom-color: var(--purple); }
.section-head.section-purple h2, .section-head.section-purple .see-all { color: var(--purple); }
.section-head.section-purple::after { background: var(--purple); }

/* 5. Teal Variant (Health) */
.section-head.section-teal { border-bottom-color: var(--teal); }
.section-head.section-teal h2, .section-head.section-teal .see-all { color: var(--teal); }
.section-head.section-teal::after { background: var(--teal); }

/* 6. Blue Variant (Sports) */
.section-head.section-blue { border-bottom-color: var(--blue); }
.section-head.section-blue h2, .section-head.section-blue .see-all { color: var(--blue); }
.section-head.section-blue::after { background: var(--blue); }

/* 7. Magenta Variant (Videos) */
.section-head.section-magenta { border-bottom-color: var(--magenta); }
.section-head.section-magenta h2, .section-head.section-magenta .see-all { color: var(--magenta); }
.section-head.section-magenta::after { background: var(--magenta); }

/* 8. Gold Variant (Photo Gallery) */
.section-head.section-gold { border-bottom-color: var(--gold); }
.section-head.section-gold h2, .section-head.section-gold .see-all { color: var(--gold); }
.section-head.section-gold::after { background: var(--gold); }

/* ── Hover Sweep Animation on Border ── */
.section-head::after {
    content: '';
    position: absolute;
    bottom: -2.5px;
    left: 0;
    width: 0;
    height: 2.5px;
    transition: width 0.4s ease;
}

.section-head:hover::after {
    width: 100%;
}

/* ── Post count badge (optional) ── */
.section-head .section-count {
    font-size: 11px;
    color: #fff;
    background: currentColor; /* Matches the parent's assigned color */
    padding: 2px 8px;
    border-radius: 99px;
    font-weight: 600;
    letter-spacing: .03em;
    align-self: center;
}

/* ── Responsive ── */
@media (max-width: 600px) {
    .section-head h2 { font-size: 16px; }
    .section-head { padding: 14px 0 10px; }
}