/*
Theme Name: SureSocial Noir
Theme URI: https://suresocial.agency
Author: SureSocial
Description: The SureSocial site: home page, Case Closed Marketing for law firms, links page, break even ROAS calculator and a designed blog, with structured data, social cards and llms.txt built in. Activate it and the pages are created for you. Pair with the SureSocial Core plugin so the forms save leads.
Version: 3.12.0
Requires at least: 6.0
Requires PHP: 7.4
License: GPL-2.0-or-later
Text Domain: suresocial-noir
*/
/* The blog, its posts and ordinary pages. The designed pages carry their own CSS. Same tokens as the home page. */
:root{--bg:#060805;--panel:#0E120B;--ink:#F2F3EC;--muted:#A3AA99;--faint:#767D6E;--line:rgba(255,255,255,.09);--line2:rgba(255,255,255,.16);
  --accent:#CBFD50;--accent-hi:#E4FF9A;--on-accent:#060805;--display:"Bricolage Grotesque","Inter Tight",system-ui,sans-serif;--body:"Inter",system-ui,-apple-system,"Segoe UI",sans-serif;
  --mono:"JetBrains Mono",ui-monospace,Menlo,monospace;--ease:cubic-bezier(.2,.8,.2,1);--wrap:1240px;--gut:64px;--nav:72px;color-scheme:dark}
@media (max-width:760px){:root{--gut:20px;--nav:64px}}
*{box-sizing:border-box}
html{background-color:var(--bg);scroll-padding-top:calc(var(--nav) + 24px);-webkit-text-size-adjust:100%}
body.ssn-blog{margin:0;background:var(--bg);color:var(--ink);font-family:var(--body);font-size:16px;line-height:1.65;-webkit-font-smoothing:antialiased}
.ssn-blog a{color:inherit}
.ssn-blog :focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:6px}
.ssn-wrap{max-width:var(--wrap);margin:0 auto;padding-inline:var(--gut)}
.ssn-skip{position:absolute;left:-9999px}.ssn-skip:focus{left:16px;top:12px;z-index:99;background:var(--accent);color:var(--on-accent);padding:8px 14px;border-radius:8px}

