/*
 * main2-refresh.css — homepage/workshops palette refresh (2026)
 * Loaded AFTER css/main2.css on page-homeNew.php + page-workshopsNew.php.
 * Re-declares the same selectors with the new token palette; main2.css
 * itself is untouched (it also serves out-of-scope mezave templates).
 *
 * Mapping (sampled from Figma home 114:2063):
 *   #FBFFED (hero bg)        -> #fff
 *   #CCE675 (lime)           -> var(--c-lime) #cad661
 *   #5A980F (green)          -> var(--c-green) / var(--c-olive)
 *   #404040 (dark gray)      -> var(--c-green)
 *   tab/events section bg    -> var(--c-cream), decorative image dropped
 *   #FFCE66 (amber buttons)  -> kept (still present in the new design)
 */

/* Hero */
section.hero_banner {
	background-color: var(--c-cream);
}

section.hero_banner .btn-group a:last-child {
	background: var(--c-lime);
	border-color: var(--c-lime);
}

/* Tab + events sections sit on cream, no decorative bg image */
section.home_tab,
section.events_section {
	background-image: none;
	background-color: var(--c-cream);
}

/* Bootstrap-color utilities used by the tabs/badges */
.bg-parrot {
	background-color: var(--c-lime) !important;
}

.bg-success,
span.badge.bg-success,
.booksSwiper .swiper-slide span.badge.bg-success,
section.home_tab .row.row-cols-1.row-cols-md-4 span.badge.bg-success {
	background-color: var(--c-olive) !important;
}

/* --------------------------------------------------------------
   Home "אורי עד הבית" tabs — match Figma (114:2081):
   the two inactive tabs are white; only the selected tab is
   ירוק בהיר #6F8B47 with white text. This overrides the
   bg-success / bg-orange / bg-parrot utility colors the three
   buttons carry, without touching those utilities where they're
   used for badges elsewhere on the page.
   -------------------------------------------------------------- */
section.home_tab .nav-tabs .nav-item .nav-link,
section.home_tab .nav-tabs .nav-item .nav-link.bg-success,
section.home_tab .nav-tabs .nav-item .nav-link.bg-orange,
section.home_tab .nav-tabs .nav-item .nav-link.bg-parrot {
	background-color: var(--c-white) !important;
	border: 1px solid #e7e2d6;
	border-bottom: none;
}

section.home_tab .nav-tabs .nav-item .nav-link h3 {
	color: var(--c-text);
}

section.home_tab .nav-tabs .nav-item .nav-link p {
	color: var(--c-text);
	opacity: .7;
}

section.home_tab .nav-tabs .nav-item .nav-link.active,
section.home_tab .nav-tabs .nav-item .nav-link.active.bg-success,
section.home_tab .nav-tabs .nav-item .nav-link.active.bg-parrot {
	background-color: var(--c-olive) !important;
	border-color: var(--c-olive);
}

section.home_tab .nav-tabs .nav-item .nav-link.active h3,
section.home_tab .nav-tabs .nav-item .nav-link.active p {
	color: var(--c-white);
	opacity: 1;
}

/* Card hovers: translucent green -> translucent olive */
.booksSwiper .swiper-slide .card:hover,
section.home_tab .row.row-cols-1.row-cols-md-4 .col .card:hover {
	background: rgba(111, 139, 71, 0.25);
}

/* Dark buttons/bars -> brand green */
.booksSwiper .swiper-slide .card a.btn.btn-dark,
section.home_tab .row.row-cols-1.row-cols-md-4 .card a.btn.btn-dark {
	background-color: var(--c-green);
	border-color: var(--c-green);
}

section.home_tab .home_tab_bar {
	background: var(--c-green);
}

/* Events "לכל האירועים" CTA — olive green like Figma (114:2128).
   Scoped so the dark "הכל" filter + area dropdown stay dark. */
