/* Yaniv.TV 2026 base layer. Tokens mirror the design handoff (README "Design tokens"); the Elementor kit repeats them as
   global colors/fonts. Everything is RTL-safe (logical properties only); the mobile breakpoint is 760px. */
:root {
	--y-bg: #FAF8F4;
	--y-surface: #F1EFEB;
	--y-card: #FFFFFF;
	--y-ink: #1F2330;
	--y-slate: #5D6273;
	--y-body2: #3E4457;
	--y-line: #E2DED7;
	--y-dark-line: #343947;
	--y-on-dark-muted: #A9AEBD;
	--y-signal: #F26A1F;
	--y-signal-text: #C2410C;
	--y-signal-on-dark: #FFA36C;
	--y-hero-grey: linear-gradient(135deg, #A2A6B1 0%, #B3B7C0 70%, #BABDC6 100%);
	--y-font-display: 'Rubik', 'IBM Plex Sans Hebrew', Arial, sans-serif;
	--y-font-body: 'IBM Plex Sans Hebrew', Arial, Helvetica, sans-serif;
	--y-font-mono: 'IBM Plex Mono', 'IBM Plex Sans Hebrew', Consolas, monospace;
	--y-radius-pill: 999px;
	--y-radius-card: 18px;
	--y-radius-hero: 24px;
	--y-radius-thumb: 12px;
	--y-radius-tag: 6px;
	--y-shadow-float: 0 10px 30px -14px rgba(31, 35, 48, .45);
	--y-shadow-player: 0 16px 40px -12px rgba(31, 35, 48, .5);
	--y-shadow-hero: 0 30px 60px -30px rgba(31, 35, 48, .45);
	--y-outline: 0 0 0 1.5px var(--y-ink);
	--y-container: 1280px;
	--y-pad-side: clamp(16px, 4vw, 40px);
	--y-section-y: 88px;
	--y-bp-mobile: 760px; /* informational: media queries cannot read custom properties */
}

/* ---------- Elements ---------- */
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
	margin: 0;
	background: var(--y-bg);
	color: var(--y-ink);
	font-family: var(--y-font-body);
	font-size: 17px;
	font-weight: 400;
	line-height: 1.75;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}
h1, h2, h3, h4, h5, h6 {
	font-family: var(--y-font-display);
	color: var(--y-ink);
	line-height: 1.05;
	margin: 0 0 .5em;
	overflow-wrap: anywhere;
}
h1, h2 { font-weight: 800; letter-spacing: -.03em; }
h3 { font-weight: 700; letter-spacing: -.01em; }
h4, h5, h6 { font-weight: 700; line-height: 1.25; }
h1 { font-size: clamp(42px, 6vw, 88px); }
h2 { font-size: clamp(34px, 4vw, 56px); }
h3 { font-size: clamp(19px, 2vw, 26px); }
h4 { font-size: 19px; }
p { margin: 0 0 1.2em; }
a { color: var(--y-signal-text); text-decoration: none; transition: color .15s ease; }
a:hover { color: var(--y-ink); }
:focus-visible { outline: 2px solid var(--y-signal); outline-offset: 2px; }
::selection { background: var(--y-signal); color: var(--y-ink); }
img, video { max-width: 100%; height: auto; }
button, input, select, textarea { font: inherit; color: inherit; }
hr { border: 0; border-top: 1px solid var(--y-line); margin: 32px 0; }
blockquote { margin: 0 0 1.2em; padding-inline-start: 20px; border-inline-start: 3px solid var(--y-signal); font-family: var(--y-font-display); font-weight: 700; font-size: 26px; line-height: 1.3; }
table { border-collapse: collapse; width: 100%; }
th, td { text-align: start; padding: 10px 12px; border-bottom: 1px solid var(--y-line); }

/* Long-form text: readable measure, underlined links. */
.y-prose { max-width: 720px; color: var(--y-body2); }
.y-prose h2, .y-prose h3 { color: var(--y-ink); margin-top: 1.4em; }
.y-prose a { text-decoration: underline; text-underline-offset: 3px; }
.y-prose ul, .y-prose ol { padding-inline-start: 1.3em; margin: 0 0 1.2em; }
.y-prose img { border-radius: var(--y-radius-card); }

