/*
Theme Name: Umansheli
Theme URI: https://example.com/umansheli
Author: Moshe Deitsch
Author URI: https://example.com
Description: A clean, custom blog & portfolio starter theme. Pairs with the Umansheli Portfolio plugin for project showcases.
Version: 1.10.10
Requires at least: 6.0
Tested up to: 6.5
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: umansheli
Tags: blog, portfolio, custom-menu, featured-images, translation-ready
*/

/* ------------------------------------------------------------------
   Design tokens
------------------------------------------------------------------ */
:root {
  /* Type.
     Frank Ruhl Libre is the revival of Frank-Rühl, the Hebrew book face that
     set Hebrew literature for most of the 20th century — it carries the right
     weight of history for this subject, where a neutral serif would not. It is
     used for display only, never body copy. Heebo does the working text: a
     Hebrew grotesque with a real range of weights.
     Latin fallbacks are listed because phone numbers, URLs and the odd English
     word appear throughout. */
  --font-display: "Frank Ruhl Libre", "Iowan Old Style", Palatino, Georgia, serif;
  --font-sans: "Heebo", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-serif: var(--font-display);

  /* The logo's letterforms are cut through by a diagonal stroke. That angle
     becomes this design's structural signature: accent rules are skewed
     parallelograms at this angle rather than plain rectangles. */
  --brand-skew: -18deg;

  /* Motion. One easing for everything, so the page moves with one hand. */
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --dur: 0.45s;

  /* Brand palette — the two colours sampled pixel-exact from the אומן שלי logo
     artwork: navy #243355 and orange #C86734.
     Navy carries the interactive weight (12.5:1 on white, so links and buttons
     stay readable); the orange is an accent only. Brand orange is 3.86:1 on
     white — below the 4.5:1 body-text threshold — so anything orange that is
     *text* uses --color-orange-ink, a darkened shade of the same hue, instead. */
  --color-navy: #243355;
  --color-navy-hover: #1a253d;  /* the exact navy, darkened for hover */
  --color-orange: #c86734;
  --color-orange-ink: #b45d2f;  /* 4.62:1 — the same orange, readable as text */

  --color-bg: #ffffff;
  --color-surface: #f4f5f6;     /* 5% navy on white */
  --color-text: #1c2333;
  --color-muted: #646b7d;
  --color-border: #e5e7eb;

  /* Interactive = navy. Accent = orange. */
  --color-accent: var(--color-navy);
  --color-accent-hover: var(--color-navy-hover);
  --color-highlight: var(--color-orange);
  --color-highlight-ink: var(--color-orange-ink);

  --max-width: 1100px;
  --content-width: 720px;
  --radius: 10px;
  --shadow: 0 1px 3px rgba(0, 0, 0, 0.06), 0 8px 24px rgba(0, 0, 0, 0.05);
  --space: 1.5rem;
}

/* ------------------------------------------------------------------
   Reset-ish base
------------------------------------------------------------------ */
*,
*::before,
*::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 18px;
  line-height: 1.65;
  color: var(--color-text);
  background: var(--color-bg);
}

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

a {
  color: var(--color-accent);
  text-decoration: none;
}
a:hover { color: var(--color-accent-hover); text-decoration: underline; }

h1, h2, h3, h4 {
  font-family: var(--font-serif);
  line-height: 1.2;
  font-weight: 600;
  margin: 0 0 0.5em;
}
h1 { font-size: 2.25rem; }
h2 { font-size: 1.6rem; }
h3 { font-size: 1.25rem; }

p { margin: 0 0 1.2em; }

/* ------------------------------------------------------------------
   Layout
------------------------------------------------------------------ */
.container {
  width: 100%;
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 var(--space);
}

.site-content {
  padding: 3rem 0;
}

.content-area {
  max-width: var(--content-width);
  margin: 0 auto;
}

.layout-with-sidebar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 280px;
  gap: 3rem;
  align-items: start;
}
@media (max-width: 860px) {
  .layout-with-sidebar { grid-template-columns: 1fr; }
}

/* ------------------------------------------------------------------
   Header
------------------------------------------------------------------ */
.site-header {
  border-bottom: 1px solid var(--color-border);
  background: var(--color-bg);
  position: sticky;
  top: 0;
  z-index: 20;
  /* The logo is larger than the bar and hangs below it, so the header must
     never clip its overflow. */
  overflow: visible;
}
.site-header .container {
  position: relative;
}

/* Inner pages have no hero image, so reserve the space the overhanging logo
   needs and let it float in that white masthead zone. */
.site-main {
	padding-top: 132px;
}
@media (max-width: 700px) {
	.site-main { padding-top: 92px; }
}
/* On the front page the logo is meant to hang over the hero image itself, so
   no reserve — the hero carries extra top padding to clear the headline.
   The manifesto page opens on its own navy hero band, so it gets the same
   floating treatment instead of the plain white masthead gap. */
.home .site-main,
.page-template-page-manifesto-php .site-main {
  padding-top: 0;
}

/* Centered masthead. The bar is the header's own (white) band; the logo is
   deliberately taller than it, so it reads large and hangs off the bottom
   edge — about its lower third floats over the section beneath. */
.site-header__bar {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
	min-height: 40px;
}

/* The logo is centered and anchored near the top of the thin header bar, so
   most of it hangs down and floats over the section beneath — the hero image
   on the front page. The white "badge" keeps the verse and tagline legible on
   any background. */
.site-branding {
	position: absolute;
	top: 7px;
	left: 50%;
	transform: translateX(-50%);
	z-index: 30;
	transition: top var(--dur) var(--ease);
}
.site-branding .custom-logo-link {
  display: block;
  line-height: 0;
  transition: transform var(--dur) var(--ease);
}
.site-branding .custom-logo-link:hover { transform: translateY(-3px); }
.site-branding .custom-logo {
  /* Bigger than the 72px bar on purpose — this is what makes the arched
     verse and the tagline readable. */
	height: 142px;
	width: auto;
	object-fit: contain;
	background: #fff;
	padding: 11px 16px;
	border-radius: 22px;
	box-shadow: 0 16px 40px rgba(36, 51, 85, 0.18), 0 3px 8px rgba(36, 51, 85, 0.08);
	transition: height var(--dur) var(--ease), padding var(--dur) var(--ease), border-radius var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
@media (max-width: 700px) {
	.site-header__bar { min-height: 40px; }
	.site-branding .custom-logo { height: 100px; padding: 8px 11px; border-radius: 18px; }
}

/* Text fallback (shown only when no custom logo is set). */
.site-branding .site-title { margin: 0; font-size: 1.35rem; text-align: center; }
.site-branding .site-title a { color: var(--color-text); text-decoration: none; }
.site-branding .site-description {
  margin: 0;
  font-size: 0.85rem;
  color: var(--color-muted);
  font-family: var(--font-sans);
  text-align: center;
}

/* Navigation: centered under the brand, clearing the overhang. Rendered only
   when a menu is assigned, so no empty space is reserved otherwise. */
.main-navigation {
	display: flex;
	justify-content: center;
	padding-top: 72px;
	transition: padding var(--dur) var(--ease);
}
.main-navigation ul {
  list-style: none;
  display: flex;
  gap: 2rem;
  margin: 0;
  padding: 0;
}
.main-navigation a {
  color: var(--color-text);
  font-size: 0.95rem;
  font-weight: 500;
  position: relative;
  padding-bottom: 5px;
}
/* The brand's diagonal stroke, reused as the nav's hover/active underline. */
.main-navigation a::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  height: 3px;
  background: var(--color-orange);
  transform: scaleX(0) skewX(var(--brand-skew));
  transform-origin: center;
  transition: transform 0.2s var(--ease);
}
.main-navigation a:hover { text-decoration: none; }
.main-navigation a:hover::after,
.main-navigation .current-menu-item > a::after { transform: scaleX(1) skewX(var(--brand-skew)); }
.main-navigation .current-menu-item > a { color: var(--color-accent); }

