/* Header + menu (desktop and phone), search window, footer, page headers, crumbs, page numbers.
   Colours only from colors.css. */

/* ---- header: a light bar that stays on screen (hides while scrolling down, comes back up: effects.css) ---- */
.site-header { position: sticky; top: 0; z-index: 1000; }
.admin-bar .site-header { top: 32px; }
@media (max-width: 782px) { .admin-bar .site-header { top: 46px; } }
/* the frosted bar is drawn by a layer behind it: a backdrop-filter on the bar itself would make it the frame of the
   phone menu (position: fixed) and push that menu off the side of the page */
.main-navigation-container { position: relative; isolation: isolate; box-shadow: 0 1px 0 var(--sc-c-line); }
.main-navigation-container::before { content: ""; position: absolute; inset: 0; z-index: -1; background: color-mix(in srgb, var(--sc-c-bg) 92%, transparent); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.header-content-wrapper { display: flex; align-items: center; gap: 12px; max-width: calc(var(--sc-frame) + 32px); margin: 0 auto; padding: 10px 16px; min-height: 66px; }
/* the home icon, first on the right (instead of the site's name) */
/* the same look as "צור קשר": brown at rest, the lighter green with a white icon on hover (user, 2026-09-29) */
/* the home link: the logo's cactus (assets/img/site-mark.svg) in a round site button — the back-to-top arrow's size, the
   "צור קשר" button's colors and hover (assets/buttons.css). User, 2026-09-29. */
.site-header .site-home.sc-btn.sc-btn--round:not(#sc-btn) { width: 48px; height: 48px; }
.site-header .site-home.sc-btn.sc-btn--round:not(#sc-btn) svg { width: 30px; height: 30px; stroke: none; }
/* the pages right after the home icon; the icons + "צור קשר" at the far left */
.main-navigation { flex: 1; min-width: 0; }
@media (min-width: 901px) { .main-navigation .slide-menu { width: 100%; } }

/* ---- the menu (wide screens) ---- */
.menu-toggle, #primary-menu .sub-menu-toggle { display: none; } /* the phone's open / close buttons */
#primary-menu { display: flex; align-items: center; gap: 4px; margin: 0; padding: 0; list-style: none; }
#primary-menu > .search-icon { margin-inline-start: auto; }
#primary-menu li { position: relative; margin: 0; }
#primary-menu > li > a, #primary-menu > li > button { display: inline-flex; align-items: center; gap: 4px; padding: 8px 12px; border: 0; background: none; color: var(--sc-c-ink); font: 500 1rem var(--sc-font-body); text-decoration: none; cursor: pointer; }
#primary-menu > li > a:hover, #primary-menu > li.current-menu-item > a, #primary-menu > li.current-menu-ancestor > a { color: var(--sc-c-primary); }
#primary-menu > li.menu-item-has-children > a::after { content: ""; width: 7px; height: 7px; margin: -4px 4px 0 0; border: solid currentColor; border-width: 0 1.6px 1.6px 0; transform: rotate(45deg); opacity: .7; }
#primary-menu .sc-i { width: 21px; height: 21px; }
#primary-menu > .menu-icon > button { width: 42px; height: 42px; padding: 0; justify-content: center; border-radius: 50%; }
#primary-menu > .menu-icon > button:hover, #primary-menu > .menu-icon > button[aria-expanded="true"] { color: var(--sc-c-primary); background: color-mix(in srgb, var(--sc-c-soft) 55%, transparent); }
/* the dark-mode button shows what a click does: a moon in light mode, a sun in dark mode */
.dark-mode-widget .sc-i-sun, .dark-mode .dark-mode-widget .sc-i-moon { display: none; }
.dark-mode .dark-mode-widget .sc-i-sun { display: block; }
/* "צור קשר": the site's button (brown, lighter green on hover) */
#primary-menu > li.call-to-action { margin-inline-start: 10px; }
#primary-menu > li.call-to-action > a { padding: 10px 22px; border-radius: 999px; background: var(--sc-c-soft); color: var(--sc-c-ink); font-weight: 500; transition: background-color .3s ease, color .3s ease; }
#primary-menu > li.call-to-action > a:hover { background: var(--sc-c-accent); color: var(--sc-c-btntext); }

/* dropdowns: one floating panel, soft rounded highlight on hover (opens on hover / focus, effects.css animates it) */
#primary-menu .sub-menu {
	position: absolute; top: calc(100% + 6px); right: 0; z-index: 20; min-width: 220px; margin: 0; padding: 6px; list-style: none;
	border: 1px solid var(--sc-c-line); border-radius: 14px; background: var(--sc-c-card);
	box-shadow: 0 20px 44px -14px var(--sc-c-shadow);
}
#primary-menu .sub-menu::before { content: ""; position: absolute; inset: -10px 0 auto; height: 10px; } /* keeps the hover while moving down */
#primary-menu .sub-menu a { display: block; padding: 9px 14px; border-radius: 9px; color: var(--sc-c-text); font-size: .95rem; line-height: 1.4; text-decoration: none; transition: background-color .15s ease, color .15s ease; }
#primary-menu .sub-menu a:hover, #primary-menu .sub-menu a:focus-visible { background: var(--sc-c-panel); color: var(--sc-c-primary); outline: none; }
#primary-menu .sub-menu .current-menu-item > a { background: color-mix(in srgb, var(--sc-c-accent) 16%, var(--sc-c-panel)); font-weight: 500; }

/* ---- the menu on phones: a panel slides in from the side ---- */
@media (max-width: 900px) {
	.main-navigation { display: flex; justify-content: flex-end; }
	#primary-menu > .search-icon { margin-inline-start: 0; }
	.menu-toggle { display: grid; place-items: center; width: 46px; height: 46px; padding: 0; border: 0; border-radius: 50%; background: none; color: var(--sc-c-ink); cursor: pointer; position: relative; z-index: 1002; }
	.burger { position: relative; display: block; width: 24px; height: 16px; }
	.burger i { position: absolute; right: 0; left: 0; height: 2px; border-radius: 2px; background: currentColor; transition: transform .3s ease, opacity .2s ease, top .3s ease; }
	.burger i:nth-child(1) { top: 0; } .burger i:nth-child(2) { top: 7px; } .burger i:nth-child(3) { top: 14px; }
	.site-menu.toggled .burger i:nth-child(1) { top: 7px; transform: rotate(45deg); }
	.site-menu.toggled .burger i:nth-child(2) { opacity: 0; }
	.site-menu.toggled .burger i:nth-child(3) { top: 7px; transform: rotate(-45deg); }
	.slide-menu {
		position: fixed; inset: 0 0 0 auto; z-index: 1001; width: min(360px, 88vw); overflow-y: auto; padding: 84px 20px 32px;
		background: var(--sc-c-bg); box-shadow: -20px 0 60px var(--sc-c-shadow);
		transform: translateX(100%); visibility: hidden; transition: transform .35s cubic-bezier(.2, .8, .2, 1), visibility 0s .35s;
	}
	.site-menu.toggled .slide-menu { transform: none; visibility: visible; transition: transform .35s cubic-bezier(.2, .8, .2, 1); }
	body.modal-open { overflow: hidden; }
	body.modal-open::after { content: ""; position: fixed; inset: 0; z-index: 999; background: rgba(20, 28, 23, .35); }
	#primary-menu { flex-direction: column; align-items: stretch; gap: 0; }
	#primary-menu > li { border-bottom: 1px solid var(--sc-c-line); }
	#primary-menu > li > a { display: flex; padding: 14px 4px; font-size: 1.1rem; }
	#primary-menu > li.menu-item-has-children > a::after { display: none; }
	#primary-menu .sub-menu { position: static; display: none; min-width: 0; margin: 0 0 10px; padding: 0 8px; border: 0; background: none; box-shadow: none; }
	#primary-menu li.open > .sub-menu { display: block; }
	#primary-menu .sub-menu-toggle { position: absolute; top: 6px; left: 0; display: grid; place-items: center; width: 44px; height: 44px; border: 0; border-radius: 50%; background: none; color: var(--sc-c-ink); cursor: pointer; }
	.sub-menu-toggle .sc-i { transition: transform .25s ease; }
	li.open > .sub-menu-toggle .sc-i { transform: rotate(180deg); }
	/* the icons (search, dark mode) side by side, "צור קשר" as a full-width button at the end */
	#primary-menu > .menu-icon, #primary-menu > .sc-account:not(.is-in) { display: inline-flex; border: 0; }
	#primary-menu { flex-direction: row; flex-wrap: wrap; }
	#primary-menu > li:not(.menu-icon):not(.sc-account) { flex: 1 0 100%; }
	#primary-menu > li.call-to-action { margin: 18px 0 0; border: 0; }
	#primary-menu > li.call-to-action > a { justify-content: center; }
}

/* ---- the hover label of every icon button (data-tip): heart, share, account, search, dark mode, rotate ----
   one look everywhere (user, 2026-09-29: not the browser's own box); under the button, the site's dark ink */
:where([data-tip]) { position: relative; }
[data-tip]::after {
	content: attr(data-tip); position: absolute; top: calc(100% + 8px); left: 50%; z-index: 50; transform: translate(-50%, -4px);
	padding: 5px 11px; border-radius: 8px; background: var(--sc-c-ink); color: var(--sc-c-bg);
	font: 500 .8rem/1.3 var(--sc-font-body); white-space: nowrap; pointer-events: none; opacity: 0;
	transition: opacity .15s ease, transform .15s ease;
}
[data-tip]:hover::after, [data-tip]:focus-visible::after { opacity: 1; transform: translate(-50%, 0); transition-delay: .25s; }
@media (hover: none) { [data-tip]::after { display: none; } }

/* ---- search window (user, 2026-09-29, option ב of three): on computers the field opens inside the menu bar, in
   the links' place, with no layer over the page; on phones a strip under the bar, the page lightly dimmed. The plant
   names open under the field as you type (the plugin's plant-suggest). A click outside, ✕ or Esc closes it. ---- */
.sc-search-layer { position: fixed; inset: 66px 0 0; z-index: 100000; display: block; padding: 0; background: color-mix(in srgb, var(--sc-c-ink) 22%, transparent); }
.admin-bar .sc-search-layer { top: 98px; }
.sc-search-layer[hidden] { display: none; }
.sc-search-box { position: relative; width: 100%; padding: 16px; background: var(--sc-c-bg); animation: sc-search-in .2s ease; }
@keyframes sc-search-in { from { opacity: 0; transform: translateY(-6px); } }
.sc-search-close { position: absolute; top: 50%; left: 24px; display: grid; place-items: center; width: 40px; height: 40px; border: 0; border-radius: 50%; background: none; color: var(--sc-c-muted); transform: translateY(-50%); cursor: pointer; }
.sc-search-close:hover { background: var(--sc-c-panel); color: var(--sc-c-ink); }
.sc-search-layer .search-form .search-field { height: 50px; padding-left: 56px; border: 1px solid var(--sc-c-line); background: var(--sc-c-card); box-shadow: none; font-size: 1.05rem; }
@media (min-width: 901px) {
	.sc-search-layer { inset: 0 0 auto; height: 66px; background: none; pointer-events: none; }
	.admin-bar .sc-search-layer { top: 32px; }
	.sc-search-box { position: absolute; top: 10px; right: calc(max(16px, (100% - var(--sc-frame)) / 2) + 72px); left: calc(max(16px, (100% - var(--sc-frame)) / 2) + 16px); width: auto; padding: 0; background: none; pointer-events: auto; }
	.sc-search-close { left: 6px; }
	.sc-search-layer .search-form .search-field { box-sizing: border-box; height: 46px; }
	body.sc-searching #primary-menu { opacity: 0; pointer-events: none; transition: opacity .15s ease; }
}
.search-form { position: relative; }
.search-form .sc-i { position: absolute; top: 50%; right: 20px; transform: translateY(-50%); color: var(--sc-c-muted); pointer-events: none; }
.search-form .search-field { height: 58px; padding: 0 54px 0 22px; border-radius: 999px; font-size: 1.1rem; box-shadow: 0 10px 30px var(--sc-c-shadow); }

/* ---- page frame ---- */
/* the footer always at the bottom of the screen, also on short pages (user, 2026-09-29) */
#page { display: flex; flex-direction: column; min-height: 100vh; min-height: 100dvh; }
.admin-bar #page { min-height: calc(100dvh - 32px); }
#page > .site-footer { margin-top: auto; }
.site-main { display: block; min-height: 50vh; }
.sc-wrap { width: min(var(--sc-wide), 100% - 32px); margin: 40px auto 96px; }
.sc-wrap.is-read { width: min(var(--sc-read), 100% - 32px); }
.sc-wrap.is-frame { width: min(var(--sc-frame), 100% - 32px); }

/* the top of a page: crumbs, the big title on the right, a line under it */
.page-header { margin: 0 0 36px; }
.page-header .page-title { margin: 0; }
.page-lead { max-width: 720px; margin: 12px 0 0; color: var(--sc-c-muted); font-size: 1.15rem; line-height: 1.7; text-wrap: pretty; } /* no lone last word */
.breadcrumbs { margin: 0 0 12px; color: var(--sc-c-muted); font-size: .92rem; }
.breadcrumbs a { color: inherit; text-decoration: none; }
.breadcrumbs a:hover { color: var(--sc-c-primary); text-decoration: underline; }
.breadcrumbs .sep { margin: 0 4px; opacity: .6; }

/* page numbers under lists: round, like the chips; next points left (RTL) */
.navigation.pagination .nav-links { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 8px; margin-top: 3rem; }
.navigation.pagination .page-numbers { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; height: 44px; padding: 0 14px; border-radius: 999px; background: var(--sc-c-panel); color: var(--sc-c-ink); font-weight: 500; line-height: 1; text-decoration: none; box-shadow: inset 0 0 0 1px var(--sc-c-line); transition: background-color .25s ease, color .25s ease; }
.navigation.pagination a.page-numbers:hover, .navigation.pagination .page-numbers.current { background: var(--sc-c-btn); color: var(--sc-c-btntext); box-shadow: none; }
.navigation.pagination .page-numbers.dots { background: none; box-shadow: none; min-width: 0; padding: 0 2px; }

/* ---- footer "B · three columns" (user, 2026-09-29, chosen over a centred one and a band with an invitation): the
   site's icon + name + one line; then a column per group of links (members get a 4th, "החשבון שלי", from the plugin);
   the © under the site's line. Compact (user: "too high"). Phones: the site on top, the groups in two columns. ---- */
.site-footer { margin-top: 0; background: var(--sc-c-foot); color: var(--sc-c-text); font-size: .95rem; transition: background-color .45s ease; }
.footer-content { display: grid; grid-template-columns: minmax(240px, 1fr) auto; gap: 28px 64px; max-width: calc(var(--sc-frame) + 32px); margin: 0 auto; padding: 26px 16px 22px; }
.footer-home { display: inline-flex; align-items: center; gap: 10px; color: var(--sc-c-ink); font-family: var(--sc-font-head, inherit); font-size: 1.3rem; font-weight: 700; text-decoration: none; }
.footer-icon { width: 34px; height: 34px; flex: none; border-radius: 10px; }
.footer-about p { max-width: 300px; margin: 6px 0 0; color: var(--sc-c-muted); line-height: 1.55; }
.footer-groups { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(130px, max-content); gap: 24px 88px; } /* the columns stay together at the far side, not spread over the width */
.footer-links h2 { margin: 0 0 6px; color: var(--sc-c-primary); font-family: inherit; font-size: .82rem; font-weight: 600; letter-spacing: .02em; }
.footer-links ul { margin: 0; padding: 0; }
.footer-links li { list-style: none; margin: 0 0 3px; }
.site-footer a:not(.footer-home) { color: var(--sc-c-text); text-decoration: none; transition: color .25s ease; }
.site-footer a:not(.footer-home):hover { color: var(--sc-c-primary); text-decoration: underline; }
.footer-about p.footer-copy { margin-top: 10px; font-size: .78rem; } /* © under the site's line (user, 2026-09-29) */
@media (max-width: 760px) {
	.footer-content { grid-template-columns: 1fr; gap: 18px; padding-top: 22px; }
	.footer-groups { grid-auto-flow: row; grid-template-columns: 1fr 1fr; }
}