section.events_section .btm_button a.btn.btn-dark {
	background-color: var(--c-olive);
	border-color: var(--c-olive);
}

.btn_btm_new a.btn-dark {
	color: var(--c-lime) !important;
	background: var(--c-green);
	border-color: var(--c-green);
}

.btn_btm_new a:last-child {
	background-color: var(--c-lime);
	border-color: var(--c-lime);
	/* the label came through black; the design pairs lime with dark green.
	   Needs !important for the same reason its sibling above does: the
	   button rules in main2.css outrank a plain declaration here. */
	color: var(--c-green) !important;
}

/* Book band */
section.book_section {
	background: var(--c-green);
}

section.book_section .carousel_wrp:after {
	background: linear-gradient(90deg, rgba(59, 83, 35, 0) 0%, var(--c-green) 100%);
}

/* Testimonials */
section.testimonials_section .card {
	border: 2px solid var(--c-olive) !important;
}

/* Podcast: Figma (114:2385) shows a flat cream section - no outlined box.
   main2.css draws a 2px black frame here; drop it rather than recolour it,
   or the frame reads as yet another green next to the solid green bands. */
section.podcast_section .container-fluid {
	border: none;
	background-color: var(--c-cream);
}

/* Newsletter band */
section.newsletter_section {
	background-color: var(--c-green);
	/* all four corners rounded — the base sheet squares the bottom-left
	   (32px 32px 32px 0), which looked unfinished on desktop */
	border-radius: 32px !important;
}

/* Section headings in brand green */
section.home_tab h3.fw-bold,
section.events_section h2,
section.testimonials_section h2 {
	color: var(--c-green);
}

/* the podcast heading is dark in the design; tokens.css greens every h2,
   so state it explicitly */
section.podcast_section .container-fluid h2 {
	color: var(--c-text);
}

/* ---------------------------------------------------------------
   Visual polish (no structural/ACF changes)
   --------------------------------------------------------------- */

/* Consistent section heading scale */
section.home_tab > .container-fluid > h2,
section.events_section h2,
section.testimonials_section h2,
section.newsletter_section h2 {
	color: var(--c-green);
	font-weight: 700;
	font-size: 44px;
}

section.book_section h2,
section.newsletter_section h2 {
	color: var(--c-white);
}

section.hero_banner h1 {
	color: var(--c-green);
}

/* Cards: consistent radius, soft shadow, gentle hover lift */
section.home_tab .card,
section.testimonials_section .card,
section.book_section .card {
	border-radius: 16px;
	border: none;
	box-shadow: 0 2px 12px rgba(0, 0, 0, 0.07);
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}

section.home_tab .card:hover,
section.testimonials_section .card:hover {
	transform: translateY(-3px);
	box-shadow: 0 8px 22px rgba(0, 0, 0, 0.1);
}

/* Testimonial cards: cream surface instead of hard border */
section.testimonials_section .card {
	background: var(--c-white);
	border: 1px solid #eee9de !important;
}

/* Hero video — full-bleed like Figma (114:2066): edge to edge,
   square corners, no side margins (was capped at 1230px + rounded). */
section.hero_banner .ratio.ratio-16x9,
section.hero_banner iframe {
	border-radius: 0;
	overflow: hidden;
}

section.hero_banner .ratio.ratio-16x9 {
	max-width: 100%;
	margin: 0;
}

/* Buttons inside tab cards */
section.home_tab .card a.btn.btn-dark,
section.home_tab .row.row-cols-1.row-cols-md-4 .card a.btn.btn-dark {
	border-radius: var(--radius-pill);
	font-weight: 700;
}

/* Newsletter inputs on the green band */
section.newsletter_section input.form-control {
	border: none;
	padding: 10px 18px;
}

/* ---------------------------------------------------------------
   Section headings: no white plate behind the text.
   main2.css gives these a #fff background + side padding so the
   heading could punch a hole through the old decorative artwork
   (images/Group 15.png). The refresh drops that artwork, so the
   plate reads as a stray white box on the cream background.
   --------------------------------------------------------------- */
