/*
Theme Name: DMSE (Hello Elementor child)
Template: hello-elementor
Version: 4.3.0
Description: DMSE brand overrides on top of Hello Elementor + the WiaTech kit (RTL Hebrew default, English secondary).
Text Domain: dmse-child
*/

/* ---- Blog index (Hello Elementor archive markup: .site-main > .page-content > article.post) ---- */
.blog .site-main, .archive .site-main, .search .site-main {
  max-width: 1200px; margin: 0 auto; padding: 48px 20px 80px;
}
.blog .page-header .entry-title, .archive .page-header .entry-title {
  font-size: 40px; font-weight: 700; margin: 0 0 32px; text-align: center;
}
.blog .page-content, .archive .page-content {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 24px;
}
.blog article.post, .archive article.post {
  background: #fff; border: 1px solid #e8e8ee; border-radius: 12px; padding: 28px 28px 24px;
  box-shadow: 0 6px 24px rgba(16, 24, 64, .06); transition: transform .2s ease, box-shadow .2s ease;
}
.blog article.post:hover, .archive article.post:hover { transform: translateY(-3px); box-shadow: 0 12px 32px rgba(16, 24, 64, .10); }
.blog article.post .entry-title, .archive article.post .entry-title { font-size: 20px; line-height: 1.35; margin: 0 0 12px; }
.blog article.post .entry-title a, .archive article.post .entry-title a { color: #101840; text-decoration: none; }
.blog article.post .entry-title a:hover, .archive article.post .entry-title a:hover { color: #1f5eff; }
.blog article.post p, .archive article.post p { color: #5b6076; font-size: 15px; line-height: 1.6; margin: 0; }
.blog .pagination, .archive .pagination { grid-column: 1 / -1; text-align: center; margin-top: 16px; }
/* single post: readable measure */
.single-post .site-main { max-width: 820px; margin: 0 auto; padding: 48px 20px 80px; }
.single-post .site-main .entry-title { font-size: 36px; line-height: 1.25; margin-bottom: 24px; }
.single-post .site-main .entry-content { font-size: 17px; line-height: 1.75; }
.single-post .site-main .entry-content img { border-radius: 10px; }

/* ---- Header / CTA fixes ---- */
.tf-nav-menu .main-menu > li > a, .tf-nav-menu .menu > li > a, .tf-nav-menu li a { white-space: nowrap; }
.tf-nav-menu .main-menu > li, .tf-nav-menu .menu > li { padding-left: 6px; padding-right: 6px; }
.elementor-widget-elementskit-button .ekit-btn, .elementor-widget-tf-button a, .tf-btn { white-space: nowrap; }
.elementor-widget-image-box .elementor-image-box-title { white-space: nowrap; }

/* buttons never wrap (CTA band "Book a call" / "קבעו שיחה") */
.elementor-widget-button .elementor-button, .elementor-widget-button .elementor-button-text { white-space: nowrap !important; }

/* icon boxes: the kit's arrow-only buttons carry no text on this site */
.tficonbox .tf-button-container { display: none !important; }


/* =====================================================================
   RTL (Hebrew). The WiaTech widgets ship no RTL stylesheet, so every
   directional rule of theirs has to be answered here. Widget alignment
   itself is mirrored in the data by dmse-tools (dmse_rtl_flip_from_kit).
   ===================================================================== */

/* arrows are directional glyphs: a "next" chevron must point left in Hebrew */
.rtl .elementor-button-icon svg,
.rtl .tf-button i,
.rtl .tficonbox .tf-button-container i,
.rtl .tf-posts-wrap .post-button i,
.rtl .elementor-widget-tfimagebox .icon-arrow,
.rtl .tf-image-box .box-icon i,
.rtl .elementskit-btn svg,
.rtl .elementskit-btn i,
.rtl .icon-right-arrow { transform: scaleX(-1); }

/* hero: mirror the photograph so the subject sits opposite the Hebrew text */
.rtl .flexslider .item-slide .bgimg { transform: scaleX(-1); }
/* the hero blob is pinned at 71% of the width, which lands on the headline in
   both languages once the copy is longer than the kit's; it is decoration only */
.flexslider .item-slide .bg_shape { display: none; }
.rtl .flexslider .flex_caption { text-align: right; }
.rtl .flexslider .flex-direction-nav { direction: ltr; }

/* icon boxes: the icon has to follow the text edge */
.rtl .tficonbox.left, .rtl .tficonbox.top { text-align: right; }
.rtl .tficonbox.left .tf-icon, .rtl .tficonbox.top .tf-icon,
.rtl .tficonbox .icon-main, .rtl .tficonbox .box-icon { margin-left: auto; margin-right: 0; }
.rtl .tficonbox.right { text-align: left; }
.rtl .tficonbox.iconbox-left .tf-icon { margin-right: 0; margin-left: 30px; }
.rtl .tficonbox.iconbox-right .tf-icon { margin-left: 0; margin-right: 30px; }

/* counters and pie charts: keep number + suffix in Latin order (10×, 100%) */
.rtl .flat-counter .number-wrap,
.rtl .flat-counter .counter,
.rtl .tf-piechart .piechart-number,
.rtl .tf-piechart .percent { direction: ltr; unicode-bidi: isolate; }
.rtl .flat-counter { text-align: right; }

/* posts: mirror the meta row, the read-more and the list separators */
.rtl .tf-posts-wrap .blog-post,
.rtl .tf-posts-wrap .post-meta,
.rtl .tf-posts-wrap .entry-content { text-align: right; }
.rtl .tf-posts-wrap .post-meta li { margin-left: 18px; margin-right: 0; }
.rtl .tf-posts-wrap .post-meta li:last-child { margin-left: 0; }

/* navigation: submenus and the offcanvas drawer open from the right */
.rtl .tf-nav-menu .main-menu, .rtl .tf-nav-menu .menu { padding-right: 0; }
.rtl .tf-nav-menu .sub-menu { text-align: right; left: auto; right: 0; }
.rtl .tf-nav-menu .sub-menu .sub-menu { left: auto; right: 100%; }
.rtl .elementskit-navbar-nav-default .elementskit-submenu-panel { text-align: right; }

/* icon lists and contact rows keep their icon on the reading edge */
.rtl .elementor-icon-list-item { text-align: right; }

/* blog archive cards (child theme grid above) */
.rtl.blog article.post, .rtl.archive article.post, .rtl.single-post .site-main { text-align: right; }

/* asymmetric decorative card backgrounds: mirror the box, un-mirror its content */
.rtl .dmse-rtl-bgflip { transform: scaleX(-1); }
.rtl .dmse-rtl-bgflip > * { transform: scaleX(-1); }

/* Elementor's inline icon list pulls 8px out on each side, which made the
   document 16px wider than the viewport. On a phone in Hebrew that overflow
   sits at the start of every line and clips the first letter. */
.elementor-icon-list-items.elementor-inline-items { margin-left: 0 !important; margin-right: 0 !important; }
.elementor-icon-list-items.elementor-inline-items > .elementor-inline-item { margin-left: 0 !important; margin-right: 0 !important; }
.elementor-icon-list-items.elementor-inline-items > .elementor-inline-item + .elementor-inline-item { margin-inline-start: 24px !important; }
@media (max-width: 767px) {
  html, body { overflow-x: hidden; }
  .mobile-menu-overlay { max-width: 100%; }
}

/* on phones the desktop menu is hidden, so its white panel is an empty block */
@media (max-width: 767px) {
  /* the desktop menu is hidden here, so the white panel must hug the toggle
     instead of sitting there as an empty block next to the logo */
  .e-con:has(> .elementor-widget-tf-nav-menu) { width: auto !important; flex: 0 0 auto !important; }
}

/* the hero captions animate in on slide change; with a single slide they must
   never be left in their hidden start state */
.flexslider .flex_caption .sub-title,
.flexslider .flex_caption .title,
.flexslider .flex_caption .desc,
.flexslider .flex_caption .button-group li { opacity: 1; }

/* the kit pins the hero caption to 1315px with no padding, so on a 1280px
   screen the headline touches the edge of the window */
.flexslider .flex_caption { box-sizing: border-box; padding-left: 24px; padding-right: 24px; }

/* the mobile drawer slides in from the left by design; Hebrew opens from the right */
.rtl .tf-nav-menu .nav-panel { left: auto; right: -100%; }
.rtl .tf-nav-menu .nav-panel.active { left: auto; right: 0; }
.rtl .tf-nav-menu .nav-panel.mobile-menu-alignment-left { text-align: right; }
.rtl .tf-nav-menu.menu-panel-style-left .tf-close { right: auto; left: 30px; }
.rtl .tf-nav-menu .btn-submenu { right: auto; left: 0; }

/* social icons sit flush against the window edge in the top bar */
.elementor-widget-social-icons { padding-inline: 20px; }

/* pie charts: the kit left-aligns the label; on phones the pair stacks and must hug the right */
.rtl .tf-pie-chart.position-left .tf-pie-chart-inner { text-align: right; }
@media (max-width: 767px) {
  .rtl .tf-pie-chart .tf-pie-chart-inner { align-items: flex-end; text-align: right; }
  .rtl .tf-pie-chart .pie-chart { margin-left: auto; margin-right: 0; }
}

/* pricing tiers (plain HTML in a text widget): one per row on phones */
@media (max-width: 767px) { .dmse-tier { flex-basis: 100% !important; } }

/* the kit pads text blocks by ~100px on the image side; on a phone that is a third of the screen */
@media (max-width: 767px) {
  .elementor-widget-text-editor, .elementor-widget-heading, .elementor-widget-icon-list { padding-left: 0 !important; padding-right: 0 !important; }
}

/* The kit header overlays the page by pulling the next section up 120px.
   That only works over a tall dark hero: blog/archive/search pages have none,
   and on phones the inner-page banner is too short, so the title ends up
   behind the header. */
body:not(:has(.flexslider)) .ekit-template-content-header .e-con:has(> .e-con > .elementor-widget-tf-nav-menu) { margin-bottom: 0 !important; }
.blog .site-main, .archive .site-main, .single .site-main, .search .site-main, .error404 .site-main { padding-top: 40px; }

/* long tables in posts scroll inside their own box */
.page-content table, .entry-content table { display: block; max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* no comments on a brochure blog */
#comments, .comments-area, .comment-respond { display: none !important; }

/* the kit paints H1 white for its banners; blog titles sit on a white page */
.blog .page-header .entry-title, .archive .page-header .entry-title, .single .page-header .entry-title, .search .page-header .entry-title { color: #101840; }