/*
 * Site header, mobile menu and footer.
 * Source: design-reference/source/Header.dc.html and Footer.dc.html.
 * Tokens only (tokens.css); logical properties only, so Hebrew mirrors.
 */

/* ============ Header ============ */

/* The header is fixed, so push the page down by its height.
   On short pages the main area stretches, keeping the footer at the bottom. */
body {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
	padding-block-start: var(--header-h);
}

body > main {
	flex: 1 0 auto;
}

.site-header {
	position: fixed;
	inset-block-start: 0;
	inset-inline: 0;
	z-index: 100;
	display: flex;
	align-items: center;
	justify-content: space-between;
	height: var(--header-h);
	padding-inline: var(--page-pad-x);
	background: var(--c-white);
	border-block-end: 1px solid var(--c-line);
	transition: background var(--dur), border-color var(--dur);
}

.home .site-header,
.home .mobile-menu {
	background: var(--c-cream);
}

/* ---- Home: see-through header over the slideshow ----
   The page starts under the header (no top padding); the header is 88px tall on
   desktop. It turns solid cream after scrolling 480px (.is-solid, header.js) or
   while the phone menu is open. */
body.home {
	padding-block-start: 0;
}

@media (min-width: 1024px) {
	body.home {
		--header-h: 88px;
	}
}

.site-header--overlay:not(.is-solid):not(:has([aria-expanded="true"])) {
	background: transparent;
	border-block-end-color: transparent;
}

.site-header--overlay:not(.is-solid):not(:has([aria-expanded="true"])) :is(.site-header__logo, .site-header__toggle, .site-nav a, .site-header__social, .lang-switch a) {
	color: var(--c-white);
}

.site-header--overlay:not(.is-solid):not(:has([aria-expanded="true"])) .site-nav .current-menu-item > a {
	border-block-end-color: var(--c-white);
}

/* Over the slideshow the monogram is white and bigger (40/48/56px), and eases
   down to its usual size once the header turns solid (Tamar's option B, 2026-10-22).
   Its top lines up with the top of the menu row (tablet up: the 28px row of
   links; phones: the menu icon's top line) and it grows downward (Tamar). */
.site-header--overlay:not(.is-solid):not(:has([aria-expanded="true"])) .site-header__logo {
	--logo-h: 40px;
	margin-block-start: calc(var(--header-h) / 2 - var(--logo-row-half) - 14px);
}

.site-header--overlay .site-header__logo .logo {
	transition: height var(--dur) var(--ease-out);
}

.site-header--overlay:not(.is-solid):not(:has([aria-expanded="true"])) .lang-switch {
	border-color: var(--c-white);
}

.site-header--overlay .site-header__logo,
.site-header--overlay .site-header__toggle,
.site-header--overlay .site-header__social,
.site-header--overlay .lang-switch,
.site-header--overlay .lang-switch a {
	transition: color var(--dur), border-color var(--dur), background var(--dur), margin var(--dur) var(--ease-out); /* margin: the logo's move (above) */
}

/* Keep the header below the WordPress admin bar when logged in. */
.admin-bar .site-header {
	inset-block-start: 32px;
}

.site-header__logo {
	font-size: 16px;
	font-weight: var(--fw-bold);
	letter-spacing: -0.8px;
	line-height: 1;
	color: var(--c-text);
	white-space: nowrap;
}

.site-header__logo:hover {
	color: var(--c-text);
}

/* The square monogram (assets/images/logo-mark.svg), coloured by the link:
   dark on inner pages, white over the Home slideshow. Placed from the top
   (centred here; over the slideshow aligned with the menu, see above) so the
   move between the two can ease. The 14px is the tap-area padding (base.css). */
.site-header__logo {
	--logo-h: 30px;
	--logo-row-half: 6px;
	display: flex;
	align-self: flex-start;
	margin-block-start: calc((var(--header-h) - var(--logo-h)) / 2 - 14px);
}

.site-header__logo .logo {
	width: auto;
	height: var(--logo-h);
}

.site-header__nav {
	display: none;
	align-items: center;
	gap: 36px;
}

/* Menu links. The underline border is always there (transparent), so showing it
   on hover or for the current page never shifts the layout. */
.site-nav,
.mobile-nav,
.lang-switch,
.site-footer__social {
	margin: 0;
	padding: 0;
	list-style: none;
}

.site-nav {
	display: flex;
	align-items: center;
	gap: inherit;
}

