/*
Theme Name:   Blocksy Child — YeshuaIsKing
Theme URI:    https://yeshuakisking.com
Description:  Child theme for YeshuaIsKing.com — Christian women's platform.
              Faith | Life | Purpose
Author:       YeshuaIsKing
Template:     blocksy
Version:      1.0.0
Text Domain:  blocksy-child
*/

/* ============================================================
   BRAND TOKENS — YeshuaIsKing.com
   Palette: Blush Rose · Sage · Warm Gold · Cream · Charcoal
   ============================================================ */

:root {
  /* ── Core brand colors ── */
  --yik-rose:        #B87A6E;   /* primary — buttons, links, highlights   */
  --yik-rose-dark:   #9A5F54;   /* hover state                            */
  --yik-rose-light:  #EDD9D5;   /* tints, badges, pill backgrounds        */
  --yik-sage:        #7B9E87;   /* secondary — tags, icons, borders       */
  --yik-sage-light:  #D6E6DC;   /* light sage tint                        */
  --yik-gold:        #C9A96E;   /* accent — scripture, decorative lines   */
  --yik-gold-light:  #F0E4CC;   /* light gold tint                        */
  --yik-cream:       #FAF8F5;   /* page background                        */
  --yik-cream-dark:  #F0EBE6;   /* card/sidebar backgrounds               */
  --yik-charcoal:    #2D2A26;   /* headings + primary body text           */
  --yik-muted:       #6B6560;   /* secondary text, meta, captions         */
  --yik-white:       #FFFFFF;

  /* ── Blocksy palette override (maps to Blocksy's internal vars) ── */
  --theme-palette-color-1: var(--yik-rose);
  --theme-palette-color-2: var(--yik-sage);
  --theme-palette-color-3: var(--yik-charcoal);
  --theme-palette-color-4: #4A4540;
  --theme-palette-color-5: var(--yik-cream-dark);
  --theme-palette-color-6: var(--yik-cream);
  --theme-palette-color-7: #DDD5CE;
  --theme-palette-color-8: var(--yik-white);

  /* ── Typography ── */
  --yik-font-heading: 'Playfair Display', Georgia, serif;
  --yik-font-body:    'Inter', system-ui, -apple-system, sans-serif;
  --yik-font-verse:   'Lora', Georgia, serif;

  /* ── Spacing & radii ── */
  --yik-radius-sm:   6px;
  --yik-radius-md:   12px;
  --yik-radius-lg:   20px;
  --yik-radius-pill: 999px;

  /* ── Shadows ── */
  --yik-shadow-sm:   0 2px 8px rgba(45,42,38,.06);
  --yik-shadow-md:   0 4px 20px rgba(45,42,38,.10);
  --yik-shadow-lg:   0 8px 40px rgba(45,42,38,.14);
}

/* ============================================================
   GLOBAL BASE
   ============================================================ */

body {
  background-color: var(--yik-cream) !important;
  color: var(--yik-charcoal);
  font-family: var(--yik-font-body);
  -webkit-font-smoothing: antialiased;
}

/* ── Headings ── */
h1, h2, h3, h4, h5, h6,
.entry-title,
.page-title,
.ct-post-title {
  font-family: var(--yik-font-heading) !important;
  color: var(--yik-charcoal);
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.25;
}

h1 { font-size: clamp(2rem, 5vw, 3.2rem); }
h2 { font-size: clamp(1.6rem, 3.5vw, 2.4rem); }
h3 { font-size: clamp(1.25rem, 2.5vw, 1.75rem); }

/* ── Links ── */
a {
  color: var(--yik-rose);
  transition: color .2s ease;
}
a:hover { color: var(--yik-rose-dark); }

/* ── Selection ── */
::selection {
  background: var(--yik-rose-light);
  color: var(--yik-charcoal);
}

/* ============================================================
   HEADER
   ============================================================ */

/* Header background */
.ct-header,
header.site-header,
[data-id="header"] {
  background-color: var(--yik-white) !important;
  border-bottom: 1px solid var(--yik-cream-dark);
  box-shadow: var(--yik-shadow-sm);
}

/* Site title / logo text */
.ct-site-title,
.site-title,
.ct-site-title a {
  font-family: var(--yik-font-heading) !important;
  font-size: 1.6rem !important;
  font-weight: 700 !important;
  color: var(--yik-charcoal) !important;
  letter-spacing: -0.02em;
}

/* Tagline */
.site-description,
.ct-site-description {
  font-family: var(--yik-font-body);
  font-size: 0.8rem;
  color: var(--yik-muted);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* ── Navigation ── */
.ct-menu > li > a,
.ct-nav-links > li > a,
nav.main-navigation a {
  font-family: var(--yik-font-body) !important;
  font-size: 0.875rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--yik-charcoal) !important;
  padding: 0.5rem 0.75rem;
  transition: color .2s ease;
}
.ct-menu > li > a:hover,
.ct-nav-links > li > a:hover {
  color: var(--yik-rose) !important;
}

/* Active nav item */
.ct-menu > .current-menu-item > a,
.ct-nav-links > .current-menu-item > a {
  color: var(--yik-rose) !important;
  position: relative;
}
.ct-menu > .current-menu-item > a::after {
  content: '';
  display: block;
  position: absolute;
  bottom: -4px;
  left: .75rem;
  right: .75rem;
  height: 2px;
  background: var(--yik-rose);
  border-radius: var(--yik-radius-pill);
}

/* Dropdown menus */
.ct-menu .sub-menu,
.ct-nav-links .sub-menu {
  background: var(--yik-white);
  border: 1px solid var(--yik-cream-dark);
  border-top: 3px solid var(--yik-rose);
  border-radius: 0 0 var(--yik-radius-md) var(--yik-radius-md);
  box-shadow: var(--yik-shadow-md);
}
.ct-menu .sub-menu a {
  font-size: 0.85rem !important;
  font-weight: 500 !important;
  color: var(--yik-charcoal) !important;
  padding: .6rem 1.2rem !important;
}
.ct-menu .sub-menu a:hover { color: var(--yik-rose) !important; }

/* ── Mobile hamburger ── */
.ct-toggle-dropdown-mobile-icon span,
.hamburger-box span {
  background-color: var(--yik-charcoal) !important;
}

/* ============================================================
   HERO / BANNER
   ============================================================ */

.ct-hero,
.hero-section,
.wp-block-cover,
[class*="hero"] {
  background-color: var(--yik-cream-dark);
}

/* Hero scripture pull-quote style */
.ct-hero .entry-title,
.hero-section h1 {
  font-family: var(--yik-font-heading) !important;
  color: var(--yik-charcoal);
}

/* ============================================================
   BLOG POST CARDS
   ============================================================ */