/* Keep the identity of the floating mark, then make room for the page once a
   visitor has started reading. The smaller sticky state avoids a persistent
   masthead taking over the viewport, particularly on phones. */
.site-header--compact .site-header__bar { min-height: 36px; }
.site-header--compact .site-branding { top: 5px; }
.site-header--compact .site-branding .custom-logo {
	height: 92px;
	padding: 7px 11px;
	border-radius: 16px;
	box-shadow: 0 8px 22px rgba(36, 51, 85, 0.14), 0 2px 5px rgba(36, 51, 85, 0.06);
}
.site-header--compact .main-navigation { padding-top: 48px; }
.site-header--compact + .site-main { padding-top: 96px; }
.home .site-header--compact + .site-main,
.page-template-page-manifesto-php .site-header--compact + .site-main { padding-top: 0; }

@media (max-width: 700px) {
	.site-header--compact .site-header__bar { min-height: 36px; }
	.site-header--compact .site-branding .custom-logo {
		height: 72px;
		padding: 6px 9px;
		border-radius: 14px;
	}
	.site-header--compact .main-navigation { padding-top: 0.85rem; }
	.site-header--compact + .site-main { padding-top: 68px; }
}

@media (prefers-reduced-motion: reduce) {
	.site-branding,
	.site-branding .custom-logo,
	.main-navigation { transition: none; }
}

.menu-toggle {
  display: none;
  position: absolute;
  inset-inline-end: 0;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: 1px solid var(--color-border);
  border-radius: 8px;
  padding: 0.5rem 0.75rem;
  font-size: 0.9rem;
  cursor: pointer;
  z-index: 40;
}
@media (max-width: 700px) {
  .has-nav-js .menu-toggle { display: block; }
  .main-navigation {
    display: flex;
    padding: 5.25rem var(--space) 1rem;
    background: var(--color-bg);
    border-bottom: 1px solid var(--color-border);
  }
	.has-nav-js .main-navigation { display: none; }
	.has-nav-js .main-navigation.is-open { display: flex; }
	.main-navigation ul { flex-direction: column; gap: 1rem; align-items: center; width: 100%; }
	.site-header--compact .main-navigation.is-open { padding-top: 3.25rem; }
}

/* ------------------------------------------------------------------
   Posts
------------------------------------------------------------------ */
.entry {
  margin-bottom: 3rem;
  padding-bottom: 3rem;
  border-bottom: 1px solid var(--color-border);
}
.entry:last-child { border-bottom: none; }

.entry-thumbnail img {
  border-radius: var(--radius);
  margin-bottom: 1.25rem;
  width: 100%;
  object-fit: cover;
}
.entry-title { margin-bottom: 0.35rem; }
.entry-title a { color: var(--color-text); }
.entry-title a:hover { color: var(--color-accent); text-decoration: none; }

.entry-meta {
  font-size: 0.85rem;
  color: var(--color-muted);
  margin-bottom: 1rem;
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
}
.entry-meta a { color: var(--color-muted); }
.entry-meta a:hover { color: var(--color-accent); }

.entry-content { font-size: 1.05rem; }
.entry-content h2 { margin-top: 2rem; }
.entry-content img { border-radius: var(--radius); margin: 1.5rem 0; }
.entry-content blockquote {
  margin: 1.5rem 0;
  padding: 0.5rem 1.5rem;
  /* Logical property so the rule sits on the correct side in Hebrew RTL. */
  border-inline-start: 3px solid var(--color-orange);
  color: var(--color-muted);
  font-style: italic;
}

