/*
Theme Name: זמנים — Zmanim
Theme URI: https://jonnystudio.co.il/
Author: Jonny Studio
Author URI: https://jonnystudio.co.il/
Description: תבנית האתר "זמנים" — זמני היום וזמני שבת. RTL מלא, מצב כהה כברירת מחדל, מערכת עיצוב 1:1 מבריף ה-Claude Design. כל הנתונים מחושבים ע"י תוסף Zmanim Core.
Version: 0.1.0
Requires at least: 6.4
Requires PHP: 8.1
Text Domain: zmanim
Tags: rtl-language-support, full-site-editing, custom-colors
*/

/* ============================================================
   Design tokens — dark is default; [data-theme="light"] overrides.
   Inline var(--x, fallback) in templates uses the dark hex as the
   fallback, so the dark theme renders identically even pre-CSS.
   ============================================================ */
:root {
	--bg: #0F1222;
	--bg2: #090B16;
	--card: #1A1E33;
	--card2: #232846;
	--line: rgba(255, 255, 255, .09);
	--line2: rgba(255, 255, 255, .05);
	--text: #F5F6FA;
	--muted: #9aa0c4;
	--faint: #8086ad; /* WCAG AA on dark cards for small text */
	--gold: #E8B84B;
	--goldsoft: rgba(232, 184, 75, .14);
	--teal: #5FB3D9;
	--tealsoft: rgba(95, 179, 217, .14);
	--green: #4ADE80;
	--greensoft: rgba(74, 222, 128, .15);
	--skyTop: #10132a;
	--skyBot: #1b1f3d;

	/* Google Sans leads for Latin/numerals; Heebo & Assistant supply Hebrew glyphs
	   (Google Sans has none), chosen automatically per-glyph by the browser. */
	--font-display: "Google Sans", "Heebo", system-ui, -apple-system, sans-serif;
	--font-body: "Google Sans", "Assistant", "Heebo", system-ui, sans-serif;
	--font-mono: "Google Sans Code", "IBM Plex Mono", ui-monospace, "SFMono-Regular", monospace;

	color-scheme: dark;
}

[data-theme="light"] {
	--bg: #F5F2EB;
	--bg2: #ECE7DB;
	--card: #FFFFFF;
	--card2: #F6F2EA;
	--line: rgba(20, 24, 42, .10);
	--line2: rgba(20, 24, 42, .05);
	--text: #171A2C;
	--muted: #5c6178;
	--faint: #6a6f88; /* WCAG AA on light bg/cards for small text */
	--gold: #B07F1A;
	--goldsoft: rgba(176, 127, 26, .12);
	--teal: #2A7AA0;
	--tealsoft: rgba(42, 122, 160, .12);
	--green: #1C8F4F;
	--greensoft: rgba(28, 143, 79, .13);
	--skyTop: #dfe7f2;
	--skyBot: #f3ede2;

	color-scheme: light;
}

/* ============================================================
   Base
   ============================================================ */
* { box-sizing: border-box; }

html, body { margin: 0; }

body {
	background: var(--bg);
	color: var(--text);
	font-family: var(--font-body);
	min-height: 100vh;
	position: relative;
	/* `clip` (not `hidden`) locks horizontal scroll WITHOUT making body a scroll
	   container — otherwise overflow-y computes to `auto` and breaks the sticky header. */
	overflow-x: clip;
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
	transition: background-color .35s ease, color .35s ease;
}

