/* ==========================================================================
   Single post + category archive
   --------------------------------------------------------------------------
   The Elementor templates carry only structure (containers plus theme
   widgets); everything visual lives here, so the layout stays editable in
   Elementor without the design being scattered across widget panels.

   SCOPING NOTE
   Container-level rules are scoped to the template wrapper classes that
   Elementor prints on the front end:
       .elementor-4342  -> single post template ("חדשות")
       .elementor-8538  -> archive template ("Archive - קטגוריות")
   They are NOT scoped to CSS classes set on the containers in the template,
   because Elementor renumbered the containers when it normalised the document
   and those classes did not survive. Widget-level classes (.sapir-article__*,
   .sapir-archive__*) do survive and are used as-is.

   If either template is ever duplicated its ID changes and these wrapper
   selectors need updating - the widget-level classes would keep working.

   Type is the site's Heebo throughout; palette is the one already in use:
   navy #0A0E7A, teal #0494AC, orange #E36C40.
   ========================================================================== */

:root {
	--sa-art-navy: #0A0E7A;
	--sa-art-teal: #0494AC;
	--sa-art-accent: #E36C40;
	--sa-art-ink: #102A43;
	--sa-art-muted: #5B7B82;
	--sa-art-soft: #F0FAFC;
	--sa-art-line: #D5EAF0;
	--sa-art-font: Heebo, -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;
}

/* --------------------------------------------------------------------------
   1. SINGLE POST
   -------------------------------------------------------------------------- */

.elementor-4342 {
	font-family: var(--sa-art-font);
	color: var(--sa-art-ink);
}

/* A measure, not a full-width sprawl. The old template put the body in a 50%
   column beside the image, which is why the text ended up stranded at one
   edge of the screen. */
.elementor-4342 .e-con-inner {
	margin-inline: auto;
}

.elementor-4342 .elementor-widget {
	width: 100%;
}

/* Title. The widget also carries Elementor's own "entry-title" class, which
   the parent theme styles in its own colour - hence the extra specificity. */
body .elementor-4342 .sapir-article__title .elementor-heading-title {
	font-family: var(--sa-art-font);
	font-weight: 900;
	font-size: clamp(28px, 3.4vw, 44px);
	line-height: 1.2;
	color: var(--sa-art-navy);
	margin: 0;
}

/* meta row */
.sapir-meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px 14px;
	margin: 0;
	font-family: var(--sa-art-font);
}

.sapir-meta__date {
	font-size: 15px;
	font-weight: 600;
	color: var(--sa-art-muted);
}

.sapir-meta__terms {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.sapir-meta__chip {
	display: inline-flex;
	align-items: center;
	padding: 5px 14px;
	border-radius: 999px;
	background: var(--sa-art-soft);
	border: 1.5px solid var(--sa-art-line);
	color: var(--sa-art-teal) !important;
	font-size: 13px;
	font-weight: 700;
	text-decoration: none !important;
	transition: background-color .2s ease, border-color .2s ease, color .2s ease;
}

.sapir-meta__chip:hover {
	background: var(--sa-art-teal);
	border-color: var(--sa-art-teal);
	color: #fff !important;
}

/* featured image */
.sapir-article__media img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 18px;
	box-shadow: 0 14px 40px rgba(10, 14, 122, .14);
}

/* body copy */
.sapir-article__content {
	font-size: 18px;
	line-height: 1.9;
	color: var(--sa-art-ink);
}

.sapir-article__content p {
	margin: 0 0 1.15em;
}

.sapir-article__content h2,
.sapir-article__content h3 {
	font-family: var(--sa-art-font);
	font-weight: 800;
	color: var(--sa-art-navy);
	line-height: 1.3;
	margin: 1.8em 0 .6em;
}

.sapir-article__content h2 {
	font-size: 26px;
}

.sapir-article__content h3 {
	font-size: 21px;
}

