/* ==========================================================================
   Weafmall content blocks
   --------------------------------------------------------------------------
   Styling for the reusable blocks used on custom pages (What's New, policy
   pages, etc). The point of keeping it here rather than in a <style> tag
   inside the page content is that the admin rich-text editor strips <style>
   blocks on save - so page content stays plain HTML with class names, and
   stays safe to edit from the UI.

   Add a block by pasting its markup in the editor's code view. Every block
   still reads correctly if the class is dropped, so nothing breaks badly.

   Reference of all blocks: /weafmall-content-blocks
   ========================================================================== */

/* ---------- hero -------------------------------------------------------- */
.wm-hero{background:#1f2937;color:#fff;border-radius:12px;padding:26px 24px;margin:0 0 24px}
.wm-hero h2,.wm-hero h1{color:#fff;margin:0 0 6px;font-size:1.55rem;font-weight:700;line-height:1.25}
.wm-hero p{margin:0;opacity:.85}
.wm-hero a{color:#fff}

.wm-badges{margin-top:14px}
.wm-badge{display:inline-block;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.25);
  border-radius:999px;padding:5px 13px;margin:4px 6px 0 0;font-size:.85rem;white-space:nowrap}
/* on a light background */
.wm-badge-light{background:#eef2ff;border-color:#c7d2fe;color:#3730a3}

.wm-cta{display:inline-block;background:#10b981;color:#fff !important;border-radius:8px;
  padding:10px 20px;margin-top:16px;font-weight:600;text-decoration:none}
.wm-cta:hover{background:#059669;text-decoration:none}
.wm-cta-outline{background:transparent;border:1px solid rgba(255,255,255,.5)}
.wm-cta-outline:hover{background:rgba(255,255,255,.12)}

/* ---------- callouts ---------------------------------------------------- */
.wm-note,.wm-warn,.wm-ok{border-radius:6px;padding:14px 18px;margin:0 0 22px;border-left:4px solid}
.wm-note{background:#eff6ff;border-left-color:#3b82f6}
.wm-warn{background:#fffbeb;border-left-color:#f59e0b}
.wm-ok{background:#f0fdf4;border-left-color:#10b981}
.wm-note p,.wm-warn p,.wm-ok p{margin:0 0 6px}
.wm-note p:last-child,.wm-warn p:last-child,.wm-ok p:last-child{margin:0}

/* ---------- cards ------------------------------------------------------- */
.wm-card{border:1px solid #e5e7eb;border-radius:10px;padding:18px 20px;margin:0 0 14px;background:#fff}
.wm-card.wm-new{border-color:#10b981;border-width:2px;background:#f0fdf4}
.wm-card h3,.wm-card h4{font-size:1.1rem;font-weight:700;margin:0 0 4px;color:#111827}
.wm-card ul,.wm-card ol{margin:0;padding-left:20px}
.wm-card li{margin-bottom:7px;line-height:1.55;color:#374151}

.wm-date{color:#6b7280;font-size:.85rem;margin:0 0 12px}
.wm-tag{display:inline-block;background:#10b981;color:#fff;border-radius:4px;padding:2px 8px;
  font-size:.72rem;font-weight:700;margin-left:8px;vertical-align:middle;letter-spacing:.03em}
.wm-tag-grey{background:#6b7280}

/* ---------- collapsible ------------------------------------------------- */
.wm-accordion{margin-top:28px}
.wm-accordion>summary{cursor:pointer;font-weight:700;font-size:1.05rem;padding:12px 16px;
  background:#f3f4f6;border-radius:8px;color:#111827;list-style:none}
.wm-accordion>summary::-webkit-details-marker{display:none}
.wm-accordion>summary::before{content:"\25B8";display:inline-block;margin-right:10px;transition:transform .15s}
.wm-accordion[open]>summary::before{transform:rotate(90deg)}
.wm-accordion>summary:hover{background:#e5e7eb}
.wm-accordion[open]>summary{margin-bottom:14px}

/* ---------- page furniture ---------------------------------------------- */
.wm-lead{font-size:1.05rem;line-height:1.7;color:#374151;margin:0 0 20px}
.wm-h{font-size:1.2rem;font-weight:700;margin:26px 0 12px;color:#111827}
.wm-h:first-child{margin-top:0}
.wm-body h3{font-size:1.15rem;font-weight:700;margin:26px 0 10px;color:#111827}
.wm-body h4{font-size:1.02rem;font-weight:700;margin:20px 0 8px;color:#111827}
.wm-body p,.wm-body li{line-height:1.7;color:#374151}
.wm-body ul,.wm-body ol{padding-left:22px;margin-bottom:16px}
.wm-body li{margin-bottom:8px}

.wm-toc{background:#f9fafb;border:1px solid #e5e7eb;border-radius:10px;padding:16px 20px;margin:0 0 26px}
.wm-toc p{font-weight:700;margin:0 0 8px;color:#111827}
.wm-toc ol,.wm-toc ul{margin:0;padding-left:20px}
.wm-toc li{margin-bottom:5px}

.wm-foot{color:#6b7280;font-size:.85rem;margin-top:26px;border-top:1px solid #e5e7eb;padding-top:14px}

/* ---------- simple 2-up layout ------------------------------------------ */
.wm-grid{display:flex;flex-wrap:wrap;gap:14px;margin:0 0 18px}
.wm-grid>*{flex:1 1 260px;min-width:0}

/* ---------- table ------------------------------------------------------- */
.wm-table-wrap{overflow-x:auto;margin:0 0 20px}
table.wm-table{width:100%;border-collapse:collapse;min-width:420px}
table.wm-table th,table.wm-table td{border:1px solid #e5e7eb;padding:9px 12px;text-align:left;
  vertical-align:top;line-height:1.55;color:#374151}
table.wm-table th{background:#f9fafb;font-weight:700;color:#111827}

/* ---------- code samples (blocks reference page) ------------------------ */
.wm-body pre{background:#111827;color:#e5e7eb;border-radius:8px;padding:14px 16px;margin:0;
  font-size:.82rem;line-height:1.6;white-space:pre-wrap;word-break:break-word}
.wm-body code{background:#f3f4f6;border-radius:4px;padding:1px 5px;font-size:.88em;color:#b91c1c}
.wm-body pre code{background:none;color:inherit;padding:0}

/* ---------- contact strip ---------------------------------------------- */
.wm-contact{background:#f9fafb;border:1px solid #e5e7eb;border-radius:10px;padding:18px 20px;margin:22px 0 0}
.wm-contact p{margin:0 0 5px}
.wm-contact p:last-child{margin:0}

@media (max-width:575px){
  .wm-hero{padding:20px 16px}
  .wm-hero h2,.wm-hero h1{font-size:1.3rem}
  .wm-card{padding:15px 16px}
}