/*
 * Lifeline 3 — what Kadence has no setting for.
 *
 * Colours come from Kadence's palette variables (--global-palette1 … 9), so a
 * colour changed in the Customizer flows through here as well. The only
 * hard-coded colour is the logo red, used for thin accents.
 */

:root {
	--ll-logo-red: #c8102e; /* brand red */
	--ll-radius: 0; /* square corners throughout, like redcross.org.uk */
	--ll-shadow: 0 1px 2px rgba(0, 0, 0, 0.06), 0 8px 24px -12px rgba(0, 0, 0, 0.2);
	--ll-shadow-hover: 0 2px 4px rgba(0, 0, 0, 0.08), 0 18px 36px -14px rgba(0, 0, 0, 0.3);
	--ll-section-y: clamp(56px, 8vw, 104px);
}

/* ---------- Basics ---------- */

:where(a, button, input, select, textarea, summary):focus-visible {
	outline: 3px solid var(--global-palette1);
	outline-offset: 3px;
}

/* Kadence sets 20px on coloured groups in page content
   (.entry-content .wp-block-group.has-background), which would squash a
   grey or red band. These selectors are written to outrank it. */
body .ll-section,
body .entry-content .wp-block-group.ll-section {
	padding-top: var(--ll-section-y);
	padding-bottom: var(--ll-section-y);
}
/* Two white sections in a row would stack both paddings into one large gap;
   halve both sides of the join so the white space reads as spacing, not a hole. */
body .entry-content .wp-block-group.ll-section:not(.has-background) + .ll-section:not(.has-background) {
	padding-top: calc(var(--ll-section-y) * 0.5);
}
body .entry-content .wp-block-group.ll-section:not(.has-background):has(+ .ll-section:not(.has-background)) {
	padding-bottom: calc(var(--ll-section-y) * 0.5);
}

/* Small red label above a heading. */
.ll-eyebrow {
	font-size: 0.85rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--global-palette1);
	margin-bottom: 0.6rem;
}

/* Short logo-red bar above a section heading, echoing the ribbon. */
.ll-title-bar::before {
	content: "";
	display: block;
	width: 56px;
	height: 5px;
	background: var(--ll-logo-red);
	margin-bottom: 18px;
}
.has-text-align-center.ll-title-bar::before {
	margin-left: auto;
	margin-right: auto;
}

.ll-lead {
	font-size: clamp(1.1rem, 1.6vw, 1.3rem);
	line-height: 1.55;
	color: var(--global-palette5);
}

/* "Read more →" style links. */
.ll-link-arrow a,
a.ll-link-arrow {
	font-weight: 700;
	color: var(--global-palette1);
	text-decoration: none;
}
.ll-link-arrow a::after,
a.ll-link-arrow::after {
	content: "\2192";
	display: inline-block;
	margin-left: 0.35em;
	transition: transform 0.15s ease;
}
.ll-link-arrow a:hover,
a.ll-link-arrow:hover {
	color: var(--global-palette2);
	text-decoration: underline;
	text-underline-offset: 3px;
}
.ll-link-arrow a:hover::after,
a.ll-link-arrow:hover::after {
	transform: translateX(3px);
}

/*
 * Button variants. Kadence styles outline buttons with a fairly specific
 * selector, so these are anchored on body to win without !important.
 */
/* Outline button on dark backgrounds (hero, black and red bands). */
body .wp-block-button.is-style-outline.ll-on-dark > .wp-block-button__link {
	color: #fff;
	border: 2px solid rgba(255, 255, 255, 0.85);
	background: transparent;
}
body .wp-block-button.is-style-outline.ll-on-dark > .wp-block-button__link:hover,
body .wp-block-button.is-style-outline.ll-on-dark > .wp-block-button__link:focus-visible {
	background: #fff;
	color: var(--global-palette3) !important; /* beats the white text-colour class, which WordPress marks !important */
	border-color: #fff;
}
/* White button on red bands. */
body .wp-block-button.ll-btn-white > .wp-block-button__link {
	background: #fff;
	color: var(--global-palette2);
	border: 2px solid #fff;
}
body .wp-block-button.ll-btn-white > .wp-block-button__link:hover,
body .wp-block-button.ll-btn-white > .wp-block-button__link:focus-visible {
	background: var(--global-palette3);
	border-color: var(--global-palette3);
	color: #fff;
}
/* Outline buttons on light backgrounds: red outline, fills on hover. */
body .wp-block-button.is-style-outline:not(.ll-on-dark) > .wp-block-button__link {
	border: 2px solid var(--global-palette1);
	color: var(--global-palette1);
	background: transparent;
}
body .wp-block-button.is-style-outline:not(.ll-on-dark) > .wp-block-button__link:hover {
	background: var(--global-palette1);
	color: #fff;
}

/* ---------- Hero ----------
 *
 * The photo is shown as it is, with no tint or gradient over it. The words
 * sit on a solid white panel with a red top edge in a lower corner: navy
 * headline, red Donate button. White keeps the page about 60% white and
 * avoids red-on-navy, which is too low in contrast to read.
 */

.ll-hero__panel {
	background: #fff;
	color: var(--global-palette4);
	border-top: 6px solid var(--global-palette1);
	padding: clamp(28px, 3.5vw, 48px);
	max-width: 640px;
}
.ll-hero__panel h1 {
	color: var(--global-palette3);
	/* Archivo is a wide face: a little smaller than a condensed one would be. */
	font-size: clamp(1.9rem, 2.9vw, 2.6rem);
	letter-spacing: -0.01em;
	line-height: 1.08;
	margin: 0 0 16px;
}
.ll-page-hero .ll-hero__panel h1 {
	font-size: clamp(1.9rem, 3vw, 2.6rem);
}
body .ll-hero__panel p {
	color: var(--global-palette4);
	margin: 0 0 14px;
}
body .ll-hero__panel .ll-lead {
	font-size: clamp(1.05rem, 1.4vw, 1.25rem);
	color: var(--global-palette5);
}
body .ll-hero__panel .ll-eyebrow {
	color: var(--global-palette1);
}
.ll-hero__panel .wp-block-buttons {
	margin-top: 22px;
}
body .ll-hero__panel .ll-hero__trust {
	font-size: 0.92rem;
	color: var(--global-palette6);
	margin: 18px 0 0;
}

