/* ═══════════════════════════════════════════════════════════════════════
   FULL-BLEED HEROES — Discover · My Kitchen · My Rhythm
   Edge to edge: no max-width cap, no side padding, no rounded corners.
   At 2:1 the height is always half the viewport width, so these get very
   tall on wide monitors — that is inherent to the artwork's ratio.
   To revert, delete this whole <style id="hu-hero-fullbleed"> block.
   ═══════════════════════════════════════════════════════════════════════ */

/* ---- DISCOVER ---- */
#page-discover .dsc-hero-img{
  max-width:none !important;
  margin:0 !important;
  padding:0 !important;
}
#page-discover .dsc-hero-img img{
  width:100% !important;
  border-radius:0 !important;
  box-shadow:none !important;
}

/* ---- MY KITCHEN (inside the React island, which sits in a max-w-7xl px-4 wrapper,
        so the hero must be pulled back out to the viewport edges) ---- */
#huKitchenReact .hu-mk-hero{
  margin-left:calc(50% - 50vw) !important;
  margin-right:calc(50% - 50vw) !important;
  margin-top:-48px !important;      /* cancel the island's py-12 top padding */
  margin-bottom:20px !important;
  width:100vw !important;
  max-width:100vw !important;
}
#huKitchenReact .hu-mk-hero-img{
  width:100% !important;
  border-radius:0 !important;
  box-shadow:none !important;
}

/* ---- HOMEPAGE ----
   .hey-wrap is used 7 times on the homepage, so this is scoped strictly to the ONE
   inside .hey-hero. The other six containers keep their 1180px cap. ---- */
#page-home .hey-hero{
  padding:0 !important;
}
#page-home .hey-hero .hey-wrap{
  max-width:none !important;
  padding:0 !important;
  margin:0 !important;
}
#page-home .hey-hero .heyban{
  border-radius:0 !important;
  box-shadow:none !important;
  overflow:visible !important;
}
#page-home .hey-hero .heyban-img{
  width:100% !important;
  max-width:none !important;
  border-radius:0 !important;
  display:block;
}

/* ---- pre-existing mobile bug (not caused by the full-bleed change) ----
   The homepage .hx-values grid keeps two columns on narrow phones and the items
   don't shrink, pushing the document to 405px in a 390px viewport. ---- */
@media (max-width:480px){
  #page-home .hx-values{ grid-template-columns:1fr !important; }
  #page-home .hx-value{ min-width:0 !important; }
  /* .sc-grid keeps two columns at 360px and its boxes don't shrink (min-width:auto) */
  #page-home .sc-grid{ grid-template-columns:1fr !important; }
  #page-home .sc-grid > *{ min-width:0 !important; }
}

/* ---- COMMUNITY HUB ---- */
#page-community-hub .ch-hero{
  background:#FBF6EC !important;
  padding:0 0 26px !important;
  min-height:0 !important;
  text-align:center;
}
#page-community-hub .ch-hero-img{ max-width:none; margin:0; }
#page-community-hub .ch-hero-img img{
  display:block; width:100%; height:auto;
  border-radius:0; box-shadow:none;
}
#page-community-hub .ch-hero-in{
  max-width:1180px; margin:0 auto; padding:22px 20px 0 !important;
  background:transparent !important;
}
/* the CTAs were white-on-dark; the artwork is cream, so re-tone them */
#page-community-hub .ch-hero-btns{
  display:flex; gap:10px; justify-content:center; flex-wrap:wrap; margin:0;
}
#page-community-hub .ch-hero .ch-btn{
  border-radius:999px; font-weight:800; font-size:.95rem;
  padding:13px 24px; min-height:46px; cursor:pointer; transition:.15s;
}
#page-community-hub .ch-hero .ch-btn-primary{
  background:#5E7E57 !important; border:2px solid #5E7E57 !important;
  color:#fff !important; -webkit-text-fill-color:#fff !important;
}
#page-community-hub .ch-hero .ch-btn-primary:hover{ background:#4d6a47 !important; }
#page-community-hub .ch-hero .ch-btn-ghost{
  background:#fff !important; border:2px solid #EAE2D4 !important;
  color:#5E7E57 !important; -webkit-text-fill-color:#5E7E57 !important;
}
#page-community-hub .ch-hero .ch-btn-ghost:hover{ border-color:#7d9e77 !important; }
#page-community-hub .ch-hero .ch-btn:focus-visible{ outline:3px solid #CF9E3F; outline-offset:2px; }
@media (max-width:640px){
  #page-community-hub .ch-hero .ch-btn{ width:100%; }
}