/* Visible keyboard focus on the dark theme (mouse clicks are unaffected). */
:focus-visible { outline: 2px solid var(--gold, #E8B84B); outline-offset: 2px; border-radius: 5px; }

a { -webkit-tap-highlight-color: transparent; }

h1, h2, h3, h4 { font-family: var(--font-display); }

img { max-width: 100%; height: auto; }

/* Tabular numerals everywhere a time/clock is shown, so it never jitters. */
.z-mono,
[data-zmanim-clock],
[data-zmanim-countdown] {
	font-family: var(--font-mono);
	font-variant-numeric: tabular-nums;
}

/* ============================================================
   Ambient sky background + moving sun-glow (Home/countdown pages)
   ============================================================ */
.z-sky {
	position: fixed;
	inset: 0;
	z-index: 0;
	pointer-events: none;
	background: linear-gradient(180deg, var(--skyTop), var(--bg) 55%);
	transition: background .35s ease;
}

.z-glow {
	position: fixed;
	top: -220px;
	left: 50%;
	z-index: 0;
	width: 680px;
	height: 680px;
	border-radius: 50%;
	pointer-events: none;
	background: radial-gradient(circle, var(--skyGlow, var(--goldsoft)), transparent 66%);
	filter: blur(10px);
	transition: left 1s linear, background .6s ease;
}

.z-shell {
	position: relative;
	z-index: 2;
}

/* ============================================================
   Keyframes (zRise/zFade/zSpin/zFloat were unused in the design)
   ============================================================ */
@keyframes zPulse {
	0%, 100% { opacity: 1; transform: scale(1); }
	50% { opacity: .45; transform: scale(.82); }
}

@keyframes zGlow {
	0%, 100% { box-shadow: 0 0 0 0 transparent; }
	50% { box-shadow: 0 0 30px 3px var(--goldsoft); }
}

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

/* Accessible focus ring for keyboard users. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible {
	outline: 2px solid var(--gold);
	outline-offset: 2px;
}

/* Skip link */
.z-skip {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 100;
	background: var(--card);
	color: var(--text);
	padding: 10px 16px;
	border-radius: 0 0 10px 0;
}
.z-skip:focus { left: 0; }

/* Article prose — styles native (Gutenberg) post content rendered by the
   article template, matching the prototype's editorial design. */
.zmanim-prose > * { margin: 0 0 18px; }
.zmanim-prose h2 {
	font-family: var(--font-display);
	font-size: clamp(22px, 3vw, 27px);
	font-weight: 700;
	margin: 30px 0 12px;
	color: var(--gold);
}
.zmanim-prose h3 {
	font-family: var(--font-display);
	font-size: clamp(19px, 2.4vw, 22px);
	font-weight: 700;
	margin: 24px 0 10px;
}
.zmanim-prose p { text-wrap: pretty; }
.zmanim-prose a { color: var(--teal); text-underline-offset: 3px; }
.zmanim-prose ul,
.zmanim-prose ol { padding-inline-start: 1.4em; }
.zmanim-prose li { margin: 0 0 8px; }
.zmanim-prose blockquote {
	border-inline-start: 3px solid var(--gold);
	padding-inline-start: 16px;
	margin-inline: 0;
	color: var(--muted);
}
.zmanim-prose img { max-width: 100%; height: auto; border-radius: 14px; }
.zmanim-prose strong { color: var(--text); font-weight: 700; }

/* ============================================================
   Footer
   ============================================================ */
.z-footer {
	position: relative;
	background: var(--bg2) radial-gradient(120% 80% at 85% 0%, rgba(232, 184, 75, .05), transparent 60%);
	border-top: 1px solid var(--line);
}
.z-cta {
	background: linear-gradient(135deg, var(--card), var(--bg2));
	border: 1px solid var(--line);
	border-top: 2px solid var(--gold);
}
.z-foot-h {
	margin: 0 0 13px;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 1.4px;
	color: var(--gold);
	position: relative;
	padding-bottom: 8px;
}
.z-foot-h::after {
	content: "";
	position: absolute;
	bottom: 0;
	inset-inline-start: 0;
	width: 22px;
	height: 2px;
	background: var(--gold);
	border-radius: 2px;
	opacity: .55;
}
.z-foot-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; font-size: 13.5px; }
.z-foot-link { color: var(--muted); text-decoration: none; transition: color .2s; }
.z-soc { width: 36px; height: 36px; display: grid; place-items: center; border-radius: 10px; background: var(--card); text-decoration: none; font-size: 16px; transition: background .2s, transform .12s; }
.z-input { background: var(--bg2); color: var(--text); border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; font-family: var(--font-body); font-size: 14px; }
.z-input:focus-visible { outline: 2px solid var(--gold); outline-offset: 1px; }
.z-tab { border: 0; background: transparent; color: var(--muted); font-family: var(--font-body); font-weight: 600; font-size: 13px; padding: 6px 14px; border-radius: 9px; cursor: pointer; transition: background .2s, color .2s; }
.z-tab.is-on { background: var(--card); color: var(--text); }
.z-cta-btn { background: var(--gold); color: var(--bg); border: 0; border-radius: 11px; padding: 11px 20px; font-family: var(--font-body); font-weight: 700; font-size: 14px; cursor: pointer; text-decoration: none; display: inline-block; transition: transform .12s, filter .2s; }
.z-cta-ghost { background: transparent; color: var(--teal); border: 1px solid var(--teal); }

/* Hover only where a real pointer can hover (keeps touch clean). */
@media (hover: hover) {
	.z-foot-link:hover { color: var(--gold); }
	.z-soc:hover { background: var(--card2); }
	.z-cta-btn:hover { filter: brightness(1.06); }
	.z-cta-ghost:hover { background: var(--tealsoft); }
}
/* Press feedback on ALL devices, incl. touch (data-hover is hover-only). */
.z-cta-btn:active, .z-soc:active, .z-tab:active, #z-backtop:active,
button[data-zmanim-geo]:active, button[data-zmanim-toggle]:active, button[data-zmanim-install]:active { transform: scale(.95); }

@media (max-width: 720px) {
	.z-cta { grid-template-columns: 1fr; }
	.z-cta > div + div { border-inline-start: 0 !important; padding-inline-start: 0 !important; border-top: 1px solid var(--line); padding-top: 20px; margin-top: 4px; }
}

/* ── Mobile hamburger nav ─────────────────────────────────────
   Desktop: horizontal bar (.z-nav-desktop) shows, burger hidden.
   ≤720px: bar hidden, burger shows, menu hangs below the sticky header.
   NOTE: the bar has an inline `display:flex`, so the hide MUST be !important. */
.z-burger { display: none; }
.z-mobile-menu { display: none; }
@media (max-width: 720px) {
	header > nav.z-nav-desktop { display: none !important; }
	.z-burger { display: grid !important; }
	.z-logo-sub { display: none; }
	.z-mobile-menu {
		display: block;
		position: absolute;
		top: 100%;
		inset-inline: 0;
		background: color-mix(in srgb, var(--bg, #0F1222) 97%, transparent);
		backdrop-filter: blur(18px) saturate(150%);
		-webkit-backdrop-filter: blur(18px) saturate(150%);
		border-bottom: 1px solid var(--line, rgba(255, 255, 255, .09));
		box-shadow: 0 16px 40px rgba(0, 0, 0, .4);
		padding: 6px 16px 14px;
		max-height: 0;
		overflow: hidden;
		visibility: hidden;
		opacity: 0;
		transition: max-height .26s ease, opacity .26s ease, visibility .26s;
	}
	.z-mobile-menu.is-open {
		max-height: 80vh;
		overflow-y: auto;
		visibility: visible;
		opacity: 1;
	}
	.z-mobile-menu a {
		display: block;
		padding: 14px 6px;
		color: var(--text, #F5F6FA);
		text-decoration: none;
		font-size: 16.5px;
		font-weight: 600;
		border-bottom: 1px solid var(--line2, rgba(255, 255, 255, .05));
	}
	.z-mobile-menu a:last-child { border-bottom: 0; }
	.z-mobile-menu a[aria-current="page"] { color: var(--gold, #E8B84B); }
}

/* ============================================================
   Motion / dynamism
   ============================================================ */
@keyframes zSoft { 0%, 100% { opacity: 1; } 50% { opacity: .5; } }

/* Stars fade in after tzeit (driven by [data-night] on <html> from JS). */
.z-stars {
	position: fixed;
	inset: 0;
	z-index: 0;
	pointer-events: none;
	opacity: 0;
	transition: opacity 1.6s ease;
	background-image:
		radial-gradient(1.4px 1.4px at 20% 30%, #fff, transparent),
		radial-gradient(1.2px 1.2px at 75% 22%, #fff, transparent),
		radial-gradient(1.5px 1.5px at 46% 12%, #cdd6ff, transparent),
		radial-gradient(1.1px 1.1px at 88% 46%, #fff, transparent),
		radial-gradient(1.3px 1.3px at 12% 62%, #fff, transparent),
		radial-gradient(1.2px 1.2px at 62% 56%, #cdd6ff, transparent),
		radial-gradient(1.4px 1.4px at 34% 76%, #fff, transparent),
		radial-gradient(1px 1px at 92% 82%, #fff, transparent),
		radial-gradient(1.2px 1.2px at 54% 38%, #fff, transparent);
}
html[data-night] .z-stars { opacity: .55; }

/* The logo's gold dot breathes — a single calm "live" anchor. */
.z-logo-dot { animation: zPulse 4.5s ease-in-out infinite; }

/* "Next zman" imminent (<10 min): gold emphasis + gentle pulse. */
.z-imminent [data-cd-name], .z-imminent [data-cd-time], .z-imminent [data-cd-mobile] { color: var(--gold); }
.z-imminent [data-cd-time] { animation: zSoft 1.8s ease-in-out infinite; }

/* The live sun-dot glides between its per-second positions (was a hard jump). */
[data-sun-dot] { transition: cx .9s linear, cy .9s linear; }

/* Scroll-reveal — hidden ONLY when JS confirms motion is OK (safe for no-JS,
   reduced-motion and crawlers, which then see fully-rendered content). */
.z-reveal-ready [data-reveal] { opacity: 0; transform: translateY(14px); transition: opacity .55s ease, transform .55s ease; }
.z-reveal-ready [data-reveal].is-in { opacity: 1; transform: none; }

/* Searchable city select (accessible combobox). */
.z-combo { position: relative; }
.z-combo-native { position: absolute !important; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.z-combo-list {
	position: absolute;
	z-index: 40;
	top: calc(100% + 4px);
	inset-inline: 0;
	max-height: 264px;
	overflow-y: auto;
	margin: 0;
	padding: 5px;
	list-style: none;
	background: var(--card);
	border: 1px solid var(--line);
	border-radius: 12px;
	box-shadow: 0 16px 44px rgba(0, 0, 0, .45);
}
.z-combo-list li[role="option"] { padding: 9px 12px; border-radius: 8px; font-size: 14px; color: var(--text); cursor: pointer; }
.z-combo-list li[role="option"].is-active, .z-combo-list li[role="option"]:hover { background: var(--card2); color: var(--gold); }
.z-combo-empty { padding: 10px 12px; font-size: 13px; color: var(--muted); }

/* Cities index — lean cards via classes (was ~1MB of inline styles). */
.z-cities-search {
	width: 100%;
	background: var(--card);
	border: 1px solid var(--line);
	border-radius: 14px;
	padding: 15px 46px 15px 16px;
	color: var(--text);
	font-family: var(--font-body);
	font-size: 16px;
}
.z-cities-search:focus-visible { outline: 2px solid var(--gold); outline-offset: 1px; }
.z-region-nav { display: flex; flex-wrap: wrap; gap: 8px; margin: 16px 0 4px; }
.z-region-nav a {
	background: var(--card);
	border: 1px solid var(--line);
	border-radius: 999px;
	padding: 6px 13px;
	font-size: 13px;
	font-weight: 500;
	color: var(--muted);
	text-decoration: none;
	transition: color .2s, border-color .2s;
}
.z-cities-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.z-city-card {
	background: var(--card);
	border: 1px solid var(--line);
	border-radius: 12px;
	padding: 12px 14px;
	text-decoration: none;
	color: inherit;
	display: flex;
	flex-direction: column;
	gap: 3px;
	transition: transform .15s, border-color .15s;
}
.z-city-name { font-weight: 700; font-size: 15.5px; }
.z-city-sub { font-size: 11.5px; color: var(--faint); }
@media (hover: hover) {
	.z-region-nav a:hover { color: var(--gold); border-color: var(--gold); }
	.z-city-card:hover { transform: translateY(-2px); border-color: var(--gold); }
}
.z-city-card:active { transform: scale(.98); }
@media (max-width: 460px) { .z-cities-grid { grid-template-columns: 1fr 1fr; } }

html { scroll-behavior: smooth; }

/* Reduced-motion: keep STATE (night sky, gold emphasis, revealed content),
   drop MOTION (pulse, travel, smooth-scroll). Companions to the global block. */
@media (prefers-reduced-motion: reduce) {
	.z-logo-dot, .z-imminent [data-cd-time] { animation: none !important; }
	.z-reveal-ready [data-reveal] { opacity: 1 !important; transform: none !important; }
	html { scroll-behavior: auto !important; }
}