/* Jaypee Content Suite — frontend styles
   Brand tokens: red #CC0000 / dark #990000 / black #0A0A0A / WhatsApp #25D366
   Fonts: Bebas Neue (display), Barlow (body), Barlow Condensed (labels) */

:root{
  --jcs-red:#CC0000; --jcs-red-dark:#990000; --jcs-black:#0A0A0A;
  --jcs-ink:#15171a; --jcs-muted:#5b6168; --jcs-line:#e6e8ec;
  --jcs-wa:#25D366; --jcs-wa-dark:#128C7E;
  --jcs-font:'Barlow',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --jcs-cond:'Barlow Condensed','Barlow',sans-serif;
  --jcs-display:'Bebas Neue','Barlow Condensed',sans-serif;
}

/* ---- Emoji-replacement icon ---- */
.jcs-i{display:inline-block;width:1em;height:1em;vertical-align:-0.125em;
  fill:none;line-height:1;flex:none}

/* ---- Video section ---- */
.jcs-shorts{padding:clamp(36px,6vw,72px) 16px;background:#fff;color:var(--jcs-ink)}
.jcs-shorts-inner{max-width:1080px;margin:0 auto;text-align:center}
.jcs-shorts-title{font-family:var(--jcs-display);letter-spacing:.5px;
  font-size:clamp(28px,5vw,48px);line-height:1.05;margin:0 0 8px;color:var(--jcs-black);text-transform:uppercase}
.jcs-shorts-sub{font-family:var(--jcs-font);font-size:clamp(15px,2.2vw,18px);
  color:var(--jcs-muted);max-width:680px;margin:0 auto 28px}
.jcs-shorts-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(12px,2.5vw,22px);max-width:880px;margin:0 auto}
@media(max-width:640px){.jcs-shorts-grid{grid-template-columns:1fr;max-width:340px}}
.jcs-short{position:relative;aspect-ratio:9/16;border-radius:14px;overflow:hidden;
  cursor:pointer;background:#000;box-shadow:0 10px 30px rgba(0,0,0,.18);
  outline:none;transition:transform .18s,box-shadow .18s}
.jcs-short:hover,.jcs-short:focus-visible{transform:translateY(-4px);
  box-shadow:0 16px 40px rgba(204,0,0,.22)}
.jcs-short-thumb{width:100%;height:100%;object-fit:cover;display:block}
.jcs-short-play{position:absolute;inset:0;margin:auto;width:64px;height:64px;
  display:flex;align-items:center;justify-content:center;border:none;
  background:rgba(204,0,0,.92);border-radius:50%;box-shadow:0 6px 20px rgba(0,0,0,.4);
  transition:transform .18s,background .18s}
.jcs-short:hover .jcs-short-play{transform:scale(1.08);background:var(--jcs-red)}
.jcs-short iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.jcs-shorts-cta{margin-top:clamp(22px,4vw,34px)}

/* ---- WhatsApp button ---- */
.jcs-btn-wa{display:inline-flex;align-items:center;gap:10px;
  font-family:var(--jcs-cond);font-weight:700;font-size:18px;letter-spacing:.5px;
  text-transform:uppercase;text-decoration:none;color:#fff;
  background:linear-gradient(135deg,var(--jcs-wa),var(--jcs-wa-dark));
  padding:14px 26px;border-radius:8px;box-shadow:0 6px 18px rgba(37,211,102,.32);
  transition:transform .15s,box-shadow .15s}
.jcs-btn-wa:hover{transform:translateY(-2px);color:#fff;
  box-shadow:0 10px 26px rgba(37,211,102,.45)}
.jcs-btn-wa svg{flex:none}

/* ---- Red CTA button ---- */
.jcs-btn-red{display:inline-flex;align-items:center;gap:10px;
  font-family:var(--jcs-cond);font-weight:700;font-size:18px;letter-spacing:.5px;
  text-transform:uppercase;text-decoration:none;color:#fff;background:var(--jcs-red);
  padding:14px 26px;border-radius:8px;box-shadow:0 6px 18px rgba(204,0,0,.28);
  transition:transform .15s,box-shadow .15s,background .15s;border:0;cursor:pointer}