/*
 * The home banner fills the screen at any size: the window height minus the
 * header (and the admin bar when signed in). Header heights match the Kadence
 * settings in kadence-defaults.php: 40px top bar + 92px main row on desktop,
 * a single 76px row on tablets and 70px on phones. `svh` uses the visible
 * height on phones, so the browser's address bar never hides the panel.
 * A floor stops it collapsing on very short, wide screens.
 */
:root {
	--ll-header-h: 132px;
}
@media (max-width: 1024px) {
	:root {
		--ll-header-h: 76px;
	}
}
@media (max-width: 767px) {
	:root {
		--ll-header-h: 70px;
	}
}
body .ll-hero.wp-block-cover {
	min-height: max(440px, calc(100vh - var(--ll-header-h) - var(--wp-admin--admin-bar--height, 0px))) !important;
	min-height: max(440px, calc(100svh - var(--ll-header-h) - var(--wp-admin--admin-bar--height, 0px))) !important;
}

/* Short, wide screens (small laptops): a more compact panel so the banner
   still ends at the bottom of the window. */
@media (min-width: 782px) and (max-height: 820px) {
	body .ll-hero.wp-block-cover {
		padding-top: 24px !important;
	}
	.ll-hero .ll-hero__panel {
		padding: 26px 32px;
	}
	.ll-hero .ll-hero__panel h1 {
		font-size: clamp(1.7rem, 2.6vw, 2.2rem);
		margin-bottom: 10px;
	}
	.ll-hero .ll-hero__panel .wp-block-buttons {
		margin-top: 14px;
	}
	body .ll-hero .ll-hero__panel .ll-hero__trust {
		margin-top: 12px;
	}
}

/* Short phones: tighter panel so it still fits above the fold. */
@media (max-width: 781px) and (max-height: 740px) {
	.ll-hero .ll-hero__panel {
		padding: 22px 22px 24px;
	}
	.ll-hero .ll-hero__panel h1 {
		font-size: 1.55rem;
		margin-bottom: 8px;
	}
	.ll-hero .ll-hero__panel .ll-lead {
		font-size: 1rem;
		line-height: 1.45;
	}
	.ll-hero .ll-hero__panel .ll-eyebrow {
		margin-bottom: 6px;
	}
	.ll-hero .ll-hero__panel .wp-block-buttons {
		margin-top: 12px;
	}
	body .ll-hero .ll-hero__panel .ll-hero__trust {
		display: none;
	}
}

/* On phones the photo comes first and the red panel runs full width under it. */
@media (max-width: 781px) {
	.ll-page-hero.wp-block-cover {
		min-height: 0 !important;
		padding: 260px 0 0 !important;
		align-items: stretch;
	}
	/* Home banner: still full height, panel anchored to the bottom edge. */
	body .ll-hero.wp-block-cover {
		padding: 0 !important;
		align-items: flex-end;
	}
	.ll-hero > .wp-block-cover__inner-container,
	.ll-page-hero > .wp-block-cover__inner-container {
		width: 100%;
		max-width: none;
	}
	.ll-hero__panel {
		max-width: none;
	}
}

/* Home banner built with Kadence blocks (Row Layout with the class
   ll-hero-fill): fills the screen under the header, as the banner above. */
body .kb-row-layout-wrap.ll-hero-fill > .kt-row-column-wrap {
	min-height: max(440px, calc(100vh - var(--ll-header-h) - var(--wp-admin--admin-bar--height, 0px)));
	min-height: max(440px, calc(100svh - var(--ll-header-h) - var(--wp-admin--admin-bar--height, 0px)));
}

/* Donate links scroll to the form clear of the sticky header. */
#donate-form {
	scroll-margin-top: 120px;
}

/* ---------- Cards ---------- */

/*
 * In a classic theme like Kadence, WordPress wraps each group's content in an
 * extra .wp-block-group__inner-container. Every rule below that depends on
 * parent/child structure targets both shapes, so it holds either way.
 */
.ll-card {
	background: var(--global-palette9);
	border-radius: var(--ll-radius);
	box-shadow: var(--ll-shadow);
	overflow: hidden;
	height: 100%;
	transition: box-shadow 0.2s ease, transform 0.2s ease;
}
.ll-card,
.ll-card > .wp-block-group__inner-container,
.ll-card__body,
.ll-card__body > .wp-block-group__inner-container,
.ll-action-card,
.ll-action-card > .wp-block-group__inner-container {
	display: flex;
	flex-direction: column;
	flex: 1;
}
.ll-card:hover {
	box-shadow: var(--ll-shadow-hover);
	transform: translateY(-2px);
}
.ll-card .wp-block-image,
.ll-card .wp-block-post-featured-image {
	margin: 0;
}
.ll-card .wp-block-image img,
.ll-card .wp-block-post-featured-image img {
	width: 100%;
	height: auto;
	aspect-ratio: 3 / 2;
	object-fit: cover;
	display: block;
}
.ll-card__body {
	padding: 24px 26px 28px;
}
.ll-card__body .ll-link-arrow {
	margin-top: auto;
	padding-top: 8px;
	margin-bottom: 0;
}
/* A second link under the first (the Sudan and Yemen card). */
body .ll-card__body .ll-link-arrow + .ll-link-arrow {
	margin-top: 0;
	padding-top: 6px;
}
.ll-card__body h3,
.ll-card__body .wp-block-post-title {
	margin: 0 0 0.5rem;
	font-size: 1.55rem;
}
.ll-card__body h3 a {
	color: inherit;
	text-decoration: none;
}
.ll-card__body h3 a:hover {
	color: var(--global-palette1);
}
.ll-card__tag {
	font-size: 0.8rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--global-palette5);
	margin: 0 0 0.4rem;
}
.ll-card--urgent .ll-card__tag {
	color: var(--global-palette1);
}

