/* @import must be the first statement in the file. */
@import url('https://fonts.googleapis.com/css2?family=Rubik:wght@400;500&display=swap');

/* =========================================================================
   Wikids — redesigned site (WIK-115) — HEBREW / RTL overrides
   Loaded AFTER css/wikids-new.css (and css/blog.css where present) on every
   /he/ page. The base sheet was authored LTR with many directional rules;
   this file re-mirrors only what is directionally wrong under dir="rtl".
   Nothing here restyles colour/spacing beyond what RTL requires.
   ========================================================================= */

/* ---------- Typography ----------
   The previous Hebrew site was set in Rubik (not Nunito), and — importantly —
   at much lighter weights than this redesign's Latin defaults: the old
   hebrew.css used Rubik 400 for body copy and 500 for headings / bold / buttons.
   The new base sheet is far heavier (body 700–800, headings 1000, .btn 1000),
   which reads as over-bold in Hebrew. Restore Rubik AND the old site's weights. */
:root { --font: "Rubik", -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif; }

/* Regular text → Rubik 400 (matches old hebrew.css). */
body,
p, li, span, a, label, input, textarea, select, button,
.section-subtitle, .trust-strip, .testimonial-text, .testimonial-author,
.benefit-slide-text, .blog-snapshot-text, .feature p, .cta p,
.footer a, .footer p, .blog-post p, .article p, .legal p, .legal li,
.blog-snapshot-btn, .blog-read-more, .related-post-card-btn {
  font-family: var(--font);
  font-weight: 400;
}

/* Headings / bold / buttons / brand emphasis → Rubik 500 (matches old site). */
h1, h2, h3, h4, h5, h6,
b, strong,
.btn, .nav-links a, .section-title,
.blog-intro h1, .blog-post h2, .blog-side-block h3, .blog-side-block h4,
.article h1, .article h2, .article h3, .legal h1, .legal h2, .legal h3,
.blog-tip-title, .related-posts-title, .related-post-card-title,
.contact-form label, .footer h4 {
  font-family: var(--font);
  font-weight: 500;
}

/* ---------- Navigation ---------- */
/* Base pushes the links to the right with margin-left:auto; under RTL the menu
   belongs on the left, so push with margin-right:auto instead. */
.nav-links { margin-left: 0; margin-right: auto; }
.nav-toggle { margin-left: 0; margin-right: auto; }

/* ---------- Hero ---------- */
/* Text column keeps 45% / media 55%. Under RTL the grid's first column (paper
   card) naturally moves to the right — which is what we want (text on the
   right, phones on the left), so the grid template needs no change. */

/* Hero device carousel: the slides are object-fit:contain and centre inside the
   media column, which leaves the phones drifting toward the middle. In the HE
   layout the media sits on the left, so pin the contained artwork to the LEFT
   edge of its column, then hold it off the owl seam with a right pad on the
   whole media block (cleaner than a per-slide margin — the slides are
   absolutely-stacked layers). */
@media (min-width: 901px) {
  .hero-carousel .hero-slide { object-position: left center; }
  .hero-media { padding-left: 0; padding-right: 30px; }
}

/* Trust strip: base has margin 18px 50px 0 0 (a right gutter to clear the
   owl on the LTR layout). The owl now sits on the left, so move the gutter. */
.trust-strip { margin: 18px 0 0 50px !important; }

/* Mobile: the paper card stacks full-width, so centre the hero title (and its
   trust strip, dropping the desktop left gutter) rather than leaving it
   right-aligned against the card edge. */
@media (max-width: 900px) {
  .hero h1 { text-align: center; }
  .trust-strip { margin: 18px 0 0 0 !important; text-align: center; }
}

/* ---------- Hero owl (mirrored to the left seam — DESKTOP ONLY) ----------
   Base: sits at left:calc(50% - 50px) with translateX(-52%) near the
   card/carousel seam. In RTL the paper card is on the right and the carousel
   on the left, so the owl belongs mirrored across the centre line: same 50px
   nudge, measured from the right edge, with the breathe keyframes carrying the
   same translateX.
   Scoped to >=901px so the base MOBILE rule (@media max-width:900px, which
   perches the owl at left:4% with its own breathe keyframe) applies unchanged —
   the HE mobile owl then sits exactly where the EN mobile owl does. */
@media (min-width: 901px) {
  .owl {
    left: auto;
    right: calc(50% - 50px);
    transform: translateX(52%);
    animation-name: owlBreatheHe;
  }
  @keyframes owlBreatheHe {
    0%, 100% { transform: translateX(52%) translateY(0)     scale(1); }
    50%      { transform: translateX(52%) translateY(-2.5%) scale(1.012); }
  }
}
@media (min-width: 901px) and (prefers-reduced-motion: reduce) {
  .owl { transform: translateX(52%); }
}

/* ---------- Section headings / feature block ---------- */
/* Base .feature h2 is text-align:left; mirror to right. Scope to DESKTOP so the
   base sheet's mobile rule (@media max-width:900px → text-align:center) still
   wins on small screens — an unscoped override here loads after the base and
   would beat that media query, leaving the heading right-aligned on mobile. */
@media (min-width: 901px) {
  .feature h2 { text-align: right; }
}

