/**
 * Magnet layout & typography overrides for Swyft inner pages.
 */

@font-face {
	font-family: 'IRANSansX';
	src: url('/wp-content/themes/magnetech/assets/fonts/IRANSansXV.woff') format('woff'),
	     url('/fonts/IRANSansXV.woff') format('woff');
	font-style: normal;
	font-weight: 100 900;
	font-display: swap;
}

:root {
	--cs-font-base-family: 'IRANSansX', 'IRANSans', system-ui, sans-serif !important;
	--cs-font-primary-family: 'IRANSansX', 'IRANSans', system-ui, sans-serif !important;
	--cs-font-headings-family: 'IRANSansX', 'IRANSans', system-ui, sans-serif !important;
	--cs-font-post-meta-family: 'IRANSansX', 'IRANSans', system-ui, sans-serif !important;
	--cs-font-post-content-family: 'IRANSansX', 'IRANSans', system-ui, sans-serif !important;
}

html, body,
h1, h2, h3, h4, h5, h6,
p, a, span, button, input, textarea, select, label,
div, article, section, header, footer, nav, aside,
blockquote, li, ul, ol, td, th,
.cs-entry__title, .cs-entry__title a,
.cs-entry__content, .entry-content, .entry-content p,
.widget, .widget-title, .cs-sidebar__area,
body.magnet-layout, body.magnet-layout * {
	font-family: 'IRANSansX', 'IRANSans', system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
}

