/* Add here all your CSS customizations */

/* The site loads skin-construction.css so the header matches the demo-construction
   page exactly (primary — see the --zagros-primary variable that skin's own colors
   were converted to). That skin's "secondary" is a gold (#EEAB26) which our inner
   pages were not designed around — they use text-secondary / bg-color-secondary for
   dark headings and the footer — so a separately admin-configurable secondary color
   (--zagros-secondary) is applied here instead. Secondary is not used anywhere in the
   header, so header fidelity is unaffected. Colors default to the exact hex the site
   already used before Settings → Appearance made them editable — see the fallback in
   each var(), matching AppearanceSetting::DEFAULT_COLORS. */
html body .text-secondary,
html body .text-color-secondary {
	color: var(--zagros-secondary, #220C3C) !important;
}

html body .bg-color-secondary {
	background-color: var(--zagros-secondary, #220C3C) !important;
}

/* --- Single caret on the logged-in account menu ---
   theme.js appends a `<i class="fas fa-chevron-down">` to every .dropdown-toggle in the header
   (see its own `.append('<i class="fas fa-chevron-down"></i>')` call), and theme.css hides the
   native Bootstrap ::after caret that class would otherwise also render — but only scoped to
   `.header-nav-main nav > ul li a.dropdown-toggle` (the "خدمات" nav item and friends). The
   logged-in account icon's dropdown-toggle lives in `.header-social-icons` instead, outside that
   scope, so its native caret was never hidden — showing up next to the JS-appended one for two
   arrows. Hiding it here for this link specifically closes that gap. */
#header .header-social-icons .dropdown-toggle::after {
	content: none;
}

/* --- Blog post attachment download cards ---
   Each admin-uploaded file (Posts → edit → "فایل‌های ضمیمه") renders as one of these on the
   public post page — icon + admin-chosen label/button-text + file type/size, the whole card
   itself the click target (bigger, easier hit area than a plain text link). */
.attachment-download-card {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 14px 16px;
	border: 1px solid #E7E7E7;
	border-radius: 6px;
	background: #fff;
	text-decoration: none !important;
	transition: all 0.25s ease;
}

.attachment-download-card:hover {
	border-color: var(--zagros-primary, #E04622);
	box-shadow: 0 6px 18px rgba(0, 0, 0, 0.07);
	transform: translateY(-2px);
}

.attachment-download-icon {
	flex: 0 0 auto;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(var(--zagros-primary-rgb, 224, 70, 34), 0.1);
	color: var(--zagros-primary, #E04622);
	font-size: 18px;
}

.attachment-download-info {
	flex: 1 1 auto;
	min-width: 0;
	display: flex;
	flex-direction: column;
}

.attachment-download-label {
	color: #333;
	font-weight: 600;
	font-size: 14px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.attachment-download-meta {
	color: #999;
	font-size: 12px;
	direction: ltr;
	text-align: right;
}

.attachment-download-arrow {
	flex: 0 0 auto;
	color: #C4C4C4;
	transition: color 0.25s ease;
}

.attachment-download-card:hover .attachment-download-arrow {
	color: var(--zagros-primary, #E04622);
}

/* --- Default theme logo recolor ---
   The demo's big corner logo (.logo-default, the one bled up/left/down via negative margins
   in demo-construction.css to form the diamond corner cut) is a flat orange (#E04622)
   triangle behind a white icon + "PORTO CONSTRUCTION" text. Split via PHP GD (linear color
   projection between the known orange and white endpoints) into logo-construction-shape.png
   (alpha-only mask of the triangle) and logo-construction-fg.png (the white icon/text,
   unchanged) so the triangle can be tinted with --zagros-primary while the white content
   stays put. .logo-default keeps its position/z-index/opacity rules from demo-construction.css
   (class-based, so they apply to this <span> the same as they did to the old <img>) — only
   sizing/layering is added here. The small sticky-header logo (.logo-small) is solid black in
   the source art with no orange in it, so it is intentionally NOT split/recolored. */
.logo-recolor {
	display: block;
	position: relative;
	width: 324px;
	height: 212px;
}

.logo-recolor-shape {
	position: absolute;
	inset: 0;
	background-color: var(--zagros-primary, #E04622);
	-webkit-mask-image: url('/theme/front/img/demos/construction/logo-construction-shape.png');
	mask-image: url('/theme/front/img/demos/construction/logo-construction-shape.png');
	-webkit-mask-size: 100% 100%;
	mask-size: 100% 100%;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
}

.logo-recolor-fg {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
}

/* --- Admin-uploaded logo scaling ---
   .logo-default/.logo-small carry fixed width/height attributes (324x212 / 131x48) so the
   demo's bleed-margin and sticky-transform math has stable numbers to work with — but a plain
   <img> stretches to fill that exact box non-uniformly if the uploaded file's own aspect ratio
   doesn't match (e.g. a square logo squeezed into the wide 131x48 sticky box). object-fit keeps
   the box's dimensions (so the surrounding math is untouched) while scaling the image itself
   proportionally within it, unlike the theme's own default artwork (already pre-composed to
   those exact ratios) which this doesn't visibly change. */
#header .header-logo img.logo-default,
#header .header-logo img.logo-small {
	object-fit: contain;
}

/* --- Blog/news thumbnail cropping ---
   The theme leaves .recent-posts / .post-image images at their own natural size (img-fluid
   only sets width:100%; height:auto), assuming every photo already matches the demo's own
   thumbnail proportions exactly. Real content (seeded posts, admin uploads) rarely does —
   a square or portrait photo in that markup renders far taller than the demo's thumbnails,
   looking stretched/oversized. Fixing the aspect ratio + object-fit here crops any image
   (any dimensions) to the same proportions as the theme's own demo photos, so the layout
   stays consistent no matter what photo an admin uploads. The featured slot can also hold a
   video (Post::featured_media_type) — the same rules apply to a sibling `video` selector so a
   video thumbnail crops/sizes identically to an image one. */
.recent-posts img,
.recent-posts video {
	aspect-ratio: 720 / 340;
	object-fit: cover;
	width: 100%;
	height: auto;
}

.post-medium .post-image img,
.post-medium .post-image video {
	aspect-ratio: 4 / 3;
	object-fit: cover;
	width: 100%;
	height: auto;
}

.blog-single-post .post-image img,
.blog-single-post .post-image video {
	aspect-ratio: 1200 / 500;
	object-fit: cover;
	width: 100%;
	height: auto;
}

/* --- Uniform post-medium card layout (blog/announcement grids) ---
   Real titles/excerpts vary in length far more than the theme's own lorem-ipsum placeholders,
   so "بیشتر بخوانید" ended up at a different height on every card. Clamping the title and
   excerpt to a fixed number of lines (ellipsis on overflow) and pinning the meta/button row to
   the bottom of the card via flexbox keeps every card in a row the same height, with the
   button aligned across the whole row regardless of how long any one title/excerpt is. */
.blog-posts .row > [class*="col-"] {
	display: flex;
}

article.post-medium.border-0 {
	display: flex;
	flex-direction: column;
	width: 100%;
}

article.post-medium.border-0 .post-content {
	display: flex;
	flex-direction: column;
	flex-grow: 1;
}

article.post-medium.border-0 .post-content h2 {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

article.post-medium.border-0 .post-content > p {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

article.post-medium.border-0 .post-content .post-meta {
	margin-top: auto;
}

/* --- Embedded video sizing inside post/announcement body content ---
   The admin editor can insert two kinds of video: a linked embed (YouTube/Vimeo <iframe
   class="ql-video">) or an uploaded file (<video>, see the editor's videoFile blot). Neither
   has any real size without this — an <iframe> collapses to the browser's tiny ~300×150
   default, and a bare <video> just renders at the source file's native pixel size. Both are
   made a responsive 16:9 box the width of the article column. */
.post-body iframe.ql-video,
.post-body video {
	display: block;
	width: 100%;
	aspect-ratio: 16 / 9;
	height: auto;
	border: 0;
	margin: 1.5rem 0;
}

/* theme.css sets `#header .header-nav { justify-content: flex-end }` unconditionally — written
   for the theme's original LTR layout, where flex-end (the far side from where text starts)
   lands on the right. Under our dir="rtl" page, flex-end instead packs nav items toward the
   LEFT, leaving a gap between the nav links and the true right edge. flex-start is "end" in
   LTR terms but resolves to the right edge in RTL, which is what we actually want here. */
#header .header-nav.header-nav-stripe {
	justify-content: flex-start;
	/* theme.css also gives this a `flex-grow: 1`, so it expands to fill the header row far beyond
	   its own nav links' width — the account-icon block next to it (a separate flex sibling)
	   then docks against this element's OUTER edge, leaving a big empty gap before it actually
	   reaches the nav links themselves. Shrink it back to its content's natural width so the
	   icon sits directly beside the visible nav links instead of beside empty space. */
	flex-grow: 0;
}

/* The logo's own inner box (.header-logo, 100px) defaults to flex-start alignment within its
   column too — under our RTL page that packs it against the column's own RIGHT edge, which
   used to be correct when this column rendered on the page's right side (the demo's original
   layout). Now that the column renders on the LEFT (swapped in header.blade.php), it needs to
   dock against its OWN left edge instead — flex-end, which in RTL resolves to the left. */
#header.header-narrow .header-column.order-2 {
	justify-content: flex-end;
}

/* --- Slimmer header row ---
   demo-construction.css bumps every nav link's min-height to 90px (needed in the original demo to
   make room for its big bleeding diamond logo graphic). On top of that, theme.css gives the same
   links `height: calc(100% + 1px)` — a percentage height that (via the header-column's own
   align-self:stretch) turns into a circular reference back to the header row's own height, so the
   row ends up exactly as tall as whatever the logo happens to need, however tall that is. Killing
   that percentage height (height:auto) breaks the loop, and dropping the min-height back to the
   theme's own plain "header-narrow" default (60px) is what actually makes the bar slimmer. */
@media (min-width: 992px) {
	#header .header-nav.header-nav-stripe .header-nav-main nav > ul > li > a {
		height: auto !important;
		min-height: 60px !important;
	}

	/* Even after the nav-link fix above, nested align-self:stretch chains (.header-column →
	   its own inner .header-row → .header-nav/.header-nav-features) keep pinning the bar back
	   to its old ~113px height through routes that are impractical to track down one by one.
	   A max-height on .header-body sidesteps all of that: whatever the internal stretch math
	   wants, the box's own reported height (and so its white background strip) is capped here.
	   No overflow:hidden here, though — the logo column (.order-2) has its own bleeding
	   .logo-default that deliberately extends past this height, and clipping the whole
	   .header-body clipped that bleed too (only showing it fully whenever a dropdown's own
	   overflow-escape rule below happened to lift the clip, making it visibly "pop" on hover). */
	#header .header-body {
		max-height: 78px !important;
	}

	/* The nav column's own stretched content, unlike the logo, must actually be cropped (not just
	   height-capped-but-overflowing) or it hangs visibly below the slim white strip above. Scoped
	   to this column only so it never touches the logo column next to it. */
	#header .header-column.order-1 {
		max-height: 78px !important;
		overflow: hidden;
	}

	/* That overflow:hidden also clips anything that legitimately pops out below the header —
	   a nav item's dropdown submenu (e.g. "خدمات") or the account-menu dropdown — making it open
	   completely invisible instead of just hidden-until-hover. Let this column grow past its own
	   cap while a dropdown inside it is actually open, so the submenu isn't clipped away. */
	#header .header-column.order-1:has(.dropdown:hover),
	#header .header-column.order-1:has(.dropdown.open) {
		overflow: visible;
	}

	/* demo-construction.css centers .logo-small with a fixed 12px top margin, tuned for the
	   theme's own ~90-113px-tall (unslimmed) header. In our 78px-tall .header-body above, that
	   fixed offset sits noticeably below center instead. Center it properly for our actual bar
	   height: top:50% + a negative margin-top of half its own fixed height (48px) — the same
	   trick used to vertically center an absolutely-positioned box of known size. */
	.sticky-header-active #header.header-narrow .header-logo .logo-small {
		top: 50%;
		margin-top: -24px;
	}
}

