.elementor-4918 .elementor-element.elementor-element-a7911f4{--display:flex;}/* Start custom CSS for html, class: .elementor-element-3225fe9 *//* ===== Minimal doc style for Hello theme (single post only) ===== */

:root{
  --doc-max: 72ch;               /* optimal reading width (~860px) */
  --doc-bg: #fafafa;             /* page background */
  --doc-text: #111827;           /* main text color */
  --doc-muted: #6b7280;          /* muted text */
  --doc-border: #e5e7eb;         /* light gray border */
  --doc-accent: #0ea5e9;         /* link/accent color */
}

/* Page background */
body.single-post{ background: var(--doc-bg); }

/* Core article container: centered content without card chrome */
body.single-post article.post{
  max-width: var(--doc-max);
  margin: 64px auto;
  padding: 0 20px;               /* small side padding on mobile */
  background: transparent;
  box-shadow: none;
  border: 0;
}

/* Typography */
body.single-post .entry-title{
  font-size: clamp(32px, 5vw, 44px);
  line-height: 1.15;
  letter-spacing: -0.01em;
  margin: 0 0 12px;
  color: var(--doc-text);
}
body.single-post .entry-content{
  color: var(--doc-text);
  font-size: 18px;
  line-height: 1.8;
}
body.single-post .entry-content h2{ font-size: 28px; margin: 1.6em 0 .6em; line-height:1.3; }
body.single-post .entry-content h3{ font-size: 22px; margin: 1.2em 0 .4em; line-height:1.35; }

/* Links: clean underline */
body.single-post .entry-content a{
  color: var(--doc-accent);
  text-underline-offset: 2px;
}

/* Subtle horizontal rule */
body.single-post .entry-content hr{
  border: 0; height: 1px; background: var(--doc-border); margin: 2rem 0;
}

/* Figure with thin border + caption (shrink-to-fit by default) */
.doc .figure{
  border:1px solid var(--doc-border);
  border-radius:10px;
  overflow:hidden;
  background:#fff;
  display:inline-block;          /* shrink-to-fit the image width */
  max-width:100%;
}
.doc .figure img{
  display:block;                  /* remove inline-gap and align caption width */
  height:auto;
}
.doc .figure .cap{
  font-size:.92rem;
  color: var(--doc-muted);
  padding:8px 10px;
  background:#fff;
  text-align:center;              /* align caption with image width */
}

/* Table of contents: very light box */
.doc .toc{
  border:1px solid var(--doc-border);
  border-radius:10px;
  background:#fff;
  padding:12px 14px;
  margin: 8px 0 18px;
}
.doc .toc strong{ display:block; margin-bottom:6px; }
.doc .toc ul{ margin:0; padding-left:18px; }

/* Steps: vertical list with left border and numbered bubble */
.doc .steps{
  list-style:none;
  margin:0; padding:0;
  border-left:12px solid var(--doc-border);
  counter-reset: step;
}
.doc .steps li{
  padding: 0 0 14px 30px;
  margin: 4px 0;
  position: relative;
}
.doc .steps li::before{
  content: counter(step);
  counter-increment: step;
  position:absolute; left:-15px; top:2px;
  width:32px; height:32px;
  border:1px solid var(--doc-border);
  border-radius:60%;
  display:flex; align-items:center; justify-content:center;
  font-size:24px; color:#374151; background:#fff;
}
.doc .steps h3{ margin:.2em 0 .4em; }

