/* ==========================================================================
   Vartha Times — shared design system (Indian Express–inspired layout)
   Loaded by index.php, article.php and page.php so header/nav/footer/
   typography stay identical across the site.
   ========================================================================== */

:root {
    --red: #D0021B;
    --red-dark: #A30115;
    --ink: #111111;
    --ink-soft: #3f3f3f;
    --gray-900: #1a1a1a;
    --gray-700: #4b5563;
    --gray-500: #6b7280;
    --gray-300: #d1d5db;
    --gray-200: #e5e7eb;
    --gray-100: #f4f4f5;
    --bg-soft: #f8f8f7;
    --font-sans: 'Anek Kannada', sans-serif;
    --font-serif: 'Noto Serif Kannada', serif;
}

body { font-family: var(--font-sans); color: var(--ink); }
.font-serif-head { font-family: var(--font-serif); }
.hidden-view { display: none !important; }
.no-scrollbar::-webkit-scrollbar { display: none; }
.no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }

/* ---- Utility strip ---- */
.utility-bar { background: var(--ink); color: #cfcfcf; font-size: 11px; letter-spacing: .03em; }
.utility-bar a { color: #cfcfcf; transition: color .15s; }
.utility-bar a:hover { color: #fff; }

/* ---- Masthead ---- */
.masthead { background: #fff; border-bottom: 1px solid var(--gray-200); }
.masthead-title {
    font-family: var(--font-serif);
    font-weight: 900;
    letter-spacing: -0.01em;
}

/* ---- Primary nav ---- */
.main-nav { background: var(--ink); border-top: 3px solid var(--red); border-bottom: 3px solid var(--red); }
.main-nav a, .main-nav button {
    font-family: var(--font-sans);
    font-weight: 700;
    font-size: 14px;
    letter-spacing: .02em;
    color: #e5e5e5;
    text-transform: uppercase;
    white-space: nowrap;
    padding: 12px 18px;
    border-right: 1px solid rgba(255,255,255,.08);
    transition: background .15s, color .15s;
}
.main-nav a:hover, .main-nav button:hover { background: var(--red); color: #fff; }
.main-nav a.active, .main-nav button.active { background: var(--red); color: #fff; }

.mobile-nav a { font-family: var(--font-sans); font-weight: 700; color: var(--gray-900); }
.mobile-nav a.active { color: var(--red); background: #fdf1f1; }

/* ---- Breaking ticker ---- */
.flash-ticker { background: var(--ink); border-top: 1px solid #000; }
.flash-tag { background: var(--red); color: #fff; font-family: var(--font-sans); }
.flash-ticker a { color: #f0f0f0; font-family: var(--font-sans); font-weight: 700; }
.flash-ticker a:hover { color: var(--red); }
@keyframes marquee { 0% { transform: translateX(100%); } 100% { transform: translateX(-100%); } }
.animate-marquee { display: inline-block; animation: marquee 32s linear infinite; }
.animate-marquee:hover { animation-play-state: paused; }

/* ---- Section headers ---- */
.section-head {
    display: flex; align-items: center; justify-content: space-between;
    border-bottom: 3px solid var(--ink);
    margin-bottom: 18px; padding-bottom: 8px;
}
.section-head h2 {
    font-family: var(--font-serif);
    font-weight: 800;
    font-size: 22px;
    color: var(--ink);
    position: relative;
    display: inline-flex; align-items: center;
}
.section-head h2::before { content: ""; width: 6px; height: 22px; background: var(--red); margin-right: 10px; display: inline-block; }
.section-head a.more-link { font-size: 12px; font-weight: 800; color: var(--red); text-transform: uppercase; letter-spacing: .03em; }
.section-head a.more-link:hover { text-decoration: underline; }

/* ---- Cards ---- */
.article-card { transition: box-shadow .15s, transform .15s; }
.article-card:hover .card-title { color: var(--red); }
.card-title { font-family: var(--font-serif); font-weight: 700; line-height: 1.3; color: var(--ink); }
.card-meta { font-family: var(--font-sans); font-size: 11px; color: var(--gray-500); text-transform: uppercase; font-weight: 700; letter-spacing: .02em; }
.category-pill {
    display: inline-block; background: var(--red); color: #fff; font-weight: 800;
    font-size: 10px; letter-spacing: .05em; text-transform: uppercase;
    padding: 3px 9px; border-radius: 2px;
}

/* ---- Hero / lead story ---- */
.hero-lead { position: relative; overflow: hidden; background: #000; }
.hero-lead img { transition: transform .5s; }
.hero-lead:hover img { transform: scale(1.03); }
.hero-headline { font-family: var(--font-serif); font-weight: 800; letter-spacing: -0.01em; }

/* ---- Article body typography ---- */
.article-body p { margin-bottom: 1.4em; line-height: 1.85; font-size: 1.15rem; color: var(--ink-soft); }
.article-body h2, .article-body h3 { font-family: var(--font-serif); font-weight: 800; margin-top: 1.5em; margin-bottom: .5em; color: var(--ink); }
.article-body h2 { font-size: 1.9rem; }
.article-body h3 { font-size: 1.5rem; }
.article-body ul, .article-body ol { margin-bottom: 1.5em; padding-left: 1.5em; }
.article-body ul { list-style-type: disc; }
.article-body ol { list-style-type: decimal; }
.article-body a { color: var(--red); text-decoration: underline; }
.article-body img { border-radius: 8px; }

/* ---- Footer ---- */
.site-footer { background: var(--ink); color: #cfcfcf; }
.site-footer a { color: #cfcfcf; }
.site-footer a:hover { color: #fff; }
.site-footer h2 { font-family: var(--font-serif); }

/* ---- Logo shine (kept from original) ---- */
.logo-flip-shine { position: relative; display: inline-block; overflow: hidden; border-radius: 6px; }
.logo-flip-shine::after {
    content: ""; position: absolute; top: 0; left: -150%; width: 50%; height: 100%;
    background: linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(255,255,255,.7) 50%, rgba(255,255,255,0) 100%);
    transform: skewX(-25deg); animation: shine-animation 7s infinite ease-in-out; pointer-events: none;
}
@keyframes shine-animation { 0%, 75% { left: -150%; opacity: 0; } 85% { opacity: 1; } 100% { left: 150%; opacity: 0; } }

/* ---- Line clamp helpers ---- */
.line-clamp-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.line-clamp-3 { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }