/*
Theme Name: Lo-Sipur
Theme URI: https://lo-sipur.com
Template: twentytwentyfive
Author: Lo-Sipur
Description: Lightweight Hebrew RTL child theme for Lo-Sipur (motorcycle gear & buying guides), built on Twenty Twenty-Five. Native blocks only, no page builder.
Requires at least: 6.7
Requires PHP: 7.2
Version: 2.5.8
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: lo-sipur
*/

/* ==========================================================================
   Global — shared hover/transition language used across the site.
   Soft transitions (200-250ms) on transform, shadow, color, background.
   ========================================================================== */
a {
	transition: color 0.2s ease;
}

.wp-element-button,
.wp-block-button__link {
	transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
}

.lo-sipur-section-subhead {
	margin: 0;
	color: var(--wp--preset--color--muted-strong);
	font-size: 0.9375rem;
}

/* ==========================================================================
   HEADER — the one canonical LO-SIPUR site header. Self-contained: every
   rule below is scoped under .lo-sipur-site-header / its own namespaced
   classes so nothing from page/post/template CSS (.entry-content,
   .wp-site-blocks, parent-theme spacing, etc.) can reach in and alter its
   geometry, and nothing here reaches out either. This is the ONLY place
   header appearance is defined — never duplicate these rules per template.

   Desktop, RTL visual order: search (left) | nav (center) | brand (right).
   The inner container is forced to direction:ltr purely so those three
   grid columns place deterministically regardless of page direction; each
   slot's own content is set back to direction:rtl so Hebrew renders
   normally. Width is fixed explicitly (not via WordPress's alignwide/
   constrained-layout auto-behavior, which does not reliably apply inside a
   layout:"default" header block) so it can never silently drift.
   ========================================================================== */
.lo-sipur-site-header {
	position: sticky;
	top: 0;
	z-index: 100;
	background-color: var(--wp--preset--color--base);
	border-bottom: 1px solid var(--wp--preset--color--border);
	box-shadow: 0 1px 0 rgba(15, 23, 42, 0.02);
}

.lo-sipur-header-inner {
	box-sizing: border-box;
	max-width: 1200px;
	width: 100%;
	margin-inline: auto;
	padding-inline: 24px;
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
	direction: ltr;
	gap: var(--wp--preset--spacing--40);
	padding-top: 18px;
	padding-bottom: 18px;
}

.lo-sipur-header-slot {
	direction: rtl;
}

.lo-sipur-header-slot--search {
	justify-self: start;
}

.lo-sipur-header-slot--nav {
	justify-self: center;
}

.lo-sipur-header-slot--brand {
	justify-self: end;
}

/* Search moved out of the nav row entirely (2026-09) — it used to be a
   fixed 320px block sharing the grid with the nav, and because the two
   flanking "1fr" grid columns are forced to equal widths, that 320px search
   box was silently forcing the brand column just as wide, starving the
   centered nav column of room and wrapping it to a second line well before
   the nav's own content actually needed to wrap. A compact icon that opens
   a small dropdown panel takes only ~40px, so the nav gets its room back
   without shrinking its font. <details>/<summary> gives the open/close
   toggle natively, no JS. */
.lo-sipur-header-search-toggle {
	position: relative;
}

.lo-sipur-header-search-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: 999px;
	border: 1.5px solid var(--wp--preset--color--border);
	background-color: var(--wp--preset--color--base-2);
	color: var(--wp--preset--color--contrast);
	cursor: pointer;
	list-style: none;
	transition: border-color 0.2s ease, background-color 0.2s ease, color 0.2s ease;
}

.lo-sipur-header-search-icon::-webkit-details-marker {
	display: none;
}

.lo-sipur-header-search-icon svg {
	fill: currentColor;
	display: block;
}

.lo-sipur-header-search-icon:hover,
.lo-sipur-header-search-toggle[open] > .lo-sipur-header-search-icon {
	border-color: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--accent);
}

.lo-sipur-header-search-icon:focus-visible {
	outline: 2px solid var(--wp--preset--color--accent);
	outline-offset: 3px;
}

/* Hidden/shown explicitly rather than relying on the browser's native
   "details:not([open]) > *:not(summary){display:none}" UA-stylesheet rule —
   that rule wasn't reliably winning here once the panel also had its own
   position:absolute, leaving it rendered (and clickable/screen-reader-
   visible) even while the <details> was closed. */
.lo-sipur-header-search-panel {
	display: none;
}

.lo-sipur-header-search-toggle[open] .lo-sipur-header-search-panel {
	/* Physical "left", not inset-inline-start: this panel is anchored to the
	   icon's position at the visual left edge of the header regardless of
	   reading direction, but .lo-sipur-header-slot above sets direction:rtl
	   on everything inside it — which flips *logical* inset properties to
	   the opposite physical side, pushing the panel off-screen to the left.
	   The search input inside keeps its own correct RTL text direction; only
	   this panel's own positioning needs to stay physical. */
	display: block;
	position: absolute;
	top: calc(100% + 10px);
	left: 0;
	z-index: 100;
	background-color: var(--wp--preset--color--base);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 14px;
	box-shadow: 0 12px 32px rgba(15, 23, 42, 0.14);
	padding: 10px;
}

@media (max-width: 900px) {
	.lo-sipur-header-inner {
		display: flex;
		direction: ltr;
		align-items: center;
		gap: 10px;
		padding-top: 14px;
		padding-bottom: 14px;
	}

	/* Brand stays pinned to the far end; search icon sits with the hamburger
	   at the start instead of splitting into a third space-between group —
	   keeps the two "utility" controls together, logo alone on its own side. */
	.lo-sipur-header-slot--brand {
		margin-inline-start: auto;
	}

	.lo-sipur-header-search-toggle[open] .lo-sipur-header-search-panel {
		/* Physical left/right, not the inset-inline shorthand — same RTL-
		   inheritance issue as the desktop rule above: mixing a logical
		   shorthand with a physical longhand for the same edge resolves in a
		   cascade-order-dependent way, not a symmetric one, so this stays
		   physical throughout rather than partially logical. */
		position: fixed;
		top: 64px;
		left: 16px;
		right: 16px;
		max-width: none;
	}

	.lo-sipur-header-search-panel .lo-sipur-header-search {
		width: 100%;
	}
}

/* Brand mark: LO • SIPUR. Latin characters inside an RTL page — the SLOT
   stays on the right (grid column order, set above), but the mark's own
   internal text direction is pinned to ltr so bidi reordering can never
   flip "LO • SIPUR" or move it within its slot. */
.lo-sipur-brand {
	display: inline-flex;
	align-items: baseline;
	direction: ltr;
	unicode-bidi: isolate;
	text-decoration: none;
	font-weight: 800;
	font-size: 1.3rem;
	letter-spacing: 0.01em;
	color: var(--wp--preset--color--contrast);
	white-space: nowrap;
	transition: opacity 0.2s ease;
}

.lo-sipur-brand:hover {
	opacity: 0.75;
}

