/*
Theme Name: Mednix child
Template:   mednix
Theme URI: https://mednix.themeht.com/
Author: Themeht
Author URI: https://www.themeht.com
Description: Mednix - Child Theme
Version: 2.2.0
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: mednix
Tags: one-column, two-columns, right-sidebar, custom-logo, custom-menu, threaded-comments, translation-ready, left-sidebar, custom-background, custom-colors, custom-header, featured-images, sticky-post
*/
/* =================================================================
   BREADCRUMB
   -----------------------------------------------------------------
   The trail now has real depth (خدماتنا › عملية الليزك › فيمتو ليزك)
   instead of the parent theme's fixed "Home / current page". Two rules
   in base.css were written for the two-item version and do not survive
   the change.
   ================================================================= */

/* base.css:368 sets word-break: break-all on breadcrumb items. That is
   already wrong for Arabic — it splits words between joined letterforms,
   so "خدماتنا" can render as "خدما" / "تنا" — and with four items it
   fires far more often. break-word only breaks a word that cannot fit
   on a line of its own, which is the behaviour that rule was reaching
   for. */
.breadcrumb-item { word-break: normal; overflow-wrap: break-word; }

/* .breadcrumb is an inline-flex row with no wrapping. Two items always
   fitted; four on a phone do not, and the pill would push out of its
   container. Wrapping keeps it inside — the decorative corners are
   anchored to the box's bottom edge, so they follow it as it grows. */
.breadcrumb { flex-wrap: wrap; row-gap: 6px; max-width: 100%; }

/* =================================================================
   IN-CONTENT HEADING SCALE
   -----------------------------------------------------------------
   theme-style.css:54-59 sets one heading scale for the whole site:
   h1 80px, h2 60px, h3 34px. Those numbers are display sizes, written
   for the section headlines the theme builds out of its own title and
   themeht-heading widgets — and at that job they are right.

   The same rule also lands on the h2s and h3s INSIDE prose, where the
   body text is 16px. A 60px subheading above a 16px paragraph is 3.75x
   the text it introduces; it reads as a page title interrupting the
   article rather than a heading belonging to it, and every service page
   and blog post carries a dozen of them.

   WHY THIS SELECTOR AND NOT THE GLOBAL SCALE
   ------------------------------------------
   Editing h2 globally would drag every section headline on the site
   down with it. Prose headings are the ones that are wrong, and prose
   lives in exactly two places, checked across the site before writing
   this: Elementor's text-editor widget (17 headings on a service page,
   16 on a blog post) and .entry-content for anything rendered without
   Elementor. The home page has none — its headings are all title and
   themeht-heading widgets, so it is untouched.

   The weight goes up as the size comes down. At 60px, weight 400 was
   unmistakably a heading; at 28px it would read as merely larger text,
   and the hierarchy the size cut removes has to come back somewhere.

   Letter-spacing is not repeated here: rtl-extras.css already resets
   the theme's negative tracking, which breaks Arabic letterforms.
   ================================================================= */

.elementor-widget-text-editor h2,
.entry-content h2 { font-size: 28px; line-height: 1.4; font-weight: 600; margin-top: 40px; margin-bottom: 14px; }

.elementor-widget-text-editor h3,
.entry-content h3 { font-size: 23px; line-height: 1.45; font-weight: 600; margin-top: 32px; margin-bottom: 12px; }

.elementor-widget-text-editor h4,
.entry-content h4 { font-size: 20px; line-height: 1.5; font-weight: 600; margin-top: 26px; margin-bottom: 10px; }

.elementor-widget-text-editor h5,
.entry-content h5 { font-size: 18px; line-height: 1.55; font-weight: 600; margin-top: 22px; margin-bottom: 10px; }

.elementor-widget-text-editor h6,
.entry-content h6 { font-size: 17px; line-height: 1.55; font-weight: 600; margin-top: 20px; margin-bottom: 8px; }

/* A heading opening the block has nothing above it to be separated from,
   and the top margin would only push the whole column down. */
.elementor-widget-text-editor > .elementor-widget-container > :is(h2, h3, h4, h5, h6):first-child,
.entry-content > :is(h2, h3, h4, h5, h6):first-child { margin-top: 0; }

@media (max-width: 767px) {

	.elementor-widget-text-editor h2,
	.entry-content h2 { font-size: 24px; margin-top: 32px; }

	.elementor-widget-text-editor h3,
	.entry-content h3 { font-size: 20px; margin-top: 26px; }

	.elementor-widget-text-editor h4,
	.entry-content h4 { font-size: 18px; margin-top: 22px; }
}

