/*
Theme Name: SlangSpot
Description: Custom theme for SlangSpot: live word search, trending posts, category pages and blog-style posts with table of contents.
Version: 1.0.0
Requires at least: 5.8
Requires PHP: 7.4
License: GNU General Public License v2 or later
Text Domain: slangspot
*/
:root{--logo-h:84px;--flogo-h:72px;--ink:#14121F;--lime:#C6F432;--violet:#4A2FD6;--soft:#EDE9FF;--mut:#4B4860;--line:#E6E3F0}
*{box-sizing:border-box}
body{margin:0;font-family:Inter,sans-serif;color:var(--ink);background:#fff;line-height:1.5}
img{max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4{font-family:"Space Grotesk",sans-serif;margin:0;line-height:1.15}
.screen-reader-text{position:absolute;left:-9999px}
.wrap{max-width:1184px;margin:0 auto;padding:0 24px}
.mut{color:var(--mut)}
.tag{font-size:13px;font-weight:600;color:var(--violet);text-transform:uppercase;letter-spacing:.06em}
.btn{background:var(--ink);color:#fff!important;padding:0 20px;border-radius:999px;font-weight:600;min-height:44px;display:inline-flex;align-items:center;border:0;cursor:pointer;font:600 16px Inter,sans-serif}
.chip{display:inline-flex;align-items:center;min-height:44px;padding:0 18px;border:1.5px solid var(--ink);border-radius:999px;font-weight:500;background:#fff}
.chip.on{background:var(--ink);color:#fff}
.card{border:1.5px solid var(--ink);border-radius:20px;padding:24px;background:#fff;display:block}
.grid3{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:20px}
.img{background:var(--soft);border:1.5px solid var(--ink);border-radius:16px;display:flex;align-items:center;justify-content:center;color:var(--violet);font-weight:600}
/* header */
.hd{display:flex;align-items:center;gap:24px;padding:10px 24px;border-bottom:1px solid var(--line);flex-wrap:wrap}
.logo{font:700 26px "Space Grotesk",sans-serif;display:flex;align-items:center;gap:8px}
.logo img{height:var(--logo-h);width:auto;max-height:none;display:block}
.dot{width:14px;height:14px;border-radius:50%;background:var(--lime);border:2px solid var(--ink)}
.nv{flex:1}.nv ul{display:flex;gap:6px 24px;list-style:none;margin:0;padding:0;flex-wrap:wrap;font-weight:500}
.nv a{display:inline-block;padding:10px 0}
/* hero */
.hero{padding:64px 24px 48px;display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:40px;align-items:start}
.hero h1{font-size:clamp(38px,6vw,64px);margin-bottom:20px}
.hl{background:var(--lime);padding:0 8px;border-radius:8px}
.sr{display:flex;gap:12px;background:#fff;border:2px solid var(--ink);border-radius:999px;padding:8px 8px 8px 24px;max-width:640px;align-items:center}
.sr input{flex:1;border:0;outline:0;font:500 18px Inter,sans-serif;min-height:44px;min-width:0;background:transparent}
.res{background:var(--lime);padding:32px}
.res h2{font-size:clamp(36px,5vw,56px);margin:8px 0 4px;word-break:break-word}
.res p{margin:0 0 14px;font-size:18px}
.sec{margin-top:56px}
.sech{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:24px;gap:12px}
.sech h2{font-size:clamp(28px,4vw,36px)}
.tcard h3{font-size:28px;margin:8px 0}
.pc{padding:0;overflow:hidden}
.pc .th{aspect-ratio:16/9;overflow:hidden;border-bottom:1.5px solid var(--ink)}
.pc .th img{width:100%;height:100%;object-fit:cover;display:block}
.pc .th .img{height:100%;border:0;border-radius:0}
.pb{padding:20px}.pb h3{font-size:22px;margin:8px 0}
.ctile{background:var(--soft)}.ctile h3{font-size:26px}
/* archive banner */
.ban{background:var(--soft);border-bottom:1.5px solid var(--ink);padding:40px 0 48px}
.ban h1{font-size:clamp(34px,5vw,60px);margin-bottom:12px}
.crumb{margin:0 0 16px;color:var(--mut);font-size:15px}
.crumb a{text-decoration:underline}
.pagination{margin:40px 0;display:flex;gap:8px;flex-wrap:wrap}
.pagination .page-numbers{min-width:44px;min-height:44px;display:inline-flex;align-items:center;justify-content:center;border:1.5px solid var(--ink);border-radius:999px;padding:0 14px;font-weight:600}
.pagination .current{background:var(--ink);color:#fff}
/* single */
.layout{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:40px;align-items:start;padding-top:32px}
.layout main{grid-column:span 2;min-width:0}
.feat{width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:16px;border:1.5px solid var(--ink);display:block}
.single h1{font-size:clamp(30px,5vw,52px);margin:8px 0 12px}
.toc{background:var(--soft);margin:32px 0;position:relative}
.toc h2{font-size:22px;margin:0 0 8px}
.tcx{position:absolute;opacity:0}.tcb{display:none;margin-top:12px}.tcx:focus-visible~.tcb{outline:3px solid var(--violet)}

@media(max-width:700px){:root{--logo-h:60px;--flogo-h:56px}.tcx:checked~.tcb .m{display:none}.tcx:not(:checked)~.tcb .l{display:none}.hd{padding:12px 16px}.wrap{padding:0 16px}}
.art h2{font-size:32px;margin:40px 0 12px}.art h3{font-size:24px;margin:28px 0 10px}
.art p,.art li{font-size:18px;line-height:1.7;color:#2B2940}.art p{margin:0 0 16px}
.art blockquote{border:1.5px solid var(--ink);border-radius:16px;padding:8px 24px;background:#F7F5FF;margin:24px 0}
.art a{color:var(--violet);text-decoration:underline}
.alignleft{float:left;margin:0 20px 10px 0}.alignright{float:right;margin:0 0 10px 20px}.aligncenter{display:block;margin:0 auto}
.side .card{margin-bottom:20px}.side h3{font-size:22px;margin-bottom:12px}
.side li{list-style:none}.side ul{margin:0;padding:0}.side li a{display:block;padding:10px 0;font-weight:600}
/* footer */
.ft2{background:var(--ink);color:#E6E3F0;margin-top:80px;padding:56px 24px 28px}
.ft2 a{color:#E6E3F0}.ftg{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:32px;max-width:1184px;margin:0 auto}
.ft2 h4{font-size:16px;color:var(--lime);margin:0 0 14px}
.ft2 ul{margin:0;padding:0}.ft2 li{list-style:none}.ft2 li a{display:inline-block;padding:8px 0}
.soc{display:flex;gap:10px;flex-wrap:wrap;margin-top:20px}.soc a{border:1.5px solid #E6E3F0;border-radius:999px;padding:0 16px;min-height:44px;display:inline-flex;align-items:center;font-weight:600}
.cp{max-width:1184px;margin:40px auto 0;padding-top:20px;border-top:1px solid #3A3750;font-size:14px}
.flogo{display:inline-block}.flogo img{height:var(--flogo-h);width:auto;display:block}
.side .sr{padding:6px 6px 6px 16px}.side .sr input{font-size:16px}.side .sr .btn{padding:0 16px}
.side .res{padding:24px}.side .res h2{font-size:34px}.side .res p{font-size:16px}
.side li a{display:flex;justify-content:space-between;gap:12px;border-bottom:1px solid rgba(20,18,31,.12)}.side li:last-child a{border-bottom:0}
html{scroll-behavior:smooth}.art h2,.art h3{scroll-margin-top:16px}
.art .toc{background:var(--soft);padding:20px;margin:28px 0}
.art .toc h2{font-size:20px;margin:0 0 12px}
.art .tcl{list-style:none;counter-reset:t;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.art .tcl li{font-size:15px;line-height:1.4;margin:0;color:var(--ink)}
.art .tcl li:not(.l3){counter-increment:t}
.art .tcl a{display:flex;gap:10px;align-items:flex-start;padding:9px 12px;background:#fff;border-radius:10px;color:var(--ink);text-decoration:none;font-weight:600}
.art .tcl a::before{content:counter(t);flex:none;min-width:24px;height:24px;border-radius:50%;background:var(--lime);font-size:12px;display:inline-flex;align-items:center;justify-content:center}
.art .tcl a:hover,.art .tcl a:focus-visible{background:var(--lime)}
.art .tcl a:hover::before,.art .tcl a:focus-visible::before{background:#fff}
.art .tcl .l3{margin-left:18px}.art .tcl .l3 a{font-weight:500;font-size:14px}
.art .tcl .l3 a::before{content:"";min-width:8px;width:8px;height:8px;margin:6px 8px 0 4px;background:var(--violet)}
.art .tcb{display:none;font-size:14px;min-height:40px;padding:0 18px;margin-top:12px}
.art .tc-long .tcb{display:inline-flex}
.art .tc-long .tcx:not(:checked)~.tcl{max-height:250px;overflow:hidden;-webkit-mask-image:linear-gradient(#000 65%,transparent);mask-image:linear-gradient(#000 65%,transparent)}
@media(max-width:700px){.art .toc{padding:16px}.art .toc h2{font-size:18px}.art .tcl a{font-size:14px;padding:8px 10px}
.art .tc-long .tcx:not(:checked)~.tcl{max-height:195px}}
a[href],button,.btn,.chip,label[for],summary,select,input[type=submit],input[type=checkbox]{cursor:pointer}
.soc a{width:44px;height:44px;padding:0;justify-content:center;border-radius:50%}
.ft2 .soc a:hover,.ft2 .soc a:focus-visible{background:var(--lime);border-color:var(--lime);color:var(--ink)}

/* ===== v2 refinements ===== */
body{font-size:15.5px}
.btn{font-size:15px}.nv ul{font-size:15px}
.hero{padding:44px 24px 28px;grid-template-columns:1fr 1fr;grid-template-areas:"copy res" "chips res";column-gap:40px;row-gap:0;align-items:start}
.hero .copy{grid-area:copy}.hero .res{grid-area:res}
.hero .chips{grid-area:chips;display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-top:18px}
.hero h1{font-size:clamp(28px,3.8vw,42px);line-height:1.12;margin-bottom:14px}
.hero .lead{font-size:16px;margin:0 0 22px}
.chipl{font-size:13px;font-weight:600;color:var(--mut)}
.chip.sm{min-height:34px;line-height:31px;padding:0 14px;font-size:13px;max-width:180px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:inline-block}
.sr{padding:5px 5px 5px 20px}.sr input{font-size:16px}
.res{padding:24px}.res h2{font-size:clamp(24px,2.6vw,30px);margin:6px 0 4px}.res p{font-size:15.5px;margin:0 0 10px}
.sech h2{font-size:clamp(20px,2.4vw,26px)}
.tcard{padding:18px}.tcard h3{font-size:17px;margin:6px 0}.pb{padding:16px}.pb h3{font-size:16.5px;margin:6px 0}
.tcard p,.pb p{font-size:14px}
.tcard h3,.pb h3{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.tcard p,.pb p{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.ctile h3{font-size:18px}.ctile p{font-size:14px}
.ban h1{font-size:clamp(24px,3.4vw,36px)}
.single h1{font-size:clamp(24px,3.2vw,34px);line-height:1.2}
.art p,.art li{font-size:16.5px;line-height:1.75}.art h2{font-size:24px;margin:32px 0 10px}.art h3{font-size:19px;margin:24px 0 8px}
.art .toc h2{font-size:16.5px}
.side h3{font-size:17px;margin-bottom:10px}.side .res h2{font-size:24px}
.ft2 h4{font-size:15px}
/* TOC: toggle label (fixes both labels showing on desktop) */
.art .tcx:checked~.tcb .m{display:none}.art .tcx:not(:checked)~.tcb .l{display:none}
/* Quick answer */
.art .qa{background:#F6FFD6;border:1.5px solid var(--ink);border-radius:16px;padding:16px 18px;margin:0 0 28px}
.art .qa .qh{display:flex;align-items:center;gap:8px;font:700 12px "Space Grotesk",sans-serif;letter-spacing:.08em;text-transform:uppercase;margin-bottom:8px}
.art .qa .qb{width:22px;height:22px;border-radius:50%;background:var(--lime);border:1.5px solid var(--ink);display:inline-flex;align-items:center;justify-content:center}
.art .qa p{font-size:16px;line-height:1.6;margin:0 0 6px;color:var(--ink);font-weight:500}
.art .qa p:last-child{margin-bottom:0}
.art .qa .qe{font-style:italic;font-weight:400;color:var(--mut);font-size:15px}
/* Header / mobile menu */
.mt{display:none;width:44px;height:44px;border:1.5px solid var(--ink);border-radius:12px;background:#fff;align-items:center;justify-content:center;flex-direction:column;gap:5px;padding:0}
.mt span{display:block;width:20px;height:2px;background:var(--ink);transition:transform .2s,opacity .2s}
.hd{position:relative}
.nvwrap{flex:1;display:flex;align-items:center}.nvwrap .nv{flex:1}.mcta{display:none}
@media(max-width:800px){
 .hd{display:grid;grid-template-columns:44px minmax(0,1fr) 44px;gap:4px;padding:8px 10px;align-items:center}
 .mt{display:inline-flex;grid-column:1}
 .logo{grid-column:2;justify-self:center}
 :root{--logo-h:76px}
 .dcta{display:none}
 .nvwrap{display:none;position:absolute;top:100%;left:0;right:0;background:#fff;border-bottom:1.5px solid var(--ink);padding:6px 16px 16px;z-index:60;flex-direction:column;align-items:stretch;box-shadow:0 14px 24px rgba(20,18,31,.12)}
 .hd.nav-open .nvwrap{display:flex}
 .hd.nav-open .mt span:nth-child(1){transform:translateY(7px) rotate(45deg)}
 .hd.nav-open .mt span:nth-child(2){opacity:0}
 .hd.nav-open .mt span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
 .nv ul{flex-direction:column;gap:0}.nv a{display:block;padding:13px 4px;border-bottom:1px solid var(--line);font-size:16px}
 .mcta{display:inline-flex;justify-content:center;margin-top:14px}
 .hero{padding:24px 16px 12px;grid-template-columns:1fr;grid-template-areas:"copy" "res" "chips";row-gap:16px}
 .hero .chips{margin-top:0}
}
.logo img{max-width:100%;object-fit:contain}
.logo{min-width:0;max-width:100%}

/* ===== header menu + social (v3) ===== */
.hd{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.96);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.admin-bar .hd{top:32px}
@media(max-width:782px){.admin-bar .hd{top:46px}}
.nv ul{gap:4px}
.nv li{position:relative}
.nv a{padding:8px 14px;border-radius:999px;font-weight:600;font-size:15px;transition:background .15s}
.nv a:hover,.nv a:focus-visible,.nv .current-menu-item>a,.nv .current-menu-ancestor>a,.nv .current-cat>a,.nv .current_page_item>a{background:var(--lime)}
.nv .menu-item-has-children>a::after{content:"";display:inline-block;width:6px;height:6px;border:solid currentColor;border-width:0 2px 2px 0;transform:rotate(45deg);margin:-3px 0 0 8px}
.nv .sub-menu{display:none;position:absolute;top:100%;left:0;min-width:210px;flex-direction:column;gap:2px;background:#fff;border:1.5px solid var(--ink);border-radius:16px;padding:8px;margin:6px 0 0;list-style:none;z-index:70;box-shadow:0 14px 28px rgba(20,18,31,.14)}
.nv li:hover>.sub-menu,.nv li:focus-within>.sub-menu{display:flex}
.nv .sub-menu a{display:block;border-radius:10px}
.hsoc{display:flex;gap:6px;align-items:center}
.hsoc a{width:38px;height:38px;border:1.5px solid var(--ink);border-radius:50%;display:inline-flex;align-items:center;justify-content:center;background:#fff;color:var(--ink);transition:background .15s,transform .15s}
.hsoc a:hover,.hsoc a:focus-visible{background:var(--lime);transform:translateY(-2px)}
.hsoc svg{width:16px;height:16px}
.msoc{display:none}
@media(max-width:800px){
 .hsoc{display:none}
 .nv .menu-item-has-children>a::after{display:none}
 .nv a{border-radius:0;padding:14px 4px;background:none!important}
 .nv li>a{display:flex;justify-content:space-between;align-items:center}
 .nv li>a::after{content:"\2192";display:inline-block;width:auto;height:auto;border:0;transform:none;margin:0;color:var(--mut)}
 .nv .current-menu-item>a,.nv .current-cat>a,.nv .current_page_item>a{color:var(--violet)}
 .nv .sub-menu{display:block;position:static;border:0;box-shadow:none;padding:0 0 0 14px;margin:0;min-width:0}
 .msoc{display:flex;gap:10px;align-items:center;margin-top:16px;padding-top:16px;border-top:1px solid var(--line)}
 .msoc::before{content:"Follow us";font-weight:600;font-size:13px;color:var(--mut);margin-right:auto}
 .msoc a{width:44px;height:44px;border:1.5px solid var(--ink);border-radius:50%;display:inline-flex;align-items:center;justify-content:center;color:var(--ink)}
 .msoc a:hover{background:var(--lime)}
}

/* ===== author ===== */
.byline{display:flex;align-items:center;gap:10px;margin:0 0 20px;font-size:14.5px;color:var(--mut)}
.byline a{color:var(--ink);font-weight:600}.byline a:hover{text-decoration:underline}
.bav{width:32px;height:32px;border-radius:50%;border:1.5px solid var(--ink);display:block}
.abox{display:flex;gap:22px;align-items:flex-start;border:1.5px solid var(--ink);border-radius:20px;padding:24px;background:linear-gradient(135deg,#F6FFD6 0%,#EDE9FF 100%);margin-top:40px}
.aimg{width:96px;height:96px;border-radius:50%;border:3px solid var(--ink);object-fit:cover;display:block;background:#fff}
.aimg.big{width:110px;height:110px;flex:none}
.ainfo{min-width:0;flex:1}.ainfo h3{font-size:20px;margin:4px 0 8px}.ainfo h3 a:hover{text-decoration:underline}
.abio p{font-size:15px;line-height:1.65;color:#2B2940;margin:0 0 14px}
.afoot{display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.apc{font-size:13px;font-weight:600;color:var(--mut);margin:0}
.abanner{display:flex;gap:24px;align-items:center}
@media(max-width:600px){.abox{flex-direction:column;padding:20px}.aimg{width:80px;height:80px}.abanner{flex-direction:column;align-items:flex-start}.aimg.big{width:90px;height:90px}}