.lo-sipur-brand-dot {
	color: var(--wp--preset--color--accent);
	font-weight: 800;
	margin: 0 3px;
}

/* Header nav — one canonical design for NORMAL / HOVER / FOCUS only.
   Deliberately no persistent "current page" treatment: the menu must look
   identical before and after navigating, so there is nothing here keyed to
   .current-menu-item or any other active-page class WordPress might add.
   These rules re-declare the base list/flex reset rather than relying on
   WordPress core's wp-block-navigation stylesheet alone (that stylesheet is
   only pulled in on templates that happen to load another block depending
   on it, e.g. Posts via the "next/previous post" pattern — functions.php
   force-loads it everywhere for the mobile overlay-menu mechanics, but this
   design layer does not depend on it being present either way). */
.lo-sipur-main-nav.wp-block-navigation {
	gap: var(--wp--preset--spacing--40) !important;
}

.lo-sipur-main-nav ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.lo-sipur-main-nav .wp-block-navigation-item {
	display: flex;
	align-items: center;
}

/* NORMAL — identical on every URL, regardless of which page is current */
.lo-sipur-main-nav .wp-block-navigation-item__content {
	display: flex;
	align-items: center;
	padding: 8px 4px;
	font-size: 0.9375rem;
	font-weight: 600;
	line-height: 1.4;
	color: var(--wp--preset--color--contrast);
	text-decoration: none;
	position: relative;
	transition: color 0.2s ease;
}

.lo-sipur-main-nav .wp-block-navigation-item__content::after {
	content: "";
	position: absolute;
	inset-inline-start: 4px;
	inset-inline-end: 4px;
	bottom: 3px;
	height: 2px;
	background-color: var(--wp--preset--color--accent);
	transform: scaleX(0);
	transform-origin: center;
	transition: transform 0.2s ease;
}

/* HOVER — orange treatment only while the pointer is actually over the link */
.lo-sipur-main-nav .wp-block-navigation-item__content:hover {
	color: var(--wp--preset--color--accent);
}

.lo-sipur-main-nav .wp-block-navigation-item__content:hover::after {
	transform: scaleX(1);
}

/* FOCUS — accessible keyboard focus, same accent language as hover, clears
   the instant focus moves away (no persistence). */
.lo-sipur-main-nav .wp-block-navigation-item__content:focus-visible {
	color: var(--wp--preset--color--accent);
	outline: 2px solid var(--wp--preset--color--accent);
	outline-offset: 3px;
	border-radius: 4px;
}

.lo-sipur-main-nav .wp-block-navigation-item__content:focus-visible::after {
	transform: scaleX(1);
}

/* Dropdown submenu (e.g. "רישיון וביטוח") — its container carries
   overlayBackgroundColor:contrast-2 (dark navy), but the generic nav-item
   color rule above is written for the light header bar and was leaving
   submenu links dark-on-dark. Override to the light "base" text used
   elsewhere on dark surfaces (footer, rotator) inside the submenu only. */
.lo-sipur-main-nav .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	color: var(--wp--preset--color--base);
}

.lo-sipur-main-nav .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover,
.lo-sipur-main-nav .wp-block-navigation__submenu-container .wp-block-navigation-item__content:focus-visible {
	color: var(--wp--preset--color--accent);
}

/* Mobile overlay menu — same overlayBackgroundColor:contrast-2 dark navy as
   the dropdown above, but covering the WHOLE open overlay (not just a nested
   submenu), so every top-level item was also dark-on-dark once opened. */
.lo-sipur-main-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
	color: var(--wp--preset--color--base);
}

.lo-sipur-main-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content:hover,
.lo-sipur-main-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content:focus-visible {
	color: var(--wp--preset--color--accent);
}

/* "מבצעים חמים" — final nav item, orange by default instead of only on
   hover, so it reads as slightly more prominent without becoming a pill or
   button. Reuses the exact same .wp-block-navigation-item__content base
   rules above (padding/size/weight/height untouched) — only color changes. */
.lo-sipur-main-nav .lo-sipur-nav-deals .wp-block-navigation-item__content {
	color: var(--wp--preset--color--accent);
}

.lo-sipur-main-nav .lo-sipur-nav-deals .wp-block-navigation-item__content:hover,
.lo-sipur-main-nav .lo-sipur-nav-deals .wp-block-navigation-item__content:focus-visible {
	color: var(--wp--preset--color--accent-dark);
}

/* Same override inside the dark mobile overlay, where the generic
   is-menu-open rule further up would otherwise force this item back to the
   light "base" text color like every other item there. */
.lo-sipur-main-nav .wp-block-navigation__responsive-container.is-menu-open .lo-sipur-nav-deals .wp-block-navigation-item__content {
	color: var(--wp--preset--color--accent);
}

.lo-sipur-main-nav .wp-block-navigation__responsive-container.is-menu-open .lo-sipur-nav-deals .wp-block-navigation-item__content:hover,
.lo-sipur-main-nav .wp-block-navigation__responsive-container.is-menu-open .lo-sipur-nav-deals .wp-block-navigation-item__content:focus-visible {
	color: var(--wp--preset--color--accent-dark);
}

/* Header search — visually stronger, fixed size on every page */
.lo-sipur-header-search {
	width: 320px;
	max-width: 100%;
}