section.home_tab h2,
section.events_section h2,
section.testimonials_section h2,
section.instagram_section .title_bar h2,
section.instagram_section .title_bar h2.bg-white {
	background: transparent !important;
	padding-left: 0;
	padding-right: 0;
}

/* the icon row shares the same bar — keep it plate-free too */
section.instagram_section .title_bar .social_icons,
section.instagram_section .title_bar .social_icons.bg-white {
	background: transparent !important;
}

/* the artwork the plates existed to mask */
section.instagram_section .container-fluid {
	background-image: none;
}

/* ---------------------------------------------------------------
   Newsletter band — the signup form is injected by the external
   ravpage widget, which ships its own greens: a teal heading
   (#339966) and a kelly-green submit (#11a231). Both clash with
   the brand palette, so re-skin them in place.

   The CTA sits ON the dark green band, so it can't be the brand
   green itself (it would vanish) — it takes the palette's
   contrast pair for dark surfaces: lime plate, dark green text.
   Same pairing as the hero button and the footer's submit.
   --------------------------------------------------------------- */
section.newsletter_section .submitbuttonbox a.submitButton,
section.newsletter_section a.submitButton,
section.newsletter_section input[type="submit"] {
	background: var(--c-lime) !important;
	background-color: var(--c-lime) !important;
	border-color: var(--c-lime) !important;
	color: var(--c-green) !important;
	border-radius: var(--radius-pill) !important;
	font-family: var(--font-main) !important;
	font-weight: 700 !important;
	/* the widget animates this button; a running transition outranks even
	   !important in the cascade, which pins the colour to its own green */
	transition: none !important;
}

section.newsletter_section .submitbuttonbox a.submitButton *,
section.newsletter_section a.submitButton * {
	color: var(--c-green) !important;
}

section.newsletter_section .submitbuttonbox a.submitButton:hover,
section.newsletter_section a.submitButton:hover,
section.newsletter_section input[type="submit"]:hover {
	background-color: var(--c-lime-2) !important;
	border-color: var(--c-lime-2) !important;
}

/* widget copy on the dark band reads white, like the section's own h2 */
section.newsletter_section span[style*="339966"],
section.newsletter_section font[color="#339966"] {
	color: var(--c-white) !important;
}

/* ---------------------------------------------------------------
   Events section: legacy near-miss greens -> palette.
   page-homeNew.php now emits the tokens directly, but the same
   markup is still live (and the preview proxies it), so map the
   old inline hexes too. Case-insensitive; harmless once deployed,
   because nothing will match any more.
   --------------------------------------------------------------- */
section.events_section [style*="CCE675" i] {
	background-color: var(--c-lime) !important;
	color: var(--c-text) !important;
}

section.events_section [style*="E2FFBE" i] {
	background-color: var(--c-white) !important;
	color: var(--c-green) !important;
}

section.events_section [style*="85D326" i] {
	background-color: var(--c-lime-2) !important;
	color: var(--c-white) !important;
}

section.events_section [style*="5A980F" i] {
	background-color: var(--c-olive) !important;
}

section.events_section [style*="356000" i] {
	background-color: var(--c-green) !important;
}

/* ---------------------------------------------------------------
   Program band ("המסלול להנהגת הבריאות") — type over a photo.

   The section is .text-white, but tokens.css colours every heading
   with --c-green, and that beats the inherited white: the title and
   subtitle were rendering dark green on a dark photo. State white
   explicitly, and replace the flat 25% black veil with a directional
   scrim so the copy always has a contrast bed while the picture
   stays vivid on the side with no text. Tinted from the brand green
   rather than neutral black, so it sits with the foliage.
   --------------------------------------------------------------- */