/*
 * Kadence gives content paragraphs and headings generous margins
 * (.entry-content p, h3). Inside a card they need to be tight, so these
 * are anchored on body to take precedence.
 */
body .ll-card .wp-block-image,
body .ll-card .wp-block-post-featured-image {
	margin: 0;
}
body .ll-card__body .ll-card__tag {
	margin: 0 0 6px;
}
body .ll-card__body h3,
body .ll-card__body .wp-block-post-title {
	margin: 0 0 10px;
}
body .ll-card__body p:not(.ll-card__tag):not(.ll-link-arrow),
body .ll-card__body .wp-block-post-excerpt {
	margin: 0 0 14px;
}
body .ll-card__body .wp-block-post-excerpt__excerpt {
	margin: 0;
}
body .ll-action-card h3 {
	margin: 0 0 10px;
}
body .ll-action-card p {
	margin: 0 0 14px;
}
body .ll-stats .ll-stat__num {
	margin: 0 0 8px;
}
body .ll-stats .ll-stat__label {
	margin: 0;
}

/* Equal-height cards in a row. */
.ll-cards > .wp-block-column {
	display: flex;
	flex-direction: column;
}

/* Story cards from the latest-posts query. */
.ll-story-grid {
	gap: 28px;
}

/* "Take action" cards: white, red top edge. */
.ll-action-card {
	background: var(--global-palette9);
	border-top: 5px solid var(--global-palette1);
	border-radius: var(--ll-radius);
	box-shadow: var(--ll-shadow);
	padding: 30px 28px 32px;
	height: 100%;
}
.ll-action-card h3 {
	margin-top: 0;
}
.ll-action-card .wp-block-buttons {
	margin-top: auto;
	padding-top: 12px;
}

/* ---------- Vision and mission ----------
 * White cards with a red top edge. The vision is short, so it is set large;
 * the mission is longer, so it is set at a comfortable reading size.
 */
.ll-statement {
	background: var(--global-palette9);
	border: 1px solid var(--global-palette7);
	border-top: 5px solid var(--global-palette1);
	padding: clamp(28px, 3.5vw, 44px);
	height: 100%;
}
body .ll-statement .ll-statement__text {
	color: var(--global-palette3);
	font-size: clamp(1.1rem, 1.4vw, 1.25rem);
	line-height: 1.6;
	margin: 0;
}
body .ll-statement--vision .ll-statement__text {
	font-family: var(--global-heading-font-family);
	font-weight: 800;
	font-size: clamp(1.6rem, 2.6vw, 2.2rem);
	line-height: 1.2;
}

/* ---------- Media + text ---------- */

.ll-media-text .wp-block-media-text__media img {
	border-radius: var(--ll-radius);
	aspect-ratio: 4 / 3;
	object-fit: cover;
}
.ll-media-text .wp-block-media-text__content {
	padding: 0 0 0 clamp(24px, 5vw, 72px);
}
.ll-media-text.has-media-on-the-right .wp-block-media-text__content {
	padding: 0 clamp(24px, 5vw, 72px) 0 0;
}
@media (max-width: 600px) {
	.ll-media-text .wp-block-media-text__content,
	.ll-media-text.has-media-on-the-right .wp-block-media-text__content {
		padding: 24px 0 0;
	}
}
.ll-ticks {
	list-style: none;
	padding-left: 0;
}
.ll-ticks li {
	position: relative;
	padding-left: 30px;
	margin-bottom: 0.5rem;
}
.ll-ticks li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.45em;
	width: 16px;
	height: 9px;
	border-left: 3px solid var(--global-palette1);
	border-bottom: 3px solid var(--global-palette1);
	transform: rotate(-45deg);
}

/* ---------- Stats band ----------
 * White, with navy figures and a short red rule above each, so the page stays
 * mostly white.
 */

.ll-stats {
	gap: 0 !important;
}
.ll-stats > .wp-block-column {
	padding: 8px 28px;
	border-left: 1px solid var(--global-palette7);
}
.ll-stats > .wp-block-column:first-child {
	border-left: 0;
	padding-left: 0;
}
@media (max-width: 781px) {
	.ll-stats > .wp-block-column {
		border-left: 0;
		border-top: 1px solid var(--global-palette7);
		padding: 22px 0;
	}
	.ll-stats > .wp-block-column:first-child {
		border-top: 0;
	}
}
.ll-stat__num {
	font-family: var(--global-heading-font-family);
	font-size: clamp(2.6rem, 5vw, 3.6rem);
	font-weight: 800;
	line-height: 1;
	color: var(--global-palette3);
	margin: 0 0 0.4rem;
}
.ll-stat__num::before {
	content: "";
	display: block;
	width: 40px;
	height: 4px;
	background: var(--global-palette1);
	margin-bottom: 18px;
}
.ll-stat__label {
	color: var(--global-palette5);
	margin: 0;
}

/* ---------- Trust strip ---------- */

.ll-trust > .wp-block-column {
	text-align: center;
}
.ll-trust__icon {
	width: 56px;
	height: 56px;
	margin: 0 auto 14px;
	background: var(--global-palette8);
	position: relative;
	font-size: 0; /* the glyph in the text is a fallback; the icon is drawn below */
}
.ll-trust__icon::before {
	content: "";
	position: absolute;
	inset: 14px;
	background: var(--global-palette1);
	-webkit-mask: var(--ll-icon) center / contain no-repeat;
	mask: var(--ll-icon) center / contain no-repeat;
}
.ll-trust > .wp-block-column:nth-child(1) .ll-trust__icon {
	/* shield with tick */
	--ll-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z'/%3E%3Cpath d='m9 12 2 2 4-4'/%3E%3C/svg%3E");
}
.ll-trust > .wp-block-column:nth-child(2) .ll-trust__icon {
	/* padlock */
	--ll-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='11' width='16' height='10' rx='2'/%3E%3Cpath d='M8 11V7a4 4 0 0 1 8 0v4'/%3E%3C/svg%3E");
}
.ll-trust > .wp-block-column:nth-child(3) .ll-trust__icon {
	/* receipt */
	--ll-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 2h14v20l-3-2-2 2-2-2-2 2-2-2-3 2z'/%3E%3Cpath d='M9 7h6M9 11h6M9 15h4'/%3E%3C/svg%3E");
}
.ll-trust h3 {
	font-size: 1.2rem;
	margin: 0 0 0.35rem;
}
.ll-trust p:not(.ll-trust__icon) {
	font-size: 0.98rem;
	color: var(--global-palette5);
	margin: 0;
}

