/*
Theme Name: BK Law
Theme URI: https://bk-law.com
Description: תבנית RTL עברית עבור משרד עו"ד בן קרטוז'ינסקי — מכרזים, חוזים והתקשרויות. תבנית בת של Twenty Twenty-Five.
Author: bk-law.com
Template: twentytwentyfive
Version: 1.6.3
Requires at least: 6.7
Tested up to: 7.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: bklaw
Tags: rtl-language-support, block-patterns, full-site-editing
*/

/* -------------------------------------------------------------------------
   Design decisions live in theme.json. This file holds only what theme.json
   cannot express. Keep it small.
   ------------------------------------------------------------------------- */

/* Hebrew punctuation and mixed Hebrew/Latin runs read better with a slightly
   looser word-spacing at large sizes. */
h1, h2, h3 {
	word-spacing: 0.01em;
}

/* --- Accessibility -------------------------------------------------------
   The old site failed WCAG 2.4.7 (no visible focus) and 2.4.1 (no skip link).
   Both are required for ת"י 5568. */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
	outline: 3px solid var(--wp--preset--color--accent);
	outline-offset: 2px;
	border-radius: 2px;
}

.skip-link:focus {
	background: var(--wp--preset--color--primary);
	color: #fff;
	inset-inline-start: 1rem;
	padding: 0.75rem 1.25rem;
	text-decoration: underline;
	z-index: 100000;
}

/* Body links: underlined by default so they are distinguishable without relying
   on colour alone (WCAG 1.4.1). Navigation and buttons opt out below. */
.wp-block-post-content a:where(:not(.wp-element-button)),
.wp-block-post-excerpt a:where(:not(.wp-element-button)) {
	text-underline-offset: 0.2em;
	text-decoration-thickness: 1px;
}

.wp-block-navigation a,
.wp-block-site-title a {
	text-decoration: none;
}

.wp-block-navigation a:hover,
.wp-block-navigation a:focus-visible {
	text-decoration: underline;
	text-underline-offset: 0.3em;
}

/* --- Header --------------------------------------------------------------- */
.bk-header {
	border-block-end: 1px solid #e3e7ee;
	/* Above everything below it: the page-band title carries z-index:2 for its
	   own stacking, and without this it painted OVER the open nav dropdowns
	   (Ben, 2026-08-19, contact-page screenshot). */
	position: relative;
	z-index: 100;
}

/* Phone number in the header — plain text like the original site (v1.5.5;
   it was a pill button before). The .bk-phone class also keys the print rule. */
.bk-phone {
	margin: 0;
}

.bk-phone a {
	color: var(--wp--preset--color--primary);
	font-weight: 700;
	font-size: 1.15rem;
	text-decoration: none;
	white-space: nowrap;
}

.bk-phone a:hover,
.bk-phone a:focus-visible {
	color: var(--wp--preset--color--accent);
	text-decoration: underline;
	text-underline-offset: 0.25em;
}

/* Icon-only search button in the header, like the original's magnifier. */
.bk-header-search .wp-block-search__button {
	background: transparent;
	border: none;
	color: var(--wp--preset--color--primary);
	padding: 0.35rem;
	cursor: pointer;
}

.bk-header-search .wp-block-search__button svg {
	width: 1.5rem;
	height: 1.5rem;
	fill: currentColor;
}

.bk-header-search .wp-block-search__button:hover,
.bk-header-search .wp-block-search__button:focus-visible {
	color: var(--wp--preset--color--accent);
}

/* Hover dropdowns — white panel, blue items, separator LINES between rows
   like the original menu (Ben, 2026-08-19: "קו מפריד ולא רווח גדול" — the
   nav's 1.6rem blockGap was leaking into the dropdown list; gap:0 kills it). */
.wp-block-navigation .wp-block-navigation__submenu-container {
	background: var(--wp--preset--color--base) !important;
	border: 1px solid #e3e7ee !important;
	border-radius: 0 0 12px 12px;
	box-shadow: 0 16px 34px rgba(25, 48, 107, 0.14);
	padding: 0 !important;
	gap: 0 !important;
	min-width: 17rem;
	overflow: hidden; /* keep row hover-fill inside the rounded corners */
}