.ct-post-card,
article.type-post,
.ct-blog article,
.posts-grid article {
  background: var(--yik-white);
  border-radius: var(--yik-radius-md);
  overflow: hidden;
  box-shadow: var(--yik-shadow-sm);
  transition: box-shadow .25s ease, transform .25s ease;
  border: none;
}
.ct-post-card:hover,
.ct-blog article:hover,
.posts-grid article:hover {
  box-shadow: var(--yik-shadow-md);
  transform: translateY(-3px);
}

/* Card title */
.ct-post-card .entry-title a,
article.type-post .entry-title a {
  font-family: var(--yik-font-heading) !important;
  font-size: 1.2rem;
  color: var(--yik-charcoal);
  line-height: 1.3;
}
.ct-post-card .entry-title a:hover,
article.type-post .entry-title a:hover {
  color: var(--yik-rose);
}

/* Post meta (date, author) */
.ct-post-meta,
.entry-meta,
.post-meta {
  font-size: 0.75rem;
  color: var(--yik-muted);
  letter-spacing: 0.03em;
}

/* Category labels on cards */
.ct-post-card .categories,
.entry-categories a,
.cat-links a {
  display: inline-block;
  background: var(--yik-rose-light);
  color: var(--yik-rose-dark);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 3px 10px;
  border-radius: var(--yik-radius-pill);
  text-decoration: none;
}
.entry-categories a:hover,
.cat-links a:hover {
  background: var(--yik-rose);
  color: var(--yik-white);
}

/* Excerpt */
.ct-post-card .entry-excerpt p,
.entry-summary p {
  font-size: 0.9rem;
  color: var(--yik-muted);
  line-height: 1.7;
}

/* ── HIDE all recipe plugin UI on blog cards ── */
.wpzoom-recipe-card-block,
.wpzoom-rcb-block-print-btn,
.recipe-card-block-wpzoom,
.wprm-recipe-container,
.recipe-meta,
.recipe-time,
.prep-time,
.cook-time,
.wpzoom-rcb-header,
.wprm-recipe-block-container {
  display: none !important;
}

/* ============================================================
   SINGLE POST / ARTICLE
   ============================================================ */

.single .entry-content,
.page .entry-content {
  font-size: 1.0625rem;
  line-height: 1.85;
  color: var(--yik-charcoal);
  max-width: 720px;
  margin-inline: auto;
}

/* ── Scripture / Pull-quote block ── */
blockquote,
.wp-block-quote,
.scripture-verse {
  border-left: 4px solid var(--yik-gold) !important;
  background: var(--yik-gold-light) !important;
  border-radius: 0 var(--yik-radius-md) var(--yik-radius-md) 0;
  padding: 1.5rem 2rem !important;
  margin: 2rem 0 !important;
  font-family: var(--yik-font-verse) !important;
  font-style: italic;
  font-size: 1.125rem;
  color: var(--yik-charcoal);
  position: relative;
}
blockquote::before {
  content: '\201C';
  font-family: var(--yik-font-heading);
  font-size: 4rem;
  color: var(--yik-gold);
  position: absolute;
  top: -0.5rem;
  left: 1rem;
  line-height: 1;
  opacity: .4;
}
blockquote cite,
blockquote .wp-block-quote__citation {
  font-family: var(--yik-font-body) !important;
  font-style: normal;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--yik-muted);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  margin-top: .75rem;
  display: block;
}

/* ── Pull-quote block ── */
.wp-block-pullquote {
  border-top: 3px solid var(--yik-rose) !important;
  border-bottom: 3px solid var(--yik-rose) !important;
  padding: 1.5rem !important;
}
.wp-block-pullquote p {
  font-family: var(--yik-font-heading) !important;
  font-size: 1.4rem !important;
  color: var(--yik-charcoal) !important;
}

/* ── Article featured image ── */
.single .post-thumbnail img,
.single .featured-image img {
  border-radius: var(--yik-radius-md);
  box-shadow: var(--yik-shadow-md);
  width: 100%;
  height: auto;
}

/* ── Reading time / post meta on single ── */
.single .entry-meta {
  display: flex;
  align-items: center;
  gap: 1rem;
  font-size: 0.8rem;
  color: var(--yik-muted);
  margin-bottom: 1.5rem;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid var(--yik-cream-dark);
}

/* ── Author bio box ── */
.author-box,
.ct-author-box {
  background: var(--yik-cream-dark);
  border-radius: var(--yik-radius-md);
  border-left: 4px solid var(--yik-rose);
  padding: 1.5rem;
  margin: 2.5rem 0;
}

/* ============================================================
   SIDEBAR
   ============================================================ */

.ct-sidebar,
aside.sidebar,
#secondary {
  background: var(--yik-cream-dark);
  border-radius: var(--yik-radius-md);
  padding: 1.5rem;
}

/* Widget titles */
.widget-title,
.ct-widget-title,
.wp-block-heading {
  font-family: var(--yik-font-heading) !important;
  font-size: 1.1rem !important;
  color: var(--yik-charcoal);
  padding-bottom: .5rem;
  border-bottom: 2px solid var(--yik-rose-light);
  margin-bottom: 1rem !important;
}

/* ============================================================
   BUTTONS
   ============================================================ */

.ct-button,
.wp-block-button__link,
button[type="submit"],
input[type="submit"],
.btn,
a.button,
.woocommerce a.button,
.woocommerce button.button {
  background-color: var(--yik-rose) !important;
  color: var(--yik-white) !important;
  border: none !important;
  border-radius: var(--yik-radius-pill) !important;
  font-family: var(--yik-font-body) !important;
  font-size: 0.875rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.04em;
  padding: 0.75rem 1.75rem !important;
  transition: background-color .2s ease, transform .15s ease, box-shadow .2s ease !important;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(184,122,110,.25) !important;
}
.ct-button:hover,
.wp-block-button__link:hover,
button[type="submit"]:hover,
input[type="submit"]:hover,
.btn:hover {
  background-color: var(--yik-rose-dark) !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 6px 20px rgba(184,122,110,.35) !important;
}

/* Secondary / outline button */
.ct-button.outline,
.wp-block-button.is-style-outline .wp-block-button__link {
  background: transparent !important;
  color: var(--yik-rose) !important;
  border: 2px solid var(--yik-rose) !important;
  box-shadow: none !important;
}
.ct-button.outline:hover {
  background: var(--yik-rose-light) !important;
}

/* ============================================================
   WOOCOMMERCE / SHOP
   ============================================================ */

/* Shop page heading */
.woocommerce-products-header__title,
.shop-page-title {
  font-family: var(--yik-font-heading) !important;
  color: var(--yik-charcoal);
}