/* ------------------------------------------------------------------
   404 page
------------------------------------------------------------------ */
.not-found {
  min-height: min(730px, calc(100vh - 160px));
  display: grid;
  align-items: center;
  overflow: hidden;
  padding-block: clamp(4rem, 10vw, 7rem);
  text-align: center;
  background:
    linear-gradient(rgba(36, 51, 85, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(36, 51, 85, 0.035) 1px, transparent 1px),
    var(--color-surface);
  background-size: 28px 28px;
}
.not-found__inner { max-width: 690px; margin-inline: auto; }
.not-found__map {
  position: relative;
  width: min(100%, 470px);
  height: 160px;
  margin: 0 auto 1.4rem;
}
.not-found__number {
  position: absolute;
  inset: 50% 0 auto;
  transform: translateY(-50%);
  color: var(--color-navy);
  font-family: var(--font-display);
  font-size: clamp(5.5rem, 19vw, 9rem);
  font-weight: 900;
  line-height: 1;
  letter-spacing: -0.06em;
}
.not-found__route {
  position: absolute;
  top: 50%;
  inset-inline: 3% 4%;
  height: 0;
  border-top: 3px dashed var(--color-orange);
  transform: rotate(-5deg);
}
.not-found__pin {
  position: absolute;
  top: calc(50% - 12px);
  z-index: 1;
  width: 24px;
  height: 24px;
  background: var(--color-orange);
  border: 5px solid var(--color-bg);
  border-radius: 50% 50% 50% 0;
  box-shadow: 0 2px 9px rgba(28, 35, 51, 0.18);
  transform: rotate(-45deg);
}
.not-found__pin--start { inset-inline-start: 2%; }
.not-found__pin--end { inset-inline-end: 2%; background: var(--color-navy); }
.not-found__eyebrow {
  margin: 0 0 0.5rem;
  color: var(--color-orange-ink);
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.1em;
}
.not-found h1 { margin: 0; font-size: clamp(2rem, 5vw, 3rem); }
.not-found__lead {
  max-width: 570px;
  margin: 1rem auto 1.7rem;
  color: var(--color-muted);
  font-size: 1.1rem;
  line-height: 1.8;
}
.not-found__actions { margin-bottom: 2.25rem; }
.not-found__search {
  max-width: 520px;
  margin-inline: auto;
  padding: 1.15rem;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  text-align: start;
}
.not-found__search label {
  display: block;
  margin-bottom: 0.55rem;
  color: var(--color-text);
  font-size: 0.92rem;
  font-weight: 700;
}
.not-found__search-row { display: flex; gap: 0.6rem; }
.not-found__search input {
  min-width: 0;
  flex: 1;
  padding: 0.65rem 0.8rem;
  border: 1px solid var(--color-border);
  border-radius: 8px;
  background: var(--color-bg);
  color: var(--color-text);
  font: inherit;
}
.not-found__search input:focus {
  outline: 3px solid rgba(200, 103, 52, 0.22);
  border-color: var(--color-orange);
}
.not-found__search .btn { border: 0; cursor: pointer; }
@media (max-width: 480px) {
  .not-found__map { height: 130px; }
  .not-found__search-row { flex-direction: column; }
  .not-found__search .btn { width: 100%; }
}

/* ------------------------------------------------------------------
   Search results
------------------------------------------------------------------ */
.search-hero {
  padding-block: 4rem;
  color: #fff;
  background: var(--color-navy);
  border-bottom: 3px solid var(--color-orange);
}
.search-hero__inner { max-width: 760px; }
.search-hero__eyebrow {
  margin: 0 0 0.45rem;
  color: rgba(255, 255, 255, 0.72);
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.1em;
}
.search-hero h1 { margin: 0 0 1.35rem; color: #fff; font-size: clamp(2rem, 5vw, 3rem); }
.search-hero__form {
  display: flex;
  gap: 0.65rem;
  padding: 0.45rem;
  background: #fff;
  border-radius: calc(var(--radius) + 2px);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.17);
}
.search-hero__form input {
  min-width: 0;
  flex: 1;
  border: 0;
  padding: 0.6rem 0.85rem;
  background: transparent;
  color: var(--color-text);
  font: inherit;
}
.search-hero__form input:focus { outline: none; }
.search-hero__form:focus-within { outline: 3px solid rgba(255, 255, 255, 0.38); }
.search-hero__form .btn { border: 0; cursor: pointer; }
.search-results { padding-block: 4rem 5.5rem; }
.search-results__inner { max-width: 800px; }
.search-results__header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.7rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--color-border);
}
.search-results__header p { margin: 0; font-size: 1.15rem; }
.search-results__header strong { color: var(--color-navy); }
.search-results__header span {
  flex: none;
  color: var(--color-muted);
  font-size: 0.88rem;
}
.search-results__list .entry {
  margin-bottom: 1rem;
  padding: clamp(1.35rem, 3vw, 2rem);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  box-shadow: 0 1px 2px rgba(28, 35, 51, 0.03);
  transition: transform 0.2s var(--ease), box-shadow 0.2s var(--ease), border-color 0.2s var(--ease);
}
.search-results__list .entry:hover {
  border-color: rgba(200, 103, 52, 0.35);
  box-shadow: var(--shadow);
  transform: translateY(-2px);
}
.search-results__list .entry:last-child { border-bottom: 1px solid var(--color-border); }
.search-results__list .entry-title { font-size: clamp(1.35rem, 3vw, 1.7rem); }
.search-results__list .entry-content { color: var(--color-muted); }
.search-results__list .read-more { color: var(--color-orange-ink); font-weight: 700; }
.search-results__empty {
  padding: clamp(2rem, 7vw, 4.5rem) 1.5rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: var(--color-surface);
  text-align: center;
}
.search-results__empty-icon {
  display: grid;
  width: 48px;
  height: 48px;
  place-items: center;
  margin: 0 auto 1rem;
  border-radius: 50%;
  background: rgba(200, 103, 52, 0.12);
  color: var(--color-orange-ink);
  font-family: var(--font-display);
  font-size: 2rem;
  font-weight: 900;
}
.search-results__empty h2 { margin: 0 0 0.65rem; }
.search-results__empty > p:not(.search-results__empty-icon) {
  max-width: 470px;
  margin: 0 auto 1.4rem;
  color: var(--color-muted);
  line-height: 1.75;
}
@media (max-width: 560px) {
  .search-hero { padding-block: 3rem; }
  .search-hero__form { flex-direction: column; }
  .search-hero__form .btn { width: 100%; }
  .search-results { padding-block: 2.75rem 4rem; }
  .search-results__header { align-items: flex-start; flex-direction: column; }
}

/* ------------------------------------------------------------------
   Umanmap article call-to-action
------------------------------------------------------------------ */
.entry-content .umanmap-cta {
  position: relative;
  overflow: hidden;
  margin: 2.5rem 0;
  padding: clamp(1.7rem, 5vw, 2.8rem);
  border: 1px solid rgba(200, 103, 52, 0.5);
  border-radius: calc(var(--radius) + 3px);
  background: var(--color-navy);
  box-shadow: 0 14px 30px rgba(36, 51, 85, 0.18);
  color: #fff;
  text-align: center;
}
.entry-content .umanmap-cta::before {
  content: "";
  position: absolute;
  inset: -55% -20% auto auto;
  width: 240px;
  height: 240px;
  border: 40px solid rgba(255, 255, 255, 0.05);
  border-radius: 50%;
}
.entry-content .umanmap-cta > * { position: relative; }
.entry-content .umanmap-cta__eyebrow {
  margin: 0 0 0.45rem;
  color: #f2c8b5;
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.08em;
}
.entry-content .umanmap-cta h2 {
  margin: 0;
  color: #fff;
  font-size: clamp(1.55rem, 4vw, 2.1rem);
}
.entry-content .umanmap-cta > p:not(.umanmap-cta__eyebrow) {
  max-width: 540px;
  margin: 0.75rem auto 1.45rem;
  color: rgba(255, 255, 255, 0.85);
  font-size: 1rem;
  line-height: 1.75;
}
.entry-content .umanmap-cta__button {
  display: inline-block;
  padding: 0.8rem 1.4rem;
  border-radius: 8px;
  background: var(--color-orange);
  color: #fff;
  font-weight: 700;
  transition: transform 0.18s var(--ease), background 0.18s var(--ease);
}
.entry-content .umanmap-cta__button:hover {
  background: #d97645;
  color: #fff;
  text-decoration: none;
  transform: translateY(-2px);
}
.entry-content .umanmap-cta span {
  display: block;
  margin-top: 0.85rem;
  color: rgba(255, 255, 255, 0.62);
  direction: ltr;
  font-size: 0.88rem;
}
.entry-content .umanmap-cta__updates {
  margin-top: 1.45rem;
  padding-top: 1.3rem;
  border-top: 1px solid rgba(255, 255, 255, 0.18);
}
.entry-content .umanmap-cta .umanmap-cta__updates > p {
  margin: 0 0 0.7rem;
  color: rgba(255, 255, 255, 0.9);
  font-size: 0.94rem;
}
.entry-content .umanmap-cta__whatsapp {
  display: inline-block;
  padding: 0.62rem 1rem;
  border: 1px solid rgba(255, 255, 255, 0.75);
  border-radius: 8px;
  color: #fff;
  font-size: 0.92rem;
  font-weight: 700;
  transition: background 0.18s var(--ease), color 0.18s var(--ease);
}
.entry-content .umanmap-cta__whatsapp:hover {
  background: #fff;
  color: var(--color-navy);
  text-decoration: none;
}

