/*
 * The site's own stylesheet: rules that belong to the whole site, not to one element (README §34).
 * Loaded by mu-plugins/lmsg-styles.php on every front-end page, first in <head>, before Elementor's stylesheets.
 * An element's own CSS is written in its spec (custom_css, served from mu-plugins/lmsg-element-css/); a rule several
 * elements share goes here, as a class the spec sets. Never CSS in page content.
 */

/* Designed line breaks (site/design/facts.json `lines`): the frame phrases titles differently per viewport.
   Copy carries <br class="lmsg-br-d"> for desktop-only breaks and <br class="lmsg-br-m"> for mobile-only ones. */
@media (max-width:767px){.lmsg-br-d{display:none}}@media (min-width:768px){.lmsg-br-m{display:none}}
/* <br class="lmsg-br-rtl">: a break only the Hebrew page takes (its line is longer); the English one ignores it. Both
   languages carry the same markup, as a translation must (Yifat, 2026-10-18, testimonials title) */
body:not(.rtl) .lmsg-br-rtl{display:none}

/* Hebrew lines are balanced by the browser (Ron, 2026-10-05): Hebrew is translated in ATE, where a translation can
   only carry markup its English has, so the Hebrew-only designed breaks above can no longer reach a Hebrew page.
   Headings get balanced lines; paragraphs avoid a lone last word. */
html[lang^="he"] .elementor-heading-title{text-wrap:balance}html[lang^="he"] .elementor-widget-text-editor p{text-wrap:pretty}

/* Sticky site header (site/documents/header.en.mjs, a Theme Builder document since 2026-09-17).
   position/z-index: the header wrapper is the first thing in the page, and the homepage hero is pulled up under
   it by a negative top margin — without a stacking position the hero's own background would paint over the bar.
   Elementor adds .elementor-sticky--effects once the page is scrolled past the container's sticky_effects_offset
   (40px), which is where the bar gets its shadow. scroll-margin-top keeps an anchor target (#pricing, #faq …)
   clear of the fixed bar instead of landing behind it — 96 for the 94px desktop bar, 81 for the 79px mobile one. */
[data-elementor-type="header"]{position:relative;z-index:100}.elementor-sticky--effects#lmsg-header{box-shadow:0 2px 12px rgba(40,46,69,.12)}[id]{scroll-margin-top:96px}@media (max-width:767px){[id]{scroll-margin-top:81px}}

/* The footer is always at the BOTTOM of the window (2026-09-17). On a page shorter than the viewport — the 404,
   a thin trainer page, an empty archive — the footer used to stop wherever the content stopped, leaving white
   space under it. body becomes a flex column at least one viewport tall and the content grows into whatever is
   left. One rule for every page type, because every one of them has the same three body children:
     <a.skip-link> · <header.elementor-location-header> · the content · <footer.elementor-location-footer>
   where "the content" is <div.elementor data-elementor-type="wp-page"> on a page, ".elementor-location-single"
   on the trainer template, "error-404" on the 404, and the theme's own <main.site-main> on anything Elementor
   does not template (a search page, an archive). Measured on all of them, 2026-09-17.
   What it must NOT disturb, and why it does not:
     - the sticky header: Elementor makes the bar position:fixed and leaves its own spacer inside <header>, so
       the flex item is still 94px (79 on mobile) tall and nothing about the sticky handler is touched;
     - the homepage hero's -94px top margin: as a flex item the content div no longer collapses that margin
       outwards, but the hero still overflows 94px up into the header and the content box loses the same 94px,
       so the document height is identical (measured before/after on / and /he/);
     - the skip link and the screen-reader spans are position:absolute, the popups are display:none until they
       open (and fixed once they do), and <script>/<svg> children are display:none — none of them takes part in
       the flex layout, so nothing lands under the footer;
     - the admin bar: it sets html{margin-top:32px}, so a plain 100vh would push exactly that much past the
       window. --wp-admin--admin-bar--height is WordPress's own variable (32px, 46px under 782px).
   Excluded in the Elementor editor's preview, which composes the body itself. */