/* Product cards */
.woocommerce ul.products li.product,
.ct-woo-products .product {
  background: var(--yik-white);
  border-radius: var(--yik-radius-md);
  overflow: hidden;
  box-shadow: var(--yik-shadow-sm);
  transition: box-shadow .25s ease, transform .25s ease;
  border: 1px solid var(--yik-cream-dark);
  padding: 0 0 1rem 0 !important;
}
.woocommerce ul.products li.product:hover {
  box-shadow: var(--yik-shadow-md);
  transform: translateY(-3px);
}

/* Product title */
.woocommerce ul.products li.product .woocommerce-loop-product__title {
  font-family: var(--yik-font-heading) !important;
  font-size: 1rem !important;
  color: var(--yik-charcoal);
  padding: .75rem 1rem .25rem;
}

/* Price */
.woocommerce ul.products li.product .price,
.woocommerce .price {
  color: var(--yik-rose) !important;
  font-weight: 700;
  font-size: 1rem;
  padding: 0 1rem;
}

/* Sale badge */
.woocommerce span.onsale {
  background: var(--yik-rose) !important;
  border-radius: var(--yik-radius-pill) !important;
  min-height: unset !important;
  min-width: unset !important;
  padding: 4px 12px;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
}

/* Add to cart button */
.woocommerce ul.products li.product .add_to_cart_button {
  margin: .75rem 1rem 0;
  width: calc(100% - 2rem) !important;
  text-align: center;
  display: block;
}

/* Cart / checkout */
.woocommerce-page .woocommerce-ordering select,
.woocommerce select {
  border: 1px solid var(--yik-cream-dark);
  border-radius: var(--yik-radius-sm);
}

/* ── Digital download badge ── */
.downloadable-product-badge,
.product_type_simple.downloadable + span,
[data-product_type="simple"] .downloadable {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: var(--yik-sage-light);
  color: var(--yik-sage);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: 3px 10px;
  border-radius: var(--yik-radius-pill);
  margin-bottom: .5rem;
}

/* ============================================================
   CATEGORY PAGES — Pillar visual identity
   ============================================================ */

/* Well-Being category accent */
body.category-well-being .category-header,
body.category-well-being .archive-header {
  border-bottom: 4px solid #C8897A;
}

/* Spiritual Growth */
body.category-spiritual-growth .archive-header {
  border-bottom: 4px solid var(--yik-gold);
}

/* Relationships */
body.category-relationships .archive-header {
  border-bottom: 4px solid var(--yik-sage);
}

/* Personal Growth */
body.category-personal-growth .archive-header {
  border-bottom: 4px solid #A78BCA;
}

/* ============================================================
   SCRIPTURE CALLOUT COMPONENT
   Used as a Gutenberg block or shortcode output
   ============================================================ */

.scripture-callout {
  background: linear-gradient(135deg, var(--yik-gold-light) 0%, var(--yik-cream-dark) 100%);
  border: 1px solid var(--yik-gold);
  border-radius: var(--yik-radius-lg);
  padding: 2rem 2.5rem;
  text-align: center;
  margin: 2.5rem 0;
  position: relative;
  overflow: hidden;
}
.scripture-callout::before {
  content: '✦';
  position: absolute;
  top: 1rem;
  left: 1.5rem;
  color: var(--yik-gold);
  font-size: 1.2rem;
  opacity: .5;
}
.scripture-callout::after {
  content: '✦';
  position: absolute;
  bottom: 1rem;
  right: 1.5rem;
  color: var(--yik-gold);
  font-size: 1.2rem;
  opacity: .5;
}
.scripture-callout .verse-text {
  font-family: var(--yik-font-verse);
  font-style: italic;
  font-size: 1.2rem;
  color: var(--yik-charcoal);
  line-height: 1.7;
  margin-bottom: .75rem;
}
.scripture-callout .verse-ref {
  font-family: var(--yik-font-body);
  font-weight: 700;
  font-size: 0.8rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--yik-gold);
}

/* ============================================================
   PRAYER / DEVOTIONAL POST TYPE SPECIAL STYLING
   ============================================================ */

/* Prayer list items */
.prayer-list {
  list-style: none;
  padding: 0;
  margin: 1.5rem 0;
}
.prayer-list li {
  display: flex;
  gap: .75rem;
  padding: .75rem 0;
  border-bottom: 1px solid var(--yik-cream-dark);
  font-size: 0.95rem;
  line-height: 1.65;
}
.prayer-list li::before {
  content: '🙏';
  flex-shrink: 0;
  font-size: 1.1rem;
  margin-top: .05rem;
}

/* ============================================================
   EMAIL CAPTURE / NEWSLETTER CTA
   ============================================================ */

.newsletter-cta,
.ct-subscribe-form,
[class*="subscribe"] {
  background: linear-gradient(135deg, var(--yik-rose-light) 0%, var(--yik-cream-dark) 100%);
  border-radius: var(--yik-radius-lg);
  padding: 2.5rem;
  text-align: center;
  border: 1px solid var(--yik-rose-light);
  margin: 2.5rem 0;
}
.newsletter-cta h3,
.newsletter-cta h2 {
  font-family: var(--yik-font-heading) !important;
  color: var(--yik-charcoal);
  margin-bottom: .5rem;
}
.newsletter-cta p {
  color: var(--yik-muted);
  font-size: 0.95rem;
  margin-bottom: 1.25rem;
}

/* Email input */
.newsletter-cta input[type="email"],
.ct-subscribe-form input[type="email"] {
  border: 2px solid var(--yik-cream-dark);
  border-radius: var(--yik-radius-pill);
  padding: .65rem 1.25rem;
  font-family: var(--yik-font-body);
  font-size: .9rem;
  width: 100%;
  max-width: 340px;
  background: var(--yik-white);
  transition: border-color .2s;
}
.newsletter-cta input[type="email"]:focus {
  outline: none;
  border-color: var(--yik-rose);
}

/* ============================================================
   FOOTER
   ============================================================ */

.ct-footer,
footer.site-footer {
  background-color: var(--yik-charcoal) !important;
  color: #C5C0BB;
}

.ct-footer a,
footer.site-footer a {
  color: #C5C0BB;
  transition: color .2s;
}
.ct-footer a:hover,
footer.site-footer a:hover {
  color: var(--yik-rose-light);
}

/* Footer widget titles */
.ct-footer .widget-title,
footer .widget-title {
  font-family: var(--yik-font-heading) !important;
  color: var(--yik-white) !important;
  border-bottom-color: var(--yik-rose) !important;
  font-size: 1rem !important;
}

/* Footer bottom bar */
.ct-footer-copyright,
.site-info,
.footer-bottom {
  background-color: rgba(0,0,0,.25);
  padding: 1rem 0;
  font-size: 0.8rem;
  color: #8A857F;
  text-align: center;
}

/* ============================================================
   BREADCRUMBS
   ============================================================ */