/* --- Inner-page banner clearance under the floating header ---
   #header is position:absolute in this skin (deliberately, so it can float transparently over
   about.blade.php's own big photo hero). Every OTHER page's banner — the shared
   front.partials.page-header component (contact, live broadcast, services, projects/show) and
   the plain "page-header-md" banner each listing/detail page builds inline (services listing,
   blog, auth pages) — used far less top padding (40-80px) than the header's real height
   (~103px with the header now slimmed down above), so their breadcrumb and even their title were
   rendering hidden behind it. about.blade.php's own hero (page-header-background-md, 140px+)
   already clears fine and is deliberately excluded so its proportions aren't disturbed. */
.page-header.page-header-modern.page-header-background.page-header-background-sm,
.page-header.page-header-modern.page-header-md {
	padding-top: 130px !important;
}

@media (max-width: 991px) {
	/* The header collapses to a single compact row on narrower viewports (no side-by-side
	   logo/nav columns), so it needs less clearance there. */
	.page-header.page-header-modern.page-header-background.page-header-background-sm,
	.page-header.page-header-modern.page-header-md {
		padding-top: 90px !important;
	}
}


/* Projects listing (demo-construction-projects.html port): the demo's gallery art is all one
   size, but uploaded cover images aren't — crop them to one ratio so the isotope rows line up.
   Projects without a cover get a same-size placeholder tile. */