.jcs-btn-red:hover{transform:translateY(-2px);background:var(--jcs-red-dark);color:#fff}

/* ---- Blog post enhancements ---- */
.jcs-post{font-family:var(--jcs-font)}
.jcs-quick{border:1px solid var(--jcs-line);border-left:4px solid var(--jcs-red);
  background:#fafbfc;border-radius:10px;padding:18px 20px;margin:0 0 26px}
.jcs-quick h2,.jcs-quick .jcs-quick-h{font-family:var(--jcs-cond);font-weight:700;
  text-transform:uppercase;letter-spacing:1px;font-size:15px;color:var(--jcs-red);
  margin:0 0 8px;display:flex;align-items:center;gap:8px}
.jcs-quick p{margin:0;font-size:16.5px;line-height:1.6;color:var(--jcs-ink)}
.jcs-faq{margin:30px 0}
.jcs-faq h2{font-family:var(--jcs-display);font-size:clamp(24px,4vw,34px);
  text-transform:uppercase;color:var(--jcs-black);margin:0 0 14px}
.jcs-faq details{border-bottom:1px solid var(--jcs-line);padding:14px 0}
.jcs-faq summary{font-family:var(--jcs-cond);font-weight:700;font-size:19px;
  cursor:pointer;color:var(--jcs-ink);list-style:none}
.jcs-faq summary::-webkit-details-marker{display:none}
.jcs-faq summary::after{content:'+';float:right;color:var(--jcs-red);font-weight:700}
.jcs-faq details[open] summary::after{content:'\2212'}
.jcs-faq details p{margin:10px 0 2px;color:var(--jcs-muted);line-height:1.65}
.jcs-tablewrap{overflow-x:auto;margin:22px 0}
.jcs-post table{width:100%;border-collapse:collapse;font-size:15.5px;min-width:420px}
.jcs-post th,.jcs-post td{border:1px solid var(--jcs-line);padding:10px 12px;text-align:left}
.jcs-post th{background:var(--jcs-black);color:#fff;font-family:var(--jcs-cond);
  text-transform:uppercase;letter-spacing:.5px}
.jcs-post tr:nth-child(even) td{background:#fafbfc}

/* ---- In-post CTA blocks ---- */
.jcs-cta-band{background:linear-gradient(135deg,#0A0A0A,#1a1a1a);color:#fff;
  border-radius:14px;padding:clamp(22px,4vw,34px);margin:34px 0;text-align:center}
.jcs-cta-band h3{font-family:var(--jcs-display);font-size:clamp(24px,4vw,36px);
  text-transform:uppercase;margin:0 0 6px}
.jcs-cta-band p{color:#cfd2d6;margin:0 0 18px;font-size:16px}
.jcs-cta-actions{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}

/* ---- In-post lead/quote form ---- */
.jcs-lead{border:1px solid var(--jcs-line);border-radius:14px;padding:clamp(20px,4vw,30px);
  margin:34px 0;background:#fff}
.jcs-lead h3{font-family:var(--jcs-display);font-size:clamp(22px,4vw,32px);
  text-transform:uppercase;color:var(--jcs-black);margin:0 0 4px}
.jcs-lead .jcs-lead-sub{color:var(--jcs-muted);margin:0 0 18px;font-size:15px}
.jcs-grid2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media(max-width:560px){.jcs-grid2{grid-template-columns:1fr}}
.jcs-field{display:flex;flex-direction:column;gap:6px}
.jcs-field.full{grid-column:1/-1}
.jcs-field label{font-family:var(--jcs-cond);font-weight:700;font-size:12.5px;
  letter-spacing:1.5px;text-transform:uppercase;color:var(--jcs-muted)}
.jcs-field input,.jcs-field select,.jcs-field textarea{padding:11px 13px;
  border:1px solid var(--jcs-line);border-radius:7px;font-size:15.5px;
  font-family:var(--jcs-font);color:var(--jcs-ink);background:#fff;outline:none;
  transition:border-color .15s,box-shadow .15s}
.jcs-field input:focus,.jcs-field select:focus,.jcs-field textarea:focus{
  border-color:var(--jcs-wa);box-shadow:0 0 0 3px rgba(37,211,102,.12)}
.jcs-field textarea{min-height:88px;resize:vertical}
.jcs-lead .jcs-lead-submit{margin-top:16px;display:flex;flex-wrap:wrap;
  gap:12px;align-items:center}
.jcs-lead .jcs-note{font-size:13px;color:var(--jcs-muted);margin:0}
.jcs-lead-ok{display:none;margin-top:14px;padding:14px 16px;border-radius:8px;
  background:#ecfdf5;border:1px solid #a7f3d0;color:#065f46;font-weight:600}
.jcs-lead-ok.show{display:block}

/* ---- Related links ---- */
.jcs-related{margin:34px 0}
.jcs-related h3{font-family:var(--jcs-display);font-size:clamp(22px,4vw,30px);
  text-transform:uppercase;color:var(--jcs-black);margin:0 0 14px}
.jcs-related ul{list-style:none;padding:0;margin:0;display:grid;
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:10px}
.jcs-related a{display:flex;align-items:center;gap:8px;text-decoration:none;
  border:1px solid var(--jcs-line);border-radius:8px;padding:12px 14px;
  color:var(--jcs-ink);font-weight:600;transition:border-color .15s,transform .15s}
.jcs-related a:hover{border-color:var(--jcs-red);transform:translateY(-2px);color:var(--jcs-red)}
.jcs-related a .jcs-i{color:var(--jcs-red)}