/* ---------- Appeal page ---------- */

.ll-donate-card {
	/* Clear of the sticky header when a Donate link scrolls here. */
	scroll-margin-top: 110px;
	background: var(--global-palette9);
	border-radius: var(--ll-radius);
	box-shadow: var(--ll-shadow-hover);
	border-top: 5px solid var(--global-palette1);
	padding: 26px 24px;
}
@media (min-width: 782px) {
	.ll-donate-card {
		position: sticky;
		top: 110px;
	}
}
/* ---------- Zakat calculator and its guide ---------- */

.ll-zakat-guide {
	background: var(--global-palette8);
	border-radius: var(--ll-radius);
	border-top: 5px solid var(--global-palette1);
	padding: 22px 24px 14px;
	font-size: 0.94rem;
	line-height: 1.55;
}
.ll-zakat-guide h2 {
	font-size: 1.35rem;
	margin: 0 0 0.6rem;
}
.ll-zakat-guide h3 {
	font-size: 1rem;
	margin: 1rem 0 0.3rem;
}
.ll-zakat-guide p,
.ll-zakat-guide ul,
.ll-zakat-guide ol {
	margin-top: 0;
	margin-bottom: 0.4rem;
}
.ll-zakat-guide li {
	margin-bottom: 0.15rem;
}
/* In view while the long form is filled in. A short screen scrolls the guide itself, so nothing is cut off. */
@media (min-width: 782px) {
	.ll-zakat-guide {
		position: sticky;
		top: 110px;
		max-height: calc(100vh - 130px);
		overflow-y: auto;
	}
}

.ll-donate-card h2 {
	font-size: 1.6rem;
	margin-top: 0;
}

.ll-faq .wp-block-details {
	border-bottom: 1px solid var(--global-palette7);
	padding: 18px 0;
}
.ll-faq .wp-block-details summary {
	font-weight: 700;
	font-size: 1.1rem;
	color: var(--global-palette3);
	cursor: pointer;
}
.ll-faq .wp-block-details[open] summary {
	color: var(--global-palette1);
	margin-bottom: 0.6rem;
}

/* ---------- Header & footer ---------- */

/* Top bar quick links: small, white, separated by thin rules. */
.site-top-header-wrap .secondary-navigation .menu > li + li {
	border-left: 1px solid rgba(255, 255, 255, 0.3);
}
.site-header .header-button {
	letter-spacing: 0.01em;
}

.site-footer .widget-title,
.site-footer .wp-block-heading {
	color: #fff;
	font-size: 1.05rem;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	margin-bottom: 1rem;
}
.site-footer .widget ul {
	list-style: none;
	padding: 0;
	margin: 0;
}
.site-footer .widget li {
	margin-bottom: 0.55rem;
}
/* Kadence's footer link colour setting does not reach block widgets. */
body .site-footer a {
	color: #fff;
	text-decoration: none;
}
body .site-footer a:hover {
	color: var(--global-palette7);
}
.site-footer a:hover {
	text-decoration: underline;
	text-underline-offset: 3px;
}
.site-footer .ll-footer-logo img {
	max-width: 230px; /* the white horizontal logo; never under 140 px */
	height: auto;
}
body .site-footer .site-bottom-footer-wrap {
	color: var(--global-palette7);
}

/* ---------- Header details ---------- */

body .site-header .header-button {
	border-radius: 0;
	text-transform: uppercase;
	letter-spacing: 0.04em;
}
.site-top-header-wrap .secondary-navigation .menu > li + li {
	border-left-color: rgba(255, 255, 255, 0.35);
}

/* ---------- Mega menu (desktop main menu) ----------
 *
 * Top-level items with a dropdown (li.ll-mega, added in inc/mega-menu.php)
 * open a full-width white panel under the header: a grid of links, each
 * with a photo, title and short description. Kadence still decides when it
 * opens (hover, keyboard toggle, click); these rules only change how the
 * open dropdown looks. Phones keep Kadence's slide-out menu.
 */
