/* =========================================================
   JellyFil — content pages (legal + blog)
   Depends on the same design tokens as styles.css
   ========================================================= */

/* Simplified header for content pages */
.content-header{
  position:sticky;top:0;z-index:1000;
  background:rgba(11,13,16,.92);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line);
}
.content-header .nav{display:flex;align-items:center;justify-content:space-between;gap:16px;padding-block:14px}
.content-header .nav-simple{display:flex;gap:22px;align-items:center}
.content-header .nav-simple a{font-family:'Montserrat',sans-serif;font-weight:600;font-size:.92rem;color:var(--muted);transition:color .2s}
.content-header .nav-simple a:hover{color:var(--gold)}
@media(max-width:640px){.content-header .nav-simple{display:none}}

/* Page hero band */
.page-hero{
  padding:clamp(40px,7vw,72px) 0 clamp(26px,4vw,40px);text-align:center;position:relative;overflow:hidden;
  background:radial-gradient(60% 100% at 50% 0%,rgba(255,122,24,.16),transparent 70%),linear-gradient(180deg,#0e1117,#0B0D10);
  border-bottom:1px solid var(--line);
}
.page-hero .eyebrow{margin-bottom:16px}
.page-hero h1{font-size:clamp(1.9rem,5vw,3rem);max-width:900px;margin-inline:auto}
.page-hero p{color:var(--muted);margin-top:14px;max-width:640px;margin-inline:auto}
.breadcrumb{font-size:.82rem;color:var(--faint);margin-bottom:18px}
.breadcrumb a{color:var(--muted)}
.breadcrumb a:hover{color:var(--gold)}

/* Article body */
.article{max-width:820px;margin:0 auto;padding:clamp(36px,6vw,60px) 20px}
.article h2{font-size:clamp(1.4rem,3.4vw,1.9rem);margin:38px 0 14px;padding-top:6px}
.article h3{font-size:clamp(1.12rem,2.6vw,1.35rem);margin:26px 0 10px;color:var(--gold-soft)}
.article p{color:var(--text);margin-bottom:16px;font-size:1.02rem}
.article ul,.article ol{margin:0 0 18px 4px;color:var(--text)}
.article ul li,.article ol li{position:relative;padding-left:26px;margin-bottom:10px}
.article ul li::before{content:"✔";position:absolute;left:0;top:0;color:var(--pulse);font-weight:800}
.article ol{counter-reset:oi;list-style:none}
.article ol li{counter-increment:oi}
.article ol li::before{content:counter(oi);position:absolute;left:0;top:1px;width:19px;height:19px;background:var(--grad);color:#1a0f00;border-radius:6px;font-size:.72rem;font-weight:800;display:grid;place-items:center;font-family:'Montserrat',sans-serif}
.article strong{color:var(--white)}
.article a{color:var(--gold);text-decoration:underline;text-underline-offset:2px}
.article a:hover{color:var(--gold-soft)}
.article blockquote{border-left:3px solid var(--ember);background:var(--grad-soft);padding:14px 20px;border-radius:0 12px 12px 0;margin:18px 0;color:var(--muted);font-style:italic}
.lead{font-size:1.12rem!important;color:var(--muted)!important}
.meta-row{display:flex;flex-wrap:wrap;gap:8px 16px;justify-content:center;color:var(--faint);font-size:.84rem;margin-top:14px}
.meta-row span{display:inline-flex;align-items:center;gap:6px}

/* Inline CTA box */
.cta-box{
  background:linear-gradient(180deg,var(--slate-900),var(--carbon));
  border:1.5px solid transparent;background-clip:padding-box;position:relative;
  border-radius:var(--radius-lg);padding:30px 26px;text-align:center;margin:34px 0;
}
.cta-box::before{content:"";position:absolute;inset:0;border-radius:var(--radius-lg);padding:1.5px;background:var(--grad);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none}
.cta-box h3{color:var(--white);font-size:1.35rem;margin-bottom:8px}
.cta-box p{color:var(--muted);margin-bottom:18px}

/* Related links */
.related{margin-top:44px;border-top:1px solid var(--line);padding-top:28px}
.related h3{font-family:'Montserrat',sans-serif;font-size:.82rem;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin-bottom:16px}
.related-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}
.related-grid a{display:block;background:linear-gradient(180deg,var(--slate-900),var(--carbon));border:1px solid var(--line);border-radius:14px;padding:16px 18px;transition:transform .3s var(--ease),border-color .3s}
.related-grid a:hover{transform:translateY(-3px);border-color:rgba(255,194,75,.35)}
.related-grid strong{display:block;color:var(--white);font-family:'Montserrat',sans-serif;font-size:.98rem;margin-bottom:4px}
.related-grid span{color:var(--faint);font-size:.82rem}
@media(max-width:600px){.related-grid{grid-template-columns:1fr}}

/* Blog index */
.blog-toolbar{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-bottom:30px}
.chip{font-family:'Montserrat',sans-serif;font-weight:600;font-size:.84rem;color:var(--muted);background:rgba(255,255,255,.04);border:1px solid var(--line);padding:8px 18px;border-radius:999px}
.chip.on{background:var(--grad);color:#1a0f00;border-color:transparent}
.post-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;max-width:1180px;margin:0 auto}
.post-card{display:flex;flex-direction:column;background:linear-gradient(180deg,var(--slate-900),var(--carbon));border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;transition:transform .35s var(--ease),box-shadow .35s,border-color .3s}
.post-card:hover{transform:translateY(-6px);border-color:rgba(255,194,75,.35);box-shadow:var(--shadow-ember)}
.post-thumb{aspect-ratio:16/10;background:var(--grad-soft);display:grid;place-items:center;position:relative;overflow:hidden;border-bottom:1px solid var(--line)}
.post-thumb img{width:64%;filter:drop-shadow(0 14px 22px rgba(0,0,0,.5))}
.post-cat{position:absolute;top:12px;left:12px;font-family:'Montserrat',sans-serif;font-weight:700;font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;padding:5px 12px;border-radius:999px;background:rgba(11,13,16,.8);color:var(--gold);border:1px solid rgba(255,194,75,.3)}
.post-body{padding:22px;display:flex;flex-direction:column;flex:1}
.post-body h2{font-size:1.16rem;margin-bottom:10px;line-height:1.25}
.post-body h2 a:hover{color:var(--gold-soft)}
.post-body p{color:var(--muted);font-size:.9rem;flex:1;margin-bottom:16px}
.post-more{font-family:'Montserrat',sans-serif;font-weight:700;font-size:.86rem;color:var(--gold)}
@media(max-width:960px){.post-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:620px){.post-grid{grid-template-columns:1fr}}