/* ==========================================================================
   தமிழ் Articles — Design tokens
   Palette:  navy #0d3163 (primary) / #071d3f (deep) / #163f74 (mid)
             orange #ff7a00 (accent) / #ffb020 (light accent) / #c1440e (deep accent)
             surface #ffffff / #f5f7fb (page bg) / #eef1f7 (soft panel)
             ink #16213e (headings) / #4a5468 (body) / #8891a3 (muted)
   Type: "Baloo Thambi 2" (Tamil display / headlines)
         "Catamaran" (Tamil + Latin body & UI)
         "Poppins" (Latin utility / buttons / labels)
   Signature: an angled "nib stroke" — a tapering diagonal accent line,
   echoing the pen-nib in the logo, used under headlines and section titles.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Baloo+Thambi+2:wght@500;600;700;800&family=Catamaran:wght@400;500;600;700;800&family=Poppins:wght@400;500;600;700&display=swap');

:root {
    --navy: #0d3163;
    --navy-deep: #071d3f;
    --navy-mid: #163f74;
    --navy-soft: #e8eef8;

    --orange: #ff7a00;
    --orange-light: #ffb020;
    --orange-deep: #c1440e;
    --orange-soft: #fff1e0;

    --ink: #16213e;
    --body: #4a5468;
    --muted: #8891a3;
    --line: #e3e7ef;

    --bg: #f5f7fb;
    --surface: #ffffff;
    --panel: #eef1f7;

    /* Text color used on panel/surface/navy-soft chips & badges.
       Kept separate from --navy (used for solid navy backgrounds)
       so it can be re-tinted for dark mode without breaking those. */
    --navy-text: #0d3163;

    --font-display: 'Baloo Thambi 2', 'Catamaran', sans-serif;
    --font-body: 'Catamaran', 'Poppins', sans-serif;
    --font-ui: 'Poppins', 'Catamaran', sans-serif;

    --radius-s: 8px;
    --radius-m: 14px;
    --radius-l: 22px;

    --shadow-s: 0 2px 10px rgba(13, 49, 99, 0.06);
    --shadow-m: 0 10px 30px rgba(13, 49, 99, 0.10);
    --shadow-orange: 0 10px 24px rgba(255, 122, 0, 0.28);

    --container: 1240px;
}

[data-theme="dark"] {
    --ink: #eef1f7;
    --body: #c3cadb;
    --muted: #8996b3;
    --line: #223256;

    --bg: #0a1730;
    --surface: #0f2044;
    --panel: #12294f;

    --navy-soft: #17325e;

    /* Lighten navy-toned text so it stays readable on the dark
       panel/surface/navy-soft backgrounds above (was invisible
       before, since --navy itself stayed dark in dark mode). */
    --navy-text: #a9c6f5;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
    margin: 0;
    width: 100%;
    font-family: var(--font-body);
    background: var(--bg);
    color: var(--body);
    line-height: 1.6;
    transition: background 0.3s ease, color 0.3s ease;
    overflow-x: hidden;
}

img { max-width: 100%; display: block; }
a { text-decoration: none; color: inherit; }
ul { list-style: none; }
button { font-family: inherit; cursor: pointer; border: none; background: none; }

.container {
    max-width: var(--container);
    margin: 0 auto;
    padding: 0 24px;
}

h1, h2, h3, h4 {
    font-family: var(--font-display);
    color: var(--ink);
    font-weight: 700;
    line-height: 1.25;
}

/* Visible keyboard focus */
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible {
    outline: 3px solid var(--orange);
    outline-offset: 2px;
    border-radius: 4px;
}

@media (prefers-reduced-motion: reduce) {
    * { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; }
}

/* --------------------------------------------------------------------------
   Signature element: the nib-stroke divider
   -------------------------------------------------------------------------- */
.nib-stroke {
    display: inline-block;
    width: 64px;
    height: 10px;
    margin-top: 10px;
    background: linear-gradient(100deg, var(--orange) 0%, var(--orange-light) 55%, transparent 60%);
    clip-path: polygon(0 60%, 78% 0%, 100% 35%, 22% 100%);
}
.section-head .nib-stroke { margin-top: 6px; }

/* --------------------------------------------------------------------------
   Top utility bar
   -------------------------------------------------------------------------- */
.topbar {
    background: var(--navy-deep);
    color: #cfe0ff;
    font-family: var(--font-ui);
    font-size: 14px;
}
.topbar .container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 40px;
    gap: 20px;
}
.topbar-date {
    white-space: nowrap;
    color: #9fb6e3;
}
.ticker {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 12px;
    overflow: hidden;
    min-width: 0;
}
.ticker-tag {
    flex-shrink: 0;
    background: var(--orange);
    color: #fff;
    font-weight: 700;
    padding: 5px 14px;
    border-radius: 999px;
    font-size: 13px;
    letter-spacing: 0.3px;
}
.ticker-track {
    flex: 1;
    overflow: hidden;
    white-space: nowrap;
    position: relative;
}
.ticker-track span {
    display: inline-block;
    padding-left: 100%;
    animation: ticker-scroll 22s linear infinite;
}
@keyframes ticker-scroll {
    0% { transform: translateX(0); }
    100% { transform: translateX(-100%); }
}
.topbar-links {
    display: flex;
    align-items: center;
    gap: 16px;
    white-space: nowrap;
}
.topbar-links a { color: #cfe0ff; }
.topbar-links a:hover { color: var(--orange-light); }

/* --------------------------------------------------------------------------
   Header
   -------------------------------------------------------------------------- */
.site-header {
    background: var(--surface);
    padding: 18px 0;
    box-shadow: var(--shadow-s);
}
.site-header .container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
}
.brand { display: flex; align-items: center; }
.brand img { height: 72px; width: auto; }

.header-actions { display: flex; align-items: center; gap: 12px; }