section.program_section h2,
section.program_section h3 {
	color: var(--c-white);
	text-shadow: 0 1px 12px rgba(20, 28, 12, 0.45);
}

section.program_section:after {
	/* copy is right-aligned (RTL), so weight the scrim to the right */
	background: linear-gradient(to left,
		rgba(26, 37, 16, 0.82) 0%,
		rgba(26, 37, 16, 0.62) 34%,
		rgba(26, 37, 16, 0.22) 66%,
		rgba(26, 37, 16, 0) 100%);
	opacity: 1;
}

/* keep the outline button readable on the lighter end of the scrim */
section.program_section .btn-outline-light {
	border-width: 2px;
	font-weight: 700;
}

@media only screen and (max-width: 767px) {
	/* the copy spans the full width on phones, so grade top-to-bottom */
	section.program_section:after {
		background: linear-gradient(to top,
			rgba(26, 37, 16, 0.86) 0%,
			rgba(26, 37, 16, 0.66) 55%,
			rgba(26, 37, 16, 0.42) 100%);
	}
}

/* ---------------------------------------------------------------
   Book band buttons.
   The buy button was #87C11B — one more near-miss green. It sits on
   the dark green band, so it takes the palette's pairing for dark
   surfaces (lime plate, dark green label), as on the hero and the
   newsletter. Mapped in page-homeNew.php; the old inline hex is
   still live and proxied here, so map that too.

   The labels also sat high in the button: the anchors are display:
   block with a line-height shorter than the box, which left more
   room under the text than above it. Centre them properly and give
   the short "רכישה" label room to breathe.
   --------------------------------------------------------------- */
section.book_section [style*="87C11B" i] {
	background-color: var(--c-lime) !important;
	color: var(--c-green) !important;
}

section.book_section .btn_gp a,
section.book_section .btn_gp .btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 60px;
	/* Bootstrap's .px-4 utility is !important, so match it to widen the pill */
	padding: 12px 40px !important;
	line-height: 1.1;
	text-align: center;
	box-sizing: border-box;
}

/* ==================================================================
   Home "אורי עד הבית" tabs + books carousel (desktop)
   ================================================================== */

/* The three tab headers sat 10px apart, which at their size reads as one
   continuous bar rather than three cards. They are 454px wide each, so
   simply widening the gap overflowed the 1385px row and wrapped the third
   tab onto its own line — let them share the row equally instead, which
   both fits the wider gap and keeps them the same size as each other. */
section.home_tab .nav-tabs#homeTab {
	gap: 20px;
	flex-wrap: nowrap;
}

section.home_tab .nav-tabs#homeTab > .nav-item {
	flex: 1 1 0;
	min-width: 0;
}

section.home_tab .nav-tabs#homeTab > .nav-item > .nav-link {
	width: 100%;
}

/* Swiper's default arrows are small black glyphs sitting ON the first and
   last visible card, so they are easy to miss and cover the artwork. Give
   the carousel side gutters and move the arrows into them — outside the
   cards, vertically centred on the row — matching the circular arrows the
   recipe carousels already use. */
section.home_tab .booksSwiper {
	padding-inline: 60px;
}

section.home_tab .booksSwiper .swiper-button-next,
section.home_tab .booksSwiper .swiper-button-prev {
	width: 44px;
	height: 44px;
	margin-top: 0;
	transform: translateY(-50%);
	top: 50%;
	border-radius: 50%;
	background: var(--c-white);
	border: 1px solid #e3e0d8;
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
	color: var(--c-green);
	transition: background 0.2s ease, border-color 0.2s ease;
}

section.home_tab .booksSwiper .swiper-button-next { right: 0; left: auto; }
section.home_tab .booksSwiper .swiper-button-prev { left: 0; right: auto; }

section.home_tab .booksSwiper .swiper-button-next:hover,
section.home_tab .booksSwiper .swiper-button-prev:hover {
	background: var(--c-cream);
	border-color: var(--c-olive);
}