/* =================================================================
   MOBILE MENU — ONE MOTION, NOT TWO
   -----------------------------------------------------------------
   base.css opens the off-canvas menu as a staged sequence:

     .ht-mobile-menu-bg        900ms, no delay   ← the coloured panel
     .main-nav.menu-active     900ms, 600ms delay ← the links

   So tapping the burger paints the background, holds for six tenths of
   a second on an empty panel, and only then slides the menu in. Total
   1500ms before the menu is usable, and the pause in the middle reads
   as the site having stalled rather than as an effect.

   Closing staggers the other way: the panel leaves at once while the
   background waits out its own 300ms delay.

   Both directions collapse to a single 300ms motion here — the delays
   go to zero and the duration comes down to what an off-canvas menu
   normally takes. Nothing else about the animation changes: same
   transform, same easing, same opacity fade.

   WHY NOT EDIT THE MIRROR
   -----------------------
   These rules also live in assets/css/rtl/base.css, which is the file
   actually serving Arabic pages — but that file is GENERATED from the
   parent by rtlcss (see section 1 of functions.php) and regenerating it
   would drop any edit. This overrides it instead, and child style.css
   loads after the mirror, so equal specificity resolves our way.
   ================================================================= */

@media (max-width: 1200px) {

	.main-nav,
	.main-nav.menu-active,
	.ht-mobile-menu-bg,
	.menu-active .ht-mobile-menu-bg {
		transition: all 300ms ease;
		-webkit-transition: all 300ms ease;
		transition-delay: 0s;
		-webkit-transition-delay: 0s;
	}
}

/* =================================================================
   CB SERVICE TEMPLATE
   -----------------------------------------------------------------
   Visual detail for the service layout built by
   scripts/build-service-template-v2.php.

   The template owns structure — which widget sits where, how wide a
   column is, what a section's background is. Everything below is
   appearance only, so a section that looks wrong is a question for
   this file and a section in the wrong place is a question for that
   script.

   One scale, used everywhere: hairlines are #E4E9EF, ink is #0F1E4C,
   body copy is #3D4658, and #17A2B8 is spent only on what is meant to
   be noticed. Arabic is set with more leading than a Latin face would
   need — the letterforms are taller and carry marks above and below.
   ================================================================= */

/* --- shared type ------------------------------------------------ */

.cb-eyebrow {
	font-family: "Playfair Display", serif;
	font-style: italic;
	font-size: 17px;
	line-height: 1.4;
	color: #17A2B8;
	margin: 0 0 14px;
}

.cb-svc-sec-title {
	font-size: 38px;
	line-height: 1.3;
	font-weight: 700;
	color: #0F1E4C;
	max-width: 680px;
	margin: 0 0 28px;
}

/* --- 1. hero ---------------------------------------------------- */

.cb-svc-hero { text-align: center; }

.cb-svc-hero-title {
	font-size: 54px;
	line-height: 1.24;
	font-weight: 700;
	color: #fff;
	max-width: 900px;
	margin: 0;
	/* A soft shadow rather than a heavier overlay: it lifts the type off
	   whichever photo is behind it without dimming the whole image. */
	text-shadow: 0 2px 30px rgba(7, 17, 47, .45);
}

/* --- 2. breadcrumb bar ------------------------------------------ */

/* The theme's .breadcrumb is a white pill with decorative rounded
   corners, drawn to hang off the bottom of a page-title banner these
   pages no longer have. .cb-crumbs-plain cancels the shape rather than
   restyling it, so the pill stays intact everywhere it is still used. */