.read-more {
  display: inline-block;
  margin-top: 0.5rem;
  font-weight: 500;
}

/* ------------------------------------------------------------------
   Buttons & badges
------------------------------------------------------------------ */
.btn {
  display: inline-block;
  background: var(--color-accent);
  color: #fff;
  padding: 0.6rem 1.2rem;
  border-radius: 8px;
  font-weight: 500;
  font-size: 0.95rem;
  transition: background 0.15s ease;
}
.btn:hover { background: var(--color-accent-hover); color: #fff; text-decoration: none; }

.tag-badge {
  display: inline-block;
  font-size: 0.75rem;
  background: rgba(200, 103, 52, 0.09);
  border: 1px solid rgba(200, 103, 52, 0.25);
  color: var(--color-orange-ink);
  padding: 0.15rem 0.6rem;
  border-radius: 999px;
}

/* ------------------------------------------------------------------
   Hero (front page)
------------------------------------------------------------------ */
.hero {
  background: var(--color-navy);
  color: #fff;
  padding: 4.5rem 0;
  text-align: center;
  /* The logo's orange, as a rule under the masthead. */
  border-bottom: 3px solid var(--color-orange);
}
.hero h1 {
  font-size: 2.8rem;
  margin-bottom: 0.5rem;
  color: #fff;
}
.hero p {
  font-size: 1.2rem;
  color: rgba(255, 255, 255, 0.78);
  max-width: 620px;
  margin: 0 auto 1.5rem;
}
/* On the navy hero the button flips to the orange accent. White on orange is
   3.85:1 — under the body-text bar, but this is large button text, which the
   3:1 large-text/UI threshold covers. */
.hero .btn {
  background: var(--color-orange);
  color: #fff;
}
.hero .btn:hover { background: var(--color-orange-ink); }

.section-title {
  text-align: center;
  margin: 3.5rem 0 2rem;
}
/* A short orange rule beneath each section heading, echoing the logo. */
.section-title::after {
  content: "";
  display: block;
  width: 48px;
  height: 3px;
  border-radius: 2px;
  background: var(--color-orange);
  margin: 0.6rem auto 0;
}

/* ------------------------------------------------------------------
   Home: hero
------------------------------------------------------------------ */
.hero--home {
  padding: 5rem 0 4.5rem;
}
.hero__eyebrow {
  font-size: 0.85rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-orange);
  margin: 0 0 0.9rem;
  font-weight: 600;
}
.hero__title {
  font-size: clamp(2rem, 5vw, 3.1rem);
  margin: 0 0 1rem;
  color: #fff;
}
.hero__lead {
  font-size: 1.15rem;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.8);
  max-width: 620px;
  margin: 0 auto 2rem;
}
.hero__actions {
  display: flex;
  gap: 0.85rem;
  justify-content: center;
  flex-wrap: wrap;
}
.hero__actions .btn--accent { min-width: 13.5rem; }
.hero__reassurance {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  flex-wrap: wrap;
  margin: 1.25rem auto 0 !important;
  color: rgba(255, 255, 255, 0.72) !important;
  font-size: 0.82rem !important;
  font-weight: 500;
  line-height: 1.45;
}
.hero__reassurance span[aria-hidden="true"] { color: var(--color-orange); }
@media (max-width: 500px) {
  .hero__actions { align-items: stretch; width: min(100%, 20rem); margin-inline: auto; }
  .hero__actions .btn { justify-content: center; width: 100%; }
  .hero__reassurance { gap: 0.3rem 0.5rem; max-width: 20rem; }
}

