/*
 * Mesilaty facelift — conservative refinement of the existing Astra/Elementor design.
 * Scoped: article rules only on single posts, card rules only on archive/blog/search.
 * Colors are the site's existing ones (Astra global color 0 + Elementor section-title cyan).
 */

/* Brand font note: "Birzia" is referenced by existing Elementor/Astra styles but was never
 * declared. Its Latin glyphs are uppercase-only ("PowerShell" renders as "POWERSHELL"),
 * which is unsuitable for technical English, so it is deliberately NOT declared here. */

:root {
	--m-primary: #046bd2;          /* Astra global color 0 (links, buttons) */
	--m-accent: #319dce;           /* Elementor section titles */
	--m-heading: #1e293b;
	--m-text: #334155;
	--m-muted: #64748b;
	--m-border: #e2e8f0;
	--m-surface: #f8fafc;
	--m-code-bg: #0f172a;
	--m-code-text: #e2e8f0;
	--m-radius: 8px;
	--m-font-ui: system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
	--m-font-text: system-ui, -apple-system, "Segoe UI", Arial, "Noto Sans Hebrew", sans-serif;
	--m-font-mono: ui-monospace, "Cascadia Mono", Consolas, "SFMono-Regular", Menlo, monospace;
}

/* ---------- Header (Astra header on posts/archives) ---------- */
.ast-hfb-header .site-header .ast-primary-header-bar { border-bottom: 1px solid var(--m-border); }
.ast-hfb-header .site-title a { font-family: var(--m-font-ui); font-weight: 700; letter-spacing: .01em; color: var(--m-heading); }
.ast-hfb-header .main-header-menu .menu-link { font-family: var(--m-font-ui); font-weight: 500; }
.ast-hfb-header .main-header-menu .current-menu-item > .menu-link,
.ast-hfb-header .main-header-menu .current-menu-ancestor > .menu-link { color: var(--m-primary); }

/* ---------- Breadcrumbs ---------- */
.mesilaty-breadcrumbs { font-size: .875rem; color: var(--m-muted); margin: 0 0 .75rem; font-family: var(--m-font-ui); }
.mesilaty-breadcrumbs a { color: var(--m-muted); text-decoration: none; }
.mesilaty-breadcrumbs a:hover, .mesilaty-breadcrumbs a:focus-visible { color: var(--m-primary); text-decoration: underline; }
.mesilaty-breadcrumbs .breadcrumb_last { color: var(--m-heading); }

/* ---------- Single article ---------- */
.single-post .entry-title { font-family: var(--m-font-ui); font-weight: 700; color: var(--m-heading); font-size: clamp(1.6rem, 1.2rem + 1.6vw, 2.25rem); line-height: 1.3; letter-spacing: -.005em; }
.single-post .entry-meta { color: var(--m-muted); font-size: .875rem; }
.single-post .entry-meta a { color: var(--m-muted); }

.single-post .entry-content {
	font-family: var(--m-font-text);
	font-size: 1.0625rem;           /* 17px */
	line-height: 1.85;
	color: var(--m-text);
}
.single-post .entry-content > * { max-width: 72ch; margin-inline: auto; }
.single-post .entry-content > figure,
.single-post .entry-content > .wp-block-image,
.single-post .entry-content > .wp-block-code,
.single-post .entry-content > pre,
.single-post .entry-content > .wp-block-table,
.single-post .entry-content > .mesilaty-toc { max-width: 80ch; }
.single-post .entry-content p { margin-block: 0 1.1em; }

.single-post .entry-content h2,
.single-post .entry-content h3,
.single-post .entry-content h4,
.single-post .entry-content h5,
.single-post .entry-content h6 { font-family: var(--m-font-ui); color: var(--m-heading); line-height: 1.35; scroll-margin-top: 90px; }
.single-post .entry-content h2 { font-size: 1.6rem; font-weight: 700; margin: 2.2em auto .7em; padding-bottom: .35em; border-bottom: 1px solid var(--m-border); }
.single-post .entry-content h3 { font-size: 1.3rem; font-weight: 600; margin: 1.8em auto .6em; }
/* Old posts use h5/h6 as section headings; give them readable, consistent sizes. */
.single-post .entry-content h4,
.single-post .entry-content h5,
.single-post .entry-content h6 { font-size: 1.15rem; font-weight: 600; margin: 1.6em auto .5em; }