/* Light font weight (200 / 300) for readable body text, excluding footer */
:not(#site-footer) > p,
:not(#site-footer) article p,
.entry-content p,
.cs-entry__content p,
.editor-styles-wrapper p {
	font-weight: 300 !important;
}

/* Explicit bold styling for articles and editor */
.entry-content strong,
.entry-content b,
.cs-entry__content strong,
.cs-entry__content b,
.entry-content p strong,
.entry-content p b,
.cs-entry__content p strong,
.cs-entry__content p b,
.entry-content li strong,
.entry-content li b,
.editor-styles-wrapper strong,
.editor-styles-wrapper b,
.editor-styles-wrapper p strong,
.editor-styles-wrapper p b,
.entry-content .has-bold-font-weight,
.entry-content .has-font-weight-bold,
.entry-content [style*="font-weight: bold"],
.entry-content [style*="font-weight:bold"],
.entry-content [style*="font-weight: 700"],
.entry-content [style*="font-weight:700"],
.entry-content [style*="font-weight: 800"],
.entry-content [style*="font-weight:800"],
.entry-content [style*="font-weight: 900"],
.entry-content [style*="font-weight:900"] {
	font-weight: 700 !important;
	color: #0f172a !important;
}

.entry-content,
.cs-entry__content {
	font-size: 1.125rem !important; /* 18px */
	line-height: 2.1 !important;
	color: #334155 !important;
	font-weight: 300 !important;
}

.entry-content h1, .cs-entry__content h1 { font-size: 1.55rem !important; line-height: 1.45 !important; font-weight: 700 !important; margin-top: 2rem !important; margin-bottom: 1rem !important; }
.entry-content h2, .cs-entry__content h2 { font-size: 1.3rem !important; line-height: 1.5 !important; font-weight: 700 !important; margin-top: 2rem !important; margin-bottom: 1rem !important; }
.entry-content h3, .cs-entry__content h3 { font-size: 1.125rem !important; line-height: 1.5 !important; font-weight: 600 !important; margin-top: 1.75rem !important; margin-bottom: 0.75rem !important; }
.entry-content h4, .cs-entry__content h4 { font-size: 1rem !important; line-height: 1.55 !important; font-weight: 600 !important; margin-top: 1.5rem !important; margin-bottom: 0.75rem !important; }

.entry-content p, .cs-entry__content p {
	margin-bottom: 1.5rem !important;
}

/* Reset metadata, category and pill lists */
.post-categories,
.cs-meta-category ul,
.cs-entry__tags ul,
.entry-content .post-categories,
.entry-content .wp-block-gallery,
.entry-content .wp-block-social-links {
	list-style: none !important;
	padding: 0 !important;
	margin: 0 !important;
}

/* Bullet points (Unordered lists) in article content & editor */
.entry-content ul:not(.post-categories):not(.wp-block-gallery):not(.wp-block-social-links),
.cs-entry__content ul:not(.post-categories):not(.wp-block-gallery):not(.wp-block-social-links),
.entry-content ul.wp-block-list,
.cs-entry__content ul.wp-block-list,
.editor-styles-wrapper ul.wp-block-list,
.editor-styles-wrapper .block-editor-block-list__layout ul:not(.wp-block-gallery):not(.wp-block-social-links) {
	list-style-type: disc !important;
	list-style-position: outside !important;
	padding-right: 2rem !important;
	padding-left: 0 !important;
	margin-top: 0.75rem !important;
	margin-bottom: 1.5rem !important;
}

/* Nested unordered lists */
.entry-content ul ul,
.cs-entry__content ul ul,
.editor-styles-wrapper ul ul {
	list-style-type: circle !important;
	padding-right: 1.5rem !important;
	padding-left: 0 !important;
	margin-top: 0.5rem !important;
	margin-bottom: 0.5rem !important;
}

.entry-content ul ul ul,
.cs-entry__content ul ul ul,
.editor-styles-wrapper ul ul ul {
	list-style-type: square !important;
}

/* Numbered lists (Ordered lists) in article content & editor */
.entry-content ol,
.cs-entry__content ol,
.entry-content ol.wp-block-list,
.cs-entry__content ol.wp-block-list,
.editor-styles-wrapper ol.wp-block-list,
.editor-styles-wrapper .block-editor-block-list__layout ol {
	list-style-type: decimal !important;
	list-style-position: outside !important;
	padding-right: 2rem !important;
	padding-left: 0 !important;
	margin-top: 0.75rem !important;
	margin-bottom: 1.5rem !important;
}

/* Nested ordered lists */
.entry-content ol ol,
.cs-entry__content ol ol,
.editor-styles-wrapper ol ol {
	list-style-type: lower-alpha !important;
	padding-right: 1.5rem !important;
	padding-left: 0 !important;
	margin-top: 0.5rem !important;
	margin-bottom: 0.5rem !important;
}

/* List items in article content */
.entry-content li,
.cs-entry__content li,
.editor-styles-wrapper li {
	display: list-item !important;
	margin-bottom: 0.5rem !important;
	line-height: 1.9 !important;
}

/* Fix sidebar width and layout proportion */
@media (min-width: 992px) {
	.cs-sidebar-right .cs-main-content,
	.cs-sidebar-left .cs-main-content {
		grid-template-columns: minmax(0, 1fr) 300px !important;
		gap: 2.5rem !important;
	}
}

@media (min-width: 1200px) {
	.cs-sidebar-right .cs-main-content,
	.cs-sidebar-left .cs-main-content {
		grid-template-columns: minmax(0, 1fr) 320px !important;
		gap: 3rem !important;
	}
}

@media (min-width: 1660px) {
	.cs-sidebar-right .cs-main-content,
	.cs-sidebar-left .cs-main-content {
		grid-template-columns: minmax(0, 1fr) 340px !important;
		gap: 3.5rem !important;
	}
}

.cs-sidebar__area {
	max-width: 100% !important;
}

/* Prevent grid content blowout (tables, code, embeds) from overlapping sidebar */
.cs-content-area,
.cs-main-content > *,
.entry-content,
.cs-entry__content {
	min-width: 0 !important;
	max-width: 100% !important;
}

/* Responsive Table Styling & Overflow Protection */
.entry-content .wp-block-table,
.cs-entry__content .wp-block-table,
.wp-block-table {
	overflow-x: auto !important;
	max-width: 100% !important;
	width: 100% !important;
	box-sizing: border-box !important;
	margin-top: 1.5rem !important;
	margin-bottom: 2rem !important;
	-webkit-overflow-scrolling: touch;
}

.entry-content .wp-block-table > table,
.cs-entry__content .wp-block-table > table,
.entry-content .wp-block-table table,
.cs-entry__content .wp-block-table table {
	margin-left: 0 !important;
	margin-right: 0 !important;
	width: 100% !important;
	max-width: 100% !important;
	min-width: 0 !important;
}

.entry-content table,
.cs-entry__content table {
	width: 100% !important;
	max-width: 100% !important;
	border-collapse: collapse !important;
	text-align: right !important;
	direction: rtl !important;
	font-size: 0.95rem !important;
	line-height: 1.6 !important;
	border: 1px solid #e2e8f0 !important;
	border-radius: 8px !important;
	margin-top: 1.5rem !important;
	margin-bottom: 2rem !important;
}

/* Keep article media inside the content column on desktop. */
@media (min-width: 992px) {
	.single .entry-content .wp-block-image,
	.single .entry-content .wp-block-image img,
	.single .entry-content > img,
	.single .entry-content > figure {
		display: block !important;
		box-sizing: border-box !important;
		max-width: 100% !important;
		width: auto;
		height: auto !important;
		float: none !important;
	}

	.single .entry-content .wp-block-image img,
	.single .entry-content > img {
		width: 100% !important;
	}
}

@media (min-width: 992px) and (max-width: 1199.98px) {
	.single .entry-content > *:not(.alignwide, .alignfull) {
		margin-left: 0 !important;
		margin-right: 0 !important;
	}
}

@media (min-width: 1200px) and (max-width: 1659.98px) {
	.single .entry-content > *:not(.alignwide, .alignfull) {
		margin-left: 0 !important;
		margin-right: 0 !important;
	}
}

@media (max-width: 991.98px) {
	.cs-main-content,
	.cs-content-area,
	.entry-content,
	.cs-entry__content {
		width: 100% !important;
		max-width: 100% !important;
		box-sizing: border-box !important;
	}
}

.entry-content table th,
.cs-entry__content table th,
.wp-block-table th {
	background-color: #f1f5f9 !important;
	color: #0f172a !important;
	font-weight: 700 !important;
	padding: 12px 16px !important;
	border: 1px solid #e2e8f0 !important;
	text-align: right !important;
	white-space: nowrap;
}

.entry-content table td,
.cs-entry__content table td,
.wp-block-table td {
	padding: 10px 16px !important;
	border: 1px solid #e2e8f0 !important;
	color: #334155 !important;
	text-align: right !important;
	vertical-align: middle !important;
}

.entry-content table tr:nth-child(even),
.cs-entry__content table tr:nth-child(even),
.wp-block-table tr:nth-child(even) {
	background-color: #f8fafc !important;
}

.entry-content table tr:hover,
.cs-entry__content table tr:hover,
.wp-block-table tr:hover {
	background-color: #f1f5f980 !important;
}

.text-white,
.text-white *:not(input):not(textarea):not(select) {
	color: #ffffff !important;
}

#site-footer input,
#site-footer input[type="email"],
#site-footer input[type="text"],
.magnet-newsletter-form input {
	color: #0f172a !important;
	background-color: #ffffff !important;
}

#site-footer input::placeholder,
.magnet-newsletter-form input::placeholder {
	color: #64748b !important;
}

body.magnet-layout {
	margin: 0;
	background: #fff;
	overflow-x: hidden;
}

#site-footer {
	overflow-x: hidden;
}

/* Fix layout spacing and margin bounds for inner pages */
body:not(.home) .cs-site-content,
body.magnet-layout:not(.home) .cs-container,
body.magnet-layout:not(.home) .cs-site-content {
	max-width: 1240px !important;
	margin-left: auto !important;
	margin-right: auto !important;
	padding-left: 1.5rem !important;
	padding-right: 1.5rem !important;
	box-sizing: border-box !important;
}

/* Fix layout spacing and margin bounds for home page */
body.home .cs-site-content,
body.magnet-layout.home .cs-container,
body.magnet-layout.home .cs-site-content {
	max-width: 1240px !important;
	margin-left: auto !important;
	margin-right: auto !important;
	padding-left: 1.5rem !important;
	padding-right: 1.5rem !important;
	box-sizing: border-box !important;
}

/* Ensure landing buttons keep Next.js Tailwind styles instead of Swyft theme button styles */
body.home button {
	background-color: initial;
	color: initial;
}

body.home button.bg-blue-600 {
	background-color: #2563eb !important;
	color: #ffffff !important;
}

body.home button.bg-blue-600:hover {
	background-color: #1d4ed8 !important;
	color: #ffffff !important;
}

body.home button.hover\:bg-gray-100:hover {
	background-color: #f3f4f6 !important;
}

body.home button.hover\:bg-blue-700:hover {
	background-color: #1d4ed8 !important;
}

/* Fix badge text color inside light rounded containers */
body.home .bg-white .text-gray-500,
body.home .bg-gray-50 .text-gray-500,
body.home .bg-gray-50 p,
body.home span.rounded-full p,
body.home span.rounded-full span {
	color: #4b5563 !important;
}

/* Fix CTA footer text overlap & font sizing */
#site-footer h2.text-4xl,
#site-footer h2.md\:text-\[100px\] {
	line-height: 1.25 !important;
	margin-bottom: 1.5rem !important;
}