.lo-sipur-header-search .wp-block-search__inside-wrapper {
	border-radius: 999px;
	overflow: hidden;
	border: 1.5px solid var(--wp--preset--color--border);
	background-color: var(--wp--preset--color--base-2);
	transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.lo-sipur-header-search .wp-block-search__inside-wrapper:focus-within {
	border-color: var(--wp--preset--color--accent);
	box-shadow: 0 0 0 3px var(--wp--preset--color--accent-tint);
}

.lo-sipur-header-search .wp-block-search__input {
	border: none;
	background-color: transparent;
	color: var(--wp--preset--color--contrast);
	font-size: 0.9375rem;
	padding: 10px 16px;
	margin: 0;
}

.lo-sipur-header-search .wp-block-search__button {
	background-color: transparent;
	color: var(--wp--preset--color--accent);
	fill: var(--wp--preset--color--accent);
	border: none;
	padding: 0 16px;
}

/* ==========================================================================
   Hero — dark premium card, true 2-column split, bigger presence.
   ========================================================================== */
.lo-sipur-hero-section {
	background-color: var(--wp--preset--color--base-2);
}

.lo-sipur-hero {
	display: flex;
	flex-wrap: wrap;
	align-items: stretch;
	gap: var(--wp--preset--spacing--50);
	background-color: var(--wp--preset--color--contrast-2);
	background-image: radial-gradient(circle at 15% 110%, color-mix(in srgb, var(--wp--preset--color--accent) 18%, transparent) 0%, transparent 45%);
	border-radius: 20px;
	overflow: hidden;
	padding: var(--wp--preset--spacing--60);
	min-height: 520px;
}

.lo-sipur-hero-text {
	flex: 1 1 380px;
	max-width: 45%;
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.lo-sipur-hero .lo-sipur-tagline {
	color: var(--wp--preset--color--accent);
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	font-size: var(--wp--preset--font-size--small);
	margin: 0 0 8px;
}

.lo-sipur-hero-text h2 {
	color: var(--wp--preset--color--base);
	margin: 0 0 14px;
	font-size: clamp(1.875rem, 3.2vw, 3.0625rem);
	font-weight: 700;
	line-height: 1.1;
}

.lo-sipur-hero-accent {
	color: var(--wp--preset--color--accent);
}

.lo-sipur-hero .wp-block-buttons {
	margin-top: 8px;
}

/* WordPress core's generic .has-text-color utility class always resolves to
   the theme's root text color (var(--wp--preset--color--text), our near-black
   reading color) with !important — it wins over the more specific
   .has-base-color (also !important) by source order, silently turning any
   "textColor":"base" button on a dark background into near-black-on-dark.
   Every button below sits on a dark card, so color is pinned explicitly with
   matching !important + higher specificity so it can never lose that fight. */
.lo-sipur-hero .wp-block-button__link {
	font-weight: 600;
	font-size: 0.9375rem;
	padding: 15px 28px;
	border-radius: 10px;
	color: var(--wp--preset--color--base) !important;
}

.lo-sipur-hero .wp-block-button:not(.is-style-outline) .wp-block-button__link {
	box-shadow: 0 8px 20px color-mix(in srgb, var(--wp--preset--color--accent) 35%, transparent);
}

.lo-sipur-hero .wp-block-button:not(.is-style-outline) .wp-block-button__link:hover {
	background-color: var(--wp--preset--color--accent-dark) !important;
	transform: translateY(-1px);
}

.lo-sipur-hero .is-style-outline .wp-block-button__link {
	border: 1.5px solid color-mix(in srgb, var(--wp--preset--color--base) 35%, transparent);
}

.lo-sipur-hero .is-style-outline .wp-block-button__link:hover {
	border-color: var(--wp--preset--color--base);
	background-color: color-mix(in srgb, var(--wp--preset--color--base) 10%, transparent) !important;
}

/* Secondary "מבצעים" CTA: outline treatment like the other two, but in the
   accent color instead of base — noticeable without competing with the
   single solid-accent primary CTA ("ציוד ומיגון"). Needs one extra class
   in the selector chain to outrun the base-color !important rule above. */
.lo-sipur-hero .lo-sipur-hero-cta-deals .wp-block-button__link {
	color: var(--wp--preset--color--accent) !important;
	border-color: color-mix(in srgb, var(--wp--preset--color--accent) 55%, transparent);
	box-shadow: none;
}

.lo-sipur-hero .lo-sipur-hero-cta-deals .wp-block-button__link:hover {
	background-color: var(--wp--preset--color--accent) !important;
	color: var(--wp--preset--color--base) !important;
	border-color: var(--wp--preset--color--accent);
}

.lo-sipur-hero .wp-block-button__link:focus-visible {
	outline: 2px solid var(--wp--preset--color--accent);
	outline-offset: 2px;
}

.lo-sipur-hero-media {
	flex: 1 1 380px;
	max-width: 55%;
	min-height: 400px;
}

.lo-sipur-hero-media-placeholder {
	width: 100%;
	height: 100%;
	min-height: 400px;
	border-radius: 14px;
	background:
		radial-gradient(circle at 28% 25%, color-mix(in srgb, var(--wp--preset--color--accent) 30%, transparent) 0%, transparent 55%),
		var(--wp--preset--color--contrast);
}

.lo-sipur-hero-media-image {
	display: block;
	width: 100%;
	height: 100%;
	min-height: 400px;
	border-radius: 14px;
	object-fit: cover;
	/* Keeps both riders in frame as the box's aspect ratio narrows between
	   desktop (~1.3:1) and the mobile breakpoint (~1.16:1) — plain center
	   (50%) crops into the left rider at the narrowest mobile widths. */
	object-position: 35% 50%;
}

@media (max-width: 900px) {
	.lo-sipur-hero {
		padding: var(--wp--preset--spacing--50);
		min-height: 0;
	}

	.lo-sipur-hero-text,
	.lo-sipur-hero-media {
		max-width: 100%;
		flex-basis: 100%;
	}

	.lo-sipur-hero-media {
		min-height: 220px;
	}

	.lo-sipur-hero-media-placeholder,
	.lo-sipur-hero-media-image {
		min-height: 220px;
	}
}

@media (max-width: 680px) {
	.lo-sipur-hero .wp-block-buttons {
		flex-direction: column;
		align-items: stretch;
	}

	.lo-sipur-hero .wp-block-buttons .wp-block-button {
		width: 100%;
	}

	.lo-sipur-hero .wp-block-buttons .wp-block-button__link {
		width: 100%;
		box-sizing: border-box;
	}
}

/* ==========================================================================
   מתחילים כאן — full-card links, image on top, lift + shadow + zoom on hover
   ========================================================================== */
.lo-sipur-start-here {
	background-color: var(--wp--preset--color--base);
}

.lo-sipur-start-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--wp--preset--spacing--30);
	width: 100%;
	max-width: 100%;
}

.lo-sipur-start-card {
	display: flex;
	flex-direction: column;
	background-color: var(--wp--preset--color--base);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 14px;
	overflow: hidden;
	text-decoration: none;
	color: var(--wp--preset--color--contrast);
	box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04);
	transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease;
}

.lo-sipur-start-card:hover,
.lo-sipur-start-card:focus {
	transform: translateY(-5px);
	box-shadow: 0 18px 34px rgba(15, 23, 42, 0.12);
	border-color: var(--wp--preset--color--border-strong);
}

.lo-sipur-start-card-media {
	position: relative;
	display: block;
	width: 100%;
	height: 190px;
	overflow: hidden;
	/* White, not the page's gray surface: product photos already sit on a
	   white background, so a gray media area shows as a visible "white
	   square floating in a gray box" around every product shot. */
	background-color: var(--wp--preset--color--base);
}

.lo-sipur-start-card-media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.25s ease;
}

/* Product photography (vs. the editorial cover-crop above): show the whole
   item, centered, with breathing room, never accidentally cropped. */
.lo-sipur-start-card-media img.lo-sipur-product-photo {
	box-sizing: border-box;
	padding: 10%;
	object-fit: contain;
}

.lo-sipur-start-card:hover .lo-sipur-start-card-media img {
	transform: scale(1.04);
}

.lo-sipur-start-card-media--placeholder {
	display: flex;
	align-items: center;
	justify-content: center;
	background:
		radial-gradient(circle at 30% 30%, var(--wp--preset--color--accent-tint) 0%, transparent 60%),
		var(--wp--preset--color--base-3);
	transition: background-color 0.25s ease;
}

.lo-sipur-start-card-media--placeholder svg {
	width: 44px;
	height: 44px;
	color: var(--wp--preset--color--accent-dark);
	transition: transform 0.25s ease;
}

.lo-sipur-start-card:hover .lo-sipur-start-card-media--placeholder svg {
	transform: scale(1.08);
}