.icon-btn {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--navy-soft);
    color: var(--navy-text);
    font-size: 16px;
    transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease;
}
.icon-btn:hover { background: var(--orange); color: #fff; transform: translateY(-2px); }

.search-box {
    display: flex;
    align-items: center;
    background: var(--panel);
    border-radius: 999px;
    padding: 6px 6px 6px 18px;
    gap: 8px;
    max-width: 480px;
    flex: 1;
}
.search-box input {
    border: none;
    background: none;
    font-family: var(--font-body);
    font-size: 14px;
    color: var(--ink);
    width: 100%;
    min-width: 0;
    outline: none;
}
.search-box input::placeholder { color: var(--muted); }
.search-box button {
    width: 34px; height: 34px;
    border-radius: 50%;
    background: var(--orange);
    color: #fff;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}

/* --------------------------------------------------------------------------
   Nav bar
   -------------------------------------------------------------------------- */
.nav-wrap {
    background: var(--navy);
    position: sticky;
    top: 0;
    z-index: 200;
    box-shadow: 0 4px 16px rgba(0,0,0,0.08);
}
.nav-bar {
    display: flex;
    align-items: stretch;
    justify-content: space-between;
}
.nav-list {
    display: flex;
    align-items: stretch;
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
}
.nav-list::-webkit-scrollbar { display: none; }
.nav-list > li { position: relative; flex-shrink: 0; }
.nav-list > li > a {
    display: flex;
    align-items: center;
    height: 52px;
    padding: 0 18px;
    color: #eaf0fb;
    font-family: var(--font-ui);
    font-weight: 500;
    font-size: 14.5px;
    white-space: nowrap;
    position: relative;
    transition: color 0.2s ease, background 0.2s ease;
}
.nav-list > li > a::after {
    content: '';
    position: absolute;
    left: 18px; right: 18px; bottom: 0;
    height: 3px;
    background: var(--orange);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.25s ease;
}
.nav-list > li > a:hover,
.nav-list > li > a.active { color: #fff; background: rgba(255,255,255,0.06); }
.nav-list > li > a:hover::after,
.nav-list > li > a.active::after { transform: scaleX(1); }

.nav-list .has-sub > a::before {
    content: '\f078';
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    font-size: 10px;
    margin-inline-start: 6px;
    order: 2;
    opacity: 0.7;
}
.nav-list .has-sub > a { gap: 2px; }

.submenu {
    position: absolute;
    top: 100%; left: 0;
    min-width: 220px;
    background: var(--surface);
    border-radius: 0 0 var(--radius-s) var(--radius-s);
    box-shadow: var(--shadow-m);
    opacity: 0;
    visibility: hidden;
    transform: translateY(6px);
    transition: all 0.2s ease;
    overflow: hidden;
}
.has-sub:hover .submenu { opacity: 1; visibility: visible; transform: translateY(0); }
.submenu li a {
    display: block;
    padding: 12px 18px;
    color: var(--body);
    font-size: 14px;
    border-bottom: 1px solid var(--line);
}
.submenu li:last-child a { border-bottom: none; }
.submenu li a:hover { background: var(--orange-soft); color: var(--orange-deep); }

.nav-toggle {
    display: none;
    width: 52px;
    height: 52px;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 20px;
    flex-shrink: 0;
}

/* ---- Search box inline inside the mobile nav bar (next to the
   hamburger), replacing the old separate white search strip. Hidden
   on desktop, where the header's own .search-box is used instead. ---- */
.nav-search-mobile { display: none; }
@media (max-width: 768px) {
    .nav-search-mobile {
        display: flex;
        flex: 1;
        min-width: 0;
        max-width: none;
        align-self: center;
        margin: 0 10px;
        padding: 5px 5px 5px 16px;
        background: rgba(255, 255, 255, 0.14);
    }
    .nav-search-mobile input {
        color: #fff;
        font-size: 13.5px;
    }
    .nav-search-mobile input::placeholder { color: rgba(255, 255, 255, 0.7); }
    .nav-search-mobile button { width: 30px; height: 30px; flex-shrink: 0; }
}
@media (max-width: 420px) {
    .nav-search-mobile { margin: 0 6px; padding-left: 12px; }
}

/* Hamburger drawn in pure CSS (three bars -> X) so the menu button is
   always visible and tappable even if the icon-font CDN is slow,
   blocked, or offline — this no longer depends on Font Awesome. */
.hamburger-icon {
    position: relative;
    display: inline-block;
    width: 22px;
    height: 16px;
}
.hamburger-icon span {
    position: absolute;
    left: 0;
    right: 0;
    height: 2px;
    border-radius: 2px;
    background: #fff;
    transition: transform 0.25s ease, opacity 0.2s ease, top 0.25s ease;
}
.hamburger-icon span:nth-child(1) { top: 0; }
.hamburger-icon span:nth-child(2) { top: 7px; }
.hamburger-icon span:nth-child(3) { top: 14px; }
.nav-wrap.nav-open .hamburger-icon span:nth-child(1) { top: 7px; transform: rotate(45deg); }
.nav-wrap.nav-open .hamburger-icon span:nth-child(2) { opacity: 0; }
.nav-wrap.nav-open .hamburger-icon span:nth-child(3) { top: 7px; transform: rotate(-45deg); }

/* Scroll arrows for when the nav menu overflows the header width */
.nav-scroll-btn {
    display: none;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    margin: auto 8px;
    border-radius: 50%;
    flex-shrink: 0;
    background: rgba(255,255,255,0.12);
    color: #fff;
    font-size: 15px;
    z-index: 5;
    position: relative;
    transition: background 0.2s ease, opacity 0.2s ease;
}
.nav-scroll-btn:hover { background: rgba(255,255,255,0.24); }
.nav-wrap.has-overflow .nav-scroll-btn { display: flex; }
.nav-wrap.has-overflow.at-start .nav-scroll-left,
.nav-wrap.has-overflow.at-end .nav-scroll-right {
    opacity: 0.35;
}

/* --------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */
.hero-section { padding: 14px 0 4px; }
.hero-grid {
    display: grid;
    grid-template-columns: 1.6fr 1fr;
    gap: 24px;
}
.hero-main {
    position: relative;
    border-radius: var(--radius-l);
    overflow: hidden;
    min-height: 420px;
    box-shadow: var(--shadow-m);
}
.hero-slide {
    position: absolute; inset: 0;
    display: flex;
    align-items: flex-end;
    opacity: 0;
    visibility: hidden;
    transition: opacity 1.2s cubic-bezier(0.4, 0, 0.2, 1), visibility 1.2s;
    z-index: 1;
}
.hero-slide.active { opacity: 1; visibility: visible; z-index: 2; }
.hero-slide img {
    position: absolute; inset: 0;
    width: 100%; height: 100%; object-fit: cover;
    transform: scale(1.12);
    transition: transform 4.5s cubic-bezier(0.25, 0.1, 0.25, 1);
}
.hero-slide.active img { transform: scale(1); }
.hero-slide::before {
    content: '';
    position: absolute; inset: 0;
    background: linear-gradient(180deg, rgba(7,29,63,0) 30%, rgba(7,29,63,0.92) 100%);
}
.hero-content {
    position: relative; padding: 30px; color: #fff; z-index: 2;
    opacity: 0;
    transform: translateY(18px);
    transition: opacity 0.7s ease 0.25s, transform 0.7s ease 0.25s;
}
.hero-slide.active .hero-content { opacity: 1; transform: translateY(0); }
@media (max-width: 768px) {
    .hero-main { min-height: 320px; border-radius: var(--radius-m); }
    .hero-content { padding: 20px; }
}
@media (max-width: 480px) {
    .hero-main { min-height: 260px; }
}

.hero-dots {
    position: absolute;
    bottom: 16px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 8px;
    z-index: 3;
}
.hero-dot {
    width: 8px; height: 8px;
    border-radius: 999px;
    background: rgba(255,255,255,0.5);
    cursor: pointer;
    transition: background 0.25s ease, width 0.25s ease;
}
.hero-dot.active { background: #fff; width: 22px; }

.side-stack { display: grid; }
.side-group {
    grid-column: 1;
    grid-row: 1;
    display: flex;
    flex-direction: column;
    gap: 18px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: opacity 0.8s cubic-bezier(0.4, 0, 0.2, 1), transform 0.8s cubic-bezier(0.4, 0, 0.2, 1), visibility 0.8s;
    pointer-events: none;
}
.side-group.active {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    pointer-events: auto;
}
.hero-tag {
    display: inline-block;
    background: var(--orange);
    color: #fff;
    font-family: var(--font-ui);
    font-size: 12px;
    font-weight: 600;
    padding: 5px 14px;
    border-radius: 999px;
    margin-bottom: 14px;
}
.hero-content h1 {
    color: #fff;
    font-size: clamp(19px, 2.3vw, 26px);
    margin-bottom: 12px;
}
.hero-meta {
    font-family: var(--font-ui);
    font-size: 13px;
    color: #cfe0ff;
    display: flex;
    gap: 16px;
}

.side-card {
    display: flex;
    gap: 14px;
    background: var(--surface);
    border-radius: var(--radius-m);
    padding: 12px;
    box-shadow: var(--shadow-s);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.side-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-m); }
.side-card img {
    width: 96px; height: 84px;
    object-fit: cover;
    border-radius: var(--radius-s);
    flex-shrink: 0;
}
@media (max-width: 380px) {
    .side-card img { width: 80px; height: 70px; }
    .side-card { padding: 10px; gap: 10px; }
}
.side-card .cat-label {
    font-family: var(--font-ui);
    font-size: 11px;
    font-weight: 600;
    color: var(--orange-deep);
    text-transform: uppercase;
    letter-spacing: 0.4px;
}
.side-card h4 { font-size: 15.5px; margin-top: 4px; line-height: 1.35; }
.side-card time { font-size: 12px; color: var(--muted); margin-top: 6px; display: block; }

/* --------------------------------------------------------------------------
   Section heading
   -------------------------------------------------------------------------- */
.section { padding: 14px 0; }
.section-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    margin-bottom: 14px;
}
.section-head h2 { font-size: 26px; }
.section-more {
    font-family: var(--font-ui);
    font-size: 13.5px;
    font-weight: 600;
    color: var(--orange-deep);
    display: flex;
    align-items: center;
    gap: 6px;
}
.section-more:hover { color: var(--orange); }

/* "Read more" placed below the 4-post grid for a section (not per
   card) — a centered pill linking to the full category page. */
.section-more-wrap {
    display: flex;
    justify-content: center;
    margin-top: 18px;
}
.section-more-wrap .section-more {
    border: 1.5px solid var(--orange);
    border-radius: 999px;
    padding: 10px 26px;
    transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease;
}
.section-more-wrap .section-more:hover {
    background: var(--orange);
    color: #fff;
    transform: translateY(-2px);
}

.content-layout {
    display: grid;
    grid-template-columns: 1fr 320px;
    gap: 30px;
    align-items: start;
}
.sidebar { min-width: 0; }
@media (min-width: 1081px) {
    /* Calendar stays put while the post list next to it scrolls — no
       internal scrollbar on the sidebar itself, it just pins in place. */
    .sidebar {
        position: sticky;
        top: 78px; /* sits just below the sticky nav bar (52px) */
    }
}

/* --------------------------------------------------------------------------
   Homepage calendar — normally sits in the sidebar; script.js moves it
   into this slot (right under the hero/slider) on narrow screens where
   the sidebar stacks below all the article content, so it isn't buried
   at the very bottom of the page.
   -------------------------------------------------------------------------- */
.mobile-cal-slot:empty { display: none; }
.mobile-cal-slot {
    max-width: var(--container);
    margin: 14px auto;
    padding: 0 24px;
}
.mobile-cal-slot .cal-widget { margin-bottom: 0; }

/* --------------------------------------------------------------------------
   Article cards / grid
   -------------------------------------------------------------------------- */
.card-grid {
    display: grid;
    /* auto-fit collapses unused column tracks instead of leaving empty gaps
       when a section has fewer than 4 articles (e.g. only 2 news items) */
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 14px;
}
.article-card {
    background: var(--surface);
    border-radius: var(--radius-m);
    overflow: hidden;
    box-shadow: var(--shadow-s);
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.article-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-m); }
.article-thumb { position: relative; aspect-ratio: 4 / 3; overflow: hidden; }
@media (max-width: 480px) {
    .article-thumb { aspect-ratio: 3 / 2; }
}
.article-thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s ease; }
.article-card:hover .article-thumb img { transform: scale(1.06); }
.article-thumb .cat-pill {
    position: absolute; top: 12px; left: 12px;
    background: rgba(13,49,99,0.85);
    backdrop-filter: blur(3px);
    color: #fff;
    font-family: var(--font-ui);
    font-size: 11px;
    font-weight: 600;
    padding: 4px 12px;
    border-radius: 999px;
}
.article-body { padding: 16px; }
.article-body h3 { font-size: 16.5px; margin-bottom: 8px; line-height: 1.4; }
.article-body p { font-size: 13.5px; color: var(--muted); margin-bottom: 10px; }

