/* Homepage card + identity styles (AR post 2 / EN post 48).
   Version lives in the FILENAME (LiteSpeed strips ?ver=) — bump on every edit.
   v7 (24 Jul): force the fleet-section kicker gold (LiteSpeed UCSS keeps the
   stale teal var(--accent-4) rule until it re-generates async — this !important
   override wins immediately regardless of UCSS state). Plus v6: fleet cards
   rebuilt as tp-fleet block; icon medallions emerald/gold; v3 equal-height+hover. */

/* Fleet-section kicker: emerald/gold identity (was pale --accent-4 teal).
   v12: bright gold #d4af37 on --base-4 cream = 1.93:1, failed WCAG (PSI 30 Aug 2026);
   dark gold #8a6a12 = 4.64:1 — the catalog standard for gold text on light. */
.gb-text-551745ac {
	color: #8a6a12 !important;
	font-weight: 700;
	letter-spacing: .04em;
}

/* ===== v8: brand-identity pass on the «نرافقك / من نحن» intro + counters ===== */

/* Welcome kicker «مرحبًا بكم في تريبيانا» — was pale --accent-4 teal → gold (Allura script kept). */
.gb-text-39ac7376 {
	color: #d4af37 !important;
}

/* «اقرأ المزيد عنا» button — was teal (--accent-4) fill → emerald with gold text. */
.gb-text-8e5e179a {
	background-color: #0c211a !important;
	color: #d4af37 !important;
	transition: background-color .25s ease, color .25s ease;
}
.gb-text-8e5e179a:hover,
.gb-text-8e5e179a:focus {
	background-color: #d4af37 !important;
	color: #0c211a !important;
}

/* Counter cards — gold top accent + emerald numerals + gold «+» sign. */
.tp-counter {
	border-top: 3px solid #d4af37 !important;
}
.tp-counter__num {
	color: #0c211a !important;
}
.tp-counter__sign {
	color: #d4af37 !important;
	opacity: 1 !important;
}

/* ---- EN season grid 410180fc (AR replaced it with tp-dest; kept for EN) ---- */
.gb-element-410180fc > div {
	display: flex;
	flex-direction: column;
	width: 100%;
}
.gb-element-410180fc > div > div:last-child {
	margin-top: auto;
	padding-top: 2rem;
}
@media (min-width: 1025px) {
	body.rtl .gb-element-410180fc .gbp-button--primary {
		white-space: nowrap;
	}
}

