/*
Theme Name: Tool Witty
Theme URI: https://toolwitty.com
Author: Tool Witty
Description: A fast, SEO-ready dark and gold theme for the Tool Witty Destiny Matrix website. Works with the DMX Destiny Matrix Pro plugin. Includes light mode, calculator landing pages, 22 Arcana templates, schema markup and a contact form.
Version: 2.0.0
Requires at least: 6.0
Requires PHP: 7.4
License: GPL-2.0-or-later
Text Domain: toolwitty
*/

@font-face{font-family:"Inter";font-weight:400;font-style:normal;font-display:swap;src:url(assets/fonts/inter-400.woff2) format("woff2")}
@font-face{font-family:"Inter";font-weight:500;font-style:normal;font-display:swap;src:url(assets/fonts/inter-500.woff2) format("woff2")}
@font-face{font-family:"Inter";font-weight:600;font-style:normal;font-display:swap;src:url(assets/fonts/inter-600.woff2) format("woff2")}
@font-face{font-family:"Inter";font-weight:700;font-style:normal;font-display:swap;src:url(assets/fonts/inter-700.woff2) format("woff2")}
@font-face{font-family:"Lora";font-weight:400 700;font-style:normal;font-display:swap;src:url(assets/fonts/lora-var.woff2) format("woff2")}
@font-face{font-family:"Lora";font-weight:400 700;font-style:italic;font-display:swap;src:url(assets/fonts/lora-italic-var.woff2) format("woff2")}