/* the default glyph is oversized for a 44px disc */
section.home_tab .booksSwiper .swiper-button-next::after,
section.home_tab .booksSwiper .swiper-button-prev::after {
	font-size: 16px;
	font-weight: 700;
}

/* Swiper computes slide widths from the container, so the padding above
   must not also shift the track. */
section.home_tab .booksSwiper .swiper-wrapper {
	box-sizing: border-box;
}

/* ==================================================================
   Book section on mobile.
   A stylesheet we can't read (cross-origin) repaints this section's
   type and buttons in black inside its own max-width query, so it
   lands after ours and even beat the !important above. Restate the
   desktop values with the weight to hold them.
   ================================================================== */
@media only screen and (max-width: 767px) {
	body section.book_section h2,
	body section.book_section .lead,
	body section.book_section p {
		color: var(--c-white) !important;
	}

	/* "לכל הספרים שלי" — Bootstrap's .btn-light, near-white on the green */
	body section.book_section a.btn-light {
		background-color: #f8f9fa !important;
		border-color: #f8f9fa !important;
		color: #000 !important;
	}

	/* "רכישה" — the inline #87C11B the page ships, recoloured to our lime.
	   The live theme's mobile CSS paints it black with
	   "section.book_section .btn_gp a:last-child { background:#000 !important }"
	   — (0,3,2); the first selector below is (0,3,3), so it wins on weight
	   rather than on load order. */
	body section.book_section .btn_gp a:last-child,
	body section.book_section a[style*="87C11B" i] {
		background-color: var(--c-lime) !important;
		background: var(--c-lime) !important;
		border-color: transparent !important;
		color: var(--c-green) !important;
	}

	/* Reviews carousel on the green: the quote is already white, but the
	   reviewer's name fell back to Bootstrap's body colour and the Swiper
	   arrows (a filled SVG path) painted black. */
	body section.book_section .carousel_wrp .card-body,
	body section.book_section .carousel_wrp .card-body span {
		color: var(--c-white) !important;
	}

	body section.book_section .carousel_wrp .swiper-button-next,
	body section.book_section .carousel_wrp .swiper-button-prev {
		color: var(--c-white) !important;
		--swiper-navigation-color: var(--c-white);
	}

	body section.book_section .carousel_wrp .swiper-navigation-icon path {
		fill: currentColor !important;
	}
}

/* ==================================================================
   Home page, mobile polish.
   ================================================================== */
@media only screen and (max-width: 767px) {
	/* --- "אורי עד הבית" tab toggles ------------------------------------
	   Three narrow boxes whose <h3> inherited text-align:right, so the
	   two-line titles hugged the right edge and read as ragged. Centre
	   the content in every box and round them fully so they sit as tidy
	   pills above the panel instead of clipped top-only tabs. */
	/* Read as tabs, not free pills: top-rounded, flush against the panel
	   below, and the row's gap tightened so the three sit as one strip. */
	section.home_tab .nav-tabs#homeTab {
		gap: 8px !important;
		margin-bottom: 0 !important;
	}

	section.home_tab .nav-tabs#homeTab > .nav-item > .nav-link {
		display: flex !important;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		text-align: center !important;
		min-height: 68px;
		padding: 12px 8px !important;
		border-radius: 14px 14px 0 0 !important;
		border: none !important;
	}

	/* the live theme hangs a 5px brown-gradient "shelf" off every tab via
	   .nav-item::after — that's the line/ledge under the cards. Kill it. */
	section.home_tab .nav-tabs#homeTab > .nav-item::after {
		display: none !important;
		content: none !important;
	}

	section.home_tab .nav-tabs#homeTab > .nav-item > .nav-link h3 {
		text-align: center !important;
		font-size: 15px !important;
		line-height: 1.25;
		margin: 0 !important;
	}

	/* --- events filter pills -----------------------------------------
	   The row is Bootstrap .justify-content-end, so the pills packed to
	   one side and wrapped unevenly. Centre them. */
	section.events_section .d-flex.flex-wrap.justify-content-end {
		justify-content: center !important;
	}

	/* --- "המסלול להנהגת הבריאות" banner -------------------------------
	   cover-cropped landscape photo behind portrait copy; the 50% centre
	   slice hid the people on the left. Bias the crop left to reveal them. */
	section.program_section {
		background-position: 18% center !important;
	}

	/* --- "אורי ברשת" + social icons ----------------------------------
	   The bar is column-reverse but right-aligned; centre the heading and
	   the icon row. */
	section.instagram_section .title_bar {
		align-items: center !important;
	}

	section.instagram_section .title_bar h2,
	section.instagram_section .title_bar h2.bg-white {
		text-align: center !important;
	}

	section.instagram_section .title_bar .social_icons {
		justify-content: center !important;
	}

	/* --- "המהדורה השישית" book band: centre heading, copy and buttons --- */
	section.book_section .col-md-9,
	section.book_section .text-end {
		text-align: center !important;
	}

	section.book_section h2,
	section.book_section .lead,
	section.book_section p {
		text-align: center !important;
	}

	section.book_section .btn_gp {
		justify-content: center !important;
	}

	/* --- newsletter band: round the bottom-left corner too (was square) --- */
	section.newsletter_section {
		border-radius: 32px !important;
	}
}