/* Callouts: base (info/tip minimal), warn highlighted below */
.doc .callout{
  border:1px solid var(--doc-border);
  border-radius:10px;
  padding:12px 14px;
  background:#fff;
}
.doc .callout.info  { border-left:3px solid #0284c7; }
.doc .callout.tip   { border-left:3px solid #16a34a; }

/* Stronger warning callout (framed & tinted) */
.doc .callout.warn{
  border: 2px solid #dc2626;      /* stronger frame */
  background: #fff5f5;            /* soft red tint */
  border-radius:10px;
  padding:12px 14px;
}

/* Ultra-highlighted warn when adding .boxed */
.doc .callout.warn.boxed{
  position: relative;
  border: 2px solid #dc2626;
  background: #fff5f5;
  border-radius: 12px;
  padding: 14px 16px;
  box-shadow: 0 10px 26px rgba(220, 38, 38, 0.10); /* subtle glow */
}
/* Title badge on the first <strong> */
.doc .callout.warn.boxed > strong:first-child{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #dc2626;
  color: #fff;
  padding: 6px 10px;
  border-radius: 8px;
  margin: 0 0 10px 0;
  line-height: 1.1;
}
.doc .callout.warn.boxed > strong:first-child::before{
  content: "!";
  font-weight: 800;
  line-height: 1;
}
/* Tidy inner figures in warn box */
.doc .callout.warn .figure{ margin-top: 10px; border-color: #f2b3b3; background:#fff; }
.doc .callout.warn .figure .cap{ background:#fff; }
/* If embedding bare <img> inside warn */
.doc .callout.warn img{ margin-top: 8px; }

/* Small UI chips */
.doc .kbd{
  font:600 13px ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  background:#f3f4f6; border:1px solid var(--doc-border); border-radius:6px; padding:2px 6px;
}

/* === Image behavior: keep natural size; add utilities & alignment === */

/* Default images: do NOT upscale; shrink if too wide; keep soft rounding */
.doc img{
  width: auto;                    /* keep intrinsic width by default */
  max-width: 100%;                /* never overflow the container */
  height: auto;
  border-radius:8px;
}

/* Utilities: opt-in sizing (never upscale beyond intrinsic width) */
.doc .img-full img,
.doc .figure.img-full img{ width:100%; max-width:100%; }
.doc .img-25 img{ max-width:25%; }
.doc .img-33 img{ max-width:33.333%; }
.doc .img-50 img{ max-width:50%; }
.doc .img-66 img{ max-width:66.666%; }
.doc .img-75 img{ max-width:75%; }
.doc .center{ display:block; margin-left:auto; margin-right:auto; }

/* Step list image spacing */
.doc .steps li img,
.doc .steps li .figure{ margin-top: 10px; }

/* Alignment helpers inside steps (match current layout):
   - .steps border-left: 12px
   - .steps li padding-left: 30px
*/
.doc .steps li .outdent{
  display:block;
  margin-left: -30px;                         /* undo li padding-left */
  max-width: calc(100% + 30px);
}
.doc .steps li .outdent-wide{
  display:block;
  margin-left: calc(-30px - 12px);            /* li padding + left rail */
  max-width: calc(100% + 30px + 12px);
}

/* ===== Image contrast helpers (opt-in, for white-on-white screenshots) ===== */

/* 1) Subtle framed card: light tint + border + soft shadow */
.doc .figure.frame{
  padding: 12px;                      /* inner padding for breathing room */
  background: #f8fafc;                /* cool gray tint */
  border: 1px solid #d8e1ec;          /* slightly darker than --doc-border */
  border-radius: 12px;
  box-shadow: 0 8px 24px rgba(2, 6, 23, .06); /* gentle elevation */
  overflow: hidden;
}
.doc .figure.frame .cap{ background: transparent; }

/* 2) Strong frame: thicker border (no shadow) for maximum separation */
.doc .figure.frame-strong{
  padding: 10px;
  background: #ffffff;
  border: 2px solid #c6d1de;          /* stronger frame */
  border-radius: 12px;
}
.doc .figure.frame-strong .cap{ background: transparent; }

/* 3) Tinted brand card: very light accent background */
.doc .figure.tint{
  padding: 12px;
  background: #eef7ff;                 /* light sky tint */
  border: 1px solid #cfe4ff;
  border-radius: 12px;
}
.doc .figure.tint .cap{ background: transparent; }

/* 4) Grid paper backdrop: micro grid to separate white UIs */
.doc .figure.grid{
  padding: 12px;
  border-radius: 12px;
  border: 1px solid #d8e1ec;
  background:
    linear-gradient(#fff, #fff) padding-box,
    radial-gradient(#dde6f2 1px, transparent 1px) border-box;
  background-size: auto, 8px 8px;      /* grid size */
  background-position: 0 0, 0 0;
}
.doc .figure.grid .cap{ background: transparent; }

/* 5) Extra elevation (stackable with .frame/.tint/.grid) */
.doc .figure.shadow{ box-shadow: 0 12px 30px rgba(17, 24, 39, .12); }

/* 6) Outline just the image (when you cannot wrap with .figure classes) */
.doc .img-outline img{
  outline: 1px solid #e5e7eb;          /* hairline around pure-white images */
  outline-offset: 0;
  background: #fff;
  border-radius: 8px;                   /* match global rounding */
}

/* 7) Compact variant for callouts: reduce vertical gap */
.doc .callout .figure.frame,
.doc .callout .figure.frame-strong,
.doc .callout .figure.tint,
.doc .callout .figure.grid{ margin-top: 8px; }/* End custom CSS */