.portfolio-list .project-thumb {
	display: block;
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
}

.portfolio-list .project-thumb-empty {
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--zagros-tertiary, #EAEFF3);
	color: #b5c0c9;
	font-size: 2.5rem;
}

/* Project detail gallery: same fixed ratio so slides of different sizes don't make the
   carousel jump in height. */
#thumbGalleryDetail .project-slide,
#thumbGalleryThumbs .project-slide {
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
}

/* ============================================================
   Live streaming (/live page, menu badge, "live started" popup)
   Colours come from the admin-configurable theme variables.
   ============================================================ */
.live-badge {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	background: #e02424;
	color: #fff;
	font-size: 0.72rem;
	font-weight: 700;
	line-height: 1;
	padding: 5px 10px;
	border-radius: 999px;
	letter-spacing: 0;
	white-space: nowrap;
}

.live-badge-lg {
	font-size: 0.85rem;
	padding: 7px 14px;
}

.live-badge-offline {
	background: rgba(255, 255, 255, 0.18);
	color: #fff;
}

.live-badge-offline .fa-circle {
	font-size: 0.5rem;
	opacity: 0.7;
}

.live-dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: #fff;
	animation: live-pulse 1.4s ease-in-out infinite;
}

@keyframes live-pulse {
	0%, 100% { opacity: 1; transform: scale(1); }
	50% { opacity: 0.35; transform: scale(0.75); }
}

