/* ==========================================================================
   RECIPE HUB — discovery dashboard layer
   Renders inside the hub root, so every existing delegated handler
   (data-view / data-save / data-coll / data-prof / data-rhx-tab) still works.
   ========================================================================== */
#page-recipe-hub{
  --hu-navy:#243447; --hu-sage:#5F7350; --hu-sage-soft:#EEF4EC; --hu-leaf:#7D9E77;
  --hu-warm-white:#FBFAF8; --hu-cream:#FBF8F2; --hu-blush:#F6EDE7;
  --hu-terracotta-soft:#F1E3D8; --hu-gold:#CF9E3F; --hu-text:#2B2B2B;
  --hu-muted:#657482;                     /* 4.80:1 on white; #6A7A88 was 4.42, just under AA */
  --hu-border:#E8E4DC;
}
.rd-wrap{ max-width:1180px; margin-inline:auto; padding-inline:clamp(18px,5vw,64px); }
.rd-sec{ padding-block:clamp(34px,5vw,60px); }
/* every section band is white — she asked for a white page with no coloured
   blocks behind Just for you / Trending / Global Kitchen / Pantry / Community */
.rd-sec, .rd-sec--sage, .rd-sec--white, .rd-sec--warm,
.rd-sec--blush, .rd-sec--cream{ background:#fff !important; }
#page-recipe-hub #rdGlobal{ background:#fff !important; }
.rd-eyebrow{ font-size:.66rem; font-weight:800; letter-spacing:.18em; text-transform:uppercase; margin:0 0 8px;
  color:var(--hu-sage) !important; -webkit-text-fill-color:var(--hu-sage) !important; }
.rd-h2{ font-family:'Playfair Display',Georgia,serif; font-weight:700; font-size:clamp(1.35rem,2.6vw,1.85rem);
  line-height:1.15; margin:0 0 8px; color:var(--hu-navy) !important; -webkit-text-fill-color:var(--hu-navy) !important; }
.rd-sub{ margin:0 0 22px; font-size:.95rem; line-height:1.65; max-width:64ch;
  color:var(--hu-muted) !important; -webkit-text-fill-color:var(--hu-muted) !important; }
.rd-head{ display:flex; align-items:flex-end; justify-content:space-between; gap:20px; flex-wrap:wrap; }

/* ---------------------------------------------------------------- buttons */
.rd-btn{ display:inline-flex; align-items:center; justify-content:center; gap:8px; cursor:pointer;
  font-family:inherit; font-size:.88rem; font-weight:800; border-radius:999px; padding:12px 22px;
  min-height:46px; border:1px solid rgba(18,33,58,.18); background:#fff;
  color:var(--hu-navy) !important; -webkit-text-fill-color:var(--hu-navy) !important;
  transition:background .16s, border-color .16s, transform .16s; text-decoration:none; }
.rd-btn:hover{ background:var(--hu-sage-soft); border-color:var(--hu-leaf); transform:translateY(-1px); }
.rd-btn--primary{ background:var(--hu-navy) !important; border-color:var(--hu-navy) !important;
  color:#fff !important; -webkit-text-fill-color:#fff !important; }
.rd-btn--primary:hover{ background:#31465F !important; }
.rd-btn--sm{ min-height:44px; padding:10px 16px; font-size:.8rem; }
.rd-btn--link{ background:none; border:0; padding:6px 8px; min-height:44px; text-decoration:underline;
  color:var(--hu-sage) !important; -webkit-text-fill-color:var(--hu-sage) !important; }
.rd-btn:focus-visible, .rd-tile:focus-visible, .rd-card:focus-visible,
.rd-save:focus-visible, .rd-prof:focus-visible{ outline:3px solid var(--hu-gold); outline-offset:2px; }

/* ------------------------------------------------------------------- hero */
/* NOTE: do not add a `rd-hero` class here — the project already has a
   `.rd-hero *{color:#fff!important}` rule for its dark heroes, which made this
   hero's eyebrow and copy invisible once the background went white. */
/* banner hero: her artwork on top, real controls beneath */
#page-recipe-hub .rd-hero-art{ display:block; width:100%; height:auto; border-radius:22px; }
#page-recipe-hub .rd-hero-copy{
  position:absolute !important; width:1px !important; height:1px !important;
  overflow:hidden !important; clip:rect(0 0 0 0) !important; white-space:nowrap !important;
}
#page-recipe-hub #rdHero .rd-searchrow{ margin:22px 0 14px; }
#page-recipe-hub #rdHero .rd-hero-cta{ justify-content:flex-start; }
@media (max-width:900px){
  /* the banner's baked text is unreadable at phone width — show the real copy */
  #page-recipe-hub .rd-hero-art{ display:none; }
  #page-recipe-hub .rd-hero-copy{
    position:static !important; width:auto !important; height:auto !important;
    overflow:visible !important; clip:auto !important; white-space:normal !important;
    text-align:center; margin-bottom:6px;
  }
  #page-recipe-hub #rdHero h1{ font-size:clamp(1.9rem,7vw,2.4rem); margin-bottom:10px; }
  #page-recipe-hub #rdHero .rd-lede{ margin-inline:auto; }
  #page-recipe-hub #rdHero .rd-hero-cta{ justify-content:center; }
  #page-recipe-hub #rdHero .rd-hero-cta .rd-btn{ flex:1 1 auto; }
}
#rdHero{ background:#fff;
  border-bottom:1px solid var(--hu-border); padding-block:clamp(28px,4vw,48px); }