body:not(.elementor-editor-active){display:flex;flex-direction:column;min-height:100vh}
body.admin-bar:not(.elementor-editor-active){min-height:calc(100vh - var(--wp-admin--admin-bar--height, 32px))}
body:not(.elementor-editor-active) > main,body:not(.elementor-editor-active) > div.elementor:not(.elementor-location-popup){flex:1 0 auto}
/* Belt and braces: whatever the content element turns out to be, the footer is pushed to the bottom, and it is
   never squeezed (a page taller than the window simply makes body taller, so there is no negative free space). */
body:not(.elementor-editor-active) > footer.elementor-location-footer{margin-top:auto;flex-shrink:0}
body:not(.elementor-editor-active) > header.elementor-location-header{flex-shrink:0}
/* The 404 has one band and nothing else, so its band — not a strip of blank body — is what fills the window
   between the header and the footer (site/documents/notfound.en.mjs; the band centres its own content). */
body > .elementor[data-elementor-type="error-404"]{display:flex;flex-direction:column}
body > .elementor[data-elementor-type="error-404"] > .e-con{flex:1 0 auto}

/* Ayelet, 2026-10-02: boxes lift very slightly when hovered (a mouse only — touch screens keep :hover after a tap).
   .lmsg-card is set on the boxes in the page specs (home: the three "searching" cards, the four outcomes, the four
   support cards, the three prices); the testimonial cards are the marquee's own items. */
@media (hover:hover){.lmsg-card,.lmsg-marquee--cards .lmsg-marquee__item{transition:transform .35s ease,box-shadow .35s ease}.lmsg-card:hover,.lmsg-marquee--cards .lmsg-marquee__item:hover{transform:translateY(-4px);box-shadow:0 10px 24px rgba(0,0,0,.12)}}

/* Entrance animations, retimed for the site (Ayelet, 2026-10-01 and 2026-10-03). Elementor's own entrance animations
   (an element's Motion Effects → Entrance Animation) move an element by its whole height, which made tall elements
   travel far; a section sets one of these classes (css_classes in its spec) and every animated element inside it
   moves a fixed, gentle distance instead. Three classes deep, so they win over animate.css (.fadeInUp) and
   Elementor's speed classes (.animated.animated-slow); a section's own CSS can still override them (e.g. on phones).
     lmsg-anim-up     fadeInUp slides up 40px
     lmsg-anim-fade   fadeIn is an opacity-only fade over 1s
     lmsg-anim-start  fadeInLeft slides 40px from the reading start (from the right in Hebrew), 1s */
.lmsg-anim-up .animated.fadeInUp{animation-name:lmsgSlideUp}
.lmsg-anim-fade .animated.fadeIn{animation-name:lmsgSoftFade;animation-duration:1s;animation-timing-function:ease-in-out}
.lmsg-anim-start .animated.fadeInLeft{animation-name:lmsgSlideStart;animation-duration:1s;animation-timing-function:ease-out}
body.rtl .lmsg-anim-start .animated.fadeInLeft{animation-name:lmsgSlideStartRtl}
/* Keyframes used by those classes and by the page specs' own CSS (one definition each; a name is global). */
@keyframes lmsgSlideUp{from{opacity:0;transform:translate3d(0,40px,0)}to{opacity:1;transform:none}}
@keyframes lmsgWelcomeUp{from{opacity:0;transform:translate3d(0,40px,0)}to{opacity:1;transform:none}}
@keyframes lmsgSoftFade{from{opacity:0}to{opacity:1}}
@keyframes lmsgSlideStart{from{opacity:0;transform:translate3d(-40px,0,0)}to{opacity:1;transform:none}}
@keyframes lmsgSlideStartRtl{from{opacity:0;transform:translate3d(40px,0,0)}to{opacity:1;transform:none}}
/* lmsg-tabs-slide (on a tabs widget): its tab titles slide in from the reading start, one after another, when the widget
   comes into view (About's facilitators; Ayelet, 2026-10-25). site.js marks the page lmsg-js-anim and the widget lmsg-in. */