.ct-breadcrumbs,
.breadcrumbs {
  font-size: 0.78rem;
  color: var(--yik-muted);
  padding: .75rem 0;
}
.ct-breadcrumbs a {
  color: var(--yik-rose);
}
.ct-breadcrumbs span {
  color: var(--yik-muted);
}

/* ============================================================
   TAGS
   ============================================================ */

.tagcloud a,
.tag-cloud-link,
.post-tags a {
  display: inline-block;
  background: var(--yik-cream-dark);
  color: var(--yik-muted) !important;
  border: 1px solid var(--yik-cream-dark);
  border-radius: var(--yik-radius-pill);
  font-size: 0.75rem !important;
  font-weight: 500;
  padding: .25rem .75rem;
  margin: .2rem;
  text-decoration: none;
  transition: all .2s;
}
.tagcloud a:hover,
.tag-cloud-link:hover {
  background: var(--yik-rose-light);
  border-color: var(--yik-rose-light);
  color: var(--yik-rose) !important;
}

/* ============================================================
   SEARCH
   ============================================================ */

.search-form input[type="search"],
.ct-search input {
  border: 2px solid var(--yik-cream-dark);
  border-radius: var(--yik-radius-pill);
  padding: .6rem 1.25rem;
  font-family: var(--yik-font-body);
  transition: border-color .2s;
}
.search-form input[type="search"]:focus {
  border-color: var(--yik-rose);
  outline: none;
}

/* ============================================================
   PAGINATION
   ============================================================ */

.ct-pagination a,
.page-numbers a {
  border: 2px solid var(--yik-cream-dark);
  border-radius: var(--yik-radius-sm);
  color: var(--yik-charcoal);
  transition: all .2s;
}
.ct-pagination a:hover,
.page-numbers a:hover {
  border-color: var(--yik-rose);
  color: var(--yik-rose);
  background: var(--yik-rose-light);
}
.ct-pagination .current,
.page-numbers.current {
  background: var(--yik-rose) !important;
  border-color: var(--yik-rose) !important;
  color: var(--yik-white) !important;
}

/* ============================================================
   APP PROMO BANNER
   For the Daily Verse AI app section
   ============================================================ */

.app-promo-banner {
  background: linear-gradient(135deg, var(--yik-charcoal) 0%, #3D3530 100%);
  border-radius: var(--yik-radius-lg);
  padding: 3rem 2rem;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 2rem;
  align-items: center;
  color: var(--yik-white);
  margin: 3rem 0;
}
.app-promo-banner h2,
.app-promo-banner h3 {
  font-family: var(--yik-font-heading) !important;
  color: var(--yik-white) !important;
  margin-bottom: .5rem;
}
.app-promo-banner p {
  color: #C5C0BB;
  font-size: .95rem;
  line-height: 1.7;
}
.app-promo-banner .app-badge {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  background: var(--yik-rose);
  color: var(--yik-white);
  border-radius: var(--yik-radius-pill);
  padding: .75rem 1.5rem;
  font-weight: 600;
  font-size: .875rem;
  text-decoration: none;
  margin-top: 1rem;
  transition: background .2s;
}
.app-promo-banner .app-badge:hover {
  background: var(--yik-rose-dark);
}
@media (max-width: 640px) {
  .app-promo-banner {
    grid-template-columns: 1fr;
  }
}

/* ============================================================
   UTILITY CLASSES (reusable in Gutenberg blocks)
   ============================================================ */

.text-rose    { color: var(--yik-rose) !important; }
.text-sage    { color: var(--yik-sage) !important; }
.text-gold    { color: var(--yik-gold) !important; }
.text-muted   { color: var(--yik-muted) !important; }
.bg-cream     { background: var(--yik-cream) !important; }
.bg-rose-tint { background: var(--yik-rose-light) !important; }
.bg-gold-tint { background: var(--yik-gold-light) !important; }

.divider-gold {
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--yik-gold), transparent);
  border: none;
  margin: 2rem 0;
}
.divider-rose {
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--yik-rose), transparent);
  border: none;
  margin: 2rem 0;
}

/* ── Soft card ── */
.soft-card {
  background: var(--yik-white);
  border-radius: var(--yik-radius-md);
  padding: 1.5rem;
  box-shadow: var(--yik-shadow-sm);
  border: 1px solid var(--yik-cream-dark);
}

/* ── Pill label ── */
.pill-label {
  display: inline-block;
  background: var(--yik-rose-light);
  color: var(--yik-rose-dark);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: 3px 12px;
  border-radius: var(--yik-radius-pill);
}
.pill-label.sage {
  background: var(--yik-sage-light);
  color: var(--yik-sage);
}
.pill-label.gold {
  background: var(--yik-gold-light);
  color: #8B6A32;
}

/* ============================================================
   RESPONSIVE
   ============================================================ */

@media (max-width: 768px) {
  .ct-header { padding: .75rem 1rem; }
  .scripture-callout { padding: 1.5rem; }
  blockquote { padding: 1rem 1.25rem !important; }
  .app-promo-banner { padding: 2rem 1.25rem; }
}

@media (max-width: 480px) {
  h1 { font-size: 1.8rem; }
  h2 { font-size: 1.5rem; }
  .ct-post-card { border-radius: var(--yik-radius-sm); }
}

/* ============================================================
   HOMEPAGE — FULL-WIDTH HERO (v3 — complete constraint chain fix)

   4 systems all impose width — must override all 4:
   1. WordPress:  .is-layout-constrained > * { max-width: --wp-content-size }
   2. Blocksy:    .ct-elementor-default-template .e-con { --container-max-width: --theme-block-max-width }
   3. Blocksy:    .ct-elementor-default-template .e-con>.e-con-inner { width: --theme-container-width }
   4. Elementor:  .e-con { --content-width: min(100%, var(--container-max-width,1140px)) }
   ============================================================ */

/* ── SYSTEM 1: WordPress is-layout-constrained ──────────────
   The rule is: .is-layout-constrained > :where(*) { max-width: var(--wp--style--global--content-size) }
   We override both the element AND its direct children.        */
.home .entry-content,
.home .entry-content.is-layout-constrained {
  max-width: none  !important;
  width: 100%      !important;
  padding-inline: 0 !important;
  margin-inline: 0  !important;
}
/* The :where() selector has zero specificity — one class beats it */
.home .entry-content.is-layout-constrained > .elementor {
  max-width: none !important;
  width: 100%     !important;
}

/* ── SYSTEM 2 + 3: Blocksy's --container-max-width override ──
   Blocksy sets this on ALL .e-con inside .ct-elementor-default-template.
   We override the CSS custom properties directly on the hero element
   so Elementor's own calc() uses our value instead.             */
.home [data-id="221ba95"] {
  --container-max-width: 100vw !important;
  --content-width: 100%        !important;
  --width: 100%                !important;
  /* Also nuke Blocksy's theme variables at this scope */
  --theme-block-max-width: none !important;
  --theme-normal-container-max-width: none !important;
  --wp--style--global--content-size: none  !important;
}