/* Button variants ------------------------------------------------- */
.btn--lg {
  padding: 0.85rem 1.9rem;
  font-size: 1.02rem;
}
.btn--accent { background: var(--color-orange); color: #fff; }
.btn--accent:hover { background: var(--color-orange-ink); color: #fff; }

/* Outlined button for use on the navy hero. */
.btn--ghost {
  background: transparent;
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.45);
}
.btn--ghost:hover {
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
  border-color: #fff;
}

/* Outlined button for use on light backgrounds. */
.btn--ghost-dark {
  background: transparent;
  color: var(--color-navy);
  border: 1px solid var(--color-border);
}
.btn--ghost-dark:hover {
  background: var(--color-surface);
  color: var(--color-navy);
  border-color: var(--color-navy);
}

/* ------------------------------------------------------------------
   Home: directory filter
------------------------------------------------------------------ */
.orgfilter {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  align-items: center;
  margin-bottom: 2rem;
}
.orgfilter__search { width: 100%; max-width: 420px; }
.orgfilter__search input {
  width: 100%;
  padding: 0.7rem 1rem;
  font: inherit;
  font-size: 0.98rem;
  color: var(--color-text);
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: 999px;
  text-align: center;
}
.orgfilter__search input:focus {
  outline: 2px solid var(--color-navy);
  outline-offset: 1px;
  border-color: transparent;
}

.orgfilter__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  justify-content: center;
}
.chip {
  display: inline-block;
  padding: 0.35rem 0.9rem;
  border-radius: 999px;
  border: 1px solid var(--color-border);
  background: var(--color-bg);
  color: var(--color-muted);
  font-size: 0.88rem;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.chip:hover {
  color: var(--color-navy);
  border-color: var(--color-navy);
  text-decoration: none;
}
.chip.is-active {
  background: var(--color-navy);
  border-color: var(--color-navy);
  color: #fff;
}

.orgfilter__empty {
  text-align: center;
  color: var(--color-muted);
  font-style: italic;
  padding: 2rem 0;
}
.orgfilter__more {
  text-align: center;
  margin: 2rem 0 0;
}
[data-orgfilter-results][aria-busy="true"] {
  opacity: 0.58;
  transition: opacity 0.15s ease;
}

.section-more {
  text-align: center;
  margin-top: 2rem;
}

/* ------------------------------------------------------------------
   Home: movement (manifesto teaser)
------------------------------------------------------------------ */
.movement {
  padding-block: 4rem;
  border-bottom: 1px solid var(--color-border);
}
.movement__inner {
  max-width: 680px;
  text-align: center;
}
.movement__eyebrow {
  margin: 0 0 0.7rem;
  color: var(--color-orange-ink);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.12em;
}
.movement .section-title { margin-top: 0; }
.movement__lead {
  margin: 0;
  color: var(--color-muted);
  font-size: 1.08rem;
  line-height: 1.75;
}
.movement .section-more { margin-top: 1.75rem; }

/* ------------------------------------------------------------------
   Home: updates
------------------------------------------------------------------ */
.updates {
  padding-block: 4.5rem;
  background: var(--color-surface);
}
.updates__heading { text-align: center; margin-bottom: 2rem; }
.updates__eyebrow {
  margin: 0 0 0.4rem;
  color: var(--color-orange-ink);
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.08em;
}
.updates__heading .section-title { margin: 0; }
.updates__card {
  max-width: 760px;
  margin-inline: auto;
  padding: clamp(1.5rem, 4vw, 2.5rem);
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
.updates__date { margin: 0 0 0.5rem; color: var(--color-muted); font-size: 0.9rem; }
.updates__card h3 { margin: 0 0 0.85rem; font-size: clamp(1.35rem, 3vw, 1.8rem); }
.updates__card h3 a { color: var(--color-text); }
.updates__card h3 a:hover { color: var(--color-accent); text-decoration: none; }
.updates__card p:not(.updates__date) { margin-bottom: 1.25rem; font-size: 1.05rem; line-height: 1.8; }

/* ------------------------------------------------------------------
   Home: how it works
------------------------------------------------------------------ */
.howto {
  background: var(--color-surface);
  border-block: 1px solid var(--color-border);
  padding-block: 4.5rem;
}
.howto__heading {
  max-width: 660px;
  margin: 0 auto 2.6rem;
  text-align: center;
}
.howto__eyebrow {
  margin: 0 0 0.7rem;
  color: var(--color-orange-ink);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.12em;
}
.howto .section-title {
  margin: 0;
}
.howto__intro {
  margin: 1.25rem 0 0;
  color: var(--color-muted);
  font-size: 1.02rem;
  line-height: 1.65;
}
.howto__steps {
  list-style: none;
  counter-reset: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
  position: relative;
}
/* A quiet connector turns three cards into one simple journey. */
.howto__steps::before {
  content: "";
  position: absolute;
  inset-inline: 16.66%;
  top: 3rem;
  height: 1px;
  background: rgba(200, 103, 52, 0.28);
}
@media (max-width: 780px) {
  .howto { padding-block: 3.5rem; }
  .howto__steps { grid-template-columns: 1fr; gap: 1rem; }
  .howto__steps::before { display: none; }
}
.howto__step {
  position: relative;
  z-index: 1;
  min-height: 218px;
  padding: 1.75rem 1.5rem 1.5rem;
  text-align: center;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: 12px;
  box-shadow: 0 10px 28px rgba(23, 34, 59, 0.04);
  transition: transform var(--dur) var(--ease), border-color var(--dur) var(--ease),
              box-shadow var(--dur) var(--ease);
}
.howto__step:hover {
  transform: translateY(-4px);
  border-color: rgba(200, 103, 52, 0.45);
  box-shadow: 0 14px 32px rgba(23, 34, 59, 0.09);
}
.howto__num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: var(--color-orange);
  color: #fff;
  border: 4px solid var(--color-surface);
  box-shadow: 0 0 0 1px rgba(200, 103, 52, 0.25);
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 700;
  margin: 0 0 1.25rem;
}
.howto__step h3 {
  font-size: 1.18rem;
  margin: 0 0 0.55rem;
}
.howto__step p {
  margin: 0;
  color: var(--color-muted);
  font-size: 0.95rem;
  line-height: 1.6;
}

/* ------------------------------------------------------------------
   Home: closing CTA band
------------------------------------------------------------------ */
.cta {
  background: var(--color-navy);
  color: #fff;
  padding-block: 3rem;
}
.cta__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  flex-wrap: wrap;
}
.cta__text { flex: 1; min-width: 260px; }
.cta__text h2 {
  color: #fff;
  margin: 0 0 0.35rem;
  font-size: 1.75rem;
}
.cta__text p {
  margin: 0;
  color: rgba(255, 255, 255, 0.78);
}
@media (max-width: 600px) {
  .cta__inner { flex-direction: column; text-align: center; }
}

/* ------------------------------------------------------------------
   Home: brand interlude
------------------------------------------------------------------ */
.brand-tagline-band {
  position: relative;
  overflow: hidden;
  padding-block: 5rem;
  background: var(--color-surface);
  border-block: 1px solid var(--color-border);
}
.brand-tagline {
  max-width: 760px;
  margin: 0 auto;
  text-align: center;
}
.brand-tagline__rule {
  display: block;
  width: 52px;
  height: 4px;
  margin: 0 auto 1.6rem;
  background: var(--color-orange);
  border-radius: 1px;
  transform: skewX(var(--brand-skew));
}
.brand-tagline p {
  margin: 0;
  color: var(--color-navy);
  font-family: var(--font-display);
  font-size: clamp(1.65rem, 3.2vw, 2.45rem);
  font-weight: 700;
  line-height: 1.2;
}
.brand-tagline p + p { margin-top: 0.1rem; }
.brand-tagline p:last-child {
  margin-top: 0.35rem;
  color: var(--color-orange-ink);
  font-size: clamp(2.2rem, 5vw, 3.65rem);
  font-weight: 900;
  line-height: 1.1;
}
@media (max-width: 600px) {
  .brand-tagline-band { padding-block: 3.75rem; }
  .brand-tagline__rule { margin-bottom: 1.35rem; }
}