.lo-sipur-start-card-step {
	position: absolute;
	top: 12px;
	inset-inline-start: 12px;
	background-color: rgba(15, 23, 42, 0.72);
	color: var(--wp--preset--color--base);
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	padding: 4px 10px;
	border-radius: 999px;
}

.lo-sipur-start-card-media--placeholder .lo-sipur-start-card-step {
	background-color: color-mix(in srgb, var(--wp--preset--color--contrast) 78%, transparent);
}

.lo-sipur-start-card-body {
	display: flex;
	flex-direction: column;
	padding: var(--wp--preset--spacing--30);
	flex: 1;
}

.lo-sipur-start-card-title {
	display: block;
	margin: 0 0 8px;
	font-size: var(--wp--preset--font-size--x-large);
	font-weight: 650;
	line-height: 1.3;
	color: var(--wp--preset--color--contrast);
}

.lo-sipur-start-card-desc {
	display: block;
	margin: 0 0 14px;
	font-size: 1rem;
	line-height: 1.55;
	color: var(--wp--preset--color--muted-strong);
	flex: 1;
}

.lo-sipur-start-card-link {
	display: block;
	font-size: var(--wp--preset--font-size--small);
	font-weight: 700;
	color: var(--wp--preset--color--accent);
}

/* A 7th card is an intentional extra category, not a multiple of the
   3-column grid — center it under the two full rows instead of leaving it
   flush to one side with two empty cells beside it. */
.lo-sipur-start-grid > .lo-sipur-start-card:nth-child(7):last-child {
	grid-column: 2 / 3;
}

@media (max-width: 780px) {
	.lo-sipur-start-grid {
		grid-template-columns: 1fr;
	}

	.lo-sipur-start-grid > .lo-sipur-start-card:nth-child(7):last-child {
		grid-column: auto;
	}
}

/* ==========================================================================
   קטגוריות עיקריות — modern icon-cards, not circles
   ========================================================================== */
.lo-sipur-category-strip {
	background-color: var(--wp--preset--color--base-2);
}

.lo-sipur-category-strip-row {
	display: grid;
	/* 8 tracks so each of the 7 cards can span 2 (= 4 per row), which
	   leaves enough resolution to center the trailing 3-card row below. */
	grid-template-columns: repeat(8, 1fr);
	gap: 16px;
	width: 100%;
	max-width: 100%;
}

.lo-sipur-category-item {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 14px;
	text-decoration: none;
	color: var(--wp--preset--color--contrast);
	background-color: var(--wp--preset--color--base);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 14px;
	padding: 26px 12px 20px;
	text-align: center;
	transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease;
	grid-column: span 2;
}

/* 7 categories on a 4-per-row grid leave a trailing row of 3 — center that
   row instead of leaving it flush to one side of an otherwise-empty row.
   Guarded to the desktop 4-per-row breakpoint only (see max-width overrides
   below), since the span/nth-child math here assumes 8 explicit tracks. */
@media (min-width: 901px) {
	.lo-sipur-category-strip-row > .lo-sipur-category-item:nth-child(5):nth-last-child(3) {
		grid-column: 2 / 4;
	}

	.lo-sipur-category-strip-row > .lo-sipur-category-item:nth-child(6):nth-last-child(2) {
		grid-column: 4 / 6;
	}

	.lo-sipur-category-strip-row > .lo-sipur-category-item:nth-child(7):nth-last-child(1) {
		grid-column: 6 / 8;
	}
}

.lo-sipur-category-item:hover,
.lo-sipur-category-item:focus {
	transform: translateY(-4px);
	box-shadow: 0 14px 28px rgba(15, 23, 42, 0.1);
	border-color: var(--wp--preset--color--accent);
}

.lo-sipur-category-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 56px;
	height: 56px;
	border-radius: 50%;
	background-color: var(--wp--preset--color--accent-tint);
	transition: background-color 0.22s ease;
}

.lo-sipur-category-icon svg {
	width: 26px;
	height: 26px;
	color: var(--wp--preset--color--accent-dark);
	transition: color 0.22s ease;
}

.lo-sipur-category-item:hover .lo-sipur-category-icon,
.lo-sipur-category-item:focus .lo-sipur-category-icon {
	background-color: var(--wp--preset--color--accent);
}

.lo-sipur-category-item:hover .lo-sipur-category-icon svg,
.lo-sipur-category-item:focus .lo-sipur-category-icon svg {
	color: var(--wp--preset--color--base);
}

/* Real product cutouts for categories with local photography (helmet, jacket,
   boots, back protector). Bigger, more graphic than the old thin line icons,
   consistent circular canvas across all five category items. */
.lo-sipur-category-photo {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 84px;
	height: 84px;
	border-radius: 50%;
	overflow: hidden;
	/* White, matching the product photos' own white background — an
	   orange-tinted circle behind a white product shot showed the same
	   "white square floating in a tinted box" problem as the gray cards. */
	background-color: var(--wp--preset--color--base);
	box-sizing: border-box;
	padding: 12px;
	transition: transform 0.22s ease;
}

.lo-sipur-category-photo img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.lo-sipur-category-item:hover .lo-sipur-category-photo,
.lo-sipur-category-item:focus .lo-sipur-category-photo {
	transform: scale(1.05);
}

/* Gloves has no local product photo. Rather than mix a thin line-icon in
   among real product photos (which reads as "weak"/inconsistent), it gets
   the same 84px circular canvas with a clean neutral tint fill and no
   icon/graphic at all — an intentional placeholder, not a broken one. */
.lo-sipur-category-neutral {
	display: block;
	width: 84px;
	height: 84px;
	border-radius: 50%;
	background:
		radial-gradient(circle at 32% 30%, var(--wp--preset--color--accent-tint) 0%, transparent 65%),
		var(--wp--preset--color--base-3);
	transition: transform 0.22s ease;
}

.lo-sipur-category-item:hover .lo-sipur-category-neutral,
.lo-sipur-category-item:focus .lo-sipur-category-neutral {
	transform: scale(1.05);
}

.lo-sipur-category-label {
	font-weight: 700;
	font-size: var(--wp--preset--font-size--small);
	text-align: center;
}

@media (max-width: 900px) {
	.lo-sipur-category-strip-row {
		grid-template-columns: repeat(3, 1fr);
	}

	.lo-sipur-category-item {
		grid-column: auto;
	}
}

@media (max-width: 560px) {
	.lo-sipur-category-strip-row {
		grid-template-columns: repeat(2, 1fr);
	}
}

/* ==========================================================================
   FC-Moto — contained promo card, premium compact layout
   ========================================================================== */
.lo-sipur-fcmoto-section {
	background-color: var(--wp--preset--color--base);
}

.lo-sipur-fcmoto-card {
	display: flex;
	flex-wrap: wrap;
	background-color: var(--wp--preset--color--contrast-3);
	border-radius: 18px;
	overflow: hidden;
	height: 280px;
	width: 100%;
	max-width: 100%;
}

