/*
 * Bridges WordPress block output to the original site's styling.
 *
 * The front-page sections are now core blocks so a non-technical editor can
 * edit and reorder them. Core blocks emit their own wrappers (.wp-block-group,
 * .wp-block-columns), which the original CSS knows nothing about. These rules
 * make block output land on the same colours, spacing and typography as the
 * hand-written markup did.
 *
 * Loaded last, after main.css / mainAR.css.
 */

/* ------------------------------------------------------------------
 * Colour helpers used by the block patterns.
 * The originals set these inline; blocks carry them as classes so an
 * editor can't accidentally strip the colour by retyping a heading.
 * ---------------------------------------------------------------- */
.tashyeed-gold {
	color: #EBA40C;
}

.tashyeed-white {
	color: #fff;
}

/* ------------------------------------------------------------------
 * Section wrappers
 * ---------------------------------------------------------------- */
.tashyeed-section {
	/* section-padding already supplies vertical rhythm; keep blocks from
	   adding the theme.json default that would double it. */
	margin-top: 0;
	margin-bottom: 0;
}

.tashyeed-section > .wp-block-columns,
.tashyeed-section > .wp-block-group__inner-container > .wp-block-columns {
	max-width: 100%;
	margin-left: auto;
	margin-right: auto;
	align-items: center;
}

/* Core columns collapse to a 2px gap by default; the original layout had
   real breathing room between the image and the copy. */
.tashyeed-section .wp-block-columns {
	gap: 2rem;
}

/* ------------------------------------------------------------------
 * Typography inside blocks
 * ---------------------------------------------------------------- */
.tashyeed-section .wp-block-heading {
	margin-bottom: 0.6em;
}

/* Body copy in the dark sections has to stay legible; core paragraphs
   inherit the editor default otherwise. */
.tashyeed-section p.whyCompanyInfo {
	color: #fff;
}

.tashyeed-section ul {
	color: #fff;
	list-style: disc;
	padding-left: 1.2em;
}

.tashyeed-section ul li {
	margin-bottom: 1.5rem;
}

/* The image blocks should fill their column like the original <img w-100>. */
.tashyeed-section .wp-block-image,
.tashyeed-section .wp-block-image img {
	width: 100%;
	height: auto;
	margin: 0;
}

/* ------------------------------------------------------------------
 * RTL
 * ---------------------------------------------------------------- */
.tashyeed-rtl .tashyeed-section ul {
	padding-left: 0;
	padding-right: 1.2em;
}

.tashyeed-rtl .tashyeed-section .text-right {
	text-align: right;
}

/* ------------------------------------------------------------------
 * Mobile
 * ---------------------------------------------------------------- */
@media (max-width: 781px) {
	.tashyeed-section .wp-block-columns {
		gap: 1rem;
	}
}