/* ── SYSTEM 4: Elementor .e-con-inner max-width ──────────────
   For full containers (e-con-full) there's no e-con-inner div,
   but the container itself uses --content-width for its width. */
.home [data-id="221ba95"],
.home [data-id="221ba95"] > .e-con-inner {
  max-width: 100vw !important;
  width: 100vw     !important;
}

/* ── HERO VISUAL: full-bleed image, proper height ────────────  */
.home [data-id="221ba95"] {
  position: relative          !important;
  left: 50%                   !important;
  margin-left: -50vw          !important;
  margin-right: -50vw         !important;
  min-height: 88vh            !important;
  display: flex               !important;
  align-items: center         !important;
  background-size: cover      !important;
  background-position: center center !important;
}

/* ── HERO INNER: readable text column, centred ───────────────  */
/* Override all 4 systems again for b050c06 inner wrapper        */
.home [data-id="b050c06"] {
  --container-max-width: 1300px !important;
  --content-width: 88%          !important;
  width: 88%                    !important;
  max-width: 1300px             !important;
  margin-inline: auto           !important;
  padding-top: 130px            !important;
  padding-bottom: 130px         !important;
  padding-inline: 0             !important;
  box-sizing: border-box        !important;
  /* Undo the vw trick for this child */
  position: static              !important;
  left: auto                    !important;
}

/* ── Boxed sections: keep Elementor's own boxed behaviour ────  */
.home .e-con-boxed {
  max-width: 100% !important;
}
.home .e-con-boxed > .e-con-inner {
  max-width: 1160px    !important;
  margin-inline: auto  !important;
  padding-inline: 24px !important;
  width: 100%          !important;
  box-sizing: border-box;
}

/* ── RESPONSIVE ──────────────────────────────────────────────  */
@media (max-width: 1200px) {
  .home [data-id="b050c06"] {
    width: 92%         !important;
  }
  .home [data-id="221ba95"] {
    min-height: 78vh   !important;
  }
}

@media (max-width: 1024px) {
  .home [data-id="b050c06"] {
    width: 94%              !important;
    padding-top: 90px       !important;
    padding-bottom: 90px    !important;
  }
  .home [data-id="221ba95"] {
    min-height: 70vh        !important;
  }
}

@media (max-width: 767px) {
  /* On mobile: remove the vw trick (causes horizontal scroll on small screens) */
  .home [data-id="221ba95"] {
    width: 100%             !important;
    max-width: 100%         !important;
    left: 0                 !important;
    margin-left: 0          !important;
    margin-right: 0         !important;
    min-height: 60vh        !important;
  }
  .home [data-id="b050c06"] {
    width: 100%             !important;
    max-width: 100%         !important;
    padding-top: 64px       !important;
    padding-bottom: 64px    !important;
    padding-inline: 20px    !important;
  }
  .home .e-con-boxed > .e-con-inner {
    padding-inline: 16px    !important;
  }
}

/* ============================================================
   NAVIGATION — YeshuaIsKing Brand Styles
   Added: step B — nav menu setup
   ============================================================ */

/* ── Header bar background ─────────────────────────────────── */
#header,
.site-header,
header.site-header {
  background-color: #1A0A00 !important;
  border-bottom: 1px solid rgba(201,169,110,0.18) !important;
}

/* ── Top-level nav links ────────────────────────────────────── */
.ct-header .ct-menu > li > a.ct-menu-link,
.ct-header .ct-menu > li > .ct-menu-link {
  color: #FAF8F5         !important;
  font-family: 'Inter', sans-serif !important;
  font-size: 14px        !important;
  font-weight: 500       !important;
  letter-spacing: 0.04em !important;
  text-transform: none   !important;
  padding: 8px 14px      !important;
  transition: color 0.2s ease !important;
}

.ct-header .ct-menu > li > a.ct-menu-link:hover,
.ct-header .ct-menu > li:hover > a.ct-menu-link,
.ct-header .ct-menu > li.current-menu-item > a.ct-menu-link,
.ct-header .ct-menu > li.current-menu-ancestor > a.ct-menu-link {
  color: #C9A96E !important;
}

/* ── Shop link — gold pill highlight ───────────────────────── */
.ct-header .ct-menu > li > a.ct-menu-link[href*="/shop/"] {
  background-color: rgba(201,169,110,0.15) !important;
  border: 1px solid rgba(201,169,110,0.4)  !important;
  border-radius: 999px                     !important;
  padding: 6px 18px                        !important;
  color: #C9A96E                           !important;
}
.ct-header .ct-menu > li > a.ct-menu-link[href*="/shop/"]:hover {
  background-color: #C9A96E !important;
  color: #1A0A00            !important;
}

/* ── Dropdown panels ────────────────────────────────────────── */
.ct-header .ct-menu .sub-menu,
.ct-header .ct-menu .ct-sub-menu {
  background-color: #231008    !important;
  border: 1px solid rgba(201,169,110,0.20) !important;
  border-radius: 10px          !important;
  box-shadow: 0 12px 40px rgba(0,0,0,0.55) !important;
  padding: 8px 0               !important;
  min-width: 210px             !important;
}

/* ── Dropdown links ─────────────────────────────────────────── */
.ct-header .ct-menu .sub-menu li a,
.ct-header .ct-menu .ct-sub-menu li a {
  color: #D4CFC9           !important;
  font-family: 'Inter', sans-serif !important;
  font-size: 13.5px        !important;
  font-weight: 400         !important;
  padding: 9px 20px        !important;
  display: block           !important;
  transition: color 0.15s ease, background-color 0.15s ease !important;
}
.ct-header .ct-menu .sub-menu li a:hover,
.ct-header .ct-menu .ct-sub-menu li a:hover {
  color: #FAF8F5           !important;
  background-color: rgba(201,169,110,0.12) !important;
}

/* ── Dropdown chevrons (Blocksy uses SVG arrows) ────────────── */
.ct-header .ct-menu li.menu-item-has-children > .ct-menu-link::after,
.ct-header .ct-menu li.menu-item-has-children > a::after {
  border-color: #C9A96E !important;
  opacity: 0.7          !important;
}

/* ── Site logo text / tagline ───────────────────────────────── */
.site-title a,
.ct-site-title,
.ct-header .site-title {
  color: #FAF8F5        !important;
  font-family: 'Playfair Display', Georgia, serif !important;
}
.site-description,
.ct-header .site-tagline {
  color: rgba(250,248,245,0.6) !important;
  font-size: 11px !important;
}

/* ── Mobile hamburger trigger ───────────────────────────────── */
.ct-header .ct-toggle-dropdown-mobile-trigger span,
.ct-header .menu-toggle span {
  background-color: #C9A96E !important;
}

