/*
 * tomaso.co.il full mobile/desktop audit, 16.10.2026. PREVIEW ONLY until Tomer approves.
 * Evidence + before/after: D:/TOMASO WEBSITE/assets/site-audit-tomaso-co-il-2026-10-16/
 * Every block names the problem it fixes and how many pages it touches.
 */

/* ── 1. Text colour root cause (252 pages) ───────────────────────────────
 * The Elementor kit still uses #212121 as body text from the old light site.
 * The theme turned every background dark, so footer site-map, "מדריכים אחרונים",
 * blog post bodies, SEO text blocks and legacy pages render near-invisible (ratio 1.2-1.3).
 * Video pages and /results/ do not even get the kit class, so their footer loses all colours. */
body.tomaso-theme {
  --e-global-color-primary: #38C4DA;
  --e-global-color-secondary: #F5F5F5;
  --e-global-color-accent: #E26E63;
  --e-global-color-text: #C9D1DD;
  color: #C9D1DD;
}
body.tomaso-theme.elementor-kit-11 { --e-global-color-text: #C9D1DD; }
body.tomaso-theme :is(h1, h2, h3, h4, h5, h6) { color: #F2F4F8; }
body.tomaso-theme .entry-content :is(p, li, td) { color: #C9D1DD; }
body.tomaso-theme .entry-content a,
body.tomaso-theme .elementor-widget-theme-post-content a { color: #5BD3E6; }
body.tomaso-theme .post-navigation__prev--label,
body.tomaso-theme .post-navigation__next--label,
body.tomaso-theme .elementor-post-info__item,
body.tomaso-theme .elementor-post-info time,
body.tomaso-theme .elementor-post-date,
body.tomaso-theme .elementor-post-avatar { color: #9AA6B8; }
body.tomaso-theme .widget-title { color: #F2F4F8; }

/* ── 2. Footer "מדריכים אחרונים" + FAQ link (every page) ─────────────────
 * Was one run-on paragraph of links in #212121 on black. Now a readable list. */
nav[aria-label="מדריכים אחרונים"] { color: #9AA6B8; font-size: 14px !important; line-height: 1.6 !important; }
nav[aria-label="מדריכים אחרונים"] strong { display: block; color: #F2F4F8; font-size: 15px; margin-bottom: 8px; }
nav[aria-label="מדריכים אחרונים"] a { color: #A9B4C6; text-decoration: none; }
nav[aria-label="מדריכים אחרונים"] a:hover { color: #38C4DA; }
.tomaso-footer-faq-link a { color: #C3CAD6 !important; }
@media (max-width: 768px) {
  nav[aria-label="מדריכים אחרונים"] { text-align: center !important; font-size: 0 !important; padding: 16px 20px !important; }
  nav[aria-label="מדריכים אחרונים"] strong { font-size: 15px; }
  nav[aria-label="מדריכים אחרונים"] br { display: none; }
  nav[aria-label="מדריכים אחרונים"] a { display: block; font-size: 14px; padding: 6px 0; }
}

/* ── 3. Header icons on iPhone (every page) ─────────────────────────────
 * Five icons do not fit the 175px column, the phone icon drops to a second row under LinkedIn. */
@media (max-width: 767px) {
  .elementor-location-header .elementor-social-icons-wrapper {
    display: flex !important;
    flex-wrap: nowrap !important;
    justify-content: center;
    gap: 0 14px !important;
    width: auto !important;
  }
  .elementor-location-header .elementor-social-icons-wrapper > .elementor-grid-item { margin: 0 !important; }
}

/* ── 4. Accessibility button covers the hero text (62 pages) ────────────
 * It sat halfway down the left edge, 52px, right on top of the opening paragraph.
 * Moved to the bottom-left corner, smaller. WhatsApp keeps the bottom-right corner. */
@media (max-width: 767px) {
  #pojo-a11y-toolbar { top: auto !important; bottom: 14px !important; }
  #pojo-a11y-toolbar .pojo-a11y-toolbar-toggle { top: auto !important; bottom: 0; }
  #pojo-a11y-toolbar .pojo-a11y-toolbar-toggle a { width: 40px !important; height: 40px !important; padding: 8px !important; line-height: 0; }
  #pojo-a11y-toolbar .pojo-a11y-toolbar-toggle svg { width: 24px; height: 24px; }
}

/* ── 5. Cramped 3-column grids on a phone (29 + 133 pages) ──────────────
 * Templates hard-code grid-template-columns inline, which beats the mobile rules
 * already in services.css / restaurant-marketing.css. Cards were 109px wide, two words a line. */
@media (max-width: 768px) {
  .ts-platform-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 12px !important; }
  .ts-platform-card { padding: 20px 16px !important; }
  .tr-video-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 12px !important; }
}
@media (max-width: 420px) {
  .ts-platform-grid { grid-template-columns: 1fr !important; }
}

/* ── 6. About page scrolls sideways (1 page, desktop + mobile) ──────────
 * A decorative glow is 854px wide and pushes the whole page 50px off screen on a phone. */
body.page-template-template-about #page,
body.page-template-template-about .site-content { overflow-x: clip; }
.tomaso-about-story-image, .tomaso-about-secondary-card { overflow: hidden; }

/* ── 7. Home testimonials: hard dark band over the cards ───────────────
 * Two 60px gradient overlays render as a solid dark block over the blurred glass cards.
 * Replaced by a soft mask on the scrolling row. */
.tomaso-text-testimonials-row1, .tomaso-text-testimonials-row2 { will-change: transform; }
div:has(> .tomaso-text-testimonials-row1),
div:has(> .tomaso-text-testimonials-row2) {
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 40px, #000 calc(100% - 40px), transparent 100%);
  mask-image: linear-gradient(to right, transparent 0, #000 40px, #000 calc(100% - 40px), transparent 100%);
}
div:has(> div > .tomaso-text-testimonials-row1) > div[style*="linear-gradient(to right, #030303"],
div:has(> div > .tomaso-text-testimonials-row1) > div[style*="linear-gradient(to left, #030303"] { display: none !important; }
@media (max-width: 767px) {
  .tomaso-text-testimonials-row1 > div, .tomaso-text-testimonials-row2 > div { width: 300px !important; padding: 24px 22px !important; }
}

/* ── 8. Legacy Elementor pages (purple boxes, recruitment/design/logo pages) ─
 * Grey #4d4d4d / #3a3a3a text on purple and on black. */
body.page-template-default .elementor-widget-text-editor :is(b, strong, span, p) { color: inherit; }
body.page-template-default .elementor-widget-text-editor { color: #EDEFF5; }
body.page-template-default .elementor-testimonial__text,
body.page-template-default .elementor-testimonial__title { color: #C9D1DD !important; }
body.page-template-default .elementor-testimonial__name { color: #5BD3E6 !important; }

/* ── 9. Video pages: brand icons rendered as empty squares (152 pages) ──
 * fa-brands is not loaded on the video template; preview loads it here.
 * The real fix (enqueue + kit body class) goes in functions.php after approval. */
@font-face {
  font-family: "Font Awesome 5 Brands";
  font-style: normal;
  font-weight: 400;
  font-display: block;
  src: url("/wp-content/plugins/elementor/assets/lib/font-awesome/webfonts/fa-brands-400.woff2") format("woff2");
}
body.page-template-template-video-watch .fab,
body.page-template-template-results .fab { font-family: "Font Awesome 5 Brands"; font-weight: 400; }

/* ── 10. Video pages + /results/: white strip under the footer ──────────
 * These templates miss the site background, so the guides list and FAQ link sat on white. */
body.page-template-template-video-watch,
body.page-template-template-results { background-color: #030303; }

/* ── 11. Pages with a white content box keep dark text (privacy, blog list) ─
 * Astra "separate container" pages render the article on white, and the area under the footer is light too.
 * Without this, rule 1 would turn their text light-on-white. */
body.tomaso-theme.ast-separate-container:not([class*="page-template-template-"]) .site-content { --e-global-color-text: #2B2F36; color: #2B2F36; }
body.tomaso-theme.ast-separate-container:not([class*="page-template-template-"]) .site-content :is(p, li, td, strong, b, span, time, .entry-content p, .entry-content li) { color: #2B2F36; }
body.tomaso-theme.ast-separate-container:not([class*="page-template-template-"]) .site-content :is(h1, h2, h3, h4, h5, h6, .widget-title, .entry-title) { color: #14171C; }
body.tomaso-theme.ast-separate-container:not([class*="page-template-template-"]) .site-content a { color: #0E7C8F; }
body.tomaso-theme.ast-separate-container:not([class*="page-template-template-"]) .site-content :is(.elementor-post-date, .elementor-post-avatar) { color: #5F6B7A; }
body.tomaso-theme.ast-separate-container:not([class*="page-template-template-"]) nav[aria-label="מדריכים אחרונים"] strong { color: #14171C; }
body.tomaso-theme.ast-separate-container:not([class*="page-template-template-"]) nav[aria-label="מדריכים אחרונים"] a { color: #3A4452; }
body.tomaso-theme.ast-separate-container:not([class*="page-template-template-"]) .tomaso-footer-faq-link a,
body.tomaso-theme.ast-separate-container:not([class*="page-template-template-"]) .tomaso-footer-speaker-link a { color: #3A4452 !important; }

/* ── 12. TikTok service pages: inline 3/4-column grids on a phone (3 pages) ── */
@media (max-width: 768px) {
  body.page-template-template-tiktok-single [style*="grid-template-columns: repeat(3"],
  body.page-template-template-tiktok-single [style*="grid-template-columns: repeat(4"] { grid-template-columns: repeat(2, 1fr) !important; gap: 12px !important; }
}
@media (max-width: 420px) {
  body.page-template-template-tiktok-single [style*="grid-template-columns: repeat(3"],
  body.page-template-template-tiktok-single [style*="grid-template-columns: repeat(4"] { grid-template-columns: 1fr !important; }
}

/* ── 13. White post cards on the blog lists keep dark text ───────────── */
body.tomaso-theme .elementor-post__card { --e-global-color-text: #2B2F36; color: #2B2F36; }
body.tomaso-theme .elementor-post__card :is(h1, h2, h3, h4, .elementor-post__title, .elementor-post__title a) { color: #14171C; }
body.tomaso-theme .elementor-post__card :is(p, .elementor-post__excerpt p) { color: #3A4452; }
body.tomaso-theme .elementor-post__card .elementor-post__read-more { color: #0E7C8F; }
body.tomaso-theme .elementor-post__card :is(.elementor-post-date, .elementor-post-avatar, .elementor-post__meta-data) { color: #5F6B7A; }
body.tomaso-theme.ast-separate-container:not([class*="page-template-template-"]) .tomaso-footer-group-sites a { color: #3A4452 !important; }

/* ── 14. Wave divider wider than the phone (1 blog post scrolled sideways) ── */
.elementor-shape { overflow: hidden; }
body.single-post #page { overflow-x: clip; }

/* ════════════════════════════════════════════════════════════════════
 * PART B — components redesigned (17.10.2026), visible on every page
 * ════════════════════════════════════════════════════════════════════ */

/* ── B1. Phone menu: dark panel instead of the old white list ───────── */
@media (max-width: 1024px) {
  .elementor-location-header .elementor-nav-menu--dropdown {
    background: linear-gradient(180deg, #0b0b2a 0%, #050516 100%) !important;
    border-top: 1px solid rgba(56, 196, 218, 0.25) !important;
    box-shadow: 0 30px 60px rgba(0, 0, 0, 0.6) !important;
    max-height: calc(100vh - 90px); overflow-y: auto;
  }
  .elementor-location-header .elementor-nav-menu--dropdown a.elementor-item,
  .elementor-location-header .elementor-nav-menu--dropdown a.elementor-sub-item {
    color: #F2F4F8 !important; background: transparent !important;
    justify-content: flex-start !important; text-align: right !important;
    font-size: 17px !important; font-weight: 600 !important;
    padding: 16px 24px !important; border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
  }
  .elementor-location-header .elementor-nav-menu--dropdown a.elementor-sub-item {
    font-size: 15px !important; font-weight: 500 !important; color: #AEB8C8 !important;
    padding-inline-start: 40px !important; background: rgba(255, 255, 255, 0.025) !important;
  }
  .elementor-location-header .elementor-nav-menu--dropdown a:hover,
  .elementor-location-header .elementor-nav-menu--dropdown a.elementor-item-active { color: #38C4DA !important; }
  .elementor-location-header .elementor-nav-menu--dropdown .sub-arrow { color: #38C4DA !important; margin-inline-start: auto !important; }
  .elementor-location-header .elementor-nav-menu--dropdown li:last-child > a.elementor-item {
    margin: 14px 20px 18px !important; border: 0 !important; border-radius: 999px !important;
    background: #38C4DA !important; color: #001 !important; justify-content: center !important; font-weight: 800 !important;
  }
}

/* ── B2. Footer: grouped, readable, brand colours (every page) ─────── */
.elementor-location-footer { border-top: 1px solid rgba(255, 255, 255, 0.07); }
.elementor-location-footer .elementor-heading-title {
  color: #38C4DA !important; font-size: 13px !important; font-weight: 800 !important;
  letter-spacing: 0.14em !important; text-transform: uppercase;
}
.elementor-location-footer .elementor-icon-list-text,
.elementor-location-footer .elementor-text-editor,
.elementor-location-footer .elementor-widget-text-editor { color: #C9D1DD !important; }
.elementor-location-footer .elementor-icon-list-item a:hover .elementor-icon-list-text { color: #38C4DA !important; }
@media (max-width: 767px) {
  .elementor-location-footer .elementor-inner-section > .elementor-container { gap: 8px; }
  .elementor-location-footer .elementor-inner-column { padding: 18px 20px !important; }
  .elementor-location-footer .elementor-inner-column + .elementor-inner-column { border-top: 1px solid rgba(255, 255, 255, 0.06); }
  .elementor-location-footer .elementor-widget-theme-site-logo img { max-width: 92px !important; }
  /* site map as two even columns of tap-friendly links */
  .elementor-location-footer .elementor-icon-list-items:not(.elementor-inline-items) {
    display: grid !important; grid-template-columns: 1fr 1fr; gap: 2px 14px;
  }
  .elementor-location-footer .elementor-icon-list-item { justify-content: flex-start !important; text-align: right; }
  .elementor-location-footer .elementor-icon-list-item a { padding: 9px 0 !important; display: block; }
  .elementor-location-footer .elementor-icon-list-text { font-size: 15.5px !important; }
  .elementor-location-footer .elementor-social-icons-wrapper { gap: 10px !important; justify-content: center; }
  .elementor-location-footer .elementor-social-icon { width: 44px !important; height: 44px !important; border-radius: 12px !important; background: rgba(255, 255, 255, 0.06) !important; display: inline-flex !important; align-items: center; justify-content: center; }
}

/* ── B3. Strip under the footer (FAQ / lectures / group sites / guides) ── */
.tomaso-footer-faq-link, .tomaso-footer-speaker-link, .tomaso-footer-group-sites {
  text-align: center; font-size: 14px !important; padding: 6px 20px !important; margin: 0 !important;
}
.tomaso-footer-faq-link { padding-top: 22px !important; border-top: 1px solid rgba(255, 255, 255, 0.06); }
.tomaso-footer-speaker-link a, .tomaso-footer-group-sites a { color: #AEB8C8 !important; text-decoration: none; }
.tomaso-footer-speaker-link a:hover, .tomaso-footer-group-sites a:hover, .tomaso-footer-faq-link a:hover { color: #38C4DA !important; }
.tomaso-footer-group-sites { padding-bottom: 90px !important; color: #6B778A; }

/* ── B4. Space under the header on every service page ─────────────── */
@media (max-width: 768px) {
  .tomaso-rest-page { padding-top: 24px !important; }
  .tr-hero { padding: 36px 20px 32px !important; }
  .tr-section { padding: 56px 18px !important; }
  .tr-section-header { margin-bottom: 32px !important; }
  .tr-cta { padding: 72px 20px !important; }
}

/* ── B5. "What the service includes" cards: a compact row each ─────── */
@media (max-width: 600px) {
  .ts-platform-grid { grid-template-columns: 1fr !important; gap: 10px !important; }
  .ts-platform-card {
    display: grid !important; grid-template-columns: 52px 1fr; grid-template-rows: auto auto;
    column-gap: 14px; row-gap: 4px; align-items: start; text-align: right !important; padding: 16px !important; border-radius: 16px !important;
  }
  .ts-platform-card .ts-platform-icon { grid-row: 1 / span 2; width: 52px !important; height: 52px !important; margin: 0 !important; font-size: 24px !important; border-radius: 14px !important; display: flex; align-items: center; justify-content: center; }
  .ts-platform-card h3 { margin: 2px 0 0 !important; font-size: 1.05rem !important; text-align: right !important; }
  .ts-platform-card p { margin: 0 !important; font-size: 0.92rem !important; line-height: 1.6 !important; text-align: right !important; }
}

/* ── B6. "How we work" steps: a timeline instead of four huge boxes ── */
@media (max-width: 768px) {
  .ts-process-grid { grid-template-columns: 1fr !important; gap: 0 !important; position: relative; }
  .ts-process-step {
    display: grid !important; grid-template-columns: 46px 1fr; column-gap: 14px; text-align: right !important;
    padding: 14px 0 !important; background: none !important; border: 0 !important; box-shadow: none !important; position: relative;
  }
  .ts-process-step::before { content: ""; position: absolute; top: 56px; bottom: -14px; inset-inline-start: 22px; width: 2px; background: linear-gradient(180deg, rgba(56, 196, 218, 0.5), rgba(56, 196, 218, 0)); }
  .ts-process-step:last-child::before { display: none; }
  .ts-process-num {
    grid-row: 1 / span 2; width: 46px !important; height: 46px !important; border-radius: 50% !important; margin: 0 !important;
    display: flex !important; align-items: center; justify-content: center; font-size: 1.15rem !important;
    background: rgba(56, 196, 218, 0.12) !important; border: 1px solid rgba(56, 196, 218, 0.45) !important; color: #38C4DA !important;
  }
  .ts-process-step h3 { margin: 4px 0 4px !important; font-size: 1.08rem !important; color: #fff !important; text-align: right !important; }
  .ts-process-step p { margin: 0 !important; font-size: 0.93rem !important; color: #AEB8C8 !important; text-align: right !important; }
}

/* ── B7. "Results in the field" cards: logo beside the numbers ─────── */
@media (max-width: 600px) {
  .cs-grid { gap: 12px !important; justify-items: stretch !important; }
  .cs-grid > .cs-card { width: 100% !important; max-width: none !important; margin: 0 !important; }
  .cs-card { display: grid !important; grid-template-columns: 96px 1fr; align-items: stretch; border-radius: 18px !important; }
  .cs-card-logo-area { height: auto !important; min-height: 100%; padding: 12px !important; }
  .cs-card-logo-area img { max-width: 72px !important; max-height: 72px !important; }
  .cs-card-view-overlay { display: none !important; }
  .cs-card-content { padding: 14px 16px !important; text-align: right; }
  .cs-card-name { font-size: 1.05rem !important; margin-bottom: 4px !important; }
  .cs-card-desc { font-size: 0.86rem !important; line-height: 1.55 !important; margin-bottom: 10px !important; -webkit-line-clamp: 2; display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; }
  .cs-card-stats { gap: 8px !important; }
  .cs-stat-badge { padding: 6px 10px !important; }
}

/* ── B8. FAQ items: bigger tap target and text ─────────────────────── */
@media (max-width: 768px) {
  .ts-faq-q, .tr-faq-q, .tomaso-faq-question { font-size: 1rem !important; line-height: 1.5 !important; padding-top: 16px !important; padding-bottom: 16px !important; }
}

/* ── B9. Restaurant service cards: compact rows on a phone ─────────── */
@media (max-width: 600px) {
  .tr-services-grid { gap: 10px !important; }
  .tr-service-card {
    display: grid !important; grid-template-columns: 56px 1fr; column-gap: 14px; row-gap: 4px;
    align-items: start !important; text-align: right !important; padding: 18px 16px !important; border-radius: 18px !important;
  }
  .tr-service-card-icon { grid-row: 1 / span 3; width: 56px !important; height: 56px !important; margin: 0 !important; border-radius: 16px !important; }
  .tr-service-card-title { margin: 2px 0 0 !important; font-size: 1.08rem !important; text-align: right !important; }
  .tr-service-card-desc { margin: 0 !important; font-size: 0.92rem !important; line-height: 1.6 !important; text-align: right !important; }
  .tr-service-card-link { margin-top: 6px !important; justify-self: start; }
  .tr-features-grid { gap: 10px !important; }
  .tr-feature { padding: 18px 16px !important; text-align: right !important; }
}

/* ── B10. Old purple boxes on the legacy service pages ─────────────── */
.eael-call-to-action.bg-lite {
  background: linear-gradient(160deg, rgba(48, 22, 138, 0.55) 0%, rgba(10, 10, 40, 0.92) 70%) !important;
  border: 1px solid rgba(139, 92, 246, 0.35) !important; border-radius: 24px !important;
  box-shadow: 0 24px 60px -30px rgba(139, 92, 246, 0.7) !important; padding: 32px 22px !important;
}
.eael-call-to-action.bg-lite :is(h1, h2, h3, .title) { color: #fff !important; }
.eael-call-to-action.bg-lite :is(p, li, span, div) { color: #D3D9E3 !important; }
.eael-call-to-action.bg-lite :is(strong, b) { color: #5BD3E6 !important; }
.eael-call-to-action.bg-lite a.cta-button { border-radius: 999px !important; }

/* ── B11. Lectures page: text over the photo card is readable ──────── */
.tsl-why-big::before { background: linear-gradient(180deg, rgba(5, 5, 22, 0.15) 0%, rgba(5, 5, 22, 0.88) 62%, #050516 100%) !important; opacity: 1 !important; }
.tsl-why-big-text { text-shadow: 0 2px 14px rgba(0, 0, 0, 0.6); }
@media (max-width: 760px) { .tsl-why-big { min-height: 440px !important; display: flex; align-items: flex-end; } }

/* ── B12. Footer social icons on one line ──────────────────────────── */
@media (max-width: 767px) {
  .elementor-location-footer .elementor-social-icons-wrapper { flex-wrap: nowrap !important; gap: 8px !important; }
  .elementor-location-footer .elementor-social-icon { width: 42px !important; height: 42px !important; }
}

/* ── B13. Services hub cards: compact rows on a phone ─────────────── */
@media (max-width: 600px) {
  .ts-hub-grid { gap: 10px !important; }
  .ts-hub-card {
    display: grid !important; grid-template-columns: 56px 1fr; column-gap: 14px; row-gap: 3px;
    align-items: start !important; text-align: right !important; padding: 16px !important; border-radius: 18px !important;
  }
  .ts-hub-card-icon { grid-row: 1 / span 3; width: 56px !important; height: 56px !important; margin: 0 !important; border-radius: 16px !important; font-size: 26px !important; display: flex !important; align-items: center; justify-content: center; }
  .ts-hub-card-title { margin: 2px 0 0 !important; font-size: 1.08rem !important; text-align: right !important; }
  .ts-hub-card-desc { margin: 0 !important; font-size: 0.9rem !important; line-height: 1.55 !important; text-align: right !important; }
  .ts-hub-card-link { margin-top: 4px !important; font-size: 0.9rem !important; justify-self: start; }
}

/* ── B14. Brand icons everywhere (some templates do not load fa-brands) ── */
.fab, .elementor-social-icon .fab { font-family: "Font Awesome 5 Brands" !important; font-weight: 400 !important; }

/* ── B15. Page FAQ (18.10.2026): one style for every page ────────────────
   .tfaq = section added before the footer on pages without a FAQ (snippet "Page FAQ").
   .ts-faq-* = template FAQ lists; longer answers must never be cut. */
.ts-faq-item.active .ts-faq-a { max-height: none !important; }
.tfaq { background: #070B14; padding: 72px 20px; border-top: 1px solid rgba(255,255,255,.06); direction: rtl; }
.tfaq-wrap { max-width: 860px; margin: 0 auto; }
.tfaq-label { margin: 0 0 8px !important; text-align: center; font: 700 13px/1 Assistant, Heebo, sans-serif; letter-spacing: .32em; color: #38C4DA !important; }
.tfaq-title { margin: 0 0 32px !important; text-align: center; font: 800 clamp(1.6rem, 4vw, 2.4rem)/1.2 Assistant, Heebo, sans-serif !important; color: #F2F4F8 !important; }
.tfaq-list { display: flex; flex-direction: column; gap: 12px; }
.tfaq-item { background: rgba(255,255,255,.035); border: 1px solid rgba(255,255,255,.09); border-radius: 16px; transition: border-color .2s; }
.tfaq-item:hover, .tfaq-item[open] { border-color: rgba(56,196,218,.35); }
.tfaq-q { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px 22px; min-height: 44px; font: 700 1.02rem/1.5 Assistant, Heebo, sans-serif; color: #F2F4F8 !important; }
.tfaq-q::-webkit-details-marker { display: none; }
.tfaq-q::after { content: '+'; flex-shrink: 0; font-size: 1.5rem; line-height: 1; color: #38C4DA; transition: transform .2s; }
.tfaq-item[open] .tfaq-q::after { content: '−'; }
.tfaq-q:focus-visible { outline: 2px solid #38C4DA; outline-offset: 2px; border-radius: 16px; }
.tfaq-a { padding: 0 22px 20px; }
.tfaq-a p { margin: 0 !important; font: 400 .98rem/1.85 Assistant, Heebo, sans-serif !important; color: #C9D1DD !important; }
.tfaq-group { margin-top: 36px; }
.tfaq-group-title { margin: 0 0 14px !important; font: 800 1.25rem/1.3 Assistant, Heebo, sans-serif !important; color: #5BD3E6 !important; }
.tfaq-more { display: inline-block; margin-top: 12px; font: 700 .95rem/44px Assistant, Heebo, sans-serif; color: #38C4DA !important; text-decoration: none; }
.tfaq-more:hover { text-decoration: underline; }
@media (max-width: 767px) {
  .tfaq { padding: 48px 16px; }
  .tfaq-title { margin-bottom: 22px !important; }
  .tfaq-q { padding: 16px 16px; font-size: 1rem; }
  .tfaq-a { padding: 0 16px 18px; }
}

/* ── B16. English pages (18.10.2026): the Hebrew templates are translated on /en/ and read left to right ── */
body.tomaso-en :is(.ts-platform-card, .ts-platform-card h3, .ts-platform-card p, .ts-process-step, .ts-process-step h3, .ts-process-step p,
  .cs-card-content, .tr-service-card, .tr-service-card-title, .tr-service-card-desc, .tr-feature, .ts-hub-card, .ts-hub-card-title, .ts-hub-card-desc,
  .th-head .tomaso-heading, .tc-work-head .tc-section-header, .ts-faq-q, .ts-faq-a, .tomaso-about-member-text,
  .elementor-location-footer .elementor-icon-list-item, .elementor-location-header .elementor-nav-menu--dropdown a.elementor-sub-item) { text-align: left !important; }
body.tomaso-en .ts-faq-q { flex-direction: row; }
body.tomaso-en .tfaq { direction: ltr; }

/* ── B17. Readable WhatsApp buttons + old post colors (18.10.2026) ──────────
   White on WhatsApp's light green is 2:1 and hard to read; #128C4A is 4.3:1 and still reads as WhatsApp. */
:is(.tomaso-btn-whatsapp, .tomaso-ls-whatsapp, .tsl-btn-wa, .tomaso-ls-sidebar-btn.tomaso-ls-whatsapp) { background: #128C4A !important; background-color: #128C4A !important; color: #fff !important; }
:is(.tomaso-btn-whatsapp, .tomaso-ls-whatsapp, .tsl-btn-wa):hover { background: #0E7C3F !important; background-color: #0E7C3F !important; }
/* Old Elementor posts carry inline dark colors (#1f1f1f) that vanish on the dark post page. */
.tb-article [style*="color"]:not(a):not(a *) { color: inherit !important; }
.tb-article [style*="background"] { background: transparent !important; }

/* ── B18. Old Elementor timeline (social design page): light grey boxes → dark cards ── */
.eael-content-timeline-content { background: #0F1424 !important; border: 1px solid rgba(255,255,255,.09) !important; border-radius: 16px !important; box-shadow: none !important; }
.eael-content-timeline-content :is(h1,h2,h3,h4,.eael-timeline-title) { color: #F2F4F8 !important; }
.eael-content-timeline-content :is(p,li,span,div) { color: #C9D1DD !important; }
.eael-content-timeline-content::before, .eael-content-timeline-content::after { border-left-color: #0F1424 !important; border-right-color: #0F1424 !important; }

/* ── B19. Desktop (18.10.2026): one-line menu and readable body text ─────
   At 1280-1600 the 10-item menu wrapped to two rows, and card/description text was 12.75-14.7px in grey. */
@media (min-width: 1025px) {
  .elementor-location-header .elementor-nav-menu--main > ul.elementor-nav-menu { flex-wrap: nowrap !important; }
  .elementor-location-header .elementor-nav-menu--main .elementor-nav-menu > li > a.elementor-item { white-space: nowrap; }
}
@media (min-width: 1025px) and (max-width: 1600px) {
  .elementor-location-header .elementor-nav-menu--main .elementor-nav-menu > li > a.elementor-item { font-size: 15px !important; padding-inline: 9px !important; }
  .elementor-location-header .elementor-nav-menu--main .elementor-nav-menu > li { margin-inline: 0 !important; }
}
@media (min-width: 1025px) {
  body[class*="page-template-template-"] :is(.ts-platform-card p, .ts-process-step p, .ts-hub-card-desc, .tr-service-card-desc, .tr-feature p, .cs-card-desc, .tomaso-about-stat-desc, .tr-hero-desc, .tr-cta-desc, .tr-section-header p:not(.tr-section-label), .ts-faq-a p) {
    font-size: 16px !important; line-height: 1.75 !important;
  }
  body[class*="page-template-template-"] :is(.ts-platform-card p, .ts-process-step p, .ts-hub-card-desc, .tr-service-card-desc, .tr-feature p, .cs-card-desc) { color: #B8C2D0 !important; }
  .tr-hero-desc { font-size: 18px !important; max-width: 760px; margin-inline: auto; }
  .ts-platform-card h3, .tr-service-card-title, .ts-hub-card-title { font-size: 1.2rem !important; }
  .tomaso-lecture-card-audience { font-size: 14px !important; }
  .ws-card-type { font-size: 12px !important; }
  :is(.ts-stat-label, .tr-stat-label) { color: #9AA6B8 !important; }
}
@media (min-width: 1025px) {
  .tfaq-a p { font-size: 16px !important; }
  .tfaq-q { font-size: 1.1rem; }
  :is(.tomaso-card-body p, .tomaso-about-secondary-card-inner p) { font-size: 15.5px !important; line-height: 1.7 !important; }
  .tc-work-card-info p { font-size: 15px !important; }
}
.tb-article table { border: 0 !important; border-collapse: collapse; }
.tb-article :is(th) { color: #F2F4F8; background: rgba(56,196,218,.08); }