/*
 * PEC Healthcare - design overrides (loaded after app.css).
 * Kept in a separate file so the compiled app.css never has to be edited.
 */

/* ---------------------------------------------------------------
 * 1. Wider layout on large screens (+25%: 1140px -> 1425px)
 *    Only from 1600px up, so laptops keep the current layout.
 * ------------------------------------------------------------- */
@media (min-width: 1600px) {
	.container:not(.container-bs):not(.container-xl-custom):not(.container-xxl-custom) {
		max-width: 1425px;
	}

	/* Elementor (product / content pages) used its own 1140px boxed width,
	   so it never lined up with the header and breadcrumb */
	/* "body" prefix: Elementor's kit CSS (post-*.css) loads after this file */
	body .e-con {
		--container-max-width: 1425px;
	}
	body .elementor-section.elementor-section-boxed > .elementor-container {
		max-width: 1425px;
	}

	/* Product pages: the centred title and the phrases right under it stay at the
	   previous reading width (80% of 1425px = 1140px). Everything else uses the full width.
	   (Cube pages open with a left-aligned hero banner, so they are left out.) */
	body.pec-product:not([class*="pec-product-cube"]) .product_nav ~ .elementor > div.e-con:nth-of-type(-n+3) .elementor-widget-heading .elementor-heading-title {
		width: 80%;
		margin-inline: auto;
	}
}

/* ---------------------------------------------------------------
 * 2. Main menu: green line sits right under the text
 *    (was pinned to the bottom of a 100px-tall link -> ~50px gap)
 * ------------------------------------------------------------- */
#header .header-nav.header-nav-line.header-nav-bottom-line nav > ul > li > a:before,
#header .header-nav.header-nav-line.header-nav-bottom-line nav > ul > li:hover > a:before {
	top: calc(50% + 15px);
	margin-top: 0;
	transform: none;
	height: 3px;
}

/* Header: a little shorter, and a solid (not see-through) bar when it sticks.
   The default sticky bar is 90% white, so hero text/buttons showed through the logo. */
#header.header-effect-shrink .header-container {
	min-height: 88px;
}
html.sticky-header-active #header .header-body {
	background: #fff !important; /* app.css forces rgba(255,255,255,.9) with !important */
	border-bottom: 1px solid #e6e6e6;
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.06);
}

/* ---------------------------------------------------------------
 * 2b. Home hero slider: the box had a hard-coded height of 534px,
 *     leaving a big empty gap below the image on smaller screens
 *     and clipping it on wide ones. Height now follows the image.
 * ------------------------------------------------------------- */
@media (min-width: 1200px) {
	.owl-carousel.manual {
		height: auto !important;
		aspect-ratio: 1000 / 382;
	}
}
/* tablets: the text column is narrower, so it needs a little more height */
@media (min-width: 992px) and (max-width: 1199.98px) {
	.owl-carousel.manual {
		height: auto !important;
		aspect-ratio: 1000 / 395;
	}
}
@media (min-width: 768px) and (max-width: 991.98px) {
	.owl-carousel.manual {
		height: auto !important;
		aspect-ratio: 1000 / 500;
	}
}
/* keep the button label on one line (it was wrapping in Persian on tablets) */
@media (min-width: 768px) {
	.shw_slider > div a button {
		white-space: nowrap;
		min-width: 150px;
	}
}

/* ---------------------------------------------------------------
 * 3. Persian (IRANSans): load the real weights.
 *    app.css only registers the regular face, so every font-weight
 *    600/700 was faux-bolded by the browser (looks too thick).
 * ------------------------------------------------------------- */
@font-face {
	font-family: iransans; font-style: normal; font-weight: 200; font-display: swap;
	src: url("../fonts/iransans/woff2/IRANSansWeb_UltraLight.woff2") format("woff2"),
	     url("../fonts/iransans/woff/IRANSansWeb_UltraLight.woff") format("woff");
}
@font-face {
	font-family: iransans; font-style: normal; font-weight: 300; font-display: swap;
	src: url("../fonts/iransans/woff2/IRANSansWeb_Light.woff2") format("woff2"),
	     url("../fonts/iransans/woff/IRANSansWeb_Light.woff") format("woff");
}
@font-face {
	font-family: iransans; font-style: normal; font-weight: 500; font-display: swap;
	src: url("../fonts/iransans/woff2/IRANSansWeb_Medium.woff2") format("woff2"),
	     url("../fonts/iransans/woff/IRANSansWeb_Medium.woff") format("woff");
}
@font-face {
	font-family: iransans; font-style: normal; font-weight: 700; font-display: swap;
	src: url("../fonts/iransans/woff2/IRANSansWeb_Bold.woff2") format("woff2"),
	     url("../fonts/iransans/woff/IRANSansWeb_Bold.woff") format("woff");
}
@font-face {
	font-family: iransans; font-style: normal; font-weight: 900; font-display: swap;
	src: url("../fonts/iransans/woff2/IRANSansWeb_Black.woff2") format("woff2"),
	     url("../fonts/iransans/woff/IRANSansWeb_Black.woff") format("woff");
}

/* Breadcrumb bar on product pages ("Home | Product"): was bold 700, too heavy.
   Same weight as the menu tabs. */
.product_nav a,
.product_nav span {
	font-weight: 600;
}
html[lang=fa-IR] .product_nav a,
html[lang=fa-IR] .product_nav span {
	font-weight: 500;
}

/* ---------------------------------------------------------------
 * 4. Home hero slider: type size / weight and the two progress tabs
 * ------------------------------------------------------------- */
/* lighter weights (was 700 everywhere; heavy, especially in Persian) */
.shw_slider > div h2 {
	font-weight: 600;
}
.shw_slider > div p {
	font-weight: 500;
}
html[lang=fa-IR] .shw_slider > div h2 {
	font-weight: 500;
}
html[lang=fa-IR] .shw_slider > div p {
	font-weight: 400;
}

/* tabs: line up with the photo's edge instead of sticking out past it,
   and leave a proper gap below the photo (was 1px) */
@media (min-width: 768px) {
	#main-slider-nav {
		padding-inline: 34px;
		bottom: -58px !important;
	}
	/* white space between the two tabs and the grey Products band (was 3px) */
	.sam-product-section {
		margin-top: 40px;
	}
}

/* bigger text to match the wider layout */
@media (min-width: 1200px) {
	.shw_slider > div h2 {
		font-size: 28px;
		line-height: 1.5;
		margin-bottom: 14px;
	}
	.shw_slider > div p {
		font-size: 16px;
		line-height: 1.9;
	}
	.shw_slider > div a button {
		font-size: 16px;
		padding: 9px 26px;
	}
}
@media (min-width: 1600px) {
	.shw_slider > div h2 {
		font-size: 32px;
	}
	.shw_slider > div p {
		font-size: 18px;
	}
	.shw_slider > div a button {
		font-size: 17px;
		padding: 10px 30px;
	}

	/* body copy and form labels were 14px / 12.6px: small next to a 1425px layout */
	#main_container .container p {
		font-size: 16px;
		line-height: 1.85;
	}
	#main_container .form-label {
		font-size: 14px;
	}
	/* (re-assert the hero text size: the rule above is more specific) */
	#main_container #slider-content p {
		font-size: 18px;
		line-height: 1.9;
	}
}

/* Persian menu: medium weight, slightly larger (Persian letters read smaller than Latin) */
html[lang=fa-IR] #header .header-nav-main nav > ul > li > a {
	font-weight: 500;
	font-size: 15px;
}
html[lang=fa-IR] #header .header-nav-top .nav-link {
	font-weight: 400;
}