/* ── Mobile off-canvas menu ─────────────────────────────────── */
.ct-panel,
.ct-drawer,
[data-behaviour*="slide-"],
.ct-off-canvas-content {
  background-color: #1A0A00 !important;
}
.ct-panel .ct-menu li a,
.ct-panel a,
.ct-off-canvas-content .ct-menu li a {
  color: #FAF8F5   !important;
  font-family: 'Inter', sans-serif !important;
}
.ct-panel .ct-menu li a:hover,
.ct-off-canvas-content .ct-menu li a:hover {
  color: #C9A96E !important;
}
.ct-panel .ct-menu .sub-menu li a,
.ct-off-canvas-content .ct-menu .sub-menu li a {
  color: #D4CFC9   !important;
  padding-left: 28px !important;
}

/* ── Sticky header ──────────────────────────────────────────── */
.ct-header.is-sticky,
.ct-header[data-sticky="yes"],
.site-header.is-sticky {
  background-color: rgba(26,10,0,0.97) !important;
  backdrop-filter: blur(10px)          !important;
  -webkit-backdrop-filter: blur(10px)  !important;
  box-shadow: 0 2px 20px rgba(0,0,0,0.4) !important;
}


/* ============================================================
   CONTENT BLOCKS — Devotional Post Template
   Step C: verse blocks, prayer, app CTA, video, steps
   ============================================================ */