.lmsg-js-anim .lmsg-tabs-slide:not(.lmsg-in) .e-n-tab-title{opacity:0}
.lmsg-tabs-slide.lmsg-in .e-n-tab-title{animation:lmsgSlideStart 1s ease-out both}
body.rtl .lmsg-tabs-slide.lmsg-in .e-n-tab-title{animation-name:lmsgSlideStartRtl}
.lmsg-tabs-slide.lmsg-in .e-n-tab-title:nth-child(2){animation-delay:.2s}
.lmsg-tabs-slide.lmsg-in .e-n-tab-title:nth-child(3){animation-delay:.4s}
.lmsg-tabs-slide.lmsg-in .e-n-tab-title:nth-child(4){animation-delay:.6s}
@media (prefers-reduced-motion:reduce){.lmsg-js-anim .lmsg-tabs-slide .e-n-tab-title{opacity:1;animation:none}}
/* The photo bands' scroll parallax (the bands' own CSS, about and home) */
@keyframes lmsgBandParallax{from{transform:translateY(-16%)}to{transform:translateY(16%)}}

/* Small text classes for the page specs' text, so translatable text never carries style="…" (README §34): an ATE
   translation can carry only the markup its English has, and a class survives every content filter.
     lmsg-nowrap      keeps a phrase on one line (the homepage's feature line, About's "2022-23")
     lmsg-gold        the brand gold (C.gold) inside a text (the feature line's separators)
     lmsg-plain-list  a list with no bullets and no indent (the footer's link lists) */
.lmsg-nowrap{white-space:nowrap}
/* Pagination on Our Guides and World of Content (Ayelet, 2026-10-25): "Previous page" / "Next page" on desktop, the word
   "page" ("העמוד") hidden on phones, where there is no room. site.js wraps the word in .lmsg-pg-word. */