/* ---- Top services grid 746b7b6c: equal height + one-line labels + hover ---- */
.gb-element-746b7b6c > div {
	display: flex;
	flex-direction: column;
	height: 100%;
	transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.gb-element-746b7b6c > div > :last-child {
	margin-top: auto;
}
@media (min-width: 1025px) {
	body.rtl .gb-element-746b7b6c .gbp-button--primary {
		white-space: nowrap;
	}
}
.gb-element-746b7b6c > div:hover {
	transform: translateY(-6px);
	box-shadow: 0 18px 30px -14px rgba(12, 33, 26, 0.28), inset 0 3px 0 #d4af37;
}

/* ============ Brand identity: recolor EVERY icon medallion ============
   Services (4), Why-us (6) and Mission/Vision (2) all render the icon circle
   as .gb-shape-XXXX{background:var(--accent-3)} — the pale teal leftover from
   the old palette. Repaint the circle emerald and the glyph gold (SVGs use
   fill:currentColor) so all 12 match the header/footer/destinations identity. */
.gb-shape-21a9d77e,   /* services */
.gb-shape-294dda47,
.gb-shape-89db3487,
.gb-shape-c42897c5,
.gb-shape-20018b77,   /* why-us */
.gb-shape-c0e58d3d,
.gb-shape-146f8372,
.gb-shape-7626eea5,
.gb-shape-8082ed4e,
.gb-shape-3d939064,
.gb-shape-49de3367,   /* mission / vision */
.gb-shape-586e1ec5 {
	background-color: #0c211a !important;
	color: #d4af37 !important;
}
/* Only set `color` — the glyph inherits it via currentColor. Do NOT force
   fill/stroke: solid icons use fill:currentColor, outline icons (Lucide) use
   stroke:currentColor + fill:none, and forcing fill would turn outline icons
   into solid gold blobs. currentColor colours both families correctly. */

/* Fleet cards were rebuilt as a self-contained tp-fleet block (inline-styled,
   DOM order already cheapest→priciest E/V/S/Range) — the old GB grid-row
   mobile reorder that lived here is obsolete and was removed in v6. */

/* ===== v9: article-card «اقرأ المقال كاملاً» links → framed outline buttons =====
   Loop read-more (gb-text-15420da3) was bare text; give it a bordered pill so it
   matches the rest of the template's button system (emerald outline → fill hover). */
.gb-text-15420da3 {
	display: inline-flex !important;
	align-items: center;
	gap: .4rem;
	border: 1.6px solid #0c211a !important;
	color: #0c211a !important;
	padding: .6rem 1.5rem !important;
	border-radius: 999px !important;
	text-decoration: none !important;
	font-weight: 700;
	transition: background-color .25s ease, color .25s ease;
}
.gb-text-15420da3:hover,
.gb-text-15420da3:focus {
	background-color: #0c211a !important;
	color: #d4af37 !important;
}
.gb-text-15420da3 strong { font-weight: 700; }

/* ===== v10: Google-reviews CTA button (.tgr-btn) → emerald/gold identity =====
   Was maroon (--tgr-accent #9E4765) from an old palette. */
.tgr-btn {
	background: #0c211a !important;
	color: #d4af37 !important;
	box-shadow: 0 8px 22px rgba(12,33,26,.28) !important;
}
.tgr-btn:hover,
.tgr-btn:focus {
	background: #123127 !important;
	color: #d4af37 !important;
}

/* ===== v11: unify remaining teal (--accent-4 #3E6B72) headings to identity =====
   Section H2/H3 headings → emerald (readable on their light section bgs, verified);
   their little accent underline bars → gold. Welcome kicker already gold (above). */
.gb-text-e8098782,   /* لماذا تريبيانا أفضل شركة… */
.gb-text-4e6ca1ab,   /* الأسئلة الشائعة */
.gb-text-5b1b8e67 {  /* ما زلت بحاجة إلى مساعدة؟ */
	color: #0c211a !important;
}
.gb-element-4f29514a,  /* FAQ heading underline bar */
.gb-element-bbf966aa { /* articles heading underline bar */
	background-color: #d4af37 !important;
}


/* ===== v13–v15 (7 Sep 2026, site audit §9 — the homepage H1 was clipped to 1×1px) =====
   WPCode snippet 1726 hides every `.page .entry-title` (SR-only clip) so pages carry their own
   visible hero titles — but the front page has none: visitors met a bare form with no line
   saying what is sold or where. Same override pattern as the wizard page (position/clip !important).
   v14: the SR-only pattern also sets white-space:nowrap — in RTL a one-line 573px title widened the
   whole document (scrollX −183 on /ar/ at 390px); in LTR it was silently cut. Wrap normally.
   v15: the EN hero is a WHITE band on phones (dark car image on desktop; AR dark everywhere) — white
   text was invisible there. The title is now an emerald pill (#0c211a, the active-tab colour) with
   white text: ≥15:1 on its own background whatever sits behind it. Compact so the form and its
   button stay above the fold on 390px. */
/* v16 (9 Sep 2026, owner report "white gap at the top of the homepage"): the wrapper
   kept the screen-reader box from the older rule that hid the front-page title
   (.home .entry-header{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}),
   which now lands AFTER this file inside the regenerated UCSS bundle (memory
   ucss-copy-specificity-race). v15 reset the clip on the H1 only, so the emerald pill was
   cut off by its 1px-tall overflow:hidden parent and all that survived was this rule's
   14px padding-top — measured live 18px of white between header (65px) and form (83px)
   on BOTH /ar/ and / at 390px, and no visible H1 at all. The wrapper therefore resets the
   whole screen-reader box with !important so no UCSS ordering can clip it again.
   white-space:normal is NOT optional — nowrap here widened the document to 573px on /ar/
   (memory sr-only-h1-override-rtl-nowrap-trap). */
/* 9 Sep 2026 (same owner report): the emerald pill alone still left a WHITE FRAME —
   the article's own white background shows for 14px above the title, 16px either side of the
   pill, and again between the title band and the top of the hero section (measured live:
   6px at 390px, 32px at 1440px, so no single padding value closes it). The first ~200px of
   the front page is therefore underlaid in brand emerald: every gap above the hero section
   is now #0c211a instead of white, and the hero section paints its own background over the
   rest of it. Bounded to .home and to 200px — content below stays on white. Measured
   section top: 153px @390 · 179px @768 · 195px @1440, all inside the 200px. */
/* v17 (9 Sep 2026, owner «خلي العنوان بدون شريط اخضر تحته»): the title no longer sits on a band —
   it is printed INSIDE the hero section (see .tp-hero-h1 below) so the hero photograph runs from the
   header down and the white text sits on the picture. The emerald underlay is therefore scoped with
   :has() to the OLD layout: it still closes the white frame if the theme ever keeps its own
   .entry-header (the injection is conditional by design — see home-cards-styles.php), and paints
   nothing at all now that the header is suppressed on the front page. */
.home .inside-article:has(> .entry-header) { background-color: #fff; background-image: linear-gradient(#0c211a 200px, #fff 200px); }

/* v18 (9 Sep 2026, measured immediately after v17): on phones the booking card carries
   `margin-top:-30px` (a 20 Aug compensation for a 50px gap in the OLD hero layout, in the
   chbs-a11y block). With the title now inside the hero the card climbed OVER it: the H1 box
   ran y=97→145.6 while the card started at 128.4, so the SECOND LINE of the title was hidden
   behind white — measured worst contrast in the title box 1.14:1 at 390px (11.1:1 at 768/1440).
   The compensation is cancelled on the front page only; booking pages keep it. Wins on
   specificity (.home .chbs-main) — the source rule carries no !important. */
@media (max-width: 480px) {
	.home .chbs-main { margin-top: 0; }
}

/* v19 (9 Sep 2026, owner «صلح انزياح 768»): the booking widget's height is reserved ONLY below
   601px (`.chbs-main.chbs-widget{min-height:607px}` elsewhere in the stack), so from 601px up the
   card grew after first paint as its own CSS/JS landed and dragged everything under it down —
   measured on /ar/ at 768px: the M&G strip went y=645 h=100 ⇒ y=788 h=68 between t120 and t300,
   layout-shift 0.113 of a 0.124 total (the trust strip and the section below moved with it).
   Same cure, disjoint range: reserve the settled height. Measured settled heights 601–1440px:
   AR 635px · EN 641.9px ⇒ 642px covers both (AR keeps ~7px of transparent slack, invisible over
   the hero photo). MUST stay in the inline critical block too: a reservation that arrives in an
   async stylesheet lands after first paint and cannot prevent the shift it is meant to prevent. */
@media (min-width: 601px) {
	.home .chbs-main.chbs-widget { min-height: 642px; }
}

/* The in-hero title. No background of any kind: legibility comes from the shadow, which does not
   draw a strip. Sits in the hero section's own 32px (390px) / 24px (1440px) top padding, so the
   form below is pushed down by the title's real height — no magic numbers, no overlay, no shift. */
.home .tp-hero-h1 {
	margin: 0 auto .55rem; padding: 0 16px; max-width: 900px;
	color: #fff; text-align: center; font-weight: 700; line-height: 1.3;
	font-size: clamp(1.05rem, 0.9rem + 1.1vw, 1.65rem);
	text-shadow: 0 1px 3px rgba(0,0,0,.6), 0 0 20px rgba(0,0,0,.4);
	overflow-wrap: break-word; white-space: normal;
}

.home .entry-header {
	position: relative !important; z-index: 2; text-align: center;
	padding: 14px 16px 0 !important; width: auto !important; height: auto !important;
	margin: 0 !important; overflow: visible !important;
	clip: auto !important; clip-path: none !important; white-space: normal !important;
}
.home h1.entry-title {
	position: static !important; clip: auto !important; clip-path: none !important;
	width: auto !important; height: auto !important; overflow: visible !important;
	white-space: normal !important; border: 0 !important; overflow-wrap: break-word;
	display: inline-block; box-sizing: border-box; max-width: 900px;
	margin: 0 !important; padding: 9px 18px !important; border-radius: 14px;
	background: #0c211a; color: #fff; text-align: center; text-shadow: none;
	font-size: clamp(1.05rem, 0.9rem + 1.1vw, 1.65rem); line-height: 1.35; font-weight: 700;
}