@media (prefers-reduced-motion: reduce) {
	.live-dot { animation: none; }
}

/* Menu item badge — sits beside the "پخش زنده" link text without changing the row height. */
#header .nav-link-live .live-badge-nav {
	font-size: 0.62rem;
	padding: 3px 7px;
	margin-right: 6px;
	vertical-align: middle;
}

#header .nav-link-live .live-badge-nav .live-dot {
	width: 6px;
	height: 6px;
}

/* Hero */
.live-hero {
	position: relative;
	background-size: cover;
	background-position: center;
}

.live-hero-image::before {
	content: "";
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, 0.55);
}

.live-hero .container {
	position: relative;
}

.live-hero-description {
	max-width: 720px;
}

/* Player */
.live-player-card {
	background: #000;
	border-radius: 8px;
	overflow: hidden;
	box-shadow: 0 20px 45px rgba(0, 0, 0, 0.18);
}

.live-player {
	position: relative;
	width: 100%;
	height: 0;
	background: #0b0b0f;
}

.live-player iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	border: 0;
}

.live-player-state {
	position: absolute;
	inset: 0;
	z-index: 2;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 12px;
	padding: 20px;
	color: #fff;
	text-align: center;
	background: #0b0b0f;
	pointer-events: none;
}

.live-player-error {
	pointer-events: auto;
}

.live-spinner {
	width: 42px;
	height: 42px;
	border: 3px solid rgba(255, 255, 255, 0.2);
	border-top-color: var(--zagros-primary, #E04622);
	border-radius: 50%;
	animation: live-spin 0.9s linear infinite;
}

@keyframes live-spin {
	to { transform: rotate(360deg); }
}

.live-player-bar {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 12px 16px;
	background: #fff;
	border-top: 1px solid #eee;
}

.live-player-channel {
	flex: 1;
	min-width: 0;
	font-weight: 700;
	color: #222;
}

.live-player-link {
	white-space: nowrap;
	font-size: 0.9rem;
}

@media (max-width: 575px) {
	/* Edge-to-edge player on phones. */
	.live-player-card {
		margin-left: -15px;
		margin-right: -15px;
		border-radius: 0;
	}
}

/* Offline / info states */
.live-state-card {
	background: #fff;
	border: 1px solid #eee;
	border-radius: 8px;
	padding: 48px 24px;
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
}

.live-state-icon {
	width: 88px;
	height: 88px;
	margin: 0 auto 20px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	font-size: 2.2rem;
	color: var(--zagros-secondary, #220C3C);
	background: rgba(var(--zagros-tertiary-rgb, 234, 239, 243), 1);
}

.live-state-icon-live {
	color: #fff;
	background: #e02424;
}

.live-offline-image {
	max-width: 100%;
	max-height: 320px;
	border-radius: 8px;
	object-fit: cover;
}

.live-offline-note {
	/* Own centred line (not inline beside the button), shrink-wrapped to its text. */
	display: table;
	margin-left: auto;
	margin-right: auto;
	background: rgba(var(--zagros-tertiary-rgb, 234, 239, 243), 1);
	border-radius: 6px;
	padding: 10px 16px;
	color: #444;
}

/* "Live started" popup */
.live-popup .modal-dialog {
	max-width: 440px;
}

.live-popup .modal-content {
	border-radius: 10px;
}

.live-popup-image {
	width: 100%;
	max-height: 230px;
	object-fit: cover;
	display: block;
}

.live-popup-hero {
	height: 120px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 3rem;
	color: #fff;
	background: var(--zagros-secondary, #220C3C);
}

.live-popup-close {
	position: absolute;
	top: 10px;
	left: 12px;
	z-index: 3;
	width: 34px;
	height: 34px;
	border-radius: 50%;
	background: rgba(0, 0, 0, 0.45) !important;
	color: #fff !important;
	opacity: 1 !important;
	text-shadow: none;
	font-size: 1.4rem;
	line-height: 1;
}

.live-popup-cta {
	padding-top: 12px;
	padding-bottom: 12px;
}

@media (max-width: 575px) {
	.live-popup .modal-dialog {
		margin: 12px;
	}
}