/*
Theme Name: bituch
Theme URI: https://bituch.co.il
Author: bituch
Description: תבנית בלוקים ל-bituch.co.il, בעברית ומימין לשמאל. בנויה מקנבס העיצוב המאושר, מבלוקי ליבה ו-theme.json, בלי בונה עמודים.
Version: 1.2.3
Requires at least: 6.6
Tested up to: 6.6
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: bituch
*/

/* The tokens (colours, font, sizes, spacing, radii) live in theme.json.
   This file holds only what core blocks and theme.json can't express. */

/* Metric-matched fallback while Plex loads (hero-sketch), cuts layout shift. */
@font-face {
	font-family: "bituch-fallback";
	src: local("Arial");
	ascent-override: 102.5%;
	descent-override: 27.5%;
	line-gap-override: 0%;
}

strong,
b {
	font-weight: 700;
}

/* ---------- Accessibility: visible focus, 44px targets ---------- */

:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
	outline: 2px solid var(--wp--preset--color--ink);
	outline-offset: 3px;
}

.wp-block-navigation .wp-block-navigation-item__content,
.wp-block-navigation__responsive-container-open,
.wp-block-navigation__responsive-container-close {
	min-height: 44px;
	min-width: 44px;
	display: flex;
	align-items: center;
}

/* ---------- Header ---------- */

.bituch-header {
	min-height: 64px;
}

/* 40px logo (32px on mobile) inside a 44px target. */
.bituch-logo {
	display: inline-flex;
	direction: ltr;
	padding: 2px;
	margin: -2px;
	border-radius: 6px;
}

.bituch-logo svg {
	display: block;
	width: 40px;
	height: 40px;
}

.wp-block-navigation .wp-block-navigation-item__content:hover {
	text-decoration-thickness: 3px;
	text-underline-offset: 7px;
}

.wp-block-navigation .current-menu-item > .wp-block-navigation-item__content,
.wp-block-navigation .current-menu-ancestor > .wp-block-navigation-item__content {
	color: var(--wp--preset--color--ink);
	font-weight: 700;
}

/* The "ביטוחים" dropdown: a surface card, no shadow. */
.wp-block-navigation:not(.has-background) .wp-block-navigation__submenu-container {
	border: 1px solid var(--wp--preset--color--rule);
	border-radius: var(--wp--custom--radius--card);
	padding: 8px;
	min-width: 240px;
}

.wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	padding: 0 12px;
	border-radius: 10px;
}

/* The drawer (core overlay) opens below 900px, not core's 600px. */
@media (min-width: 600px) and (max-width: 899.98px) {
	.wp-block-navigation__responsive-container-open:not(.always-shown) {
		display: flex;
	}

	.wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) {
		display: none;
	}
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
	font-size: var(--wp--preset--font-size--base);
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .wp-block-navigation__container {
	gap: 4px;
}

@media (max-width: 699px) {
	.bituch-header {
		min-height: 56px;
	}

	.bituch-logo {
		padding: 6px;
		margin: -6px;
	}

	.bituch-logo svg {
		width: 32px;
		height: 32px;
	}
}

/* ---------- Headings: the marker band under one phrase ---------- */

.bituch-marker {
	position: relative;
	z-index: 0;
	display: inline-block;
	padding-inline: 0.05em;
	background: none;
	color: inherit;
}

.bituch-marker::after {
	content: "";
	position: absolute;
	z-index: -1;
	inset-inline: -0.03em;
	bottom: 0.05em;
	height: 0.36em;
	background: var(--wp--preset--color--marker);
	border-radius: 0.1em 0.24em 0.14em 0.3em / 0.3em 0.18em 0.3em 0.16em;
	transform: rotate(-0.7deg);
}

.bituch-kicker {
	font-variant-numeric: tabular-nums;
}

/* ---------- Home hero: the frame for the living street ---------- */

/* The hero fills the first screen under the header; the street is cut at its bottom and invites scrolling.
   The street itself (sky, buildings, its life, and the junction at its centre where the scroll line starts) is
   inline SVG that functions.php adds on the front page, styled and animated by assets/css/motion.css. The bottom
   padding keeps the street's place for any page that shows the hero without it. */