.lo-sipur-fcmoto-image {
	flex: 1 1 320px;
	max-width: 38%;
	height: 280px;
	overflow: hidden;
	background-color: var(--wp--preset--color--base-2);
}

.lo-sipur-fcmoto-image img {
	display: block;
	width: 100%;
	height: 100%;
	box-sizing: border-box;
	padding: 10%;
	object-fit: contain;
	transition: transform 0.25s ease;
}

.lo-sipur-fcmoto-card:hover .lo-sipur-fcmoto-image img {
	transform: scale(1.04);
}

.lo-sipur-fcmoto-body {
	flex: 1 1 340px;
	max-width: 62%;
	height: 280px;
	padding: 28px 32px;
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	justify-content: center;
	color: var(--wp--preset--color--base);
}

.lo-sipur-fcmoto-brand {
	margin: 0 0 8px;
	font-weight: 800;
	letter-spacing: 0.1em;
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--accent);
}

.lo-sipur-fcmoto-body h2 {
	margin: 0 0 10px;
	color: var(--wp--preset--color--base);
	font-size: var(--wp--preset--font-size--x-large);
	font-weight: 650;
	line-height: 1.2;
}

.lo-sipur-fcmoto-desc {
	margin: 0 0 14px;
	color: var(--wp--preset--color--accent-2);
}

.lo-sipur-fcmoto-benefits {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 18px;
	margin: 0 0 18px;
	padding: 0;
	list-style: none;
}

.lo-sipur-fcmoto-benefits li {
	position: relative;
	padding-inline-start: 16px;
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--base);
	font-weight: 600;
}

.lo-sipur-fcmoto-benefits li::before {
	content: "";
	position: absolute;
	inset-inline-start: 0;
	top: 0.45em;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background-color: var(--wp--preset--color--accent);
}

.lo-sipur-fcmoto-cta {
	margin: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
}

.lo-sipur-fcmoto-cta a {
	display: inline-block;
	background-color: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--base);
	border-radius: 9px;
	padding: 12px 24px;
	font-size: 0.9375rem;
	font-weight: 600;
	text-decoration: none;
	transition: background-color 0.2s ease, transform 0.2s ease;
}

.lo-sipur-fcmoto-cta a:hover {
	background-color: var(--wp--preset--color--accent-dark);
	transform: translateY(-1px);
}

/* Deals CTA here matches the hero's secondary "מבצעים" button exactly:
   transparent/outline instead of the guide button's solid-accent fill,
   needs the extra tag+class in the chain to outrank the shared rule above. */
.lo-sipur-fcmoto-cta a.lo-sipur-fcmoto-cta-deals {
	background-color: transparent;
	color: var(--wp--preset--color--accent);
	border: 1.5px solid color-mix(in srgb, var(--wp--preset--color--accent) 55%, transparent);
}

.lo-sipur-fcmoto-cta a.lo-sipur-fcmoto-cta-deals:hover {
	background-color: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--base);
	border-color: var(--wp--preset--color--accent);
}

@media (max-width: 780px) {
	.lo-sipur-fcmoto-card {
		height: auto;
	}

	.lo-sipur-fcmoto-image,
	.lo-sipur-fcmoto-body {
		max-width: 100%;
		height: auto;
	}

	.lo-sipur-fcmoto-image img {
		height: 220px;
	}
}

/* ==========================================================================
   מדריכים אחרונים / hub grids / מדריכים קשורים — one card component shared
   across three different containers (the ~1200px homepage/hub width and the
   ~780px article reading column). A single hardcoded repeat(4, 1fr) doesn't
   fit all three: at article width it squeezed cards to ~145px (titles
   wrapping word-by-word) and, with fewer than 4 items, left a hardcoded
   empty trailing column. auto-fit/minmax lets the column count follow the
   container instead, with a per-context minimum tuned to that container.
   ========================================================================== */
.lo-sipur-topics {
	background-color: var(--wp--preset--color--base-2);
}

.lo-sipur-guides-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	gap: var(--wp--preset--spacing--30);
	width: 100%;
	max-width: 100%;
}

/* Hub "מומלץ להתחיל כאן" / "כל המדריכים בנושא": the hub column is wider
   (1200px) than an article's own reading column, so cards can run a touch
   narrower — 220-300px, 3-4 per row — without feeling cramped. */
.lo-sipur-hub-content .lo-sipur-guides-grid {
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}

/* מדריכים קשורים: this section sits in a Gutenberg "wide" group whose own
   inner constrained layout otherwise centers it at the theme's generic
   640px contentSize — narrower than the 780px column the article text
   above it actually uses. Match that column exactly so 2 related cards
   render as two normal-width cards (auto-fit gives each the full width
   once there's no third item to share it with) and 3-4 cards get their
   own sensibly-sized columns instead of 4 forced-narrow ones. */
.lo-sipur-related-guides {
	max-width: 780px;
	margin-inline: auto;
}

.lo-sipur-related-guides .lo-sipur-guides-grid {
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

@media (max-width: 480px) {
	.lo-sipur-guides-grid {
		grid-template-columns: 1fr;
	}
}

.lo-sipur-guide-card {
	display: flex;
	flex-direction: column;
	background-color: var(--wp--preset--color--base);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 14px;
	overflow: hidden;
	text-decoration: none;
	color: var(--wp--preset--color--contrast);
	box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04);
	transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease;
}

.lo-sipur-guide-card:hover,
.lo-sipur-guide-card:focus {
	transform: translateY(-5px);
	box-shadow: 0 18px 34px rgba(15, 23, 42, 0.12);
	border-color: var(--wp--preset--color--border-strong);
}

/* Defensive: when a card grid renders through a template's Shortcode block
   rather than a page's own content, wpautop() can turn the dynamically
   generated HTML's raw newlines into literal <br> tags that land as stray
   direct children of the grid. The PHP output is whitespace-collapsed at
   the source (see lo_sipur_guide_card_html()) so this shouldn't fire, but
   it keeps the grid correct either way instead of showing a blank cell.  */
.lo-sipur-guides-grid > br {
	display: none;
}

.lo-sipur-guide-card-media {
	display: block;
	width: 100%;
	height: 260px;
	overflow: hidden;
	/* White, matching the product photos' own white background — see the
	   same note on .lo-sipur-start-card-media above. */
	background-color: var(--wp--preset--color--base);
}

/* Editorial/scene photography (the default): cropped to fill the frame so
   the image reads as the card's visual anchor, not a small inset. */
.lo-sipur-guide-card-media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.25s ease;
}

/* Product studio photography (flagged on the attachment — see
   lo_sipur_guide_card_html()): shown uncropped so a boot, jacket or helmet
   never loses its top/bottom to the frame. Tighter padding than before so
   the product still reads as dominant, not a small island of white. */
.lo-sipur-guide-card-media img.lo-sipur-product-photo {
	box-sizing: border-box;
	padding: 6%;
	object-fit: contain;
}

.lo-sipur-guide-card:hover .lo-sipur-guide-card-media img {
	transform: scale(1.04);
}

