/* Mood hero (apex_hero_style = mood; apex-skin-v20 apex_hero_front()), ported from the CT homepage (wcx-hero, wcx-hin,
   wb-sit). The mood image fills the width; on it only the typemark and the situation picker, no form. Works with every
   look: the accent comes from the variables below (Jerryll orange by default, Nicole's rose on boutique). No typemark:
   the lettering on the CT hero is Jerryll's own logo; a member's own logo shows only if they set one (.mh-logo). */
html[data-hero="mood"]{--mh-acc:hsl(from var(--wp--preset--color--primary) h s calc(l + (100 - l) * 0.07));--mh-acc-d:hsl(from var(--wp--preset--color--primary) h calc(s * 0.846) calc(l * 0.866));--mh-tint:hsl(from var(--wp--preset--color--tint) h calc(s * 1) l);--mh-cream:hsl(from var(--wp--preset--color--tint) h calc(s * 1) calc(l + (100 - l) * 0.391));--mh-glow:rgba(246,116,53,.8)}
html[data-hero="mood"][data-skin="boutique"]{--mh-acc:var(--wp--preset--color--primary);--mh-acc-d:hsl(from var(--wp--preset--color--primary) calc(h - 2) s calc(l * 0.756));--mh-tint:var(--wp--preset--color--tint);--mh-cream:#fbf6f2;--mh-glow:rgba(158,95,105,.6)}
html[data-hero="mood"][data-skin="couple"]{--mh-acc:var(--wp--preset--color--primary);--mh-acc-d:hsl(from var(--wp--preset--color--primary) h calc(s * 1.056) calc(l * 0.456));--mh-tint:var(--wp--preset--color--tint);--mh-cream:#f6f5ec;--mh-glow:rgba(95,112,51,.55)}
html[data-hero="mood"] body .wp-site-blocks .entry-content > :is(.mh-hero,.mh-hin).alignfull:not(#\#){margin-top:0 !important;margin-bottom:0 !important;max-width:none !important}
/* room at the top for Nick's header, which sits over the image */
html[data-hero="mood"] body .wp-site-blocks .entry-content > .mh-hero.alignfull:not(#\#){padding:84px 0 24px !important}
html[data-hero="mood"] .mh-hero{position:relative;display:flex;align-items:center;box-sizing:border-box;aspect-ratio:1916/821;min-height:420px;background:#2a2118;overflow:visible}
html[data-hero="mood"] .mh-hero__img{position:absolute;inset:0;z-index:0;width:100%;height:100%;max-width:none;margin:0;object-fit:cover;object-position:center top}
html[data-hero="mood"] .mh-hero::before{content:"";position:absolute;inset:0;background:radial-gradient(50% 75% at 46% 50%,rgba(0,0,0,.46) 0%,rgba(0,0,0,.2) 45%,rgba(0,0,0,0) 72%);pointer-events:none;z-index:1}
html[data-hero="mood"] .mh-hero__stack{position:relative;z-index:2;margin-left:2%;width:42%;max-width:680px;display:flex;flex-direction:column;align-items:center}
/* without a logo the picker is the only thing on the photo: it sits on the photo's open side (left), clear of the people */
@media (min-width:901px){html[data-hero="mood"] .mh-hero__stack:not(:has(.mh-logo)){align-items:flex-start}}
html.sw-wide[data-hero="mood"] .mh-hero__stack{margin-left:calc(var(--sf-gutter,0px) / var(--mh-z) + 2%);width:min(46%,calc(96% - var(--sf-gutter,0px) / var(--mh-z)))}
/* the member's own logo on the photo (option apex_hero_mark), when there is one */
html[data-hero="mood"] .mh-logo{display:block;width:100%;max-width:560px;height:auto;margin:0 !important;filter:drop-shadow(0 4px 10px rgba(0,0,0,.5)) drop-shadow(0 12px 34px rgba(0,0,0,.4))}
/* the situation picker: the hero's only control */
html[data-hero="mood"] .mh-sit{position:relative;margin-top:clamp(14px,2vw,30px)}
html[data-hero="mood"] body .mh-sit__btn:not(#\#){white-space:nowrap;display:inline-flex;align-items:center;gap:12px;background:var(--mh-acc) !important;color:#fff !important;font:800 clamp(16px,1.35vw,21px)/1.2 Inter,Arial,sans-serif !important;border:0;cursor:pointer;border-radius:999px;padding:clamp(14px,1.2vw,20px) clamp(22px,2vw,34px);box-shadow:0 22px 40px -16px rgba(0,0,0,.6),0 10px 24px -10px var(--mh-glow);transition:transform .15s ease}
html[data-hero="mood"] .mh-sit__btn:hover{transform:translateY(-2px)}
html[data-hero="mood"] .mh-sit__btn svg{transition:transform .2s;flex:none}
html[data-hero="mood"] .mh-sit__btn[aria-expanded="true"] svg{transform:rotate(180deg)}
html[data-hero="mood"] .mh-sit__list{position:absolute;left:50%;transform:translateX(-50%);top:calc(100% + 10px);z-index:20;list-style:none;margin:0;padding:8px;background:#fff;border-radius:18px;box-shadow:0 30px 60px -20px rgba(0,0,0,.55);width:min(360px,86vw);max-height:min(60vh,440px);overflow:auto}
html[data-hero="mood"] .mh-sit__list li{margin:0;padding:0}
html[data-hero="mood"] body .mh-sit__list button:not(#\#){display:block;width:100%;text-align:left;border:0;background:none;cursor:pointer;font:600 16px/1.3 Inter,Arial,sans-serif !important;color:#14161a !important;padding:12px 14px;border-radius:12px}
html[data-hero="mood"] body .mh-sit__list button:is(:hover,:focus-visible):not(#\#){background:var(--mh-tint);color:var(--mh-acc-d) !important;outline:0}
html body .wp-site-blocks .entry-content > .mh-hero:has(.mh-sit__btn[aria-expanded="true"]){z-index:40 !important}

/* Nick's Global Styles shrink the page (html zoom) from 1200px up and scale chosen blocks back (compare table: 2 / 1.724 /
   1.25). The two new sections do the same, as one unit, like apex-meet; --sf-gutter is in the page's zoomed units. */
html[data-hero="mood"] :is(.mh-hero,.mh-hin){--mh-z:1}
@media (min-width:1200px){html[data-hero="mood"] body .wp-site-blocks .entry-content :is(.mh-hero,.mh-hin) *{zoom:1 !important}html[data-hero="mood"] body .wp-site-blocks .entry-content :is(.mh-hero,.mh-hin){zoom:var(--mh-z)}}
@media (min-width:1200px) and (max-width:1439.98px){html[data-hero="mood"] :is(.mh-hero,.mh-hin){--mh-z:2}}
@media (min-width:1440px) and (max-width:1999.98px){html[data-hero="mood"] :is(.mh-hero,.mh-hin){--mh-z:1.724}}
@media (min-width:2000px){html[data-hero="mood"] :is(.mh-hero,.mh-hin){--mh-z:1.25}}

/* headline and intro under the image */
html[data-hero="mood"] body .wp-site-blocks .entry-content > .mh-hin.alignfull:not(#\#){padding:86px 0 44px !important;background:linear-gradient(180deg,#fff 0%,var(--mh-cream) 100%)}
html[data-hero="mood"] .mh-hin__in{max-width:1500px;margin:0 auto;padding:0 24px;display:flex;flex-direction:column;align-items:center;container-type:inline-size}
html.sw-wide[data-hero="mood"] .mh-hin__in{padding-left:calc(var(--sf-gutter,0px) / var(--mh-z) + 24px)}
html[data-hero="mood"] body .mh-hin .mh-hin__h:not(#\#):not(#\#):not(#\#){font-family:var(--apex-font-head,Anton,"Bebas Neue",Impact,sans-serif) !important;font-weight:400 !important;text-transform:uppercase !important;letter-spacing:.01em !important;line-height:.98 !important;margin:0 0 28px !important;text-align:center;color:#14161a;font-size:min(56px,4.6cqi) !important}
html[data-hero="mood"] body .mh-hin .mh-hin__h span:not(#\#):not(#\#):not(#\#){display:block;font:inherit !important;letter-spacing:inherit !important}
/* the first line is the SmartForm's heroH slot: a situation pick puts a longer line here, so it wraps evenly */
html[data-hero="mood"] body .mh-hin .mh-hin__h > span:first-child{text-wrap:balance}
html[data-hero="mood"] body .mh-hin .mh-hin__h .mh-hin__s:not(#\#):not(#\#):not(#\#){color:var(--mh-acc);font-size:.62em !important;margin-top:.2em}
html[data-hero="mood"] body .mh-hin p.mh-hin__lead:not(#\#):not(#\#){max-width:720px;width:100%;font-size:21px !important;line-height:1.65 !important;color:#3d434d !important;margin:0 !important;text-align:left !important}
html[data-hero="mood"] .mh-hin__ways{display:flex;flex-wrap:wrap;justify-content:center;gap:16px;margin:38px 0 0}
html[data-hero="mood"] body .mh-hin__ways a:not(#\#):not(#\#){display:inline-flex;align-items:center;gap:12px;font-weight:800 !important;font-size:19px !important;line-height:1.2 !important;text-decoration:none !important;border-radius:999px;padding:20px 30px !important;transition:transform .15s ease}
html[data-hero="mood"] .mh-hin__ways a:hover{transform:translateY(-2px)}
html[data-hero="mood"] body .mh-hin__ways .is-a:not(#\#){background:var(--mh-acc);color:#fff !important;box-shadow:0 18px 34px -16px var(--mh-glow)}
html[data-hero="mood"] body .mh-hin__ways .is-b:not(#\#){background:#16181d;color:#fff !important;box-shadow:0 18px 34px -18px rgba(0,0,0,.6)}
html[data-hero="mood"] .mh-hin__ways svg{width:22px;height:22px;flex:none}
html[data-hero="mood"] body .mh-hin p.mh-hin__call:not(#\#):not(#\#){margin:20px 0 0 !important;font-size:17px !important;color:#5b6472 !important;text-align:center !important}
html[data-hero="mood"] body .mh-hin .mh-hin__call a:not(#\#):not(#\#){color:var(--mh-acc-d) !important;font-weight:800;text-decoration:none}
html[data-hero="mood"] .mh-hin__facts{list-style:none;margin:40px 0 0;padding:0;display:flex;flex-wrap:wrap;justify-content:center;gap:10px 30px}
html[data-hero="mood"] body .mh-hin__facts li:not(#\#){font-size:15.5px;font-weight:700;color:#1c2330;display:flex;align-items:center;gap:8px;margin:0}
html[data-hero="mood"] .mh-hin__facts li::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--mh-acc);flex:none}
@media (max-width:900px){
	/* Nick's phone header (logo row + "Get an offer" pill) sits over the image: the typemark starts under it */
	/* phones: the picker sits on the lower part of the photo, clear of the header's own button */
	html[data-hero="mood"] .mh-hero{aspect-ratio:auto;min-height:560px;align-items:flex-end}
	html[data-hero="mood"] .mh-hero__img{object-position:62% center}
	html[data-hero="mood"] body .wp-site-blocks .entry-content > .mh-hero.alignfull:not(#\#){padding:184px 0 48px !important}
	html[data-hero="mood"] .mh-hero__stack,html.sw-wide[data-hero="mood"] .mh-hero__stack{width:88%;max-width:440px;margin:0 auto}
	html[data-hero="mood"] body .mh-hin .mh-hin__h:not(#\#):not(#\#):not(#\#){font-size:clamp(30px,8.6cqi,40px) !important}
	html[data-hero="mood"] body .wp-site-blocks .entry-content > .mh-hin.alignfull:not(#\#){padding:56px 0 36px !important}
}
@media (max-width:700px){
	html[data-hero="mood"] body .mh-hin__ways a:not(#\#):not(#\#){width:100%;justify-content:center}
	html[data-hero="mood"] body .mh-hin p.mh-hin__lead:not(#\#):not(#\#){font-size:18px !important}
}
@media (max-width:520px){html[data-hero="mood"] body .mh-sit__btn:not(#\#){white-space:normal;text-align:left}}