.sapir-article__content a {
	color: var(--sa-art-teal);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.sapir-article__content a:hover {
	color: var(--sa-art-accent);
}

.sapir-article__content img {
	max-width: 100%;
	height: auto;
	border-radius: 14px;
}

.sapir-article__content ul,
.sapir-article__content ol {
	margin: 0 0 1.15em;
	padding-inline-start: 1.4em;
}

.sapir-article__content li {
	margin-bottom: .4em;
}

.sapir-article__content blockquote {
	margin: 1.6em 0;
	padding: 4px 20px;
	border-inline-start: 4px solid var(--sa-art-accent);
	color: var(--sa-art-navy);
	font-size: 20px;
	font-weight: 600;
	line-height: 1.7;
}

/* share row */
.sapir-article__share-label p {
	margin: 0 0 4px;
	font-size: 15px;
	font-weight: 700;
	color: var(--sa-art-muted);
}

.elementor-4342 .elementor-widget-share-buttons {
	padding-top: 4px;
	border-top: 1px solid var(--sa-art-line);
	margin-top: 6px;
}

/* --------------------------------------------------------------------------
   2. CARDS - shared by "related posts" and the category archive
   -------------------------------------------------------------------------- */

.sapir-related {
	margin-top: 10px;
	padding-top: 30px;
	border-top: 1px solid var(--sa-art-line);
}

.sapir-related__title {
	font-family: var(--sa-art-font);
	font-weight: 900;
	font-size: clamp(22px, 2.4vw, 30px);
	color: var(--sa-art-navy);
	margin: 0 0 20px;
}

/* Elementor puts its grid on .elementor-posts-container; the related-posts
   shortcode uses its own wrapper. Both get the same card grid. */
/* Related posts sit inside the 820px article measure, so the tracks are sized
   to fit three across there. */
.sapir-related__grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 230px), 1fr));
	gap: 20px;
}

/* The archive is wider. Capped track width plus justify-content:center so a
   category holding one or two posts shows them centred rather than stranded
   against one edge, while a full category still fills the row. */
.elementor-8538 .elementor-posts-container {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 330px));
	justify-content: center;
	gap: 22px;
}

.sapir-card,
.elementor-8538 .elementor-post {
	display: flex;
	flex-direction: column;
	overflow: hidden;
	background: #fff;
	border: 1.5px solid var(--sa-art-line);
	border-radius: 18px;
	text-decoration: none !important;
	color: inherit !important;
	transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}

.sapir-card:hover,
.elementor-8538 .elementor-post:hover {
	transform: translateY(-4px);
	border-color: var(--sa-art-teal);
	box-shadow: 0 16px 34px rgba(10, 14, 122, .16);
}

/* Elementor sizes this box with a padding-bottom ratio hack; aspect-ratio
   replaces it. */
.sapir-card__media,
.elementor-8538 .elementor-post__thumbnail {
	position: relative;
	aspect-ratio: 16 / 10;
	overflow: hidden;
	background: var(--sa-art-soft);
	padding-bottom: 0 !important;
}

/* Absolute fill rather than width/height:100%. The thumbnail carries its own
   intrinsic aspect-ratio, and with a percentage height the image kept its
   natural size and sat in the corner of the box. */
/* The parent theme positions this image with top:50%/left:50% plus a translate.
   The "inset" shorthand loses to those longhands, so the sides are set
   individually and the translate is cleared. */
.sapir-card__media img,
.elementor-8538 .elementor-post__thumbnail img {
	position: absolute !important;
	top: 0 !important;
	right: 0 !important;
	bottom: 0 !important;
	left: 0 !important;
	width: 100% !important;
	height: 100% !important;
	max-width: none;
	object-fit: cover;
	display: block;
	transform: none !important;
	transition: transform .4s ease;
}

.sapir-card:hover .sapir-card__media img,
.elementor-8538 .elementor-post:hover .elementor-post__thumbnail img {
	transform: scale(1.05) !important;
}

.sapir-card:hover .sapir-card__media img,
.elementor-8538 .elementor-post:hover .elementor-post__thumbnail img {
	transform: scale(1.05);
}