/* ---------- Layout ---------- */
.y-container { width: 100%; max-width: var(--y-container); margin-inline: auto; padding-inline: var(--y-pad-side); box-sizing: border-box; }
.y-section { padding-block: var(--y-section-y); }
.y-rule { border-top: 1.5px solid var(--y-ink); }
.y-dark { background: var(--y-ink); color: var(--y-bg); }
.y-dark h1, .y-dark h2, .y-dark h3, .y-dark h4 { color: var(--y-bg); }
.y-dark a { color: var(--y-signal-on-dark); }
.y-dark a:hover { color: var(--y-bg); }
.y-dark .y-eyebrow, .y-dark .y-mono { color: var(--y-on-dark-muted); }
.y-dark .y-tag { color: var(--y-signal-on-dark); }
.y-dark hr, .y-dark .y-row { border-color: var(--y-dark-line); }
.y-dark :focus-visible { outline-color: var(--y-signal-on-dark); }

/* ---------- Buttons ---------- */
.y-btn {
	display: inline-flex; align-items: center; justify-content: center; gap: 10px;
	min-height: 44px; padding: 16px 28px; border-radius: var(--y-radius-pill); border: 1.5px solid transparent;
	font-family: var(--y-font-body); font-size: 16px; font-weight: 700; line-height: 1; white-space: nowrap;
	text-decoration: none; cursor: pointer; box-sizing: border-box;
	transition: background-color .15s ease, color .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.y-btn svg { width: 20px; height: 20px; flex: 0 0 auto; }
/* Primary: signal with INK text (white on this orange fails contrast). */
.y-btn--primary { background: var(--y-signal); border-color: var(--y-signal); color: var(--y-ink); }
.y-btn--primary:hover, .y-btn--primary:focus-visible { background: #E35E15; border-color: #E35E15; color: var(--y-ink); }
.y-btn--outline { background: transparent; border-color: var(--y-ink); color: var(--y-ink); }
.y-btn--outline:hover, .y-btn--outline:focus-visible { background: var(--y-ink); color: var(--y-bg); }
.y-btn--ink { background: var(--y-ink); border-color: var(--y-ink); color: var(--y-bg); }
.y-btn--ink:hover, .y-btn--ink:focus-visible { background: var(--y-dark-line); border-color: var(--y-dark-line); color: var(--y-bg); }
.y-dark .y-btn--outline { border-color: var(--y-bg); color: var(--y-bg); }
.y-dark .y-btn--outline:hover, .y-dark .y-btn--outline:focus-visible { background: var(--y-bg); color: var(--y-ink); }
.y-dark .y-btn--ink { background: var(--y-bg); border-color: var(--y-bg); color: var(--y-ink); }

/* ---------- Labels ---------- */
.y-eyebrow { font-family: var(--y-font-mono); font-size: 13px; font-weight: 500; letter-spacing: .2em; line-height: 1.5; color: var(--y-slate); }
.y-mono { font-family: var(--y-font-mono); font-size: 12px; font-weight: 500; letter-spacing: .14em; line-height: 1.5; }
.y-tag { display: inline-block; font-family: var(--y-font-mono); font-size: 12px; font-weight: 500; letter-spacing: .12em; line-height: 1.5; color: var(--y-signal-text); }

/* ---------- Cards and rows ---------- */
.y-card { display: block; background: var(--y-card); color: var(--y-ink); border-radius: var(--y-radius-card); overflow: hidden; transition: box-shadow .15s ease; }
.y-card:hover, .y-card:focus-within { box-shadow: var(--y-outline); color: var(--y-ink); }
.y-row { display: flex; align-items: center; gap: 24px; padding: 28px 8px; border-bottom: 1px solid var(--y-line); color: var(--y-ink); transition: background-color .15s ease; }
.y-row:hover, .y-row:focus-within { background: var(--y-surface); color: var(--y-ink); }

/* ---------- Helpers ---------- */
.y-sr-only, .screen-reader-text {
	position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden;
	clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}
.y-hide-desktop { display: none !important; }

/* Hello Elementor's page wrapper adds width limits; the Elementor templates handle layout. */
.site-main, .page-content { max-width: none; padding: 0; }

@media (max-width: 760px) {
	:root { --y-section-y: 48px; }
	body { font-size: 17px; }
	blockquote { font-size: 21px; }
	.y-row { gap: 16px; padding: 24px 4px; }
	.y-hide-mobile { display: none !important; }
	.y-hide-desktop { display: revert !important; }
}

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	*, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}