.elementor-12667 .elementor-element.elementor-element-c16d011{--display:flex;}/* Start custom CSS *//* =========================================================
   Angelo’s Blog (scoped)
   Target: <section class="ablog angelos-blog">…</section>
   ======================================================= */

.ablog,
.angelos-blog{
  --brand:#0b4dbf;
  --ink:#111827;
  --ink-soft:#374151;
  --muted:#6b7280;
  --paper:#ffffff;
  --border:#e5e7eb;
  --radius:14px;
  --shadow:0 10px 30px rgba(2,6,23,.06);

  color:var(--ink);
  line-height:1.7;
  font-size:clamp(16px, 1rem + .2vw, 18px);
  background:var(--paper);
  border:1px solid var(--border);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  padding:clamp(18px,2.2vw,28px) clamp(20px,3vw,36px);
  max-width:72ch;
  margin-inline:auto;
}

/* Smooth typography rhythm */
.ablog > * + *{ margin-top:1.1rem; }
.ablog h1,.ablog h2,.ablog h3{
  color:var(--ink);
  line-height:1.2;
  letter-spacing:-.01em;
}
.ablog h2{
  font-size:clamp(1.35rem,1.05rem + .9vw,1.85rem);
  margin-top:2.25rem;
  padding-top:.25rem;
  border-top:3px solid color-mix(in srgb, var(--brand) 35%, #0000);
}
.ablog h3{
  font-size:clamp(1.05rem, .98rem + .4vw, 1.25rem);
  margin-top:1.5rem;
  color:var(--ink-soft);
}

/* Lead paragraph (first paragraph after title or intro) */
.ablog h2 + p{
  font-size:clamp(1.02rem,1rem + .3vw,1.18rem);
  color:var(--ink-soft);
}

/* Links & hover */
.ablog a:not(.btn){
  color:var(--brand);
  text-underline-offset:.2em;
}
.ablog a:not(.btn):hover{ opacity:.9 }

/* Figures & captions */
.ablog figure{ margin:1.25rem 0; }
.ablog figure img{
  width:100%; height:auto;
  border-radius:12px;
  display:block;
  box-shadow:0 6px 20px rgba(2,6,23,.06);
}
.ablog figcaption{
  color:var(--muted);
  font-size:.9rem;
  text-align:center;
  margin-top:.6rem;
}

/* Lists */
.ablog ul, .ablog ol{ padding-left:1.2rem }
.ablog li{ margin:.45rem 0 }
.ablog ul.checklist{ list-style:none; padding-left:0 }
.ablog ul.checklist li{
  position:relative; padding-left:1.6rem;
}
.ablog ul.checklist li::before{
  content:"✓";
  position:absolute; left:0; top:.05rem;
  inline-size:1.1rem; block-size:1.1rem;
  color:var(--brand); font-weight:700;
}

/* Buttons inside article */
.ablog .btn{
  --bg:var(--brand);
  --fg:#fff;
  display:inline-flex; align-items:center; gap:.5rem;
  background:var(--bg); color:var(--fg);
  border-radius:999px; padding:.7rem 1rem;
  border:1px solid color-mix(in srgb, var(--bg) 30%, #000);
  box-shadow:0 8px 18px rgba(11,77,191,.18);
  text-decoration:none; font-weight:700;
  transition:filter .15s ease, transform .15s ease, box-shadow .2s ease;
}
.ablog .btn:hover{ filter:brightness(1.06); transform:translateY(-1px) }
.ablog .btn:focus-visible{
  outline:3px solid color-mix(in srgb, var(--brand) 40%, #0000);
  outline-offset:2px;
}

/* Callouts (use .note, .warning, .tip on any div) */
.ablog .note, .ablog .warning, .ablog .tip{
  border-radius:12px; padding:1rem 1rem 1rem 1.1rem;
  border:1px solid var(--border);
  background:#f8fafc;
  position:relative;
}
.ablog .note{ border-left:4px solid var(--brand) }
.ablog .tip{ border-left:4px solid color-mix(in srgb, var(--brand) 70%, #35d) }
.ablog .warning{
  border-left:4px solid #d97706;
  background: #fff8ee;
}

/* Responsive tables */
.ablog .table-wrap{
  overflow:auto; border:1px solid var(--border);
  border-radius:12px; -webkit-overflow-scrolling:touch;
  box-shadow:inset 0 1px 0 #fff;
}
.ablog table{
  width:100%; min-width:480px; border-collapse:separate; border-spacing:0;
}
.ablog th, .ablog td{ padding:.85rem 1rem; border-bottom:1px solid var(--border) }
.ablog thead th{
  position:sticky; top:0; z-index:1;
  background:linear-gradient(#fff, #f9fafb);
  font-weight:700; color:#0f172a;
  border-bottom:1px solid color-mix(in srgb, var(--brand) 25%, var(--border));
}
.ablog tbody tr:nth-child(odd){ background:#fcfcfd }

/* Details / FAQ toggles */
.ablog details{
  border:1px solid var(--border);
  border-left:4px solid var(--brand);
  border-radius:10px;
  background:#fbfdff;
  padding:.25rem .75rem;
}
.ablog summary{
  list-style:none; cursor:pointer; padding:.65rem .25rem;
  font-weight:700;
}
.ablog summary::-webkit-details-marker{ display:none }
.ablog summary::after{
  content:"▸"; float:right; color:var(--muted);
  transition:transform .2s ease;
}
.ablog details[open] summary::after{ transform:rotate(90deg) }
.ablog .faq__a{ padding:.25rem 0 1rem 0; color:var(--ink-soft) }

/* Optional TOC (if you add <nav class="toc">…</nav>) */
.ablog .toc{
  border:1px dashed var(--border);
  padding:.8rem 1rem; border-radius:12px; background:#fbfbff;
}
.ablog .toc a{ text-decoration:none }
.ablog .toc a:hover{ text-decoration:underline }

/* Anchor link icon (appears on heading hover) */
.ablog .anchor{
  margin-left:.35rem; opacity:0; transition:opacity .15s ease;
  text-decoration:none; color:var(--muted);
}
.ablog h2:hover .anchor, .ablog h3:hover .anchor{ opacity:1 }

/* Inline CTA block (inserted by JS below) */
.ablog .inline-cta{
  margin:1.2rem 0; padding:1rem;
  background:linear-gradient(180deg,#fff,#f7fbff);
  border:1px solid var(--border);
  border-left:4px solid var(--brand);
  border-radius:12px;
  display:flex; align-items:center; justify-content:space-between; gap:.75rem;
}
.ablog .inline-cta p{ margin:0; color:var(--ink-soft) }
.ablog .inline-cta .btn{ margin-left:auto }

/* Print niceties */
@media print{
  .ablog{ box-shadow:none; border-color:#ddd }
  .ablog a{ color:#000; text-decoration:underline }
  #ablog-progress,.inline-cta{ display:none !important }
}

/* Reading progress bar */
#ablog-progress{
  position:fixed; left:0; top:0; z-index:9999;
  inline-size:100%; block-size:3px;
  background:linear-gradient(90deg, var(--brand), color-mix(in srgb, var(--brand) 60%, #7dd3fc));
  transform-origin:left center; transform:scaleX(0);
  will-change:transform;
}

/* Small view tweaks */
@media (max-width:560px){
  .ablog{ padding:16px }
  .ablog .inline-cta{ flex-direction:column; align-items:flex-start }
}/* End custom CSS */