/**
 * Site-wide presentation: typography, page titles, static page layout.
 *
 * Body copy is justified. Deliberately scoped to running text rather than
 * applied to every <p> on the page: justifying navigation, buttons, form labels,
 * prices or table cells stretches short lines into gappy nonsense.
 */

/* --- Content alignment --------------------------------------------------- */

/*
 * .container-fluid is deliberately left full width here.
 *
 * Elementor pages carry their own boxed container at the kit's 1170px with 15px
 * of padding, and the page title sits in Bootstrap's .container - also 1170 with
 * 15px. Both centre on the same axis, so they line up.
 *
 * Capping .container-fluid at 1170 as well nests one 1170 box inside another:
 * the paddings stack and the content shifts right of the title, which is the
 * misalignment on the FAQ page. Pages that are NOT Elementor-built - Cart,
 * Checkout, My Account - do need the cap, and get it in woocommerce-pages.css.
 */

/*
 * Sub-heading sizes on FAQs and the legal pages are NOT set here.
 *
 * Elementor writes a per-element rule for each heading widget
 * (.elementor-5182 .elementor-element.elementor-element-XXX .elementor-heading-title),
 * which is more specific than anything page-level here and would win. They are
 * set in the Elementor data instead - 20px, matching About Us - so the editor
 * shows the real value too.
 */

/* --- Top header social icons --------------------------------------------- */

/*
 * .nav-social li is inline-block with a 10px right margin, so the gap between
 * Facebook and Instagram was that margin plus the whitespace between the list
 * items in the markup. Flex removes the whitespace and makes the gap explicit.
 */
.header7-social.nav-social,
.header-top .nav-social {
	display: flex;
	align-items: center;
	gap: 6px;
}

.header7-social.nav-social li,
.header-top .nav-social li {
	margin-right: 0;
	margin-left: 0;
}

/* --- Page titles --------------------------------------------------------- */

/*
 * Contact Us renders its title through Elementor's page-title widget, which
 * carries per-page CSS of 32px / 600 / 1.25. That CSS is scoped to that one
 * element, so the theme-rendered titles on every other page need the same
 * values here to look identical. The theme's own `.page-title h1` rule is a
 * different, older style at 24px and does not apply to this markup.
 */
.thim-ekit-page-title .page-title {
	margin: 0;
	font-size: 32px;
	font-weight: 600;
	line-height: 1.25;
	text-transform: none;
	color: var(--e-global-color-accent, #232427);
	/*
	 * The theme floats .page-title left (style.css), which takes it out of flow:
	 * the wrapper collapsed to 40px of padding with the 40px title hanging below
	 * it, so the padding-bottom landed ABOVE the title and the content beneath
	 * started 1px under it. Restoring normal flow gives the gap back.
	 */
	float: none;
}

/*
 * Aligning the title and page content with the header.
 *
 * Measured at a 1903px viewport: the header and breadcrumb both put their
 * content at x=374 (a 1170px .container with 15px padding). The title wrapper
 * below reproduces that exactly.
 *
 * Elementor's .e-con-inner is also a 1170px box starting at 359, but its
 * padding lives on the parent .e-con, so its content began at 359 - 15px left
 * of everything else. Giving the top-level inner the same 15px inset lines all
 * four up on 374..1514. Only .e-parent is targeted, so nested child containers
 * are not indented twice.
 */
.cabina-page-title-wrap {
	padding: 24px 15px 32px;
}

.cabina-page-title-inner {
	max-width: 1170px;
	margin: 0 auto;
	padding: 0 15px;
}

/*
 * Two container shapes are in use, and each needs different treatment.
 *
 * 1. Classic boxed containers (About Us, FAQs, Warranty, Delivery Terms,
 *    Terms and Conditions). .e-con-inner is already a 1170px box, but its
 *    padding lives on the parent .e-con, so its content began at 359 - 15px
 *    left of the header. The inset lines them up. Only .e-parent is targeted,
 *    so nested child containers are not indented twice.
 *
 * 2. Elementor's newer atomic element (Privacy Policy, Terms of Service).
 *    It renders as .e-con.e-atomic-element with no .e-con-inner and no
 *    max-width at all, so it ran the full width of the column - the "content
 *    is full width" report. It needs the whole 1170 + 15px treatment itself.
 *
 * Both land on 374..1514 at a 1903px viewport, matching header and breadcrumb.
 */
.entry-content .e-con-boxed.e-parent > .e-con-inner {
	padding-left: 15px;
	padding-right: 15px;
}

.entry-content > .elementor > .e-con.e-atomic-element {
	max-width: 1170px;
	margin-left: auto;
	margin-right: auto;
	padding-left: 15px;
	padding-right: 15px;
}

/*
 * Pages with no Elementor content - Cart, Checkout, Login, Register, Order
 * received - are flagged by cabina_plain_page_body_class(). page.php gives them
 * a full-width .container-fluid and nothing else holds them in, so they get the
 * cap here. Its existing 15px padding puts the content on 374 like everything
 * else. This must not reach Elementor pages, where it would nest 1170 in 1170.
 */
.cabina-plain-page #main > .container-fluid {
	max-width: 1170px;
	margin-left: auto;
	margin-right: auto;
}