#site-footer p.text-2xl,
#site-footer p.md\:text-xl {
	line-height: 1.6 !important;
	margin-top: 0.5rem !important;
	margin-bottom: 2rem !important;
}

/* Bright text color for Home Hero 1 subtitle & metadata */
.cs-home-hero .cs-entry__subtitle,
.cs-hero-type-1 .cs-entry__subtitle,
.cs-hero-type-1 .cs-entry__title,
.cs-hero-type-1 .cs-entry__title a {
	color: #ffffff !important;
	text-shadow: 0 2px 10px rgba(0, 0, 0, 0.7) !important;
}

.cs-home-hero .cs-entry__subtitle {
	font-size: 1.125rem !important;
	line-height: 1.8 !important;
	font-weight: 400 !important;
	color: #f1f5f9 !important; /* Bright Slate 100 */
	opacity: 0.95 !important;
}

.cs-home-hero .cs-entry__meta,
.cs-home-hero .cs-entry__meta * {
	color: #e2e8f0 !important; /* Bright Slate 200 */
}

/* Blog & Category Titles Sizing Overrides */

/* Category / Archive / Page Header Titles */
.cs-page__header .cs-page__title,
h1.cs-page__title {
	font-size: 1.55rem !important; /* ~25px */
	line-height: 1.45 !important;
	font-weight: 700 !important;
}

@media (max-width: 767.98px) {
	.cs-page__header .cs-page__title,
	h1.cs-page__title {
		font-size: 1.2rem !important; /* ~19px */
		line-height: 1.4 !important;
	}
}