@media (min-width: 1025px) {
	/* Let the panel measure from the full-width header row, not the item. */
	.header-navigation .menu > li.ll-mega {
		position: static;
	}
	body .header-navigation ul li.ll-mega > ul.sub-menu {
		left: 0;
		right: 0;
		width: auto;
		top: 100%;
		background: #fff;
		border-top: 4px solid var(--global-palette1);
		border-bottom: 1px solid var(--global-palette7);
		box-shadow: 0 18px 30px -18px rgba(11, 42, 74, 0.35);
		padding: 28px max(24px, calc((100vw - 1240px) / 2)) 32px;
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 12px 28px;
	}
	/* Open in exactly the states Kadence opens a dropdown. */
	body .header-navigation:not(.click-to-open) ul li.ll-mega:hover > ul.sub-menu,
	body .header-navigation ul li.ll-mega.menu-item--toggled-on > ul.sub-menu,
	body .header-navigation ul li.ll-mega:not(.menu-item--has-toggle):focus-within > ul.sub-menu,
	body .header-navigation.click-to-open ul li.ll-mega > ul.sub-menu.opened {
		display: grid;
	}
	/* An invisible strip above the panel, so moving the mouse down from the
	   menu label to the panel does not close it on the way. */
	body .header-navigation ul li.ll-mega > ul.sub-menu::before {
		content: "";
		position: absolute;
		left: 0;
		right: 0;
		bottom: 100%;
		height: 32px;
	}
	body .header-navigation ul li.ll-mega > ul.sub-menu > li {
		border: 0;
	}
	body .header-navigation ul li.ll-mega > ul.sub-menu > li > a,
	body .header-navigation ul li.ll-mega li.ll-col > ul.sub-menu > li > a {
		width: auto;
		display: flex;
		align-items: center;
		gap: 16px;
		padding: 10px;
		color: var(--global-palette3);
		text-decoration: none;
	}
	body .header-navigation ul li.ll-mega > ul.sub-menu > li > a:hover,
	body .header-navigation ul li.ll-mega > ul.sub-menu > li > a:focus-visible,
	body .header-navigation ul li.ll-mega li.ll-col > ul.sub-menu > li > a:hover,
	body .header-navigation ul li.ll-mega li.ll-col > ul.sub-menu > li > a:focus-visible {
		background: var(--global-palette8);
	}
	body .header-navigation ul li.ll-mega > ul.sub-menu > li.current-menu-item > a,
	body .header-navigation ul li.ll-mega li.ll-col > ul.sub-menu > li.current-menu-item > a {
		background: var(--global-palette8);
	}
	/* Columns (version 5.28): a heading with its links always shown under it. */
	body .header-navigation ul li.ll-mega > ul.sub-menu > li.ll-col {
		display: flex;
		flex-direction: column;
	}
	body .header-navigation ul li.ll-mega li.ll-col > .ll-col__label {
		display: block;
		padding: 0 10px 10px;
		margin-bottom: 6px;
		border-bottom: 2px solid var(--global-palette7);
		font-size: 0.8rem;
		font-weight: 700;
		letter-spacing: 0.06em;
		text-transform: uppercase;
		color: var(--global-palette1);
	}
	body .header-navigation ul li.ll-mega li.ll-col > .dropdown-nav-special-toggle {
		display: none;
	}
	body .header-navigation ul li.ll-mega li.ll-col > ul.sub-menu {
		display: block !important;
		position: static;
		left: auto;
		top: auto;
		width: auto;
		min-width: 0;
		margin: 0;
		padding: 0;
		border: 0;
		background: transparent;
		box-shadow: none;
		opacity: 1;
		visibility: visible;
		clip: auto;
		transform: none;
		height: auto;
		overflow: visible;
	}
	body .header-navigation ul li.ll-mega li.ll-col > ul.sub-menu > li {
		border: 0;
	}
	.ll-mega__img {
		flex: 0 0 auto;
		width: 112px;
		height: 80px;
		overflow: hidden;
		background: var(--global-palette8);
	}
	.ll-mega__img img {
		width: 100%;
		height: 100%;
		object-fit: cover;
		display: block;
		transition: transform 0.25s ease;
	}
	.header-navigation li.ll-mega > ul.sub-menu > li > a:hover .ll-mega__img img,
	.header-navigation li.ll-mega li.ll-col > ul.sub-menu > li > a:hover .ll-mega__img img {
		transform: scale(1.05);
	}
	.ll-mega__text {
		display: flex;
		flex-direction: column;
		gap: 4px;
		min-width: 0;
	}
	.ll-mega__title {
		font-family: var(--global-heading-font-family);
		font-weight: 700;
		font-size: 1.05rem;
		line-height: 1.25;
		color: var(--global-palette3);
	}
	.header-navigation li.ll-mega > ul.sub-menu > li > a:hover .ll-mega__title,
	.header-navigation li.ll-mega li.ll-col > ul.sub-menu > li > a:hover .ll-mega__title {
		color: var(--global-palette1);
	}
	.ll-mega__desc {
		font-size: 0.92rem;
		font-weight: 400;
		line-height: 1.4;
		color: var(--global-palette5);
	}
}
/*
 * Five top-level items (version 5.28) fit on one line on a laptop screen in
 * every language: a little less space and type between 1025 and 1439px.
 */
@media (min-width: 1025px) and (max-width: 1439px) {
	body .main-navigation .primary-menu-container > ul > li.menu-item > a {
		padding-left: 8px;
		padding-right: 8px;
		font-size: 18px;
	}
}
/* Phones and tablets use Kadence's slide-out menu: hide the mega extras. */
@media (max-width: 1024px) {
	.ll-mega__img,
	.ll-mega__desc {
		display: none;
	}
}
/* Column headings in the phone menu: a small label, its links always open. */
.mobile-navigation li.ll-col > .drawer-nav-drop-wrap .drawer-sub-toggle {
	display: none;
}
.mobile-navigation li.ll-col > ul.sub-menu {
	display: block !important;
}
.mobile-navigation .ll-col__label {
	display: block;
	padding: 1em 1em 0.35em;
	font-size: 0.78rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	opacity: 0.75;
}

/* ---------- Contact page ---------- */

.ll-contact {
	border-top: 1px solid var(--global-palette7);
}
body .ll-contact .ll-contact__label {
	font-size: 0.82rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--global-palette1);
	margin: 22px 0 4px;
}
body .ll-contact .ll-contact__value {
	color: var(--global-palette3);
	font-size: 1.08rem;
	margin: 0;
	padding-bottom: 20px;
	border-bottom: 1px solid var(--global-palette7);
}
body .ll-contact .ll-contact__value a {
	color: var(--global-palette3);
	text-decoration-color: var(--global-palette1);
	text-underline-offset: 3px;
}
.ll-form-card {
	background: var(--global-palette9);
	border: 1px solid var(--global-palette7);
	border-top: 5px solid var(--global-palette1);
	padding: clamp(24px, 3.5vw, 44px);
}
.ll-form-card h2 {
	margin-top: 0;
	font-size: 1.7rem;
}

/* ---------- Forms ---------- */

