/* =====================================================================
   Sankathi. Extracted from the original template, unchanged, plus a
   small block at the bottom for the elements the dynamic pages added
   (breadcrumbs, pagination, article body, share row, empty states).
   ===================================================================== */

:root{
  /* ================= COLOURS. edit here to re-theme ============= */
  --blue:      #03A9F4;   /* PRIMARY */
  --blue-deep: #0288D1;
  --blue-dark: #01579B;
  --navy:      #0B2239;   /* text and footer */
  --sky:       #E1F5FE;
  --bg:        #EDF1F5;
  --paper:     #FFFFFF;
  --line:      #DBE4EC;
  --body:      #20303F;
  --muted:     #6C7B89;
  /* ============================================================== */
  --radius:12px;
  --shadow:0 1px 2px rgba(11,34,57,.05),0 6px 16px rgba(11,34,57,.05);
  --lift:0 10px 26px rgba(3,169,244,.16);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--body);font-family:"Noto Sans Tamil",system-ui,sans-serif;font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
h1,h2,h3,h4,h5,h6{font-family:"Mukta Malar","Noto Sans Tamil",sans-serif}
.wrap{max-width:1240px;margin-inline:auto;padding-inline:16px}

/* ---------- Top strip (blue) ---------- */
.topbar{background:var(--blue);color:#fff}
.topbar a{color:#fff}
.topbar a:hover{color:var(--navy)}
.topbar .wrap{display:flex;align-items:center;justify-content:space-between;min-height:38px;gap:12px;flex-wrap:wrap;font-size:.82rem}
.topbar .date{display:flex;align-items:center;gap:8px}
.topbar .socials{display:flex;align-items:center;gap:15px}
.topbar .socials i{font-size:.98rem}

/* ---------- Masthead ---------- */
.masthead{background:var(--paper);border-bottom:1px solid var(--line)}
.masthead .wrap{display:flex;align-items:center;justify-content:space-between;gap:22px;padding-block:16px}
.brand{display:flex;align-items:center;gap:13px}
.brand-mark{width:56px;height:56px;flex:none;border-radius:14px;background:linear-gradient(150deg,var(--blue),var(--blue-deep));
  color:#fff;display:grid;place-items:center;font-family:"Mukta Malar";font-weight:800;font-size:1.95rem;line-height:1;
  box-shadow:0 6px 16px rgba(3,169,244,.4),inset 0 0 0 2px rgba(255,255,255,.35)}
.brand-name{font-family:"Mukta Malar";font-weight:800;font-size:2.15rem;line-height:1;color:var(--navy);letter-spacing:.4px}
.brand-name .en{display:block;font-size:.72rem;font-weight:700;letter-spacing:.36em;color:var(--blue);margin-top:6px;padding-left:2px}
.brand-tag{font-size:.82rem;color:var(--muted);margin-top:5px}
.search-box{display:flex;align-items:center;background:var(--bg);border:1px solid var(--line);border-radius:26px;overflow:hidden;width:320px;max-width:100%}
.search-box input{border:0;background:transparent;padding:.6rem .2rem .6rem 1rem;flex:1;font-family:"Noto Sans Tamil";font-size:.92rem;color:var(--navy);outline:none}
.search-box button{border:0;background:var(--blue);color:#fff;padding:.62rem .95rem;font-size:1rem;cursor:pointer}
.search-box button:hover{background:var(--blue-deep)}
.mast-right{display:flex;align-items:center;gap:16px}
.mast-ad{flex:none;width:300px;max-width:100%;height:66px;border:1px dashed var(--line);border-radius:9px;
  background:repeating-linear-gradient(135deg,#fbfdff,#fbfdff 12px,#eef5fa 12px,#eef5fa 24px);
  color:var(--muted);font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;display:flex;align-items:center;justify-content:center}

/* ---------- Nav (white, underline tabs) ---------- */
.mainnav{background:var(--paper);border-bottom:2px solid var(--line);position:sticky;top:0;z-index:1030;box-shadow:0 2px 10px rgba(11,34,57,.05)}
.navbar{--bs-navbar-padding-y:0}
.mainnav .navbar-toggler{border-color:var(--line);padding:.3rem .55rem;margin:.5rem 0}
.mainnav .navbar-toggler:focus{box-shadow:0 0 0 .2rem rgba(3,169,244,.25)}
.mainnav .navbar-toggler-icon{background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='%230B2239' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2.4' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e")}
.mainnav .navbar-nav{flex-wrap:wrap}
.mainnav .nav-link{color:var(--navy)!important;font-weight:600;font-size:.92rem;padding:.95rem .62rem!important;position:relative;white-space:nowrap;font-family:"Mukta Malar"}
.mainnav .nav-link:hover{color:var(--blue)!important}
.mainnav .nav-link.active{color:var(--blue)!important}
.mainnav .nav-link.active::after,.mainnav .nav-link:hover::after{content:"";position:absolute;left:.62rem;right:.62rem;bottom:0;height:3px;background:var(--blue);border-radius:2px}
.mainnav .home i{font-size:1rem}
@media (max-width:1199.98px){
  .mainnav .navbar-nav{padding-block:6px;max-height:72vh;overflow:auto}
  .mainnav .nav-link{padding:.6rem .4rem!important;border-bottom:1px solid var(--line)}
  .mainnav .nav-link.active::after,.mainnav .nav-link:hover::after{display:none}
  .mainnav .nav-link.active{background:var(--sky);border-radius:6px}
}

/* ---------- Breaking ticker ---------- */
.ticker{background:var(--navy);color:#fff;overflow:hidden}
.ticker .wrap{display:flex;align-items:stretch;padding-inline:0}
.ticker-label{flex:none;background:var(--blue);color:#fff;font-weight:800;font-family:"Mukta Malar";display:flex;align-items:center;gap:8px;
  padding:10px 20px 10px 16px;white-space:nowrap;font-size:.92rem;clip-path:polygon(0 0,100% 0,90% 100%,0 100%)}
.ticker-label i{animation:blink 1.4s steps(1) infinite}
@keyframes blink{50%{opacity:.3}}
.ticker-track{overflow:hidden;flex:1;position:relative;padding-inline:16px}
.ticker-move{display:inline-flex;white-space:nowrap;padding-block:10px;animation:tick 36s linear infinite}
.ticker-track:hover .ticker-move{animation-play-state:paused}
.ticker-move a{font-size:.9rem;color:#E7EEF4;font-weight:500}
.ticker-move a:hover{color:var(--blue)}
.ticker-move .dot{color:var(--blue);margin-inline:24px}
@keyframes tick{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ---------- Hero carousel ---------- */
.hero-car .carousel-inner{border-radius:var(--radius);overflow:hidden;border:1px solid var(--line);box-shadow:var(--shadow)}
.hero-slide{position:relative;aspect-ratio:16/9;background:var(--navy);display:block}
.hero-slide img{width:100%;height:100%;object-fit:cover}
.hero-cap{position:absolute;inset:auto 0 0 0;padding:64px 26px 24px;color:#fff;
  background:linear-gradient(to top,rgba(6,20,34,.95),rgba(6,20,34,.45) 60%,transparent)}
.hero-cap h2{font-family:"Mukta Malar";font-weight:800;font-size:1.7rem;line-height:1.32;margin:10px 0 0;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.hero-cap .meta{color:#d6e3ef;margin-top:10px}
.hero-cap .meta i{color:var(--blue)}
@media (max-width:575.98px){.hero-cap{padding:48px 16px 16px}.hero-cap h2{font-size:1.22rem}}
.pill{background:var(--blue);color:#fff;font-size:.7rem;font-weight:700;padding:4px 11px;border-radius:20px;font-family:"Mukta Malar";display:inline-block}
.carousel-indicators{margin-bottom:.6rem}
.carousel-indicators [data-bs-target]{width:26px;height:4px;border-radius:2px;background:rgba(255,255,255,.5)}
.carousel-indicators .active{background:var(--blue)}

/* ---------- Boxed panels ---------- */
.panel-x{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow);height:100%}
.panel-head{background:linear-gradient(90deg,var(--blue),var(--blue-deep));color:#fff;padding:11px 16px;display:flex;align-items:center;justify-content:space-between}
.panel-head h2{font-family:"Mukta Malar";font-weight:800;font-size:1.12rem;margin:0;color:#fff;display:flex;align-items:center;gap:9px}
.panel-head h2 i{font-size:1rem;opacity:.9}
.panel-head a{color:#fff;font-size:.76rem;font-weight:700;opacity:.92;white-space:nowrap;font-family:"Mukta Malar"}
.panel-head a:hover{opacity:1}
.panel-body{padding:14px 16px}
.p-lead{display:block;margin-bottom:6px}
.p-lead .p-thumb{aspect-ratio:16/9;border-radius:9px;overflow:hidden;background:#dce9f2;margin-bottom:11px}
.p-lead .p-thumb img{width:100%;height:100%;object-fit:cover;transition:transform .5s}
.p-lead:hover .p-thumb img{transform:scale(1.05)}
.p-lead h3{font-family:"Mukta Malar";font-weight:700;font-size:1.16rem;line-height:1.36;color:var(--navy);margin:0 0 7px;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.p-lead:hover h3{color:var(--blue-deep)}
.cat{color:var(--blue-deep);font-weight:700;font-size:.7rem;letter-spacing:.08em;text-transform:uppercase;font-family:"Mukta Malar";display:inline-block;margin-bottom:6px}
.meta{display:flex;align-items:center;gap:6px;color:var(--muted);font-size:.77rem}
.meta i{color:var(--blue)}
.p-item{display:flex;gap:11px;padding:11px 0;border-top:1px dashed var(--line)}
.p-item .p-t{flex:none;width:80px;height:56px;border-radius:7px;overflow:hidden;background:#dce9f2}
.p-item .p-t img{width:100%;height:100%;object-fit:cover;transition:transform .4s}
.p-item:hover .p-t img{transform:scale(1.07)}
.p-item h4{font-family:"Mukta Malar";font-weight:600;font-size:.94rem;line-height:1.4;color:var(--navy);margin:0 0 5px;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.p-item:hover h4{color:var(--blue-deep)}
.p-item.slim{padding:10px 0}
.p-item.slim .p-t{width:64px;height:46px}

/* right-rail latest list */
.rail .panel-body{padding:6px 16px}

/* ---------- YouTube band ---------- */
.yt-band{background:linear-gradient(180deg,var(--navy),#071626);color:#fff;margin-top:40px;padding:40px 0}
.yt-head{display:flex;align-items:center;justify-content:space-between;border-bottom:2px solid rgba(255,255,255,.15);padding-bottom:12px;margin-bottom:22px}
.yt-head h2{font-family:"Mukta Malar";font-weight:800;color:#fff;margin:0;display:flex;align-items:center;gap:9px}
.yt-head h2 i{color:var(--blue)}
.yt-head a{color:var(--blue);font-weight:700;font-size:.82rem;font-family:"Mukta Malar"}
.yt-card{background:#12293f;border:1px solid #1d3a55;border-radius:var(--radius);overflow:hidden;height:100%;transition:transform .25s}
.yt-card:hover{transform:translateY(-4px)}
.yt-thumb{position:relative;aspect-ratio:16/9;overflow:hidden;background:#000}
.yt-thumb img{width:100%;height:100%;object-fit:cover;opacity:.92}
.yt-play{position:absolute;inset:0;display:grid;place-items:center}
.yt-play span{width:52px;height:52px;border-radius:50%;background:var(--blue);display:grid;place-items:center;color:#fff;font-size:1.4rem;box-shadow:0 6px 18px rgba(0,0,0,.5);transition:transform .25s}
.yt-card:hover .yt-play span{transform:scale(1.1)}
.yt-card h5{font-family:"Mukta Malar";font-weight:600;font-size:.96rem;line-height:1.4;color:#fff;margin:0;padding:13px 15px 15px;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}

/* ---------- Footer ---------- */
.site-footer{background:var(--navy);color:#B9C7D4;border-top:4px solid var(--blue);padding:44px 0 0}
.site-footer a{color:#B9C7D4}
.site-footer a:hover{color:var(--blue)}
.foot-brand{font-family:"Mukta Malar";font-weight:800;font-size:1.95rem;color:#fff}
.foot-brand .en{display:block;font-size:.7rem;letter-spacing:.36em;color:var(--blue);font-weight:700;margin-top:6px}
.foot-title{font-family:"Mukta Malar";font-weight:700;color:#fff;font-size:1.05rem;margin:0 0 14px}
.foot-links{list-style:none;padding:0;margin:0}
.foot-links li{padding:5px 0;font-size:.92rem}
.foot-links i{color:var(--blue);font-size:.7rem;margin-right:8px}
.visits{background:#0f2c46;border:1px solid #1b3a56;border-radius:9px;padding:12px 14px;font-size:.9rem;display:flex;align-items:center;gap:10px;margin-top:8px}
.visits b{color:var(--blue);font-family:"Mukta Malar";font-size:1.15rem}
.foot-bottom{border-top:1px solid #17324c;margin-top:32px;padding:16px 0;font-size:.84rem;color:#8fa1b2;display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px}

.to-top{position:fixed;right:18px;bottom:18px;width:46px;height:46px;border-radius:50%;background:var(--blue);color:#fff;display:grid;place-items:center;box-shadow:0 8px 20px rgba(3,169,244,.45);z-index:1040;opacity:0;pointer-events:none;transition:opacity .3s;border:0}
.to-top.show{opacity:1;pointer-events:auto}
.to-top:hover{background:var(--blue-deep);color:#fff}

@media (prefers-reduced-motion:reduce){.ticker-move,.ticker-label i{animation:none}*{scroll-behavior:auto}}
:focus-visible{outline:3px solid var(--blue);outline-offset:2px}


/* =====================================================================
   Added for the dynamic pages. Same tokens, same visual language.
   ===================================================================== */

/* Breadcrumbs */
.crumbs{font-size:.82rem;color:var(--muted);margin-bottom:16px;display:flex;align-items:center;gap:7px;flex-wrap:wrap}
.crumbs a{color:var(--blue-deep);font-weight:600}
.crumbs a:hover{color:var(--blue)}
.crumbs span{color:var(--muted)}
.crumbs .trim{max-width:min(100%,540px);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* Result counters in panel heads */
.panel-head .count{color:#fff;font-size:.76rem;font-weight:700;opacity:.9;font-family:"Mukta Malar";white-space:nowrap}

/* Empty and error states */
.empty-note{color:var(--muted);font-size:.9rem;margin:0;padding:18px 0;text-align:center}

/* Card summary text on archive pages */
.p-sum{color:var(--muted);font-size:.85rem;line-height:1.55;margin:0 0 8px;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}

/* Inline search box shown on the search page on small screens */
.search-inline{width:100%;margin:4px 0 14px}

/* Pagination */
.pager-x{display:flex;gap:7px;flex-wrap:wrap;justify-content:center;margin-top:22px}
.pager-x a{background:var(--paper);border:1px solid var(--line);border-radius:8px;padding:.45rem .85rem;
  font-family:"Mukta Malar";font-weight:600;font-size:.88rem;color:var(--navy);transition:background .2s,color .2s}
.pager-x a:hover{background:var(--sky);color:var(--blue-deep)}
.pager-x a.on{background:var(--blue);border-color:var(--blue);color:#fff}

/* Article page */
.article-head{padding:20px 22px 0}
.article-head h1{font-family:"Mukta Malar";font-weight:800;font-size:1.85rem;line-height:1.32;color:var(--navy);margin:12px 0 10px}
.article-head .meta .sep{margin-inline:4px;color:var(--line)}
@media (max-width:575.98px){.article-head{padding:16px 16px 0}.article-head h1{font-size:1.35rem}}

.article-hero{margin:16px 0 0}
.article-hero img{width:100%;aspect-ratio:16/9;object-fit:cover;background:#dce9f2}

.article-body{padding:20px 22px;font-size:1.02rem;line-height:1.85;color:var(--body)}
.article-body .lede{font-weight:600;color:var(--navy);border-left:4px solid var(--blue);
  background:var(--sky);padding:12px 15px;border-radius:0 8px 8px 0;margin-bottom:18px}
.article-body p{margin:0 0 1.05em}
.article-body h2,.article-body h3{color:var(--navy);margin:1.5em 0 .6em;font-weight:700}
.article-body h2{font-size:1.3rem}
.article-body h3{font-size:1.12rem}
.article-body a{color:var(--blue-deep);font-weight:600;text-decoration:underline;text-underline-offset:3px}
.article-body img{border-radius:9px;margin:1em 0;height:auto}
.article-body blockquote{border-left:4px solid var(--blue);background:var(--bg);margin:1.2em 0;
  padding:12px 16px;border-radius:0 8px 8px 0;color:var(--navy)}
.article-body ul,.article-body ol{padding-left:1.4em;margin:0 0 1.05em}
.article-body li{margin-bottom:.4em}
.article-body table{width:100%;border-collapse:collapse;margin:1.2em 0;font-size:.94rem}
.article-body th,.article-body td{border:1px solid var(--line);padding:8px 10px;text-align:left}
.article-body th{background:var(--sky);font-weight:700;color:var(--navy)}
.article-body iframe{max-width:100%;border-radius:9px}
@media (max-width:575.98px){.article-body{padding:16px;font-size:.98rem}}

/* Share row */
.share{display:flex;align-items:center;gap:12px;padding:0 22px 20px;border-top:1px dashed var(--line);margin-top:4px;padding-top:16px}
.share span{font-family:"Mukta Malar";font-weight:700;font-size:.86rem;color:var(--navy)}
.share a{width:36px;height:36px;border-radius:50%;background:var(--bg);border:1px solid var(--line);
  display:grid;place-items:center;color:var(--navy);font-size:1rem;transition:background .2s,color .2s}
.share a:hover{background:var(--blue);border-color:var(--blue);color:#fff}
@media (max-width:575.98px){.share{padding-inline:16px}}