/* =========================================================================
   bulku.css — bulku custom post type styling for minoka.de

   Two layers:
   1. Class primitives (.bulku-*) — direct analogs of .seomurai-* for any
      page that opts in by wrapping content in the new Gutenberg blocks.
   2. body.single-bulku safety layer — picks up the existing live markup
      (plain h1/h2/p/ul + Kadence .kt-info-box-* and .kt-row-layout-step
      blocks) so all 23 sub-pages improve without touching their content.

   FAQ accordion + FAQPage schema reuses .sk-section.sk-faq from ueber.css
   (loaded on bulku CPT via minoka_styles_post_type_map() since v1.3.0).
   ========================================================================= */

:root {
  --bulku-accent:        var(--global-palette1, #3182CE);
  --bulku-accent-deep:   var(--global-palette2, #2B6CB0);
  --bulku-accent-soft:   #3DBBEB;
  --bulku-pro:           #FF9A56;
  --bulku-pro-soft:      #FFC857;
  --bulku-bg-dark:       #0a0e1a;
  --bulku-bg-soft:       #f8f9fa;
  --bulku-bg-card:       #ffffff;
  --bulku-bg-callout:    #ecfeff;
  --bulku-bg-success:    #ecfdf5;
  --bulku-bg-warning:    #fff7ed;
  --bulku-text-primary:  var(--global-palette3, #1A202C);
  --bulku-text-body:     var(--global-palette5, #4A5568);
  --bulku-text-soft:     #6b7280;
  --bulku-text-on-dark:  #ffffff;
  --bulku-text-on-dark-soft: #cbd5e1;
  --bulku-text-on-dark-mute: #94a3b8;
  --bulku-border:        var(--global-palette7, #e5e7eb);
  --bulku-radius:        12px;
  --bulku-radius-sm:     8px;
  --bulku-success:       #10B981;
  --bulku-danger:        #EF4444;
}

/* =============================================================
   Body-scoped safety layer
   Catches every existing live page even before re-mark-up.
   Strictly scoped to body.single-bulku so it cannot leak.
   ============================================================= */

/* Hide the theme's entry-header on bulku CPT — the page provides its own
   title via either .bulku-hero (upgraded pages) or .entry-content > h1
   (unmodified pages). Otherwise the title renders twice. */
body.single-bulku .entry-header { display: none; }

/* Widened so Kadence rowlayout/infobox blocks that auto-promote to siblings
   under <article>/<site-main> still find a parent of usable width. The
   visible reading column is enforced per-block below at 820px. */
body.single-bulku .entry-content {
  max-width: var(--global-content-width, 1290px);
  margin: 0 auto;
  padding: 48px 24px 80px;
  color: var(--bulku-text-body);
  font-size: 17px;
  line-height: 1.7;
}

/* When the page begins with a full-bleed .minoka-hero (or its dual-class
   .bulku-hero twin), suppress entry-content's top padding so the hero sits
   flush against the site header. The hero's own width:100vw + left:50% trick
   already escapes horizontal padding, so this only neutralises the vertical
   gap. Same idea for .minoka-cta as the last child — flush against footer. */
body.single-bulku .entry-content:has(> .minoka-hero:first-child),
body.single-bulku .entry-content:has(> .bulku-hero:first-child) {
  padding-top: 0;
}
body.single-bulku .entry-content:has(> .minoka-cta:last-child),
body.single-bulku .entry-content:has(> .bulku-cta:last-child) {
  padding-bottom: 0;
}

/* Kadence's `.entry-content-wrap` adds another 32px of vertical padding
   inside the article wrapper. When hero/CTA flank the page, kill that too
   so they reach the very edge of the article container. */
body.single-bulku article:has(.entry-content > .minoka-hero:first-child) .entry-content-wrap,
body.single-bulku article:has(.entry-content > .bulku-hero:first-child) .entry-content-wrap {
  padding-top: 0;
}
body.single-bulku article:has(.entry-content > .minoka-cta:last-child) .entry-content-wrap,
body.single-bulku article:has(.entry-content > .bulku-cta:last-child) .entry-content-wrap {
  padding-bottom: 0;
}


body.single-bulku .entry-content > h1:first-child {
  font-size: 44px;
  font-weight: 700;
  line-height: 1.15;
  color: var(--bulku-text-primary);
  margin: 0 0 24px;
}

body.single-bulku .entry-content h2 {
  font-size: 30px;
  font-weight: 700;
  line-height: 1.25;
  color: var(--bulku-text-primary);
  margin: 56px 0 16px;
  padding-bottom: 8px;
  border-bottom: 2px solid var(--bulku-accent);
}

body.single-bulku .entry-content h3 {
  font-size: 22px;
  font-weight: 700;
  line-height: 1.3;
  color: var(--bulku-text-primary);
  margin: 36px 0 12px;
}

body.single-bulku .entry-content h4 {
  font-size: 18px;
  font-weight: 600;
  color: var(--bulku-text-primary);
  margin: 28px 0 10px;
}

body.single-bulku .entry-content p {
  margin: 0 0 16px;
  color: var(--bulku-text-body);
}

body.single-bulku .entry-content a:not(.wp-block-button__link):not(.wp-element-button) {
  color: var(--bulku-accent);
  text-decoration: underline;
  text-underline-offset: 2px;
}
body.single-bulku .entry-content a:not(.wp-block-button__link):not(.wp-element-button):hover {
  color: var(--bulku-accent-deep);
}

body.single-bulku .entry-content ul,
body.single-bulku .entry-content ol {
  margin: 0 0 20px;
  padding-left: 24px;
}
body.single-bulku .entry-content ul li,
body.single-bulku .entry-content ol li {
  margin-bottom: 8px;
  line-height: 1.65;
}

body.single-bulku .entry-content code {
  background: var(--bulku-bg-soft);
  border: 1px solid var(--bulku-border);
  padding: 2px 6px;
  border-radius: 4px;
  font-family: 'SF Mono', Menlo, Consolas, monospace;
  font-size: 0.92em;
  color: var(--bulku-accent-deep);
}

body.single-bulku .entry-content pre {
  background: var(--bulku-bg-dark);
  color: var(--bulku-text-on-dark);
  padding: 20px 24px;
  border-radius: var(--bulku-radius);
  overflow-x: auto;
  margin: 24px 0;
  font-size: 14px;
  line-height: 1.6;
}
body.single-bulku .entry-content pre code {
  background: transparent;
  border: none;
  padding: 0;
  color: inherit;
}

body.single-bulku .entry-content table {
  width: 100%;
  border-collapse: collapse;
  margin: 24px 0;
  font-size: 15px;
  background: var(--bulku-bg-card);
  border-radius: var(--bulku-radius-sm);
  overflow: hidden;
  border: 1px solid var(--bulku-border);
}
body.single-bulku .entry-content thead th {
  background: var(--bulku-bg-soft);
  color: var(--bulku-text-primary);
  font-weight: 600;
  text-align: left;
  padding: 12px 16px;
  border-bottom: 1px solid var(--bulku-border);
}
body.single-bulku .entry-content tbody td {
  padding: 12px 16px;
  border-bottom: 1px solid var(--bulku-border);
  vertical-align: top;
}
body.single-bulku .entry-content tbody tr:last-child td { border-bottom: none; }

body.single-bulku .entry-content blockquote {
  border-left: 4px solid var(--bulku-accent);
  background: var(--bulku-bg-callout);
  padding: 16px 22px;
  margin: 24px 0;
  border-radius: 0 var(--bulku-radius-sm) var(--bulku-radius-sm) 0;
}
body.single-bulku .entry-content blockquote p { margin: 0; }

body.single-bulku .entry-content hr {
  border: none;
  border-top: 1px solid var(--bulku-border);
  margin: 40px 0;
}

body.single-bulku .entry-content figure { margin: 24px 0; }
body.single-bulku .entry-content figcaption {
  color: var(--bulku-text-soft);
  font-size: 14px;
  text-align: center;
  margin-top: 8px;
}

/* =============================================================
   Class primitives (.bulku-*)
   Direct analogs of .seomurai-* — use these on any page that
   opts in by wrapping content in <wp:group className="bulku-...">
   ============================================================= */

/* Hero band (dark, centered, overline + h1 + lede + dual CTA) */
.bulku-hero ,
.minoka-hero{
  background: var(--bulku-bg-dark);
  color: var(--bulku-text-on-dark);
  padding: 100px 24px;
  text-align: center;
  margin: 0 0 0 0;
}
.bulku-hero > * ,
.minoka-hero > *{ max-width: 760px; margin-left: auto; margin-right: auto; }
.bulku-hero .bulku-hero-overline ,
.minoka-hero .minoka-hero-overline{
  color: var(--bulku-accent-soft);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 2px;
  text-transform: uppercase;
  margin-bottom: 0;
}
.bulku-hero h1 ,
.minoka-hero h1{
  color: var(--bulku-text-on-dark);
  font-size: 56px;
  font-weight: 700;
  line-height: 1.15;
  margin: 16px 0 24px;
  border: none !important;
  padding: 0 !important;
}
.bulku-hero .bulku-hero-subline ,
.minoka-hero .minoka-hero-subline{
  color: var(--bulku-text-on-dark-soft);
  font-size: 20px;
  line-height: 1.55;
  margin-bottom: 40px;
}
.bulku-hero .wp-block-buttons ,
.minoka-hero .wp-block-buttons{ justify-content: center; }
.bulku-hero .bulku-hero-trust ,
.minoka-hero .minoka-hero-trust{
  color: var(--bulku-text-on-dark-mute);
  font-size: 13px;
  margin-top: 32px;
}

/* Section (alternating bg, prose width) */
.bulku-section ,
.minoka-section{
  background: var(--bulku-bg-card);
  padding: 80px 24px;
}
.bulku-section.is-soft ,
.minoka-section.is-soft{ background: var(--bulku-bg-soft); }
.bulku-section > * ,
.minoka-section > *{ max-width: 820px; margin-left: auto; margin-right: auto; }
.bulku-section h2 ,
.minoka-section h2{
  font-size: 36px;
  font-weight: 700;
  line-height: 1.2;
  color: var(--bulku-text-primary);
  margin: 0 0 16px;
  border: none !important;
  padding: 0 !important;
}
.bulku-section > p ,
.minoka-section > p{
  color: var(--bulku-text-body);
  font-size: 17px;
  line-height: 1.7;
  margin: 0 0 32px;
}

/* Section overline */
.bulku-overline ,
.minoka-overline{
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--bulku-accent);
  margin: 0 0 8px;
}

/* 3-col value strip */
.bulku-strip ,
.minoka-strip{
  background: var(--bulku-bg-soft);
  padding: 80px 24px;
}
.bulku-strip .wp-block-columns ,
.minoka-strip .wp-block-columns{
  max-width: 1140px;
  margin: 0 auto;
  gap: 32px;
}
.bulku-strip .wp-block-column ,
.minoka-strip .wp-block-column{ padding: 0 16px; }
.bulku-strip h3 ,
.minoka-strip h3{
  color: var(--bulku-text-primary);
  font-size: 22px;
  font-weight: 600;
  margin-bottom: 12px;
}
.bulku-strip p ,
.minoka-strip p{
  color: var(--bulku-text-body);
  font-size: 15px;
  line-height: 1.6;
}

/* Card primitive (white, bordered, subtle shadow) */
.bulku-card ,
.minoka-card{
  background: var(--bulku-bg-card);
  border: 1px solid var(--bulku-border);
  border-radius: var(--bulku-radius);
  padding: 28px 28px;
  height: 100%;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04);
}
.bulku-card h3 ,
.minoka-card h3{
  font-size: 20px;
  font-weight: 700;
  color: var(--bulku-text-primary);
  margin: 0 0 12px;
}
.bulku-card p ,
.minoka-card p{
  color: var(--bulku-text-body);
  font-size: 15px;
  line-height: 1.65;
  margin: 0;
}
.bulku-card a ,
.minoka-card a{ color: var(--bulku-accent); }

/* Step card (numbered or accent-bordered) */
.bulku-step ,
.minoka-step{
  background: var(--bulku-bg-card);
  border: 1px solid var(--bulku-border);
  border-left: 4px solid var(--bulku-accent);
  border-radius: var(--bulku-radius);
  padding: 28px 32px;
  margin-bottom: 20px;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04);
}
.bulku-step h3 ,
.minoka-step h3{
  font-size: 22px;
  font-weight: 700;
  color: var(--bulku-text-primary);
  margin: 0 0 12px;
}
.bulku-step p ,
.minoka-step p{
  color: var(--bulku-text-body);
  font-size: 16px;
  line-height: 1.65;
  margin: 0 0 12px;
}
.bulku-step p:last-child ,
.minoka-step p:last-child{ margin-bottom: 0; }

/* Callout (cyan bg, accent left border) */
.bulku-callout ,
.minoka-callout{
  background: var(--bulku-bg-callout);
  border-left: 4px solid var(--bulku-accent);
  border-radius: 0 var(--bulku-radius-sm) var(--bulku-radius-sm) 0;
  padding: 18px 24px;
  margin: 24px 0;
}
.bulku-callout p ,
.minoka-callout p{ margin: 0; color: var(--bulku-text-body); font-size: 16px; line-height: 1.65; }
.bulku-callout strong ,
.minoka-callout strong{ color: var(--bulku-accent-deep); }

/* Comparison: paired before/after cards */
.bulku-comparison ,
.minoka-comparison{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 24px;
  margin: 32px 0;
}
.bulku-comparison .bulku-card.is-before ,
.minoka-comparison .minoka-card.is-before{
  border-left: 4px solid var(--bulku-danger);
}
.bulku-comparison .bulku-card.is-after ,
.minoka-comparison .minoka-card.is-after{
  border-left: 4px solid var(--bulku-success);
}
.bulku-comparison .bulku-card.is-before h3,
.minoka-comparison .minoka-card.is-before h3,
.bulku-comparison .bulku-card.is-after h3 ,
.minoka-comparison .minoka-card.is-after h3{
  display: flex;
  align-items: center;
  gap: 8px;
}
.bulku-comparison .bulku-card.is-before h3::before ,
.minoka-comparison .minoka-card.is-before h3::before{
  content: "✗";
  color: var(--bulku-danger);
  font-weight: 700;
}
.bulku-comparison .bulku-card.is-after h3::before ,
.minoka-comparison .minoka-card.is-after h3::before{
  content: "✓";
  color: var(--bulku-success);
  font-weight: 700;
}
.bulku-comparison ul ,
.minoka-comparison ul{
  list-style: none;
  padding-left: 0;
  margin: 0;
}
.bulku-comparison li ,
.minoka-comparison li{
  padding: 8px 0 8px 24px;
  position: relative;
  line-height: 1.55;
  color: var(--bulku-text-body);
}
.bulku-comparison .bulku-card.is-before li::before ,
.minoka-comparison .minoka-card.is-before li::before{
  content: "✗";
  position: absolute;
  left: 0;
  color: var(--bulku-danger);
}
.bulku-comparison .bulku-card.is-after li::before ,
.minoka-comparison .minoka-card.is-after li::before{
  content: "✓";
  position: absolute;
  left: 0;
  color: var(--bulku-success);
}

/* Pricing cards */
.bulku-pricing ,
.minoka-pricing{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 24px;
  margin: 32px 0;
  max-width: 880px;
  margin-left: auto;
  margin-right: auto;
}
.bulku-pricing-card ,
.minoka-pricing-card{
  background: var(--bulku-bg-card);
  border: 1px solid var(--bulku-border);
  border-radius: var(--bulku-radius);
  padding: 36px 32px;
  text-align: center;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04);
}
.bulku-pricing-card.is-pro ,
.minoka-pricing-card.is-pro{
  background: linear-gradient(135deg, #fff, #fff7ed);
  border-color: var(--bulku-pro);
  position: relative;
}
.bulku-pricing-card h3 ,
.minoka-pricing-card h3{
  font-size: 22px;
  font-weight: 700;
  color: var(--bulku-text-primary);
  margin: 0 0 8px;
}
.bulku-pricing-card .bulku-pricing-amount ,
.minoka-pricing-card .minoka-pricing-amount{
  font-size: 48px;
  font-weight: 800;
  color: var(--bulku-text-primary);
  margin: 16px 0;
  line-height: 1;
}
.bulku-pricing-card.is-pro .bulku-pricing-amount ,
.minoka-pricing-card.is-pro .minoka-pricing-amount{
  background: linear-gradient(135deg, var(--bulku-pro), var(--bulku-pro-soft));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.bulku-pricing-card ul ,
.minoka-pricing-card ul{
  list-style: none;
  padding: 0;
  margin: 24px 0;
  text-align: left;
}
.bulku-pricing-card li ,
.minoka-pricing-card li{
  padding: 8px 0 8px 28px;
  position: relative;
  color: var(--bulku-text-body);
  font-size: 15px;
  line-height: 1.5;
  border-bottom: 1px solid var(--bulku-border);
}
.bulku-pricing-card li:last-child ,
.minoka-pricing-card li:last-child{ border-bottom: none; }
.bulku-pricing-card li::before ,
.minoka-pricing-card li::before{
  content: "✓";
  position: absolute;
  left: 0;
  color: var(--bulku-accent);
  font-weight: 700;
}
.bulku-pricing-card.is-pro li::before ,
.minoka-pricing-card.is-pro li::before{ color: var(--bulku-pro); }

.bulku-pricing-badge ,
.minoka-pricing-badge{
  display: inline-block;
  background: var(--bulku-pro);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  padding: 4px 12px;
  border-radius: 999px;
  margin-bottom: 12px;
}

/* PRO inline chip (after an h3) */
.bulku-pro-badge ,
.minoka-pro-badge{
  display: inline-block;
  background: linear-gradient(135deg, var(--bulku-pro), var(--bulku-pro-soft));
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  padding: 3px 10px;
  border-radius: 999px;
  margin-left: 10px;
  vertical-align: middle;
}

/* Final CTA band (dark, centered) */
.bulku-cta ,
.minoka-cta{
  background: linear-gradient(135deg, var(--bulku-accent-deep), var(--bulku-accent) 55%, var(--bulku-pro));
  color: var(--bulku-text-on-dark);
  padding: 100px 24px;
  text-align: center;
}
.bulku-cta > * ,
.minoka-cta > *{ max-width: 760px; margin-left: auto; margin-right: auto; }
.bulku-cta h2 ,
.minoka-cta h2{
  color: var(--bulku-text-on-dark);
  font-size: 44px;
  font-weight: 700;
  line-height: 1.2;
  margin: 0 0 16px;
  border: none !important;
  padding: 0 !important;
}
.bulku-cta > p ,
.minoka-cta > p{
  color: var(--bulku-text-on-dark-soft);
  font-size: 18px;
  line-height: 1.6;
  margin-bottom: 40px;
}
.bulku-cta .wp-block-buttons ,
.minoka-cta .wp-block-buttons{ justify-content: center; }

/* Buttons */
.bulku-btn-primary .wp-block-button__link,
.minoka-btn-primary .wp-block-button__link,
.bulku-btn-primary > a ,
.minoka-btn-primary > a{
  background: var(--bulku-accent);
  color: #ffffff;
  border: 2px solid var(--bulku-accent);
  border-radius: var(--bulku-radius-sm);
  padding: 14px 32px;
  font-size: 17px;
  font-weight: 700;
  text-decoration: none;
  display: inline-block;
  transition: filter 0.15s ease, transform 0.15s ease;
}
.bulku-btn-primary .wp-block-button__link:hover,
.minoka-btn-primary .wp-block-button__link:hover,
.bulku-btn-primary > a:hover ,
.minoka-btn-primary > a:hover{
  filter: brightness(0.92);
  transform: translateY(-1px);
}
.bulku-btn-outline .wp-block-button__link,
.minoka-btn-outline .wp-block-button__link,
.bulku-btn-outline > a ,
.minoka-btn-outline > a{
  background: transparent;
  color: #ffffff;
  border: 2px solid #ffffff;
  border-radius: var(--bulku-radius-sm);
  padding: 14px 32px;
  font-size: 17px;
  font-weight: 600;
  text-decoration: none;
  display: inline-block;
  transition: background 0.15s ease;
}
.bulku-btn-outline .wp-block-button__link:hover,
.minoka-btn-outline .wp-block-button__link:hover,
.bulku-btn-outline > a:hover ,
.minoka-btn-outline > a:hover{
  background: rgba(255, 255, 255, 0.08);
}

/* On light backgrounds, outline button should pick up the accent color */
.bulku-section .bulku-btn-outline .wp-block-button__link,
.minoka-section .minoka-btn-outline .wp-block-button__link,
.bulku-section .bulku-btn-outline > a ,
.minoka-section .minoka-btn-outline > a{
  color: var(--bulku-accent);
  border-color: var(--bulku-accent);
}
.bulku-section .bulku-btn-outline .wp-block-button__link:hover,
.minoka-section .minoka-btn-outline .wp-block-button__link:hover,
.bulku-section .bulku-btn-outline > a:hover ,
.minoka-section .minoka-btn-outline > a:hover{
  background: rgba(49, 130, 206, 0.08);
}

/* When .bulku-hero / .bulku-cta sit at the very top/bottom of a page,
   pull them flush against the edge by canceling Kadence content padding.
   Applied to single-bulku CPT entries AND to the dedicated bulkU landing
   pages (page-id-898 = /en/bulku/, page-id-1712 = /bulku/ DE), which are
   regular WP pages using the same .minoka-* primitives. */
body.single-bulku .bulku-hero,
body.single-bulku .minoka-hero,
body.single-bulku .bulku-cta,
body.single-bulku .minoka-cta,
body.single-bulku .bulku-section,
body.single-bulku .minoka-section,
body.single-bulku .bulku-strip,
body.single-bulku .minoka-strip,
body.page-id-898 .bulku-hero,
body.page-id-898 .minoka-hero,
body.page-id-898 .bulku-cta,
body.page-id-898 .minoka-cta,
body.page-id-898 .bulku-section,
body.page-id-898 .minoka-section,
body.page-id-898 .bulku-strip,
body.page-id-898 .minoka-strip,
body.page-id-1712 .bulku-hero,
body.page-id-1712 .minoka-hero,
body.page-id-1712 .bulku-cta,
body.page-id-1712 .minoka-cta,
body.page-id-1712 .bulku-section,
body.page-id-1712 .minoka-section,
body.page-id-1712 .bulku-strip,
body.page-id-1712 .minoka-strip{
  width: 100vw;
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
}

/* On the bulkU landing pages (EN id 898, DE id 1712), hide the theme
   entry-header and trim entry-content padding so sections sit flush. */
body.page-id-898 .entry-header,
body.page-id-1712 .entry-header { display: none; }
body.page-id-898 .entry-content,
body.page-id-1712 .entry-content { padding: 0; }

/* When a class-based hero is present, suppress the default safety h1/h2
   padding inside .entry-content (the hero already provides the title). */
body.single-bulku:has(.bulku-hero) .entry-content > h1:first-child ,
body.single-bulku:has(.minoka-hero) .entry-content > h1:first-child{ display: none; }

/* =============================================================
   Wide section variants + grid helpers (for /en/bulku/ landing)
   ============================================================= */

.bulku-section.is-wide > * ,
.minoka-section.is-wide > *{ max-width: 1140px; }

.bulku-grid-3 ,
.minoka-grid-3{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 24px;
  margin: 32px 0 0;
}
.bulku-grid-2 ,
.minoka-grid-2{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 32px;
  margin: 32px 0 0;
}

/* Use-case card — extends .bulku-card with icon, role headline, list */
.bulku-card.is-use-case .bulku-use-case-icon ,
.minoka-card.is-use-case .minoka-use-case-icon{
  font-size: 36px;
  margin-bottom: 12px;
  display: block;
}
.bulku-card.is-use-case h3 ,
.minoka-card.is-use-case h3{ font-size: 22px; margin-bottom: 4px; }
.bulku-card.is-use-case h4 ,
.minoka-card.is-use-case h4{
  color: var(--bulku-accent);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  margin: 0 0 16px;
}
.bulku-card.is-use-case ul ,
.minoka-card.is-use-case ul{
  list-style: none;
  padding-left: 0;
  margin: 0;
}
.bulku-card.is-use-case li ,
.minoka-card.is-use-case li{
  padding: 7px 0 7px 22px;
  position: relative;
  color: var(--bulku-text-body);
  font-size: 14.5px;
  line-height: 1.55;
}
.bulku-card.is-use-case li::before ,
.minoka-card.is-use-case li::before{
  content: "›";
  position: absolute;
  left: 4px;
  color: var(--bulku-accent);
  font-weight: 700;
}
.bulku-card.is-use-case li strong ,
.minoka-card.is-use-case li strong{
  color: var(--bulku-text-primary);
  font-weight: 600;
}

/* Numbered step (variant of .bulku-step with circle number) */
.bulku-step.is-numbered ,
.minoka-step.is-numbered{ padding: 32px 28px; text-align: left; position: relative; }
.bulku-step.is-numbered .bulku-step-number ,
.minoka-step.is-numbered .minoka-step-number{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  background: var(--bulku-accent);
  color: #fff;
  border-radius: 999px;
  font-weight: 800;
  font-size: 18px;
  margin-bottom: 16px;
}

/* Pricing — annual sub-price, savings, guarantee text */
.bulku-pricing-card .bulku-pricing-period ,
.minoka-pricing-card .minoka-pricing-period{
  display: block;
  color: var(--bulku-text-soft);
  font-size: 14px;
  font-weight: 500;
  margin-top: -8px;
}
.bulku-pricing-card .bulku-pricing-annual ,
.minoka-pricing-card .minoka-pricing-annual{
  display: block;
  margin: -4px 0 4px;
  color: var(--bulku-text-soft);
  font-size: 14px;
}
.bulku-pricing-card .bulku-pricing-annual strong ,
.minoka-pricing-card .minoka-pricing-annual strong{ color: var(--bulku-text-primary); font-weight: 600; }
.bulku-pricing-card .bulku-pricing-savings ,
.minoka-pricing-card .minoka-pricing-savings{
  color: var(--bulku-success);
  font-weight: 700;
  margin-left: 6px;
}
.bulku-pricing-card .bulku-pricing-guarantee ,
.minoka-pricing-card .minoka-pricing-guarantee{
  font-size: 13px;
  color: var(--bulku-text-soft);
  margin: 12px 0 0;
}

/* Comparison table for Free vs Pro */
.bulku-compare-table ,
.minoka-compare-table{
  width: 100%;
  max-width: 720px;
  margin: 40px auto 0;
  border-collapse: collapse;
  background: var(--bulku-bg-card);
  border: 1px solid var(--bulku-border);
  border-radius: var(--bulku-radius);
  overflow: hidden;
}
.bulku-compare-table th,
.minoka-compare-table th,
.bulku-compare-table td ,
.minoka-compare-table td{
  padding: 12px 18px;
  text-align: left;
  border-bottom: 1px solid var(--bulku-border);
  font-size: 15px;
}
.bulku-compare-table thead th ,
.minoka-compare-table thead th{
  background: var(--bulku-bg-soft);
  font-weight: 700;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--bulku-text-primary);
}
.bulku-compare-table tbody td:nth-child(2),
.minoka-compare-table tbody td:nth-child(2),
.bulku-compare-table tbody td:nth-child(3) ,
.minoka-compare-table tbody td:nth-child(3){
  text-align: center;
  font-weight: 600;
  width: 96px;
}
.bulku-compare-table tbody tr:last-child td ,
.minoka-compare-table tbody tr:last-child td{ border-bottom: none; }

/* =============================================================
   Responsive
   ============================================================= */

@media (max-width: 960px) {
  body.single-bulku .entry-content { padding: 32px 20px 64px; }
  body.single-bulku .entry-content > h1:first-child { font-size: 34px; }
  body.single-bulku .entry-content h2 { font-size: 24px; margin: 40px 0 12px; }
  body.single-bulku .entry-content h3 { font-size: 19px; margin: 28px 0 10px; }
  .bulku-hero { padding: 70px 20px; }
  .bulku-hero h1 { font-size: 40px; }
  .bulku-hero .bulku-hero-subline { font-size: 17px; }
  .bulku-section, .bulku-strip { padding: 60px 20px; }
  .bulku-section h2 { font-size: 28px; }
  .bulku-cta { padding: 70px 20px; }
  .bulku-cta h2 { font-size: 32px; }
}

@media (max-width: 720px) {
  .bulku-strip .wp-block-columns,
  .minoka-strip .wp-block-columns,
  .bulku-pricing,
  .minoka-pricing,
  .bulku-comparison ,
  .minoka-comparison{
    grid-template-columns: 1fr;
  }
  .bulku-strip .wp-block-columns ,
  .minoka-strip .wp-block-columns{
    flex-direction: column;
    gap: 24px;
  }
  .bulku-strip .wp-block-column ,
  .minoka-strip .wp-block-column{
    flex-basis: 100% !important;
    width: 100% !important;
  }
}

@media (max-width: 640px) {
  body.single-bulku .entry-content > h1:first-child { font-size: 28px; }
  body.single-bulku .entry-content h2 { font-size: 22px; }
  .bulku-hero h1 ,
  .minoka-hero h1{ font-size: 32px; }
  .bulku-hero .bulku-hero-subline ,
  .minoka-hero .minoka-hero-subline{ font-size: 16px; }
  .bulku-cta h2 ,
  .minoka-cta h2{ font-size: 26px; }
  .bulku-pricing-card ,
  .minoka-pricing-card{ padding: 28px 24px; }
}

/* =============================================================
   Post-Kadence-migration primitives.
   These style the .minoka-* markup that replaces wp:kadence/* blocks
   after the content migration. Visuals match the previous Kadence
   safety layer (kt-row-layout-step, kt-info-box-callout-*,
   kt-info-box-card, kt-screenshot-placeholder) so pages do not
   shift visually when the content swaps over.
   ============================================================= */

/* Step block — when it has a .minoka-step-number child, render as
   a 2-col grid (number badge on left, content on right). Otherwise
   inherits the existing vertical card layout from .bulku-step. */
.minoka-step:has(> .minoka-step-number) {
  display: grid;
  grid-template-columns: 56px 1fr;
  gap: 6px 24px;
  align-items: start;
}
.minoka-step:has(> .minoka-step-number) > .minoka-step-number {
  grid-column: 1;
  grid-row: 1 / span 99;
  flex: 0 0 56px;
  width: 56px;
  height: 56px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--bulku-accent);
  color: #fff;
  border-radius: 999px;
  font-weight: 800;
  font-size: 22px;
  margin: 0;
  align-self: start;
}
.minoka-step:has(> .minoka-step-number) > h3,
.minoka-step:has(> .minoka-step-number) > h4,
.minoka-step:has(> .minoka-step-number) > p,
.minoka-step:has(> .minoka-step-number) > ul,
.minoka-step:has(> .minoka-step-number) > ol,
.minoka-step:has(> .minoka-step-number) > figure,
.minoka-step:has(> .minoka-step-number) > .wp-block-image {
  grid-column: 2;
}

/* Callout color variants — replace kt-info-box-callout-info/success/warning/danger */
.minoka-callout {
  background: var(--bulku-bg-callout);
  border-left: 4px solid var(--bulku-accent);
  border-radius: 0 var(--bulku-radius-sm) var(--bulku-radius-sm) 0;
  padding: 18px 24px;
  margin: 24px 0;
}
.minoka-callout p { margin: 0; color: var(--bulku-text-body); font-size: 16px; line-height: 1.65; }
.minoka-callout strong { color: var(--bulku-accent-deep); }

.minoka-callout.is-success {
  background: var(--bulku-bg-success);
  border-left-color: var(--bulku-success);
}
.minoka-callout.is-success strong { color: #047857; }

.minoka-callout.is-warning {
  background: var(--bulku-bg-warning);
  border-left-color: #f97316;
}
.minoka-callout.is-warning strong { color: #c2410c; }

.minoka-callout.is-danger {
  background: #fef2f2;
  border-left-color: var(--bulku-danger);
}
.minoka-callout.is-danger strong { color: #b91c1c; }

/* Screenshot placeholder — replaces kt-screenshot-placeholder figure.
   Empty placeholders (figcaption only, no image) are hidden until a real
   <img> is added to the figure; then the styled frame reappears. */
.minoka-screenshot:not(:has(img)) { display: none; }
.minoka-screenshot {
  background: linear-gradient(135deg, #f8f9fa, #ffffff);
  border: 2px dashed var(--bulku-border);
  border-radius: var(--bulku-radius);
  padding: 40px 32px;
  margin: 24px 0;
  text-align: center;
  color: var(--bulku-text-soft);
}
.minoka-screenshot img { max-width: 100%; height: auto; border-radius: var(--bulku-radius-sm); }
.minoka-screenshot figcaption {
  margin-top: 12px;
  font-size: 14px;
  font-style: italic;
  color: var(--bulku-text-soft);
}

@media (max-width: 640px) {
  .minoka-step:has(> .minoka-step-number) {
    grid-template-columns: 44px 1fr;
    gap: 4px 16px;
  }
  .minoka-step:has(> .minoka-step-number) > .minoka-step-number {
    width: 44px;
    height: 44px;
    font-size: 18px;
  }
}