/* ── 1. Scripture Callout (shortcode: [scripture ref="..."]) ── */
.scripture-callout {
  background: linear-gradient(135deg, #2D1A0E 0%, #1A0A00 100%);
  border-left: 4px solid #C9A96E;
  border-radius: 0 12px 12px 0;
  padding: 24px 28px 20px;
  margin: 32px 0;
  position: relative;
}
.scripture-callout::before {
  content: '\201C';
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 72px;
  color: rgba(201,169,110,0.25);
  position: absolute;
  top: -8px;
  left: 16px;
  line-height: 1;
}
.scripture-callout .verse-text {
  font-family: 'Lora', Georgia, serif;
  font-size: 17px;
  line-height: 1.75;
  color: #F0E4CC;
  font-style: italic;
  margin: 0 0 10px;
  padding-left: 8px;
}
.scripture-callout .verse-ref {
  display: block;
  font-family: 'Inter', sans-serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #C9A96E;
  padding-left: 8px;
}

/* ── 2. Inline verse — smaller, inline within body text ─────── */
.yik-verse-inline {
  border-left: 3px solid #C9A96E;
  padding: 4px 0 4px 14px;
  margin: 16px 0;
  font-family: 'Lora', Georgia, serif;
  font-style: italic;
  color: #F0E4CC;
  font-size: 15px;
  line-height: 1.7;
}

/* ── 3. Verse + Explanation block ───────────────────────────── */
.yik-verse-block {
  background-color: #F8F4EE;
  border: 1px solid #E8DFD0;
  border-radius: 12px;
  padding: 28px 28px 22px;
  margin: 28px 0;
}
.yik-verse-block .verse-number {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  background-color: #B87A6E;
  color: #fff;
  border-radius: 50%;
  font-size: 13px;
  font-weight: 700;
  font-family: 'Inter', sans-serif;
  margin-bottom: 12px;
}
.yik-verse-block blockquote {
  font-family: 'Lora', Georgia, serif;
  font-style: italic;
  font-size: 17px;
  line-height: 1.75;
  color: #2D2520;
  border: none;
  padding: 0;
  margin: 0 0 8px;
}
.yik-verse-block .verse-ref {
  font-family: 'Inter', sans-serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: #B87A6E;
  margin-bottom: 14px;
  display: block;
}
.yik-verse-block .verse-explanation {
  font-family: 'Inter', sans-serif;
  font-size: 15px;
  line-height: 1.7;
  color: #4A3F38;
  border-top: 1px solid #E0D6C8;
  padding-top: 14px;
  margin-top: 4px;
}
.yik-verse-block .verse-explanation strong {
  color: #B87A6E;
}

/* ── 4. Prayer block ────────────────────────────────────────── */
.yik-prayer-block {
  background: linear-gradient(160deg, #1D2D1A 0%, #0F1F0E 100%);
  border: 1px solid rgba(107,145,107,0.35);
  border-radius: 16px;
  padding: 36px 36px 30px;
  margin: 40px 0;
  text-align: center;
}
.yik-prayer-block .prayer-label {
  font-family: 'Inter', sans-serif;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: #7AB87A;
  margin-bottom: 16px;
  display: block;
}
.yik-prayer-block .prayer-title {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 22px;
  font-weight: 700;
  color: #F0E4CC;
  margin-bottom: 20px;
}
.yik-prayer-block .prayer-text {
  font-family: 'Lora', Georgia, serif;
  font-size: 16px;
  line-height: 1.9;
  color: #C8DCCA;
  font-style: italic;
  max-width: 580px;
  margin: 0 auto 18px;
}
.yik-prayer-block .prayer-amen {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 18px;
  font-weight: 700;
  color: #7AB87A;
  letter-spacing: 0.05em;
}

/* ── 5. Practical steps list ────────────────────────────────── */
.yik-steps {
  list-style: none;
  padding: 0;
  margin: 24px 0;
  counter-reset: steps;
}
.yik-steps li {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  padding: 16px 0;
  border-bottom: 1px solid #EEE8E0;
  counter-increment: steps;
}
.yik-steps li:last-child { border-bottom: none; }
.yik-steps li::before {
  content: counter(steps);
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 36px;
  height: 36px;
  background-color: #B87A6E;
  color: #fff;
  border-radius: 50%;
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  font-weight: 700;
  margin-top: 2px;
  flex-shrink: 0;
}
.yik-steps li .step-title {
  font-family: 'Inter', sans-serif;
  font-weight: 600;
  font-size: 15px;
  color: #2D2520;
  margin-bottom: 4px;
  display: block;
}
.yik-steps li .step-body {
  font-size: 14.5px;
  color: #5A4F48;
  line-height: 1.65;
}

/* ── 6. Prayer list (existing shortcode) ────────────────────── */
.prayer-list {
  list-style: none;
  padding: 0;
  margin: 16px 0;
}
.prayer-list li {
  padding: 10px 0 10px 28px;
  position: relative;
  border-bottom: 1px solid #EEE8E0;
  font-family: 'Lora', Georgia, serif;
  font-style: italic;
  font-size: 15px;
  color: #4A3F38;
  line-height: 1.6;
}
.prayer-list li:last-child { border-bottom: none; }
.prayer-list li::before {
  content: '✦';
  position: absolute;
  left: 0;
  top: 11px;
  color: #C9A96E;
  font-size: 12px;
}

/* ── 7. App CTA banner (shortcode: [yik_app_cta]) ───────────── */
.yik-app-cta-block {
  background: linear-gradient(135deg, #1A0A00 0%, #2D1A0E 50%, #1A0A00 100%);
  border: 1px solid rgba(201,169,110,0.3);
  border-radius: 16px;
  padding: 40px 36px;
  margin: 48px 0 32px;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.yik-app-cta-block::before {
  content: '';
  position: absolute;
  top: -60px; right: -60px;
  width: 200px; height: 200px;
  background: radial-gradient(circle, rgba(201,169,110,0.12) 0%, transparent 70%);
  pointer-events: none;
}
.yik-app-cta-block .cta-label {
  font-family: 'Inter', sans-serif;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: #C9A96E;
  margin-bottom: 12px;
  display: block;
}
.yik-app-cta-block .cta-heading {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 26px;
  font-weight: 700;
  color: #FAF8F5;
  margin-bottom: 12px;
  line-height: 1.3;
}
.yik-app-cta-block .cta-text {
  font-family: 'Inter', sans-serif;
  font-size: 15px;
  color: #C8BFB6;
  line-height: 1.65;
  max-width: 520px;
  margin: 0 auto 24px;
}
.yik-app-cta-block .cta-button {
  display: inline-block;
  background-color: #B87A6E;
  color: #FAF8F5 !important;
  font-family: 'Inter', sans-serif;
  font-size: 15px;
  font-weight: 600;
  padding: 14px 34px;
  border-radius: 999px;
  text-decoration: none !important;
  transition: background-color 0.2s ease, transform 0.15s ease;
  letter-spacing: 0.02em;
}
.yik-app-cta-block .cta-button:hover {
  background-color: #C98A7E;
  transform: translateY(-2px);
}
.yik-app-cta-block .cta-sub {
  font-family: 'Inter', sans-serif;
  font-size: 12px;
  color: rgba(250,248,245,0.45);
  margin-top: 12px;
  display: block;
}

/* ── 8. Responsive video embed ──────────────────────────────── */
.yik-video-wrap {
  position: relative;
  padding-bottom: 56.25%; /* 16:9 */
  height: 0;
  overflow: hidden;
  border-radius: 12px;
  margin: 32px 0;
  background-color: #1A0A00;
  box-shadow: 0 8px 32px rgba(0,0,0,0.35);
}
.yik-video-wrap.yik-video-short {
  padding-bottom: 177.78%; /* 9:16 vertical short */
  max-width: 340px;
  margin-left: auto;
  margin-right: auto;
}
.yik-video-wrap iframe,
.yik-video-wrap video {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  border: none;
}
.yik-video-caption {
  text-align: center;
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  color: #8A7F78;
  margin-top: -20px;
  margin-bottom: 32px;
}

/* ── 9. Single post layout — readable max-width ─────────────── */
.single-devotional .entry-content,
.single-post .entry-content {
  max-width: 740px;
  margin-inline: auto;
  font-family: 'Inter', sans-serif;
  font-size: 17px;
  line-height: 1.78;
  color: #2D2520;
}
.single-devotional .entry-content h2,
.single-post .entry-content h2 {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 26px;
  color: #1A0A00;
  margin-top: 48px;
  margin-bottom: 16px;
}
.single-devotional .entry-content h3,
.single-post .entry-content h3 {
  font-family: 'Inter', sans-serif;
  font-size: 18px;
  font-weight: 600;
  color: #B87A6E;
  margin-top: 32px;
  margin-bottom: 12px;
}

/* ── 10. Post hero / featured image ─────────────────────────── */
.single-devotional .entry-header,
.single-post .entry-header {
  margin-bottom: 40px;
}
.post-topic-badge {
  display: inline-block;
  font-family: 'Inter', sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #B87A6E;
  background-color: rgba(184,122,110,0.1);
  border: 1px solid rgba(184,122,110,0.25);
  border-radius: 999px;
  padding: 4px 14px;
  margin-bottom: 16px;
  text-decoration: none;
}
.post-topic-badge:hover { background-color: rgba(184,122,110,0.2); color: #B87A6E; }

@media (max-width: 767px) {
  .scripture-callout  { padding: 18px 18px 16px; }
  .yik-prayer-block   { padding: 24px 20px 20px; }
  .yik-app-cta-block  { padding: 28px 20px; }
  .yik-app-cta-block .cta-heading { font-size: 21px; }
  .yik-verse-block    { padding: 20px 18px; }
}


/* ============================================================
   TOPIC LANDING PAGES — Well-Being / Spiritual Growth / etc.
   ============================================================ */

/* ── Topic Hero ─────────────────────────────────────────────── */
.yik-topic-hero {
  background: linear-gradient(160deg, #1A0A00 0%, #2D1A0E 40%, #1A1A2E 100%);
  padding: 80px 24px 72px;
  text-align: center;
  margin: -32px -9999px 48px;
  padding-left: calc(50% - 50vw + 24px);
  padding-right: calc(50% - 50vw + 24px);
  position: relative;
  overflow: hidden;
}
.yik-topic-hero::before {
  content: '';
  position: absolute;
  top: -80px; left: 50%;
  transform: translateX(-50%);
  width: 500px; height: 500px;
  background: radial-gradient(circle, rgba(201,169,110,0.10) 0%, transparent 65%);
  pointer-events: none;
}
.yik-topic-hero .topic-badge {
  display: inline-block;
  font-family: 'Inter', sans-serif;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #C9A96E;
  border: 1px solid rgba(201,169,110,0.4);
  border-radius: 999px;
  padding: 5px 18px;
  margin-bottom: 24px;
}
.yik-topic-hero h1 {
  font-family: 'Playfair Display', Georgia, serif !important;
  font-size: clamp(32px, 5vw, 52px) !important;
  font-weight: 700 !important;
  color: #FAF8F5 !important;
  line-height: 1.2 !important;
  margin: 0 auto 32px !important;
  max-width: 700px;
}
.yik-topic-hero .hero-verse-wrap {
  max-width: 680px;
  margin: 0 auto 28px;
  border-left: 4px solid #C9A96E;
  text-align: left;
  padding: 20px 28px;
  background: rgba(201,169,110,0.07);
  border-radius: 0 12px 12px 0;
}
.yik-topic-hero .hero-verse-text {
  font-family: 'Lora', Georgia, serif;
  font-style: italic;
  font-size: clamp(16px, 2.2vw, 19px);
  line-height: 1.75;
  color: #F0E4CC;
  margin: 0 0 10px;
}
.yik-topic-hero .hero-verse-ref {
  font-family: 'Inter', sans-serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #C9A96E;
}
.yik-topic-hero .hero-intro {
  font-family: 'Inter', sans-serif;
  font-size: 17px;
  color: rgba(250,248,245,0.72);
  line-height: 1.7;
  max-width: 580px;
  margin: 0 auto;
}

/* ── Sub-topic cards grid ───────────────────────────────────── */
.yik-subtopic-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 20px;
  margin: 40px 0 56px;
}
.yik-subtopic-card {
  display: block;
  background: #F8F4EE;
  border: 1px solid #E8DFD0;
  border-radius: 14px;
  padding: 28px 24px 24px;
  text-decoration: none !important;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.yik-subtopic-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 32px rgba(45,21,0,0.12);
}
.yik-subtopic-card .card-icon {
  font-size: 28px;
  display: block;
  margin-bottom: 12px;
}
.yik-subtopic-card h3 {
  font-family: 'Playfair Display', Georgia, serif !important;
  font-size: 20px !important;
  font-weight: 700 !important;
  color: #2D1A0E !important;
  margin: 0 0 8px !important;
}
.yik-subtopic-card p {
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  color: #6B5E54;
  line-height: 1.6;
  margin: 0 0 14px;
}
.yik-subtopic-card .card-link {
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  font-weight: 600;
  color: #B87A6E;
  letter-spacing: 0.03em;
}

/* ── Post grid (topic landing page) ────────────────────────── */
.yik-section-label {
  font-family: 'Inter', sans-serif;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #B87A6E;
  margin-bottom: 8px;
  display: block;
}
.yik-section-title {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 28px;
  font-weight: 700;
  color: #1A0A00;
  margin: 0 0 32px;
}
.yik-posts-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 24px;
  margin: 0 0 40px;
}
.yik-post-card {
  background: #FFFFFF;
  border: 1px solid #EEE8E0;
  border-radius: 14px;
  overflow: hidden;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  display: flex;
  flex-direction: column;
}
.yik-post-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 28px rgba(45,21,0,0.10);
}
.yik-post-card .card-thumb {
  width: 100%;
  aspect-ratio: 16/9;
  object-fit: cover;
  background: linear-gradient(135deg, #2D1A0E, #1A0A00);
}
.yik-post-card .card-thumb-placeholder {
  width: 100%;
  aspect-ratio: 16/9;
  background: linear-gradient(135deg, #2D1A0E 0%, #3D2A1E 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 36px;
}
.yik-post-card .card-body {
  padding: 20px 20px 18px;
  flex: 1;
  display: flex;
  flex-direction: column;
}
.yik-post-card .card-topic {
  font-family: 'Inter', sans-serif;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #B87A6E;
  margin-bottom: 8px;
}
.yik-post-card h3 {
  font-family: 'Playfair Display', Georgia, serif !important;
  font-size: 18px !important;
  font-weight: 700 !important;
  color: #1A0A00 !important;
  line-height: 1.35 !important;
  margin: 0 0 10px !important;
}
.yik-post-card h3 a {
  color: inherit !important;
  text-decoration: none !important;
}
.yik-post-card h3 a:hover { color: #B87A6E !important; }
.yik-post-card p {
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  color: #6B5E54;
  line-height: 1.6;
  margin: 0 0 14px;
  flex: 1;
}
.yik-post-card .card-read-link {
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  font-weight: 600;
  color: #B87A6E;
  text-decoration: none !important;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.yik-post-card .card-read-link::after {
  content: '→';
  transition: transform 0.15s ease;
}
.yik-post-card:hover .card-read-link::after { transform: translateX(3px); }

/* ── Topic intro text ───────────────────────────────────────── */
.yik-topic-intro {
  max-width: 720px;
  margin: 0 auto 52px;
  text-align: center;
}
.yik-topic-intro p {
  font-family: 'Inter', sans-serif;
  font-size: 17px;
  line-height: 1.75;
  color: #4A3F38;
}

/* ── Mobile ─────────────────────────────────────────────────── */
@media (max-width: 767px) {
  .yik-topic-hero          { padding: 52px 20px 44px; }
  .yik-topic-hero h1        { font-size: 28px !important; }
  .yik-topic-hero .hero-verse-wrap { padding: 14px 16px; }
  .yik-subtopic-grid        { grid-template-columns: 1fr; gap: 14px; }
  .yik-posts-grid           { grid-template-columns: 1fr; }
}

/* ============================================================
   TOPIC HERO — FIXES
   Fix 1: full-width breakout  Fix 2: verse text → black
   ============================================================ */

/* ── Allow overflow so -50vw trick can escape the container ── */
.page-id-926 .entry-content,
.page-id-927 .entry-content,
.page-id-928 .entry-content,
.page .entry-content.is-layout-constrained {
  overflow: visible  !important;
  max-width: none    !important;
}

/* ── Full-width hero breakout (same technique as homepage) ─── */
.yik-topic-hero {
  position:      relative    !important;
  left:          50%         !important;
  margin-left:   -50vw       !important;
  margin-right:  -50vw       !important;
  width:         100vw       !important;
  max-width:     100vw       !important;
  box-sizing:    border-box  !important;
  /* re-state the inner padding so content stays readable */
  padding-top:   80px        !important;
  padding-bottom: 72px       !important;
  padding-left:  max(24px, calc(50vw - 560px))  !important;
  padding-right: max(24px, calc(50vw - 560px))  !important;
}

/* ── Verse box: white card on dark hero ─────────────────────── */
.yik-topic-hero .hero-verse-wrap {
  background:    rgba(255, 250, 244, 0.96) !important;
  border-left:   4px solid #C9A96E        !important;
  border-radius: 0 12px 12px 0            !important;
  padding:       22px 28px                !important;
  box-shadow:    0 4px 20px rgba(0,0,0,0.18) !important;
}

/* ── Verse TEXT → dark/black as requested ───────────────────── */
.yik-topic-hero .hero-verse-text {
  color:       #1A0A00  !important;
  font-style:  italic   !important;
  font-family: 'Lora', Georgia, serif !important;
  font-size:   clamp(16px, 2vw, 18px) !important;
  line-height: 1.75     !important;
  margin:      0 0 10px !important;
}

/* ── Verse reference stays rose-gold ───────────────────────── */
.yik-topic-hero .hero-verse-ref {
  color:          #B87A6E              !important;
  font-family:    'Inter', sans-serif  !important;
  font-size:      11px                 !important;
  font-weight:    700                  !important;
  letter-spacing: 0.1em               !important;
  text-transform: uppercase            !important;
  background:     transparent          !important;
  padding:        0                    !important;
}

/* ── Hero heading + intro text stay white on dark bg ────────── */
.yik-topic-hero h1 {
  color: #FAF8F5 !important;
}
.yik-topic-hero .hero-intro {
  color: rgba(250,248,245,0.75) !important;
}

/* ── Mobile full-width reset ────────────────────────────────── */
@media (max-width: 767px) {
  .yik-topic-hero {
    padding-left:  20px !important;
    padding-right: 20px !important;
    padding-top:   52px !important;
    padding-bottom: 44px !important;
  }
}