/* Non-Elementor pages - Cart, Checkout, My Account - are capped at 1170 in
   woocommerce-pages.css, so their title needs the same treatment to match. */
.woocommerce-cart .cabina-page-title-wrap,
.woocommerce-checkout .cabina-page-title-wrap,
.woocommerce-account .cabina-page-title-wrap {
	padding-left: 0;
	padding-right: 0;
}

@media (max-width: 767px) {
	.thim-ekit-page-title .page-title {
		font-size: 26px;
	}

	.cabina-page-title-wrap {
		padding-top: 20px;
		padding-bottom: 14px;
	}
}

.entry-content p,
.thim-ekits-heading .desc p,
.elementor-widget-text-editor p,
.elementor-widget-theme-post-content p,
.post-content p,
.page-content p {
	text-align: justify;
	/* Keeps the worst of the inter-word gaps in check on narrow columns. */
	text-justify: inter-word;
}

/*
 * Places justification must not reach.
 *
 * Centred blocks stay centred; the cart and quotation totals, table cells and
 * anything already given an explicit alignment keep it.
 */
.entry-content .has-text-align-center p,
.entry-content p.has-text-align-center,
.thim-ekits-heading[style*="text-align:center"] .desc p,
.cabina-cart-page p,
.cabina-cart-summary p,
.woocommerce-account p,
.woocommerce-checkout p,
td p,
th p,
figcaption p,
.elementor-button p,
label p {
	text-align: inherit;
	text-justify: auto;
}

/*
 * A single short line looks worse justified than ranged left, and a justified
 * last line is never stretched anyway - so this mainly protects one-line
 * paragraphs such as captions and standfirsts.
 */
.entry-content p:only-child:not([class]) {
	text-align: left;
}

/* Narrow columns produce rivers of white space, so drop back to ranged left. */
@media (max-width: 575px) {
	.entry-content p,
	.thim-ekits-heading .desc p,
	.elementor-widget-text-editor p {
		text-align: left;
	}
}

/* --- Language switch, header top bar ------------------------------------ */

/*
 * Two links, the active one solid. Sits with the email and phone in the dark
 * strip, matching where the client's existing site puts its switcher.
 */
.header_7 .header7-contact .cabina-lang-switch {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	margin-left: 22px;
}

.header_7 .header7-contact .cabina-lang-switch .cabina-lang {
	color: #fff !important;
	font-size: 12px;
	letter-spacing: 0.02em;
	opacity: 0.65;
	text-decoration: none;
	transition: opacity 0.2s ease;
}

.header_7 .header7-contact .cabina-lang-switch .cabina-lang:hover {
	opacity: 1;
}

.header_7 .header7-contact .cabina-lang-switch .cabina-lang.is-current {
	font-weight: 700;
	opacity: 1;
}

/* A hairline between the two, rather than a separate character to align. */
.header_7 .header7-contact .cabina-lang-switch .cabina-lang + .cabina-lang {
	border-left: 1px solid rgba(255, 255, 255, 0.35);
	padding-left: 10px;
}

@media (max-width: 991px) {
	.header_7 .header7-contact .cabina-lang-switch {
		margin-left: 12px;
	}
}

/* --- Home: MADE IN QATAR text and video ---------------------------------- */

/*
 * The paragraph ran straight into the edge of the video beside it.
 *
 * The block is a two-column row, each column exactly 50% wide with no padding,
 * so the text filled its half right up to the line where the video starts and
 * the two touched.
 *
 * The space goes inside the text column as padding, not on the row as a gap:
 * the row is flex-wrap: wrap, and 50% + 50% + any gap exceeds the full width,
 * which would drop the video onto its own line. Elementor sets border-box, so
 * padding stays within the 50% and the columns keep their proportions.
 *
 * Desktop only. Below 992px the columns stack, where the text is full width and
 * a right inset would just look like a misaligned margin.
 */
@media (min-width: 992px) {
	.home .elementor-element-16577a1 {
		padding-right: 40px;
	}
}