.ll-form__row {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0 20px;
}
@media (max-width: 600px) {
	.ll-form__row {
		grid-template-columns: 1fr;
	}
}
body .ll-form .ll-form__field {
	margin: 0 0 18px;
}
.ll-form label {
	display: block;
	font-weight: 700;
	color: var(--global-palette3);
	margin-bottom: 6px;
}
.ll-form__req {
	font-weight: 400;
	color: var(--global-palette6);
	font-size: 0.88em;
}
.ll-form input[type="text"],
.ll-form input[type="email"],
.ll-form input[type="tel"],
.ll-form select,
.ll-form textarea {
	width: 100%;
	border: 1px solid #b9c0cc;
	border-radius: 0;
	background: #fff;
	color: var(--global-palette4);
	padding: 12px 14px;
	font-size: 1rem;
	line-height: 1.4;
}
.ll-form input:focus,
.ll-form select:focus,
.ll-form textarea:focus {
	border-color: var(--global-palette3);
	outline: 3px solid var(--global-palette1);
	outline-offset: 1px;
}
.ll-form textarea {
	min-height: 160px;
	resize: vertical;
}
body .ll-form .ll-form__privacy {
	font-size: 0.92rem;
	color: var(--global-palette5);
	margin: 4px 0 20px;
}
.ll-form__submit {
	border-radius: 0;
	padding: 14px 32px;
	font-weight: 700;
}
/* Honeypot: off-screen, not display:none (some bots skip hidden fields). */
.ll-form__hp {
	position: absolute !important;
	inset-inline-start: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}
.ll-form__notice {
	padding: 16px 18px;
	margin-bottom: 20px;
	border-inline-start: 5px solid;
	font-weight: 600;
}
.ll-form__notice.is-success {
	background: #ecf6ef;
	border-color: #13612e;
	color: #0f4d24;
}
.ll-form__notice.is-error {
	background: #fbeaec;
	border-color: var(--global-palette1);
	color: var(--global-palette2);
}
/* Jumping to the form (after sending) should not hide it under the sticky header. */
#contact-form {
	scroll-margin-top: 160px;
}

/* ---------- Where we work map ---------- */

.ll-map__canvas svg {
	display: block;
	width: 100%;
	height: auto;
}
.ll-map__c {
	fill: #dde2ea;
	stroke: #fff;
	stroke-width: 0.6;
	stroke-linejoin: round;
}
.ll-map__c.is-active {
	fill: var(--global-palette1);
	transition: fill 0.15s ease;
	cursor: pointer;
}
.ll-map__active:hover .ll-map__c,
.ll-map__active.is-current .ll-map__c {
	fill: var(--global-palette2);
}
.ll-map__active:focus {
	outline: none;
}
.ll-map__active:focus-visible .ll-map__c,
.ll-map__active:focus-visible .ll-map__dot {
	stroke: var(--global-palette3);
	stroke-width: 2.5;
}
.ll-map__dot {
	fill: var(--global-palette1);
	stroke: #fff;
	stroke-width: 2;
	cursor: pointer;
}
.ll-map__active.is-current .ll-map__dot {
	fill: var(--global-palette3);
}
.ll-map__pulse {
	fill: var(--global-palette1);
	opacity: 0.25;
	transform-box: fill-box;
	transform-origin: center;
	animation: ll-pulse 2.4s ease-out infinite;
	pointer-events: none;
}
@keyframes ll-pulse {
	0% { transform: scale(0.6); opacity: 0.45; }
	100% { transform: scale(2.2); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
	.ll-map__pulse {
		animation: none;
	}
}

/* The info card under the map. */
.ll-map__info {
	border-top: 4px solid var(--global-palette1);
	background: var(--global-palette8);
	padding: 24px 28px;
	margin-top: 8px;
	min-height: 150px;
}
body .ll-map__info .ll-map__hint {
	margin: 0;
	color: var(--global-palette5);
	font-size: 1.05rem;
}
body .ll-map__card .ll-map__region {
	font-size: 0.8rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--global-palette1);
	margin: 0 0 4px;
}
body .ll-map__card .ll-map__name {
	margin: 0 0 6px;
	font-size: 1.6rem;
}
body .ll-map__card .ll-map__summary {
	margin: 0 0 10px;
	max-width: 70ch;
}
body .ll-map__card .ll-link-arrow {
	margin: 0;
}

/* Countries by region, under the map. */
.ll-regions {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: 28px 40px;
	margin-top: 48px;
}
body .ll-regions .ll-regions__title {
	font-size: 1.15rem;
	margin: 0 0 12px;
	padding-bottom: 10px;
	border-bottom: 3px solid var(--global-palette1);
}
.ll-regions ul {
	list-style: none;
	margin: 0;
	padding: 0;
}
.ll-regions li {
	border-bottom: 1px solid var(--global-palette7);
}
.ll-regions li a {
	display: block;
	padding: 12px 8px;
	text-decoration: none;
	color: var(--global-palette4);
}
.ll-regions li a:hover,
.ll-regions li a.is-current {
	background: var(--global-palette8);
}
.ll-regions__country {
	display: block;
	font-weight: 700;
	color: var(--global-palette3);
}
.ll-regions li a:hover .ll-regions__country,
.ll-regions li a.is-current .ll-regions__country {
	color: var(--global-palette1);
}
.ll-regions__summary {
	display: block;
	font-size: 0.93rem;
	color: var(--global-palette5);
	margin-top: 2px;
}

/* Latest updates on a country page. */
.ll-updates {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
	gap: 28px;
}
.ll-updates__img img,
.ll-updates__noimg {
	display: block;
	width: 100%;
	aspect-ratio: 3 / 2;
	object-fit: cover;
}
.ll-updates__noimg {
	background: var(--global-palette8);
}
body .ll-updates__empty {
	color: var(--global-palette5);
}
/* An invisible, larger target around each marker, so small places such as
   Gaza are easy to hover and tap (about 32px at desktop width). */
.ll-map__hit {
	fill: transparent;
	cursor: pointer;
}
/* Kadence indents lists in page content; the region lists run flush. */
body .entry-content .ll-regions ul {
	padding-inline-start: 0;
	margin: 0;
}

/* ---------- Languages ---------- */

/* Language switcher in the top bar: English · Français · العربية */
.site-top-header-wrap .secondary-navigation .menu > li.lang-item a {
	font-weight: 600;
}
.site-top-header-wrap .secondary-navigation .menu > li.lang-item.current-lang a {
	text-decoration: underline;
	text-underline-offset: 4px;
	text-decoration-thickness: 2px;
}

