/* ============================================================
   Block Styles — front-end CSS for custom Gutenberg block styles
   These match the editor-side styles in editor-style.css so what
   you see in the editor is what gets published.

   All selectors use .is-style-{slug} which Gutenberg auto-applies.
   ============================================================ */

/* ── CALLOUT BOXES (paragraph + group + plain div from migration) ──
   Generous symmetric padding so the text breathes inside the box.
   Inner-margin reset prevents the surrounding .gd-content `<p>` bottom
   margin from making the box look bottom-heavy / asymmetric. */
.is-style-tr-callout-info,
.is-style-tr-callout-success,
.is-style-tr-callout-warning,
.is-style-tr-callout-danger,
.is-style-tr-callout-tip{
  position:relative;
  padding:5px 5px;
  border-radius:10px;
  border:1px solid;
  border-left-width:4px;
  margin:22px 0;
  line-height:1.85;
  font-weight:500;
}
.is-style-tr-callout-info{background:#ecfbfe;border-color:#a8ecf9;border-left-color:#0bb4cf;color:#06647a}
.is-style-tr-callout-success{background:#dcfce7;border-color:#86efac;border-left-color:#16a34a;color:#14532d}
.is-style-tr-callout-warning{background:#fef3eb;border-color:#fed7aa;border-left-color:#ea580c;color:#7c2d12}
.is-style-tr-callout-danger{background:#fee2e2;border-color:#fecaca;border-left-color:#dc2626;color:#7f1d1d}
.is-style-tr-callout-tip{background:#fef9c3;border-color:#fde68a;border-left-color:#ca8a04;color:#713f12}
.is-style-tr-callout-info strong,
.is-style-tr-callout-success strong,
.is-style-tr-callout-warning strong,
.is-style-tr-callout-danger strong,
.is-style-tr-callout-tip strong{color:inherit;font-weight:800}

/* Inner-element margin reset — applies to ANY container variant
   (<p class>, <div class>, .wp-block-group). Targets all common
   block elements so vertical padding stays balanced. */
.is-style-tr-callout-info > *:first-child,
.is-style-tr-callout-success > *:first-child,
.is-style-tr-callout-warning > *:first-child,
.is-style-tr-callout-danger > *:first-child,
.is-style-tr-callout-tip > *:first-child{margin-top:0 !important}
.is-style-tr-callout-info > *:last-child,
.is-style-tr-callout-success > *:last-child,
.is-style-tr-callout-warning > *:last-child,
.is-style-tr-callout-danger > *:last-child,
.is-style-tr-callout-tip > *:last-child{margin-bottom:0 !important}

/* Multi-paragraph callouts: reduce gap between paragraphs */
.is-style-tr-callout-info p,
.is-style-tr-callout-success p,
.is-style-tr-callout-warning p,
.is-style-tr-callout-danger p,
.is-style-tr-callout-tip p{margin:0 0 10px}

/* Optional inline title (h4) inside a callout */
.is-style-tr-callout-info > h4,
.is-style-tr-callout-success > h4,
.is-style-tr-callout-warning > h4,
.is-style-tr-callout-danger > h4,
.is-style-tr-callout-tip > h4{
  margin:0 0 10px;font-size:15px;font-weight:800;color:inherit;border:0;padding:0;
}

/* ── QUOTE variants ─────────────────────────────────────────── */
.wp-block-quote.is-style-tr-quote-cyan{
  margin:0 0 18px;padding:14px 22px;background:#f5fbfd;border:0;border-left:4px solid #16d6f3;
  border-radius:0 8px 8px 0;color:#334155;font-style:normal;
}
.wp-block-quote.is-style-tr-quote-cyan p{margin:0;line-height:1.85}
.wp-block-quote.is-style-tr-quote-cyan cite{display:block;margin-top:8px;font-size:12px;color:#64748b;font-style:italic}
.wp-block-quote.is-style-tr-quote-navy{
  margin:0 0 18px;padding:18px 24px;background:linear-gradient(135deg,#0c2456 0%,#142d6c 100%);border:0;
  border-radius:10px;color:#e0f2fe;font-style:normal;
}
.wp-block-quote.is-style-tr-quote-navy p{margin:0;color:#fff}
.wp-block-quote.is-style-tr-quote-navy cite{display:block;margin-top:10px;color:#7eecff;font-size:12px;font-style:italic}

/* ── HEADING variants ──────────────────────────────────────── */
.wp-block-heading.is-style-tr-heading-bordered{padding-bottom:8px;border-bottom:2px solid #ecfbfe}
.wp-block-heading.is-style-tr-heading-pill{
  display:inline-block;padding:6px 16px;background:linear-gradient(135deg,#16d6f3,#0bb4cf);
  color:#fff;border-radius:999px;font-size:13px;font-weight:800;letter-spacing:.04em;
}
.wp-block-heading.is-style-tr-heading-bracket{
  position:relative;padding-left:14px;border-left:4px solid #16d6f3;
}

/* ── IMAGE variants ────────────────────────────────────────── */
.wp-block-image.is-style-tr-img-rounded img{border-radius:14px}
.wp-block-image.is-style-tr-img-shadow img{box-shadow:0 14px 32px -10px rgba(15,27,61,.20),0 4px 10px rgba(15,27,61,.08);border-radius:8px}
.wp-block-image.is-style-tr-img-bordered img{border:1px solid #e6edf7;border-radius:8px}
.wp-block-image.is-style-tr-img-screenshot img{
  border:1px solid #d2f5fc;border-radius:10px;
  box-shadow:0 18px 40px -12px rgba(11,180,207,.22),0 4px 10px rgba(15,27,61,.06);
  padding:4px;background:linear-gradient(180deg,#f5fbfd,#fff);
}

/* ── TABLE variants ────────────────────────────────────────── */
.wp-block-table.is-style-tr-table-bordered table{border-collapse:collapse;width:100%;font-size:13.5px}
.wp-block-table.is-style-tr-table-bordered th,
.wp-block-table.is-style-tr-table-bordered td{border:1px solid #d2f5fc;padding:10px 14px}
.wp-block-table.is-style-tr-table-bordered th{background:#ecfbfe;color:#0890a8;font-weight:800;text-align:left}

.wp-block-table.is-style-tr-table-striped table{border-collapse:collapse;width:100%;font-size:13.5px}
.wp-block-table.is-style-tr-table-striped th{background:#0c2456;color:#fff;font-weight:800;text-align:left;padding:12px 16px}
.wp-block-table.is-style-tr-table-striped td{padding:10px 16px;border-bottom:1px solid #eef2f8}
.wp-block-table.is-style-tr-table-striped tbody tr:nth-child(even){background:#fafcff}

.wp-block-table.is-style-tr-table-compact table{border-collapse:collapse;width:100%;font-size:12.5px}
.wp-block-table.is-style-tr-table-compact th,
.wp-block-table.is-style-tr-table-compact td{padding:6px 10px;border-bottom:1px solid #eef2f8}
.wp-block-table.is-style-tr-table-compact th{color:#64748b;font-weight:700;background:#f7f9fc;text-align:left}

/* ── CODE variants ─────────────────────────────────────────── */
.wp-block-code.is-style-tr-code-dark{background:#0c2456;color:#e0f2fe;padding:18px 22px;border-radius:10px;font-size:12.5px;line-height:1.7;overflow-x:auto;border:0}
.wp-block-code.is-style-tr-code-light{background:#f5fbfd;color:#06647a;padding:14px 18px;border-radius:8px;font-size:12.5px;line-height:1.7;border:1px solid #d2f5fc;overflow-x:auto}

/* ── LIST variants ─────────────────────────────────────────── */
.wp-block-list.is-style-tr-list-checks{list-style:none;padding-left:0;margin:0 0 16px}
.wp-block-list.is-style-tr-list-checks > li{position:relative;padding-left:28px;margin:0 0 8px;line-height:1.85}
.wp-block-list.is-style-tr-list-checks > li::before{
  content:"";position:absolute;left:0;top:6px;width:18px;height:18px;border-radius:50%;
  background:#16a34a url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><polyline points='20 6 9 17 4 12'/></svg>") no-repeat center/12px;
}
.wp-block-list.is-style-tr-list-numbered-circle{list-style:none;counter-reset:item;padding-left:0;margin:0 0 16px}
.wp-block-list.is-style-tr-list-numbered-circle > li{position:relative;padding-left:38px;margin:0 0 12px;line-height:1.85;counter-increment:item}
.wp-block-list.is-style-tr-list-numbered-circle > li::before{
  content:counter(item);position:absolute;left:0;top:2px;width:24px;height:24px;border-radius:50%;
  background:linear-gradient(135deg,#16d6f3,#0bb4cf);color:#fff;display:flex;align-items:center;justify-content:center;
  font-family:Inter,sans-serif;font-size:12px;font-weight:900;
}

/* ── SEPARATOR variants ────────────────────────────────────── */
.wp-block-separator.is-style-tr-sep-dotted{border:0;border-top:2px dotted #cbd5e1;margin:28px auto;max-width:none}
.wp-block-separator.is-style-tr-sep-gradient{
  border:0;height:2px;background:linear-gradient(90deg,transparent 0%,#16d6f3 50%,transparent 100%);
  margin:28px auto;max-width:200px;
}

/* ============================================================
   Classic Editor (TinyMCE) support — classes are applied
   DIRECTLY to the element (<h2 class>, <img class>, <table class>…),
   not wrapped in a .wp-block-* container. These element-scoped
   selectors mirror the Gutenberg rules above so the decorations
   render on the published page too.
   ============================================================ */

/* ── CALLOUT auto-icons (prepended; content has no manual emoji) ── */
.is-style-tr-callout-info::before{content:"\2139\FE0F  ";font-style:normal;font-weight:400}
.is-style-tr-callout-success::before{content:"\2705  ";font-style:normal;font-weight:400}
.is-style-tr-callout-warning::before{content:"\26A0\FE0F  ";font-style:normal;font-weight:400}
.is-style-tr-callout-danger::before{content:"\1F6D1  ";font-style:normal;font-weight:400}
.is-style-tr-callout-tip::before{content:"\1F4A1  ";font-style:normal;font-weight:400}

/* ── HEADINGS (class on h2/h3/h4 directly) ── */
h1.is-style-tr-heading-bordered,h2.is-style-tr-heading-bordered,
h3.is-style-tr-heading-bordered,h4.is-style-tr-heading-bordered{padding-bottom:8px;border-bottom:2px solid #ecfbfe}
h1.is-style-tr-heading-pill,h2.is-style-tr-heading-pill,
h3.is-style-tr-heading-pill,h4.is-style-tr-heading-pill{
  display:inline-block;padding:6px 16px;background:linear-gradient(135deg,#16d6f3,#0bb4cf);
  color:#fff;border-radius:999px;font-size:13px;font-weight:800;letter-spacing:.04em;
}
h1.is-style-tr-heading-bracket,h2.is-style-tr-heading-bracket,
h3.is-style-tr-heading-bracket,h4.is-style-tr-heading-bracket{padding-left:14px;border-left:4px solid #16d6f3}

/* ── IMAGES (class on <img> directly) ── */
img.is-style-tr-img-rounded{border-radius:14px}
img.is-style-tr-img-shadow{box-shadow:0 14px 32px -10px rgba(15,27,61,.20),0 4px 10px rgba(15,27,61,.08);border-radius:8px}
img.is-style-tr-img-bordered{border:1px solid #e6edf7;border-radius:8px}
img.is-style-tr-img-screenshot{
  border:1px solid #d2f5fc;border-radius:10px;
  box-shadow:0 18px 40px -12px rgba(11,180,207,.22),0 4px 10px rgba(15,27,61,.06);
  padding:4px;background:linear-gradient(180deg,#f5fbfd,#fff);
}

/* ── TABLES (class on <table> directly) ── */
table.is-style-tr-table-bordered{border-collapse:collapse;width:100%;font-size:13.5px}
table.is-style-tr-table-bordered th,table.is-style-tr-table-bordered td{border:1px solid #d2f5fc;padding:10px 14px}
table.is-style-tr-table-bordered th{background:#ecfbfe;color:#0890a8;font-weight:800;text-align:left}
table.is-style-tr-table-striped{border-collapse:collapse;width:100%;font-size:13.5px}
table.is-style-tr-table-striped th{background:#0c2456;color:#fff;font-weight:800;text-align:left;padding:12px 16px}
table.is-style-tr-table-striped td{padding:10px 16px;border-bottom:1px solid #eef2f8}
table.is-style-tr-table-striped tbody tr:nth-child(even){background:#fafcff}
table.is-style-tr-table-compact{border-collapse:collapse;width:100%;font-size:12.5px}
table.is-style-tr-table-compact th,table.is-style-tr-table-compact td{padding:6px 10px;border-bottom:1px solid #eef2f8}
table.is-style-tr-table-compact th{color:#64748b;font-weight:700;background:#f7f9fc;text-align:left}

/* ── CODE (class on <pre> directly) ── */
pre.is-style-tr-code-dark{background:#0c2456;color:#e0f2fe;padding:18px 22px;border-radius:10px;font-size:12.5px;line-height:1.7;overflow-x:auto;border:0}
pre.is-style-tr-code-light{background:#f5fbfd;color:#06647a;padding:14px 18px;border-radius:8px;font-size:12.5px;line-height:1.7;border:1px solid #d2f5fc;overflow-x:auto}

/* ── LISTS (class on <ul>/<ol> directly) ── */
ul.is-style-tr-list-checks{list-style:none;padding-left:0;margin:0 0 16px}
ul.is-style-tr-list-checks > li{position:relative;padding-left:28px;margin:0 0 8px;line-height:1.85}
ul.is-style-tr-list-checks > li::before{
  content:"";position:absolute;left:0;top:6px;width:18px;height:18px;border-radius:50%;
  background:#16a34a url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><polyline points='20 6 9 17 4 12'/></svg>") no-repeat center/12px;
}
ol.is-style-tr-list-numbered-circle{list-style:none;counter-reset:item;padding-left:0;margin:0 0 16px}
ol.is-style-tr-list-numbered-circle > li{position:relative;padding-left:38px;margin:0 0 12px;line-height:1.85;counter-increment:item}
ol.is-style-tr-list-numbered-circle > li::before{
  content:counter(item);position:absolute;left:0;top:2px;width:24px;height:24px;border-radius:50%;
  background:linear-gradient(135deg,#16d6f3,#0bb4cf);color:#fff;display:flex;align-items:center;justify-content:center;
  font-family:Inter,sans-serif;font-size:12px;font-weight:900;
}

/* ── SEPARATORS (class on <hr> directly) ── */
hr.is-style-tr-sep-dotted{border:0;border-top:2px dotted #cbd5e1;margin:28px auto;max-width:none}
hr.is-style-tr-sep-gradient{
  border:0;height:2px;background:linear-gradient(90deg,transparent 0%,#16d6f3 50%,transparent 100%);
  margin:28px auto;max-width:200px;
}

/* Callout icon inline with text (icon floats so the first line sits beside it) */
.is-style-tr-callout-info,
.is-style-tr-callout-success,
.is-style-tr-callout-warning,
.is-style-tr-callout-danger,
.is-style-tr-callout-tip{display:flow-root}
.is-style-tr-callout-info::before,
.is-style-tr-callout-success::before,
.is-style-tr-callout-warning::before,
.is-style-tr-callout-danger::before,
.is-style-tr-callout-tip::before{float:left;margin-right:6px;line-height:1.85}