/* ------------------------------------------------------------------
   Contextual back links
------------------------------------------------------------------ */
.context-back {
  margin: 0 0 1.35rem;
  font-size: 0.88rem;
  font-weight: 600;
}
.context-back__link {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  color: var(--color-muted);
  text-decoration: none;
}
.context-back__link .icon {
  transform: scaleX(-1);
  transition: transform 0.22s var(--ease);
}
.context-back__link:hover {
  color: var(--color-navy);
  text-decoration: none;
}
.context-back__link:hover .icon { transform: scaleX(-1) translateX(3px); }
.context-back--inverse { margin-bottom: 1.75rem; }
.context-back--inverse .context-back__link { color: rgba(255, 255, 255, 0.72); }
.context-back--inverse .context-back__link:hover { color: #fff; }
.context-back--orghead { margin-bottom: 2.25rem; }
.dirhead .context-back { text-align: start; }

/* ------------------------------------------------------------------
   Directory: page header
------------------------------------------------------------------ */
.dirhead {
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-border);
  padding-block: 2.75rem 2.25rem;
  text-align: center;
}
.dirhead__title {
  margin: 0 0 0.4rem;
  font-size: clamp(1.8rem, 4vw, 2.5rem);
}
.dirhead__count {
  margin: 0;
  color: var(--color-muted);
  font-size: 0.95rem;
}
.dirhead__desc {
  margin: 0.75rem auto 0;
  max-width: 620px;
  color: var(--color-muted);
}
.dirhead__back { margin: 0.9rem 0 0; font-size: 0.9rem; }
.dirhead__submission { margin: 1.1rem 0 0; }

.dirempty {
  text-align: center;
  padding: 4rem 0;
  color: var(--color-muted);
}
.dirempty h2 { margin-bottom: 0.5rem; }

/* ------------------------------------------------------------------
   Directory: card extras
------------------------------------------------------------------ */
/* Tag pills, used on cards and the org header. */
.umansheli-tag {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  background: rgba(200, 103, 52, 0.09);
  border: 1px solid rgba(200, 103, 52, 0.22);
  color: var(--color-orange-ink);
  padding: 0.12rem 0.55rem;
  border-radius: 999px;
  margin-inline-end: 0.3rem;
  text-decoration: none;
}
a.umansheli-tag:hover {
  background: rgba(200, 103, 52, 0.16);
  text-decoration: none;
}

/* Card logo/city/placeholder styling lives in the plugin's organizations.css,
   next to the markup that produces it. */

/* ------------------------------------------------------------------
   Single organization
------------------------------------------------------------------ */
.orghead {
  background:
    radial-gradient(circle at 12% 25%, rgba(200, 103, 52, 0.11), transparent 28rem),
    var(--color-surface);
  border-bottom: 1px solid var(--color-border);
  padding-block: 1.35rem 3.25rem;
}
.orghead__back {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin-block-end: 2.25rem;
  color: var(--color-muted);
  font-size: 0.88rem;
  font-weight: 600;
  text-decoration: none;
}
.orghead__back:hover { color: var(--color-navy); text-decoration: none; }
.orghead__inner {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 1.5rem 2.25rem;
}
.orghead__logo {
  flex: none;
  width: 116px;
  height: 116px;
  border-radius: 18px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--color-navy), #405376);
  border: 1px solid var(--color-border);
  box-shadow: 0 12px 28px rgba(23, 34, 59, 0.14);
}
.orghead__logo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: #fff;
}
.orghead__logo span {
  color: #fff;
  font-family: var(--font-display);
  font-size: 3rem;
  font-weight: 700;
}
.orghead__eyebrow,
.orgbody__eyebrow {
  margin: 0 0 0.5rem;
  color: var(--color-orange-ink);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.11em;
}
.orghead__title { margin: 0; font-size: clamp(2rem, 4vw, 3rem); line-height: 1.12; }
.orghead__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem 1rem; margin-top: 1rem; }
.orghead__tags { display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 0; }
.orghead__city {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  margin: 0;
  color: var(--color-muted);
  font-size: 0.9rem;
}
.orghead__actions {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0.6rem;
  min-width: 210px;
}
.orghead__actions .btn { justify-content: center; }
.orghead__reassurance {
  margin: -0.1rem 0 0;
  max-width: 20rem;
  color: var(--color-muted);
  font-size: 0.82rem;
  line-height: 1.45;
}
.orghead__quicklink {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  color: var(--color-navy);
  font-size: 0.86rem;
  font-weight: 600;
  text-decoration: none;
}
.orghead__quicklink:hover { color: var(--color-orange-ink); text-decoration: none; }
@media (max-width: 980px) {
  .orghead__inner { grid-template-columns: auto minmax(0, 1fr); }
  .orghead__actions { grid-column: 1 / -1; grid-row: 2; max-width: 360px; flex-direction: row; flex-wrap: wrap; }
  .orghead__actions .btn { width: 100%; }
}
@media (max-width: 700px) {
  .orghead { padding-block-end: 2.5rem; }
  .orghead__back { margin-block-end: 1.5rem; }
  .orghead__inner { grid-template-columns: 1fr; text-align: center; gap: 1.15rem; }
  .orghead__logo { margin-inline: auto; width: 96px; height: 96px; }
  .orghead__meta,
  .orghead__tags,
  .orghead__actions { justify-content: center; }
  .orghead__actions { grid-column: auto; grid-row: auto; width: 100%; margin-inline: auto; }
}

.orgbody {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  gap: 4rem;
  align-items: start;
  padding-block: 4.5rem;
}
@media (max-width: 860px) {
  .orgbody { grid-template-columns: 1fr; gap: 2.5rem; padding-block: 3.25rem; }
}
.orgbody__main { max-width: 720px; }
.orgbody__main .entry-content { font-size: 1.08rem; line-height: 1.85; }
.orgbody__main .entry-content > :first-child { margin-block-start: 0; }
.orgbody__noinfo { color: var(--color-muted); font-style: italic; }
.orgbody__side { position: sticky; top: 1.5rem; }
@media (max-width: 860px) { .orgbody__side { position: static; } }
.orgbody__side .umansheli-org-details {
  margin: 0;
  padding: 1.5rem;
  background: #fff;
  border-radius: 14px;
  box-shadow: 0 10px 26px rgba(23, 34, 59, 0.06);
}
.orgbody__side .umansheli-org-details__title {
  padding-bottom: 0.85rem;
  border-bottom: 1px solid var(--color-border);
}
.orgbody__side .umansheli-org-details dl { gap: 0.65rem 1rem; }
.orgbody__side .umansheli-org-details dd { overflow-wrap: anywhere; }
.orgbody__next {
  margin: 0 0 1.25rem;
  padding: 1.15rem 1.25rem;
  border-inline-start: 3px solid var(--color-orange);
  background: var(--color-surface);
}
.orgbody__next h3 { margin: 0 0 0.55rem; font-size: 1.02rem; }
.orgbody__next ol { margin: 0; padding-inline-start: 1.25rem; color: var(--color-muted); font-size: 0.9rem; }
.orgbody__next li + li { margin-top: 0.3rem; }
.orgbody__cta {
  margin-top: 1rem;
  padding: 1.25rem 1.4rem;
  text-align: start;
  background: rgba(200, 103, 52, 0.08);
  border: 1px solid rgba(200, 103, 52, 0.2);
  border-radius: 14px;
}
.orgbody__cta h3 { margin: 0 0 0.35rem; font-size: 1.03rem; }
.orgbody__cta p {
  margin: 0;
  color: var(--color-muted);
  font-size: 0.88rem;
  line-height: 1.55;
}
.orgbody__ctaalt { margin-top: 0.75rem !important; }
.orgbody__ctaalt a {
  color: var(--color-navy);
  font-size: 0.88rem;
  font-weight: 700;
  text-decoration: underline;
  text-decoration-color: rgba(36, 51, 85, 0.35);
  text-underline-offset: 0.2em;
}
.orgbody__ctaalt a:hover { color: var(--color-orange-ink); text-decoration-color: currentColor; }

