/* Recipe Hub hero = her composed artwork. This version has "Add a Recipe" and
   "My Recipes" PAINTED INTO the image, so the real buttons are transparent
   hotspots sitting exactly on top of them — the art provides the look, the
   buttons provide the behaviour, and both scale together because the hotspots
   are positioned in percentages measured from the source image:
     navy pill  left 14.61%  width 13.93%
     white pill left 31.57%  width 12.39%
     both       top  47.08%  height  7.81%   (image is 1622x909) */
#page-recipe-hub .rh-hero{
  position:relative; overflow:hidden;
  background:#F7F1EA !important; background-image:none !important;
  border-bottom:1px solid rgba(18,33,58,.10);
  padding:0 !important;
}
#page-recipe-hub .rh-hero::before,
#page-recipe-hub .rh-hero::after{ display:none !important; }
#page-recipe-hub .rh-hero-art{ display:block; width:100%; height:auto; }

/* the artwork carries these, so keep them for screen readers but hide them */
#page-recipe-hub .rh-hero-emojis,
#page-recipe-hub .rh-hero-eyebrow,
#page-recipe-hub .rh-hero > h1,
#page-recipe-hub .rh-hero > p{
  position:absolute !important; width:1px !important; height:1px !important;
  overflow:hidden !important; clip:rect(0 0 0 0) !important; white-space:nowrap !important;
  margin:0 !important; padding:0 !important; border:0 !important;
}

#page-recipe-hub .rhx-herocta{
  position:absolute; left:14.61%; top:47.08%; width:29.35%; height:7.81%;
  display:flex; justify-content:flex-start !important; align-items:stretch; z-index:2;
  gap:10.32%;                       /* 3.03% of the image = 10.32% of this box */
  background:transparent !important; margin:0 !important; padding:0 !important;
}
/* transparent hotspots — the painted pills show through */
#page-recipe-hub .rhx-herocta .rhx-btn{
  flex:0 0 47.46%; height:100%;
  padding:0 !important; margin:0 !important; border:0 !important;
  background:transparent !important; box-shadow:none !important;
  font-size:0 !important; line-height:0 !important; color:transparent !important;
  -webkit-text-fill-color:transparent !important;
  border-radius:999px !important; cursor:pointer;
}
#page-recipe-hub .rhx-herocta .rhx-btn:not(.is-primary){ flex:0 0 42.22%; }
#page-recipe-hub .rhx-herocta .rhx-btn:hover{ background:rgba(255,255,255,.14) !important; }
#page-recipe-hub .rhx-herocta .rhx-btn:focus-visible{
  outline:3px solid #CF9E3F; outline-offset:3px; background:rgba(255,255,255,.18) !important;
}

/* Below 900px the composed artwork is too small to read and its painted buttons
   would be ~17px tall, so the hero reverts to real, reflowing text and buttons. */
@media (max-width:900px){
  #page-recipe-hub .rh-hero-art{ display:none; }
  #page-recipe-hub .rh-hero{
    padding:32px 20px 28px !important;
    background-image:linear-gradient(135deg,#F4F8F2 0%,#FBF8F2 55%,#F6EDE7 100%) !important;
    text-align:center;
  }
  #page-recipe-hub .rh-hero-eyebrow,
  #page-recipe-hub .rh-hero > h1,
  #page-recipe-hub .rh-hero > p{
    position:static !important; width:auto !important; height:auto !important;
    overflow:visible !important; clip:auto !important; white-space:normal !important;
  }
  #page-recipe-hub .rh-hero-eyebrow{
    font-size:.66rem !important; font-weight:800; letter-spacing:.18em; text-transform:uppercase;
    margin:0 0 8px !important; color:#5C7A58 !important; -webkit-text-fill-color:#5C7A58 !important;
  }
  #page-recipe-hub .rh-hero > h1{
    font-size:clamp(1.9rem,7vw,2.4rem) !important; line-height:1.05 !important; margin:0 0 10px !important;
    color:#243447 !important; -webkit-text-fill-color:#243447 !important;
  }
  #page-recipe-hub .rh-hero > p{
    max-width:46ch !important; margin:0 auto 18px !important; font-size:.98rem !important;
    line-height:1.65 !important; color:#5A6472 !important; -webkit-text-fill-color:#5A6472 !important;
  }
  #page-recipe-hub .rhx-herocta{
    position:static !important; width:auto !important; height:auto !important;
    justify-content:center !important; gap:10px !important; flex-wrap:wrap;
  }
  #page-recipe-hub .rhx-herocta .rhx-btn{
    flex:1 1 auto !important; min-height:46px; padding:12px 20px !important;
    font-size:.88rem !important; line-height:1.2 !important; border-radius:999px !important;
    background:#ffffff !important; border:1px solid rgba(18,33,58,.20) !important;
    color:#243447 !important; -webkit-text-fill-color:#243447 !important;
  }
  #page-recipe-hub .rhx-herocta .rhx-btn.is-primary{
    background:#243447 !important; border-color:#243447 !important;
    color:#ffffff !important; -webkit-text-fill-color:#ffffff !important;
  }
}