/* ---- FUTURE U ---- */
#page-rhythm .pmf-hero{
  background:#FBF6EC !important;
  padding:0 0 26px !important;
  min-height:0 !important;
  position:relative; text-align:center;
}
#page-rhythm .pmf-hero-img{ max-width:none; margin:0 0 20px; }
#page-rhythm .pmf-hero-img img{
  display:block; width:100%; height:auto; border-radius:0; box-shadow:none;
}
/* Back button was white-on-dark; the artwork is cream, so sit it on top in navy */
#page-rhythm .pmf-hero > button:first-child{
  position:absolute; top:14px; left:18px; z-index:5;
  background:#243447 !important; border:none !important;
  color:#fff !important; -webkit-text-fill-color:#fff !important;
  margin:0 !important; box-shadow:0 6px 16px rgba(36,52,71,.22);
}
/* chips + CTAs sit under the artwork on cream */
#page-rhythm .pmf-goal-chips,
#page-rhythm .pmf-cta-row{
  display:flex; flex-wrap:wrap; justify-content:center; gap:10px;
  max-width:1180px; margin:0 auto 14px; padding:0 20px;
}
#page-rhythm .pmf-hero .pmf-chip{
  background:#fff !important; border:1.5px solid #EAE2D4 !important;
  color:#5E7E57 !important; -webkit-text-fill-color:#5E7E57 !important;
  min-height:42px; border-radius:999px; cursor:pointer;
}
#page-rhythm .pmf-hero .pmf-chip.active{
  background:#5E7E57 !important; border-color:#5E7E57 !important;
  color:#fff !important; -webkit-text-fill-color:#fff !important;
}
#page-rhythm .pmf-hero .pmf-btn-primary{
  background:#5E7E57 !important; border:2px solid #5E7E57 !important;
  color:#fff !important; -webkit-text-fill-color:#fff !important;
  border-radius:999px; min-height:46px; padding:13px 26px; cursor:pointer;
}
#page-rhythm .pmf-hero .pmf-btn-ghost{
  background:#fff !important; border:2px solid #EAE2D4 !important;
  color:#5E7E57 !important; -webkit-text-fill-color:#5E7E57 !important;
  border-radius:999px; min-height:46px; padding:13px 26px; cursor:pointer;
}
#page-rhythm .pmf-hero .pmf-chip:focus-visible,
#page-rhythm .pmf-hero .pmf-btn-primary:focus-visible,
#page-rhythm .pmf-hero .pmf-btn-ghost:focus-visible{ outline:3px solid #CF9E3F; outline-offset:2px; }
@media (max-width:640px){
  #page-rhythm .pmf-hero .pmf-btn-primary,
  #page-rhythm .pmf-hero .pmf-btn-ghost{ width:100%; }
}

/* ---- LIFE MAP (React island) ----
   The island sits inside a max-w-7xl px-5 wrapper, so the hero is pulled back out
   to the viewport edges. The three CTAs stay on the cream below it. ---- */
#lifemapReact .hu-lm-hero{
  margin-left:calc(50% - 50vw) !important;
  margin-right:calc(50% - 50vw) !important;
  margin-top:-32px !important;      /* cancel the island's py-8 top padding */
  width:100vw !important; max-width:100vw !important;
  padding:0 0 22px !important;
  background:#FBF6EC !important;
  border-radius:0 !important;
}
#lifemapReact .hu-lm-hero-img{
  display:block; width:100%; height:auto;
  max-width:none !important;
  border-radius:0 !important; margin:0 0 20px !important;
}
#lifemapReact .hu-lm-hero .flex.flex-wrap{ padding:0 20px; }
@media (max-width:640px){
  #lifemapReact .hu-lm-hero{ margin-top:-24px !important; }
  #lifemapReact .hu-lm-hero button{ width:100%; justify-content:center; }
}

