/* ================================================
   RED POINT — FOOTER  (Figma 109:750 / 109:763)
   ================================================
   section    padding 32/60 · gap 40 · bg #0C0C0C
   links row  1320x224 (109:764) · four blocks · space-between
   column     heading Futurism 24 accent red · links Google Sans 16/24 white · 16px apart
   logo       237px block · 71x100 mark · "רד"/"פוינט" Futurism 64 · tagline Futurism 24
   copyright  14/20 muted, LEFT (109:792 sits at x=0)
   ================================================ */

.rp-footer {
	width: 100%;
	background-color: #0C0C0C;
	padding: 32px 0;
	box-sizing: border-box;
}

.rp-footer__inner {
	display: flex;
	flex-direction: column;
	/* 50px, not 40. The links row (109:764) is 224 tall and the copyright container
	   (109:792) starts at y=274 — so the gap between them is 50. */
	gap: 50px;
	max-width: 1440px;
	margin: 0 auto;
	padding: 0 60px;
	box-sizing: border-box;
}

/* ------------------------------------------------
   COLUMNS  (109:764)
   ------------------------------------------------
   No direction override, and that is deliberate — unlike the header's icon row.

   The design's blocks read logo (x=0) → links → links → links left-to-right on Figma's LTR
   canvas, so its RIGHTMOST block is the LAST one on the canvas. Under RTL the FIRST DOM
   child paints rightmost. Declaring them right-to-left in the markup (col 1, col 2, col 3,
   then the logo) therefore lands them exactly where the design has them, with the logo
   leftmost.

   Check the handedness of every row — the answer is not the same for every row, even
   within one section. (In the header the links needed no flip and the icons did.) */
.rp-footer__cols {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 40px;
	width: 100%;
}

.rp-footer__col {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 16px;
	text-align: right;
}

.rp-footer__heading {
	margin: 0;
	font-family: 'Futurism', sans-serif;
	font-size: 24px;
	line-height: 1;
	color: #FF3B3B;
}

.rp-footer__list {
	display: flex;
	flex-direction: column;
	gap: 16px;
	width: 100%;
	margin: 0;
	padding: 0;
	list-style: none;
}

.rp-footer__link {
	font-family: 'Google Sans', sans-serif;
	font-size: 16px;
	line-height: 24px;
	color: #FFFFFF;
	text-decoration: none;
	transition: color 0.15s ease;
}

.rp-footer__link:hover {
	color: #FF3B3B;
}

/* ------------------------------------------------
   BRAND BLOCK  (109:765) — 237px, leftmost
   ------------------------------------------------ */
.rp-footer__brand {
	display: flex;
	flex-direction: column;
	gap: 24px;
	width: 237px;
}

/* The mark comes first in the DOM so RTL paints it to the RIGHT of the words — same as the
   header. */
.rp-footer__logo {
	display: flex;
	align-items: center;
	justify-content: flex-start;
	gap: 8px;
	height: 100px;
}

.rp-footer__logo .rp-footer__logo-mark {
	width: 71px;
	height: 100px;
	flex-shrink: 0;
	object-fit: contain;
}

.rp-footer__logo-text {
	display: flex;
	flex-direction: column;
	font-family: 'Futurism', sans-serif;
	/* 64px — the footer wordmark is BIGGER than the header's 42px (109:766 is a 100px block
	   against the header's 60px). */
	font-size: 64px;
	/* 0.72, not the Figma's 0.56 — the client rejected the density the file specifies. Same
	   deviation as the header; see the note in class-header-widget.php. */
	line-height: 0.72;
	text-align: right;
}

.rp-footer__logo-line--1 {
	/* #D8103A — the wordmark's own red, deeper than the site accent #FF3B3B. */
	color: #D8103A;
}

.rp-footer__logo-line--2 {
	color: #FFFFFF;
}

.rp-footer__tagline {
	margin: 0;
	font-family: 'Futurism', sans-serif;
	font-size: 24px;
	line-height: 1.3;
	color: #FFFFFF;
	text-align: right;
}

