/*
Theme Name: El Yaman Law Firm
Theme URI: https://elyamanlawfirm.com/
Author: Rebuilt for El Yaman Law Firm
Description: Self-contained theme reproducing the El Yaman Law Firm site design. No page builder, no third-party plugins - all styles and behaviour ship with the theme.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 7.1
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: elyaman
*/

/* Presentation lives in assets/vendor/. Only additions sit below. */

.ely-form-message {
	margin-top: 12px;
	padding: 10px 14px;
	border-radius: 4px;
	font-size: 15px;
	line-height: 1.5;
}

.ely-form-message.is-success {
	background: #e8f5e9;
	color: #1b5e20;
	border: 1px solid #a5d6a7;
}

.ely-form-message.is-error {
	background: #fdecea;
	color: #b71c1c;
	border: 1px solid #f5c6cb;
}

#si-scroll-top {
	opacity: 0;
	visibility: hidden;
	transition: opacity .25s ease, visibility .25s ease;
}

#si-scroll-top.si-visible {
	opacity: 1;
	visibility: visible;
}

/**
 * Header logo.
 *
 * The wide lock-up (768x102) shrinks to an unreadable strip on a phone, so
 * below Elementor's 767px breakpoint it is swapped for the stacked mark.
 * Both sit in the markup; only one is ever displayed.
 */
.elementor-widget-image img.ely-logo-mobile {
	display: none;
}

@media (max-width: 767px) {
	.elementor-widget-image img.ely-logo-desktop {
		display: none;
	}

	.elementor-widget-image img.ely-logo-mobile {
		display: inline-block;
		width: auto;
		max-width: 230px;
		height: auto;
	}
}

/**
 * Team cards.
 *
 * The four columns were laid out by nudging each card by hand - photo
 * margins of 32px / -17px & -77px / 25px & -12px / 40px, name margins of
 * 10px / -27px / none / 50px, list margins of 49px / 23px / 110px / 110px -
 * and the source photos are 274x300, 559x1024, 242x300 and 200x200. The
 * circles are a mask over those images, so each rendered at a different
 * height (169 / 222 / 191 / 152px) and nothing lined up.
 *
 * This replaces the per-card nudging with one vertical rhythm: an equal
 * square photo (so the mask yields an identical circle), then the name,
 * then a title slot that is reserved even on the two cards that have no
 * title widget, then the credential list.
 */

/* 1. Photos - identical square box, so identical circles. */
.elementor-88 .elementor-element.elementor-element-aa8e80f > .elementor-widget-container,
.elementor-88 .elementor-element.elementor-element-e17eca3 > .elementor-widget-container,
.elementor-88 .elementor-element.elementor-element-f877394 > .elementor-widget-container,
.elementor-88 .elementor-element.elementor-element-efeae20 > .elementor-widget-container {
	margin: 32px 0 0 0;
}

.elementor-88 .elementor-element.elementor-element-aa8e80f img,
.elementor-88 .elementor-element.elementor-element-e17eca3 img,
.elementor-88 .elementor-element.elementor-element-f877394 img,
.elementor-88 .elementor-element.elementor-element-efeae20 img {
	width: 68%;
	height: auto;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	/* The four source photos are 274x300, 559x1024, 242x300 and 200x200 and
	   every face sits in the upper third, so the square crop is anchored to
	   the top - no head is ever cut. */
	object-position: center top;
}

/* 2. Names - one slot, tall enough for the two-line name. */
.elementor-88 .elementor-element.elementor-element-59a6391e > .elementor-widget-container,
.elementor-88 .elementor-element.elementor-element-5103f067 > .elementor-widget-container,
.elementor-88 .elementor-element.elementor-element-6fd09ceb > .elementor-widget-container,
.elementor-88 .elementor-element.elementor-element-378cfffe > .elementor-widget-container {
	margin: 22px 0 0 0;
	min-height: 68px;
}

/* 3. Titles - one slot. The widget-wrap is a flex column, so these
      margins add rather than collapse; the two title widgets shipped
      with different bottom margins (0px and 20px), which is what threw
      the lists out of line. */
.elementor-88 .elementor-element.elementor-element-89a0eaa > .elementor-widget-container,
.elementor-88 .elementor-element.elementor-element-2b0acc63 > .elementor-widget-container {
	margin: 0;
	min-height: 34px;
}