.bituch-hero {
	box-sizing: border-box;
	min-height: min(calc(100vh - 64px), 900px);
	min-height: min(calc(100svh - 64px), 900px);
	padding-top: clamp(18px, 10.57px + 1.905vw, 38px);
	padding-bottom: 397px;
}

.bituch-hero p {
	max-width: 32em;
	text-wrap: balance;
}

@media (max-width: 699px) {
	.bituch-hero {
		min-height: min(calc(100vh - 56px), 900px);
		min-height: min(calc(100svh - 56px), 900px);
		padding-bottom: 337px;
	}

	.bituch-hero h1 {
		line-height: 1.1 !important;
	}

	/* Chips: one row that scrolls sideways, with snap. */
	.bituch-hero .bituch-chips {
		align-self: stretch;
		min-width: 0;
		flex-wrap: nowrap !important;
		justify-content: flex-start !important;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		scroll-padding-inline: var(--wp--preset--spacing--gutter);
		margin-inline: calc(var(--wp--preset--spacing--gutter) * -1) !important;
		padding: 6px var(--wp--preset--spacing--gutter) 8px;
		scrollbar-width: none;
	}

	.bituch-hero .bituch-chips > .wp-block-button {
		flex: none;
		scroll-snap-align: start;
	}
}

/* Buttons 46px, chips 44px (DS button-h, chip-h), whatever the border rounding. */
.wp-block-button__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 46px;
}

.bituch-chips .wp-block-button__link {
	min-height: 44px;
	padding: 0 20px;
	white-space: nowrap;
}

/* ---------- Forward arrow (points left in RTL) ---------- */

.bituch-go .wp-block-button__link {
	gap: 8px;
}

.bituch-go .wp-block-button__link::after,
.bituch-card::after,
.bituch-source-list li::before {
	content: "";
	flex: none;
	width: 16px;
	height: 16px;
	background: currentColor;
	-webkit-mask: var(--bituch-icon) center / contain no-repeat;
	mask: var(--bituch-icon) center / contain no-repeat;
	--bituch-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M13 8H3M7.5 3.5L3 8l4.5 4.5'/%3E%3C/svg%3E");
}

/* ---------- 01 · Steps ---------- */

.bituch-steps {
	list-style: none;
	padding: 0;
	counter-reset: step;
	display: grid;
	gap: 12px;
}

.bituch-steps li {
	counter-increment: step;
	display: flex;
	align-items: center;
	gap: 14px;
	margin: 0;
	padding: 16px 18px;
	border: 1px solid var(--wp--preset--color--rule);
	border-radius: var(--wp--custom--radius--card);
	background: var(--wp--preset--color--surface);
	font-size: var(--wp--preset--font-size--card);
	line-height: 1.45;
}

.bituch-steps li::before {
	content: counter(step);
	flex: none;
	width: 34px;
	height: 34px;
	display: grid;
	place-items: center;
	border-radius: var(--wp--custom--radius--pill);
	background: var(--wp--preset--color--lilac);
	font-weight: 700;
}

/* ---------- 02 · Card groups and entry cards ---------- */

.bituch-dot {
	display: flex;
	align-items: center;
	gap: 10px;
}

.bituch-dot::before {
	content: "";
	flex: none;
	width: 10px;
	height: 10px;
	box-sizing: border-box;
	border-radius: 999px;
	background: var(--wp--preset--color--brand);
}

.bituch-dot.is-junction::before {
	background: var(--wp--preset--color--marker);
	border: 1.5px solid #57516A;
}

/* The whole card is one link: the title link stretches over it. */
.bituch-card {
	position: relative;
}

.bituch-card > :first-child {
	padding-inline-end: 32px;
}

.bituch-card a {
	color: inherit;
	text-decoration: none;
}

.bituch-card a::before {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
}

.bituch-card::after {
	position: absolute;
	top: 19px;
	inset-inline-end: 18px;
	width: 20px;
	height: 20px;
	color: var(--wp--preset--color--brand);
	--bituch-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19 12H5M11 6l-6 6 6 6'/%3E%3C/svg%3E");
}

.bituch-card:hover {
	border-color: var(--wp--preset--color--ink-soft) !important;
	background-color: var(--wp--preset--color--soft) !important;
}