/* Single Post Page Header Titles */
.cs-entry__header .cs-entry__title,
.cs-entry__full-header .cs-entry__title,
.cs-entry__header-info .cs-entry__title {
	font-size: 1.55rem !important; /* ~25px */
	line-height: 1.45 !important;
	font-weight: 700 !important;
}

@media (max-width: 767.98px) {
	.cs-entry__header .cs-entry__title,
	.cs-entry__full-header .cs-entry__title,
	.cs-entry__header-info .cs-entry__title {
		font-size: 1.2rem !important; /* ~19px */
		line-height: 1.4 !important;
	}
}

/* Post Cards & Listing Entry Titles (Category & Home & Archive Grid/List) */
.cs-entry__title,
.cs-entry__title a {
	font-size: 1rem !important; /* 16px */
	line-height: 1.5 !important;
	font-weight: 600 !important;
}

@media (min-width: 992px) {
	.cs-entry__title,
	.cs-entry__title a {
		font-size: 1.0625rem !important; /* 17px */
	}
}

/* Table of Contents (TOC) Box - آنچه در این مقاله می‌خوانید */
.magnet-toc-box {
	background-color: #f8fafc !important;
	border: 1px solid #e2e8f0 !important;
	border-radius: 12px !important;
	padding: 20px 24px !important;
	margin: 2rem 0 !important;
	box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.02) !important;
	clear: both !important;
	max-width: 100% !important;
	width: 100% !important;
	box-sizing: border-box !important;
}

.magnet-toc-header {
	display: flex !important;
	align-items: center !important;
	justify-content: flex-start !important;
	gap: 10px !important;
	padding-bottom: 12px !important;
	border-bottom: 1px solid #e2e8f0 !important;
	margin-bottom: 16px !important;
}

.magnet-toc-icon {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	width: 32px !important;
	height: 32px !important;
	background-color: #eff6ff !important;
	color: #2563eb !important;
	border-radius: 8px !important;
	border: 1px solid #dbeafe !important;
}

.magnet-toc-title {
	font-family: 'IRANSansX', 'IRANSans', system-ui, sans-serif !important;
	font-size: 1.05rem !important;
	font-weight: 700 !important;
	color: #0f172a !important;
}

.magnet-toc-list,
.entry-content .magnet-toc-list,
.cs-entry__content .magnet-toc-list {
	list-style: disc !important;
	padding-right: 1.25rem !important;
	padding-left: 0 !important;
	margin: 0 !important;
}

.magnet-toc-list li,
.entry-content .magnet-toc-list li,
.cs-entry__content .magnet-toc-list li {
	margin-bottom: 0.6rem !important;
	font-size: 0.95rem !important;
	line-height: 1.7 !important;
	color: #475569 !important;
}

.magnet-toc-list li.toc-h3,
.entry-content .magnet-toc-list li.toc-h3,
.cs-entry__content .magnet-toc-list li.toc-h3 {
	margin-right: 1.25rem !important;
	font-size: 0.9rem !important;
}

.magnet-toc-list li:last-child {
	margin-bottom: 0 !important;
}

/* Force complete removal of underlines & borders from TOC links in all states */
.magnet-toc-list a,
.magnet-toc-list a:hover,
.magnet-toc-list a:focus,
.magnet-toc-list a:active,
.magnet-toc-list a:visited,
.entry-content .magnet-toc-list a,
.entry-content .magnet-toc-list a:hover,
.entry-content .magnet-toc-list a:focus,
.cs-entry__content .magnet-toc-list a,
.cs-entry__content .magnet-toc-list a:hover,
.cs-entry__content .magnet-toc-list a:focus {
	color: #475569 !important;
	text-decoration: none !important;
	-webkit-text-decoration: none !important;
	text-decoration-line: none !important;
	border: none !important;
	border-bottom: 0 !important;
	background: none !important;
	background-image: none !important;
	box-shadow: none !important;
	font-weight: 400 !important;
	transition: color 0.2s ease !important;
}

.magnet-toc-list a:hover,
.entry-content .magnet-toc-list a:hover,
.cs-entry__content .magnet-toc-list a:hover {
	color: #2563eb !important;
	border-bottom: none !important;
	background-image: none !important;
	text-decoration: none !important;
}

/* Smooth Scrolling & Heading Offset */
html {
	scroll-behavior: smooth;
}

.entry-content h1[id],
.entry-content h2[id],
.entry-content h3[id],
.entry-content h4[id],
.cs-entry__content h1[id],
.cs-entry__content h2[id],
.cs-entry__content h3[id],
.cs-entry__content h4[id] {
	scroll-margin-top: 100px !important;
}

/* Comment Section Compact & Modern Overrides */
.cs-entry__comments {
	margin-top: 3rem !important;
	padding-top: 2rem !important;
	border-top: 1px solid #e2e8f0 !important;
}

.comment-reply-title,
.cs-entry__comments .comment-reply-title {
	font-size: 1.35rem !important;
	font-weight: 700 !important;
	color: #0f172a !important;
	margin-bottom: 1.25rem !important;
}

