/* ============================================================
   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:20px 28px;
  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;
}