.bituch-card a:focus-visible {
	outline: none;
}

/* ---------- Featured images (1.2.1) ---------- */

/* Under the H1 of a post or a page: the width of the content column, framed and rounded like a card. The aspect
   ratio (and the img's width and height) hold the box before the file arrives: no layout shift. */
.bituch-lead-image img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 1200 / 630;
	object-fit: cover;
	border: 1px solid var(--wp--preset--color--rule);
	border-radius: var(--wp--custom--radius--card);
	background: var(--wp--preset--color--canvas);
}

/* On a card in a list: the card's full width at its top, inside its rounded corners. The explicit width matters: with
   stretch alone, the image's 100% has nothing definite to resolve against until the file arrives, and the card jumps. */
.bituch-card > .bituch-card-image {
	align-self: stretch;
	width: calc(100% + 36px);
	max-width: none;
	margin: -16px -18px 8px;
	padding: 0;
	overflow: hidden;
	border-radius: 15px 15px 0 0;
}

.bituch-card > .bituch-card-image img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 1200 / 630;
	object-fit: cover;
	border-bottom: 1px solid var(--wp--preset--color--rule);
	background: var(--wp--preset--color--canvas);
}

/* The title keeps clear of the arrow, and the arrow moves down next to it: the image's height is the card's
   width (100cqw is the content box, plus 36px of padding) at 630/1200; then 12px of gaps and the 3px of 1.2.0. */
.bituch-card:has(> .bituch-card-image) {
	container-type: inline-size;
}

.bituch-card:has(> .bituch-card-image) > .wp-block-post-title {
	padding-inline-end: 32px;
}

.bituch-card:has(> .bituch-card-image)::after {
	top: calc((100cqw + 36px) * 0.525 + 15px);
}

.bituch-card:has(a:focus-visible) {
	outline: 2px solid var(--wp--preset--color--ink);
	outline-offset: 3px;
}

/* ---------- Front page: "מדריכים אחרונים" (1.2.2) ---------- */

/* The six newest posts, in the card of the lists (image on top, title, the arrow). Two columns in the 596px column; one
   height per row, so the cards line up. */
.bituch-guides .wp-block-post-template > li > .bituch-card {
	box-sizing: border-box;
	height: 100%;
}

/* Below 600px: one row that scrolls sideways with snap, like the hero's chips, instead of six cards stacked (about
   1,500px of scrolling). A card is 78% of the column, so the next one peeks in. The 6px of padding (and the margin
   that cancels it) keep the focus ring of a card inside the scroller, which would clip it. */
@media (max-width: 599.98px) {
	.bituch-guides .wp-block-post-template.is-layout-grid {
		grid-template-columns: none;
		grid-auto-flow: column;
		grid-auto-columns: 78%;
		overflow-x: auto;
		overscroll-behavior-x: contain;
		scroll-snap-type: x mandatory;
		scroll-padding-inline: 6px;
		margin-inline: -6px;
		padding: 6px;
		scrollbar-width: none;
	}

	.bituch-guides .wp-block-post-template.is-layout-grid::-webkit-scrollbar {
		display: none;
	}

	.bituch-guides .wp-block-post-template > li {
		scroll-snap-align: start;
	}
}

/* ---------- FAQ: core/details, open by default ---------- */

.bituch-faq summary {
	font-size: 20px;
	font-weight: 700;
	line-height: 1.35;
	cursor: pointer;
	padding-block: 10px;
}

.bituch-faq summary + * {
	margin-block-start: 0;
}

/* ---------- Keren: always labelled "דמות AI" ---------- */

.bituch-keren {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	margin: 0;
}

/* 4:5 box (the SVG is 820x1025). Small by default, big on the home page. The illustration is inlined by the
   pattern (patterns/keren-seat.php); `img` stays for pages that still hold the 1.0 markup. */
.bituch-keren svg,
.bituch-keren img {
	display: block;
	width: 176px;
	height: auto;
	max-width: 100%;
	aspect-ratio: 4 / 5;
}

.bituch-home-keren .bituch-keren svg,
.bituch-home-keren .bituch-keren img {
	width: 304px;
}