.lo-sipur-guide-card-body {
	display: flex;
	flex-direction: column;
	gap: 4px;
	padding: 18px 20px;
}

/* No featured image: lo_sipur_guide_card_html() omits the media block
   entirely rather than leaving an empty white box, so give the body a
   little extra breathing room to keep the card visually balanced. */
.lo-sipur-guide-card--no-media .lo-sipur-guide-card-body {
	padding-top: 22px;
	padding-bottom: 22px;
}

.lo-sipur-guide-card-eyebrow {
	font-size: var(--wp--preset--font-size--small);
	font-weight: 700;
	letter-spacing: 0.05em;
	color: var(--wp--preset--color--accent);
}

.lo-sipur-guide-card-label {
	font-weight: 650;
	font-size: var(--wp--preset--font-size--x-large);
	color: var(--wp--preset--color--contrast);
	line-height: 1.35;
}

/* ==========================================================================
   Previous / next post navigation (twentytwentyfive/post-navigation pattern)
   — inserted right after .lo-sipur-article-content. Left at its default
   1200px "wide" alignment it spans far past the article's own 780px reading
   column; match that column instead, and let the row wrap on narrow
   screens rather than forcing two long Hebrew titles onto one nowrap line.
   ========================================================================== */
.lo-sipur-article-content + .wp-block-group.alignwide,
.lo-sipur-article-content + .wp-block-group.alignwide .wp-block-group.alignwide {
	max-width: 780px;
	margin-inline: auto;
}

.lo-sipur-article-content + .wp-block-group.alignwide .wp-block-post-navigation-link a {
	overflow-wrap: break-word;
}

@media (max-width: 680px) {
	.lo-sipur-article-content + .wp-block-group.alignwide .wp-block-group.alignwide {
		flex-wrap: wrap;
		row-gap: var(--wp--preset--spacing--30);
	}

	.lo-sipur-article-content + .wp-block-group.alignwide .wp-block-post-navigation-link {
		flex-basis: 100%;
	}
}

/* ==========================================================================
   Shared / legacy components still used elsewhere (hub pages, article pages)
   ========================================================================== */

/* Topic cards — still used by page.html's "עוד מדריכים" section */
.lo-sipur-topic-card {
	margin: 0;
}

.lo-sipur-topic-card .wp-block-button__link {
	display: block;
	width: 100%;
	box-sizing: border-box;
	background-color: var(--wp--preset--color--base);
	color: var(--wp--preset--color--contrast);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 10px;
	padding: var(--wp--preset--spacing--40);
	text-align: center;
	text-decoration: none;
	font-weight: 600;
	font-size: 1rem;
	transition: border-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
}

.lo-sipur-topic-card .wp-block-button__link:hover,
.lo-sipur-topic-card .wp-block-button__link:focus {
	border-color: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--accent);
	transform: translateY(-2px);
}

/* Pillar cards — still used inside the ציוד ומיגון and לומדים לרכב hub pages' own content */
.lo-sipur-pillar-card {
	margin: 0;
}

.lo-sipur-pillar-card .wp-block-button__link,
.lo-sipur-pillar-card.lo-sipur-pillar-card--soon {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 6px;
	width: 100%;
	min-height: 88px;
	box-sizing: border-box;
	background-color: var(--wp--preset--color--base);
	color: var(--wp--preset--color--contrast);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 10px;
	padding: var(--wp--preset--spacing--40);
	text-align: center;
	text-decoration: none;
	font-weight: 600;
	font-size: 1rem;
	transition: border-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
}

.lo-sipur-pillar-card .wp-block-button__link:hover,
.lo-sipur-pillar-card .wp-block-button__link:focus {
	border-color: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--accent);
	transform: translateY(-2px);
}

.lo-sipur-pillar-card--soon {
	opacity: 0.7;
}

.lo-sipur-pillar-title {
	margin: 0;
	font-weight: 650;
	font-size: var(--wp--preset--font-size--x-large);
	color: var(--wp--preset--color--contrast);
}

.lo-sipur-pillar-badge {
	margin: 0;
	font-weight: 600;
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--accent);
}

/* Rotating message strip — one message visible at a time, pure CSS fade
   (no JS, no marquee/horizontal scroll, no bullet/dot before the text).
   Each span shares one keyframe but is staggered via animation-delay so
   exactly one is visible at any moment, looping every 22s (4 messages
   x 5.5s each). Sits directly under the hero, before "מתחילים כאן". */
.lo-sipur-rotator {
	background-color: var(--wp--preset--color--contrast);
	height: 56px;
	display: flex;
	align-items: center;
	overflow: hidden;
}

.lo-sipur-rotator-inner {
	position: relative;
	width: 100%;
	max-width: 1200px;
	height: 100%;
	margin-inline: auto;
	padding-inline: 24px;
	box-sizing: border-box;
}

.lo-sipur-rotator-msg {
	position: absolute;
	inset-inline: 24px;
	top: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	height: 100%;
	color: var(--wp--preset--color--base);
	font-weight: 600;
	font-size: 0.9375rem;
	text-align: center;
	opacity: 0;
	animation: lo-sipur-rotate-fade 22s ease-in-out infinite;
	animation-fill-mode: backwards;
}

.lo-sipur-rotator-msg:nth-child(1) { animation-delay: 0s; }
.lo-sipur-rotator-msg:nth-child(2) { animation-delay: 5.5s; }
.lo-sipur-rotator-msg:nth-child(3) { animation-delay: 11s; }
.lo-sipur-rotator-msg:nth-child(4) { animation-delay: 16.5s; }

@keyframes lo-sipur-rotate-fade {
	0% { opacity: 0; }
	1.5% { opacity: 1; }
	22% { opacity: 1; }
	25% { opacity: 0; }
	100% { opacity: 0; }
}

@media (max-width: 680px) {
	.lo-sipur-rotator {
		height: 48px;
	}

	.lo-sipur-rotator-msg {
		font-size: 0.8125rem;
		inset-inline: 16px;
		line-height: 1.3;
	}
}

@media (prefers-reduced-motion: reduce) {
	.lo-sipur-rotator-msg {
		animation: none;
		opacity: 0;
	}

	.lo-sipur-rotator-msg:first-child {
		position: static;
		opacity: 1;
	}
}

/* ==========================================================================
   Legacy article — demoted, clearly separated editorial section
   ========================================================================== */
.lo-sipur-legacy-section {
	background-color: var(--wp--preset--color--base-2);
	border-top: 1px solid var(--wp--preset--color--border);
}

/* Stale-date cleanup: these four November 2024 pages are the ones whose
   visible publish date reads as obviously outdated. Hidden per-page via
   WordPress's own page-id-N body class rather than removing wp:post-date
   from the shared page.html template, which every other Page also uses —
   newer pages keep their date. display:none drops the element's own
   margin-bottom too, so no gap is left behind. */
.page-id-133 .lo-sipur-article-meta,
.page-id-216 .lo-sipur-article-meta,
.page-id-209 .lo-sipur-article-meta,
.page-id-142 .lo-sipur-article-meta {
	display: none;
}