/* ------------------------------------------------
   COPYRIGHT  (109:792)
   ------------------------------------------------
   LEFT-aligned, not right. The container sits at x=0 on the design's LTR canvas, which is
   the left edge — so on an RTL page it is the "wrong" side by instinct and the right side
   by the file. text-align:left is literal and survives the RTL context. */
.rp-footer__copyright {
	margin: 0;
	width: 100%;
	font-family: 'Google Sans', sans-serif;
	font-size: 14px;
	line-height: 20px;
	color: #e8e1e1;
	text-align: left;
}

/* ------------------------------------------------
   RESPONSIVE
   ------------------------------------------------
   The Figma has no mobile frames, so this is a sensible fallback, not a specified layout. */
@media (max-width: 1024px) {
	.rp-footer__inner {
		padding: 0 24px;
	}
	.rp-footer__cols {
		gap: 32px;
	}
	.rp-footer__brand {
		width: 100%;
	}
}

/* ------------------------------------------------
   PHONE
   ------------------------------------------------
   The four blocks are a flex row that wraps, which at phone width gave a ragged arrangement —
   two columns, then one alone, then the brand, all at whatever widths their content happened
   to want. A two-column GRID makes the link columns line up, and the brand spans both so the
   wordmark is not squeezed into half the screen.

   The logo is also sized for the desktop footer: a 100px mark and 64px type is most of a phone
   screen on its own, so it comes down to roughly two thirds. */
@media (max-width: 767px) {

	.rp-footer {
		padding: 28px 0;
	}

	.rp-footer__inner {
		padding: 0 16px;
		gap: 32px;
	}

	.rp-footer__cols {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		gap: 28px 16px;
	}

	/* Full width, on its own row, whatever the link columns do above it.
	   Centred on phones: the brand spans the whole screen here rather than sitting as the
	   leftmost of four blocks, and a full-width block aligned to one edge reads as misaligned
	   against the two columns of links above it. */
	.rp-footer__brand {
		grid-column: 1 / -1;
		width: 100%;
		gap: 16px;
		align-items: center;
	}

	.rp-footer__logo {
		justify-content: center;
	}

	.rp-footer__logo-text,
	.rp-footer__tagline {
		text-align: center;
	}

	/* The design left-aligns this (109:792 sits at x=0), but that is a four-block row 1320px
	   wide. On a phone it put the line hard against the screen edge and clipped it. */
	.rp-footer__copyright {
		text-align: center;
	}

	.rp-footer__logo {
		height: 64px;
	}

	.rp-footer .rp-footer__logo-mark {
		width: 45px;
		height: 64px;
	}

	.rp-footer__logo-text {
		font-size: 40px;
	}

	.rp-footer__tagline {
		font-size: 18px;
	}


	/* The link columns centre too, so the two of them read as a pair rather than as two blocks
	   each hugging a different edge of the screen. The base rule aligns them to the start and
	   right-aligns the text, which is correct in the desktop four-block row and reads as
	   lopsided once they are half-width columns. */
	.rp-footer__col {
		align-items: center;
		text-align: center;
	}

	.rp-footer__heading {
		font-size: 20px;
		text-align: center;
	}

	.rp-footer__list {
		gap: 12px;
		align-items: center;
		text-align: center;
	}

	.rp-footer__link {
		font-size: 15px;
		line-height: 22px;
	}
}


/* ------------------------------------------------
   LAYOUT AFTER THE CATEGORY LIST GREW (client, Oct 2026)
   ------------------------------------------------
   The categories column went from 4 links to 11, so the row was rebalanced: the contact
   column moves under the Red Point column, and the category list runs in two columns.
   Columns by position: 1 = Red Point, 2 = categories, 3 = contact (see render()). */
.rp-footer__cols > .rp-footer__col:nth-child(2) .rp-footer__list {
	display: block;
	columns: 2;
	column-gap: 64px;
}
.rp-footer__cols > .rp-footer__col:nth-child(2) .rp-footer__list li {
	margin-bottom: 16px;
	break-inside: avoid;
}