.comment-form {
	display: flex !important;
	flex-direction: column !important;
	gap: 12px !important;
}

.comment-form p {
	margin-bottom: 0 !important;
}

.comment-form label {
	display: block !important;
	font-size: 0.875rem !important;
	font-weight: 600 !important;
	color: #334155 !important;
	margin-bottom: 6px !important;
}

/* Comment Form 100% Full Width Overrides */
.cs-entry__comments,
.cs-entry__comments-inner,
#respond,
.comment-respond,
.comment-form,
.comment-form > p,
.comment-form-comment,
.comment-form-author,
.comment-form-email,
.comment-form-row {
	width: 100% !important;
	max-width: 100% !important;
	box-sizing: border-box !important;
}

.comment-form input[type="text"],
.comment-form input[type="email"],
.comment-form textarea,
.comment-form input#author,
.comment-form input#email {
	width: 100% !important;
	max-width: 100% !important;
	min-width: 100% !important;
	box-sizing: border-box !important;
	padding: 12px 16px !important;
	border: 1px solid #cbd5e1 !important;
	border-radius: 8px !important;
	font-size: 0.95rem !important;
	background-color: #ffffff !important;
	transition: all 0.2s ease !important;
	box-shadow: none !important;
}

.comment-form input[type="text"]:focus,
.comment-form input[type="email"]:focus,
.comment-form textarea:focus {
	outline: none !important;
	border-color: #2563eb !important;
	background-color: #ffffff !important;
	box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1) !important;
}

.comment-form textarea {
	min-height: 100px !important;
	height: 110px !important;
	resize: vertical !important;
}

/* Arrange Author & Email fields side-by-side in Flex Row - 100% Width */
.comment-form-row {
	display: flex !important;
	flex-direction: row !important;
	gap: 16px !important;
	width: 100% !important;
	max-width: 100% !important;
	margin-bottom: 16px !important;
}

.comment-form-row p.comment-form-author,
.comment-form-row p.comment-form-email {
	flex: 1 1 50% !important;
	width: 50% !important;
	max-width: 50% !important;
	min-width: 0 !important;
	margin: 0 !important;
	display: block !important;
}

@media (max-width: 639.98px) {
	.comment-form-row {
		flex-direction: column !important;
		gap: 12px !important;
	}
	.comment-form-row p.comment-form-author,
	.comment-form-row p.comment-form-email {
		width: 100% !important;
		max-width: 100% !important;
	}
}

.comment-form-url,
.comment-form-cookies-consent {
	display: none !important;
}

.comment-form .form-submit {
	margin-top: 10px !important;
}

.comment-form .submit,
.comment-form button[type="submit"] {
	background-color: #2563eb !important;
	color: #ffffff !important;
	padding: 10px 28px !important;
	border-radius: 9999px !important;
	font-weight: 600 !important;
	font-size: 0.95rem !important;
	border: none !important;
	cursor: pointer !important;
	transition: background-color 0.2s ease !important;
}

.comment-form .submit:hover,
.comment-form button[type="submit"]:hover {
	background-color: #1d4ed8 !important;
}

/* Post Cards Category Badge Overlay on Top Right of Thumbnail */
.cs-posts-area .cs-entry__thumbnail,
.cs-read-next .cs-entry__thumbnail,
.cs-entry:not(.cs-hero-type-1__item) .cs-entry__thumbnail {
	position: relative !important;
}

.cs-entry__badge-category {
	position: absolute !important;
	top: 12px !important;
	right: 12px !important;
	z-index: 15 !important;
	pointer-events: auto !important;
}

.cs-entry__badge-category .cs-meta-category,
.cs-entry__badge-category ul,
.cs-entry__badge-category .post-categories {
	display: flex !important;
	flex-wrap: wrap !important;
	gap: 6px !important;
	margin: 0 !important;
	padding: 0 !important;
	list-style: none !important;
}

.cs-entry__badge-category a,
.cs-entry__badge-category .cs-meta-category a,
.cs-entry__badge-category .post-categories a {
	display: inline-block !important;
	background-color: #2563eb !important;
	color: #ffffff !important;
	font-size: 0.75rem !important; /* 12px */
	font-weight: 600 !important;
	padding: 4px 10px !important;
	border-radius: 6px !important;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3) !important;
	text-decoration: none !important;
	line-height: 1.3 !important;
	transition: all 0.2s ease !important;
}

/* Blog Top Categories Section (No-Scroll Grid Layout for Mobile & Desktop) */
.magnet-blog-top-categories {
	padding: 1rem 0 1.25rem 0 !important;
	background-color: transparent !important;
	margin-bottom: 1rem !important;
	width: 100% !important;
}

.magnet-blog-categories-wrapper {
	display: grid !important;
	grid-template-columns: repeat(3, 1fr) !important;
	gap: 10px !important;
	width: 100% !important;
	box-sizing: border-box !important;
	padding: 4px 0 !important;
	overflow: visible !important;
}

