/*
Theme Name: Kumarraj Personal
Theme URI: https://kumarraj.com
Author: Kumarraj
Description: Three-column professional personal blog theme with Experience and Projects post types and an Instagram feed area.
Version: 1.0.0
Requires at least: 6.4
Requires PHP: 8.1
License: GPL-2.0-or-later
Text Domain: kumarraj
*/
:root{--ibm:#0F62FE;--steel:#3D628F;--slate:#586474;--white:#FFFFFF;--tint:#F4F6F9;--line:#DCE2EA;--paper:#FFFFFF;--head:#3D628F;--link:#0F62FE;--serif:"IBM Plex Serif",Georgia,serif;--sans:"IBM Plex Sans",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--slate);font:400 1.0625rem/1.65 var(--sans)}
img{max-width:100%;height:auto}
a{color:var(--link)}a:hover{color:var(--head)}
:focus-visible{outline:3px solid var(--ibm);outline-offset:2px}
h1,h2,h3{font-family:var(--serif);color:var(--head);line-height:1.25;font-weight:600;margin:0 0 .6em}
h1{font-size:clamp(1.9rem,3.4vw,2.6rem)}h2{font-size:1.5rem}h3{font-size:1.2rem}
.skip{position:absolute;left:-9999px}.skip:focus{left:1rem;top:1rem;background:var(--paper);padding:.5rem 1rem;z-index:99}
/* Three-column shell */
.site{display:grid;grid-template-columns:280px minmax(0,1fr) 320px;grid-template-areas:"rail main aside";min-height:100vh}
.rail{grid-area:rail;align-self:start;position:sticky;top:0;height:100vh;overflow-y:auto;background:linear-gradient(180deg,var(--steel) 0%,#335579 100%);color:var(--white);padding:2rem 1.5rem;display:flex;flex-direction:column;gap:1.75rem}
.rail a{color:var(--white);text-decoration:none}
.rail :focus-visible{outline-color:var(--white)}
.rail-top{display:flex;align-items:center;justify-content:space-between;gap:1rem}
.brand{display:flex;flex-direction:column;gap:.9rem}
.avatar{width:88px;height:88px;border-radius:50%;object-fit:cover;background:var(--white);color:var(--steel);display:grid;place-items:center;font:600 1.9rem var(--serif)}
.brand-name{display:block;font:600 1.4rem/1.2 var(--serif)}
.brand-role{display:block;font-size:.95rem;margin-top:.2rem}
.nav-toggle{display:none;background:transparent;color:var(--white);border:1px solid rgba(255,255,255,.7);border-radius:4px;padding:.4rem .8rem;font:inherit;cursor:pointer}
.rail-body{display:flex;flex-direction:column;gap:1.75rem;flex:1}
.menu{list-style:none;margin:0;padding:0}
.menu a{display:block;padding:.55rem .9rem;border-left:3px solid transparent;border-radius:0 4px 4px 0}
.menu a:hover{background:rgba(255,255,255,.1)}
.menu a[aria-current="page"]{border-left-color:var(--white);background:rgba(255,255,255,.16);font-weight:600}
.social{list-style:none;margin:auto 0 0;padding:0;display:flex;flex-wrap:wrap;gap:.35rem 1rem;font-size:.95rem}
.social a{text-decoration:underline;text-underline-offset:3px}
.main{grid-area:main;min-width:0;padding:3rem clamp(1.25rem,4vw,3.5rem)}
.aside{grid-area:aside;min-width:0;background:var(--tint);border-left:1px solid var(--line);padding:3rem 1.5rem}
/* Content */
.prose{max-width:68ch}.prose p,.prose ul,.prose ol{margin:0 0 1.1em}.prose h2{margin-top:1.8em}
.page-head{margin-bottom:2rem;max-width:68ch}
.meta{display:flex;flex-wrap:wrap;gap:.25rem 1rem;font-size:.9rem;margin:0 0 .6rem}
.lede{font-size:1.2rem;max-width:56ch;margin:0 0 1.5rem}
.hero{background:linear-gradient(135deg,#2B4768 0%,var(--steel) 100%);color:var(--white);border-radius:10px;padding:clamp(1.75rem,4vw,3.25rem);margin-bottom:3rem;box-shadow:0 18px 40px rgba(31,53,80,.22)}
.hero h1{color:var(--white);font-size:clamp(2.1rem,4.2vw,3.2rem);max-width:20ch}
.hero .lede{color:var(--white);opacity:.92}
.hero .btn{background:var(--white);color:var(--steel);border-color:var(--white)}
.hero .btn:hover{background:transparent;color:var(--white)}
.hero .btn.ghost{background:transparent;color:var(--white);border-color:rgba(255,255,255,.75)}
.hero .btn.ghost:hover{background:var(--white);color:var(--steel)}
.stats{list-style:none;display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:1.25rem;margin:2.25rem 0 0;padding:1.5rem 0 0;border-top:1px solid rgba(255,255,255,.3)}
.stats strong{display:block;font:600 2rem/1.1 var(--serif)}.stats span{font-size:.95rem}
.actions{display:flex;flex-wrap:wrap;gap:.75rem;margin:0}
.btn{display:inline-block;padding:.7rem 1.3rem;border-radius:4px;background:var(--ibm);color:var(--white);border:2px solid var(--ibm);font-weight:500;text-decoration:none}
.btn:hover{background:var(--steel);border-color:var(--steel);color:var(--white)}
.btn.ghost{background:transparent;color:var(--head);border-color:var(--head)}
.btn.ghost:hover{background:var(--steel);color:var(--white)}
.block{margin-bottom:3rem}
.block-head{display:flex;align-items:baseline;justify-content:space-between;gap:1rem;margin-bottom:1rem}.block-head h2{margin:0}
.post-row{display:grid;grid-template-columns:minmax(0,1fr) 150px;gap:1.5rem;padding:1.4rem 0;border-top:1px solid var(--line)}
.post-row:not(:has(.post-row-thumb)){grid-template-columns:minmax(0,1fr)}
.post-row-title{margin:0 0 .3rem;font-size:1.3rem}.post-row-title a{color:var(--head);text-decoration:none}.post-row-title a:hover{color:var(--link);text-decoration:underline}
.post-row-thumb img{aspect-ratio:3/2;object-fit:cover;width:100%;border-radius:4px}
.post-row p{margin:0 0 .5rem}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:1.5rem}
.card{border:1px solid var(--line);border-radius:8px;overflow:hidden;background:var(--paper);box-shadow:0 1px 2px rgba(31,53,80,.08),0 10px 28px rgba(31,53,80,.07);transition:transform .2s,box-shadow .2s}
.card:hover{transform:translateY(-3px);box-shadow:0 2px 4px rgba(31,53,80,.1),0 16px 36px rgba(31,53,80,.12)}
.card-img img{display:block;width:100%;aspect-ratio:16/10;object-fit:cover}
.card-body{padding:1rem 1.1rem 1.2rem}.card-body h3{margin:0 0 .4rem;font-size:1.1rem}.card-body h3 a{color:var(--head);text-decoration:none}.card-body p{margin:0;font-size:.95rem}
.timeline{list-style:none;margin:0;padding:0 0 0 1.75rem;border-left:2px solid var(--line);max-width:68ch}
.tl-item{position:relative;padding-bottom:2.25rem}
.tl-item::before{content:"";position:absolute;left:calc(-1.75rem - 7px);top:.45rem;width:12px;height:12px;border-radius:50%;background:var(--ibm)}
.tl-item h2{margin:0 0 .15rem;font-size:1.25rem}.tl-meta{margin:0 0 .6rem;font-size:.95rem}
.widget{margin-bottom:2.25rem}.widget h2{font-size:1.05rem;margin-bottom:.75rem}
.plain{list-style:none;margin:0;padding:0}.plain li{padding:.45rem 0;border-top:1px solid var(--line)}.plain li:first-child{border-top:0}.plain a{text-decoration:none}.plain time{display:block;font-size:.85rem}
.ig-note{border:1px dashed var(--slate);border-radius:4px;padding:1rem;font-size:.95rem;margin:0}
.form{display:grid;gap:1.1rem;max-width:560px}.form label{display:block;font-weight:500;margin-bottom:.3rem;color:var(--head)}
.form input,.form textarea{width:100%;padding:.7rem .8rem;border:1px solid var(--slate);border-radius:4px;font:inherit;color:inherit;background:var(--paper)}
.hp{position:absolute;left:-9999px}
.notice{padding:.9rem 1rem;border-left:4px solid var(--ibm);background:var(--tint);margin-bottom:1.5rem;max-width:560px}
.author-box{display:flex;gap:1rem;align-items:center;margin-top:2.5rem;padding:1.25rem;background:var(--tint);border-radius:4px;max-width:68ch}
.author-box .avatar{width:56px;height:56px;font-size:1.2rem;flex:none;background:var(--steel);color:var(--white)}
.author-box p{margin:0}
.entry-thumb img{border-radius:4px;margin-bottom:1.5rem}
.colophon{margin-top:4rem;padding-top:1.5rem;border-top:1px solid var(--line);font-size:.9rem}
.nav-links{display:flex;gap:.5rem;flex-wrap:wrap}.pagination{margin-top:2rem}
.page-numbers{padding:.4rem .8rem;border:1px solid var(--line);border-radius:4px;text-decoration:none}.page-numbers.current{background:var(--steel);color:var(--white);border-color:var(--steel)}
.post-navigation .nav-links{justify-content:space-between;margin-top:2rem}
/* Responsive */
@media (max-width:1100px){.site{grid-template-columns:260px minmax(0,1fr);grid-template-areas:"rail main" "rail aside"}.aside{border-left:0;border-top:1px solid var(--line)}}
@media (max-width:760px){
.site{grid-template-columns:minmax(0,1fr);grid-template-areas:"rail" "main" "aside"}
.rail{position:static;height:auto;padding:1rem 1.25rem;gap:1rem}
.rail-top{width:100%}.brand{flex-direction:row;align-items:center;gap:.75rem}
.avatar{width:44px;height:44px;font-size:1.1rem}.brand-role{display:none}
.nav-toggle{display:inline-block}
.rail-body{display:none}.rail-body.is-open{display:flex}
.post-row{grid-template-columns:minmax(0,1fr)}}
@media (prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}

/* Entrepreneur additions: rail CTA, social feeds, call to action */
.rail .rail-cta{display:block;text-align:center;padding:.7rem 1rem;border:2px solid var(--white);border-radius:4px;font-weight:600}
.rail .rail-cta:hover{background:var(--white);color:var(--steel)}
.feeds{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:2rem;align-items:start}
.feed-title{font-size:1.05rem;margin:0 0 .75rem}
.x-feed{border:1px solid var(--line);border-radius:8px;background:var(--paper);padding:.5rem;min-height:200px;overflow:hidden}
.x-fallback{margin:.5rem .5rem .25rem;font-size:.9rem}
.cta{background:var(--ibm);color:var(--white);border-radius:10px;padding:2rem 2.25rem;display:flex;gap:1.5rem;align-items:center;justify-content:space-between;flex-wrap:wrap}
.cta h2{color:var(--white);margin:0 0 .3rem}.cta p{margin:0;max-width:52ch}
.cta .btn{background:var(--white);color:var(--ibm);border-color:var(--white)}
.cta .btn:hover{background:transparent;color:var(--white)}
@media (prefers-reduced-motion:reduce){.card:hover{transform:none}}