.elementor-88 .elementor-element.elementor-element-89a0eaa,
.elementor-88 .elementor-element.elementor-element-2b0acc63 {
	margin-bottom: 20px;
}

/* 4. Lists all start at the same height. Ghida and Ali have no title
      widget, so they reserve its slot (36px box + 20px gap) instead. */
.elementor-88 .elementor-element.elementor-element-6b6b59a > .elementor-widget-container,
.elementor-88 .elementor-element.elementor-element-616346b > .elementor-widget-container {
	margin: 0 0 20px 0;
}

.elementor-88 .elementor-element.elementor-element-2a8e631e > .elementor-widget-container,
.elementor-88 .elementor-element.elementor-element-74083a8b > .elementor-widget-container {
	margin: 56px 0 20px 0;
}

/**
 * Hero image on mobile.
 *
 * Every widget in this column is absolutely positioned, so the wrap has no
 * content height; the layout reserves space with a 400px top margin and
 * anchors the picture to the bottom of that box. The picture was capped at
 * max-width:268px inside a 335px column, which left a tall empty band
 * between the header and the artwork.
 *
 * Because the picture is bottom-anchored, making it bigger moves its top
 * edge up into that band. Widening it to the full column (335px, so 443px
 * tall at its 756:1000 ratio), dropping the 59px bottom offset and
 * trimming the reserved margin to 372px lifts the artwork ~58px and pulls
 * the copy below it up ~28px.
 */
@media (max-width: 767px) {
	.elementor-88 .elementor-element.elementor-element-1965a180 > .elementor-widget-wrap {
		/* Bottom-anchored artwork: a shorter reserved box lifts it. The top
		   ~22% of the PNG is transparent, so it can ride up over the header
		   band without the buildings ever touching it. */
		margin-top: 312px;
	}

	.elementor-88 .elementor-element.elementor-element-54293117 {
		width: 100%;
		max-width: 100%;
		left: 0;
		right: 0;
		bottom: 0;
	}

	.elementor-88 .elementor-element.elementor-element-54293117 img {
		width: 100%;
		max-width: 100%;
	}

	/* Decorative only - never let its transparent area swallow a tap. */
	.elementor-88 .elementor-element.elementor-element-54293117 {
		pointer-events: none;
	}
}

/**
 * Header actions - call, WhatsApp, language.
 *
 * Markup comes from ely_header_actions() in functions.php, so both
 * templates share one source. Colours follow the Elementor kit: black
 * #000 / gold #D9A84E, 10px radius, matching the buttons already on the
 * page. Laid out with flexbox, so the Arabic page mirrors it for free.
 */
.ely-header-actions {
	--ely-control-h: 44px;
	display: flex;
	align-items: center;
	justify-content: flex-end;
	flex-wrap: wrap;
	gap: 10px;
	width: 100%;
}

.ely-btn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	/* Fixed height, not vertical padding: the Arabic face has a taller line
	   box than Alegreya, which made the same button 48px on the Arabic page
	   and 42px on the English one. Height + centring keeps every control
	   identical whatever the script. */
	height: var(--ely-control-h);
	padding: 0 16px;
	box-sizing: border-box;
	border-radius: 10px;
	font-family: "Alegreya", serif;
	font-size: 16px;
	line-height: 1.2;
	text-decoration: none;
	white-space: nowrap;
	transition: background-color .25s ease, color .25s ease, transform .25s ease;
}

.ely-btn:hover,
.ely-btn:focus-visible {
	transform: translateY(-1px);
}

.ely-btn__icon {
	width: 20px;
	height: 20px;
	flex: 0 0 auto;
	font-size: 18px;
}

.ely-btn__number {
	font-size: 14px;
	opacity: .85;
	padding-inline-start: 2px;
}

/* Primary call to action. The kit sets `.elementor-kit-342 a{color:#000}`
   at (0,1,1), so these carry the `a` to match it - without it the label
   on the dark WhatsApp button renders black on black. */
a.ely-btn--call {
	background: #D9A84E;
	color: #101010;
}

a.ely-btn--call:hover,
a.ely-btn--call:focus-visible {
	background: #101010;
	color: #D9A84E;
}