/* header: one solid colour, no blur, so iPhone Safari paints the status bar to match */
.ssn-head{position:sticky;top:0;z-index:50;background:var(--bg);border-bottom:1px solid var(--line);padding-top:env(safe-area-inset-top,0px)}
.ssn-head .ssn-wrap{display:flex;align-items:center;justify-content:space-between;gap:20px;height:var(--nav)}
.ssn-logo{display:inline-flex;align-items:center;gap:.45em;font-family:var(--display);font-size:21px;font-weight:300;letter-spacing:-.03em;text-decoration:none;white-space:nowrap;color:var(--ink)}
.ssn-logo b{font-weight:600}.ssn-logo i{width:.56em;height:.56em;border-radius:50%;background:var(--accent);box-shadow:0 0 14px rgba(203,253,80,.75)}
.ssn-links{display:flex;gap:30px;list-style:none;margin:0;padding:0}
.ssn-links a{font-size:14px;font-weight:500;color:var(--muted);text-decoration:none;transition:color .25s}
.ssn-links a:hover,.ssn-links a[aria-current]{color:var(--ink)}
.ssn-btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;min-height:44px;padding:0 20px;border-radius:12px;font:600 14.5px var(--body);text-decoration:none;white-space:nowrap;transition:transform .25s var(--ease),box-shadow .25s var(--ease)}
.ssn-btn svg{width:15px;height:15px;transition:transform .25s var(--ease)}
.ssn-btn.primary{background:linear-gradient(180deg,var(--accent-hi),var(--accent));color:var(--on-accent)!important;box-shadow:0 12px 30px -14px rgba(203,253,80,.75)}
.ssn-btn.primary:hover{transform:translateY(-2px)}.ssn-btn:hover svg{transform:translateX(3px)}
.ssn-btn.ghost{border:1px solid var(--line2);color:var(--ink)!important}
.ssn-menu{display:none;position:relative}
.ssn-menu summary{list-style:none;width:44px;height:44px;border:1px solid var(--line2);border-radius:12px;display:grid;place-items:center;cursor:pointer}
.ssn-menu summary::-webkit-details-marker{display:none}
.ssn-menu summary span{display:block;width:18px;height:2px;background:var(--ink);box-shadow:0 6px 0 var(--ink)}
.ssn-menu[open] .ssn-drop{display:grid}
.ssn-drop{display:none;position:absolute;right:0;top:54px;width:min(280px,calc(100vw - 40px));padding:10px;border-radius:16px;background:var(--panel);border:1px solid var(--line2);box-shadow:0 30px 60px -20px #000;gap:2px}
.ssn-drop a{display:block;padding:12px 14px;border-radius:10px;text-decoration:none;font-size:15px}
.ssn-drop a:hover{background:rgba(255,255,255,.05)}
@media (max-width:980px){.ssn-links{display:none}.ssn-menu{display:block}}
@media (max-width:420px){.ssn-head .nf{display:none}.ssn-head .ssn-btn{padding:0 13px;font-size:13.5px;gap:6px}.ssn-logo{font-size:19px}}
.ssn-bar{position:fixed;top:0;left:0;height:3px;width:100%;transform-origin:left;transform:scaleX(var(--p,0));background:linear-gradient(90deg,var(--accent),var(--accent-hi));z-index:60;pointer-events:none}

/* type helpers */
.ssn-eb{display:inline-flex;align-items:center;gap:10px;font-size:12px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--accent)}
.ssn-eb::before{content:"";width:18px;height:1px;background:var(--accent)}
.ssn-chip{display:inline-flex;align-items:center;height:26px;padding:0 11px;border-radius:999px;font-size:11.5px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--accent);border:1px solid rgba(203,253,80,.35);text-decoration:none;white-space:nowrap}
.ssn-chip.org{color:#9FE3FF;border-color:rgba(120,210,255,.35)}
.ssn-meta{display:flex;flex-wrap:wrap;align-items:center;gap:6px 16px;font-size:14px;color:var(--muted)}
.ssn-meta b{color:var(--ink);font-weight:500}

/* blog index */
.ssn-hero{padding:clamp(48px,8vw,96px) 0 clamp(28px,4vw,44px)}
.ssn-hero h1{font-family:var(--display);font-weight:300;font-size:clamp(40px,6.4vw,84px);line-height:1.02;letter-spacing:-.04em;margin:14px 0 16px;text-wrap:balance}
.ssn-hero h1 span{display:block;color:var(--accent)}
.ssn-hero p{max-width:60ch;color:var(--muted);font-size:clamp(16px,1.6vw,18px);margin:0}
.ssn-tabs{display:flex;flex-wrap:wrap;gap:8px;margin:28px 0 0}
.ssn-tabs a{display:inline-flex;align-items:center;min-height:40px;padding:0 16px;border-radius:999px;border:1px solid var(--line2);text-decoration:none;font-size:14px;font-weight:500;color:var(--muted);white-space:nowrap}
.ssn-tabs a[aria-current]{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
.ssn-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;padding-bottom:clamp(64px,8vw,110px)}
.ssn-card{position:relative;display:flex;flex-direction:column;border-radius:18px;overflow:hidden;background:linear-gradient(180deg,rgba(255,255,255,.04),rgba(255,255,255,.01));box-shadow:inset 0 0 0 1px var(--line);transition:transform .35s var(--ease),box-shadow .35s var(--ease)}
.ssn-card:hover{transform:translateY(-4px);box-shadow:inset 0 0 0 1px rgba(203,253,80,.35),0 24px 50px -28px rgba(203,253,80,.4)}
.ssn-card img{display:block;width:100%;height:auto;aspect-ratio:1200/630;object-fit:cover;background:#0b0e09}
.ssn-card .in{display:flex;flex-direction:column;gap:10px;padding:20px 22px 22px;flex:1}
.ssn-card h2{font-family:var(--display);font-weight:400;font-size:21px;line-height:1.2;letter-spacing:-.02em;margin:0}
.ssn-card h2 a{text-decoration:none}.ssn-card h2 a::after{content:"";position:absolute;inset:0}
.ssn-card p{margin:0;color:var(--muted);font-size:14.5px;line-height:1.55}
.ssn-card .ssn-meta{margin-top:auto;font-size:13px;position:relative}
.ssn-card .ssn-chip{position:relative;z-index:1;align-self:flex-start}
.ssn-card.lead{grid-column:1/-1;display:grid;grid-template-columns:1.25fr 1fr;align-items:stretch}
.ssn-card.lead img{height:auto;align-self:center}
.ssn-card.lead .in{padding:clamp(24px,3vw,40px);justify-content:center;gap:14px}
.ssn-card.lead h2{font-size:clamp(26px,3vw,38px);font-weight:300;letter-spacing:-.03em}
.ssn-card.lead p{font-size:16px}
@media (max-width:980px){.ssn-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.ssn-card.lead{grid-template-columns:1fr}}
@media (max-width:640px){.ssn-grid{grid-template-columns:minmax(0,1fr);gap:16px}}
.ssn-pages{display:flex;justify-content:center;gap:8px;padding-bottom:80px}
.ssn-pages .page-numbers{display:inline-grid;place-items:center;min-width:42px;height:42px;padding:0 12px;border-radius:12px;border:1px solid var(--line2);text-decoration:none;color:var(--muted)}
.ssn-pages .current{background:var(--accent);color:var(--on-accent);border-color:var(--accent)}

/* single post */
.ssn-crumbs{display:flex;flex-wrap:wrap;gap:8px;font-size:13px;color:var(--faint);padding-top:clamp(28px,4vw,44px)}
.ssn-crumbs a{text-decoration:none;color:var(--muted)}.ssn-crumbs a:hover{color:var(--ink)}
.ssn-art-head{max-width:880px;padding:22px 0 28px}
.ssn-art-head h1{font-family:var(--display);font-weight:300;font-size:clamp(36px,5.4vw,68px);line-height:1.04;letter-spacing:-.04em;margin:16px 0 18px;text-wrap:balance}
.ssn-art-head .dek{font-size:clamp(17px,1.8vw,20px);color:var(--muted);max-width:62ch;margin:0 0 20px}
.ssn-cover{margin:0 0 clamp(32px,4vw,48px)}
.ssn-cover img{display:block;width:100%;height:auto;aspect-ratio:1200/630;border-radius:20px;box-shadow:inset 0 0 0 1px var(--line)}
.ssn-layout{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:clamp(32px,5vw,72px);align-items:start;padding-bottom:clamp(56px,7vw,96px)}
.ssn-side{position:sticky;top:calc(var(--nav) + 28px);display:grid;gap:18px}
.ssn-toc{border-radius:16px;padding:20px 20px 16px;background:rgba(255,255,255,.02);box-shadow:inset 0 0 0 1px var(--line)}
.ssn-toc b{display:block;font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--faint);margin-bottom:10px}
.ssn-toc ol{list-style:none;margin:0;padding:0;display:grid;gap:2px;counter-reset:t}
.ssn-toc a{display:block;padding:7px 10px 7px 12px;border-left:2px solid var(--line);font-size:14px;line-height:1.35;color:var(--muted);text-decoration:none;transition:color .2s,border-color .2s}
.ssn-toc a:hover{color:var(--ink)}.ssn-toc a.on{color:var(--ink);border-color:var(--accent)}
.ssn-cta{border-radius:18px;padding:22px;background:radial-gradient(120% 90% at 0% 0%,rgba(203,253,80,.12),transparent 60%),rgba(255,255,255,.02);box-shadow:inset 0 0 0 1px rgba(203,253,80,.3)}
.ssn-cta h3{font-family:var(--display);font-weight:400;font-size:21px;line-height:1.2;letter-spacing:-.02em;margin:0 0 8px}
.ssn-cta p{margin:0 0 16px;color:var(--muted);font-size:14.5px}
.ssn-cta .ssn-btn{width:100%}
details.ssn-toc-m{display:none;margin-bottom:28px;border-radius:14px;box-shadow:inset 0 0 0 1px var(--line);background:rgba(255,255,255,.02)}
details.ssn-toc-m summary{cursor:pointer;padding:14px 18px;font-weight:600;font-size:15px}
details.ssn-toc-m .ssn-toc{box-shadow:none;background:none;padding-top:0}
@media (max-width:1060px){.ssn-layout{grid-template-columns:minmax(0,1fr)}.ssn-side{display:none}details.ssn-toc-m{display:block}}

/* the article body */
.ssn-content{max-width:720px;font-size:17.5px;line-height:1.75;color:#DCDFD3}
.ssn-content>*{margin:0 0 1.15em}
.ssn-content h2{font-family:var(--display);font-weight:400;font-size:clamp(26px,3vw,34px);line-height:1.15;letter-spacing:-.025em;color:var(--ink);margin:2.1em 0 .6em;scroll-margin-top:calc(var(--nav) + 24px)}
.ssn-content h3{font-family:var(--display);font-weight:500;font-size:20px;line-height:1.3;letter-spacing:-.01em;color:var(--ink);margin:1.7em 0 .5em}
.ssn-content a{color:var(--ink);text-decoration:underline;text-decoration-color:rgba(203,253,80,.6);text-underline-offset:3px;text-decoration-thickness:1.5px}
.ssn-content a:hover{color:var(--accent)}
.ssn-content strong{color:var(--ink);font-weight:600}
.ssn-content ul,.ssn-content ol{padding-left:1.3em}
.ssn-content li{margin:.35em 0}
.ssn-content li::marker{color:var(--accent)}
.ssn-content code{font-family:var(--mono);font-size:.86em;background:rgba(255,255,255,.06);padding:.15em .4em;border-radius:6px}
.ssn-content img{max-width:100%;height:auto;border-radius:14px}
.ssn-content blockquote{margin-left:0;padding:4px 0 4px 20px;border-left:3px solid var(--accent);color:var(--ink);font-size:1.1em}
.ssn-content figure.wp-block-table{margin:1.6em 0;overflow-x:auto;border-radius:14px;box-shadow:inset 0 0 0 1px var(--line)}
.ssn-content table{width:100%;border-collapse:collapse;font-size:15px;line-height:1.5}
.ssn-content th{font-size:12.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);font-weight:600;text-align:left;background:rgba(255,255,255,.03)}
.ssn-content th,.ssn-content td{padding:12px 16px;border-bottom:1px solid var(--line);vertical-align:top}
.ssn-content tr:last-child td{border-bottom:0}
.ssn-content .ssn-tk{border-radius:18px;padding:24px 26px 18px;background:radial-gradient(120% 90% at 0% 0%,rgba(203,253,80,.10),transparent 60%),rgba(255,255,255,.02);box-shadow:inset 0 0 0 1px rgba(203,253,80,.28);margin-bottom:2em}
.ssn-content .ssn-tk h2{font-family:var(--body);font-size:12.5px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--accent);margin:0 0 12px}
.ssn-content .ssn-tk ul{list-style:none;padding:0;margin:0}
.ssn-content .ssn-tk li{position:relative;padding-left:22px;color:var(--ink);font-size:16.5px}
.ssn-content .ssn-tk li::before{content:"";position:absolute;left:0;top:.62em;width:8px;height:8px;border-radius:50%;background:var(--accent);box-shadow:0 0 10px rgba(203,253,80,.7)}
.ssn-content .ssn-src{font-size:14px;color:var(--muted)}
.ssn-content h2.ssn-src-h{font-size:20px}
@media (max-width:640px){.ssn-content{font-size:16.5px}.ssn-content th,.ssn-content td{padding:10px 12px;font-size:14px}}