/* ---------- Arabic: right-to-left ----------
 * WordPress sets dir="rtl" on Arabic pages. Most of the layout mirrors on its
 * own (flex, grid, text alignment); these rules mirror what is drawn with a
 * fixed left or right.
 */
html[lang^="ar"] body,
html[lang^="ar"] button,
html[lang^="ar"] input,
html[lang^="ar"] select,
html[lang^="ar"] textarea {
	font-family: "Tajawal", var(--global-body-font-family, "Source Sans 3"), sans-serif;
}
html[lang^="ar"] h1,
html[lang^="ar"] h2,
html[lang^="ar"] h3,
html[lang^="ar"] h4,
html[lang^="ar"] .ll-stat__num,
html[lang^="ar"] .ll-mega__title,
html[lang^="ar"] .ll-statement--vision .ll-statement__text,
html[lang^="ar"] .main-navigation,
html[lang^="ar"] .header-button {
	font-family: "Tajawal", var(--global-heading-font-family, "Archivo"), sans-serif;
	letter-spacing: 0;
}
/* Arabic letters join; spaced-out capitals do not apply. */
html[lang^="ar"] .ll-eyebrow,
html[lang^="ar"] .ll-card__tag,
html[lang^="ar"] .ll-col__label,
html[lang^="ar"] .ll-contact__label,
html[lang^="ar"] .ll-map__region,
html[lang^="ar"] .header-button {
	letter-spacing: 0;
	text-transform: none;
}
[dir="rtl"] .ll-link-arrow a::after,
[dir="rtl"] a.ll-link-arrow::after {
	content: "\2190";
	margin-left: 0;
	margin-right: 0.35em;
}
[dir="rtl"] .ll-link-arrow a:hover::after,
[dir="rtl"] a.ll-link-arrow:hover::after {
	transform: translateX(-3px);
}
[dir="rtl"] .ll-ticks li {
	padding-left: 0;
	padding-right: 30px;
}
[dir="rtl"] .ll-ticks li::before {
	left: auto;
	right: 0;
}
[dir="rtl"] .ll-stats > .wp-block-column {
	border-left: 0;
	border-right: 1px solid var(--global-palette7);
}
[dir="rtl"] .ll-stats > .wp-block-column:first-child {
	border-right: 0;
	padding-left: 28px;
	padding-right: 0;
}
@media (max-width: 781px) {
	[dir="rtl"] .ll-stats > .wp-block-column {
		border-right: 0;
		padding: 22px 0;
	}
}
[dir="rtl"] .ll-media-text .wp-block-media-text__content {
	padding: 0 clamp(24px, 5vw, 72px) 0 0;
}
[dir="rtl"] .ll-media-text.has-media-on-the-right .wp-block-media-text__content {
	padding: 0 0 0 clamp(24px, 5vw, 72px);
}
@media (max-width: 600px) {
	[dir="rtl"] .ll-media-text .wp-block-media-text__content,
	[dir="rtl"] .ll-media-text.has-media-on-the-right .wp-block-media-text__content {
		padding: 24px 0 0;
	}
}
[dir="rtl"] .site-top-header-wrap .secondary-navigation .menu > li + li {
	border-left: 0;
	border-right: 1px solid rgba(255, 255, 255, 0.35);
}
/* The banner panel sits in the lower left in Arabic, mirroring English. */
[dir="rtl"] .wp-block-cover.is-position-bottom-right {
	justify-content: flex-start;
}
/* Phone numbers, emails and the charity number stay left-to-right inside Arabic text. */
[dir="rtl"] a[href^="tel:"],
[dir="rtl"] a[href^="mailto:"] {
	unicode-bidi: isolate;
	direction: ltr;
}

/* Language links in the phone menu panel. */
.ll-langs ul {
	list-style: none;
	margin: 0 0 18px;
	padding: 0;
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
}
body .ll-langs a {
	display: inline-block;
	padding: 8px 14px;
	border: 1px solid rgba(255, 255, 255, 0.45);
	color: #fff;
	text-decoration: none;
	font-weight: 600;
}
body .ll-langs .is-current a {
	background: #fff;
	color: var(--global-palette3);
}
/* Map countries are buttons that show the card under the map. */
.ll-map__active {
	cursor: pointer;
}
.ll-map__active:focus-visible {
	outline: none;
}

/* ---------- Humanitarian updates (single posts) ---------- */

.single-post .entry-content .wp-block-quote {
	margin: 32px 0;
	padding: 4px 0 4px 24px;
	border-left: 4px solid var(--ll-logo-red);
	border-right: 0;
}
[dir="rtl"] .single-post .entry-content .wp-block-quote {
	padding: 4px 24px 4px 0;
	border-left: 0;
	border-right: 4px solid var(--ll-logo-red);
}
.single-post .entry-content .wp-block-quote p {
	font-size: 1.25em;
	line-height: 1.45;
	color: var(--global-palette3);
}
.single-post .entry-content .wp-block-quote cite {
	display: block;
	margin-top: 8px;
	font-size: 0.875rem;
	font-style: normal;
	color: var(--global-palette5);
}
.single-post .entry-content .wp-block-buttons {
	margin: 32px 0 40px;
}
.ll-update-sources {
	margin-top: 40px;
	padding-top: 24px;
	border-top: 1px solid var(--global-palette7);
	font-size: 1rem;
	text-transform: uppercase;
	letter-spacing: 0.06em;
}
.ll-update-source-list {
	font-size: 0.875rem;
	line-height: 1.5;
	color: var(--global-palette5);
}
.ll-update-source-list li {
	margin-bottom: 6px;
}
.ll-update-source-list a {
	overflow-wrap: anywhere;
}
.ll-photo-credit {
	font-size: 0.8125rem;
	color: var(--global-palette5);
}

/* ---------- About us: what we do, projects, how we work, team ---------- */

