/*
Theme Name: Katha
Theme URI: https://example.com/katha
Author: Your Name
Author URI: https://example.com
Description: Katha is a fast, readable blogging theme for curious writers. It ships with 11 ready-to-publish starter articles on India and global topics, a featured-story homepage, dark mode, reading-time and progress bar, related posts, share buttons, and a Customizer for colours, social links and newsletter. No page builder or plugin needed.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.6
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: katha
Tags: blog, news, two-columns, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready, accessibility-ready, custom-colors
*/

:root{
  --brand:#0E7C86;
  --bg:#F6F7FB; --surface:#FFFFFF; --ink:#14183A; --muted:#575D80; --line:#DCDFEE;
  --accent:var(--brand); --accent-ink:#FFFFFF; --mark:#F2B01E; --mark-ink:#14183A;
  --font-display:'Young Serif',Georgia,'Times New Roman',serif;
  --font-body:'Hanken Grotesk',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --maxw:1180px; --read:700px; --gap:clamp(1rem,2.5vw,1.75rem);
}
html[data-theme="dark"]{
  --bg:#0E1124; --surface:#171B36; --ink:#EDEFFA; --muted:#A5ABCE; --line:#2A3058;
  --accent:color-mix(in srgb,var(--brand) 60%,#fff); --accent-ink:#0E1124;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--font-body);font-size:1.0625rem;line-height:1.65;-webkit-font-smoothing:antialiased}
img,svg,video{max-width:100%;height:auto;display:block}
a{color:var(--accent);text-underline-offset:3px}
a:hover{text-decoration-thickness:2px}
:focus-visible{outline:3px solid var(--mark);outline-offset:2px;border-radius:2px}
h1,h2,h3,h4{font-family:var(--font-display);font-weight:400;line-height:1.15;margin:0 0 .6em;letter-spacing:-.005em}
p{margin:0 0 1.2em}
.screen-reader-text{position:absolute!important;clip:rect(1px,1px,1px,1px);width:1px;height:1px;overflow:hidden}
.skip-link{position:absolute;left:-999px;top:0;background:var(--mark);color:var(--mark-ink);padding:.6rem 1rem;z-index:100}
.skip-link:focus{left:0}
.wrap{width:min(100% - 2rem,var(--maxw));margin-inline:auto}

/* progress */
.progress{position:fixed;top:0;left:0;height:3px;width:0;background:var(--mark);z-index:90;transition:width .1s linear}

/* header */
.site-header{background:var(--bg);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:80}
.site-header .wrap{display:flex;align-items:center;gap:1.25rem;min-height:68px}
.brand{display:flex;align-items:center;gap:.6rem;text-decoration:none;color:var(--ink)}
.brand-name{font-family:var(--font-display);font-size:1.6rem;line-height:1}
.brand-dot{width:14px;height:14px;background:var(--mark);border-radius:50%;box-shadow:6px 0 0 var(--accent)}
.custom-logo{max-height:44px;width:auto}
.main-nav{margin-left:auto}
.main-nav ul{list-style:none;margin:0;padding:0;display:flex;gap:.25rem}
.main-nav a{display:block;padding:.5rem .8rem;color:var(--ink);text-decoration:none;font-weight:600;font-size:.95rem;border-radius:999px}
.main-nav a:hover,.main-nav .current-menu-item>a,.main-nav .current-cat>a{background:var(--surface);box-shadow:inset 0 0 0 1px var(--line)}
.tools{display:flex;gap:.25rem}
.icon-btn{width:42px;height:42px;display:grid;place-items:center;border:0;background:transparent;color:var(--ink);border-radius:50%;cursor:pointer}
.icon-btn:hover{background:var(--surface);box-shadow:inset 0 0 0 1px var(--line)}
.icon-btn svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.menu-toggle{display:none}
.theme-toggle .sun{display:none}
html[data-theme="dark"] .theme-toggle .sun{display:block}
html[data-theme="dark"] .theme-toggle .moon{display:none}
.search-panel{display:none;border-top:1px solid var(--line);padding:1rem 0;background:var(--surface)}
.search-panel.open{display:block}

/* forms */
.search-form{display:flex;gap:.5rem}
input[type=search],input[type=text],input[type=email],input[type=url],textarea{width:100%;padding:.75rem 1rem;border:1px solid var(--line);background:var(--surface);color:var(--ink);font:inherit;border-radius:8px}
.btn,button[type=submit],input[type=submit]{display:inline-block;background:var(--accent);color:var(--accent-ink);border:0;padding:.75rem 1.4rem;font:inherit;font-weight:700;border-radius:999px;cursor:pointer;text-decoration:none}
.btn:hover,button[type=submit]:hover,input[type=submit]:hover{filter:brightness(1.1)}

/* patterns for posts without images */
.pat{background-color:var(--t1);background-repeat:repeat}
.tone-0{--t1:#0E7C86;--t2:#F2B01E;background-image:radial-gradient(var(--t2) 22%,transparent 24%),radial-gradient(var(--t2) 22%,transparent 24%);background-size:30px 30px;background-position:0 0,15px 15px}
.tone-1{--t1:#3B2A8C;--t2:#FF8FA3;background-image:repeating-linear-gradient(45deg,var(--t2) 0 6px,transparent 6px 22px)}
.tone-2{--t1:#1F6F3F;--t2:#F6D365;background-image:conic-gradient(var(--t2) 25%,transparent 0 50%,var(--t2) 0 75%,transparent 0);background-size:44px 44px}
.tone-3{--t1:#F2B01E;--t2:#14183A;background-image:repeating-radial-gradient(circle at 50% 120%,var(--t2) 0 3px,transparent 3px 17px)}
.tone-4{--t1:#C2255C;--t2:#FFD6E4;background-image:linear-gradient(135deg,var(--t2) 25%,transparent 25%),linear-gradient(225deg,var(--t2) 25%,transparent 25%);background-size:40px 40px;background-position:-20px 0,-20px 0}
.tone-5{--t1:#1D4E89;--t2:#8EC5FC;background-image:linear-gradient(var(--t2) 1px,transparent 1px),linear-gradient(90deg,var(--t2) 1px,transparent 1px);background-size:26px 26px}

.chip{display:inline-block;background:var(--mark);color:var(--mark-ink);font-weight:700;font-size:.85rem;padding:.2rem .7rem;border-radius:4px;text-decoration:none;line-height:1.5}
.chip:hover{filter:brightness(.95)}
.meta{display:flex;flex-wrap:wrap;gap:.25rem 1.1rem;color:var(--muted);font-size:.9rem}
.meta a{color:inherit}


/* ===== front page ===== */
.masthead{padding:clamp(2rem,5vw,4.25rem) 0 .5rem}
.masthead-grid{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:clamp(1.5rem,4vw,4rem);align-items:end}
.masthead h1{font-size:clamp(2.5rem,6.2vw,5rem);line-height:1.02;letter-spacing:-.015em;margin:0}
.masthead-side p{font-size:1.15rem;color:var(--muted);margin:0 0 1.1rem;max-width:40ch}
.topics{display:flex;flex-wrap:wrap;gap:.5rem}
.topic{display:inline-flex;align-items:center;gap:.5rem;padding:.3rem .85rem .3rem .35rem;border:1px solid var(--line);background:var(--surface);border-radius:999px;color:var(--ink);text-decoration:none;font-weight:600;font-size:.92rem}
.topic:hover{border-color:var(--accent);color:var(--accent)}
.topic .sw{width:22px;height:22px;border-radius:50%;background-image:none;background:radial-gradient(circle,var(--t2) 0 34%,var(--t1) 36%)}
.topic small{color:var(--muted);font-weight:500}

.bento{display:grid;grid-template-columns:minmax(0,1.75fr) minmax(0,1fr);gap:var(--gap);margin-top:1.75rem}
.feature{position:relative;min-height:clamp(430px,54vw,590px);border-radius:16px;overflow:hidden;display:flex;align-items:flex-end;isolation:isolate}
.feature>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-1}
.feature.pat::after{content:"";position:absolute;right:-10%;top:-16%;width:72%;aspect-ratio:1;border-radius:50%;z-index:-1;background:repeating-radial-gradient(circle,var(--t2) 0 12px,var(--t1) 12px 26px);opacity:.92}
.feature-panel{background:var(--bg);max-width:min(100%,580px);padding:clamp(1.2rem,2.6vw,2.1rem) clamp(1.2rem,2.6vw,2.1rem) 0 0;border-top-right-radius:20px}
.feature-panel h2{font-size:clamp(1.7rem,3.3vw,2.7rem);line-height:1.1;margin:.7rem 0 .8rem}
.feature-panel h2 a{color:var(--ink);text-decoration:none}
.feature-panel h2 a::after{content:"";position:absolute;inset:0;z-index:1}
.feature-panel p{color:var(--muted);font-size:1.08rem;margin:0 0 1rem}
.feature-panel .meta{padding-bottom:0}
.feature-panel .chip{position:relative;z-index:2}
.feature-panel .read{display:inline-block;margin:1rem 0 1.2rem;font-weight:700;color:var(--accent);position:relative;z-index:2}

.side{display:flex;flex-direction:column}
.side-head{font-family:var(--font-display);font-size:1.35rem;border-bottom:2px solid var(--ink);padding-bottom:.55rem}
.mini{position:relative;display:grid;grid-template-columns:104px minmax(0,1fr);gap:1rem;align-items:center;padding:1rem 0;border-bottom:1px solid var(--line);flex:1}
.mini:last-child{border-bottom:0}
.mini-thumb{aspect-ratio:1;border-radius:8px;overflow:hidden;display:block}
.mini-thumb img{width:100%;height:100%;object-fit:cover}
.mini h3{font-size:1.18rem;line-height:1.2;margin:.2rem 0 .4rem}
.mini h3 a{color:var(--ink);text-decoration:none}
.mini h3 a::after{content:"";position:absolute;inset:0}
.mini:hover h3 a{color:var(--accent)}
.mini-cat{position:relative;z-index:2;font-weight:700;font-size:.85rem;color:var(--accent);text-decoration:none}

.section-head{display:flex;align-items:flex-end;justify-content:space-between;gap:1rem;flex-wrap:wrap;margin-bottom:1.6rem}
.section-head h2{font-size:clamp(1.8rem,3.6vw,2.7rem);margin:0}
.section-head p{margin:.4rem 0 0;color:var(--muted)}
.link-out{font-weight:700;color:var(--accent);text-decoration:none;white-space:nowrap}
.link-out:hover{text-decoration:underline}

.band{--band:#14183A;background:var(--band);color:#fff;margin-top:clamp(2.5rem,6vw,4.5rem);padding:clamp(2.5rem,5vw,4rem) 0}
html[data-theme="dark"] .band{--band:#1A1F42}
.band .section-head p{color:rgba(255,255,255,.72)}
.band .link-out{color:var(--mark)}
.tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:var(--gap)}
.tile{position:relative;aspect-ratio:4/5;border-radius:10px;overflow:hidden;display:flex;flex-direction:column;justify-content:space-between;isolation:isolate;color:#fff}
.tile-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2}
.tile::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(to top,rgba(10,12,32,.94) 0,rgba(10,12,32,.62) 42%,rgba(10,12,32,0) 78%)}
.tile-top{padding:.9rem .9rem 0}
.tile .chip{position:relative;z-index:2}
.tile-body{padding:0 1.1rem 1.2rem}
.tile h3{font-size:1.32rem;line-height:1.18;margin:0 0 .5rem}
.tile h3 a{color:#fff;text-decoration:none}
.tile h3 a::after{content:"";position:absolute;inset:0;z-index:1}
.tile .meta{color:rgba(255,255,255,.8)}

.fact{background:var(--mark);color:#14183A;margin-top:0;padding:clamp(2.25rem,5vw,3.75rem) 0}
.fact-inner{display:grid;grid-template-columns:minmax(0,260px) minmax(0,1fr);gap:clamp(1.25rem,4vw,3.5rem);align-items:center}
.fact-label{font-family:var(--font-display);font-size:clamp(1.6rem,3vw,2.2rem);line-height:1.1;margin:0 0 1rem}
.fact-text{font-family:var(--font-display);font-size:clamp(1.35rem,2.9vw,2.2rem);line-height:1.28;margin:0}
.fact button{background:#14183A;color:#fff;border:0;border-radius:999px;padding:.6rem 1.2rem;font:inherit;font-weight:700;cursor:pointer}
.fact button:hover{background:#242a63}
.fact :focus-visible{outline-color:#14183A}

.latest{padding-top:clamp(2.5rem,5vw,4rem)}
.card.wide{grid-column:span 2;flex-direction:row}
.card.wide .card-media{aspect-ratio:auto;flex:0 0 52%}
.card.wide .card-media img{height:100%}
.card.wide .card-body{justify-content:center;padding:1.6rem}
.card.wide h3{font-size:1.75rem}
.card.wide p{font-size:1.05rem}

@media(max-width:960px){
  .masthead-grid{grid-template-columns:1fr;align-items:start}
  .bento{grid-template-columns:1fr}
  .fact-inner{grid-template-columns:1fr}
  .card.wide{grid-column:span 2}
}
@media(max-width:620px){
  .feature{min-height:600px}
  .card.wide{grid-column:auto;flex-direction:column}
  .card.wide .card-media{aspect-ratio:3/2;flex:none}
  .card.wide .card-body{padding:1.1rem 1.2rem 1.3rem}
  .card.wide h3{font-size:1.3rem}
  .mini{grid-template-columns:84px minmax(0,1fr)}
  .feature-panel{padding-right:1.2rem}
}

/* section titles */
.section-title{display:flex;align-items:baseline;justify-content:space-between;border-bottom:2px solid var(--ink);padding-bottom:.5rem;margin:2.5rem 0 1.5rem}
.section-title h2{font-size:1.6rem;margin:0}

/* grid and cards */
.layout{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:clamp(1.5rem,4vw,3rem)}
.layout.no-side{grid-template-columns:minmax(0,1fr)}
.grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--gap)}
.layout:not(.no-side) .grid{grid-template-columns:repeat(2,minmax(0,1fr))}
.card{background:var(--surface);border:1px solid var(--line);border-radius:6px;overflow:hidden;display:flex;flex-direction:column}
.card-media{aspect-ratio:3/2;display:block;overflow:hidden}
.card-media img{width:100%;height:100%;object-fit:cover;transition:transform .4s}
.card:hover .card-media img{transform:scale(1.04)}
.card-body{padding:1.1rem 1.2rem 1.3rem;display:flex;flex-direction:column;gap:.55rem;flex:1}
.card h3{font-size:1.3rem;margin:0}
.card h3 a{color:var(--ink);text-decoration:none}
.card h3 a:hover{color:var(--accent)}
.card p{margin:0;color:var(--muted);font-size:.98rem}
.card .meta{margin-top:auto;padding-top:.5rem}

/* pagination */
.pagination{margin:2.5rem 0}
.pagination .nav-links{display:flex;gap:.4rem;flex-wrap:wrap}
.page-numbers{padding:.5rem .95rem;border:1px solid var(--line);border-radius:999px;text-decoration:none;color:var(--ink);background:var(--surface);font-weight:600}
.page-numbers.current{background:var(--ink);color:var(--bg);border-color:var(--ink)}

/* sidebar and widgets */
.sidebar .widget,.footer-widgets .widget{margin-bottom:2rem}
.widget-title{font-size:1.15rem;border-bottom:2px solid var(--ink);padding-bottom:.4rem;margin-bottom:.8rem}
.widget ul{list-style:none;padding:0;margin:0}
.widget li{padding:.4rem 0;border-bottom:1px solid var(--line)}
.widget a{color:var(--ink);text-decoration:none}
.widget a:hover{color:var(--accent)}

/* single */
.entry-header{max-width:var(--read);margin:clamp(1.5rem,4vw,3rem) auto 1.5rem}
.entry-header h1{font-size:clamp(2rem,4.6vw,3.2rem);margin:.8rem 0 1rem}
.entry-hero{max-width:980px;margin:0 auto 2rem}
.entry-hero img,.entry-hero .pat{width:100%;border-radius:12px;aspect-ratio:16/8;object-fit:cover}
.entry-content{max-width:var(--read);margin-inline:auto;font-size:1.15rem;line-height:1.8}
.entry-content h2{font-size:1.7rem;margin:2.2rem 0 .7rem}
.entry-content h3{font-size:1.35rem;margin:1.8rem 0 .6rem}
.entry-content ul,.entry-content ol{padding-left:1.3rem;margin:0 0 1.3em}
.entry-content li{margin-bottom:.4em}
.entry-content blockquote{margin:2rem 0;padding:.2rem 0 .2rem 1.4rem;border-left:5px solid var(--mark);font-family:var(--font-display);font-size:1.4rem;line-height:1.4}
.entry-content figure{margin:2rem 0}
.entry-content figcaption,.wp-caption-text{font-size:.9rem;color:var(--muted);margin-top:.5rem}
.entry-content .alignwide{max-width:980px;margin-inline:auto}
.entry-content .alignfull{width:100vw;max-width:100vw;margin-left:calc(50% - 50vw)}
.alignleft{float:left;margin:0 1.5rem 1rem 0}.alignright{float:right;margin:0 0 1rem 1.5rem}.aligncenter{margin-inline:auto}
.entry-content pre{overflow:auto;padding:1rem;background:var(--surface);border:1px solid var(--line);border-radius:6px;font-size:.9rem}
.entry-content table{border-collapse:collapse;width:100%}
.entry-content th,.entry-content td{border:1px solid var(--line);padding:.5rem .7rem;text-align:left}
.entry-footer{max-width:var(--read);margin:2.5rem auto 0}
.tags a{display:inline-block;border:1px solid var(--line);padding:.15rem .7rem;border-radius:999px;margin:0 .3rem .4rem 0;text-decoration:none;font-size:.9rem;color:var(--ink)}
.tags a:hover{background:var(--surface)}
.share{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem;margin:1.5rem 0}
.share strong{margin-right:.4rem}
.share a,.share button{border:1px solid var(--line);background:var(--surface);color:var(--ink);padding:.4rem .9rem;border-radius:999px;font:inherit;font-size:.9rem;font-weight:600;text-decoration:none;cursor:pointer}
.share a:hover,.share button:hover{border-color:var(--accent);color:var(--accent)}
.author-box{display:flex;gap:1rem;align-items:center;background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:1.2rem;margin:1.5rem 0}
.author-box img{border-radius:50%}
.author-box h4{margin:0 0 .2rem;font-size:1.1rem}
.author-box p{margin:0;color:var(--muted);font-size:.95rem}
.related{margin-top:3rem}

/* comments */
.comments-area{max-width:var(--read);margin:3rem auto 0}
.comment-list{list-style:none;padding:0}
.comment-list .children{list-style:none;padding-left:1.5rem}
.comment-body{background:var(--surface);border:1px solid var(--line);border-radius:8px;padding:1rem;margin-bottom:1rem}
.comment-meta{font-size:.9rem;color:var(--muted)}
.comment-author .avatar{float:left;margin-right:.8rem;border-radius:50%}
.comment-form p{margin-bottom:1rem}
.comment-form label{display:block;font-weight:600;margin-bottom:.25rem}

/* newsletter */
.newsletter{background:var(--accent);color:var(--accent-ink);border-radius:14px;padding:clamp(1.5rem,4vw,2.75rem);margin:3.5rem 0;display:grid;grid-template-columns:1fr 1fr;gap:1.5rem;align-items:center}
.newsletter h2{margin:0 0 .4rem;font-size:1.8rem}
.newsletter p{margin:0;opacity:.92}
.newsletter form{display:flex;gap:.5rem}
.newsletter .btn{background:var(--mark);color:var(--mark-ink)}

/* footer */
.site-footer{margin-top:4rem;border-top:1px solid var(--line);background:var(--surface);padding:2.5rem 0 1.5rem}
.footer-top{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:2rem}
.footer-about p{color:var(--muted);max-width:38ch}
.footer-menu ul,.social{list-style:none;margin:0;padding:0}
.footer-menu li,.social li{padding:.2rem 0}
.footer-menu a,.social a{color:var(--ink);text-decoration:none}
.footer-menu a:hover,.social a:hover{color:var(--accent);text-decoration:underline}
.footer-bottom{border-top:1px solid var(--line);margin-top:2rem;padding-top:1rem;display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;color:var(--muted);font-size:.9rem}
.to-top{position:fixed;right:1rem;bottom:1rem;opacity:0;pointer-events:none;background:var(--ink);color:var(--bg);border-radius:50%;width:44px;height:44px;border:0;cursor:pointer;transition:opacity .2s;z-index:70}
.to-top.show{opacity:1;pointer-events:auto}
.empty{padding:3rem 0;text-align:center}

/* responsive */
@media(max-width:960px){
  .layout{grid-template-columns:1fr}
  .grid,.layout:not(.no-side) .grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .hero-grid{grid-template-columns:1fr}
  .footer-top{grid-template-columns:1fr 1fr}
  .newsletter{grid-template-columns:1fr}
}
@media(max-width:720px){
  .menu-toggle{display:grid}
  .main-nav{position:absolute;left:0;right:0;top:100%;background:var(--bg);border-bottom:1px solid var(--line);display:none;margin:0;padding:.5rem 1rem 1rem}
  .main-nav.open{display:block}
  .main-nav ul{flex-direction:column}
  .tools{margin-left:auto}
}
@media(max-width:560px){
  .grid,.layout:not(.no-side) .grid{grid-template-columns:1fr}
  .footer-top{grid-template-columns:1fr}
  .newsletter form,.search-form{flex-direction:column}
  .entry-content{font-size:1.08rem}
}
@media(prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}
@media print{.site-header,.site-footer,.share,.to-top,.progress,.comments-area,.related{display:none}}