.sapir-card__placeholder {
	display: block;
	width: 100%;
	height: 100%;
	background: linear-gradient(135deg, var(--sa-art-soft), #E7F2FF);
}

.sapir-card__body,
.elementor-8538 .elementor-post__text {
	display: flex;
	flex-direction: column;
	gap: 6px;
	padding: 16px 18px 20px;
	margin: 0;
}

.sapir-card__date,
.elementor-8538 .elementor-post__meta-data {
	font-size: 13px;
	font-weight: 600;
	color: var(--sa-art-muted);
	margin: 0;
}

.sapir-card__title,
.elementor-8538 .elementor-post__title {
	margin: 0;
	font-family: var(--sa-art-font);
	font-size: 18px;
	font-weight: 800;
	line-height: 1.35;
	color: var(--sa-art-navy);
}

.elementor-8538 .elementor-post__title a {
	color: inherit !important;
	text-decoration: none !important;
}

.elementor-8538 .elementor-post__excerpt p {
	margin: 0;
	font-size: 15px;
	line-height: 1.65;
	color: var(--sa-art-muted);
}

/* --------------------------------------------------------------------------
   3. CATEGORY ARCHIVE
   -------------------------------------------------------------------------- */

.elementor-8538 {
	font-family: var(--sa-art-font);
	color: var(--sa-art-ink);
}

.elementor-8538 .e-con-inner {
	max-width: 1180px;
	margin-inline: auto;
}

/* The title widget doubles as the page's header band - the container that was
   meant to hold it lost its class in Elementor's normalisation, so the band is
   drawn on the widget itself. */
.elementor-8538 .sapir-archive__title {
	padding: 26px 28px;
	margin-bottom: 30px;
	background: var(--sa-art-soft);
	border-radius: 20px;
	border-inline-start: 6px solid var(--sa-art-teal);
}

body .elementor-8538 .sapir-archive__title .elementor-heading-title {
	margin: 0;
	font-family: var(--sa-art-font);
	font-weight: 900;
	font-size: clamp(24px, 2.8vw, 34px);
	line-height: 1.25;
	color: var(--sa-art-navy);
}

/* Elementor's archive widget prints a read-more link and a comment count that
   this card design does not use. Note the comment count ships inside a span
   classed .elementor-post-avatar, not .elementor-post__comments - hiding the
   latter alone left "אין תגובות" on the card. */
.elementor-8538 .elementor-post__read-more,
.elementor-8538 .elementor-post__meta-data .elementor-post-avatar,
.elementor-8538 .elementor-post__meta-data .elementor-post__comments,
.elementor-8538 .elementor-post__meta-data .elementor-post__author {
	display: none !important;
}

/* the "///" divider belongs to the meta items we just removed */
.elementor-8538 .elementor-post__meta-data .elementor-post-date::after,
.elementor-8538 .elementor-post__meta-data span + span::before {
	content: none !important;
}

/* pagination */
.elementor-8538 .elementor-pagination {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 8px;
	margin-top: 34px;
}

.elementor-8538 .elementor-pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 42px;
	height: 42px;
	padding: 0 12px;
	border: 1.5px solid var(--sa-art-line);
	border-radius: 12px;
	background: #fff;
	color: var(--sa-art-navy);
	font-weight: 700;
	text-decoration: none;
	transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}

.elementor-8538 .elementor-pagination .page-numbers:hover,
.elementor-8538 .elementor-pagination .page-numbers.current {
	background: var(--sa-art-navy);
	border-color: var(--sa-art-navy);
	color: #fff;
}

/* nothing found */
.elementor-8538 .elementor-posts-nothing-found {
	padding: 40px 24px;
	background: var(--sa-art-soft);
	border-radius: 18px;
	text-align: center;
	color: var(--sa-art-muted);
	font-size: 16px;
}

/* --------------------------------------------------------------------------
   4. RESPONSIVE
   -------------------------------------------------------------------------- */

@media (max-width: 1024px) {

	.elementor-4342 .e-con-inner,
	.elementor-8538 .e-con-inner {
		max-width: none;
	}
}

@media (max-width: 767px) {

	.sapir-article__content {
		font-size: 17px;
		line-height: 1.85;
	}

	.sapir-article__media img {
		border-radius: 14px;
	}

	.sapir-related__grid,
	.elementor-8538 .elementor-posts-container {
		grid-template-columns: 1fr;
		gap: 16px;
	}

	.elementor-8538 .sapir-archive__title {
		padding: 20px 18px;
		border-radius: 16px;
		margin-bottom: 22px;
	}

	.sapir-article__content blockquote {
		font-size: 18px;
		padding-inline-start: 16px;
	}
}