.wp-block-navigation .wp-block-navigation__submenu-container > .wp-block-navigation-item {
	border-bottom: 1px solid #e8ecf2;
}

.wp-block-navigation .wp-block-navigation__submenu-container > .wp-block-navigation-item:last-child {
	border-bottom: none;
}

.wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	color: var(--wp--preset--color--secondary) !important;
	padding: 0.65rem 1.2rem !important;
	font-size: 1.1rem;
	font-weight: 400;
	line-height: 1.4;
	width: 100%;
}

.wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item:hover > .wp-block-navigation-item__content,
.wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item__content:focus-visible {
	background: var(--wp--preset--color--surface);
	color: var(--wp--preset--color--primary) !important;
}

/* --- Practice-area cards -------------------------------------------------- */
.bk-card {
	background: var(--wp--preset--color--base);
	border: 1px solid #e3e7ee;
	border-radius: 14px;
	height: 100%;
	transition: box-shadow 0.22s ease, transform 0.22s ease;
}

.bk-card:hover,
.bk-card:focus-within {
	box-shadow: 0 6px 20px rgba(25, 48, 107, 0.12);
	transform: translateY(-2px);
}

@media (prefers-reduced-motion: reduce) {
	.bk-card,
	.bk-card:hover,
	.bk-card:focus-within {
		transition: none;
		transform: none;
	}
}

/* --- Readability ---------------------------------------------------------- */
/* Hebrew body copy at a comfortable measure. The old site ran full-width. */
.bk-prose p,
.bk-prose li {
	max-width: 68ch;
}

/* Lists in RTL need the marker on the correct side; core handles most of this,
   but nested lists inside content need the logical property. */
.wp-block-post-content ul,
.wp-block-post-content ol {
	padding-inline-start: 1.5em;
	padding-inline-end: 0;
}

/* --- Print ---------------------------------------------------------------- */
@media print {
	.wp-block-navigation,
	.bk-phone,
	.wp-block-site-logo {
		display: none !important;
	}
}

/* --- Folded back in from Global Styles (Appearance → Editor → Styles → CSS) ---
   These rules were authored live in the database during the build so tweaks did
   not require re-uploading the theme. They now live here so the theme source is
   the single authority. Clear the Global Styles CSS box once this version is
   installed and verified, or the same rules will be applied twice. */

/* Card headings are links; an underline inside a card reads as clutter.
   Underline returns on hover/focus so the affordance is never lost. */
.bk-card :is(h2, h3, .wp-block-post-title) a {
	text-decoration: none;
}