.lo-sipur-legacy-label {
	max-width: 780px;
	margin-inline-start: 0;
	margin-inline-end: auto;
	margin-bottom: var(--wp--preset--spacing--40);
	text-align: right;
	color: var(--wp--preset--color--muted-strong);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

/* Article body readability (shared by homepage legacy article + all Page/hub content).
   ~780px keeps Hebrew lines to a comfortable reading measure. WP's block
   "contentSize" layout attribute only constrains the post-content block's
   *children*, not the block itself — so the actual readable width has to
   be set directly here.

   CENTERED column, RTL text inside it: the column itself sits centered in
   the viewport with normal whitespace on both sides; direction:rtl and
   text-align:right (below, and on headings/paragraphs/lists) keep the
   Hebrew text right-aligned within that centered column. */
.lo-sipur-article-content {
	max-width: 780px;
	margin-inline: auto;
	direction: rtl;
	text-align: right;
	line-height: 1.65;
	font-size: 1.09375rem;
}

/* WordPress's own global styles center every direct child of an
   is-layout-constrained block (margin-inline:auto against its content-size),
   which silently wins over the right-anchoring above and re-centers each
   heading/paragraph/list individually — not just the column as a whole.
   Right-anchor every direct child explicitly. Wide children (the card
   grids) already fill 100% of the column, so this has no visible effect
   on them. Same fix for the hero title/date/eyebrow above hub pages, and
   for the "more guides" section heading shared by post/page/hub templates. */
.lo-sipur-article-content > *:not(.alignfull):not(.alignwide),
.lo-sipur-hub-hero > *:not(.alignfull):not(.alignwide) {
	margin-inline-start: 0 !important;
	margin-inline-end: auto !important;
}

.lo-sipur-topics h2 {
	margin-inline-start: 0 !important;
	margin-inline-end: auto !important;
}

.lo-sipur-article-content h1,
.lo-sipur-article-content h2,
.lo-sipur-article-content h3,
.lo-sipur-article-content p,
.lo-sipur-article-content ul,
.lo-sipur-article-content ol,
.lo-sipur-article-content li {
	text-align: right;
}

.lo-sipur-article-content h1 {
	font-size: var(--wp--preset--font-size--huge);
	font-weight: 700;
	line-height: 1.15;
}

.lo-sipur-article-content h2,
.lo-sipur-article-content h3 {
	line-height: 1.3;
	margin-top: 1.6em;
	color: var(--wp--preset--color--muted-strong);
}

.lo-sipur-article-content img {
	border-radius: 8px;
	height: auto;
	max-width: 100%;
}

/* Card thumbnails (start-cards, guide-cards) keep their fixed-height fit
   even when nested inside .lo-sipur-article-content (hub/page templates) —
   without this, the generic rule above wins on source order and stretches
   these images to their natural height, which then gets cropped by the
   card media box's overflow:hidden instead of staying fully contained. */
.lo-sipur-article-content .lo-sipur-start-card-media img,
.lo-sipur-article-content .lo-sipur-guide-card-media img {
	height: 100%;
}

.lo-sipur-article-meta {
	display: block;
	text-align: right;
	color: var(--wp--preset--color--accent-2);
	font-size: var(--wp--preset--font-size--small);
}

/* Contain body overflow (e.g. wide tables) on any template that renders raw
   entry-content without the .lo-sipur-article-content treatment (e.g. search
   results, archives) so it can't widen the whole page on mobile. */
.entry-content:not(.lo-sipur-article-content) {
	overflow-x: auto;
	max-width: 100%;
}

/* ==========================================================================
   Footer — multi-column, dark, accent-on-hover links
   ========================================================================== */
.lo-sipur-footer {
	background-color: var(--wp--preset--color--contrast-2);
	color: var(--wp--preset--color--base);
}

.lo-sipur-footer a {
	color: var(--wp--preset--color--base);
	text-decoration: none;
}

.lo-sipur-footer a:hover,
.lo-sipur-footer a:focus-visible {
	color: var(--wp--preset--color--accent);
}

.lo-sipur-footer-grid {
	display: grid;
	grid-template-columns: 1.4fr 1fr 1fr 1fr;
	gap: var(--wp--preset--spacing--40);
	align-items: start;
}

.lo-sipur-footer-brand {
	color: var(--wp--preset--color--base);
}

.lo-sipur-footer-descriptor {
	margin: 14px 0 0;
	color: #C7D2E8;
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.6;
	max-width: 34ch;
}

.lo-sipur-footer-descriptor a {
	color: #D6DFF2;
	font-weight: 600;
}

.lo-sipur-footer-descriptor a:hover,
.lo-sipur-footer-descriptor a:focus-visible {
	color: var(--wp--preset--color--accent);
}

.lo-sipur-footer-col-title {
	margin: 0 0 16px;
	font-size: var(--wp--preset--font-size--small);
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: #F5F7FF;
}

.lo-sipur-footer-list {
	margin: 0;
	padding: 0;
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: 11px;
}

.lo-sipur-footer-list a {
	font-size: var(--wp--preset--font-size--small);
	font-weight: 500;
}

@media (max-width: 900px) {
	.lo-sipur-footer-grid {
		grid-template-columns: 1fr 1fr;
	}

	.lo-sipur-footer-col--brand {
		grid-column: 1 / -1;
	}
}

@media (max-width: 560px) {
	.lo-sipur-footer-grid {
		grid-template-columns: 1fr;
	}
}

.lo-sipur-footer .lo-sipur-copyright {
	color: #C7D2E8;
	font-size: var(--wp--preset--font-size--small);
}

.lo-sipur-footer .lo-sipur-copyright a {
	color: #D6DFF2;
}

.lo-sipur-footer .lo-sipur-copyright a:hover,
.lo-sipur-footer .lo-sipur-copyright a:focus-visible {
	color: var(--wp--preset--color--accent);
}

/* ==========================================================================
   Hub editorial system — the LO-SIPUR hub visual language (started on
   לומדים לרכב, meant to extend to other hub pages later). An alternating
   text/image/infographic layout instead of a wall of cards, on a wider
   1200px editorial canvas (matching the homepage) rather than the narrow
   760px single-column article width used elsewhere. Applied via the
   .lo-sipur-hub-content modifier alongside the shared .lo-sipur-article-content
   class, so legacy articles and guide posts are completely unaffected.
   ========================================================================== */
.lo-sipur-hub-content {
	max-width: 1200px;
	margin-inline: auto;
}

.lo-sipur-hub-content > .lo-sipur-hub-intro,
.lo-sipur-hub-content > .lo-sipur-hub-plain-section,
.lo-sipur-hub-content > .lo-sipur-hub-related-links {
	max-width: 760px;
}

/* Hero eyebrow (template-level, sits above the post title) */
.lo-sipur-hub-eyebrow {
	display: block;
	text-align: right;
	margin: 0 0 8px;
	color: var(--wp--preset--color--accent);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

/* Hub pages only: title sits inside .lo-sipur-hub-hero, which is already
   its own centered 1200px box with inline padding — right-anchoring the
   title within that box keeps it flush against that padding, which is
   correct there and untouched by the fix below. */
.lo-sipur-hub-hero .wp-block-post-title {
	text-align: right;
	margin-inline-start: 0 !important;
	margin-inline-end: auto !important;
}

/* Single posts & default pages: title/date used to right-anchor to the
   edge of the full-width .alignfull wrapper (WordPress's default 640px
   content-size, right-anchored) while the article body below them is a
   separately-centered 780px column — title/date and body shared no common
   edge, so title sat right-anchored near the edge of the browser while
   the body sat centered, hundreds of pixels apart on wide screens. Give
   title/date the exact same box as the body (780px, centered) so all
   three form one aligned column; text-align:right keeps the title/date
   text itself right-aligned inside that centered box. */
.wp-block-group.alignfull > .wp-block-post-title,
.wp-block-group.alignfull > .wp-block-post-date {
	max-width: 780px !important;
	margin-inline: auto !important;
	text-align: right;
}

/* Intro / lede paragraph */
.lo-sipur-hub-intro {
	font-size: 1.125rem;
	line-height: 1.6;
	color: var(--wp--preset--color--text);
}

/* Beginner journey — compact pill row, scoped so the shared .lo-sipur-pillar-card
   base (still used as larger tiles elsewhere, e.g. ציוד ומיגון) is untouched. */
.lo-sipur-hub-journey {
	margin-top: 2em;
}

.lo-sipur-hub-journey-row {
	margin-top: 14px;
}

.lo-sipur-hub-journey-row .lo-sipur-pillar-card .wp-block-button__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: auto;
	width: auto;
	background-color: var(--wp--preset--color--base);
	color: var(--wp--preset--color--text);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 999px;
	padding: 10px 18px;
	font-size: 0.9375rem;
	font-weight: 600;
	transition: border-color 0.2s ease, color 0.2s ease, background-color 0.2s ease, transform 0.2s ease;
}

.lo-sipur-hub-journey-row .lo-sipur-pillar-card .wp-block-button__link:hover {
	border-color: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--accent);
	background-color: var(--wp--preset--color--accent-tint);
	transform: translateY(-1px);
}