.ll-about-lead {
	max-width: 760px;
	margin-left: auto;
	margin-right: auto;
}
.ll-about-grid {
	gap: 28px;
	margin-top: 40px;
}
/* Navy for information, so red stays for calls to action. */
.ll-about-grid .ll-action-card {
	border-top-color: var(--global-palette3);
}
.ll-about-grid .ll-action-card p:last-child {
	margin-bottom: 0;
}
.ll-about-grid--two {
	max-width: 900px;
	margin-left: auto;
	margin-right: auto;
}
.ll-card__meta {
	margin-top: 18px;
	padding-top: 14px;
	border-top: 1px solid var(--global-palette7);
	font-size: 0.9375rem;
	font-weight: 600;
	color: var(--global-palette3);
}
.ll-about-team .ll-action-card p {
	color: var(--global-palette5);
}

.ll-about-note {
	margin-top: 28px;
	color: var(--global-palette5);
}

/* ---------- Volunteer page ---------- */

.ll-form-note {
	margin-top: 16px;
	font-size: 0.875rem;
	color: var(--global-palette5);
}

/* The donation form in the homepage banner starts at the height it will have
   (5.20): compact on phones, so the banner does not jump when it loads. */
iframe.ll-givio-compact {
	height: 600px;
}
@media (max-width: 639px) {
	iframe.ll-givio-compact {
		height: 330px;
	}
}

/* The photo banner on phones (5.23): the photo two-thirds of the screen tall,
   the headline over it and one Donate button; the form follows below. */
.ll-mhero {
	display: none;
}
@media (max-width: 767px) {
	.ll-mhero {
		display: flex;
		flex-direction: column;
		justify-content: flex-end;
		min-height: max(420px, 66svh);
		padding: 28px 20px 26px;
		background:
			linear-gradient(to top, rgba(11, 42, 74, 0.94) 0%, rgba(11, 42, 74, 0.7) 38%, rgba(11, 42, 74, 0) 72%),
			var(--ll-mhero-img) var(--ll-mhero-pos, center 40%) / cover no-repeat,
			var(--global-palette3);
		border-bottom: 5px solid var(--global-palette1);
		color: #fff;
	}
	.ll-mhero__eyebrow {
		margin: 0 0 8px;
		font-size: 0.8rem;
		font-weight: 700;
		letter-spacing: 0.12em;
		text-transform: uppercase;
		color: rgba(255, 255, 255, 0.88);
	}
	.ll-mhero__eyebrow::before {
		content: "";
		display: block;
		width: 44px;
		height: 4px;
		margin-bottom: 10px;
		background: var(--global-palette1);
	}
	.ll-mhero__title {
		margin: 0;
		font-family: var(--global-heading-font-family, inherit);
		font-size: clamp(1.75rem, 7.6vw, 2.25rem);
		font-weight: 800;
		line-height: 1.15;
		color: #fff;
	}
	.ll-mhero__intro {
		margin: 12px 0 0;
		font-size: 1rem;
		line-height: 1.5;
		color: rgba(255, 255, 255, 0.92);
	}
	.ll-mhero__btn {
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 8px;
		min-height: 52px;
		margin-top: 20px;
		border-radius: 4px;
		background: var(--global-palette1);
		color: #fff !important;
		font-size: 1.05rem;
		font-weight: 700;
		text-decoration: none;
	}
	[dir="rtl"] .ll-mhero__btn span {
		display: inline-block;
		transform: scaleX(-1);
	}
	.ll-mhero__btn:focus-visible {
		outline: 3px solid #fff;
		outline-offset: 3px;
	}
	/* The banner row below: no photo, no repeated headline. */
	body .kb-row-layout-wrap.ll-mhero-row {
		background-image: none !important;
		background-color: transparent !important;
		border-bottom: 0 !important;
	}
	body .kb-row-layout-wrap.ll-mhero-row > .kt-row-layout-overlay {
		display: none !important;
	}
	body .kb-row-layout-wrap.ll-mhero-row > .kt-row-column-wrap {
		min-height: 0 !important;
		padding-top: 0 !important;
	}
	/* The banner's empty photo column, and the box's red top edge (the
	   photo above already ends in one). */
	.ll-mhero-row .wp-block-kadence-column:has(> .kt-inside-inner-col:empty) {
		display: none !important;
	}
	.ll-mhero-row .kt-inside-inner-col {
		border-top-width: 0 !important;
	}
	body .kb-row-layout-wrap.ll-mhero-row--empty,
	.ll-mhero-row [data-ll-mhide] {
		display: none !important;
	}
	#ll-give {
		scroll-margin-top: 90px;
	}
}

/* ---------- SANAD for Gaza: gift cards, orphan breakdown ---------- */

/* Gift cards: the price in red above the gift, the Donate button at the foot. */
.ll-gifts + .ll-gifts {
	margin-top: 24px;
}
.ll-gift .wp-block-buttons {
	margin-top: auto;
}
body .ll-gift .ll-gift__price {
	margin: 0 0 6px;
	font-family: var(--global-heading-font-family, inherit);
	font-size: 1.9rem;
	font-weight: 800;
	line-height: 1.1;
	color: var(--global-palette1);
}
body .ll-gift h3 {
	font-size: 1.2rem;
}

/* The $110 breakdown: plain rows, the total in navy. */
.ll-breakdown table {
	width: 100%;
	border-collapse: collapse;
}
.ll-breakdown th,
.ll-breakdown td {
	padding: 10px 12px;
	border: 0;
	border-bottom: 1px solid var(--global-palette7);
	text-align: start;
	vertical-align: top;
}
.ll-breakdown th {
	color: var(--global-palette3);
	border-bottom: 2px solid var(--global-palette3);
}
.ll-breakdown th:last-child,
.ll-breakdown td:last-child {
	width: 30%;
	text-align: end;
	white-space: nowrap;
}
.ll-breakdown tr:last-child td {
	color: var(--global-palette3);
	border-bottom: 2px solid var(--global-palette3);
}
.ll-breakdown figcaption {
	margin-top: 10px;
	font-size: 0.95rem;
	color: var(--global-palette5);
	text-align: start;
}

/* Small print: "children pictured may not be orphans", the banner's receipt line. */
body .ll-photo-note,
body .ll-hero__note {
	font-size: 0.875rem;
	color: var(--global-palette5);
}
body .ll-hero__note {
	margin: 12px 0 0;
}