/* HWD Core - MRF layout fixes (scoped by body class + wrapper) */

/* Hide the default WP page title on /mrf/ (we inject our own 2-line title). */
body.hwd-mrf-page .wp-block-post-title,
body.hwd-mrf-page .entry-title{
  display:none !important;
}

/* The theme can also output small Woo icons (account/cart) directly under the main menu.
   Hide them on /mrf/ only to reclaim vertical space. */
body.hwd-mrf-page header .wp-block-woocommerce-customer-account,
body.hwd-mrf-page header .wp-block-woocommerce-mini-cart,
body.hwd-mrf-page header .wc-block-mini-cart,
body.hwd-mrf-page header .wp-block-woocommerce-mini-cart-contents{
  display:none !important;
}

/* Reduce excess whitespace above content area on /mrf/ only. */
body.hwd-mrf-page main,
body.hwd-mrf-page .wp-site-blocks main,
body.hwd-mrf-page .wp-site-blocks{
  padding-top: 0 !important;
  margin-top: 0 !important;
}

/* Twenty Twenty-Four uses a block gap between major template parts (header/main/footer).
   On /mrf/ that gap creates the large empty band above the title. Remove it here only. */
body.hwd-mrf-page .wp-site-blocks{
  gap: 0 !important;
}

/* Nudge the main content up a bit on /mrf/ only to eliminate the large "gap" under the header. */
body.hwd-mrf-page .wp-site-blocks > main{
  margin-top: -96px !important;
}

/* Collapse bottom spacing under the site header on /mrf/ only (theme adds generous spacing). */
body.hwd-mrf-page .wp-site-blocks > header,
body.hwd-mrf-page header.wp-block-template-part{
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
}

/* Also collapse padding on common header wrapper groups so /mrf/ starts higher. */
body.hwd-mrf-page .wp-site-blocks > header .wp-block-group,
body.hwd-mrf-page header.wp-block-template-part .wp-block-group{
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

/* Some layouts wrap header in a group — remove extra block spacing there too. */
body.hwd-mrf-page .wp-site-blocks > header *{
  margin-top: 0;
}

/* Scope wrapper: left-align and reserve right-side safe zone for Human AI box. */
body.hwd-mrf-page .hwd-mrf-scope{
  /* left-biased layout */
  /* Use full canvas width, but reserve the AI safe zone using padding (so content can be wider). */
  width: 100%;
  max-width: none;
  margin-left: 0 !important;
  margin-right: auto !important;

  /* Reserve the right-side safe zone for the chat widget.
     Default reduced to give your fragrance text more room; adjustable via HWD Core settings. */
  padding-right: calc(var(--hwd-ai-safe, 220px) + 18px);
  padding-left: 18px;
  padding-top: 0;
  padding-bottom: 22px;
  box-sizing: border-box;
}

/* IMPORTANT: the theme may constrain .entry-content/.wp-block-post-content to a centered max-width.
   On /mrf/, allow full-width canvas so the finder can be wide (still left-biased) and give text room. */
body.hwd-mrf-page .entry-content,
body.hwd-mrf-page .wp-block-post-content,
body.hwd-mrf-page .wp-block-post-content-is-layout-constrained{
  max-width: none !important;
  width: 100% !important;
}

/* Ensure the mood bar and grid are allowed to expand wider within our scope. */
body.hwd-mrf-page .hwd-mrf-scope .hwd-moodbar-wrap,
body.hwd-mrf-page .hwd-mrf-scope .hwd-mood-buttons,
body.hwd-mrf-page .hwd-mrf-scope .hwd-grid{
  max-width: none !important;
  width: 100% !important;
}

/* On smaller screens, do NOT reserve the safe zone (chat usually collapses anyway). */
@media (max-width: 900px){
  body.hwd-mrf-page .hwd-mrf-scope{
    max-width: 100%;
    padding-right: 0;
    padding-left: 14px;
  }
}

/* Title block: centered, tighter spacing */
body.hwd-mrf-page .hwd-mrf-title-wrap{
  text-align: center;
  margin: 2px 0 6px 0;
}
body.hwd-mrf-page .hwd-mrf-title-line1{
  margin: 0 0 6px 0;
  line-height: 1.1;
  font-weight: 800;
}
body.hwd-mrf-page .hwd-mrf-title-line2{
  margin: 0 0 8px 0;
  line-height: 1.1;
  font-weight: 800;
}

/* Prevent the title from wrapping into an unintended 3rd line on desktops.
   Allow wrapping on small screens. */
@media (min-width: 901px){
  body.hwd-mrf-page .hwd-mrf-title-line1,
  body.hwd-mrf-page .hwd-mrf-title-line2{
    white-space: nowrap;
  }
}

/* Tighten the mood bar spacing (works with your Mood Button Bar plugin classes). */
body.hwd-mrf-page .hwd-moodbar-wrap{
  margin: 8px 0 10px 0 !important;
}
body.hwd-mrf-page .hwd-gender-row{
  margin-bottom: 8px !important;
}
body.hwd-mrf-page .hwd-mood-buttons{
  margin: 8px 0 10px !important;
}

/* Left-align controls and grid (avoid centered layout). */
body.hwd-mrf-page .hwd-gender-row{
  justify-content: flex-start !important;
}
body.hwd-mrf-page .hwd-mood-buttons{
  justify-items: stretch;
}
body.hwd-mrf-page .hwd-grid{
  justify-content: flex-start !important;
}

/* Add a little left bias to the fragrance cards so they don't look centered under the title. */
body.hwd-mrf-page .hwd-grid{
  margin-top: 10px !important;
}

/* Sticky mode (JS will add .hwd-mrf-sticky-enabled to body when enabled) */
body.hwd-mrf-page.hwd-mrf-sticky-enabled .hwd-moodbar-wrap{
  position: sticky;
  top: 56px; /* leaves room for admin bar */
  z-index: 50;
  background: rgba(255,255,255,0.92);
  backdrop-filter: blur(4px);
  border-radius: 14px;
  padding: 8px 10px;
  box-shadow: 0 10px 26px rgba(0,0,0,0.08);
}

/* Remove odd extra empty paragraph spacing just above the mood bar if present */
body.hwd-mrf-page .hwd-mrf-scope p:empty{
  display:none !important;
}


/* v0.1.7 tuning: do NOT constrain overall width; instead reserve space with right padding.
   This makes the left panel much wider (Curtis requested ~+50%). */
body.hwd-mrf-page .hwd-mrf-scope{
  max-width: none !important;
  width: 100% !important;
}

/* Reduce extra top padding/margins in the main content area on /mrf/ */
body.hwd-mrf-page main.wp-block-group,
body.hwd-mrf-page main.site-main,
body.hwd-mrf-page main{
  padding-top: 0 !important;
  margin-top: 0 !important;
}

/* If theme uses a constrained layout wrapper, let /mrf/ go wider */
body.hwd-mrf-page .wp-site-blocks,
body.hwd-mrf-page .wp-site-blocks > *{
  max-width: none;
}

/* Ensure our top anchor doesn't force a mid-page starting point */
body.hwd-mrf-page #hwd-mrf-top{
  scroll-margin-top: 0 !important;
}