/* ------------------------------------------------------------------
   Manifesto page
------------------------------------------------------------------ */
.manifesto-hero {
  background: var(--color-navy);
  color: #fff;
  /* Extra top padding clears the logo overhanging from the header, same as
     the front-page hero. */
  padding-block: 8rem 4rem;
  text-align: center;
  border-bottom: 3px solid var(--color-orange);
}
@media (max-width: 700px) {
  .manifesto-hero { padding-block: 6rem 3rem; }
}
.manifesto-hero__title {
  font-size: clamp(1.8rem, 4vw, 2.5rem);
  margin: 0 0 1.1rem;
  color: #fff;
}
.manifesto-hero .hero__rule { margin: 0 auto; }
.manifesto-hero__back {
  margin: 0 0 1.75rem;
}
.manifesto-hero__back a {
  color: rgba(255, 255, 255, 0.72);
  font-size: 0.85rem;
  font-weight: 600;
}
.manifesto-hero__back a:hover { color: #fff; text-decoration: none; }
/* The shared "arrow" glyph points toward the reading direction (used for
   "next" links); flipped, it reads as "back" without a second icon. */
.manifesto-hero__back .icon { transform: scaleX(-1); }

.manifesto { padding-block: 4rem; }
.manifesto__body { max-width: var(--content-width); margin: 0 auto; }
.manifesto__intro {
  font-size: 1.12rem;
  line-height: 1.8;
  color: var(--color-muted);
}
.manifesto__section { margin-block-start: 2.75rem; }
.manifesto__section h2 { font-size: 1.4rem; margin-bottom: 0.85rem; }
.manifesto__section p { line-height: 1.85; }

.manifesto__tagline {
  margin-block-start: 3rem;
  padding: 2rem 1.5rem;
  text-align: center;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
}
.manifesto__tagline p {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--color-navy);
  margin: 0;
}
.manifesto__tagline p:last-child { color: var(--color-orange-ink); }

/* ------------------------------------------------------------------
   Sidebar
------------------------------------------------------------------ */
.widget {
  margin-bottom: 2.5rem;
}
.widget-title {
  font-size: 1rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-family: var(--font-sans);
  color: var(--color-muted);
  margin-bottom: 1rem;
}
.widget ul { list-style: none; padding: 0; margin: 0; }
.widget ul li { margin-bottom: 0.5rem; }

/* ------------------------------------------------------------------
   Pagination & footer
------------------------------------------------------------------ */
.pagination {
  margin-top: 2rem;
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}
.pagination .page-numbers {
  padding: 0.4rem 0.8rem;
  border: 1px solid var(--color-border);
  border-radius: 8px;
  color: var(--color-text);
}
.pagination .page-numbers.current {
  background: var(--color-accent);
  color: #fff;
  border-color: var(--color-accent);
}