/* ---------- Carousels (testimonials / benefits / blog) ----------
   The slider JS positions the track with translateX(-current*px) and clones a
   prefix/suffix, assuming an LTR track where "advance" moves content left.
   Keep that math valid by forcing each TRACK to LTR flow, then restore RTL on
   the slide CONTENT so Hebrew text inside each card reads correctly. */
.testimonials-track,
.benefits-track,
.blog-snapshots-track { direction: ltr; }
.testimonial-slide,
.benefit-slide,
.blog-snapshot-slide { direction: rtl; }

/* Centre the chevron glyph in the round button. The base uses display:grid with
   no place-items, so the ::before sits at the grid's start edge; with the RTL
   glyph swap below that reads as off-centre. place-items:center fixes it. */
.testimonial-nav, .benefit-nav, .blog-snapshot-nav { place-items: center; }
.testimonial-nav::before, .benefit-nav::before, .blog-snapshot-nav::before {
  display: block;
  text-align: center;
}

/* Prev/Next arrows: base pins prev to the left edge, next to the right. In RTL
   "previous" should sit on the RIGHT and "next" on the LEFT. Swap the edges. */
.testimonial-nav.prev, .benefit-nav.prev, .blog-snapshot-nav.prev { left: auto; right: -10px; }
.testimonial-nav.next, .benefit-nav.next, .blog-snapshot-nav.next { right: auto; left: -10px; }
/* Chevron glyphs: for RTL, the arrow on the RIGHT ("previous") points right and
   the arrow on the LEFT ("next") points left, so each points toward the content
   it reveals. */
.testimonial-nav.prev::before, .benefit-nav.prev::before, .blog-snapshot-nav.prev::before { content: "\2039"; } /* ‹ on the right = previous */
.testimonial-nav.next::before, .benefit-nav.next::before, .blog-snapshot-nav.next::before { content: "\203A"; } /* › on the left  = next */

/* ---------- Testimonials flower corners ----------
   Swap the two corner images so the bunch that faces inward-left sits on the
   right corner and vice-versa, matching the mirrored RTL composition. */
.testimonials-section {
  background:
    url("/img/flowers_corner_left.png")  left bottom / auto clamp(140px, 18vw, 220px) no-repeat,
    url("/img/flowers_corner_right.png") right bottom / auto clamp(140px, 18vw, 220px) no-repeat,
    var(--cream);
}

/* ---------- Benefits carousel ----------
   Base body gutter is margin-left:11.6% (freeing space on the image side, which
   is on the LEFT in LTR). In RTL the image column moves to the right, so the
   gutter must free space on the RIGHT of the body. Scope to DESKTOP: the base
   sheet zeroes this gutter at <=700px (stacked layout), and an unscoped rule
   here would beat that media query and leave a phantom gutter on mobile. */
@media (min-width: 701px) {
  .benefit-slide-body { margin-left: 0; margin-right: 11.6%; }

  /* Category owls: base stands them one owl-width PAST the image's inner edge,
     to the right (right: -clamp(...)). In RTL the image is on the right and its
     inner edge faces left, so the owl belongs one owl-width to the LEFT. */
  .benefit-owl {
    right: auto;
    left: calc(-1 * clamp(90px, 12vw, 120px));
  }
}

/* Mobile category owls: base perches them in the right-hand quarter (right:1.5%)
   beside the stacked text. In RTL the text quarter is on the left, so mirror the
   owl to left:1.5%. */
@media (max-width: 700px) {
  .benefit-owl { right: auto; left: 1.5%; }
}

/* ---------- Coloring panel ----------
   Base grid is `auto 1fr` (illustration first → left in LTR). Under RTL the
   first grid column is placed on the RIGHT, so the illustration naturally moves
   to the right and the copy sits on the left — which is what we want for HE.
   Just fix the column sizing (artwork auto, copy 1fr) and let RTL order stand. */
/* Scope to DESKTOP: base collapses this to a single centred column at <=700px,
   so leave that alone on mobile. */
@media (min-width: 701px) {
  .coloring-inner { grid-template-columns: auto 1fr; }
}

/* ---------- Blog index / article (blog.css lives LTR too) ---------- */
/* Legal / article lists: base indents with padding-left; mirror it. */
.legal ul { padding-left: 0; padding-right: 22px; }

/* Blog-tip callout: base accent bar is border-left; move to the right edge. */
.blog-tip { border-left: 0; border-right: 5px solid var(--purple); }

/* "Read more" arrows.
   On the EN pages the arrow is a LITERAL "→" typed into each link's text. The HE
   markup has no such character (just "קראו עוד"), so add the arrow via CSS as a
   left-pointing "←" (RTL reading direction). Using ::after also survives the
   sidebar toggle's textContent swap, which would strip a literal glyph.
   .blog-snapshot-btn already appends its arrow via a base ::after → flip it too. */
.blog-snapshot-btn::after { content: " \2190"; }
.blog-read-more::after { content: " \2190"; }

/* ---------- Footer ----------
   Footer grid columns auto-reorder under RTL (brand block moves to the right),
   which matches the mirrored layout; nothing to override. Social row and forms
   use flex + logical gaps and need no change. */

/* ---------- Contact form ---------- */
/* Inputs/labels are already block/full-width; RTL inline flow handles text.
   Number input keeps LTR digits naturally. Nothing directional to override. */