@media (min-width: 1025px) {
	.rp-footer__cols {
		display: grid;
		grid-template-columns: auto auto 1fr;
		column-gap: 80px;
		row-gap: 40px;
		align-items: start;
	}
	.rp-footer__cols > .rp-footer__col:nth-child(1) { grid-column: 1; grid-row: 1; }
	.rp-footer__cols > .rp-footer__col:nth-child(2) { grid-column: 2; grid-row: 1 / span 2; }
	.rp-footer__cols > .rp-footer__col:nth-child(3) { grid-column: 1; grid-row: 2; }
	.rp-footer__brand { grid-column: 3; grid-row: 1 / span 2; justify-self: end; }
	/* Four columns of categories on desktop, where the row has the width for them. */
	.rp-footer__cols > .rp-footer__col:nth-child(2) .rp-footer__list { columns: 4; column-gap: 48px; }
}

@media (max-width: 767px) {
	/* Red Point and contact side by side, the two-column category list across the full width
	   under them, then the brand. */
	.rp-footer__cols > .rp-footer__col:nth-child(1) { grid-column: 1; grid-row: 1; }
	.rp-footer__cols > .rp-footer__col:nth-child(3) { grid-column: 2; grid-row: 1; }
	.rp-footer__cols > .rp-footer__col:nth-child(2) { grid-column: 1 / -1; grid-row: 2; }
	.rp-footer__brand { grid-row: 3; }
	.rp-footer__cols > .rp-footer__col:nth-child(2) .rp-footer__list {
		column-gap: 16px;
	}
	.rp-footer__cols > .rp-footer__col:nth-child(2) .rp-footer__list li {
		margin-bottom: 12px;
	}
}

/* Links 19 and on are desktop only: the four-column list there holds 32, the two columns below hold 18 (client, Oct 2026).
   Tablet and phone keep the 18 that fit their two columns. */
@media (max-width: 1024px) {
	.rp-footer__cols > .rp-footer__col:nth-child(2) .rp-footer__list li:nth-child(n+19) {
		display: none;
	}
}

/* Narrow desktops (1025-1365px) have no room for four columns: long labels such as
   "ויברטורים לנקודת G" broke onto two lines. Three columns of 8 there, so links 25+ wait for
   the wide layout. Labels never wrap on desktop. */
@media (min-width: 1025px) {
	.rp-footer__cols > .rp-footer__col:nth-child(2) .rp-footer__list li { white-space: nowrap; }
}
@media (min-width: 1025px) and (max-width: 1365px) {
	.rp-footer__cols { column-gap: 56px; }
	.rp-footer__cols > .rp-footer__col:nth-child(2) .rp-footer__list { columns: 3; column-gap: 40px; }
	.rp-footer__cols > .rp-footer__col:nth-child(2) .rp-footer__list li:nth-child(n+25) { display: none; }
}

/* ------------------------------------------------
   BOTTOM ROW: legal links (RTL start, right) + copyright (left)
   ------------------------------------------------ */
.rp-footer__bottom {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 12px 24px;
}

.rp-footer__bottom .rp-footer__copyright {
	width: auto;
}

.rp-footer__legal {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 24px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.rp-footer .rp-footer__legal-link {
	font-family: 'Google Sans', sans-serif;
	font-size: 14px;
	line-height: 20px;
	color: #e8e1e1;
	text-decoration: none;
}

.rp-footer .rp-footer__legal-link:hover,
.rp-footer .rp-footer__legal-link:focus-visible {
	color: #FFFFFF;
	text-decoration: underline;
}

@media (max-width: 767px) {
	.rp-footer__bottom {
		flex-direction: column;
		justify-content: center;
	}
	.rp-footer__legal {
		justify-content: center;
	}
}


/* Elementor footer copyright text colour (overrides the per-element Elementor rule) */
.elementor .rp-footer__copyright { color: #e8e1e1 !important; }

/* M25 (10.11.2026): footer links as 40px rows instead of 20px lines 16px apart. */
@media (max-width: 767px) {
	.rp-footer__list {
		gap: 0;
	}
	.rp-footer__link,
	.rp-footer__legal a {
		display: inline-block;
		padding: 10px 0;
	}
}