.magnet-cat-card {
	width: 100% !important;
	min-width: 0 !important;
	max-width: 100% !important;
	background: #ffffff !important;
	border: 1px solid #f1f5f9 !important;
	border-radius: 14px !important;
	padding: 12px 6px 10px 6px !important;
	display: flex !important;
	flex-direction: column !important;
	align-items: center !important;
	justify-content: center !important;
	text-align: center !important;
	text-decoration: none !important;
	box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.03) !important;
	transition: all 0.2s ease !important;
	box-sizing: border-box !important;
}

.magnet-cat-card:hover,
.magnet-cat-card:active {
	transform: translateY(-3px) !important;
	box-shadow: 0 8px 16px -4px rgba(37, 99, 235, 0.12) !important;
	border-color: #dbeafe !important;
	background: #f8fafc !important;
}

.magnet-cat-icon {
	width: 44px !important;
	height: 44px !important;
	border-radius: 50% !important;
	background-color: #eff6ff !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	margin-bottom: 8px !important;
	transition: transform 0.2s ease !important;
}

.magnet-cat-card:hover .magnet-cat-icon {
	transform: scale(1.06) !important;
	background-color: #dbeafe !important;
}

.magnet-cat-icon img {
	width: 24px !important;
	height: 24px !important;
	object-fit: contain !important;
}

.magnet-cat-icon-placeholder {
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
}

.magnet-cat-title {
	font-family: 'IRANSansX', 'IRANSans', system-ui, sans-serif !important;
	font-size: 0.775rem !important;
	font-weight: 600 !important;
	color: #1e293b !important;
	line-height: 1.3 !important;
	display: -webkit-box !important;
	-webkit-line-clamp: 2 !important;
	-webkit-box-orient: vertical !important;
	overflow: hidden !important;
	text-overflow: ellipsis !important;
	transition: color 0.2s ease !important;
}

.magnet-cat-card:hover .magnet-cat-title {
	color: #2563eb !important;
}

/* Desktop Grid View */
@media (min-width: 768px) {
	.magnet-blog-top-categories {
		padding: 1.5rem 0 2rem 0 !important;
		margin-bottom: 1.5rem !important;
	}

	.magnet-blog-categories-wrapper {
		grid-template-columns: repeat(6, 1fr) !important;
		gap: 16px !important;
		padding: 8px 0 16px 0 !important;
	}

	.magnet-cat-card {
		padding: 18px 12px 14px 12px !important;
		border-radius: 16px !important;
	}

	.magnet-cat-icon {
		width: 56px !important;
		height: 56px !important;
		margin-bottom: 10px !important;
	}

	.magnet-cat-icon img {
		width: 32px !important;
		height: 32px !important;
	}

	.magnet-cat-title {
		font-size: 0.925rem !important;
		-webkit-line-clamp: 1 !important;
	}
}

/* Mobile Swiper Slider Styling for Features & Testimonials */
@media (max-width: 768px) {
	.swiper {
		width: 100% !important;
		max-width: 100% !important;
		overflow: hidden !important;
		padding: 10px 0 24px 0 !important;
		touch-action: pan-y !important;
		margin: 0 auto !important;
	}

	.swiper-wrapper {
		display: flex !important;
		flex-direction: row !important;
		width: 100% !important;
		box-sizing: border-box !important;
	}

	.swiper-slide {
		flex-shrink: 0 !important;
		width: 100% !important;
		max-width: 100% !important;
		height: auto !important;
		box-sizing: border-box !important;
		display: flex !important;
		justify-content: center !important;
		align-items: center !important;
		padding: 0 16px !important;
	}

	.swiper-slide .swiper-goal-slide,
	.swiper-slide > div {
		width: 100% !important;
		max-width: 360px !important;
		margin: 0 auto !important;
		height: 100% !important;
		min-height: 270px !important;
		box-sizing: border-box !important;
	}
}



/* Header menu submenus (Appearance → Menus, one level deep) */
.site-header-inner nav li {
	position: relative;
}

.site-header-inner nav .sub-menu {
	display: none;
	position: absolute;
	top: 100%;
	right: 0;
	z-index: 60;
	min-width: 12rem;
	flex-direction: column;
	align-items: stretch;
	gap: 0;
	padding: 0.5rem 0;
	background: #ffffff;
	border: 1px solid #e2e8f0;
	border-radius: 0.75rem;
	box-shadow: 0 10px 25px -8px rgba(15, 23, 42, 0.18);
}

.site-header-inner nav li:hover > .sub-menu,
.site-header-inner nav li:focus-within > .sub-menu {
	display: flex;
}

.site-header-inner nav .sub-menu a {
	padding: 0.5rem 1rem;
	white-space: nowrap;
}

#magnet-mobile-menu .sub-menu {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	margin: 0.5rem 0 0;
	padding: 0 1rem 0 0;
	list-style: none;
}

/* ------------------------------------------------------------------
 * Header layout: desktop = logo | menu | search + login,
 * mobile = menu button (right) | centered logo | search + login icon (left).
 * ------------------------------------------------------------------ */