/* WhatsApp keeps the dark treatment it had before. */
a.ely-btn--chat {
	background: #101010;
	color: #fff;
}

a.ely-btn--chat:hover,
a.ely-btn--chat:focus-visible {
	background: #D9A84E;
	color: #101010;
}

/* Language selector - both languages visible, current one marked. */
.ely-lang {
	display: inline-flex;
	align-items: stretch;
	height: var(--ely-control-h);
	box-sizing: border-box;
	border: 1px solid rgba(16, 16, 16, .25);
	border-radius: 10px;
	overflow: hidden;
}

a.ely-lang__opt,
span.ely-lang__opt {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 40px;
	padding: 0 12px;
	font-family: "Alegreya", serif;
	font-size: 15px;
	line-height: 1;
	color: #101010;
	text-decoration: none;
	transition: background-color .25s ease, color .25s ease;
}

.ely-lang__opt + .ely-lang__opt {
	border-inline-start: 1px solid rgba(16, 16, 16, .25);
}

span.ely-lang__opt.is-active,
a.ely-lang__opt.is-active {
	background: #101010;
	color: #fff;
	cursor: default;
}

a.ely-lang__opt:hover,
a.ely-lang__opt:focus-visible {
	background: #D9A84E;
	color: #101010;
}

/* Phones.
   The header's two Elementor columns stay side by side on mobile, which
   leaves the actions about 100px wide - enough to force three wrapped
   rows. Give each column the full width so the logo sits on one line and
   the actions on the next, where all three fit in a single row. */
@media (max-width: 767px) {
	.elementor-88 .elementor-element.elementor-element-3f216860,
	.elementor-88 .elementor-element.elementor-element-10f0f51b {
		width: 100%;
	}

	.ely-header-actions {
		--ely-control-h: 40px;
		gap: 8px;
		justify-content: center;
	}

	.ely-btn {
		padding: 0 12px;
		font-size: 14px;
	}

	/* Logo centres above the actions row. Two selectors: the second matches
	   the specificity of the RTL mirror in rtl.css so it wins on order. */
	.elementor-88 .elementor-element.elementor-element-b081b83,
	.elementor-page-rtl .elementor-88 .elementor-element.elementor-element-b081b83 {
		text-align: center;
	}

	.elementor-88 .elementor-element.elementor-element-3f216860.elementor-column > .elementor-widget-wrap {
		justify-content: center;
	}

	/* The logo widget is sized to its desktop mark (155px) while the mobile
	   mark is 230px, so the picture overflowed its own box to the right
	   instead of centring. Give the widget the full column and drop the
	   container's -14px pull. */
	.elementor-88 .elementor-element.elementor-element-b081b83 {
		width: 100%;
		max-width: 100%;
	}

	.elementor-88 .elementor-element.elementor-element-b081b83 > .elementor-widget-container {
		margin: 0;
	}

	/* The spelled-out number is redundant once the button is a tap target. */
	.ely-btn__number {
		display: none;
	}

	.ely-lang__opt,
	a.ely-lang__opt,
	span.ely-lang__opt {
		min-width: 34px;
		padding: 0 10px;
		font-size: 14px;
	}
}

/* Actions column padding. post-88.css ships both header columns at
   `padding: 0 0 20px 0`; this tightens the actions side. */
.elementor-88 .elementor-element.elementor-element-10f0f51b > .elementor-element-populated {
	padding: 5px 0px 5px 0px;
}

/**
 * Footer.
 *
 * Markup from ely_footer() in functions.php - one source for both
 * templates. Four balanced columns replacing the captured 532/227/279/262
 * split, then a bottom bar. Flexbox and logical properties, so the Arabic
 * page mirrors without extra rules.
 */
.ely-footer {
	background: #101010;
	color: #cfcfcf;
	font-family: "Alegreya", serif;
	margin-top: 40px;
}

.elementor-page-rtl .ely-footer {
	font-family: "Noto Naskh Arabic", serif;
}

.ely-footer__inner {
	max-width: 1140px;
	margin: 0 auto;
	padding: 56px 20px 40px;
	display: grid;
	grid-template-columns: 1.6fr 1fr 1.2fr 1.2fr;
	gap: 40px;
	align-items: start;
}