.lo-sipur-hub-plain-section {
	margin-top: 2.4em;
}

/* Editorial row — text + image / infographic, alternating sides.
   Default (RTL): text column first (right), visual column second (left).
   .lo-sipur-editorial-row--reverse flips it for alternation rhythm. */
.lo-sipur-editorial-row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--wp--preset--spacing--50);
	margin-top: 2.6em;
}

.lo-sipur-editorial-row--reverse {
	flex-direction: row-reverse;
}

.lo-sipur-editorial-text {
	flex: 1 1 420px;
	min-width: 0;
}

.lo-sipur-editorial-text h2 {
	margin-top: 0;
}

.lo-sipur-editorial-visual {
	flex: 1 1 360px;
	min-width: 0;
}

img.lo-sipur-editorial-image {
	display: block;
	width: 100%;
	height: 300px;
	max-width: 100%;
	object-fit: cover;
	border-radius: 14px;
	transition: transform 0.25s ease;
}

.lo-sipur-editorial-visual {
	overflow: hidden;
	border-radius: 14px;
}

.lo-sipur-editorial-row:hover img.lo-sipur-editorial-image {
	transform: scale(1.035);
}

/* Real tables — every editorial/comparison table in article content (not
   just the A2/A1/A license table) gets this treatment: visible borders,
   a clear shaded header row, real cell padding, and horizontal scroll on
   narrow screens instead of squeezing or wrapping badly. Scoped under
   .lo-sipur-article-content so it applies site-wide wherever a real <table>
   appears in article/hub content, not just this one page. */
.lo-sipur-article-content table {
	display: block;
	overflow-x: auto;
	max-width: 100%;
	border-collapse: collapse;
	width: 100%;
	font-size: var(--wp--preset--font-size--small);
}

.lo-sipur-article-content table {
	direction: rtl;
}

.lo-sipur-article-content th,
.lo-sipur-article-content td {
	border: 1px solid var(--wp--preset--color--border);
	padding: 12px 16px;
	text-align: right;
	vertical-align: middle;
}

.lo-sipur-article-content thead th {
	background-color: var(--wp--preset--color--base-3);
	color: var(--wp--preset--color--text);
	font-weight: 650;
	text-align: center;
	white-space: nowrap;
}

.lo-sipur-article-content tbody th {
	background-color: var(--wp--preset--color--base-2);
	color: var(--wp--preset--color--text);
	font-weight: 600;
	text-align: right;
	white-space: nowrap;
}

.lo-sipur-article-content tbody td {
	color: var(--wp--preset--color--muted-strong);
}

/* Short single-value cells (age, license class, count) read cleaner
   centered than right-aligned — used only where cells hold a bare number
   or code, not a Hebrew phrase. */
.lo-sipur-license-table tbody td {
	text-align: center;
}

.lo-sipur-article-content tbody tr:hover td,
.lo-sipur-article-content tbody tr:hover th {
	background-color: var(--wp--preset--color--accent-tint);
}

.lo-sipur-license-table {
	border-radius: 10px;
	overflow: hidden;
}

/* Post featured image (guide/product posts) — same "show the whole item"
   product-photo treatment as the homepage cards. */
.lo-sipur-featured-photo {
	background-color: var(--wp--preset--color--base-2);
	border-radius: 10px;
	overflow: hidden;
}

.lo-sipur-featured-photo img {
	box-sizing: border-box;
	padding: 10%;
	object-fit: contain !important;
}

/* Theory-test facts module — compact stat tiles */
.lo-sipur-facts-module {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 10px;
}

.lo-sipur-fact-tile {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 4px;
	background-color: var(--wp--preset--color--contrast-2);
	border-radius: 12px;
	padding: 20px 8px;
	transition: transform 0.2s ease;
}

.lo-sipur-facts-module:hover .lo-sipur-fact-tile {
	transform: translateY(-2px);
}

.lo-sipur-fact-number {
	font-size: 1.75rem;
	font-weight: 700;
	color: var(--wp--preset--color--accent);
	line-height: 1;
}

.lo-sipur-fact-label {
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--base);
	opacity: 0.8;
}

/* Related links list at the end of "ציוד ראשון" */
.lo-sipur-hub-related-links {
	margin-top: 1.2em;
	padding-inline-start: 20px;
	line-height: 1.9;
	color: var(--wp--preset--color--muted-strong);
}

@media (max-width: 900px) {
	.lo-sipur-editorial-row,
	.lo-sipur-editorial-row--reverse {
		flex-direction: column;
	}

	.lo-sipur-editorial-text,
	.lo-sipur-editorial-visual {
		flex-basis: 100%;
		width: 100%;
	}

	img.lo-sipur-editorial-image {
		height: 240px;
	}
}

@media (max-width: 560px) {
	.lo-sipur-facts-module {
		grid-template-columns: 1fr;
	}
}