.site-nav a {
	display: block;
	padding-block: 5px 4px; /* top = bottom padding + the 1px underline, so the text is centred in the header */
	border-block-end: 1px solid transparent;
	font-size: var(--fs-body);
	font-weight: var(--fw-semibold);
	line-height: 1.2;
	color: var(--c-body);
	transition: color var(--dur-fast), border-color var(--dur-fast);
}

.site-nav a:hover {
	color: var(--c-body);
	border-block-end-color: currentColor;
}

.site-nav .current-menu-item > a,
.site-nav .current-menu-ancestor > a,
.site-nav .current-menu-item > a:hover {
	color: var(--c-text);
	border-block-end-color: var(--c-text);
}

/* Instagram + Facebook, close together (the nav's own gap is wider). */
.site-header__socials,
.mobile-menu__socials {
	display: flex;
	align-items: center;
	gap: 6px;
}

.mobile-menu__socials {
	gap: 10px;
}

.site-header__social {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	color: var(--c-body);
}

/* EN / עב switch: two joined pill buttons; the current language is filled dark. */
.lang-switch {
	display: flex;
	border: 1px solid var(--c-text);
	border-radius: 4px;
	overflow: hidden;
}

.lang-switch a {
	display: block;
	padding: 6px 12px;
	font-size: var(--fs-button);
	font-weight: var(--fw-semibold);
	letter-spacing: 0.04em;
	line-height: 1.2;
	color: var(--c-text);
}

.lang-switch a:hover {
	color: var(--c-accent);
}

.lang-switch a[aria-current] {
	background: var(--c-text);
	color: var(--c-white);
}

/* The focus ring would be cut off by overflow: hidden — draw it inside instead. */
.lang-switch a:focus-visible {
	outline-offset: -4px;
	outline-color: var(--c-accent-text);
}

.lang-switch--large a {
	padding: 8px 14px;
}

/* ☰ button (phones only). Shows ✕ while the menu is open. */
.site-header__toggle {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	padding: 0;
	border: 0;
	background: none;
	color: var(--c-text);
	cursor: pointer;
}

.site-header__toggle-close,
.site-header__toggle[aria-expanded="true"] .site-header__toggle-open {
	display: none;
}

.site-header__toggle[aria-expanded="true"] .site-header__toggle-close {
	display: block;
}

/* ============ Mobile menu (below 768px) ============ */

.mobile-menu {
	position: fixed;
	inset-block-start: var(--header-h);
	inset-inline: 0;
	z-index: 99;
	display: flex;
	flex-direction: column;
	max-height: calc(100vh - var(--header-h));
	overflow-y: auto;
	padding: 4px var(--page-pad-x) 24px;
	background: var(--c-white);
	border-block-end: 1px solid var(--c-line);
}

.mobile-menu[hidden] {
	display: none;
}

.admin-bar .mobile-menu {
	inset-block-start: calc(var(--header-h) + 46px);
}

.mobile-nav a {
	display: block;
	padding-block: 14px;
	border-block-end: 1px solid var(--c-line);
	font-size: var(--fs-body);
	font-weight: var(--fw-regular);
	line-height: 1.2;
	color: var(--c-body);
}

.mobile-nav .current-menu-item > a,
.mobile-nav .current-menu-ancestor > a {
	font-weight: var(--fw-semibold);
	color: var(--c-text);
}

.mobile-menu__bottom {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding-block-start: 20px;
}

.mobile-menu__social {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	border: 1px solid var(--c-body);
	border-radius: 50%;
	color: var(--c-body);
}

/* The admin bar is taller on phones (46px); from 783px it's 32px. */
@media (max-width: 782px) {
	.admin-bar .site-header {
		inset-block-start: 46px;
	}
}

/* ============ Tablet & desktop: full menu in the header ============ */

@media (min-width: 768px) {
	.site-header__logo {
		--logo-h: 34px;
		--logo-row-half: 14px;
	}

	.site-header--overlay:not(.is-solid):not(:has([aria-expanded="true"])) .site-header__logo {
		--logo-h: 48px;
	}

	.site-header__nav {
		display: flex;
		gap: 22px;
	}

	.site-header__toggle,
	.mobile-menu {
		display: none !important;
	}
}

@media (min-width: 1024px) {
	.site-header__logo {
		--logo-h: 38px;
	}

	.site-header--overlay:not(.is-solid):not(:has([aria-expanded="true"])) .site-header__logo {
		--logo-h: 56px;
	}

	.site-header__nav {
		gap: 36px;
	}
}

/* ============ Footer ============ */