.site-footer {
  border-top: 2px solid var(--color-orange);
  background: var(--color-navy);
  padding: 1.1rem 0;
  color: rgba(255, 255, 255, 0.68);
  font-size: 0.82rem;
}
.site-footer__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem 2rem;
}
.site-footer__identity { min-width: 0; }
.site-footer__brand {
  display: inline-block;
  color: #fff;
  font-family: var(--font-display);
  font-size: 1.1rem;
  font-weight: 700;
  line-height: 1.1;
  text-decoration: none;
}
.site-footer__brand:hover { color: #fff; text-decoration: none; }
.site-footer__tagline {
  margin: 0.2rem 0 0;
  color: rgba(255, 255, 255, 0.58);
  font-size: 0.75rem;
  line-height: 1.35;
}
.site-footer__statement {
  display: flex;
  flex-wrap: wrap;
  gap: 0 0.35rem;
  margin: 0.45rem 0 0;
  color: rgba(255, 255, 255, 0.82);
  font-family: var(--font-display);
  font-size: 0.94rem;
  font-weight: 600;
  line-height: 1.35;
}
.site-footer__statement strong { color: #fff; font-weight: 700; }
.site-footer a { color: #fff; }
.site-footer .footer-menu {
  list-style: none;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.35rem 1.1rem;
  padding: 0;
  margin: 0;
}
.site-footer .footer-menu a {
  color: rgba(255, 255, 255, 0.82);
  text-decoration: none;
}
.site-footer .footer-menu a:hover {
  color: #fff;
  text-decoration: underline;
}
.site-footer__copyright {
  margin: 0;
  color: rgba(255, 255, 255, 0.48);
  white-space: nowrap;
}
@media (max-width: 700px) {
  .site-footer { padding: 1.25rem 0; text-align: center; }
  .site-footer__inner { flex-direction: column; gap: 0.8rem; }
  .site-footer__tagline { max-width: 32rem; }
}

/* ------------------------------------------------------------------
   Comments
------------------------------------------------------------------ */
.comments-area { margin-top: 3rem; }
.comment-list { list-style: none; padding: 0; }
.comment-body {
  padding: 1rem 0;
  border-bottom: 1px solid var(--color-border);
}
.comment-author { font-weight: 600; }
.comment-meta { font-size: 0.8rem; color: var(--color-muted); }

/* ------------------------------------------------------------------
   Accessibility helper
------------------------------------------------------------------ */
.screen-reader-text {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}
.skip-link {
  /* Keep it reachable for keyboard users without placing a 9,999px-wide
     element in this RTL document's scrollable area. */
  position: fixed !important;
  inset-inline-start: 1rem;
  inset-block-start: 1rem;
  width: auto;
  height: auto;
  margin: 0;
  overflow: visible;
  clip: auto;
  clip-path: none;
  white-space: normal;
  transform: translateY(-200%);
  background: var(--color-accent);
  color: #fff;
  padding: 0.5rem 1rem;
  z-index: 100;
}
.skip-link:focus { transform: translateY(0); }

/* ==================================================================
   DESIGN PASS — type scale, the diagonal signature, icons, motion
   ================================================================== */

/* ------------------------------------------------------------------
   Type scale
------------------------------------------------------------------ */
body {
  font-family: var(--font-sans);
  font-size: 17px;
  font-weight: 400;
  line-height: 1.7;
  letter-spacing: 0;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.01em;
}

/* Hebrew display type wants a touch more weight to hold its colour at size. */
.hero__title,
.dirhead__title,
.orghead__title { font-weight: 900; }

/* Eyebrows and labels: the utility voice. Sans, small, wide, uppercase for
   Latin — Hebrew ignores the casing but keeps the tracking. */
.hero__eyebrow,
.stat__label,
.widget-title {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 0.78rem;
  letter-spacing: 0.14em;
}

/* ------------------------------------------------------------------
   The signature: skewed accent strokes
------------------------------------------------------------------ */
/* Every accent rule in the design is this shape — a stroke cut at the same
   angle as the diagonal through the logo's letterforms. */
.skew-rule,
.section-title::after,
.hero__rule {
  display: block;
  width: 52px;
  height: 4px;
  background: var(--color-orange);
  transform: skewX(var(--brand-skew));
  border-radius: 1px;
}
.section-title::after {
  content: "";
  margin: 0.75rem auto 0;
}

/* The hero and footer edges pick up the same angle, at a whisper. */
.hero--home { position: relative; overflow: hidden; }
.hero--home::after {
  content: "";
  position: absolute;
  inset-inline-end: -12%;
  bottom: -55%;
  width: 46%;
  height: 150%;
  background: rgba(255, 255, 255, 0.028);
  transform: skewX(var(--brand-skew));
  pointer-events: none;
}

/* ------------------------------------------------------------------
   Icons
------------------------------------------------------------------ */
.icon {
  flex: none;
  vertical-align: -0.18em;
}
/* Icons sitting next to text get consistent spacing without per-use margins. */
.has-icon {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
}

/* ------------------------------------------------------------------
   Motion
------------------------------------------------------------------ */
/* Only hidden once JS confirms motion is wanted, so a no-JS or reduced-motion
   visitor never gets stranded with invisible content. */
.has-motion .is-reveal {
  opacity: 0;
  transform: translateY(14px);
}
.has-motion .is-reveal.is-visible {
  opacity: 1;
  transform: none;
  transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
}

@media (prefers-reduced-motion: reduce) {
  .has-motion .is-reveal,
  .has-motion .is-reveal.is-visible {
    opacity: 1;
    transform: none;
    transition: none;
  }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    transition-duration: 0.001ms !important;
  }
}

/* ------------------------------------------------------------------
   Interaction polish
------------------------------------------------------------------ */
.btn {
  transition: background var(--dur) var(--ease), transform 0.18s var(--ease), box-shadow var(--dur) var(--ease);
}
.btn:active { transform: translateY(1px); }

.btn--accent {
  box-shadow: 0 1px 2px rgba(36, 51, 85, 0.18);
}
.btn--accent:hover {
  box-shadow: 0 6px 18px rgba(200, 103, 52, 0.32);
}

/* The arrow in a link nudges toward the reading direction on hover. RTL reads
   right-to-left, so it travels the other way from an English site. */
.btn .icon,
.section-more .icon {
  transition: transform 0.22s var(--ease);
}
.btn:hover .icon,
.section-more a:hover .icon { transform: translateX(4px); }

/* A single visible focus treatment everywhere, keyboard only. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
.chip:focus-visible {
  outline: 2px solid var(--color-orange);
  outline-offset: 3px;
  border-radius: 3px;
}

/* Chips get the skewed marker when active, tying the filter to the signature. */
.chip {
  position: relative;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease),
              border-color var(--dur) var(--ease);
}
.chip.is-active::after {
  content: "";
  position: absolute;
  bottom: -7px;
  inset-inline-start: 50%;
  width: 18px;
  height: 3px;
  margin-inline-start: -9px;
  background: var(--color-orange);
  transform: skewX(var(--brand-skew));
  border-radius: 1px;
}

/* Hero rule sits inline with the centred hero content. */
.hero__rule { margin: 0 auto 1.4rem; }

/* Search field: icon tucked inside, not floating beside. */
.orgfilter__search { position: relative; display: block; }
.orgfilter__search .icon {
  position: absolute;
  inset-inline-start: 1rem;
  top: 50%;
  margin-top: -9px;
  color: var(--color-muted);
  pointer-events: none;
}
.orgfilter__search input { padding-inline-start: 2.6rem; text-align: start; }

/* Card lift picks up the brand colour on the border, not just a shadow. */
.umansheli-org-card {
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease),
              border-color var(--dur) var(--ease);
}
.umansheli-org-card:hover { border-color: rgba(200, 103, 52, 0.4); }

/* ------------------------------------------------------------------
   Home hero — the Tziyun at Uman
   ------------------------------------------------------------------
   The most characteristic image in this subject's world, so it opens the
   page. A navy scrim sits over it: the alpha was picked by measuring the
   brightest block of the photograph (the sky, rgb(240,212,178)) and solving
   for white text — 0.70 is the lightest value that still clears 4.5:1, so the
   gradient never goes below it.
------------------------------------------------------------------ */
.hero--home {
  background-color: var(--color-navy); /* fallback, and fills any letterbox */
  background-image: url("assets/images/hero-uman.jpg");
  background-size: cover;
  background-position: center 62%;
  background-repeat: no-repeat;
  /* Extra top padding clears the logo that overhangs from the header; the
     taller block also gives the hero more presence. */
	padding-block: 8rem 6rem;
	min-height: 70vh;
  box-sizing: border-box;
}

/* Serve a smaller file to smaller screens. */
@media (max-width: 1000px) {
  .hero--home { background-image: url("assets/images/hero-uman-1000.jpg"); }
}
@media (max-width: 600px) {
	.hero--home {
    background-image: url("assets/images/hero-uman-600.jpg");
		padding-block: 6.5rem 4.25rem;
    min-height: 0;
  }
}

/* The scrim. Denser top and bottom, lightest through the middle where the
   architecture is worth seeing. */
.hero--home::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(36, 51, 85, 0.80) 0%,
    rgba(36, 51, 85, 0.70) 42%,
    rgba(36, 51, 85, 0.78) 78%,
    rgba(36, 51, 85, 0.88) 100%
  );
  pointer-events: none;
}

/* Content and the skew highlight both ride above the scrim. */
.hero--home > .container { position: relative; z-index: 2; }
.hero--home::after { z-index: 1; }

/* With a photograph behind it the type needs a little help holding its edge. */
.hero--home .hero__title {
  text-shadow: 0 1px 24px rgba(11, 18, 35, 0.45);
}
.hero--home .hero__lead {
  color: rgba(255, 255, 255, 0.88);
  text-shadow: 0 1px 12px rgba(11, 18, 35, 0.4);
}