.bk-card :is(h2, h3, .wp-block-post-title) a:hover,
.bk-card :is(h2, h3, .wp-block-post-title) a:focus-visible {
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

.bk-card :is(h2, h3, .wp-block-post-title) {
	margin-block-start: 0;
}

/* Footer links need to be legible on the navy background. */
footer.wp-block-group a {
	color: #fff;
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

footer.wp-block-group a:hover {
	color: #cfe0f5;
}

/* Equalise the practice-area cards so a longer title does not shorten its neighbour. */
.wp-block-columns:has(.bk-card) {
	align-items: stretch;
}

/* =========================================================================
   HOMEPAGE HERO SLIDER
   Rebuilds the rotating hero the original site had as an Elementor Pro widget.
   No page builder, no library. Behaviour lives in assets/js/hero.js.
   ========================================================================= */

/* `100vw` counts the vertical scrollbar, so full-bleed sections overflow the
   viewport by its width and produce a horizontal scrollbar across the whole
   site. Clipping at the root is the reliable fix. */
html,
body {
	overflow-x: hidden;
}

/* Full-bleed breakout — via the templates' `alignfull` class (v1.5.4).
   The old width:100vw + negative-margin trick included the scrollbar in the
   width, and in RTL the ~8px overflow clips on the LEFT — Ben saw the hero
   and its left arrow cut off. WordPress's own alignfull stretches to the
   visible width exactly. `max-width:none` stays as belt: constrained layout
   caps direct children at 1140px otherwise. */
.bk-hero,
.bk-leadbar,
.bk-band,
.bk-values {
	max-width: none !important;
}

.bk-hero {
	position: relative;
	min-height: clamp(26rem, 46vw, 40rem);
	overflow: hidden;
	background: var(--wp--preset--color--primary);
}

.bk-hero__slide {
	position: absolute;
	inset: 0;
	display: grid;
	place-items: center;
	padding: var(--wp--preset--spacing--50) var(--wp--preset--spacing--40);
	background-position: center;
	background-size: cover;
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.9s ease-in-out;
}

.bk-hero__slide.is-active {
	opacity: 1;
	visibility: visible;
}

/* Without JS only the first slide is ever shown, and it must not be absolute
   or the hero would collapse to zero height. */
.no-js .bk-hero__slide {
	position: relative;
	opacity: 1;
	visibility: visible;
}

.no-js .bk-hero__slide:not(:first-child),
.no-js .bk-hero__controls,
.no-js .bk-hero__nav {
	display: none;
}

/* Light veil only — Ben's 2026-08-19 review: the heavy navy scrim made the
   whole slider read as "blue", hiding the photographs. The photos stay vivid;
   the TEXT PANEL below carries the WCAG 1.4.3 contrast instead (the original
   laid light text straight on light photos and was close to illegible). */
.bk-hero__slide::before {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(
		to bottom,
		rgba(13, 24, 48, 0.34),
		rgba(13, 24, 48, 0.24)
	);
}

.bk-hero__inner {
	position: relative;
	max-width: 52rem;
	text-align: center;
	color: #fff;
	background: rgba(10, 20, 42, 0.72);
	border-radius: 16px;
	padding: 2rem 2.6rem 2.3rem;
	backdrop-filter: blur(2px);
	box-shadow: 0 18px 44px rgba(0, 0, 0, 0.28);
}

.bk-hero__inner :is(h1, h2) {
	color: #fff;
	font-size: clamp(2.2rem, 4.8vw, 3.5rem);
	margin: 0 0 0.6em;
	text-shadow: 0 2px 12px rgba(0, 0, 0, 0.35);
	text-wrap: balance;
}

.bk-hero__inner p {
	color: #fff;
	font-size: clamp(1.1rem, 1.6vw, 1.3rem);
	margin: 0 auto 1.7em;
	max-width: 42rem;
	text-shadow: 0 1px 8px rgba(0, 0, 0, 0.4);
}

.bk-hero__cta {
	display: inline-block;
	background: var(--wp--preset--color--secondary);
	color: #fff;
	text-decoration: none;
	font-weight: 600;
	padding: 0.7rem 2rem;
	border-radius: 999px;
	border: 2px solid transparent;
}

.bk-hero__cta:hover,
.bk-hero__cta:focus-visible {
	background: #fff;
	color: var(--wp--preset--color--primary);
}

/* --- Hero controls -------------------------------------------------------- */
.bk-hero__nav {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 2;
	width: 2.75rem;
	height: 2.75rem;
	border: 0;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.85);
	color: var(--wp--preset--color--primary);
	font-size: 1.4rem;
	line-height: 1;
	cursor: pointer;
}

.bk-hero__nav:hover,
.bk-hero__nav:focus-visible {
	background: #fff;
}

.bk-hero__nav--prev { right: 1.1rem; }
.bk-hero__nav--next { left: 1.1rem; }

/* SVG chevrons (v1.5.4): the old ‹ › glyphs are bidi-mirrored characters, so
   the RTL page flipped them — the right-side arrow pointed left. SVG paths
   don't mirror. */
.bk-hero__nav svg {
	width: 1.35rem;
	height: 1.35rem;
	display: block;
	margin: auto;
}

.bk-hero__controls {
	position: absolute;
	inset-inline: 0;
	bottom: 1rem;
	z-index: 2;
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	align-items: center;
	justify-content: center;
}

.bk-hero__dots {
	display: flex;
	gap: 0.5rem;
}

.bk-hero__dot {
	width: 0.85rem;
	height: 0.85rem;
	padding: 0;
	border: 2px solid #fff;
	border-radius: 50%;
	background: transparent;
	cursor: pointer;
}

.bk-hero__dot.is-active { background: #fff; }

.bk-hero__pause {
	border: 1px solid rgba(255, 255, 255, 0.7);
	background: rgba(25, 48, 107, 0.55);
	color: #fff;
	font: inherit;
	font-size: 0.85rem;
	padding: 0.25rem 0.9rem;
	border-radius: 999px;
	cursor: pointer;
}

.bk-hero__pause:hover,
.bk-hero__pause:focus-visible {
	background: var(--wp--preset--color--primary);
}

/* Visible only to screen readers. */
.bk-hero__status {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

@media (prefers-reduced-motion: reduce) {
	.bk-hero__slide { transition: none; }
}

/* =========================================================================
   LEAD-CAPTURE BAR  —  "השאר פרטים לשיחת ייעוץ חינם!"
   The original site had this directly under the hero (a second Elementor Pro
   form, also broken by the SendGrid failure). Rebuilt against working WPForms.
   ========================================================================= */

.bk-leadbar {
	background: var(--wp--preset--color--base);
	border-block: 1px solid #dfe4ec;
	padding-block: var(--wp--preset--spacing--30);
}

.bk-leadbar__inner {
	max-width: 1140px;
	margin-inline: auto;
	padding-inline: var(--wp--preset--spacing--30);
	display: flex;
	flex-wrap: wrap;
	gap: 1rem;
	align-items: center;
	justify-content: space-between;
}

.bk-leadbar__title {
	margin: 0;
	color: var(--wp--preset--color--primary);
	font-size: clamp(1.05rem, 2vw, 1.3rem);
	font-weight: 700;
}

/* The embedded WPForms form sits inline on wide screens, stacks on mobile.
   NOTE: WPForms nests fields inside `.wpforms-field-container`, so the flex
   context has to go on THAT, not on the <form> — putting it on the form makes
   the container a single flex child and the fields stack vertically. */
.bk-leadbar .wpforms-container { max-width: none; margin: 0; flex: 1 1 34rem; }
.bk-leadbar .wpforms-form { display: flex; flex-wrap: wrap; gap: 0.6rem; align-items: flex-end; }

.bk-leadbar .wpforms-field-container {
	display: flex;
	flex: 1 1 100%;
	flex-wrap: wrap;
	gap: 0.6rem;
	align-items: flex-end;
}

.bk-leadbar .wpforms-field {
	flex: 1 1 11rem;
	padding: 0 !important;
}

.bk-leadbar .wpforms-field-label {
	font-size: 0.85rem;
	margin-bottom: 0.15rem;
}

/* Keep the message box to one line's height so the strip stays a strip; it
   grows once focused. `!important` because WPForms ships its own textarea
   sizing with higher specificity than a plain descendant selector. */
.bk-leadbar .wpforms-field-textarea textarea,
.bk-leadbar textarea {
	height: 2.7rem !important;
	min-height: 2.7rem !important;
	padding-block: 0.5rem;
	resize: vertical;
	transition: height 0.15s ease;
}

.bk-leadbar .wpforms-field-textarea textarea:focus,
.bk-leadbar textarea:focus {
	height: 7rem !important;
}

@media (prefers-reduced-motion: reduce) {
	.bk-leadbar textarea { transition: none; }
}

.bk-leadbar .wpforms-submit-container { flex: 0 0 auto; padding: 0 !important; }

@media (max-width: 782px) {
	.bk-leadbar .wpforms-field { flex: 1 1 100%; }
}

/* =========================================================================
   FULL-BLEED SECTION OVER A PHOTOGRAPH
   ========================================================================= */

.bk-band {
	position: relative;
	padding-block: var(--wp--preset--spacing--70);
	background-position: center;
	background-size: cover;
	background-attachment: scroll;
}

.bk-band::before {
	content: "";
	position: absolute;
	inset: 0;
	background: rgba(25, 48, 107, 0.78);
}

.bk-band > * {
	position: relative;
	max-width: 1140px;
	margin-inline: auto;
	padding-inline: var(--wp--preset--spacing--30);
}

.bk-band :is(h1, h2, h3, p, li) { color: #fff; }
.bk-band a { color: #fff; }

/* =========================================================================
   SECTION TITLE — the navy badge the original site used over "מאמרים"
   ========================================================================= */

.bk-section-title {
	width: max-content;
	max-width: 100%;
	margin-inline: auto;
	background: var(--wp--preset--color--primary);
	color: #fff !important;
	padding: 0.4em 1.4em 0.5em;
	border-radius: 8px;
	letter-spacing: 0.01em;
}

/* Gold hairline under badge titles — the small premium cue, in the palette's
   existing gold (the value-panel icons). */
.bk-section-title::after,
.bk-page-band .bk-band-title::after {
	content: "";
	display: block;
	width: 44px;
	height: 3px;
	margin: 0.4em auto 0;
	border-radius: 2px;
	background: #d8b360;
}

/* =========================================================================
   VALUE PANELS — rebuild of the original's four cards, as solid panels
   floating over a darkened photograph.
   ========================================================================= */

.bk-values {
	position: relative;
	max-width: none !important;
	padding-block: var(--wp--preset--spacing--70);
	isolation: isolate;
}

.bk-values__photo {
	position: absolute;
	inset: 0;
	background-position: center;
	background-size: cover;
	z-index: -1;
}

.bk-values__photo::after {
	content: "";
	position: absolute;
	inset: 0;
	background: rgba(16, 28, 51, 0.82);
}

.bk-values__grid {
	max-width: 1140px;
	margin-inline: auto;
	padding-inline: var(--wp--preset--spacing--30);
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
	gap: 1px;
	background: rgba(255, 255, 255, 0.14);
	border-radius: 10px;
	overflow: hidden;
	box-shadow: 0 18px 50px rgba(0, 0, 0, 0.35);
	padding: 0;
}

.bk-value {
	background: var(--wp--preset--color--secondary);
	color: #fff;
	padding: 2.25rem 1.4rem 2rem;
	text-align: center;
	transition: background 0.2s ease;
}

.bk-value:nth-child(even) { background: #2c4d64; }
.bk-value:hover           { background: #3d6a89; }

.bk-value__icon {
	width: 46px;
	height: 46px;
	fill: #d8b360; /* gold, as the original's scales icons */
	margin-bottom: 0.6rem;
}

.bk-value h3 {
	color: #fff;
	font-size: 1.5rem;
	margin: 0 0 0.5rem;
}

.bk-value p {
	color: rgba(255, 255, 255, 0.88);
	font-size: 1.05rem;
	line-height: 1.65;
	margin: 0;
}

@media (prefers-reduced-motion: reduce) {
	.bk-value { transition: none; }
}

/* --- Full-bleed band inner wrapper ---------------------------------------- */
.bk-band__inner {
	text-align: center;
}

.bk-band__inner p {
	max-width: 46rem;
	margin-inline: auto;
}

/* =========================================================================
   ARTICLE CARDS — image, title, excerpt
   ========================================================================= */

.bk-articles .wp-block-post {
	background: var(--wp--preset--color--base);
	border-radius: 14px;
	overflow: hidden;
	box-shadow: 0 6px 24px rgba(25, 48, 107, 0.08);
	display: flex;
	flex-direction: column;
	transition: box-shadow 0.25s ease, transform 0.25s ease;
}

.bk-articles .wp-block-post:hover,
.bk-articles .wp-block-post:focus-within {
	box-shadow: 0 18px 44px rgba(25, 48, 107, 0.16);
	transform: translateY(-4px);
}

.bk-articles .wp-block-post-featured-image {
	margin: 0;
}

.bk-articles .wp-block-post-featured-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.bk-articles .wp-block-post-title {
	margin: 1.4rem 1.5rem 0;
	font-size: 1.45rem;
	line-height: 1.3;
}

.bk-articles .wp-block-post-title a {
	text-decoration: none;
}

.bk-articles .wp-block-post-title a:hover,
.bk-articles .wp-block-post-title a:focus-visible {
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

.bk-articles .wp-block-post-excerpt {
	margin: 0.7rem 1.5rem 1.6rem;
	font-size: 1.02rem;
}

@media (prefers-reduced-motion: reduce) {
	.bk-articles .wp-block-post,
	.bk-articles .wp-block-post:hover {
		transition: none;
		transform: none;
	}
}

/* --- Contact form (WPForms) ----------------------------------------------
   WPForms ships LTR-assuming defaults; these correct it for RTL and bring the
   controls in line with the rest of the design. Focus styling is inherited from
   the :focus-visible rule above — do not override it here. */
.wpforms-container {
	max-width: 40rem;
}

.wpforms-container .wpforms-field-label {
	font-weight: 600;
}

.wpforms-container input[type="text"],
.wpforms-container input[type="email"],
.wpforms-container textarea {
	width: 100%;
	border: 1px solid #b9c2d0;
	border-radius: 6px;
	padding: 0.6em 0.75em;
	font-family: inherit;
	font-size: 1rem;
}

/* Error text must not rely on colour alone (WCAG 1.4.1) — core WPForms marks
   errors in red only, so add a marker glyph. */
.wpforms-container .wpforms-error {
	color: #a4262c;
	font-weight: 600;
}

.wpforms-container .wpforms-error::before {
	content: "⚠ ";
}

/* =========================================================================
   INNER-PAGE TEMPLATE PASS (v1.4.0)
   Every inner page opens the way the original site did: a full-width
   photograph under a steel-blue veil, the page title as a navy badge.
   Measured from the live original on 2026-08-09 — veil rgba(52,88,114,.67)
   at 50% opacity, badge #1B4E72, title 63px — unified here on the palette
   primary. The badge is the page's H1; the original had none at all.
   ========================================================================= */

.bk-page-band {
	position: relative;
	max-width: none !important; /* break out of the constrained 1140px column */
	min-height: clamp(16rem, 30vw, 25rem);
	display: flex;
	align-items: center;
	justify-content: center;
	padding: var(--wp--preset--spacing--50) var(--wp--preset--spacing--30);
	background-color: var(--wp--preset--color--primary);
	background-position: center;
	background-size: cover;
	overflow: hidden;
}

/* Steel-blue veil. Light on purpose — the badge, not the veil, carries the
   text contrast, exactly like the original. */
.bk-page-band::before {
	content: "";
	position: absolute;
	inset: 0;
	background: rgba(51, 88, 114, 0.42);
	z-index: 1;
}

/* Band photographs per template. Absolute paths — same docroot on
   new.bk-law.com today and on bk-law.com after cutover. */
.bk-page-band--articles { background-image: url("/wp-content/uploads/2026/08/articles.jpg"); }
.bk-page-band--default  { background-image: url("/wp-content/uploads/2026/08/2032-Medium.jpg"); }

/* A featured image, when the page or post has one, covers the CSS default. */
.bk-page-band .wp-block-post-featured-image {
	position: absolute;
	inset: 0;
	margin: 0;
	z-index: 0;
}

.bk-page-band .wp-block-post-featured-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* The badge — sits over the veil, holds the H1. */
.bk-page-band .bk-band-title {
	position: relative;
	z-index: 2;
	margin: 0;
	background: var(--wp--preset--color--primary);
	color: #fff !important;
	font-size: clamp(2.2rem, 5vw, 3.6rem);
	line-height: 1.18;
	font-weight: 700;
	padding: 0.28em 0.9em;
	border-radius: 6px;
	text-align: center;
	max-width: min(92%, 24em);
	text-wrap: balance;
	box-shadow: 0 10px 28px rgba(0, 0, 0, 0.22);
}

/* --- Single-post meta line (date · category) ------------------------------ */
.bk-post-meta .wp-block-post-date {
	color: #4a4f57;
	font-size: 0.95rem;
}

/* --- Card anatomy: chip, read-more, date ----------------------------------
   Completes the original card: image, green chip, title, excerpt,
   קרא עוד », date. */

.bk-articles .wp-block-post {
	position: relative; /* positioning context for the chip */
}

/* Category chip — the original's green, but with navy text: white-on-green
   measured 1.9:1 (fails WCAG 1.4.3); navy on the same green is 6.3:1. */
.bk-chip {
	width: max-content;
	max-width: 100%;
	background: #61ce70;
	border-radius: 999px;
	font-size: 0.8rem;
	font-weight: 700;
	line-height: 1;
	padding: 0.45em 1em;
}

.bk-chip,
.bk-chip a {
	color: var(--wp--preset--color--primary) !important;
	text-decoration: none;
}

.bk-chip a:hover,
.bk-chip a:focus-visible {
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

/* Inside a card the chip overlays the image's top inline-start corner. */
.bk-articles .wp-block-post .bk-chip {
	position: absolute;
	top: 0.8rem;
	inset-inline-start: 0.8rem;
	z-index: 1;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
}

.bk-articles .wp-block-post-excerpt {
	margin-bottom: 0.9rem; /* the date row closes the card now */
}

.bk-articles .wp-block-post-excerpt__more-text {
	margin-top: 0.5rem;
	font-size: 0.9rem;
}

.bk-articles .wp-block-post .wp-block-post-date {
	margin: auto 1.5rem 1.2rem; /* auto top pins the date to the card foot */
	padding-top: 0.8rem;
	border-top: 1px solid #e3e7ee;
	font-size: 0.85rem;
	color: #4a4f57;
}

/* --- Card grid: 3 / 2 / 1 like the original -------------------------------
   Core's grid layout with a manual columnCount emits repeat(3, …) with no
   breakpoints, and its per-instance rule prints after this sheet — hence
   the !important. */
@media (max-width: 1023px) {
	.bk-articles .wp-block-post-template.is-layout-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
	}
}

@media (max-width: 671px) {
	.bk-articles .wp-block-post-template.is-layout-grid {
		grid-template-columns: 1fr !important;
	}
}

/* --- Pagination ------------------------------------------------------------ */
.bk-articles .wp-block-query-pagination-numbers .page-numbers {
	padding: 0.3em 0.7em;
	border-radius: 6px;
}

.bk-articles .wp-block-query-pagination-numbers .page-numbers.current {
	background: var(--wp--preset--color--primary);
	color: #fff;
}

/* --- Search block (search.html / 404.html) --------------------------------- */
.wp-block-search__input {
	border: 1px solid #b9c2d0;
	border-radius: 6px;
	padding: 0.6em 0.75em;
	font-family: inherit;
	font-size: 1rem;
}

.wp-block-search__inside-wrapper {
	gap: 0.5rem;
}

/* =========================================================================
   PREMIUM PASS (v1.5.0, corrected v1.5.1) — Ben's 2026-08-19 review: bigger
   type, bigger imagery, smoother pages (D123). v1.5.1: the serif heading
   experiment reverted at Ben's request — Assistant everywhere, as the
   original site — and the whole type scale raised again in theme.json.
   ========================================================================= */

/* --- Motion: smooth but respectful --------------------------------------- */
html {
	scroll-behavior: smooth;
}

a,
button,
.wp-element-button {
	transition: color 0.18s ease, background-color 0.18s ease,
		border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}

.wp-element-button:hover,
.wp-element-button:focus-visible {
	transform: translateY(-1px);
	box-shadow: 0 8px 22px rgba(25, 48, 107, 0.18);
}

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	a, button, .wp-element-button { transition: none; }
	.wp-element-button:hover, .wp-element-button:focus-visible { transform: none; }
}

/* --- Article body: a notch above the 1.25rem base ------------------------- */
.wp-block-post-content p,
.wp-block-post-content li {
	font-size: 1.3125rem;
	line-height: 1.85;
}

.wp-block-post-content h2 {
	margin-top: 1.9em;
	margin-bottom: 0.55em;
}

.wp-block-post-content h3 {
	margin-top: 1.5em;
}

.wp-block-post-content img {
	border-radius: 12px;
}

/* --- Card grid breathes wider --------------------------------------------- */
.bk-articles .wp-block-post-template.is-layout-grid {
	gap: 2rem !important;
}

/* --- Single-post sidebar (מאמרים נוספים) ----------------------------------
   Restores the original site's article-to-article navigation as a modern
   sticky rail. Deliberately NOT inside .bk-articles, so card styles here
   are its own compact ones. */
.bk-single-cols {
	align-items: flex-start;
}

.bk-aside {
	position: sticky;
	top: 2rem;
	background: var(--wp--preset--color--base);
	border: 1px solid #e3e7ee;
	border-radius: 14px;
	padding: 1.6rem 1.5rem;
	box-shadow: 0 6px 24px rgba(25, 48, 107, 0.06);
}

.bk-aside__title {
	font-size: 1.45rem;
	margin: 0 0 1.1rem;
	padding-bottom: 0.6rem;
	border-bottom: 2px solid #d8b360;
}

.bk-aside .wp-block-post-template {
	display: flex;
	flex-direction: column;
	gap: 1.05rem;
	list-style: none;
	padding: 0;
	margin: 0;
}

.bk-aside .wp-block-post {
	display: grid;
	grid-template-columns: 76px 1fr;
	gap: 0.8rem;
	align-items: center;
}

.bk-aside .wp-block-post-featured-image {
	margin: 0;
}

.bk-aside .wp-block-post-featured-image img {
	width: 76px;
	height: 57px;
	object-fit: cover;
	border-radius: 8px;
	display: block;
}

/* A post without an image keeps the text aligned in one column. */
.bk-aside .wp-block-post-featured-image:empty {
	display: none;
}

.bk-aside .wp-block-post-title {
	font-size: 1.1rem;
	line-height: 1.35;
	margin: 0;
}

.bk-aside .wp-block-post-title a {
	text-decoration: none;
}

.bk-aside .wp-block-post-title a:hover,
.bk-aside .wp-block-post-title a:focus-visible {
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

.bk-aside .wp-block-post-date {
	font-size: 0.8rem;
	color: #5a6270;
	margin: 0.15rem 0 0;
}

.bk-aside .wp-block-search {
	margin-top: 1.4rem;
}

/* The rail travels with the reader on desktop only. */
@media (max-width: 781px) {
	.bk-aside {
		position: static;
	}
}

/* --- Lead bar gets more air ------------------------------------------------ */
.bk-leadbar {
	padding-block: var(--wp--preset--spacing--40);
}

.bk-leadbar__title {
	font-size: clamp(1.2rem, 2.2vw, 1.5rem);
}

/* Article titles are long; at the page-badge scale they became enormous
   (Ben, 2026-08-19: "בתוך עמוד המאמר הכותרת ענקית"). Posts get the original
   site's ~40px title scale; the short page titles keep the large badge. */
.bk-page-band .bk-band-title--post {
	font-size: clamp(1.7rem, 2.6vw, 2.5rem);
}

/* --- Scroll-reveal (assets/js/reveal.js) ----------------------------------
   The hidden state exists only under html.js AND only on elements the script
   has tagged — no JavaScript, no hiding. Reduced-motion users never get the
   class at all (the script exits first); the media query is belt-and-braces. */
.js .bk-reveal {
	opacity: 0;
	transform: translateY(26px);
	transition: opacity 0.7s ease, transform 0.7s ease;
}

.js .bk-reveal--in {
	opacity: 1;
	transform: none;
}

@media (prefers-reduced-motion: reduce) {
	.js .bk-reveal,
	.js .bk-reveal--in {
		opacity: 1;
		transform: none;
		transition: none;
	}
}