:root{
	--bg:#07060f;--bg2:#0c0a1d;--card:#13102b;--card2:#1a1540;--fg:#ece9ff;--mut:#a9a3d4;
	--gold:#f5b83d;--gold2:#d99a1a;--vio:#8b5cf6;--bd:rgba(245,184,61,.2);--on:#1a1100;
	--r:18px;--max:1180px;
	--serif:"Lora",Georgia,"Times New Roman",serif;--sans:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
}
[data-theme="light"]{
	--bg:#fbf8f1;--bg2:#f3eee2;--card:#ffffff;--card2:#fff6e0;--fg:#1d1744;--mut:#5d5887;
	--gold:#a96a0f;--gold2:#7d4c06;--vio:#6d28d9;--bd:rgba(125,76,6,.22);--on:#ffffff;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--fg);font-family:var(--sans);font-size:17px;line-height:1.7;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img,svg{max-width:100%;height:auto}
a{color:var(--gold);text-underline-offset:3px}
a:hover{color:var(--fg)}
h1,h2,h3,h4{font-family:var(--serif);line-height:1.2;color:var(--fg);margin:0 0 .6em;font-weight:600}
h1 em,h2 em{font-style:italic;color:var(--gold)}
p{margin:0 0 1.1em}
.wrap{max-width:var(--max);margin:0 auto;padding:0 1.25rem}
.narrow{max-width:800px;margin-left:auto;margin-right:auto;padding-left:1.25rem;padding-right:1.25rem}
.center{text-align:center}
.screen-reader-text{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.skip{position:absolute;left:-999px;top:0;z-index:999;background:#fff;color:#000;padding:.6rem 1rem}
.skip:focus{left:10px;top:10px}
.tw-i{flex:0 0 auto;vertical-align:-3px}

/* buttons */
.btn{display:inline-flex;align-items:center;gap:.5rem;justify-content:center;padding:.95rem 1.7rem;border-radius:14px;border:1px solid transparent;background:linear-gradient(135deg,#fcd34d,var(--gold2));color:var(--on);font:700 1rem var(--sans);text-decoration:none;cursor:pointer;box-shadow:0 14px 34px -14px rgba(245,184,61,.75);transition:transform .15s,box-shadow .2s}
.btn:hover{transform:translateY(-2px);color:var(--on);box-shadow:0 20px 40px -14px rgba(245,184,61,.9)}
.btn.sm{padding:.55rem 1.05rem;font-size:.9rem;border-radius:11px}
.btn.ghost{background:transparent;color:var(--fg);border-color:var(--bd);box-shadow:none}
.btn.ghost:hover{background:var(--card);color:var(--fg)}

/* header */
.progress{position:fixed;left:0;top:0;height:3px;width:0;background:linear-gradient(90deg,var(--vio),var(--gold));z-index:200}
.site-header{position:sticky;top:0;z-index:100;background:color-mix(in srgb,var(--bg) 82%,transparent);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border-bottom:1px solid var(--bd)}
.bar{display:flex;align-items:center;justify-content:space-between;gap:1rem;min-height:72px}
.brand{display:flex;align-items:center;color:var(--fg);text-decoration:none}
.brand svg,.brand img{height:46px;width:auto;display:block}
.nav ul{list-style:none;display:flex;gap:.25rem;margin:0;padding:0}
.nav a{display:block;padding:.5rem .8rem;border-radius:10px;color:var(--fg);text-decoration:none;font-weight:500;font-size:.96rem}
.nav a:hover,.nav .current-menu-item>a{background:var(--card);color:var(--gold)}
.tools{display:flex;gap:.6rem;align-items:center}
.icon-btn{display:grid;place-items:center;width:42px;height:42px;border-radius:12px;border:1px solid var(--bd);background:var(--card);color:var(--fg);cursor:pointer}
.icon-btn:hover{border-color:var(--gold);color:var(--gold)}
.menu-toggle{display:none;gap:4px;align-content:center}
.menu-toggle span{display:block;width:18px;height:2px;border-radius:2px;background:currentColor;transition:.2s}
.menu-toggle.on span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.menu-toggle.on span:nth-child(2){opacity:0}
.menu-toggle.on span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}

/* hero */
.hero{position:relative;overflow:hidden;padding:4.5rem 0 3rem;background:radial-gradient(80% 60% at 50% 0,rgba(139,92,246,.28),transparent 70%),radial-gradient(50% 40% at 90% 30%,rgba(245,184,61,.12),transparent 70%)}
[data-theme="light"] .hero{background:radial-gradient(80% 60% at 50% 0,rgba(245,184,61,.25),transparent 70%)}
.hero-art{position:absolute;left:50%;top:-120px;width:760px;max-width:none;transform:translateX(-50%);color:var(--gold);opacity:.12;animation:spin 140s linear infinite;pointer-events:none}
@keyframes spin{to{transform:translateX(-50%) rotate(360deg)}}
.hero-in{position:relative;text-align:center;max-width:1000px}
.eyebrow{display:inline-flex;align-items:center;gap:.5rem;padding:.4rem .95rem;border-radius:999px;border:1px solid var(--bd);background:var(--card);color:var(--gold);font-size:.82rem;font-weight:600;letter-spacing:.02em}
.hero h1{font-size:clamp(2.1rem,5.4vw,3.7rem);margin:1rem 0 .8rem;letter-spacing:-.01em}
.sub{color:var(--mut);font-size:1.12rem;max-width:660px;margin:0 auto 1.5rem}
.calc-wrap{position:relative;margin-top:1.5rem}

/* sections */
.section{padding:4.2rem 0}
.section.alt{background:var(--bg2)}
.kicker{text-align:center;color:var(--gold);font-size:.8rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;margin-bottom:.7rem}
.h2c{text-align:center;font-size:clamp(1.7rem,4vw,2.6rem);max-width:820px;margin:0 auto .9rem}
.lead{text-align:center;color:var(--mut);max-width:680px;margin:0 auto 2.2rem}
.strip{border-block:1px solid var(--bd);background:var(--bg2)}
.strip-in{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem;padding-block:1.6rem}
.strip-in div{text-align:center}
.strip-in strong{display:block;font:600 2.1rem/1.1 var(--serif);color:var(--gold)}
.strip-in span{color:var(--mut);font-size:.88rem}
.cols3{display:grid;grid-template-columns:repeat(3,1fr);gap:1.1rem;margin:2.2rem 0}
.pcard{display:block;background:var(--card);border:1px solid var(--bd);border-radius:var(--r);padding:1.6rem;color:var(--fg);text-decoration:none;transition:transform .2s,border-color .2s}
.pcard .tw-i{color:var(--gold);margin-bottom:.7rem}
.pcard h3{font-size:1.2rem}
.pcard p{color:var(--mut);margin:0}
.pcard.link:hover{transform:translateY(-4px);border-color:var(--gold);color:var(--fg)}
.more{display:inline-flex;gap:.4rem;align-items:center;margin-top:1rem;color:var(--gold);font-weight:600;font-size:.92rem}
.dims{display:grid;grid-template-columns:repeat(3,1fr);gap:1.1rem;margin-top:2.2rem}
.dim{position:relative;background:linear-gradient(165deg,var(--card2),var(--card));border:1px solid var(--bd);border-radius:var(--r);padding:1.7rem 1.5rem}
.dim .idx{position:absolute;right:1.2rem;top:1.1rem;color:var(--mut);font-size:.75rem;letter-spacing:.1em}
.dim .tw-i{color:var(--gold);margin-bottom:.8rem}
.dim h3{font-size:1.25rem;margin-bottom:.3rem}
.dsub{color:var(--gold);font-size:.9rem;font-weight:600}
.dim p:last-child{color:var(--mut);margin:0;font-size:.95rem}
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:1.1rem;margin:2.2rem 0}
.step{background:var(--card);border:1px solid var(--bd);border-radius:var(--r);padding:1.7rem;text-align:center}
.step b{display:grid;place-items:center;width:52px;height:52px;margin:0 auto 1rem;border-radius:50%;background:linear-gradient(135deg,#fcd34d,var(--gold2));color:var(--on);font:700 1.4rem var(--serif)}
.step p{color:var(--mut);margin:0}

/* faq */
.faq details{background:var(--card);border:1px solid var(--bd);border-radius:14px;margin-bottom:.7rem;overflow:hidden}
.faq summary{cursor:pointer;list-style:none;padding:1rem 3rem 1rem 1.25rem;font-weight:600;position:relative}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:1.2rem;top:50%;transform:translateY(-50%);font-size:1.4rem;color:var(--gold)}
.faq details[open] summary::after{content:"\2212"}
.faq details p{margin:0;padding:0 1.25rem 1.2rem;color:var(--mut)}

/* cta */
.cta{text-align:center;padding:4.5rem 0;background:radial-gradient(60% 100% at 50% 0,rgba(245,184,61,.14),transparent 70%),var(--bg2);border-top:1px solid var(--bd)}
.cta h2{font-size:clamp(1.7rem,4vw,2.6rem)}
.cta p{color:var(--mut)}

/* page hero */
.page-hero{padding:3rem 0 2.2rem;background:radial-gradient(70% 100% at 50% 0,rgba(139,92,246,.2),transparent 70%);border-bottom:1px solid var(--bd)}
[data-theme="light"] .page-hero{background:radial-gradient(70% 100% at 50% 0,rgba(245,184,61,.2),transparent 70%)}
.page-hero h1{font-size:clamp(1.9rem,4.6vw,3rem);margin-bottom:.4rem}
.page-hero .sub{margin-left:0;margin-bottom:0}
.page-hero.center,.page-hero .center{text-align:center}
.page-hero .center .sub{margin-inline:auto}
.crumbs{display:flex;flex-wrap:wrap;gap:.5rem;align-items:center;font-size:.85rem;color:var(--mut);margin-bottom:1rem}
.crumbs a{color:var(--mut);text-decoration:none}.crumbs a:hover{color:var(--gold)}
.meta{color:var(--mut);font-size:.88rem}
.arc-head{display:flex;gap:1.3rem;align-items:center}
.arc-num{display:grid;place-items:center;flex:0 0 auto;width:84px;height:84px;border-radius:50%;background:linear-gradient(135deg,#fcd34d,var(--gold2));color:var(--on);font:700 2.3rem var(--serif);box-shadow:0 0 0 6px rgba(245,184,61,.15)}

/* entry typography */
.entry{padding-block:2.4rem}
.entry-wide{max-width:var(--max)}
.entry h2{font-size:1.65rem;margin-top:2em}
.entry h3{font-size:1.25rem;margin-top:1.6em}
.entry ul,.entry ol{padding-left:1.3rem;margin:0 0 1.2em}
.entry li{margin-bottom:.4em}
.entry img{border-radius:14px}
.entry blockquote{margin:1.5em 0;padding:.5em 1.2em;border-left:3px solid var(--gold);color:var(--mut);font-family:var(--serif);font-style:italic}
.entry table{width:100%;border-collapse:collapse;margin:1.4em 0}
.entry th,.entry td{border:1px solid var(--bd);padding:.6rem .8rem;text-align:left}
.entry th{background:var(--card)}
.hero-img{width:100%;margin-bottom:1.5rem}
.dmx-lead{font-size:1.15rem;color:var(--mut)}
.post-layout{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:2.5rem;align-items:start}
.post-layout .entry{max-width:780px}
.side{position:sticky;top:96px;padding-top:2.4rem}
.side-box{background:var(--card);border:1px solid var(--bd);border-radius:var(--r);padding:1.2rem}
.side-box h3{font-size:1.05rem}
.side-box>a{display:block;padding:.4rem 0;color:var(--fg);text-decoration:none;border-bottom:1px solid var(--bd)}
.side-box>a:last-child{border:0}
.side-box>a:hover{color:var(--gold)}
.arc-nav{list-style:none;margin:0;padding:0;max-height:62vh;overflow:auto}
.arc-nav a{display:flex;gap:.6rem;padding:.3rem .4rem;border-radius:8px;color:var(--fg);text-decoration:none;font-size:.92rem}
.arc-nav a:hover{background:var(--bg2)}
.arc-nav b{display:inline-grid;place-items:center;min-width:26px;height:26px;border-radius:50%;background:var(--bg2);color:var(--gold);font-size:.78rem}
.arc-nav .cur a{background:var(--bg2);color:var(--gold);font-weight:600}
.toc{background:var(--card);border:1px solid var(--bd);border-radius:14px;padding:1rem 1.3rem;margin-bottom:1.6rem}
.toc[hidden]{display:none}
.toc ol{margin:.5rem 0 0;padding-left:1.2rem}
.toc a{color:var(--fg);text-decoration:none}.toc a:hover{color:var(--gold)}
.share{display:flex;flex-wrap:wrap;gap:.5rem;align-items:center;margin:2.2rem 0 1.5rem;padding-top:1.4rem;border-top:1px solid var(--bd)}
.share span{color:var(--mut);margin-right:.3rem}
.share a,.share button{padding:.4rem .9rem;border-radius:999px;border:1px solid var(--bd);background:var(--card);color:var(--fg);text-decoration:none;font:600 .85rem var(--sans);cursor:pointer}
.share a:hover,.share button:hover{border-color:var(--gold);color:var(--gold)}
.cta-box{margin:2rem 0;padding:1.6rem;border-radius:var(--r);border:1px solid var(--bd);background:linear-gradient(160deg,var(--card2),var(--card));text-align:center}
.cta-box h3{margin-bottom:.3rem}.cta-box p{color:var(--mut)}
.author{padding:1.1rem 1.3rem;border-radius:14px;background:var(--card);border:1px solid var(--bd)}
.author p{margin:.2rem 0 0;color:var(--mut);font-size:.92rem}
.pn{display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin:2rem 0 0}
.pn a{display:block;padding:1rem 1.2rem;border-radius:14px;border:1px solid var(--bd);background:var(--card);color:var(--fg);text-decoration:none;font-weight:600}
.pn a.n{text-align:right;grid-column:2}
.pn small{display:block;color:var(--mut);font-weight:400;font-size:.78rem;text-transform:uppercase;letter-spacing:.1em}
.pn a:hover{border-color:var(--gold)}
.related{padding:2rem 0 4rem}.related h2{text-align:center}

/* cards and posts */
.posts{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:1.25rem}
.post-card{background:var(--card);border:1px solid var(--bd);border-radius:var(--r);overflow:hidden;transition:transform .2s,border-color .2s}
.post-card:hover{transform:translateY(-4px);border-color:var(--gold)}
.post-card a{display:block;color:inherit;text-decoration:none;height:100%}
.post-card img{width:100%;aspect-ratio:16/9;object-fit:cover;display:block;border-radius:0}
.post-card .ph{display:grid;place-items:center;aspect-ratio:16/9;background:linear-gradient(135deg,#241a66,#0d0a28);color:#fcd34d}
.post-card .body{padding:1.1rem 1.2rem 1.3rem}
.post-card h3{font-size:1.15rem;margin:.3rem 0 .5rem}
.post-card p{color:var(--mut);font-size:.92rem;margin:0}
.pagination{text-align:center;margin:2.2rem 0}
.pagination .nav-links{display:flex;gap:.4rem;justify-content:center;flex-wrap:wrap}
.pagination a,.pagination span{padding:.5rem .95rem;border-radius:10px;border:1px solid var(--bd);background:var(--card);color:var(--fg);text-decoration:none}
.pagination .current{background:var(--gold);color:var(--on);border-color:var(--gold)}

/* forms */
.tw-contact{max-width:640px}
.tw-contact label{display:block;font-weight:600;font-size:.9rem}
.tw-contact input,.tw-contact textarea,.sform input{width:100%;margin-top:.35rem;padding:.8rem 1rem;border-radius:12px;border:1px solid var(--bd);background:var(--card);color:var(--fg);font:inherit}
.tw-contact input:focus,.tw-contact textarea:focus,.sform input:focus{outline:2px solid var(--gold);outline-offset:1px}
.hp{position:absolute;left:-9999px}
.tw-ok,.tw-bad{padding:.85rem 1rem;border-radius:12px}
.tw-ok{background:rgba(16,185,129,.15);border:1px solid rgba(16,185,129,.4)}
.tw-bad{background:rgba(239,68,68,.15);border:1px solid rgba(239,68,68,.4)}
.sform{display:flex;gap:.6rem;max-width:520px;margin:1.2rem auto 0}
.sform input{margin:0}
.comments{margin-top:2.5rem}
.comments ol{list-style:none;padding:0}
.comments .comment-body{padding:1rem;border:1px solid var(--bd);border-radius:14px;margin-bottom:.8rem;background:var(--card)}
.comment-form input[type=text],.comment-form input[type=email],.comment-form input[type=url],.comment-form textarea{width:100%;padding:.7rem;border-radius:10px;border:1px solid var(--bd);background:var(--card);color:var(--fg);font:inherit}

/* footer */
.site-footer{margin-top:0;padding:3.2rem 0 1.6rem;background:var(--bg2);border-top:1px solid var(--bd);color:var(--mut);font-size:.94rem}
.fgrid{display:grid;grid-template-columns:1.6fr 1fr 1fr;gap:2rem}
.fbrand>svg{height:44px;width:auto;color:var(--fg);margin-bottom:.8rem}
.site-footer .tw-i{width:16px;height:16px;vertical-align:-3px}
.site-footer h3{font:700 .8rem var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--fg)}
.site-footer ul{list-style:none;margin:0;padding:0}
.site-footer li{margin-bottom:.45rem}
.site-footer a{color:var(--mut);text-decoration:none}.site-footer a:hover{color:var(--gold)}
.disc{margin-top:2rem;padding-top:1.2rem;border-top:1px solid var(--bd);font-size:.82rem}
.copy{margin:0;font-size:.82rem}

/* floating */
.cookie{position:fixed;left:1rem;right:1rem;bottom:1rem;z-index:150;max-width:760px;margin:auto;display:flex;gap:1rem;align-items:center;justify-content:space-between;flex-wrap:wrap;padding:.9rem 1.1rem;border-radius:16px;background:var(--card);border:1px solid var(--bd);box-shadow:0 20px 50px rgba(0,0,0,.45);font-size:.9rem}
.cookie[hidden]{display:none}
.cookie p{margin:0;flex:1 1 280px;color:var(--mut)}
.totop{position:fixed;right:1rem;bottom:1rem;z-index:120;display:grid;place-items:center;width:44px;height:44px;border-radius:50%;border:1px solid var(--bd);background:var(--card);color:var(--gold);cursor:pointer}
.totop[hidden]{display:none}
.cookie:not([hidden])~.totop{bottom:6rem}

/* calculator inside theme: keep the dark panel in both modes */
.calc-wrap .dmx-app{margin-top:0}
.entry-wide .dmx-app{margin:0 auto 2.5rem}
.entry-wide>*:not(.dmx-app){max-width:800px;margin-left:auto;margin-right:auto}

@media(max-width:980px){
	.post-layout{grid-template-columns:1fr}.side{position:static;padding-top:0}.arc-nav{max-height:none}
	.dims,.cols3,.steps{grid-template-columns:1fr 1fr}
	.fgrid{grid-template-columns:1fr 1fr}.fbrand{grid-column:1/-1}
}
@media(max-width:860px){
	.menu-toggle{display:grid}
	.nav{display:none;position:absolute;left:0;right:0;top:100%;background:var(--bg);border-bottom:1px solid var(--bd);padding:.6rem 1rem 1rem}
	.nav.open{display:block}
	.nav ul{flex-direction:column}
	.hide-s{display:none}
}
@media(max-width:640px){
	body{font-size:16px}
	.hero{padding:3rem 0 2rem}.section{padding:3rem 0}
	.dims,.cols3,.steps,.fgrid{grid-template-columns:1fr}
	.strip-in{grid-template-columns:1fr 1fr}
	.arc-head{flex-direction:column;align-items:flex-start}
	.sform{flex-direction:column}
	.pn{grid-template-columns:1fr}.pn a.n{grid-column:auto}
}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important;scroll-behavior:auto!important}}
@media print{.site-header,.site-footer,.cookie,.totop,.progress{display:none!important}body{background:#fff;color:#000}}