@media (max-width:767px){.lmsg-pg-word{display:none}}
.lmsg-gold{color:#F3CB6A}
.lmsg-plain-list{list-style:none;margin:0;padding:0}

/* Header menu: the page you are on (site.js adds the class; Ayelet, 2026-10-13). It was underlined; Yifat, 2026-10-15:
   an underline reads as "click here", so it gets a soft lilac pill behind it instead (Ayelet agreed the same day). The pill is a layer behind the text and adds no width, so the menu doesn't move. */
.elementor-location-header .elementor-nav-menu--main a.lmsg-nav-current { text-decoration: none; position: relative; z-index: 0; }
/* (the widget's own pointer rule paints .elementor-item::before in the accent gold, so this selector is stronger;
   and it hides that layer unless Elementor itself marks the item active, which it doesn't on a Hebrew page whose
   address is in Hebrew letters, /he/אודות/ — hence opacity: 1, Yifat 2026-10-16) */
.elementor-location-header .elementor-widget-nav-menu .elementor-nav-menu--main a.elementor-item.lmsg-nav-current::before { content: ""; position: absolute; inset: 8px -12px; border-radius: 999px; background-color: #E8DDF6; z-index: -1; opacity: 1; }
/* the phone menu (dark panel) already marks the current page in gold: no underline there either */
.elementor-location-header .elementor-nav-menu--dropdown a.lmsg-nav-current { text-decoration: none; }

/* Guide page: in the "place | languages" line, a language the guide has a page in links to it (the page's language
   switcher, Ron 2026-10-14) — the line's own colour, underlined so it reads as a link */
.lmsg-trainer-lang, .elementor .elementor-heading-title a.lmsg-trainer-lang { color: inherit; text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.lmsg-trainer-lang:hover, .elementor .elementor-heading-title a.lmsg-trainer-lang:hover { color: #8157BC; }


/* Forms: Send is faded and can't be pressed until the consent box is ticked (site.js; Yifat, 2026-10-14). No hover
   or focus colour change while it is off (the theme paints every button on :hover/:focus). */
.elementor-form button.lmsg-consent-off,
.elementor-form button.lmsg-consent-off:hover,
.elementor-form button.lmsg-consent-off:focus { opacity: 0.45; cursor: not-allowed; pointer-events: none; }

/* Our Guides: the page numbers sit at the middle of the PAGE, not of the cards column (Ayelet, 2026-10-16). The row
   reaches back under the filter column (186px + the 27px gap, mu-plugins/lmsg-trainers/guides.css), so it spans the
   whole block, which is centred on the page. Phones have the filters above the cards: nothing to do there. */
@media (min-width: 768px) { .lmsg-guides__pages { margin-inline-start: -213px; } }

/* lmsg-inline-link: a link inside running text, in the text's own colour, underlined (homepage 'course facilitators'
   → About, Yifat 2026-10-18) */
.elementor a.lmsg-inline-link{color:inherit;text-decoration:underline;text-underline-offset:3px}
.elementor a.lmsg-inline-link:hover,.elementor a.lmsg-inline-link:focus{color:#8157BC}

/* guides directory pagination (guides.js): an arrow with no page behind it stays, inactive, as on World of Content (Ayelet, 2026-10-20);
   the label isolated so a Hebrew label always reads right-to-left inside its button */
.lmsg-guides__page.is-inactive{cursor:default}
.lmsg-guides__page.is-inactive:hover .lmsg-guides__label{text-decoration:none}
.lmsg-guides__label{unicode-bidi:isolate}

/* A page laid out like a Wix page: above the 1280px design width everything grows with the screen, as Wix does
   (the show page, Yifat 2026-10-21). Set by the class lmsg-scale-page on the page's first section; steps of 40px. */
@media (min-width:1320px){.elementor:has(> .lmsg-scale-page){zoom:1.0312}}
@media (min-width:1360px){.elementor:has(> .lmsg-scale-page){zoom:1.0625}}
@media (min-width:1400px){.elementor:has(> .lmsg-scale-page){zoom:1.0938}}
@media (min-width:1440px){.elementor:has(> .lmsg-scale-page){zoom:1.125}}
@media (min-width:1480px){.elementor:has(> .lmsg-scale-page){zoom:1.1562}}
@media (min-width:1520px){.elementor:has(> .lmsg-scale-page){zoom:1.1875}}
@media (min-width:1560px){.elementor:has(> .lmsg-scale-page){zoom:1.2188}}
@media (min-width:1600px){.elementor:has(> .lmsg-scale-page){zoom:1.25}}
@media (min-width:1640px){.elementor:has(> .lmsg-scale-page){zoom:1.2812}}
@media (min-width:1680px){.elementor:has(> .lmsg-scale-page){zoom:1.3125}}
@media (min-width:1720px){.elementor:has(> .lmsg-scale-page){zoom:1.3438}}
@media (min-width:1760px){.elementor:has(> .lmsg-scale-page){zoom:1.375}}
@media (min-width:1800px){.elementor:has(> .lmsg-scale-page){zoom:1.4062}}
@media (min-width:1840px){.elementor:has(> .lmsg-scale-page){zoom:1.4375}}
@media (min-width:1880px){.elementor:has(> .lmsg-scale-page){zoom:1.4688}}
@media (min-width:1920px){.elementor:has(> .lmsg-scale-page){zoom:1.5}}
@media (min-width:1960px){.elementor:has(> .lmsg-scale-page){zoom:1.5312}}
@media (min-width:2000px){.elementor:has(> .lmsg-scale-page){zoom:1.5625}}
@media (min-width:2040px){.elementor:has(> .lmsg-scale-page){zoom:1.5938}}
@media (min-width:2080px){.elementor:has(> .lmsg-scale-page){zoom:1.625}}
@media (min-width:2120px){.elementor:has(> .lmsg-scale-page){zoom:1.6562}}
@media (min-width:2160px){.elementor:has(> .lmsg-scale-page){zoom:1.6875}}
@media (min-width:2200px){.elementor:has(> .lmsg-scale-page){zoom:1.7188}}
@media (min-width:2240px){.elementor:has(> .lmsg-scale-page){zoom:1.75}}
@media (min-width:2280px){.elementor:has(> .lmsg-scale-page){zoom:1.7812}}
@media (min-width:2320px){.elementor:has(> .lmsg-scale-page){zoom:1.8125}}
@media (min-width:2360px){.elementor:has(> .lmsg-scale-page){zoom:1.8438}}
@media (min-width:2400px){.elementor:has(> .lmsg-scale-page){zoom:1.875}}
@media (min-width:2440px){.elementor:has(> .lmsg-scale-page){zoom:1.9062}}
@media (min-width:2480px){.elementor:has(> .lmsg-scale-page){zoom:1.9375}}
@media (min-width:2520px){.elementor:has(> .lmsg-scale-page){zoom:1.9688}}
@media (min-width:2560px){.elementor:has(> .lmsg-scale-page){zoom:2.0}}

/* The accessibility panel (One Tap) waits off-screen at the left while closed, but its wide shadow still painted a grey
   strip down the left edge of every light page. No shadow while it's closed; when open it keeps its own (Yifat, 2026-10-21). */
nav.onetap-accessibility.onetap-plugin-onetap:not(.onetap-toggle-open){box-shadow:none !important}

/* testimonial texts never end on a lone word (Ayelet, 2026-10-26: 'שלי.' alone on a phone); site.js also ties the last two words for browsers without text-wrap:pretty */
.lmsg-marquee__body p,.lmsg-marquee__headline{text-wrap:pretty}
/* Homepage testimonials (lmsg-testimonials-hint; Ayelet with Yifat, 2026-10-26). site.js adds the buttons under the cards:
   an arrow at each side (white, with a shaft, no circle; moves one card) and the three dots between them (each stands for
   three cards; the bright one shows where the carousel is, a dim one jumps there). "Previous" sits at the reading start,
   so the arrows swap sides in Hebrew and each points the way it moves. 10px under the cards on computers, 20px on phones. */
.lmsg-tarrows{position:relative;padding-bottom:62px}
.lmsg-tarrows .lmsg-tarrow{position:absolute;bottom:0;z-index:3;width:52px;height:52px;margin:0;padding:0;display:flex;align-items:center;justify-content:center;border:0;border-radius:6px;background:transparent;color:#F8F6FD;cursor:pointer;box-shadow:none;transition:opacity .2s ease,transform .2s ease}
.lmsg-tarrows .lmsg-tarrow svg{width:40px;height:30px;display:block}
.lmsg-tarrows .lmsg-tarrow--prev{inset-inline-start:10px}
.lmsg-tarrows .lmsg-tarrow--next{inset-inline-end:10px}
body:not(.rtl) .lmsg-tarrows .lmsg-tarrow--prev svg,body.rtl .lmsg-tarrows .lmsg-tarrow--next svg{transform:scaleX(-1)}
.lmsg-tarrows .lmsg-tarrow:hover,.lmsg-tarrows .lmsg-tarrow:focus{background:transparent;color:#fff;border:0}
.lmsg-tarrows .lmsg-tarrow:hover svg{opacity:.8}
.lmsg-tarrows .lmsg-tarrow:active{transform:scale(.94)}
.lmsg-tarrows .lmsg-tarrow:focus-visible{outline:2px solid #F3CB6A;outline-offset:3px}
.lmsg-tarrows .lmsg-tdots{position:absolute;bottom:0;left:50%;transform:translateX(-50%);height:52px;display:flex;align-items:center;gap:0;z-index:3}
.lmsg-tarrows .lmsg-tdots button{width:16px;height:28px;margin:0;padding:0;border:0;border-radius:50%;background:transparent;cursor:pointer;display:flex;align-items:center;justify-content:center}
.lmsg-tarrows .lmsg-tdots button::before{content:"";width:8px;height:8px;border-radius:50%;background:#F8F6FD;opacity:.35;transition:opacity .3s ease}
.lmsg-tarrows .lmsg-tdots button.is-on::before{opacity:1}
.lmsg-tarrows .lmsg-tdots button:hover,.lmsg-tarrows .lmsg-tdots button:focus{background:transparent}
.lmsg-tarrows .lmsg-tdots button:hover::before{opacity:.7}
.lmsg-tarrows .lmsg-tdots button:focus-visible{outline:2px solid #F3CB6A;outline-offset:1px}
/* the guides gallery (on the light background): the same controls in dark blue (Ayelet, 2026-10-26) */
.lmsg-tarrows--dark .lmsg-tarrow,.lmsg-tarrows--dark .lmsg-tarrow:hover,.lmsg-tarrows--dark .lmsg-tarrow:focus{color:#282E45}
.lmsg-tarrows--dark .lmsg-tdots button::before{background:#282E45}
/* phones: the arrows close in on the dots (20px each side), clear of the accessibility button at the bottom-left (Ayelet) */
@media (max-width:767px){.lmsg-tarrows{padding-bottom:64px}.lmsg-tarrows .lmsg-tarrow{width:44px;height:44px}.lmsg-tarrows .lmsg-tarrow svg{width:28px;height:21px}.lmsg-tarrows .lmsg-tdots{height:44px}.lmsg-tarrows .lmsg-tarrow--prev{inset-inline-start:calc(50% - 64px - var(--lmsg-tdots,3) * 8px)}.lmsg-tarrows .lmsg-tarrow--next{inset-inline-end:calc(50% - 64px - var(--lmsg-tdots,3) * 8px)}.lmsg-tarrows--nodots-phone .lmsg-tdots{display:none}.lmsg-tarrows.lmsg-tarrows--nodots-phone .lmsg-tarrow--prev{inset-inline-start:calc(50% - 64px)}.lmsg-tarrows.lmsg-tarrows--nodots-phone .lmsg-tarrow--next{inset-inline-end:calc(50% - 64px)}}

/* "Read more" on the homepage testimonials, phones and desktop (Ayelet, 2026-10-27; site.js adds it to cards over 6 lines):
   the text shows its first 6 lines fading out, the underlined button opens the whole card. */
.lmsg-tclamp .lmsg-marquee__body{overflow:hidden;-webkit-mask-image:linear-gradient(to bottom,#000 calc(100% - 2.4em),transparent);mask-image:linear-gradient(to bottom,#000 calc(100% - 2.4em),transparent)}
.lmsg-tclamp.lmsg-topen .lmsg-marquee__body{max-height:none!important;-webkit-mask-image:none;mask-image:none}
.lmsg-marquee .lmsg-tmore,.lmsg-marquee .lmsg-tmore:hover,.lmsg-marquee .lmsg-tmore:focus{display:inline-block;align-self:center;background:none!important;border:0!important;border-radius:0;box-shadow:none;padding:6px 4px;margin:4px auto 16px;color:inherit!important;font:inherit;font-size:16px;font-weight:600;line-height:1.4;text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.lmsg-marquee .lmsg-tmore[hidden]{display:none}
.lmsg-tany .lmsg-marquee__group{align-items:flex-start}
@media (max-width:767px){.lmsg-marquee .lmsg-tmore{font-size:14px}}

/* Sound on, over a player that starts muted (site.js; Yifat + Ron, 2026-11-04): the WHOLE video is the button — a
   transparent layer with a pointer and a soft dim on hover — and a frosted pill at the top centre says so (clear of the burned-in subtitles at the bottom). */
.alma-embed .lmsg-unmute,.alma-embed .lmsg-unmute:hover,.alma-embed .lmsg-unmute:focus{position:absolute;inset:0;z-index:2;display:flex;align-items:flex-start;justify-content:center;padding:18px 16px 0;margin:0;border:0!important;border-radius:0;background:transparent!important;color:#fff!important;font:inherit;cursor:pointer;transition:background-color .25s ease}
.alma-embed .lmsg-unmute:hover{background:rgba(0,0,0,.08)!important}
.alma-embed .lmsg-unmute:focus-visible{outline:3px solid #F3CB6A;outline-offset:-3px}
.alma-embed .lmsg-unmute__pill{display:inline-flex;align-items:center;gap:9px;padding:11px 20px 11px 16px;border:1px solid rgba(255,255,255,.4);border-radius:999px;background:rgba(40,14,70,.66);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);box-shadow:0 4px 16px rgba(0,0,0,.2);font-size:16px;font-weight:600;line-height:1.2;text-align:center;animation:lmsgUnmuteIn .6s ease 1.2s both;transition:background-color .25s ease,transform .25s ease}
.alma-embed .lmsg-unmute:hover .lmsg-unmute__pill{background:rgba(73,26,125,.88);transform:scale(1.04)}
@keyframes lmsgUnmuteIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@media (max-width:767px){.alma-embed .lmsg-unmute,.alma-embed .lmsg-unmute:hover,.alma-embed .lmsg-unmute:focus{padding:10px 10px 0}.alma-embed .lmsg-unmute__pill{padding:7px 12px 7px 10px;font-size:12.5px;gap:6px}.alma-embed .lmsg-unmute__pill svg{width:15px;height:15px}}
@media (prefers-reduced-motion:reduce){.alma-embed .lmsg-unmute__pill{animation:none}}