
/* Recipe Hub hero, redesigned to the Habitually U banner pattern used on
   HU Recommended / Hydration Tap / Seasonal Discoveries: soft gradient with two
   organic blobs, sage eyebrow, Playfair title, navy primary CTA, and the Cook As
   bar pulled into a proper card instead of a full-width strip. */
#page-recipe-hub .rh-hero{
  position:relative; overflow:hidden;
  background-color:#FBF8F2 !important;
  background-image:linear-gradient(135deg,#F4F8F2 0%,#FBF8F2 55%,#F6EDE7 100%) !important;
  border-bottom:1px solid rgba(18,33,58,.10);
  padding:46px 24px 40px !important;
}
#page-recipe-hub .rh-hero::before{
  content:""; position:absolute; right:-110px; top:-130px; width:360px; height:360px;
  border-radius:48% 52% 44% 56%/52% 44% 56% 48%; background:rgba(125,158,119,.11); pointer-events:none;
}
#page-recipe-hub .rh-hero::after{
  content:""; position:absolute; left:-90px; bottom:-150px; width:270px; height:270px;
  border-radius:50%; background:rgba(196,150,120,.10); pointer-events:none;
}
#page-recipe-hub .rh-hero > *{ position:relative; z-index:1; }

/* the loose emoji row becomes one deliberate pill */
#page-recipe-hub .rh-hero-emojis{
  display:inline-flex; align-items:center; justify-content:center;
  background:#ffffff !important; border:1px solid rgba(18,33,58,.10);
  border-radius:999px; padding:7px 20px 7px 26px;
  font-size:1.15rem !important; letter-spacing:.34em !important;
  margin:0 auto 16px; box-shadow:0 2px 10px rgba(36,52,71,.05);
}
#page-recipe-hub .rh-hero-eyebrow{
  font-size:.68rem !important; font-weight:800 !important; letter-spacing:.18em !important;
  text-transform:uppercase; margin-bottom:10px !important;
  color:#5C7A58 !important; -webkit-text-fill-color:#5C7A58 !important;
}
#page-recipe-hub .rh-hero h1{
  font-size:clamp(2rem,4vw,3rem) !important; line-height:1.05 !important; letter-spacing:-.01em;
  margin:0 0 12px !important;
  color:#243447 !important; -webkit-text-fill-color:#243447 !important;
}
#page-recipe-hub .rh-hero > p{
  max-width:60ch !important; margin:0 auto 22px !important;
  font-size:1.02rem !important; line-height:1.7 !important;
  color:#5A6472 !important; -webkit-text-fill-color:#5A6472 !important;
}

/* CTAs to the house style: navy primary, hairline outline secondary */
#page-recipe-hub .rhx-herocta{ display:flex; justify-content:center; gap:12px; flex-wrap:wrap; background:transparent !important; }
#page-recipe-hub .rhx-btn{
  min-height:46px; padding:12px 22px !important; font-size:.88rem !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;
  transition:background .16s, border-color .16s, transform .16s;
}
#page-recipe-hub .rhx-btn:hover{ background:#EEF4EC !important; border-color:#7D9E77 !important; transform:translateY(-1px); }
#page-recipe-hub .rhx-btn.is-primary{
  background:#243447 !important; border-color:#243447 !important;
  color:#ffffff !important; -webkit-text-fill-color:#ffffff !important;
}
#page-recipe-hub .rhx-btn.is-primary:hover{ background:#31465F !important; border-color:#31465F !important; }
#page-recipe-hub .rhx-btn:focus-visible{ outline:3px solid #CF9E3F; outline-offset:2px; }

/* Cook As: a card that belongs to the banner, not a full-width strip */
#page-recipe-hub .rhx-cookas{ background:transparent !important; border-bottom:0 !important; padding:18px 0 4px !important; }
#page-recipe-hub .rhx-cookas-in{
  background:#ffffff; border:1px solid rgba(18,33,58,.10); border-radius:20px;
  padding:14px 18px !important; gap:9px !important;
  box-shadow:0 2px 12px rgba(36,52,71,.04);
}
#page-recipe-hub .rhx-cookas-lbl{
  letter-spacing:.14em !important; font-size:.66rem !important;
  color:#5C7A58 !important; -webkit-text-fill-color:#5C7A58 !important;
}
#page-recipe-hub .rhx-pill{
  min-height:40px; padding:6px 15px 6px 7px !important; font-size:.79rem !important;
  border:1px solid rgba(18,33,58,.12) !important; background:#FDFCFA !important;
  color:#243447 !important; -webkit-text-fill-color:#243447 !important; transition:.15s;
}
#page-recipe-hub .rhx-pill:hover{ background:#EEF4EC !important; border-color:#7D9E77 !important; }
#page-recipe-hub .rhx-pill.is-on{
  background:#243447 !important; border-color:#243447 !important;
  color:#ffffff !important; -webkit-text-fill-color:#ffffff !important;
}
#page-recipe-hub .rhx-pill.is-on .rhx-pill-av{ background:rgba(255,255,255,.22) !important; }
#page-recipe-hub .rhx-pill:focus-visible{ outline:3px solid #CF9E3F; outline-offset:2px; }

@media (max-width:760px){
  #page-recipe-hub .rh-hero{ padding:34px 18px 30px !important; }
  #page-recipe-hub .rhx-herocta .rhx-btn{ flex:1 1 auto; }
  #page-recipe-hub .rhx-cookas-in{ padding:12px 14px !important; }
}
@media (prefers-reduced-motion:reduce){
  #page-recipe-hub .rhx-btn{ transition:none !important; }
  #page-recipe-hub .rhx-btn:hover{ transform:none; }
}