/* ---- PROFILE ----
   The hero was a dark navy gradient band built for white text. The artwork is cream
   and carries its own copy, so the band goes light and the avatar/pills/CTA — already
   white with navy text — get borders so they read on cream. ---- */
#page-profile > div:first-child{
  background:#FBF6EC !important;
  padding:0 0 30px !important;
}
#page-profile .prf-hero-img{ max-width:none; margin:0 0 22px; }
#page-profile .prf-hero-img img{
  display:block; width:100%; height:auto; border-radius:0; box-shadow:none;
}
/* Back button sits on the artwork */
#page-profile > div:first-child > button:first-child{
  background:#243447 !important; border:none !important;
  color:#fff !important; -webkit-text-fill-color:#fff !important;
  box-shadow:0 6px 16px rgba(36,52,71,.22); z-index:5;
}
#page-profile .prf-avatar-btn{
  background:#fff !important;
  border:2px solid #EAE2D4 !important;
  box-shadow:0 6px 18px rgba(51,64,47,.08);
}
/* the pills already use white bg + navy text, which works on cream */
#page-profile > div:first-child > div,
#page-profile > div:first-child > button{ position:relative; }

/* ---- KIDS CLUB: centre "Meet Your Food Friends" ----
   The heading sits in a .tts-title-row, which is display:flex — so the parent's
   text-align:center has no effect on it. Flex needs justify-content. Scoped to
   #page-kids so the other 12 .tts-title-row instances site-wide are untouched. ---- */
#page-kids .tts-title-row{
  justify-content:center;
  /* The row also holds the 🎙️ button (38px + 10px gap). Centring the flex GROUP would
     leave the heading itself 48px left of centre, so shift the group right by exactly
     that much — the HEADING ends up optically centred and the mic still sits beside it. */
  padding-left:48px;
}
@media (max-width:600px){
  /* keep the heading centred on phones too, and let it wrap cleanly */
  #page-kids .tts-title-row{ padding-left:48px; }
  #page-kids .tts-title-row h2{ text-align:center; }
}
/* Pre-existing (not caused by the centring): the Kids search button overflows the
   viewport on phones, pushing the page to 440px in a 390px window. */
@media (max-width:600px){
  #page-kids .ce-search-btn{ max-width:100%; white-space:normal; }
  #page-kids .ce-search-row, #page-kids .ce-search-wrap{ flex-wrap:wrap; max-width:100%; }
}

/* ---- MY RHYTHM ---- */
#page-rhythm .rhy-header,
#page-rhythm-public .rhy-header{
  padding:18px 0 26px !important;
}
#page-rhythm .rhy-hero-img,
#page-rhythm-public .rhy-hero-img{
  max-width:960px !important;
  margin:0 auto !important;
}
#page-rhythm .rhy-hero-img img,
#page-rhythm-public .rhy-hero-img img{
  width:100% !important;
  border-radius:18px !important;
  box-shadow:0 16px 40px rgba(51,64,47,.12) !important;
}
/* the Back button was floating over the cream frame that no longer exists —
   sit it on top of the artwork instead */
#page-rhythm .rhy-header > button:first-child,
#page-rhythm-public .rhy-header > button:first-child{
  position:absolute;
  top:14px; left:18px;
  z-index:5;
  float:none !important;
  margin:0 !important;
}
#page-rhythm .rhy-header,
#page-rhythm-public .rhy-header{ position:relative; }
#page-rhythm .rhy-header .mbr-hero-cta,
#page-rhythm-public .rhy-header .mbr-hero-cta{
  margin-top:22px !important;
  padding:0 20px;
}