.ely-footer__logo {
	display: inline-block;
	margin-bottom: 18px;
}

.ely-footer__logo img {
	width: 240px;
	max-width: 100%;
	height: auto;
	/* The mark is dark artwork on transparency; invert it on the dark bar. */
	filter: brightness(0) invert(1);
}

.ely-footer__blurb {
	margin: 0 0 22px;
	font-size: 16px;
	line-height: 1.75;
	color: #b9b9b9;
	max-width: 46ch;
}

.ely-footer__follow {
	margin: 0 0 10px;
	font-size: 13px;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: #8a8a8a;
}

/* Scoped to .ely-footer, not the bare class: the kit sets
   `.elementor-kit-342 h2 {color:#000; font-size:...}` at (0,1,1) and
   re-declares it inside 1024px and 767px media queries. A (0,1,0) rule
   loses to all three - which rendered these headings black on the
   near-black footer. Specificity is compared before media queries, so one
   (0,2,0) rule covers every breakpoint. */
.ely-footer .ely-footer__title {
	margin: 0 0 18px;
	font-family: "Cinzel Decorative", serif;
	font-size: 18px;
	line-height: 1.3;
	letter-spacing: .04em;
	color: #D9A84E;
}

.elementor-page-rtl .ely-footer .ely-footer__title {
	font-family: "Noto Naskh Arabic", serif;
}

.ely-footer__list {
	margin: 0;
	padding: 0;
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.ely-footer__list li {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	font-size: 16px;
	line-height: 1.5;
}

.ely-footer__list i {
	color: #D9A84E;
	font-size: 14px;
	line-height: 1.6;
	flex: 0 0 auto;
}

.ely-footer a,
.ely-footer__list a {
	color: #cfcfcf;
	text-decoration: none;
	transition: color .25s ease;
}

.ely-footer a:hover,
.ely-footer a:focus-visible {
	color: #D9A84E;
	text-decoration: underline;
}

/* Social row */
.ely-social {
	display: flex;
	gap: 10px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.ely-social a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: rgba(255, 255, 255, .08);
	color: #fff;
	font-size: 17px;
	transition: background-color .25s ease, color .25s ease;
}

.ely-social a:hover,
.ely-social a:focus-visible {
	background: #D9A84E;
	color: #101010;
	text-decoration: none;
}

/* Click-to-load map */
/* Map: the embed loads with the page and a transparent overlay takes the
   click, since an iframe would otherwise swallow it. The overlay opens
   Google's `?api=1` URL, which hands off to the Maps app when installed. */
.ely-footer .ely-map {
	position: relative;
	margin-top: 18px;
	border-radius: 10px;
	overflow: hidden;
	line-height: 0;
}

.ely-footer .ely-map__frame {
	width: 100%;
	height: 190px;
	border: 0;
	display: block;
	/* Let the overlay receive the click rather than the map. */
	pointer-events: none;
	filter: grayscale(.25) contrast(1.05);
}

.ely-footer .ely-map__open {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: flex-end;
	justify-content: center;
	padding: 10px;
	background: linear-gradient(to top, rgba(16, 16, 16, .75) 0%, rgba(16, 16, 16, 0) 45%);
	text-decoration: none;
	transition: background-color .25s ease;
}

.ely-footer .ely-map__open:hover,
.ely-footer .ely-map__open:focus-visible {
	background: rgba(16, 16, 16, .45);
	text-decoration: none;
}

.ely-footer .ely-map__cta {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 7px 14px;
	border-radius: 8px;
	background: #D9A84E;
	color: #101010;
	font-family: "Alegreya", serif;
	font-size: 14px;
	line-height: 1.3;
	white-space: nowrap;
}

.elementor-page-rtl .ely-footer .ely-map__cta {
	font-family: "Noto Naskh Arabic", serif;
}


/* Office columns.
 *
 * The two addresses are near-identical in length - Doha@ measures 211px
 * against Info@ at 210px - and the column is 235px wide once the icon and
 * gap are removed. That single pixel pushed the Doha address onto a second
 * line, making its list 24px taller and its map sit 24px lower than
 * Lebanon's.
 *
 * Two guards: the contact values are set a step smaller so both fit
 * comfortably, and the map is pushed to the bottom of the column, so the
 * two maps stay aligned even if a value does wrap at some width.
 */
.ely-footer .ely-office {
	display: flex;
	flex-direction: column;
	height: 100%;
}

.ely-footer .ely-office .ely-map {
	margin-top: auto;
}

.ely-footer .ely-office__list a {
	font-size: 15px;
	/* Never split an address mid-word onto a line of its own. */
	overflow-wrap: normal;
	word-break: normal;
}

/* Bottom bar */
.ely-footer__bar {
	border-top: 1px solid rgba(255, 255, 255, .12);
}

.ely-footer__bar p {
	max-width: 1140px;
	margin: 0 auto;
	padding: 20px;
	text-align: center;
	font-size: 14px;
	color: #8a8a8a;
}

@media (max-width: 1024px) {
	.ely-footer__inner {
		grid-template-columns: 1fr 1fr;
		gap: 32px 28px;
	}
}

@media (max-width: 600px) {
	.ely-footer__inner {
		grid-template-columns: 1fr;
		padding: 40px 20px 28px;
		gap: 30px;
	}

	.ely-footer__blurb {
		max-width: none;
	}
}

/**
 * Useful links.
 *
 * Replaces two Elementor tabs widgets that each held a single tab - a tab
 * strip with nothing to switch to. Two plain cards instead, no JS.
 * Selectors are scoped under .ely-links so they clear the kit's
 * `.elementor-kit-342 h2/h3` rules at (0,1,1).
 */
.ely-links {
	background: #F7F6F1;
	padding: 72px 20px;
}

.ely-links__inner {
	max-width: 1140px;
	margin: 0 auto;
}

.ely-links__head {
	text-align: center;
	margin-bottom: 40px;
}

.ely-links .ely-links__heading {
	margin: 0 0 10px;
	font-family: "Cinzel Decorative", serif;
	font-size: 34px;
	line-height: 1.25;
	color: #101010;
}

.elementor-page-rtl .ely-links .ely-links__heading,
.elementor-page-rtl .ely-links .ely-links__country {
	font-family: "Noto Naskh Arabic", serif;
}

.ely-links .ely-links__intro {
	margin: 0;
	font-family: "Alegreya", serif;
	font-size: 17px;
	color: #6b6b6b;
}

.elementor-page-rtl .ely-links .ely-links__intro,
.elementor-page-rtl .ely-links__list a {
	font-family: "Noto Naskh Arabic", serif;
}

.ely-links__grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 28px;
}

