/* ============================================================
   Upniche Blog — single-post styling (loads on is_single only)
   Scoped under body.upn-blog so it never touches other pages.
   Theme-agnostic: targets WordPress core block + content classes.
============================================================ */
body.upn-blog{
  --ink:#100D23; --ink2:#171231; --paper:#EFEAF7; --muted:#A199C4;
  --gold:#FFC24B; --violet:#8B7BFF; --teal:#3DDAB4; --faint:rgba(239,234,247,.1);
  --display:"Bricolage Grotesque",sans-serif;
  --body:"Instrument Sans",sans-serif;
  --mono:"Spline Sans Mono",monospace;
  background:var(--ink);color:var(--paper);
  font-family:var(--body);font-size:18px;line-height:1.78;
  -webkit-font-smoothing:antialiased;
}

/* ---- the article shell the plugin injects ---- */
.upn-post{max-width:1080px;margin:0 auto;padding:54px 32px 80px}
.upn-post-head .upn-eyebrow{font-family:var(--mono);font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;color:var(--gold)}
.upn-post-meta{font-family:var(--mono);font-size:.78rem;color:var(--muted);margin-top:10px;display:flex;gap:18px;flex-wrap:wrap}
.upn-post-head h1{font-family:var(--display);font-weight:800;font-size:clamp(2rem,3.8vw,3.1rem);line-height:1.08;letter-spacing:-.015em;margin:14px 0 0;max-width:22ch;color:var(--paper)}
.upn-post-rule{width:120px;height:4px;background:var(--gold);border-radius:3px;margin:22px 0 0}

.upn-post-body{display:grid;grid-template-columns:minmax(0,1fr) 290px;gap:48px;align-items:start;margin-top:36px}
.upn-content{max-width:68ch;min-width:0}

/* typography inside the post */
.upn-content p{margin:0 0 20px}
.upn-content h2{font-family:var(--display);font-weight:800;font-size:1.75rem;letter-spacing:-.01em;margin:46px 0 14px;scroll-margin-top:90px;color:var(--paper)}
.upn-content h3{font-family:var(--display);font-weight:600;font-size:1.22rem;margin:32px 0 10px;color:var(--paper)}
.upn-content h4{font-family:var(--display);font-weight:600;font-size:1.05rem;margin:26px 0 8px}
.upn-content a{color:var(--gold);text-decoration:none;border-bottom:1px solid transparent;transition:border-color .15s}
.upn-content a:hover{border-bottom-color:var(--gold)}
.upn-content strong{color:#fff}
.upn-content ul,.upn-content ol{margin:0 0 22px;padding-left:1.3em}
.upn-content li{margin:9px 0;padding-left:.3em}
.upn-content li::marker{color:var(--gold)}
.upn-content img{border-radius:12px;height:auto}
.upn-content figure{margin:26px 0}
.upn-content figcaption{font-family:var(--mono);font-size:.76rem;color:var(--muted);margin-top:8px;text-align:center}
.upn-content code{background:var(--ink2);border:1px solid var(--faint);border-radius:5px;padding:2px 7px;font-family:var(--mono);font-size:.88em}
.upn-content hr{border:none;border-top:1px solid var(--faint);margin:40px 0}
.upn-content table{width:100%;border-collapse:collapse;margin:24px 0;font-size:.95rem}
.upn-content th,.upn-content td{border:1px solid var(--faint);padding:12px 14px;text-align:left}
.upn-content thead th{font-family:var(--mono);font-size:.74rem;letter-spacing:.05em;text-transform:uppercase;color:var(--muted)}

/* core blocks */
.upn-content .wp-block-quote,
.upn-content blockquote{border-left:4px solid var(--gold);margin:30px 0;padding:6px 0 6px 22px;color:var(--muted)}
.upn-content .wp-block-pullquote{border-left:4px solid var(--gold);border-top:none;border-bottom:none;margin:32px 0;padding:6px 0 6px 24px;text-align:left}
.upn-content .wp-block-pullquote p{font-family:var(--display);font-weight:600;font-size:1.5rem;line-height:1.25;color:var(--paper);margin:0}
.upn-content .wp-block-pullquote cite{font-family:var(--mono);font-size:.78rem;color:var(--muted);font-style:normal;display:block;margin-top:8px}
.upn-content .wp-block-button__link{display:inline-block;padding:.8rem 1.5rem;text-decoration:none}
.upn-content .wp-block-group{border-radius:16px}

/* author line */
.upn-author{font-family:var(--mono);font-size:.82rem;color:var(--muted);border-top:1px solid var(--faint);margin-top:40px;padding-top:22px}

/* ---- sidebar ---- */
.upn-aside{position:sticky;top:90px;display:flex;flex-direction:column;gap:22px}
.upn-toc{border:1px solid var(--faint);border-radius:14px;padding:20px 22px;background:var(--ink2)}
.upn-toc h4{font-family:var(--mono);font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin:0 0 12px}
.upn-toc ul{list-style:none;margin:0;padding:0}
.upn-toc a{display:block;padding:6px 0;font-size:.9rem;color:var(--muted);text-decoration:none;border-bottom:1px solid var(--faint)}
.upn-toc li:last-child a{border-bottom:none}
.upn-toc a:hover,.upn-toc a.active{color:var(--gold)}
.upn-side-cta{border:1px solid rgba(255,194,75,.35);border-radius:14px;padding:22px;
  background:radial-gradient(300px 160px at 50% 0,rgba(255,194,75,.12),transparent),var(--ink2)}
.upn-side-cta b{font-family:var(--display);font-weight:800;font-size:1.1rem;display:block;margin-bottom:8px}
.upn-side-cta p{font-size:.86rem;color:var(--muted);margin-bottom:14px}
.upn-side-cta a{display:block;text-align:center;background:var(--gold);color:#1A1304;font-weight:700;padding:.7rem;border-radius:9px;text-decoration:none;font-size:.9rem}
.upn-side-cta a:hover{filter:brightness(1.06)}

/* comments: inherit the dark theme so they stop looking bolted-on */
body.upn-blog #comments,body.upn-blog .comment-respond{max-width:68ch;margin-left:auto;margin-right:auto}
body.upn-blog #comments{padding:0 32px}
body.upn-blog .comment-respond{padding:24px 32px;border:1px solid var(--faint);border-radius:14px;background:var(--ink2);margin-top:30px}
body.upn-blog h2,body.upn-blog h3{color:var(--paper)}
body.upn-blog textarea,body.upn-blog input[type=text],body.upn-blog input[type=email],body.upn-blog input[type=url]{
  background:rgba(0,0,0,.28);border:1px solid var(--faint);border-radius:8px;color:var(--paper);padding:.7rem .9rem;width:100%}
body.upn-blog .comment-form-cookies-consent{display:flex;gap:8px;align-items:flex-start}
body.upn-blog .form-submit input,body.upn-blog .submit{background:var(--gold);color:#1A1304;border:none;border-radius:9px;padding:.7rem 1.4rem;font-weight:700;cursor:pointer}

@media(max-width:900px){
  .upn-post-body{grid-template-columns:1fr}
  .upn-aside{position:static;order:-1}
  .upn-toc{display:none}
  .upn-content{max-width:none}
}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto}}

/* hide the theme's own post title / default content width since the plugin
   renders its own styled hero + container (prevents a duplicated H1) */
body.upn-blog .entry-header .entry-title,
body.upn-blog .entry-header,
body.upn-blog header.entry-header,
body.upn-blog .page-header .entry-title{display:none}
body.upn-blog .entry-content,
body.upn-blog .site-main,
body.upn-blog main.site-main{max-width:none;margin:0;padding:0}