/* Keren moves: pure CSS on the inline SVG's rig groups. The origins are the rig's own (the SVG's --kr-upper-origin
   and --kr-head-origin: the hip and the neck, in its 820x1025 units). A blink every 4-7 s on an irregular 22 s cycle,
   breathing on the upper body, a small head tilt every 12.5 s. */
.bituch-keren #upper {
	transform-origin: 292px 641px;
	animation: bituch-keren-breathe 4.8s ease-in-out infinite;
}

.bituch-keren #head {
	transform-origin: 294px 258px;
	animation: bituch-keren-head 12.5s ease-in-out infinite;
}

.bituch-keren #eyes-open {
	transform-box: fill-box;
	transform-origin: 50% 65%;
	animation: bituch-keren-blink 22s linear infinite;
}

@keyframes bituch-keren-breathe {
	0%,
	100% {
		transform: translateY(0) scaleY(1);
	}

	50% {
		transform: translateY(-3px) scaleY(1.006);
	}
}

@keyframes bituch-keren-head {
	0%,
	76%,
	100% {
		transform: rotate(0deg);
	}

	82%,
	90% {
		transform: rotate(-2.4deg);
	}
}

/* Blinks at 0 s, 5.1 s, 9.6 s and 16.3 s of the 22 s cycle (gaps of 5.1, 4.5, 6.7 and 5.7 s); each one ~160 ms. */
@keyframes bituch-keren-blink {
	0%,
	0.75%,
	23.2%,
	23.95%,
	43.6%,
	44.35%,
	74.1%,
	74.85%,
	100% {
		transform: scaleY(1);
	}

	0.3%,
	23.5%,
	43.9%,
	74.4% {
		transform: scaleY(0.06);
	}
}

@media (prefers-reduced-motion: reduce) {
	.bituch-keren #upper,
	.bituch-keren #head,
	.bituch-keren #eyes-open {
		animation: none;
	}
}

/* The accessibility toolbar's "עצירת אנימציות" (bituch-site): Keren is still, like reduced motion. */
html.bituch-a11y-no-motion .bituch-keren #upper,
html.bituch-a11y-no-motion .bituch-keren #head,
html.bituch-a11y-no-motion .bituch-keren #eyes-open {
	animation: none;
}

.bituch-keren figcaption {
	margin: 0;
	padding: 1px 10px;
	border-radius: var(--wp--custom--radius--pill);
	background: var(--wp--preset--color--ink);
	color: var(--wp--preset--color--canvas);
	font-size: 13px;
	font-weight: 700;
	line-height: 1.55;
	white-space: nowrap;
}

/* ---------- Sources ---------- */

.bituch-source-list {
	list-style: none;
	padding: 0;
	display: grid;
	gap: 10px;
}

.bituch-source-list li {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	margin: 0;
}

.bituch-source-list li::before {
	width: 18px;
	height: 18px;
	margin-top: 2px;
	color: var(--wp--preset--color--brand);
	--bituch-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 3h7l5 5v13H7z'/%3E%3Cpath d='M14 3v5h5M10 13h6M10 17h6'/%3E%3C/svg%3E");
}

/* ---------- "עודכן": core prints the modified date only after an edit, so the publish date stands in until then ---------- */

.bituch-updated:has(.wp-block-post-date__modified-date) .wp-block-post-date:not(.wp-block-post-date__modified-date) {
	display: none;
}

/* ---------- Author box ---------- */

.bituch-author svg {
	display: block;
	width: 40px;
	height: 40px;
}

/* ---------- Article text: 34em measure ---------- */

:root .wp-block-post-content > :where(p, ul, ol) {
	max-width: 34em;
}

/* ---------- Footer ---------- */

.bituch-links {
	list-style: none;
	padding: 0;
	display: grid;
	gap: 6px;
}

.bituch-links li {
	margin: 0;
}

.bituch-links a {
	color: var(--wp--preset--color--ink-soft);
	text-decoration: none;
}

.bituch-links a:hover {
	color: var(--wp--preset--color--brand-deep);
	text-decoration: underline;
}

/* Touch screens get 44px targets in the dense lists. */
@media (any-pointer: coarse) {
	.bituch-links {
		gap: 0;
	}

	.bituch-links a,
	.bituch-footer-contact a {
		display: inline-flex;
		align-items: center;
		min-height: 44px;
	}
}