.single-post .entry-content a { color: var(--m-primary); text-underline-offset: .2em; }

.single-post .entry-content ul,
.single-post .entry-content ol { padding-inline-start: 1.4em; margin-block: 0 1.2em; }
.single-post .entry-content li { margin-bottom: .35em; }
.single-post .entry-content li::marker { color: var(--m-accent); }

/* Screenshots and figures */
.single-post .entry-content img { height: auto; border-radius: 6px; }
.single-post .entry-content .wp-block-image img { box-shadow: 0 1px 3px rgba(15, 23, 42, .12); border: 1px solid var(--m-border); }
.single-post .entry-content figure { margin-block: 1.4em; }
.single-post .entry-content figcaption { font-size: .875rem; color: var(--m-muted); text-align: center; margin-top: .5em; }

/* Tables: scroll instead of breaking the layout on phones */
.single-post .entry-content .wp-block-table { overflow-x: auto; }
.single-post .entry-content table { border-collapse: collapse; width: 100%; font-size: .95rem; }
.single-post .entry-content th,
.single-post .entry-content td { border: 1px solid var(--m-border); padding: .55em .75em; text-align: start; vertical-align: top; }
.single-post .entry-content thead th { background: var(--m-surface); color: var(--m-heading); }

/* ---------- Code: always LTR inside RTL articles ---------- */
.entry-content code,
.entry-content kbd,
.entry-content samp { font-family: var(--m-font-mono); direction: ltr; unicode-bidi: isolate; font-size: .9em; }
.entry-content :not(pre) > code { background: #eef2f7; color: #0f172a; padding: .1em .35em; border-radius: 4px; white-space: break-spaces; }

.entry-content pre,
.entry-content .wp-block-code {
	direction: ltr;
	text-align: left;
	font-family: var(--m-font-mono);
	font-size: .9rem;
	line-height: 1.6;
	background: var(--m-code-bg);
	color: var(--m-code-text);
	border: 0;
	border-radius: var(--m-radius);
	padding: 1rem 1.1rem;
	overflow-x: auto;
	/* Wrap long commands instead of hiding them (copy still gets the original single line). */
	white-space: pre-wrap;
	overflow-wrap: anywhere;
	tab-size: 4;
	position: relative;
	margin-block: 1.2em;
}
.entry-content pre code,
.entry-content .wp-block-code code { background: none; color: inherit; padding: 0; font-size: inherit; white-space: inherit; }
/* Old posts mark placeholders with <strong> inside code */
.entry-content pre strong { color: #fbbf24; font-weight: 600; }

.mesilaty-code-wrap { position: relative; }
.mesilaty-copy-btn {
	position: absolute; top: .5rem; left: .5rem; z-index: 1;
	font: 500 .75rem/1 var(--m-font-ui);
	color: #cbd5e1; background: rgba(148, 163, 184, .16);
	border: 1px solid rgba(148, 163, 184, .35); border-radius: 6px;
	padding: .45rem .7rem; min-height: 32px; cursor: pointer;
	opacity: .85; transition: opacity .15s, background .15s;
}
.mesilaty-copy-btn:hover, .mesilaty-copy-btn:focus-visible { opacity: 1; background: rgba(148, 163, 184, .3); color: #fff; }
.mesilaty-copy-btn:focus-visible { outline: 2px solid var(--m-accent); outline-offset: 2px; }
.mesilaty-copy-btn.is-copied { color: #86efac; border-color: #86efac; }
.entry-content .mesilaty-code-wrap > pre,
.entry-content .mesilaty-code-wrap > .wp-block-code { padding-top: 2.8rem; }

/* ---------- Callouts ---------- */
.single-post .entry-content blockquote {
	border: 0; border-inline-start: 4px solid var(--m-border);
	background: var(--m-surface); color: var(--m-text);
	margin: 1.4em auto; padding: .9em 1.1em; border-radius: 0 var(--m-radius) var(--m-radius) 0;
	font-style: normal; font-size: 1rem;
}
.single-post .entry-content blockquote p:last-child { margin-bottom: 0; }
.single-post .entry-content blockquote.mesilaty-callout--warning { border-inline-start-color: #dc2626; background: #fef2f2; }
.single-post .entry-content blockquote.mesilaty-callout--important { border-inline-start-color: #d97706; background: #fffbeb; }
.single-post .entry-content blockquote.mesilaty-callout--note { border-inline-start-color: var(--m-primary); background: #eff6ff; }
.single-post .entry-content blockquote.mesilaty-callout--tip { border-inline-start-color: #16a34a; background: #f0fdf4; }

/* ---------- Table of contents ---------- */
.mesilaty-toc { border: 1px solid var(--m-border); border-radius: var(--m-radius); background: var(--m-surface); padding: .2rem 1.1rem; margin: 1.2em auto 1.8em; }
.mesilaty-toc summary { cursor: pointer; font: 600 1rem/1.4 var(--m-font-ui); color: var(--m-heading); padding: .7rem 0; list-style-position: inside; }
.mesilaty-toc ol { margin: 0 0 .9rem; padding-inline-start: 1.2em; font-size: .95rem; line-height: 1.6; }
.mesilaty-toc ol ol { margin: .2rem 0; }
.mesilaty-toc li { margin-bottom: .25em; }
.mesilaty-toc a { color: var(--m-text); text-decoration: none; }
.mesilaty-toc a:hover, .mesilaty-toc a:focus-visible { color: var(--m-primary); text-decoration: underline; }

/* ---------- Related posts + prev/next ---------- */
.mesilaty-related { margin: 2.5rem auto 1rem; max-width: 80ch; }
.mesilaty-related h2 { font: 700 1.3rem/1.3 var(--m-font-ui); color: var(--m-heading); margin: 0 0 1rem; }
.mesilaty-related ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
.mesilaty-related a { display: block; text-decoration: none; color: var(--m-heading); border: 1px solid var(--m-border); border-radius: var(--m-radius); overflow: hidden; background: #fff; height: 100%; transition: border-color .15s, box-shadow .15s; }
.mesilaty-related a:hover, .mesilaty-related a:focus-visible { border-color: #cbd5e1; box-shadow: 0 4px 14px rgba(15, 23, 42, .08); }
.mesilaty-related img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.mesilaty-related span { display: block; padding: .7rem .8rem .8rem; font: 600 .95rem/1.45 var(--m-font-ui); }

.single-post .post-navigation .nav-links { gap: 1rem; }
.single-post .post-navigation a { font-family: var(--m-font-ui); }

/* ---------- Archive / blog / search cards ---------- */
:is(.archive, .blog, .search) .ast-row { row-gap: 0; }
:is(.archive, .blog, .search) .ast-article-post .ast-article-inner,
:is(.archive, .blog, .search) .ast-article-post > .ast-article-inner { height: 100%; }
:is(.archive, .blog, .search) .ast-article-post .post-content,
:is(.archive, .blog, .search) .ast-article-inner { display: flex; flex-direction: column; }
:is(.archive, .blog, .search) .ast-article-post {
	border-radius: var(--m-radius);
}
:is(.archive, .blog, .search) .ast-article-inner {
	border: 1px solid var(--m-border); border-radius: var(--m-radius); overflow: hidden; background: #fff;
	transition: box-shadow .15s, border-color .15s;
}
:is(.archive, .blog, .search) .ast-article-inner:hover { border-color: #cbd5e1; box-shadow: 0 4px 16px rgba(15, 23, 42, .08); }
:is(.archive, .blog, .search) .post-thumb-img-content img,
:is(.archive, .blog, .search) .ast-blog-featured-section img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; display: block; }
:is(.archive, .blog, .search) .entry-title { font-family: var(--m-font-ui); font-weight: 700; font-size: 1.1rem; line-height: 1.4; }
:is(.archive, .blog, .search) .entry-title a { color: var(--m-heading); }
:is(.archive, .blog, .search) .entry-title a:hover { color: var(--m-primary); }
:is(.archive, .blog, .search) .ast-excerpt-container,
:is(.archive, .blog, .search) .ast-excerpt-container p {
	display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
	color: var(--m-text); font-size: .95rem; line-height: 1.65;
}
:is(.archive, .blog, .search) .ast-taxonomy-container a,
:is(.archive, .blog, .search) .cat-links a {
	display: inline-block; font: 500 .75rem/1 var(--m-font-ui); color: var(--m-primary);
	background: #eff6ff; border-radius: 999px; padding: .35em .7em; margin: 0 0 .25em .25em; text-decoration: none;
}
/* The ", " text between category tags is redundant once they are separate tags. */
:is(.archive, .blog, .search) .ast-taxonomy-container,
:is(.archive, .blog, .search) .cat-links { font-size: 0; }
/* Archive header */
.ast-archive-description { padding-block: 1.75rem 1.25rem; }
.ast-archive-description .ast-archive-title { font-family: var(--m-font-ui); font-weight: 700; color: var(--m-heading); }

/* Pagination: comfortable tap targets, correct RTL arrow direction */
.ast-pagination .page-numbers { min-width: 44px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; border-radius: 6px; }
[dir="rtl"] .ast-pagination .next .ast-left-arrow,
[dir="rtl"] .ast-pagination .prev .ast-right-arrow { display: inline-block; transform: scaleX(-1); }

/* Site header/footer styles: mesilaty-site.css */

@media (max-width: 767px) {
	.single-post .entry-content { font-size: 1rem; line-height: 1.8; }
	.single-post .entry-content h2 { font-size: 1.35rem; }
	.single-post .entry-content h3 { font-size: 1.15rem; }
	.entry-content pre, .entry-content .wp-block-code { font-size: .82rem; border-radius: 6px; margin-inline: -4px; }
}

@media (prefers-reduced-motion: reduce) {
	.mesilaty-copy-btn, .mesilaty-related a, :is(.archive, .blog, .search) .ast-article-inner { transition: none; }
}

/* ---------- Homepage (Elementor page 5) ---------- */
/* Category tiles: the six banners mixed portrait and landscape images, so tiles had
 * uneven heights and left large gaps. Uniform 16:10 tiles with cropped images. */
.home .elementor-element-cab124b .jet-banner { aspect-ratio: 16 / 10; overflow: hidden; border-radius: var(--m-radius); }
.home .elementor-element-cab124b .jet-banner__img { width: 100%; height: 100%; object-fit: cover; }
.home .elementor-element-cab124b .jet-banner__title { font-family: var(--m-font-ui); }
@media (max-width: 767px) {
	.home .elementor-element-cab124b { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 12px !important; }
	.home .elementor-element-cab124b .jet-banner__title { font-size: 1.15rem !important; line-height: 1.3 !important; }
}

/* Homepage mobile menu (JetMenu widget b863b20): the dropdown was anchored with
 * left:0 to the 36px toggle, so in RTL it opened off-screen (items clipped on
 * production too). Anchor it to the right edge with a readable width. */
@media (max-width: 1024px) {
	.elementor-element-b863b20 .jet-mega-menu-container {
		left: auto !important; right: 0 !important;
		width: min(88vw, 320px) !important; z-index: 999;
		background: #fff; border-radius: var(--m-radius);
		box-shadow: 0 8px 24px rgba(15, 23, 42, .15);
	}
	.elementor-element-b863b20 .jet-mega-menu-list { width: 100% !important; }
}