.ely-links__card {
	background: #fff;
	border: 1px solid #e6e3d8;
	border-radius: 14px;
	padding: 28px 28px 12px;
}

.ely-links .ely-links__country {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0 0 18px;
	padding-bottom: 14px;
	border-bottom: 1px solid #ece9de;
	font-family: "Cinzel Decorative", serif;
	font-size: 21px;
	line-height: 1.3;
	color: #101010;
}

.ely-links__flag {
	font-size: 22px;
	line-height: 1;
}

.ely-links__list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.ely-links__list li + li {
	border-top: 1px solid #f0eee6;
}

.ely-links__list a {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 14px;
	padding: 14px 0;
	font-family: "Alegreya", serif;
	font-size: 17px;
	line-height: 1.4;
	color: #2a2a2a;
	text-decoration: none;
	transition: color .2s ease;
}

.ely-links__list a:hover,
.ely-links__list a:focus-visible {
	color: #B8892F;
}

.ely-links__arrow {
	flex: 0 0 auto;
	font-size: 13px;
	color: #D9A84E;
	transition: transform .2s ease;
}

/* The arrow points along the reading direction. */
.elementor-page-rtl .ely-links__arrow {
	transform: scaleX(-1);
}

.ely-links__list a:hover .ely-links__arrow {
	transform: translateX(3px);
}

.elementor-page-rtl .ely-links__list a:hover .ely-links__arrow {
	transform: scaleX(-1) translateX(3px);
}

@media (max-width: 767px) {
	.ely-links {
		padding: 48px 20px;
	}

	.ely-links .ely-links__heading {
		font-size: 27px;
	}

	.ely-links__grid {
		grid-template-columns: 1fr;
		gap: 20px;
	}

	.ely-links__card {
		padding: 22px 20px 8px;
	}
}