/* Home (mobile): the .homeCon wrapper shipped asymmetric side padding
   (padding-left:15px, padding-right:0), which shoved the hero video and
   every section rightward — a left gap on the video and an uneven right
   edge. Zero it so the video is full-bleed and the sections (their own
   .container) centre symmetrically. */
@media only screen and (max-width: 767px) {
	.homeCon {
		padding-left: 0 !important;
		padding-right: 0 !important;
	}
}

/* ============================================================
   Home page: cream everywhere (was white behind several sections),
   readable tab text, and no white plates behind headings.
   ============================================================ */
body.page-template-page-homeNew {
	background: var(--c-cream) !important;
}

/* the "אורי עד הבית" tab content shipped at 10px — unreadable */
section.home_tab .tab-content,
section.home_tab .tab-pane {
	font-size: 15px;
	line-height: 1.6;
}

/* Instagram title bar: the heading + social row carry a white knockout
   plate (bg-white) meant to sit over a rule — on the cream page it reads as
   a white box behind the heading. Match the page. */
section.instagram_section h2.bg-white,
section.instagram_section .social_icons.bg-white {
	background: var(--c-cream) !important;
}

/* Home page loads Bootstrap, whose `a{text-decoration:underline}` put a line
   under every top-nav item — the other pages (no Bootstrap) don't. Match them. */
body.page-template-page-homeNew header#masthead .menu a,
body.page-template-page-homeNew nav.site-navigation a {
	text-decoration: none !important;
}

/* Testimonials slider: each arrow button shows a big SVG chevron AND a small
   Swiper ::after glyph ("next"/"prev") on top of it — a double arrow. Hide the
   ::after and keep the big chevron. */
section.testimonials_section .swiper-button-next::after,
section.testimonials_section .swiper-button-prev::after {
	display: none !important;
}

/* Home hero buttons (mobile): the 3 pills spanned edge-to-edge, so the first
   one ("מתכונים") sat flush against the screen edge — uneven. Center the group
   (and each wrapped row) at natural width with equal gaps. */
@media only screen and (max-width: 767px) {
	.hero_banner .btn-group {
		display: flex !important;
		flex-wrap: wrap !important;
		justify-content: center !important;
		gap: 10px !important;
		padding-inline: 12px !important;
		box-sizing: border-box;
		width: 100% !important;
	}
	.hero_banner .btn-group a.btn {
		flex: 0 0 auto !important;
		margin: 0 !important;
		width: auto !important;
	}
}