/* end of post */
.ssn-band{border-radius:22px;padding:clamp(28px,4vw,48px);margin:8px 0 clamp(40px,5vw,64px);display:grid;grid-template-columns:1fr auto;gap:24px;align-items:center;background:radial-gradient(90% 120% at 100% 0%,rgba(203,253,80,.14),transparent 60%),var(--panel);box-shadow:inset 0 0 0 1px rgba(203,253,80,.25)}
.ssn-band h2{font-family:var(--display);font-weight:300;font-size:clamp(28px,3.4vw,44px);line-height:1.05;letter-spacing:-.035em;margin:0 0 10px}
.ssn-band h2 span{color:var(--accent)}
.ssn-band p{margin:0;color:var(--muted);max-width:56ch}
@media (max-width:760px){.ssn-band{grid-template-columns:1fr}.ssn-band .ssn-btn{width:100%}}
.ssn-author{display:flex;gap:16px;align-items:center;padding:22px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);margin-bottom:clamp(40px,5vw,64px);max-width:720px}
.ssn-author .av{flex:none;width:52px;height:52px;border-radius:50%;display:grid;place-items:center;background:radial-gradient(circle at 35% 30%,#F3FFD0,var(--accent) 55%,#9CC23D);color:var(--on-accent);font-family:var(--display);font-weight:600;font-size:18px}
.ssn-author p{margin:0;font-size:14.5px;color:var(--muted)}.ssn-author b{color:var(--ink);font-weight:600}
.ssn-rel h2{font-family:var(--display);font-weight:300;font-size:clamp(26px,3vw,36px);letter-spacing:-.03em;margin:0 0 20px}

/* footer */
.ssn-foot{border-top:1px solid var(--line);padding:48px 0 calc(32px + env(safe-area-inset-bottom,0px))}
.ssn-foot .ssn-wrap{display:grid;grid-template-columns:1.4fr repeat(3,1fr);gap:28px}
.ssn-foot p{color:var(--muted);font-size:14px;max-width:36ch;margin:12px 0 0}
.ssn-foot h4{font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--faint);font-weight:600;margin:6px 0 12px}
.ssn-foot ul{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.ssn-foot a{text-decoration:none;color:var(--muted);font-size:14px}.ssn-foot a:hover{color:var(--ink)}
.ssn-copy{grid-column:1/-1;display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px;padding-top:24px;margin-top:8px;border-top:1px solid var(--line);font-size:13px;color:var(--faint)}
@media (max-width:760px){.ssn-foot .ssn-wrap{grid-template-columns:1fr 1fr}.ssn-foot .ssn-wrap>div:first-child{grid-column:1/-1}}

/* ordinary pages */
.ssn-page{max-width:760px;padding:clamp(40px,7vw,90px) 0}
.ssn-page h1{font-family:var(--display);font-weight:300;font-size:clamp(36px,5vw,60px);letter-spacing:-.04em;line-height:1.05;margin:0 0 24px}

.ssn-rv{opacity:0;transform:translateY(14px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
.ssn-rv.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.ssn-rv{opacity:1;transform:none;transition:none}.ssn-card,.ssn-btn{transition:none}.ssn-bar{display:none}}