.article-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-family: var(--font-ui);
    font-size: 12px;
    color: var(--muted);
    border-top: 1px solid var(--line);
    padding-top: 10px;
}

/* --------------------------------------------------------------------------
   Post list — homepage articles as stacked rows (thumb left, text right),
   one post per row on every screen size, instead of a grid of cards.
   -------------------------------------------------------------------------- */
.post-list { display: flex; flex-direction: column; gap: 12px; }
.post-row {
    display: flex;
    align-items: center;
    gap: 16px;
    background: var(--surface);
    border-radius: var(--radius-m);
    padding: 12px;
    box-shadow: var(--shadow-s);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.post-row:hover { transform: translateY(-3px); box-shadow: var(--shadow-m); }
.post-row .post-thumb {
    position: relative;
    width: 150px;
    height: 100px;
    flex-shrink: 0;
    border-radius: var(--radius-s);
    overflow: hidden;
}
.post-row .post-thumb img { width: 100%; height: 100%; object-fit: cover; }
.post-row .post-thumb .cat-pill {
    position: absolute; top: 8px; left: 8px;
    background: rgba(13,49,99,0.85);
    color: #fff;
    font-family: var(--font-ui);
    font-size: 10px;
    font-weight: 600;
    padding: 3px 9px;
    border-radius: 999px;
}
.post-row .post-body { flex: 1; min-width: 0; }
.post-row .post-body h3 {
    font-size: 16px;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.post-row .post-body .post-desc {
    margin-top: 6px;
    font-size: 13px;
    color: var(--muted);
    font-family: var(--font-ui);
    line-height: 1.5;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
@media (max-width: 640px) {
    .post-row .post-body .post-desc { display: none; }
}

/* --------------------------------------------------------------------------
   Category page — desktop only: show posts as a 4-column card grid
   (image on top, title below) instead of the row-list. Mobile/tablet
   (≤860px) keeps the row-list exactly as-is, and no other page is
   affected — this only targets .cat-post-grid, used on category.php.
   -------------------------------------------------------------------------- */
@media (min-width: 861px) {
    .cat-post-grid {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 18px;
    }
    .cat-post-grid .post-row {
        flex-direction: column;
        align-items: stretch;
        padding: 0;
        overflow: hidden;
    }
    .cat-post-grid .post-row .post-thumb {
        width: 100%;
        height: auto;
        aspect-ratio: 4 / 3;
        border-radius: 0;
    }
    .cat-post-grid .post-row .post-body {
        padding: 14px 16px 16px;
    }
    .cat-post-grid .post-row .post-body h3 {
        font-size: 16px;
        -webkit-line-clamp: 3;
    }
}
@media (max-width: 640px) {
    .post-row { padding: 9px; gap: 10px; }
    .post-row .post-thumb { width: 104px; height: 78px; }
    .post-row .post-body h3 { font-size: 13.5px; line-height: 1.35; }
    .post-row .post-thumb .cat-pill { font-size: 9px; padding: 2px 7px; top: 6px; left: 6px; }
}

/* --------------------------------------------------------------------------
   Sidebar "posts by category" widget — a compact list under the calendar,
   repeated per category so the sidebar keeps pace with the main content
   as the homepage scrolls, instead of leaving empty space under a short
   calendar box.
   -------------------------------------------------------------------------- */
.side-cat-widget h3 { justify-content: space-between; }
.side-cat-widget h3 .side-cat-more { font-size: 11.5px; color: var(--orange-deep); font-family: var(--font-ui); font-weight: 600; }
.side-cat-item {
    display: flex;
    gap: 10px;
    padding: 10px 0;
    border-bottom: 1px solid var(--line);
}
.side-cat-item:last-child { border-bottom: none; padding-bottom: 0; }
.side-cat-item img { width: 56px; height: 56px; object-fit: cover; border-radius: var(--radius-s); flex-shrink: 0; }
.side-cat-item h5 { font-size: 13px; line-height: 1.4; font-weight: 600; color: var(--ink); }

/* --------------------------------------------------------------------------
   News calendar — sidebar widget (sits next to the news sections on
   desktop, stacks below the content on smaller screens)
   -------------------------------------------------------------------------- */
.cal-widget { padding: 18px; }
.cal-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 18px;
}
.cal-nav-btn {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    border: 1px solid var(--line);
    background: transparent;
    color: var(--navy-text);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.cal-nav-btn:hover { background: var(--orange); color: #fff; border-color: var(--orange); }
.cal-month-label {
    font-family: var(--font-ui);
    font-weight: 700;
    font-size: 16px;
    color: var(--navy-text);
    display: flex;
    align-items: center;
    gap: 8px;
}
.cal-month-label i { color: var(--orange); }
.cal-weekdays {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    text-align: center;
    font-family: var(--font-ui);
    font-size: 12.5px;
    font-weight: 600;
    color: var(--muted);
    margin-bottom: 8px;
}
.cal-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    row-gap: 6px;
}
.cal-day {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    background: transparent;
    font-family: var(--font-ui);
    font-size: 13px;
    font-weight: 600;
    color: var(--navy-text);
    border-radius: 50%;
    cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease;
    width: 32px;
    height: 32px;
    margin: 0 auto;
}
.cal-day:hover:not(.cal-day-empty):not(.cal-day-nopost) { background: var(--orange-soft); }
.cal-day-empty { cursor: default; pointer-events: none; }
/* A day with no published posts: shown but not a link — muted and
   inert, so only dates with actual news are clickable. */
.cal-day-nopost { cursor: default; pointer-events: none; color: var(--muted); opacity: 0.5; }
.cal-day-selected { background: var(--orange); color: #fff; }
.cal-dot {
    position: absolute;
    bottom: 4px;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--orange);
}
.cal-day-selected .cal-dot { background: #fff; }
.cal-legend {
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: var(--font-ui);
    font-size: 12px;
    color: var(--muted);
    margin-top: 18px;
}
.cal-legend-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--orange); display: inline-block; flex-shrink: 0; }

/* Contact strip built into the calendar widget itself, right under the
   legend, so it always sits with the calendar as one design (desktop
   sidebar and the mobile top slot alike) instead of its own separate box. */
.cal-contact {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px dashed var(--line);
}
.cal-contact i {
    width: 34px;
    height: 34px;
    flex-shrink: 0;
    border-radius: 50%;
    background: var(--orange-soft);
    color: var(--orange-deep);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
}
.cal-contact-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.cal-contact-label {
    font-family: var(--font-ui);
    font-size: 11.5px;
    font-weight: 600;
    color: var(--muted);
}
.cal-contact-text a {
    font-family: var(--font-ui);
    font-size: 13.5px;
    font-weight: 700;
    color: var(--orange-deep);
    word-break: break-word;
}
.cal-contact-text a:hover { text-decoration: underline; }

@media (max-width: 480px) {
    .cal-widget { padding: 18px 16px; }
}

/* --------------------------------------------------------------------------
   Sidebar
   -------------------------------------------------------------------------- */
.widget {
    background: var(--surface);
    border-radius: var(--radius-m);
    padding: 18px;
    box-shadow: var(--shadow-s);
    margin-bottom: 16px;
}
.widget h3 {
    font-size: 17px;
    margin-bottom: 12px;
    padding-bottom: 10px;
    border-bottom: 2px solid var(--orange-soft);
    display: flex;
    align-items: center;
    gap: 10px;
}
.widget h3 i { color: var(--orange); }

/* Contact widget — sits above the calendar in the sidebar */
.contact-widget .contact-text {
    font-family: var(--font-ui);
    font-size: 13px;
    line-height: 1.7;
    color: var(--muted);
}
.contact-widget .contact-text a {
    color: var(--orange-deep);
    font-weight: 600;
    word-break: break-word;
}

.trend-item {
    display: flex;
    gap: 14px;
    align-items: flex-start;
    padding: 12px 0;
    border-bottom: 1px solid var(--line);
}
.trend-item:last-child { border-bottom: none; padding-bottom: 0; }
.trend-num {
    font-family: var(--font-display);
    font-size: 22px;
    font-weight: 800;
    color: var(--orange);
    width: 30px;
    flex-shrink: 0;
    line-height: 1;
}
.trend-item h4 { font-size: 14.5px; line-height: 1.4; margin-bottom: 4px; }
.trend-item time { font-size: 11.5px; color: var(--muted); }

.tag-cloud { display: flex; flex-wrap: wrap; gap: 10px; }
.tag-cloud a {
    font-family: var(--font-ui);
    font-size: 13px;
    background: var(--panel);
    color: var(--navy-text);
    padding: 7px 14px;
    border-radius: 999px;
    transition: all 0.2s ease;
}
.tag-cloud a:hover { background: var(--orange); color: #fff; }

.newsletter-widget {
    background: linear-gradient(135deg, var(--navy) 0%, var(--navy-mid) 100%);
    color: #fff;
}
.newsletter-widget h3 { color: #fff; border-color: rgba(255,255,255,0.15); }
.newsletter-widget p { font-size: 13.5px; color: #cfe0ff; margin-bottom: 16px; }
.newsletter-form { display: flex; flex-direction: column; gap: 10px; }
.newsletter-form input {
    padding: 12px 14px;
    border-radius: var(--radius-s);
    border: none;
    font-family: var(--font-body);
    font-size: 14px;
}
.newsletter-form button {
    background: var(--orange);
    color: #fff;
    font-family: var(--font-ui);
    font-weight: 600;
    padding: 12px;
    border-radius: var(--radius-s);
    transition: background 0.2s ease;
}
.newsletter-form button:hover { background: var(--orange-deep); }

/* --------------------------------------------------------------------------
   Category strip (visual band between sections)
   -------------------------------------------------------------------------- */
.promo-strip {
    background: linear-gradient(120deg, var(--navy-deep), var(--navy) 60%, var(--navy-mid));
    border-radius: var(--radius-l);
    padding: 26px 32px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    color: #fff;
    position: relative;
    overflow: hidden;
}
.promo-strip::after {
    content: '';
    position: absolute;
    width: 260px; height: 260px;
    background: radial-gradient(circle, rgba(255,122,0,0.35), transparent 70%);
    right: -60px; top: -80px;
}
.promo-strip h3 { color: #fff; font-size: 24px; max-width: 480px; position: relative; z-index: 2; }
.promo-strip p { color: #cfe0ff; margin-top: 8px; font-size: 14px; position: relative; z-index: 2; }
.promo-btn {
    background: var(--orange);
    color: #fff;
    font-family: var(--font-ui);
    font-weight: 600;
    padding: 14px 28px;
    border-radius: 999px;
    box-shadow: var(--shadow-orange);
    white-space: nowrap;
    position: relative;
    z-index: 2;
    transition: transform 0.2s ease;
}
.promo-btn:hover { transform: translateY(-3px); }

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */
.site-footer {
    background: var(--navy-deep);
    color: #cfe0ff;
}
.footer-top {
    width: 100%;
    margin: 0 auto;
    padding: 60px 20px 40px;
    box-sizing: border-box;
}
.footer-grid {
    display: grid;
    grid-template-columns: 1.4fr 1fr 1fr 1fr;
    gap: 36px;
    width: 100%;
    justify-content: space-between;
}
.footer-logo-wrap {
    display: inline-flex;
    align-items: center;
    background: #fff;
    border-radius: var(--radius-s);
    padding: 8px 16px;
    margin-top: 10px;
    margin-bottom: 22px;
}
.footer-brand img { height: 42px; display: block; }
.footer-brand p { font-size: 13.5px; color: #9fb6e3; line-height: 1.7; margin-bottom: 18px; }
.footer-contact-email {
    display: flex; flex-direction: column; gap: 4px;
    font-size: 13.5px; color: #9fb6e3;
    margin-top: -8px; margin-bottom: 20px;
}
.footer-contact-email .fce-label { display: flex; align-items: center; gap: 8px; white-space: nowrap; }
.footer-contact-email i { color: var(--orange); font-size: 14px; flex-shrink: 0; }
.footer-contact-email a { color: #fff; font-weight: 600; font-size: 14.5px; word-break: normal; overflow-wrap: normal; white-space: nowrap; }
.footer-contact-email a:hover { color: var(--orange-light); }
.social-row { display: flex; gap: 10px; }
.social-row a {
    width: 38px; height: 38px;
    border-radius: 50%;
    background: rgba(255,255,255,0.08);
    display: flex; align-items: center; justify-content: center;
    color: #fff;
    transition: background 0.2s ease, transform 0.2s ease;
}
.social-row a:hover { background: var(--orange); transform: translateY(-3px); }

.footer-col h4 {
    color: #fff;
    font-size: 15.5px;
    margin-bottom: 18px;
    position: relative;
    padding-bottom: 10px;
    overflow-wrap: anywhere;
    text-align: center;
}
.footer-col h4::after {
    content: '';
    position: absolute; left: 50%; bottom: 0;
    transform: translateX(-50%);
    width: 34px; height: 3px;
    background: var(--orange);
    border-radius: 2px;
}
.footer-col ul { text-align: center; }
.footer-col ul li { margin-bottom: 11px; }
.footer-col ul li a {
    display: inline-block;
    max-width: 100%;
    font-size: 13.5px;
    color: #b7c8e8;
    overflow-wrap: anywhere;
    transition: color 0.2s ease;
}
.footer-col ul li a:hover { color: var(--orange-light); }
.footer-bottom {
    border-top: 1px solid rgba(255,255,255,0.08);
    padding: 20px 0;
}
.footer-bottom .container {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 12px;
    text-align: center;
}
.footer-bottom p { font-size: 12.5px; color: #8ea3c9; width: 100%; text-align: center; }
.footer-legal { display: flex; gap: 18px; }
.footer-legal a { font-size: 12.5px; color: #8ea3c9; }
.footer-legal a:hover { color: var(--orange-light); }

/* --------------------------------------------------------------------------
   Back to top
   -------------------------------------------------------------------------- */
.back-top {
    /* Pinned to the viewport's bottom-right corner at all times — not
       part of the footer's flow. `!important` on position/inset guards
       against ever being pulled back into normal flow by a stray rule. */
    position: fixed !important;
    right: 22px; bottom: 22px;
    /* Clears the safe area on notched/gesture-nav phones so it never
       sits flush against the very edge of the screen. */
    right: max(22px, env(safe-area-inset-right));
    bottom: max(22px, env(safe-area-inset-bottom) + 14px);
    width: 48px; height: 48px;
    border-radius: 50%;
    /* Same solid brand orange used everywhere else in the UI (search
       button, tags, active pagination, etc.) — the "real" app color. */
    background: var(--orange);
    color: #fff;
    display: flex; align-items: center; justify-content: center;
    box-shadow: var(--shadow-orange);
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: opacity 0.3s ease, visibility 0.3s ease, transform 0.3s ease, background 0.2s ease;
    /* High enough to always float above the footer and any page
       content beneath it. */
    z-index: 999;
    font-size: 16px;
    pointer-events: none;
}
.back-top.show { opacity: 1; visibility: visible; transform: translateY(0); pointer-events: auto; }
.back-top:hover { background: var(--orange-deep); }
@media (max-width: 480px) {
    .back-top { width: 44px; height: 44px; right: 16px; font-size: 15px; }
}

/* --------------------------------------------------------------------------
   Floating social bar (left edge, managed from admin > Social Links)
   Each icon floats as its own separate circle in that platform's real
   brand color, instead of one connected navy strip.
   -------------------------------------------------------------------------- */
.floating-social {
    position: fixed;
    right: 20px;
    bottom: 100px; /* sits just above .back-top so the two never overlap */
    z-index: 250;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.floating-social a {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--navy); /* fallback if a platform class below is missing */
    color: #fff;
    font-size: 17px;
    box-shadow: var(--shadow-m);
    transition: transform 0.2s ease, box-shadow 0.2s ease, filter 0.2s ease;
}
.floating-social a:hover { transform: translateY(-3px) scale(1.06); filter: brightness(1.08); }

/* Real per-platform brand colors */
.floating-social a.fs-facebook  { background: #1877F2; }
.floating-social a.fs-instagram { background: radial-gradient(circle at 30% 110%, #ffdb8c 0%, #fdad4e 20%, #ff6f4d 45%, #e6335f 65%, #b32aa0 80%, #7b3af0 100%); }
.floating-social a.fs-twitter   { background: #000000; }
.floating-social a.fs-youtube   { background: #FF0000; }
.floating-social a.fs-tiktok    { background: #010101; }
.floating-social a.fs-whatsapp  { background: #25D366; }

@media (max-width: 600px) {
    .floating-social { right: 12px; bottom: 76px; gap: 9px; }
    .floating-social a { width: 32px; height: 32px; font-size: 13px; }
    .floating-social a:hover { transform: translateY(-2px) scale(1.05); }
}

/* --------------------------------------------------------------------------
   Page header (category / contact pages)
   -------------------------------------------------------------------------- */
.page-banner {
    background: linear-gradient(120deg, var(--navy-deep), var(--navy));
    padding: 46px 0;
    color: #fff;
    position: relative;
    overflow: hidden;
}
.page-banner::after {
    content: '';
    position: absolute; right: -40px; top: -60px;
    width: 220px; height: 220px;
    background: radial-gradient(circle, rgba(255,122,0,0.3), transparent 70%);
}
.page-banner h1 { color: #fff; font-size: 30px; position: relative; z-index: 2; }
.breadcrumb {
    font-family: var(--font-ui);
    font-size: 13px;
    color: #cfe0ff;
    margin-top: 10px;
    position: relative;
    z-index: 2;
}
.breadcrumb a { color: #cfe0ff; }
.breadcrumb a:hover { color: var(--orange-light); }
.breadcrumb i { font-size: 10px; margin: 0 8px; }

.subcat-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 22px;
    position: relative;
    z-index: 2;
}
.subcat-tabs a {
    font-family: var(--font-ui);
    font-size: 13.5px;
    font-weight: 500;
    color: #eaf0fb;
    background: rgba(255,255,255,0.08);
    padding: 9px 18px;
    border-radius: 999px;
    white-space: nowrap;
    transition: all 0.2s ease;
}
.subcat-tabs a:hover { background: rgba(255,255,255,0.16); color: #fff; }
.subcat-tabs a.active { background: var(--orange); color: #fff; box-shadow: var(--shadow-orange); }

.pagination {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
    row-gap: 10px;
    margin-top: 36px;
    max-width: 100%;
}
.pagination a, .pagination span {
    width: 40px; height: 40px;
    border-radius: var(--radius-s);
    display: flex; align-items: center; justify-content: center;
    background: var(--surface);
    color: var(--navy-text);
    font-family: var(--font-ui);
    font-size: 14px;
    box-shadow: var(--shadow-s);
}
.pagination .active { background: var(--orange); color: #fff; }
.pagination a:hover { background: var(--navy-soft); }

/* --------------------------------------------------------------------------
   Article (post) page
   -------------------------------------------------------------------------- */
.post-head { max-width: 820px; margin: 0 auto 30px; text-align: center; }
.post-head .hero-tag { margin-bottom: 16px; }
.post-head h1 { font-size: clamp(26px, 3.4vw, 38px); margin-bottom: 16px; }
.post-meta {
    display: flex;
    justify-content: center;
    gap: 22px;
    font-family: var(--font-ui);
    font-size: 13.5px;
    color: var(--muted);
    flex-wrap: wrap;
}
.post-cover {
    border-radius: var(--radius-l);
    overflow: hidden;
    max-width: 900px;
    margin: 30px auto;
    box-shadow: var(--shadow-m);
    aspect-ratio: 16 / 9;
    max-height: 460px;
}
.post-cover img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
@media (max-width: 768px) {
    .post-cover { margin: 22px auto; border-radius: var(--radius-m); }
}
@media (max-width: 480px) {
    .post-cover { margin: 16px auto; aspect-ratio: 4 / 3; border-radius: var(--radius-s); }
}
.post-highlight-card {
    max-width: 900px;
    margin: 0 auto 30px;
    padding: 28px 30px 34px;
    background: var(--surface);
    border-radius: var(--radius-l);
    box-shadow: var(--shadow-m);
    border-top: 5px solid var(--orange);
}
.post-highlight-card .post-cover {
    margin: 26px 0;
    max-width: none;
}
.post-highlight-card .post-body {
    margin: 0 auto;
}
@media (max-width: 768px) {
    .post-highlight-card { padding: 20px 18px 26px; border-radius: var(--radius-m); }
}
@media (max-width: 480px) {
    .post-highlight-card { padding: 16px 14px 22px; }
}
.post-body {
    max-width: 760px;
    margin: 0 auto;
    font-size: 16.5px;
    color: var(--body);
}
.post-body p { margin-bottom: 20px; }
.post-body h2 { font-size: 22px; margin: 32px 0 14px; }
.post-body img {
    border-radius: var(--radius-m);
    box-shadow: var(--shadow-s);
    margin: 22px auto;
}
@media (max-width: 480px) {
    .post-body img { border-radius: var(--radius-s); margin: 16px auto; }
}
/* Make embedded videos (YouTube/Facebook iframes etc.) from the rich-text
   editor responsive instead of overflowing on mobile screens */
.post-body iframe,
.post-body video,
.post-body embed,
.post-body object {
    display: block;
    width: 100% !important;
    max-width: 100%;
    height: auto !important;
    aspect-ratio: 16 / 9;
    border: none;
    border-radius: var(--radius-m);
    margin: 22px auto;
}
/* Some editors wrap embeds in a <p> or a div (e.g. class="embed", "video-wrapper") */
.post-body p:has(> iframe),
.post-body .embed,
.post-body .video-wrapper {
    max-width: 100%;
    overflow: hidden;
}
@media (max-width: 480px) {
    .post-body iframe,
    .post-body video,
    .post-body embed,
    .post-body object {
        border-radius: var(--radius-s);
        margin: 16px auto;
    }
}
.post-body blockquote {
    border-left: 4px solid var(--orange);
    background: var(--orange-soft);
    padding: 18px 22px;
    border-radius: 0 var(--radius-s) var(--radius-s) 0;
    font-style: italic;
    color: var(--navy-text);
    margin: 26px 0;
}
.share-row {
    display: flex;
    align-items: center;
    gap: 12px;
    max-width: 760px;
    margin: 30px auto 0;
    padding-top: 24px;
    border-top: 1px solid var(--line);
}
.share-row span { font-family: var(--font-ui); font-size: 13.5px; color: var(--muted); }
.share-row a {
    width: 38px; height: 38px;
    border-radius: 50%;
    background: var(--panel);
    color: var(--navy-text);
    display: flex; align-items: center; justify-content: center;
    transition: all 0.2s ease;
}
.share-row a:hover { background: var(--orange); color: #fff; }

/* --------------------------------------------------------------------------
   Contact page
   -------------------------------------------------------------------------- */
.contact-grid {
    display: grid;
    grid-template-columns: 1fr 1.1fr;
    gap: 34px;
    align-items: start;
}
.contact-info-card {
    background: var(--navy);
    color: #fff;
    border-radius: var(--radius-l);
    padding: 34px;
    position: relative;
    overflow: hidden;
}
.contact-info-card::after {
    content: '';
    position: absolute; left: -50px; bottom: -70px;
    width: 220px; height: 220px;
    background: radial-gradient(circle, rgba(255,122,0,0.28), transparent 70%);
}
.contact-info-card h3 { color: #fff; font-size: 22px; margin-bottom: 10px; position: relative; z-index: 2; }
.contact-info-card > p { color: #cfe0ff; font-size: 14px; margin-bottom: 26px; position: relative; z-index: 2; }
.contact-info-card ul { position: relative; z-index: 2; }
.contact-info-card li { display: flex; gap: 14px; margin-bottom: 22px; }
.contact-info-card li .ic {
    width: 42px; height: 42px;
    border-radius: 50%;
    background: rgba(255,255,255,0.1);
    display: flex; align-items: center; justify-content: center;
    color: var(--orange-light);
    flex-shrink: 0;
}
.contact-info-card li h5 { color: #fff; font-size: 14.5px; margin-bottom: 3px; }
.contact-info-card li p { color: #b7c8e8; font-size: 13.5px; }

.contact-form-card {
    background: var(--surface);
    border-radius: var(--radius-l);
    padding: 34px;
    box-shadow: var(--shadow-s);
}
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 16px; }
.form-group { display: flex; flex-direction: column; gap: 6px; }
.form-group label { font-family: var(--font-ui); font-size: 13px; color: var(--ink); font-weight: 500; }
.form-group input, .form-group textarea {
    padding: 13px 16px;
    border-radius: var(--radius-s);
    border: 1.5px solid var(--line);
    font-family: var(--font-body);
    font-size: 14.5px;
    background: var(--bg);
    color: var(--ink);
    transition: border-color 0.2s ease;
}
.form-group input:focus, .form-group textarea:focus { border-color: var(--orange); outline: none; }
.form-group.full { margin-bottom: 16px; }
.submit-btn {
    background: var(--orange);
    color: #fff;
    font-family: var(--font-ui);
    font-weight: 600;
    font-size: 15px;
    padding: 14px 30px;
    border-radius: var(--radius-s);
    display: inline-flex;
    align-items: center;
    gap: 10px;
    transition: background 0.2s ease, transform 0.2s ease;
}
.submit-btn:hover { background: var(--orange-deep); transform: translateY(-2px); }

.map-wrap {
    border-radius: var(--radius-l);
    overflow: hidden;
    margin-top: 30px;
    box-shadow: var(--shadow-s);
    filter: grayscale(0.15);
}
.map-wrap iframe { width: 100%; height: 320px; border: none; display: block; }

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */
@media (max-width: 1080px) {
    .card-grid { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
    .content-layout { grid-template-columns: 1fr; }
    /* Below full desktop width the 4-column footer (logo | quick links |
       பிரிவுகள் 1 | பிரிவுகள் 2) gets cramped and the logo column drifts
       out of line with the rest. Switch to a 3-column layout with the
       logo/brand block spanning the full row above the 3 link columns. */
    .footer-grid { grid-template-columns: repeat(3, 1fr); }
    .footer-brand { grid-column: 1 / -1; }
}

@media (max-width: 860px) {
    .hero-grid { grid-template-columns: 1fr; gap: 16px; }
    .topbar-links a:not(:first-child) { display: none; }
    .promo-strip { flex-direction: column; text-align: center; }
    .contact-grid { grid-template-columns: 1fr; }
}

@media (max-width: 900px) {
    .topbar .container {
        height: 40px;
        padding-left: 14px;
        padding-right: 14px;
    }
    .topbar-date,
    .topbar-links { display: none; }
    .ticker { width: 100%; }
    .ticker-tag { padding: 5px 11px; font-size: 12px; }
    .ticker-track { font-size: 12.5px; }
    .card-grid { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
    .form-row { grid-template-columns: 1fr; }
}

@media (max-width: 600px) {
    .footer-top { padding: 40px 24px 28px; }
    .footer-grid {
        /* brand spans full width above; the 3 link columns wrap as 2 + 1 */
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 30px 20px;
        text-align: center;
        align-items: start;
    }
    .footer-brand { grid-column: 1 / -1; }
    .footer-brand p { max-width: 300px; margin-left: auto; margin-right: auto; }
    .footer-grid > .footer-col {
        text-align: center;
        min-width: 0;
    }
    .footer-grid > .footer-col h4::after {
        left: 50%;
        transform: translateX(-50%);
    }
    .footer-logo-wrap { display: flex; width: fit-content; margin: 14px auto 18px; padding: 8px 16px; }
    /* Was 58px — bigger than the 42px desktop logo, making it look
       oversized in the compact mobile footer. Now smaller than desktop. */
    .footer-brand img { height: 36px; margin: 0; }
    .footer-contact-email { align-items: center; }
    .footer-contact-email .fce-label { justify-content: center; }
    .social-row { justify-content: center; }
    .footer-col h4::after { left: 50%; transform: translateX(-50%); }
    .footer-bottom .container { flex-direction: column; text-align: center; }

    /* Mobile view only: hide the second "பிரிவுகள்" (கட்டுரை / தொடர்
       கட்டுரை / உடல்நலம் / அரசியல்) column. "விரைவு இணைப்புகள்" and the
       first "பிரிவுகள்" column stay visible, side by side. */
    .footer-col-hide-mobile { display: none; }
}

@media (max-width: 520px) {
    .card-grid { grid-template-columns: 1fr; }
    .hero-content h1 { font-size: 18px; }
    .promo-strip { padding: 26px; }
    .subcat-tabs { gap: 8px; margin-top: 18px; }
    .subcat-tabs a { font-size: 12.5px; padding: 7px 14px; }
}
@media (min-width: 861px) {
    .contact-grid {
        grid-template-columns: 1fr;
    }

    .contact-form-card {
        width: 100%;
    }
}

/* Full-width content layout when there's no sidebar (aside removed) */
.content-layout.no-sidebar { grid-template-columns: 1fr; }

/* Fixed 4-column grid on desktop, single column (one post per row) on
   mobile — every post stacks one below another instead of 2-across. */
.news-grid-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 860px) {
    .news-grid-4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
    .news-grid-4 { grid-template-columns: 1fr; }
}

/* ---- Article cards on mobile: clamp heading/description to a fixed
   number of lines so cards stay short and even instead of stretching
   tall whenever a title or excerpt runs long ---- */
@media (max-width: 640px) {
    .article-body { padding: 12px; }
    .article-body h3 {
        font-size: 14px;
        line-height: 1.35;
        margin-bottom: 6px;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }
    .article-body p {
        font-size: 12.5px;
        line-height: 1.5;
        margin-bottom: 8px;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }
    .article-foot { padding-top: 8px; font-size: 11px; }
}
@media (max-width: 400px) {
    .article-body h3 { font-size: 13.5px; }
    .article-body p { -webkit-line-clamp: 2; font-size: 12px; }
}

/* ==========================================================================
   Mobile fixes: header, search bar, hamburger nav, pagination, footer
   ========================================================================== */

/* ---- Header: stop the logo / search / theme-btn row from squeezing
   and overflowing on phones ("over zoom" look). The header keeps just
   the logo + theme button on mobile; the search box moves below the
   hamburger nav bar (see .mobile-search-wrap further down). ---- */
@media (max-width: 768px) {
    .site-header { padding: 10px 0; }
    .site-header .container {
        gap: 12px;
    }
    .site-header .search-box { display: none; }
    .icon-btn { width: 38px; height: 38px; font-size: 14px; }
    /* Logo was rendering at the same 72px height as desktop, making it
       look oversized against the compact mobile header. */
    .brand img { height: 46px; }
}
@media (max-width: 420px) {
    .brand img { height: 40px; }
}

@media (max-width: 480px) {
    .container { padding: 0 14px; }
    .footer-top { padding-left: 14px; padding-right: 14px; }
}

/* ---- Mobile search: lives inline in the hamburger nav bar itself
   (next to the menu button) instead of its own separate white strip,
   so there's no extra white block between the nav and the page
   content — see .nav-search-mobile further down. ---- */
@media (max-width: 768px) {
    .hero-section { padding-top: 14px; padding-bottom: 0; }
}

/* ---- Hamburger mobile nav: replaces the cramped horizontal-scroll
   nav (which only showed one item at a time) with a full dropdown
   list the user can scroll through normally ---- */
.sub-toggle {
    display: none;
}
@media (max-width: 768px) {
    .nav-bar { position: relative; min-height: 52px; }
    .nav-toggle {
        display: flex;
    }
    .nav-scroll-btn { display: none !important; }

    .nav-list {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        flex-direction: column;
        flex-wrap: nowrap;
        overflow-x: visible;
        overflow-y: auto;
        max-height: calc(100vh - 100px);
        background: var(--navy);
        box-shadow: 0 12px 24px rgba(0,0,0,0.25);
        z-index: 250;
    }
    .nav-wrap.nav-open .nav-list { display: flex; }

    .nav-list > li { width: 100%; }
    .nav-list > li > a {
        height: auto;
        min-height: 48px;
        padding: 13px 20px;
        width: 100%;
    }
    .nav-list > li > a::after { display: none; }
    .nav-list .has-sub {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
    }
    .nav-list .has-sub > a {
        flex: 1 1 auto;
        min-width: 0;
    }
    .nav-list .has-sub > a::before { display: none; }

    .sub-toggle {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 48px;
        height: 48px;
        color: #fff;
        font-size: 13px;
        flex-shrink: 0;
        transition: transform 0.2s ease;
    }
    .has-sub.sub-open .sub-toggle { transform: rotate(180deg); }

    .submenu {
        position: static;
        opacity: 1;
        visibility: visible;
        transform: none;
        transition: none;
        width: 100%;
        max-height: 0;
        overflow: hidden;
        border-radius: 0;
        background: rgba(0,0,0,0.15);
        box-shadow: none;
    }
    .has-sub.sub-open .submenu { max-height: 600px; }
    .submenu li a { color: #eaf0fb; padding: 12px 20px 12px 34px; border-bottom-color: rgba(255,255,255,0.1); }
    .submenu li a:hover { background: rgba(255,255,255,0.08); color: var(--orange-light); }
}


/* ---- Pagination: smaller tap targets on phones (wrapping itself
   is handled unconditionally in the base .pagination rule above) ---- */
@media (max-width: 600px) {
    .pagination a, .pagination span {
        width: 34px;
        height: 34px;
        font-size: 13px;
    }
}
@media (max-width: 360px) {
    .pagination a, .pagination span {
        width: 30px;
        height: 30px;
        font-size: 12px;
    }
}

/* ---- Footer: guard grid children so long words / links can't push
   the layout wider than the viewport ---- */
@media (max-width: 600px) {
    .footer-grid { min-width: 0; }
    .footer-grid > div { min-width: 0; }
}