/*
 * Shared block-content design — used by both the public blog page and the
 * admin Post Builder, so editing looks like the real published result.
 * Scoped under .block-builder-scope (wraps the block-rendering area on both pages).
 */

.block-builder-scope{
  font-family: "IBM Plex Sans", system-ui, sans-serif;
}

/* Per-item delete button (table row / key-takeaway bullet / FAQ entry) — admin only */
.bh-item-delete-btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  border: none;
  border-radius: 50%;
  background: transparent;
  color: #b0b8c1;
  font-size: 15px;
  line-height: 1;
  cursor: pointer;
  padding: 0;
}
.bh-item-delete-btn:hover{ background: #fdeaea; color: #d9534f; }

/*
 * Every block wrapper needs its own positioning context for the hover
 * edit/delete/move icon box (absolutely positioned at left:-26px) to anchor
 * to *that* block instead of some distant ancestor, and a guaranteed full
 * width so no block type relies on flex-stretch alone (which some content
 * can override). This previously only applied under a ".admin-app" ancestor
 * that doesn't exist on this page, so it silently never applied at all.
 */
.block-builder-scope .sortable-item{
  position: relative;
  width: 100%;
  max-width: 100%;
  overflow: visible;
  box-sizing: border-box;
}

/*
 * .recipe-description intentionally uses Bootstrap's .row for its flex +
 * justify-content-center behavior, but .row's -15px side margins bleed the
 * block past its container on both sides. Keep the flex behavior, cancel
 * just the margin.
 */
.block-builder-scope .recipe-description.row{ margin-left:0; margin-right:0; }

/* Editable regions shouldn't show a focus/edit outline outside of active editing */
.block-builder-scope .editable-block{ outline:none !important; cursor:default; user-select:text; }
.block-builder-scope .editable-block:focus,
.block-builder-scope .editable-block:focus-visible{ outline:none !important; box-shadow:none !important; border-color:inherit !important; }

/* Key Takeaways — blue card, not green */
.block-builder-scope .key-takeaways-card{ background:#eaf2fc; border:1px solid #cfe3f9; border-radius:14px; padding:22px 24px; }
.block-builder-scope .key-takeaways-header{ font-size:16px; font-weight:700; color:#12233b; margin-bottom:14px; }
.block-builder-scope .key-takeaways-header i{ display:none; }
.block-builder-scope .key-takeaways-list{ list-style:none; padding-left:0; display:flex; flex-direction:column; gap:10px; }
.block-builder-scope .key-takeaways-list li{ position:relative; padding-left:20px; margin-bottom:0; color:#3a4a5a; font-size:14.5px; line-height:1.75; }
.block-builder-scope .key-takeaways-list li::before{ content:''; position:absolute; left:2px; top:9px; width:5px; height:5px; border-radius:50%; background:#1573d4; }

/* FAQs — always-expanded blue cards, no accordion interaction.
   Selectors are scoped through .faq-section (not just .faq-card) so they're
   at least as specific as the older .faq-section .faq-card rules earlier in
   blocks.css — otherwise those un-prefixed rules lose the cascade and this
   design (compact header, muted answer text) never actually applies,
   regardless of load order. */
.block-builder-scope .faq-section .faq-card{ background:#eaf2fc !important; border:1px solid #cfe3f9 !important; box-shadow:none !important; margin-bottom:14px; }
.block-builder-scope .faq-section .faq-card:last-child{ margin-bottom:0; }
.block-builder-scope .faq-section .faq-card .accordion-header{ cursor:default; padding:20px 22px 0; margin-bottom:12px; gap:12px; }
.block-builder-scope .faq-section .faq-card .accordion-header h3,
.block-builder-scope .faq-section .faq-card .accordion-header h4{ font-size:16px; font-weight:700; color:#12233b; margin:0; }
.block-builder-scope .faq-section .faq-card .accordion-body{ max-height:none !important; opacity:1 !important; padding:0 22px 20px !important; }
.block-builder-scope .faq-section .faq-card .accordion-body p{ font-size:13.5px; color:#3a4a5a; line-height:1.7; }

/* Table block — bordered data table matching Server Model / Manufacturer Hub tables */
.block-builder-scope .specs-block{ padding-top:0 !important; }
.block-builder-scope .specs-table-header{ background:none !important; height:auto !important; display:block !important; padding-left:0 !important; border-bottom:none !important; margin-bottom:12px; }
.block-builder-scope .specs-table-header h3,
.block-builder-scope .specs-table-header h4{ font-size:19px !important; font-weight:700 !important; color:#12233b !important; margin:0 !important; }
.block-builder-scope .specs-table-body{ border:1px solid #e4e9ef; border-radius:12px; overflow:hidden; overflow-x:auto; }
/* table-layout:auto sizes each column independently off its own longest
   cell, which is exactly the wrong thing here — one data column with a
   slightly longer value anywhere in it balloons wider than the rest.
   table-layout:fixed derives column widths from the FIRST ROW instead:
   the label column gets its own explicit width (below) and every other
   (unset-width) column automatically splits the remainder equally — which
   is the "columns 2..N should all be about the same size" behavior.
   min-width (not just width:100%) keeps a floor under the whole table so
   it can still grow past its container and scroll instead of squeezing
   every column down to illegible widths. */
.block-builder-scope .specs-table-body table{ width:100%; min-width:600px; table-layout:fixed; border-collapse:collapse; font-size:12.5px; }
.block-builder-scope .specs-table-body tr{ height:auto; }
.block-builder-scope .specs-table-body tr:first-child{ background:#f7f9fb; }
.block-builder-scope .specs-table-body tr:first-child td{ font-size:10px; font-weight:700 !important; color:#8595a5; text-transform:uppercase; letter-spacing:0.03em; padding:10px 12px; border-bottom:1px solid #eef1f5; overflow-wrap:break-word; word-break:break-word; }
.block-builder-scope .specs-table-body tr:not(:first-child) td{ padding:11px 12px; border-bottom:1px solid #f2f5f8; color:#3a4a5a; font-size:12.5px; line-height:1.45; overflow-wrap:break-word; word-break:break-word; }
.block-builder-scope .specs-table-body tr:last-child td{ border-bottom:none; }
/* First column doubles as a row-heading — same tint as the header row on
   every row, not just the top one, bold text, and a divider from the data
   cells so it reads as a label rather than just another value. */
.block-builder-scope .specs-table-body .cell-key{ width:28%; background:#f7f9fb; font-weight:700 !important; color:#12233b; border-right:1px solid #eef1f5; }
.block-builder-scope .specs-table-body tr:not(:first-child) .cell-key{ font-size:12.5px; text-transform:none; letter-spacing:normal; }
/* blocks.css's legacy ".specs-block .cell-value{ width:100% }" rule (written
   for a single value column) still applies here via the .specs-block wrapper
   the block-stack renderer adds. With 2+ value columns, every cell-value
   independently declares width:100%, so together with cell-key's 28% the
   declared widths sum past 100% and the browser scales all of them down
   proportionally -- crushing the label column to ~8% width and wrapping its
   text one word per line. An explicit width here (equal specificity, later
   in source order) wins the cascade and restores the intended even split of
   the remaining space across however many value columns exist. */
.block-builder-scope .specs-table-body .cell-value{ font-weight:400 !important; width:auto; }

/* Redactor wraps every cell's typed text in its own <p>, and blocks.css's
   ".editable-block p" rule (font-size:16px, color, weight — no !important)
   targets that <p> directly. A child element's own explicit rule always
   beats an ancestor's, important or not, since inheritance never gets a
   chance once the child has its own value — so every font-size/color/weight
   set above on td/.cell-key was invisible on the actual text. Re-declare
   the same intent directly on the <p> so it actually reaches the page. */
.block-builder-scope .specs-table-body td p{ margin:0; font-size:12.5px; color:#3a4a5a; line-height:1.45; font-weight:400; }
.block-builder-scope .specs-table-body tr:first-child td p{ font-size:10px; font-weight:700; color:#8595a5; text-transform:uppercase; letter-spacing:0.03em; }
.block-builder-scope .specs-table-body .cell-key p{ font-weight:700; color:#12233b; }

/* Article body typography + spacing rhythm, matching the public page */
.bh-block-stack{ display:flex; flex-direction:column; gap:26px; font-size:14.5px; color:#3a4a5a; line-height:1.75; min-width:0; }