.cb-svc-crumbs { border-bottom: 1px solid #E4E9EF; }

.cb-crumbs-plain {
	background: none !important;
	border-radius: 0 !important;
	padding: 0 !important;
	margin: 0 !important;
}

.cb-crumbs-plain::before,
.cb-crumbs-plain::after { display: none !important; }

.cb-crumbs-plain .breadcrumb-item,
.cb-crumbs-plain .breadcrumb-item a { font-size: 12px; color: #6B7488; }

.cb-crumbs-plain .breadcrumb-item a:hover { color: #17A2B8; }

/* --- 3. article + credentials ----------------------------------- */

/* A measure. The articles run to ~13,000 characters, and a line that
   spans a 1200px container is genuinely hard to return from — the eye
   loses the next line on the way back. */
.cb-svc-body {
	max-width: 880px;
	font-size: 17px;
	line-height: 2;
	color: #3D4658;
}

.cb-svc-body p { margin-bottom: 20px; }

.cb-svc-body ul,
.cb-svc-body ol { margin: 0 0 22px; padding-inline-start: 22px; }

.cb-svc-body li { margin-bottom: 10px; }

.cb-svc-stats {
	border-top: 1px solid #E4E9EF;
	padding-top: 44px !important;
}

/* A hairline between columns instead of a box around each. Logical
   properties, so it lands on the correct side in Arabic. */
.cb-stat:not(:first-child) {
	border-inline-start: 1px solid #E4E9EF;
	padding-inline-start: 32px;
}

.cb-stat-lead {
	font-size: 28px;
	line-height: 1.3;
	font-weight: 700;
	color: #17A2B8;
	margin: 0 0 8px;
}

.cb-stat-caption {
	font-size: 15px;
	line-height: 1.7;
	color: #3D4658;
	margin: 0;
}

/* --- 4. why us -------------------------------------------------- */

.cb-circle-item { text-align: center; }

.cb-circle-icons .featured-item.style-2 { text-align: center; }

/* The theme has no circular icon style — style-2 renders the icon above
   the title and the ring is added here. A border rather than a fill,
   matching the reference's line-art treatment. */
.cb-circle-icons .featured-icon {
	width: 104px;
	height: 104px;
	margin: 0 auto 24px;
	border: 1px solid rgba(23, 162, 184, .38);
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 44px;
	line-height: 1;
	color: #17A2B8;
	background: #fff;
	transition: background .25s ease, color .25s ease,
	            border-color .25s ease, transform .25s ease;
}

.cb-circle-item:hover .featured-icon {
	background: #17A2B8;
	border-color: #17A2B8;
	color: #fff;
	transform: translateY(-5px);
}

.cb-circle-icons .featured-title h4 {
	font-size: 17px;
	line-height: 1.6;
	font-weight: 600;
	color: #0F1E4C;
	margin: 0;
	padding: 0 6px;
}

/* --- 5. quote ---------------------------------------------------- */

.cb-svc-quote { text-align: center; }

.cb-quote-mark {
	font-family: Georgia, "Times New Roman", serif;
	font-size: 92px;
	line-height: .55;
	color: rgba(23, 162, 184, .85);
	margin: 0 0 24px;
}

.cb-quote-text {
	font-size: 30px;
	line-height: 1.62;
	font-style: italic;
	font-weight: 500;
	color: #fff;
	max-width: 840px;
	margin: 0 auto 28px;
}

.cb-quote-by {
	font-size: 16px;
	font-weight: 600;
	color: #fff;
	margin: 0 0 4px;
}

.cb-quote-role {
	font-size: 13px;
	letter-spacing: .02em;
	color: rgba(255, 255, 255, .68);
	margin: 0;
}

/* --- 6. reviews -------------------------------------------------- */

.cb-svc-reviews .swiper-slide { height: auto; }

.cb-svc-reviews .swiper-button-next,
.cb-svc-reviews .swiper-button-prev {
	background: #fff;
	border: 1px solid #E4E9EF;
	color: #0F1E4C;
	transition: background .2s ease, color .2s ease, border-color .2s ease;
}

.cb-svc-reviews .swiper-button-next:hover,
.cb-svc-reviews .swiper-button-prev:hover {
	background: #17A2B8;
	border-color: #17A2B8;
	color: #fff;
}

/* --- 7. cta + booking form --------------------------------------- */

.cb-svc-cta { text-align: center; }

.cb-svc-cta-title {
	font-size: 38px;
	line-height: 1.32;
	font-weight: 700;
	color: #fff;
	max-width: 720px;
	margin: 0 auto 16px;
}

.cb-svc-cta-text {
	color: rgba(255, 255, 255, .78);
	font-size: 17px;
	line-height: 1.9;
	max-width: 720px;
	margin: 0 auto 38px;
}

/* The form sits on white inside the dark band — the same figure/ground
   move the reference uses for its review card, and the reason none of
   the inputs below need a dark variant. */
.cb-svc-form {
	background: #fff;
	border-radius: 20px;
	padding: 44px !important;
	max-width: 880px;
	margin: 0 auto;
	text-align: start;
	box-shadow: 0 30px 70px rgba(0, 0, 0, .28);
}

.cb-svc-form .wpcf7-form-control:not(.wpcf7-submit) {
	width: 100%;
	border: 1px solid #DFE5EC;
	border-radius: 10px;
	background: #FBFCFD;
	padding: 15px 18px;
	font-size: 15px;
	line-height: 1.6;
	color: #0F1E4C;
	transition: border-color .2s ease, box-shadow .2s ease, background .2s ease;
}

.cb-svc-form .wpcf7-form-control::placeholder { color: #9AA3B4; }

.cb-svc-form .wpcf7-form-control:not(.wpcf7-submit):focus {
	outline: none;
	background: #fff;
	border-color: #17A2B8;
	box-shadow: 0 0 0 3px rgba(23, 162, 184, .16);
}

.cb-svc-form textarea.wpcf7-form-control {
	min-height: 140px;
	resize: vertical;
}

.cb-svc-form .wpcf7-submit {
	width: auto;
	min-width: 200px;
	border: 0;
	border-radius: 10px;
	background: #17A2B8;
	color: #fff;
	padding: 16px 42px;
	font-size: 16px;
	font-weight: 600;
	cursor: pointer;
	transition: background .2s ease, transform .15s ease, box-shadow .2s ease;
}

.cb-svc-form .wpcf7-submit:hover {
	background: #128A9D;
	transform: translateY(-2px);
	box-shadow: 0 10px 24px rgba(23, 162, 184, .32);
}

.cb-svc-form .wpcf7-not-valid-tip { font-size: 13px; margin-top: 6px; }

/* --- tablet ------------------------------------------------------ */

@media (max-width: 1024px) {

	.cb-svc-hero-title { font-size: 40px; }

	.cb-svc-sec-title,
	.cb-svc-cta-title { font-size: 30px; }

	.cb-quote-text { font-size: 24px; }
}

/* --- phone -------------------------------------------------------- */

@media (max-width: 767px) {

	.cb-eyebrow { font-size: 15px; }
	.cb-svc-hero-title { font-size: 28px; }

	.cb-svc-sec-title,
	.cb-svc-cta-title { font-size: 25px; }

	.cb-svc-body { font-size: 16px; line-height: 1.95; }

	.cb-svc-stats { padding-top: 32px !important; }
	.cb-stat-lead { font-size: 23px; }

	/* The columns stack here, so a divider on the leading edge would run
	   down the side of each block instead of between them. */
	.cb-stat:not(:first-child) {
		border-inline-start: 0;
		padding-inline-start: 0;
		border-top: 1px solid #E4E9EF;
		padding-top: 22px;
		margin-top: 22px;
	}

	.cb-circle-icons .featured-icon { width: 76px; height: 76px; font-size: 32px; margin-bottom: 16px; }
	.cb-circle-icons .featured-title h4 { font-size: 15px; }

	.cb-quote-mark { font-size: 64px; }
	.cb-quote-text { font-size: 19px; }

	.cb-svc-cta-text { font-size: 16px; margin-bottom: 26px; }
	.cb-svc-form { padding: 24px !important; border-radius: 14px; }
	.cb-svc-form .wpcf7-submit { width: 100%; }
}

/* =================================================================
   SCROLL REVEAL
   -----------------------------------------------------------------
   Paired with assets/js/reveal.js. The .cb-reveal class is added by
   that script and never appears in the markup, so if the script does
   not run — no IntersectionObserver, a load failure, reduced motion —
   nothing here applies and every element keeps the opacity it was
   rendered with. A reveal effect must not be able to hide content.

   18px and 0.45s against the theme's 50px and 0.7s: far enough to be
   felt, short enough not to be waited through. Only opacity and
   transform are animated, so the whole thing stays on the compositor.
   ================================================================= */

.cb-reveal {
	opacity: 0;
	transform: translate3d(0, 18px, 0);
	transition: opacity .45s cubic-bezier(.22, .61, .36, 1),
	            transform .45s cubic-bezier(.22, .61, .36, 1);
}

.cb-reveal.is-in {
	opacity: 1;
	transform: none;
}

/* Belt and braces — the script already bails out on this setting, but
   a cached copy of an older script must not animate either. */
@media (prefers-reduced-motion: reduce) {

	.cb-reveal,
	.cb-reveal.is-in {
		opacity: 1 !important;
		transform: none !important;
		transition: none !important;
	}
}


/* =================================================================
   THE DYNAMIC SERVICES GRID
   -----------------------------------------------------------------
   Elementor's Posts widget, driven by the atalla_services query — see
   inc/elementor-services-query.php.

   WHY THE DESCRIPTION IS CLAMPED HERE AND NOT TRIMMED IN THE WIDGET
   -----------------------------------------------------------------
   The widget can cut the excerpt to a word count, and Elementor
   deliberately appends nothing when it does: filter_excerpt_more()
   returns an empty string. So a trimmed card ended mid-sentence with
   no mark at all — "…ووصولًا إلى" — which reads as content that failed
   to load rather than as a summary.

   The written excerpts are used in full instead, and the browser does
   the shortening: line-clamp cuts at a LINE rather than a word count,
   which is what makes every card in a row the same height whatever the
   width, and it supplies the ellipsis itself.

   A browser without line-clamp shows the whole excerpt. That is a
   longer card, not a broken one.
   ================================================================= */

.elementor-widget-posts .elementor-post__excerpt p {
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
	margin-bottom: 0;
}

/* The read-more sits directly under a clamped block, so it needs its
   own space; without this it touches the third line. */
.elementor-widget-posts .elementor-post__read-more {
	margin-top: 14px;
}