.rd-hero-grid{ display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
  gap:clamp(24px,4vw,52px); align-items:center; }
#rdHero h1{ font-family:'Playfair Display',Georgia,serif; font-weight:700;
  font-size:clamp(1.9rem,3.6vw,2.75rem); line-height:1.06; margin:0 0 12px;
  color:var(--hu-navy) !important; -webkit-text-fill-color:var(--hu-navy) !important; }
#rdHero p.rd-lede{ font-size:1rem; line-height:1.7; margin:0 0 20px; max-width:52ch;
  color:var(--hu-muted) !important; -webkit-text-fill-color:var(--hu-muted) !important; }
.rd-searchrow{ display:flex; gap:10px; flex-wrap:wrap; margin-bottom:16px; }
.rd-search{ flex:1 1 260px; min-width:0; border:1.5px solid var(--hu-border); border-radius:16px;
  padding:13px 16px; font-family:inherit; font-size:.95rem; background:#fff; color:var(--hu-navy); min-height:50px; }
.rd-search:focus{ outline:none; border-color:var(--hu-leaf); box-shadow:0 0 0 3px rgba(125,158,119,.16); }
.rd-hero-cta{ display:flex; gap:10px; flex-wrap:wrap; }

/* cook-as selector */
.rd-cookas{ position:relative; }
.rd-cookas-btn{ display:inline-flex; align-items:center; gap:9px; cursor:pointer; font-family:inherit;
  font-size:.86rem; font-weight:700; border:1.5px solid var(--hu-border); background:#fff;
  border-radius:16px; padding:0 16px; min-height:50px;
  color:var(--hu-navy) !important; -webkit-text-fill-color:var(--hu-navy) !important; }
.rd-cookas-btn:hover{ border-color:var(--hu-leaf); }
.rd-cookas-av{ width:26px; height:26px; border-radius:50%; display:grid; place-items:center; font-size:.85rem; }
.rd-pop{ position:absolute; z-index:40; top:calc(100% + 8px); left:0; min-width:210px; background:#fff;
  border:1px solid var(--hu-border); border-radius:18px; padding:8px; box-shadow:0 18px 44px rgba(36,52,71,.14); }
.rd-prof{ display:flex; align-items:center; gap:10px; width:100%; text-align:left; cursor:pointer;
  font-family:inherit; font-size:.88rem; font-weight:700; background:none; border:0; border-radius:12px;
  padding:9px 10px; min-height:44px;
  color:var(--hu-navy) !important; -webkit-text-fill-color:var(--hu-navy) !important; }
.rd-prof:hover{ background:var(--hu-sage-soft); }
.rd-prof[aria-checked="true"]{ background:var(--hu-navy); color:#fff !important; -webkit-text-fill-color:#fff !important; }

/* hero collage */
.rd-collage{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); grid-template-rows:repeat(2,1fr);
  gap:12px; }
.rd-collage figure{ margin:0; border-radius:22px; overflow:hidden; background:var(--hu-sage-soft);
  aspect-ratio:4/3; position:relative; }
.rd-collage figure:first-child{ grid-row:span 2; aspect-ratio:auto; min-height:100%; }
.rd-collage img{ width:100%; height:100%; object-fit:cover; display:block; }

/* ---------------------------------------------------------------- imagery */
.rd-img{ position:relative; overflow:hidden; background:var(--hu-sage-soft); aspect-ratio:4/3; }
.rd-img img{ width:100%; height:100%; object-fit:cover; display:block; }
.rd-img-fb{ position:absolute; inset:0; display:grid; place-items:center; gap:6px;
  background:radial-gradient(circle at 30% 25%, rgba(255,255,255,.75), transparent 60%); }
.rd-img-fb span{ font-size:1.9rem; }
.rd-img-fb b{ font-size:.62rem; font-weight:800; letter-spacing:.14em; text-transform:uppercase;
  color:var(--hu-sage) !important; -webkit-text-fill-color:var(--hu-sage) !important; }

/* ------------------------------------------------------------------ cards */
.rd-card{ position:relative; display:flex; flex-direction:column; background:#fff;
  border:1px solid var(--hu-border); border-radius:22px; overflow:hidden; text-align:left;
  font-family:inherit; cursor:pointer; padding:0; width:100%;
  transition:transform .18s, box-shadow .18s, border-color .18s; }
.rd-card:hover{ transform:translateY(-3px); box-shadow:0 16px 38px rgba(36,52,71,.10); border-color:#DCE5D8; }
.rd-card-b{ padding:14px 16px 16px; display:flex; flex-direction:column; gap:6px; flex:1; }
.rd-cat{ font-size:.62rem; font-weight:800; letter-spacing:.12em; text-transform:uppercase; margin:0;
  color:var(--hu-sage) !important; -webkit-text-fill-color:var(--hu-sage) !important; }
.rd-title{ font-family:'Playfair Display',Georgia,serif; font-weight:700; font-size:1.02rem; line-height:1.25;
  margin:0; color:var(--hu-navy) !important; -webkit-text-fill-color:var(--hu-navy) !important; }
.rd-meta{ display:flex; flex-wrap:wrap; gap:10px; margin:2px 0 0; font-size:.78rem;
  color:var(--hu-muted) !important; -webkit-text-fill-color:var(--hu-muted) !important; }
.rd-desc{ font-size:.85rem; line-height:1.6; margin:2px 0 0;
  color:var(--hu-muted) !important; -webkit-text-fill-color:var(--hu-muted) !important; }
.rd-tag{ display:inline-block; border-radius:999px; padding:3px 10px; font-size:.68rem; font-weight:700;
  background:var(--hu-sage-soft); color:var(--hu-sage) !important; -webkit-text-fill-color:var(--hu-sage) !important; }
.rd-save{ position:absolute; right:10px; top:10px; z-index:3; width:44px; height:44px; border-radius:50%;
  display:grid; place-items:center; cursor:pointer; border:1px solid rgba(18,33,58,.10);
  background:rgba(255,255,255,.94); font-size:.95rem; line-height:1;
  color:var(--hu-navy) !important; -webkit-text-fill-color:var(--hu-navy) !important; }
.rd-save:hover{ background:#fff; }
.rd-save.is-on{ background:var(--hu-navy); border-color:var(--hu-navy); color:#fff !important; -webkit-text-fill-color:#fff !important; }

/* feature card */
.rd-feature{ display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,1fr); gap:0;
  background:#fff; border:1px solid var(--hu-border); border-radius:26px; overflow:hidden; }
.rd-feature .rd-img{ aspect-ratio:auto; min-height:300px; }
.rd-feature-b{ padding:clamp(20px,2.6vw,32px); display:flex; flex-direction:column; gap:10px; justify-content:center; }
.rd-feature-b .rd-title{ font-size:clamp(1.25rem,2.2vw,1.6rem); }
.rd-reason{ font-size:.9rem; line-height:1.6; margin:0; padding:11px 14px; border-radius:14px;
  background:#fff; border:1px solid var(--hu-border);
  color:var(--hu-navy) !important; -webkit-text-fill-color:var(--hu-navy) !important; }
.rd-feature-acts{ display:flex; gap:10px; flex-wrap:wrap; margin-top:6px; }

/* today grid */
.rd-today{ display:grid; grid-template-columns:minmax(0,2fr) minmax(0,1fr); gap:18px; align-items:stretch; }
.rd-today-side{ display:grid; grid-template-rows:1fr 1fr; gap:18px; }
.rd-side-card{ display:grid; grid-template-columns:104px minmax(0,1fr); }
.rd-side-card .rd-img{ aspect-ratio:auto; height:100%; }

/* explore tiles */
/* six square tiles on one row, compact, with the icon doing the heavy lifting */
.rd-tiles{ display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:12px; }
.rd-tile{ position:relative; display:flex; flex-direction:column; gap:7px; align-items:flex-start;
  justify-content:flex-start; text-align:left; font-family:inherit; cursor:pointer;
  border:1px solid var(--hu-border); border-radius:20px; padding:16px;
  aspect-ratio:1/1; overflow:hidden;
  transition:transform .18s, box-shadow .18s; }
.rd-tile:hover{ transform:translateY(-3px); box-shadow:0 16px 38px rgba(36,52,71,.10); }
.rd-tile-ic{ width:56px; height:56px; border-radius:17px; display:grid; place-items:center;
  background:var(--hu-sage-soft); font-size:1.9rem; flex:none; margin-bottom:2px; }
.rd-tile b{ font-family:'Playfair Display',Georgia,serif; font-size:.95rem; font-weight:700;
  line-height:1.2;
  color:var(--hu-navy) !important; -webkit-text-fill-color:var(--hu-navy) !important; }
.rd-tile span{ font-size:.74rem; line-height:1.4;
  color:var(--hu-muted) !important; -webkit-text-fill-color:var(--hu-muted) !important; }

/* trending editorial */
.rd-trend{ display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,1fr); gap:18px; }
.rd-trend-side{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; }

/* global kitchen */
.rd-gk{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:clamp(20px,3vw,40px);
  align-items:center; }
.rd-gk-pic{ border-radius:26px; overflow:hidden; aspect-ratio:4/3; background:#fff;
  border:1px solid var(--hu-border); position:relative; }
.rd-gk-pic img{ width:100%; height:100%; object-fit:cover; }
.rd-gk-dishes{ display:grid; gap:10px; margin:16px 0 18px; }
.rd-gk-dish{ display:flex; align-items:center; gap:12px; background:#fff; border:1px solid var(--hu-border);
  border-radius:16px; padding:10px 14px; text-align:left; font-family:inherit; cursor:pointer; width:100%;
  min-height:52px; transition:.15s; }
.rd-gk-dish:hover{ border-color:var(--hu-leaf); transform:translateX(2px); }
.rd-gk-dish b{ font-size:.9rem; font-weight:700;
  color:var(--hu-navy) !important; -webkit-text-fill-color:var(--hu-navy) !important; }
.rd-gk-dish span{ font-size:.78rem; color:var(--hu-muted) !important; -webkit-text-fill-color:var(--hu-muted) !important; }
.rd-region{ display:inline-block; border-radius:999px; padding:4px 12px; font-size:.66rem; font-weight:800;
  letter-spacing:.1em; text-transform:uppercase; background:#fff; border:1px solid var(--hu-border);
  color:var(--hu-sage) !important; -webkit-text-fill-color:var(--hu-sage) !important; margin-bottom:10px; }

/* horizontal rails */
.rd-rail{ display:flex; gap:14px; overflow-x:auto; padding-bottom:6px; scroll-snap-type:x proximity; }
.rd-rail > *{ flex:0 0 clamp(230px,26vw,290px); scroll-snap-align:start; }
.rd-compact{ display:grid; grid-template-columns:88px minmax(0,1fr); background:#fff;
  border:1px solid var(--hu-border); border-radius:18px; overflow:hidden; text-align:left;
  font-family:inherit; cursor:pointer; padding:0; transition:.16s; }
.rd-compact:hover{ border-color:var(--hu-leaf); transform:translateY(-2px); }
.rd-compact .rd-img{ aspect-ratio:auto; height:100%; }
.rd-compact-b{ padding:12px 14px; display:flex; flex-direction:column; gap:4px; justify-content:center; }
.rd-status{ font-size:.68rem; font-weight:800; letter-spacing:.08em; text-transform:uppercase;
  color:var(--hu-sage) !important; -webkit-text-fill-color:var(--hu-sage) !important; }

/* pantry + final CTA */
.rd-pantry{ display:flex; align-items:center; gap:22px; flex-wrap:wrap; background:#fff;
  border:1px solid var(--hu-border); border-radius:24px; padding:24px; }
.rd-pantry-ic{ width:64px; height:64px; border-radius:20px; display:grid; place-items:center;
  background:var(--hu-sage-soft); font-size:1.7rem; flex:none; }
.rd-pantry-b{ flex:1 1 260px; min-width:0; }
.rd-chips{ display:flex; gap:8px; flex-wrap:wrap; margin-top:8px; }
.rd-cta{ text-align:center; background:#fff; border:1px solid var(--hu-border);
  border-radius:28px; padding:clamp(28px,4vw,48px); }
.rd-cta .rd-h2{ margin-bottom:10px; }
.rd-cta .rd-sub{ margin-inline:auto; }
.rd-cta-acts{ display:flex; gap:12px; justify-content:center; flex-wrap:wrap; }
.rd-empty{ font-size:.9rem; font-style:italic; color:var(--hu-muted) !important; -webkit-text-fill-color:var(--hu-muted) !important; }

/* ------------------------------------------------------- existing chrome */
/* the old hero is fully replaced; display:none also takes its <h1> out of the
   accessibility tree, leaving #rdHero's h1 as the single page-level heading */
#page-recipe-hub .rh-hero{ display:none !important; }
#page-recipe-hub .rhx-cookas{ display:none !important; }        /* now inside the hero */
#page-recipe-hub .rhx-toolbar .rhx-search{ display:none !important; }
#page-recipe-hub .rhx-sortrow{ display:none !important; }       /* moves into results */
#page-recipe-hub.rd-results .rhx-sortrow{ display:flex !important; }
.rd-backbar{ display:flex; align-items:center; gap:12px; flex-wrap:wrap;
  max-width:1180px; margin:0 auto 4px; padding:18px clamp(18px,5vw,64px) 0; }
.rd-backbar[hidden]{ display:none !important; }
#page-recipe-hub #rdDisc[hidden]{ display:none !important; }
#page-recipe-hub #rdExplore[hidden]{ display:none !important; }
#page-recipe-hub #rdExplore .rd-sec{ padding-block:clamp(28px,4vw,44px) clamp(20px,3vw,32px); }
/* the six Explore tiles set their own inline background — override to white */
#page-recipe-hub .rd-tile{ background:#fff !important; }
#page-recipe-hub .rd-tile:hover{ background:var(--hu-sage-soft) !important; }
#page-recipe-hub .rd-tile-ic{ background:var(--hu-sage-soft); }
/* the dashboard replaces the hub's old stacked browse sections; they return
   automatically in the results state because that is a different view */
#page-recipe-hub:not(.rd-results) #rhxSecTrending,
/* revealed by the Cook by mood tile */
#page-recipe-hub:not(.rd-results) #rhxSecMood.rd-mood-open{ display:block !important; }
#page-recipe-hub:not(.rd-results) #rhxSecMood,
#page-recipe-hub:not(.rd-results) #rhxSecFamily,
#page-recipe-hub:not(.rd-results) #rhxSecKids,
#page-recipe-hub:not(.rd-results) #rhxSecGentle,
#page-recipe-hub:not(.rd-results) #rhxSecColour{ display:none !important; }

/* At six across a tile is ~140px square: an enlarged icon plus the title fills it,
   so the supporting line is dropped on that layout only. It still reaches screen
   readers through the tile's aria-label, and returns at three across and below. */
@media (min-width:1181px){
  .rd-tiles{ gap:10px; }
  .rd-tile{ padding:14px; gap:6px; justify-content:center; }
  .rd-tile-ic{ width:58px; height:58px; font-size:2rem; margin-bottom:4px; }
  .rd-tile b{ font-size:.9rem; }
  .rd-tile span:not(.rd-tile-ic){ display:none; }   /* the icon is a span too */
}
@media (max-width:1180px){ .rd-tiles{ grid-template-columns:repeat(3,minmax(0,1fr)); } }
@media (max-width:1024px){
  .rd-tiles{ grid-template-columns:repeat(3,minmax(0,1fr)); }
  .rd-today,.rd-trend,.rd-gk,.rd-feature{ grid-template-columns:minmax(0,1fr); }
  .rd-today-side{ grid-template-columns:repeat(2,minmax(0,1fr)); grid-template-rows:auto; }
  .rd-feature .rd-img{ min-height:220px; }
}
@media (max-width:820px){ .rd-hero-grid{ grid-template-columns:minmax(0,1fr); } }
@media (max-width:640px){
  .rd-tiles{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .rd-tile{ padding:14px; }
  .rd-tile-ic{ width:50px; height:50px; font-size:1.7rem; }
  .rd-today-side,.rd-trend-side{ grid-template-columns:minmax(0,1fr); }
  .rd-collage{ grid-template-rows:auto; }
  .rd-collage figure:first-child{ grid-row:auto; aspect-ratio:16/9; min-height:0; }
  .rd-hero-cta .rd-btn{ flex:1 1 auto; }
}
@media (prefers-reduced-motion:reduce){
  #page-recipe-hub [class^="rd-"]{ transition:none !important; }
  .rd-card:hover,.rd-tile:hover,.rd-compact:hover{ transform:none; }
}