/* ==========================================================================
   Manor Eilon — Design System Components
   Modern Editorial School: people, action, creation, story — over institution.
   ========================================================================== */

:root {
	--manor-radius-sm: var(--wp--custom--radius--sm, 8px);
	--manor-radius-md: var(--wp--custom--radius--md, 16px);
	--manor-radius-lg: var(--wp--custom--radius--lg, 24px);
	--manor-shadow-card: var(--wp--custom--shadow--card, 0 1px 3px rgba(26,35,50,.08));
	--manor-shadow-card-hover: var(--wp--custom--shadow--card-hover, 0 12px 24px rgba(26,35,50,.12));
	--manor-blue: var(--wp--preset--color--accent-blue, #2563EB);
	--manor-green: var(--wp--preset--color--accent-green, #16A34A);
	--manor-orange: var(--wp--preset--color--accent-orange, #EA580C);
	--manor-navy: var(--wp--preset--color--contrast, #1A2332);
	--manor-surface: var(--wp--preset--color--surface, #EEF0F2);

	color-scheme: light;
	accent-color: var(--manor-blue);
}

* { box-sizing: border-box; }

html { scrollbar-gutter: stable; }

/* On-brand, clearly visible focus ring — keyboard navigation, per our accessibility statement */
:focus-visible {
	outline: 2px solid var(--manor-blue);
	outline-offset: 2px;
	border-radius: 4px;
}

/* Directional icons (arrows etc.) — mirror only in RTL, only when this class is opted in.
   Emoji glyphs and the "←" character already read correctly in RTL and should NOT get this class. */
.icon-directional:dir(rtl) {
	transform: scaleX(-1);
}

/* Headline wrapping: no orphaned single words on the last line */
h1, h2, h3, .manor-card__title, .manor-ai-box__title, .manor-today-widget__badge {
	text-wrap: balance;
}

p, .manor-card__meta {
	text-wrap: pretty;
}

/* -------------------------------------------------------------------------
   Header: fixed, thin, uncluttered
   ---------------------------------------------------------------------- */

.wp-block-template-part.header,
header.wp-block-group:has(.wp-block-navigation) {
	position: sticky;
	top: 0;
	z-index: 100;
	background: color-mix(in srgb, var(--wp--preset--color--base) 92%, transparent);
	backdrop-filter: blur(10px);
	border-bottom: 1px solid color-mix(in srgb, var(--manor-navy) 8%, transparent);
}

.wp-block-navigation {
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 600;
	font-size: 0.98rem;
}

.wp-block-navigation a.wp-block-navigation-item__content {
	padding: 0.5rem 0.9rem !important;
	border-radius: 999px;
	transition: background-color .2s ease, color .2s ease;
}

.wp-block-navigation a.wp-block-navigation-item__content:hover {
	background: var(--manor-surface);
}

/* -------------------------------------------------------------------------
   Mobile menu (hamburger) — matches the header's icon-button language,
   and forces correct RTL placement with logical properties throughout
   (never left/right) so it never depends on the block's own defaults.

   Scoped to WordPress's own responsive-nav breakpoint (max-width: 599px,
   the mirror of its own min-width: 600px desktop rule). Without this scope,
   these rules also hit the SAME container/list/items when core reuses them
   to render the plain inline desktop menu — which is exactly what forced
   every desktop nav item to width:100% and wrapped the whole menu vertically.
   ---------------------------------------------------------------------- */

@media (max-width: 599px) {

.wp-block-navigation__responsive-container-open {
	/* display:flex, no !important: WordPress core hides this button above 600px with a more
	   specific media-query rule, which needs to be able to win the cascade over this one. */
	display: flex;
	align-items: center;
	justify-content: center;
	width: 2.25rem;
	height: 2.25rem;
	padding: 0 !important;
	background: var(--manor-surface);
	border: none;
	border-radius: 999px;
	color: var(--manor-navy);
	cursor: pointer;
	transition: transform .2s ease, background-color .2s ease;
}

.wp-block-navigation__responsive-container-open:hover {
	background: var(--manor-blue);
	color: #fff;
	transform: translateY(-1px);
}

.wp-block-navigation__responsive-container-open svg {
	width: 1.2rem;
	height: 1.2rem;
}

/* Overlay panel: full-height, slides in from the inline-end (the right edge, in RTL) */
.wp-block-navigation__responsive-container {
	direction: rtl;
}

.wp-block-navigation__responsive-container.is-menu-open {
	background: var(--wp--preset--color--base) !important;
	padding: 1.5rem clamp(1.25rem, 6vw, 3rem);
}

.wp-block-navigation__responsive-dialog {
	position: relative;
	width: 100%;
	max-width: 420px;
	margin-inline-start: 0;
	margin-inline-end: auto;
	height: 100%;
	display: flex;
	flex-direction: column;
}

.wp-block-navigation__responsive-container-close {
	position: absolute;
	inset-block-start: 1.5rem;
	inset-inline-start: clamp(1.25rem, 6vw, 3rem);
	/* display:flex, no !important — core's desktop-hide rule for this button has higher
	   selector specificity than this one, so it still correctly wins and hides it there. */
	display: flex;
	align-items: center;
	justify-content: center;
	width: 2.25rem;
	height: 2.25rem;
	padding: 0 !important;
	background: var(--manor-surface);
	border: none;
	border-radius: 999px;
	color: var(--manor-navy);
	cursor: pointer;
}

.wp-block-navigation__responsive-container-close:hover {
	background: var(--manor-blue);
	color: #fff;
}

.wp-block-navigation__responsive-container-close svg {
	width: 1.1rem;
	height: 1.1rem;
}

.wp-block-navigation__responsive-container-content {
	margin-block-start: clamp(3rem, 12vh, 5rem);
}

/* The list's own cross-axis width is set by its PARENT's align-items (inherited from the
   desktop "justify right" setting) — under RTL, flex-end there resolves to the LEFT edge,
   not the right, which is why the list was hugging the wrong side. Force full width instead
   of relying on that alignment keyword at all. */
.wp-block-navigation__responsive-container-content,
.wp-block-navigation__responsive-container .wp-block-navigation__container {
	width: 100% !important;
}

.wp-block-navigation__responsive-container .wp-block-navigation__container {
	align-items: stretch !important;
	gap: 0 !important;
}

.wp-block-navigation__responsive-container .wp-block-navigation-item {
	width: 100%;
	border-block-end: 1px solid color-mix(in srgb, var(--manor-navy) 10%, transparent);
}

.wp-block-navigation__responsive-container .wp-block-navigation-item:first-child {
	border-block-start: 1px solid color-mix(in srgb, var(--manor-navy) 10%, transparent);
}

.wp-block-navigation__responsive-container a.wp-block-navigation-item__content {
	display: block;
	width: 100%;
	padding: 1.1rem 0.85rem !important;
	margin-inline: -0.85rem;
	border-radius: var(--manor-radius-sm);
	text-align: start;
	font-size: 1.15rem;
	font-weight: 700;
	transition: background-color .2s ease, color .2s ease;
}

.wp-block-navigation__responsive-container a.wp-block-navigation-item__content:hover,
.wp-block-navigation__responsive-container a.wp-block-navigation-item__content:focus-visible {
	background: var(--manor-surface);
	color: var(--manor-blue);
}

} /* end @media (max-width: 599px) — mobile menu overrides */

.manor-header-tools {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	margin-inline-start: 0.5rem;
}

.manor-header-tools a {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 2.25rem;
	height: 2.25rem;
	border-radius: 999px;
	background: var(--manor-surface);
	font-size: 1.1rem;
	text-decoration: none;
	transition: transform .2s ease, background-color .2s ease;
}

.manor-header-tools a:hover {
	background: var(--manor-blue);
	transform: translateY(-1px);
}

/* -------------------------------------------------------------------------
   Hero
   ---------------------------------------------------------------------- */

.manor-hero {
	padding-block: clamp(3rem, 8vw, 6rem);
	text-align: center;
}

.manor-hero h1 {
	max-width: 18ch;
	margin-inline: auto;
}

.manor-hero .manor-hero__lede {
	max-width: 52ch;
	margin: 1.25rem auto 0;
	font-size: 1.2rem;
	opacity: 0.8;
}

.manor-hero__photo {
	margin-top: clamp(2rem, 5vw, 3.5rem) !important;
}

.manor-hero__photo img {
	border-radius: var(--manor-radius-lg);
	box-shadow: var(--manor-shadow-card-hover);
	width: 100%;
	height: auto;
	display: block;
}

/* -------------------------------------------------------------------------
   Magazine: featured story + filter tabs
   ---------------------------------------------------------------------- */

.manor-magazine__featured {
	display: grid;
	grid-template-columns: 1.1fr 1fr;
	gap: 2rem;
	align-items: stretch;
	text-decoration: none;
	color: inherit;
	background: var(--wp--preset--color--white, #fff);
	border-radius: var(--manor-radius-lg);
	overflow: hidden;
	box-shadow: var(--manor-shadow-card);
	transition: box-shadow .25s ease;
	margin-block-end: 2.5rem;
}

.manor-magazine__featured:hover {
	box-shadow: var(--manor-shadow-card-hover);
}

.manor-magazine__featured .manor-card__media {
	aspect-ratio: auto;
	min-height: 280px;
	border-radius: 0;
}

.manor-magazine__featured .manor-card__media-icon {
	font-size: 5rem;
}

.manor-magazine__featured-body {
	padding: 2rem 2.25rem 2rem 0;
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 0.75rem;
}

.manor-magazine__featured-title {
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 800;
	font-size: clamp(1.5rem, 3vw, 2.25rem);
	line-height: 1.2;
	margin: 0;
}

.manor-magazine__featured-excerpt {
	opacity: 0.75;
	line-height: 1.6;
	margin: 0;
}

.manor-magazine__featured-link {
	font-weight: 700;
	color: var(--manor-blue);
}

.manor-magazine__tabs {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin-block-end: 1.75rem;
}

.manor-magazine__tab {
	border: 1px solid color-mix(in srgb, var(--manor-navy) 15%, transparent);
	background: #fff;
	border-radius: 999px;
	padding: 0.55rem 1.25rem;
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 600;
	font-size: 0.92rem;
	cursor: pointer;
	transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}

.manor-magazine__tab:hover {
	border-color: var(--manor-blue);
}

.manor-magazine__tab.is-active {
	background: var(--manor-navy);
	border-color: var(--manor-navy);
	color: #fff;
}

.manor-card[hidden] {
	display: none;
}

@media (max-width: 781px) {
	.manor-magazine__featured {
		grid-template-columns: 1fr;
	}
	.manor-magazine__featured-body {
		padding: 0 1.5rem 1.75rem;
	}
}

/* -------------------------------------------------------------------------
   Cards — the core recurring component. One base, five variants.
   ---------------------------------------------------------------------- */

.manor-cards {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	gap: 1.5rem;
	container-type: inline-size;
	container-name: manor-cards;
}

/* A Group that directly wraps a card grid gets consistent breathing room automatically —
   no more manual inline margin-top on every content block that includes one. */
.wp-block-group:has(> .manor-cards) {
	margin-block-start: clamp(2rem, 5vw, 3.75rem);
}

/* Container queries: cards respond to the width of their own wrapper, not the viewport —
   so an event/achievement/resource card stacks correctly even inside a narrower future context
   (a sidebar widget, a narrower column), not just under a global mobile breakpoint. */
@container manor-cards (max-width: 380px) {
	.manor-card--event,
	.manor-card--achievement,
	.manor-card--resource {
		flex-direction: column;
		align-items: flex-start;
		text-align: start;
	}
	.manor-card--event .manor-card__date {
		flex-direction: row;
		gap: 0.4rem;
		align-self: flex-start;
		padding: 0.4rem 0.9rem;
	}
}

.manor-card {
	position: relative;
	display: flex;
	flex-direction: column;
	background: var(--wp--preset--color--white, #fff);
	border-radius: var(--manor-radius-md);
	box-shadow: var(--manor-shadow-card);
	overflow: hidden;
	text-decoration: none;
	color: inherit;
	transition: transform .25s ease, box-shadow .25s ease;
}

.manor-card:hover {
	transform: translateY(-4px);
	box-shadow: var(--manor-shadow-card-hover);
}

.manor-card__media {
	aspect-ratio: 4 / 3;
	background: var(--manor-surface);
	overflow: hidden;
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
}

.manor-card__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform .4s ease;
}

.manor-card__date-line {
	font-size: 0.8rem;
	opacity: 0.5;
	margin-top: 0.1rem;
}

/* Designed "no photo yet" cover treatments, one per content type — a diagonal
   texture plus a large graphic icon, not a flat tint. Real photos (when a post
   has a featured image) take over automatically via manor_render_card_media(). */
.manor-card__media--news,
.manor-card__media--project,
.manor-card__media--story {
	background-size: 14px 14px;
}

.manor-card__media--news {
	background-color: color-mix(in srgb, var(--manor-blue) 10%, var(--manor-surface));
	background-image: repeating-linear-gradient(135deg, color-mix(in srgb, var(--manor-blue) 16%, transparent) 0 2px, transparent 2px 14px);
}

.manor-card__media--project {
	background-color: color-mix(in srgb, var(--manor-orange) 10%, var(--manor-surface));
	background-image: repeating-linear-gradient(135deg, color-mix(in srgb, var(--manor-orange) 18%, transparent) 0 2px, transparent 2px 14px);
}

.manor-card__media--story {
	background-color: color-mix(in srgb, var(--manor-green) 10%, var(--manor-surface));
	background-image: repeating-linear-gradient(135deg, color-mix(in srgb, var(--manor-green) 18%, transparent) 0 2px, transparent 2px 14px);
}

.manor-card__media-icon {
	font-size: 3rem;
	filter: drop-shadow(0 2px 6px rgba(26,35,50,.1));
	transition: transform .4s ease;
}

.manor-card:hover .manor-card__media-icon {
	transform: scale(1.08) rotate(-4deg);
}

.manor-card:hover .manor-card__media img {
	transform: scale(1.04);
}

.manor-card__body {
	padding: 1.25rem 1.4rem 1.5rem;
	display: flex;
	flex-direction: column;
	gap: 0.4rem;
	flex: 1;
}

.manor-card__eyebrow {
	font-size: 0.78rem;
	font-weight: 700;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	color: var(--manor-blue);
}

.manor-card__title {
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 800;
	font-size: 1.2rem;
	margin: 0;
}

.manor-card__meta {
	font-size: 0.9rem;
	opacity: 0.65;
}

/* Event card: date block */
.manor-card--event {
	flex-direction: row;
	align-items: stretch;
}

.manor-card--event .manor-card__date {
	flex: 0 0 4.5rem;
	background: var(--manor-navy);
	color: #fff;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 800;
	line-height: 1.1;
	text-align: center;
	padding: 0.75rem 0.25rem;
}

.manor-card--event .manor-card__date .manor-card__day { font-size: 1.6rem; }
.manor-card--event .manor-card__date .manor-card__month { font-size: 0.75rem; opacity: 0.8; }

/* Project card: eyebrow orange (creation/entrepreneurship) */
.manor-card--project .manor-card__eyebrow { color: var(--manor-orange); }

/* Story card: eyebrow green (community) */
.manor-card--story .manor-card__eyebrow { color: var(--manor-green); }

/* Person card */
.manor-card--person {
	text-align: center;
	align-items: center;
}

.manor-card--person .manor-card__media {
	width: 7rem;
	height: 7rem;
	aspect-ratio: 1;
	border-radius: 999px;
	margin: 1.5rem auto 0;
}

.manor-card--person .manor-card__body {
	align-items: center;
	padding-top: 0.75rem;
}

/* Achievement card */
.manor-card--achievement {
	flex-direction: row;
	align-items: center;
	gap: 1rem;
	padding: 1.1rem 1.3rem;
	box-shadow: none;
	border: 1px solid color-mix(in srgb, var(--manor-navy) 10%, transparent);
}

.manor-card--achievement .manor-card__icon {
	flex: 0 0 auto;
	width: 3rem;
	height: 3rem;
	border-radius: 999px;
	background: color-mix(in srgb, var(--manor-orange) 15%, transparent);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 1.4rem;
}

.manor-card--achievement .manor-card__body { padding: 0; gap: 0.15rem; }

/* Resource card: same compact row layout, blue tint */
.manor-card--resource {
	flex-direction: row;
	align-items: center;
	gap: 1rem;
	padding: 1.1rem 1.3rem;
	box-shadow: none;
	border: 1px solid color-mix(in srgb, var(--manor-navy) 10%, transparent);
}

.manor-card--resource .manor-card__icon {
	flex: 0 0 auto;
	width: 3rem;
	height: 3rem;
	border-radius: 999px;
	background: color-mix(in srgb, var(--manor-blue) 15%, transparent);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 1.4rem;
}

.manor-card--resource .manor-card__body { padding: 0; gap: 0.15rem; }

/* -------------------------------------------------------------------------
   "עכשיו במנור" — live-today widget
   ---------------------------------------------------------------------- */

.manor-today-widget {
	background: var(--manor-navy);
	color: #fff;
	border-radius: var(--manor-radius-lg);
	padding: 1.75rem 2rem;
}

.manor-today-widget__badge {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 800;
	font-size: 1.05rem;
	margin-bottom: 1rem;
}

.manor-dot {
	width: 0.6rem;
	height: 0.6rem;
	border-radius: 50%;
	background: #ff4d4d;
	box-shadow: 0 0 0 rgba(255,77,77,.6);
	animation: manor-pulse 2s infinite;
}

@keyframes manor-pulse {
	0%   { box-shadow: 0 0 0 0 rgba(255,77,77,.55); }
	70%  { box-shadow: 0 0 0 8px rgba(255,77,77,0); }
	100% { box-shadow: 0 0 0 0 rgba(255,77,77,0); }
}

.manor-today-widget__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 0.65rem;
}

.manor-today-widget__list li {
	display: flex;
	align-items: baseline;
	gap: 0.75rem;
	padding-block: 0.5rem;
	border-top: 1px solid rgba(255,255,255,.12);
}

.manor-today-widget__list li:first-child { border-top: none; }

.manor-today-widget__time {
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 700;
	opacity: 0.85;
	flex: 0 0 3.5rem;
}

.manor-today-widget__title a {
	color: #fff;
	text-decoration: none;
}

.manor-today-widget__title a:hover { text-decoration: underline; }

.manor-today-widget__loc { opacity: 0.6; font-size: 0.9rem; }

.manor-today-widget__empty { opacity: 0.75; margin: 0; }
.manor-today-widget__empty a { color: #fff; }

/* -------------------------------------------------------------------------
   Manor AI callout
   ---------------------------------------------------------------------- */

.manor-ai-box {
	background: linear-gradient(135deg, color-mix(in srgb, var(--manor-blue) 92%, black), var(--manor-blue));
	color: #fff;
	border-radius: var(--manor-radius-lg);
	padding: 2rem 2.25rem;
	text-align: center;
}

.manor-ai-box__title {
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 800;
	font-size: 1.4rem;
	margin: 0 0 0.75rem;
}

.manor-ai-box__prompt {
	background: rgba(255,255,255,.12);
	border-radius: 999px;
	padding: 0.75rem 1.5rem;
	display: inline-block;
	margin-bottom: 1.25rem;
	font-style: italic;
}

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

.manor-footer {
	background: var(--manor-surface);
	padding-block: 3rem 2rem;
}

.manor-footer a { color: inherit; }

.manor-footer__social a {
	display: inline-flex;
	width: 2.25rem;
	height: 2.25rem;
	align-items: center;
	justify-content: center;
	border-radius: 999px;
	background: #fff;
	margin-inline-start: 0.5rem;
	text-decoration: none;
}

/* -------------------------------------------------------------------------
   Scroll reveal (progressive enhancement — JS toggles .is-visible)
   ---------------------------------------------------------------------- */

.manor-reveal {
	opacity: 0;
	transform: translateY(16px);
	transition: opacity .6s ease, transform .6s ease;
}

.manor-reveal.is-visible {
	opacity: 1;
	transform: translateY(0);
}

/* Native scroll-driven reveal where supported — no JavaScript, runs off the main thread.
   Browsers without support keep the JS/IntersectionObserver fallback from manor.js. */
@supports (animation-timeline: view()) {
	.manor-reveal {
		animation: manor-reveal-in linear both;
		animation-timeline: view();
		animation-range: entry 0% cover 25%;
	}
}

@keyframes manor-reveal-in {
	from { opacity: 0; transform: translateY(16px); }
	to   { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
	.manor-reveal { opacity: 1; transform: none; transition: none; animation: none; }
	.manor-dot { animation: none; }
}

/* -------------------------------------------------------------------------
   Mobile-first tightening
   ---------------------------------------------------------------------- */

@media (max-width: 599px) {
	.manor-cards { grid-template-columns: 1fr; }
	.manor-today-widget, .manor-ai-box { padding: 1.5rem; }
	.wp-block-button__link { width: 100%; text-align: center; }
}