.magnet-header-toggle {
	display: none;
	align-items: center;
	justify-content: center;
	width: 2.5rem;
	height: 2.5rem;
	padding: 0;
	border: 0;
	background: transparent;
	color: #414651;
	cursor: pointer;
}

.magnet-header-nav {
	display: flex;
	flex: 1;
	justify-content: center;
}

.magnet-header-actions {
	display: flex;
	flex: none;
	align-items: center;
	gap: 0.5rem;
}

/* Outlined buttons matching the main site (magnetech.ir) header. */
.magnet-icon-btn,
.magnet-login-btn {
	display: inline-flex;
	flex-shrink: 0;
	align-items: center;
	justify-content: center;
	height: 2.5rem;
	border: 1px solid #d5d7da;
	border-radius: 9999px;
	background: #ffffff;
	color: #414651;
	line-height: 1;
	cursor: pointer;
	transition: background-color 0.15s;
}

.magnet-icon-btn {
	width: 2.5rem;
	padding: 0;
}

.magnet-login-btn {
	gap: 0.5rem;
	min-width: 100px;
	padding: 0 1.25rem;
	font-size: 16px;
	font-weight: 400;
	white-space: nowrap;
	text-decoration: none;
}

.magnet-icon-btn:hover,
.magnet-icon-btn[aria-expanded="true"],
.magnet-login-btn:hover {
	background: #f9fafb;
	color: #414651;
}

.magnet-login-btn__icon {
	display: inline-flex;
	width: 1.25rem;
	height: 1.25rem;
	flex-shrink: 0;
	align-items: center;
	justify-content: center;
	transform: rotate(180deg);
}

.magnet-login-btn__icon-mobile {
	display: none;
	width: 1.25rem;
	height: 1.25rem;
	flex-shrink: 0;
	align-items: center;
	justify-content: center;
}

.magnet-search-panel {
	border-top: 1px solid #e9eaeb;
	background: #ffffff;
	padding: 1rem;
}

.magnet-search-panel[hidden] {
	display: none;
}

.magnet-search-form {
	display: flex;
	gap: 0.5rem;
	width: min(100%, 40rem);
	margin-inline: auto;
}

.magnet-search-form input[type="search"] {
	flex: 1;
	min-width: 0;
	height: 2.75rem;
	padding: 0 1rem;
	border: 1px solid #d5d7da;
	border-radius: 9999px;
	background: #ffffff;
	color: #181d27;
	font-size: 15px;
}

.magnet-search-form input[type="search"]:focus {
	outline: none;
	border-color: #2563eb;
	box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15);
}

.magnet-search-form button {
	flex: none;
	height: 2.75rem;
	padding: 0 1.25rem;
	border: 0;
	border-radius: 9999px;
	background: #2563eb;
	color: #ffffff;
	font-size: 15px;
	font-weight: 600;
	cursor: pointer;
}

.magnet-search-form button:hover {
	background: #1d4ed8;
}

@media (max-width: 899.98px) {
	.magnet-icon-btn,
	.magnet-login-btn {
		height: 2.25rem;
	}

	.magnet-icon-btn {
		width: 2.25rem;
	}

	.magnet-login-btn {
		padding: 0 0.875rem;
		font-size: 14px;
	}
}

@media (min-width: 1024px) {
	#magnet-mobile-menu {
		display: none !important;
	}
}

@media (max-width: 1023.98px) {
	.magnet-header .site-header-inner {
		display: grid;
		grid-template-columns: 1fr auto 1fr;
		gap: 0.5rem;
		min-height: 4rem;
	}

	.magnet-header-toggle {
		display: inline-flex;
		justify-self: start;
	}

	.magnet-header .site-logo {
		justify-self: center;
	}

	.magnet-header .site-logo img {
		width: 7rem;
	}

	.magnet-header-nav {
		display: none;
	}

	.magnet-header-actions {
		justify-self: end;
	}
}

@media (max-width: 639.98px) {
	/* Login collapses to an icon button on phones. */
	.magnet-login-btn {
		width: 2.25rem;
		min-width: 0;
		padding: 0;
	}

	.magnet-login-btn__label,
	.magnet-login-btn__icon {
		display: none;
	}

	.magnet-login-btn__icon-mobile {
		display: inline-flex;
	}
}

/* Keep the theme's generic button:hover/focus fill off the header buttons. */
.magnet-header .magnet-header-toggle:hover,
.magnet-header .magnet-header-toggle:focus,
.magnet-header .magnet-header-toggle:active,
.magnet-header .magnet-header-toggle[aria-expanded="true"] {
	background: transparent;
	color: #2563eb;
	box-shadow: none;
}

.magnet-header .magnet-icon-btn:focus,
.magnet-header .magnet-icon-btn:active {
	background: #f9fafb;
	color: #414651;
	box-shadow: none;
}

.magnet-header .magnet-header-toggle:focus-visible,
.magnet-header .magnet-icon-btn:focus-visible,
.magnet-header .magnet-login-btn:focus-visible {
	outline: 2px solid #2563eb;
	outline-offset: 2px;
}

