/* --- LaizyDoc Blog Theme --- */
:root{
  --bg:#ffffff;               /* page bg */
  --text:#0f1222;             /* primary text */
  --muted:#6b7280;            /* secondary text */
  --border:#e8e9f1;           /* card borders */
  --card:#ffffff;             /* card bg */
  --shadow: 0 6px 24px rgba(17, 12, 46, .06);

  /* brand gradient (purple -> pink) */
  --g1:#7C5CFF;
  --g2:#FF3CAC;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--bg);
  color:var(--text);
  font:16px/1.65 Inter, ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
a{color:var(--g1); text-decoration:none}
a:hover{opacity:.9}

/* Layout */
.container{max-width:1100px;margin:56px auto;padding:0 20px}

/* Header */
.page-lead{color:var(--muted); margin:6px 0 26px}
.badge{
  display:inline-flex; align-items:center; gap:8px;
  font-weight:600; font-size:12px; color:#fff;
  background:linear-gradient(135deg,var(--g1),var(--g2));
  padding:6px 10px; border-radius:999px;
}
.badge-dot{width:6px;height:6px;border-radius:50%;background:#fff;opacity:.9}

/* Grid cards */
.grid{display:grid;gap:22px; grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width:1000px){.grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:640px){.grid{grid-template-columns:1fr}}

.card{
  background:var(--card); border:1px solid var(--border);
  border-radius:20px; overflow:hidden; box-shadow:var(--shadow);
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.card:hover{ transform:translateY(-2px); box-shadow:0 10px 28px rgba(17, 12, 46, .10); border-color:#dfe2f2 }
.card-img{width:100%; aspect-ratio:16/9; object-fit:cover; background:#f4f5fb}
.card-body{padding:14px 14px 18px}
.card-title{font-size:18px; line-height:1.3; margin:6px 0 6px; font-weight:700}
.card-meta{font-size:12px; color:var(--muted)}
.card-excerpt{font-size:14px; color:#4b5563; margin-top:6px}
.card-image {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;   /* keeps cards consistent */
  overflow: hidden;
}

.card-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;      /* crops tall images nicely */
  display: block;
}

/* Post page */
.back{color:var(--muted); font-size:14px}
.post-hero{width:100%; border-radius:24px; border:1px solid var(--border); margin:10px 0 18px; object-fit:cover}
.post-title{font-size:36px; line-height:1.2; margin:10px 0 8px; font-weight:800}
.post-meta{color:var(--muted); font-size:14px; margin-bottom:18px}
.post article{font-size:17px}
.post article h2{font-size:22px; margin-top:28px}
.post article img{max-width:100%; border-radius:16px; border:1px solid var(--border)}
.post article blockquote{
  margin:18px 0; padding:12px 16px; border-left:4px solid var(--g1);
  background:linear-gradient(135deg,#fafaff,#fff); color:#374151; border-radius:12px;
}
hr{border:none;border-top:1px solid var(--border); margin:30px 0}
.cta{
  display:inline-block; margin-top:8px; padding:10px 14px; border-radius:999px;
  color:#fff; font-weight:600; background:linear-gradient(135deg,var(--g1),var(--g2));
}

/* Hide the anchor link until hover */
.heading-anchor {
  visibility: hidden;
  margin-left: 0.4em;
  text-decoration: none;
  font-size: 0.8em;
}

h1:hover .heading-anchor,
h2:hover .heading-anchor,
h3:hover .heading-anchor,
h4:hover .heading-anchor {
  visibility: visible;
}

/* Style blog post tables */
.blog-content table {
  width: 100%;
  border-collapse: collapse;
  margin: 1.5em 0;
  font-size: 0.95rem;
}

.blog-content th,
.blog-content td {
  border: 1px solid #ddd;
  padding: 8px 12px;
  text-align: left;
}

.blog-content th {
  background: #f8f8fa;
  font-weight: 600;
  color: var(--ld-dark);
}

/* ---------- CTA button (used for “Get the PRD Checklist”) ---------- */
.ld-cta{
  display:inline-flex; align-items:center; gap:8px;
  padding:10px 16px; border-radius:999px; font-weight:700;
  color:#fff; text-decoration:none; cursor:pointer; border:0;
  background:linear-gradient(90deg,var(--ld-grad1),var(--ld-grad2));
  box-shadow:0 6px 18px rgba(107,0,255,.16);
}
.ld-cta:hover{ transform:translateY(-1px); box-shadow:0 10px 22px rgba(107,0,255,.22); }

/* ---------- Modal shell ---------- */
.ld-modal{
  position:fixed; inset:0; z-index:1000; display:none;
}
.ld-modal[aria-hidden="false"]{ display:block; }

.ld-modal__overlay{
  position:absolute; inset:0; background:rgba(18,24,38,.55);
  backdrop-filter: blur(6px);
}

.ld-modal__dialog{
  position:relative; max-width:520px; width:92%;
  margin:8vh auto; background:var(--ld-bg); border-radius:16px;
  box-shadow:0 24px 64px rgba(18,24,38,.22); overflow:hidden;
  border:1px solid #eef0f3;
}
.ld-modal__header{
  padding:18px 20px; border-bottom:1px solid #eef0f3;
  display:flex; align-items:center; justify-content:space-between;
}
.ld-modal__title{
  margin:0; font-size:18px; font-weight:700; color:var(--ld-dark);
}
.ld-modal__close{
  appearance:none; border:0; background:transparent; font-size:22px;
  line-height:1; cursor:pointer; color:var(--ld-muted);
}
.ld-modal__body{ padding:16px 20px 22px; }

/* ---------- Loops form (newsletter/lead capture) ---------- */
.ld-newsletter .newsletter-form{
  display:flex; flex-wrap:wrap; gap:10px; align-items:center;
}
.ld-newsletter .newsletter-form-input{
  flex:1 1 260px; min-width:200px;
  padding:10px 12px; border:1px solid #dfe3e8; border-radius:10px;
  background:#fff; color:var(--ld-dark);
}
.ld-newsletter .newsletter-form-input:focus{
  outline:none; border-color:var(--ld-primary);
  box-shadow:0 0 0 3px rgba(107,0,255,.15);
}
.ld-newsletter .newsletter-form-button,
.ld-newsletter .newsletter-loading-button{
  background:linear-gradient(90deg,var(--ld-grad1),var(--ld-grad2));
  color:#fff; border:0; border-radius:999px; padding:12px 16px;
  font-weight:700; cursor:pointer; display:inline-flex; align-items:center;
}
.ld-newsletter .newsletter-loading-button{ display:none; }

.ld-newsletter .newsletter-success,
.ld-newsletter .newsletter-error{
  margin-top:10px; display:none; align-items:center; justify-content:center; width:100%;
  padding:10px 12px; border-radius:10px; background:#f8fafc;
}
.ld-newsletter .newsletter-success-message{ color:var(--ld-dark); }
.ld-newsletter .newsletter-error-message{ color:#b91c1c; }

.ld-newsletter .newsletter-back-button{
  color:var(--ld-muted); background:transparent; border:none; cursor:pointer;
  margin:10px auto 0; display:none;
}
.ld-newsletter .newsletter-back-button:hover{ text-decoration:underline; }

/* ---------- Small screens ---------- */
@media (max-width: 480px){
  .ld-modal__dialog{ margin:6vh auto; }
}