.site-footer {
	padding: 48px var(--page-pad-x) 80px; /* phones: room under the last line for the accessibility button (a11y.css) */
	background: var(--c-footer-bg);
	color: var(--c-sand);
}

.site-footer a {
	color: var(--c-sand);
}

.site-footer a:hover {
	color: var(--c-accent);
}

/* The light rust shows better than the deeper one on the dark footer. */
.site-footer :focus-visible {
	outline-color: var(--c-accent);
}

.site-footer__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 32px;
	max-width: var(--max-width);
	margin-inline: auto;
	padding-block-end: 48px;
}

/* The square monogram (assets/images/logo-mark.svg), in a dark brown-grey. */
.site-footer__title {
	margin-block-end: 12px;
	line-height: 1;
	color: var(--c-muted);
}

.site-footer__title .logo {
	display: block;
	width: auto;
	height: 44px;
}

.site-footer__label {
	margin-block: 22px 10px;
	font-size: var(--fs-button);
	font-weight: var(--fw-bold);
	letter-spacing: var(--tracking-eyebrow);
	line-height: 1.2;
	text-transform: uppercase;
	color: var(--c-accent);
}

.site-footer__label:first-child {
	margin-block: 0 14px;
}

.site-footer__text {
	margin: 0;
	font-size: var(--fs-small);
	line-height: 1.9;
	color: var(--c-sand);
}

.site-footer__social li {
	display: flex;
	justify-content: space-between;
	gap: 16px;
	padding-block: 9px;
	border-block-end: 1px solid var(--c-footer-line);
	font-size: var(--fs-eyebrow);
	line-height: 1.5;
}

.site-footer__social li:last-child {
	border-block-end: 0;
}

.site-footer__social li > span {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--c-footer-muted);
}

.site-footer__bottom {
	display: flex;
	flex-direction: column;
	gap: 8px;
	max-width: var(--max-width);
	margin-inline: auto;
	padding-block-start: 28px;
	border-block-start: 1px solid var(--c-footer-line);
	font-size: var(--fs-button);
	line-height: 1.5;
	color: var(--c-footer-muted); /* not --c-muted: too faint on the dark footer (accessibility) */
}

.site-footer__bottom > :first-child {
	letter-spacing: -0.2px;
}

/* Accessibility statement + privacy policy links (where the motto used to be). */
.site-footer__legal {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 4px 20px;
}

.site-footer .site-footer__legal a {
	color: var(--c-footer-muted);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.site-footer .site-footer__legal a:hover {
	color: var(--c-sand);
}

/* "Designed & built by Tamar": the name links, same color as the copyright, underlined on hover. */
.site-footer .site-footer__credit a {
	color: inherit;
	text-decoration: underline; /* shows it's a link (Tamar, 2026-10-22) */
	text-underline-offset: 3px;
}

.site-footer .site-footer__credit a:hover {
	color: var(--c-sand);
	text-decoration: underline;
}

/* Phones: on its own line under the copyright. */
@media (max-width: 767.98px) {
	.site-footer__sep {
		display: none;
	}

	.site-footer .site-footer__credit {
		display: block;
	}
}

/* The font's © is small and sits high (like a superscript): 1.5× and dropped
   onto the baseline, it stands as tall as the year next to it. */
.site-footer__c {
	font-size: 1.5em;
	line-height: 0;
	vertical-align: -0.27em; /* in the ©'s own (1.5×) em */
}

/* Phones: centred — the links first, the copyright under it (Tamar's option B;
   same faded grey as desktop). Tablet and up: one row, as before. */
@media (max-width: 767.98px) {
	.site-footer__bottom {
		gap: 4px;
		text-align: center;
	}

	.site-footer__legal {
		order: -1;
	}
}

@media (min-width: 768px) {
	.site-footer {
		padding: 60px var(--page-pad-x) 28px;
	}

	.site-footer__grid {
		grid-template-columns: 1fr 1fr;
		gap: 36px;
	}

	.site-footer__bottom {
		flex-direction: row;
		justify-content: space-between;
		gap: 0;
		/* Keep the links clear of the accessibility button in the corner (16px + 48px + gap). */
		padding-inline-end: max(0px, calc(76px - var(--page-pad-x)));
	}
}

@media (min-width: 1024px) {
	.site-footer {
		padding: 72px var(--page-pad-x) 32px;
	}

	.site-footer__grid {
		grid-template-columns: 1.3fr 1fr 1fr;
		gap: 40px;
	}
}