/* ------------------------------------------------------------------
 * Footer — mirrors the magnetech.ir main-site footer.
 * ------------------------------------------------------------------ */
#site-footer.magnet-footer {
	background: #030612;
	color: #ffffff;
	padding-top: 2.5rem;
}

.magnet-footer__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 2.5rem;
	width: 100%;
	max-width: 90rem;
	margin-inline: auto;
	padding: 2rem 1.5rem;
	box-sizing: border-box;
}

.magnet-footer__brand {
	display: flex;
	flex-direction: column;
	gap: 1rem;
}

.magnet-footer__logo img {
	display: block;
	width: 180px;
	height: auto;
}

#site-footer .magnet-footer__tagline {
	margin: 0;
	color: #9ca3af;
	font-size: 1.125rem;
}

.magnet-footer__socials {
	display: flex;
	align-items: center;
	gap: 1.25rem;
	margin-top: 0.5rem;
	color: #d5d7da;
}

#site-footer .magnet-footer__social {
	display: inline-flex;
	color: #d5d7da;
	transition: color 0.2s;
}

#site-footer .magnet-footer__social:hover {
	color: #60a5fa;
}

#site-footer .magnet-footer__social--instagram:hover {
	color: #ec4899;
}

.magnet-footer__social svg,
.magnet-footer__social img {
	width: 24px;
	height: 24px;
}

.magnet-footer__bale-color,
.magnet-footer__social--bale:hover .magnet-footer__bale-gray {
	display: none;
}

.magnet-footer__social--bale:hover .magnet-footer__bale-color {
	display: block;
}

#site-footer .magnet-footer__heading {
	margin: 0 0 0.75rem;
	color: #9ca3af;
	font-size: 1rem;
	font-weight: 600;
}

#site-footer .magnet-footer__menu {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: 0.875rem;
}

#site-footer .magnet-footer__menu li {
	margin: 0;
	padding: 0;
}

#site-footer .magnet-footer__menu li::before {
	content: none;
}

#site-footer .magnet-footer__menu a {
	color: #ffffff;
	text-decoration: none;
}

#site-footer .magnet-footer__menu a:hover {
	color: #60a5fa;
}

#site-footer .magnet-footer__newsletter-title {
	margin: 0 0 0.75rem;
	color: #ffffff;
	font-size: 0.875rem;
	font-weight: 400;
}

.magnet-footer__form {
	display: flex;
	align-items: center;
	gap: 0.75rem;
}

#site-footer .magnet-footer__form input[type="email"] {
	flex: 1 1 auto;
	min-width: 0;
	padding: 0.625rem 1.25rem;
	border: 1px solid #374151;
	border-radius: 0.375rem;
	background: #ffffff;
	color: #000000;
	font-size: 0.875rem;
}

#site-footer .magnet-footer__form input[type="email"]::placeholder {
	color: #9ca3af;
}

#site-footer .magnet-footer__form input[type="email"]:focus {
	outline: none;
	box-shadow: 0 0 0 2px #3b82f6;
}

#site-footer .magnet-footer__form button {
	flex-shrink: 0;
	padding: 0.625rem 1.5rem;
	border: 0;
	border-radius: 9999px;
	background: #2563eb;
	color: #ffffff;
	font-size: 0.875rem;
	font-weight: 600;
	cursor: pointer;
	transition: background-color 0.15s;
}

#site-footer .magnet-footer__form button:hover {
	background: #1d4ed8;
}

.magnet-footer__badges {
	display: flex;
	align-items: flex-end;
	justify-content: flex-end;
	gap: 0.75rem;
}

.magnet-footer__producthunt img {
	display: block;
	width: auto;
	height: 39px;
	border-radius: 0.5rem;
	transition: opacity 0.15s;
}

.magnet-footer__producthunt:hover img {
	opacity: 0.9;
}

.magnet-footer__enamad img {
	display: block;
	width: auto;
	height: 77px;
	cursor: pointer;
}

.magnet-footer__divider {
	border-top: 1px solid rgba(255, 255, 255, 0.14);
}

.magnet-footer__bottom {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
}

.magnet-footer__copyright {
	color: #e5e7eb;
	font-size: 0.75rem;
}

.magnet-footer__legal {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	color: #9ca3af;
	font-size: 0.75rem;
}

#site-footer .magnet-footer__legal a {
	color: #9ca3af;
	text-decoration: none;
}

#site-footer .magnet-footer__legal a:hover {
	color: #3b82f6;
}

@media (min-width: 768px) {
	.magnet-footer__grid {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}

	#site-footer .magnet-footer__tagline {
		font-size: 0.875rem;
	}

	.magnet-footer__socials {
		margin-top: 1.5rem;
	}

	.magnet-footer__links {
		grid-column: span 2;
		justify-self: center;
	}

	.magnet-footer__badges,
	.magnet-footer__divider,
	.magnet-footer__bottom {
		grid-column: 1 / -1;
	}
}