/*
 * MyAnas Job Circular — single article styles.
 * Intentionally minimal: this page inherits the theme's own header,
 * footer, and typography. These rules only style the job-specific
 * info box, badges and apply button so they feel native to the theme
 * rather than importing the full landing-page look.
 */

.mjc-single-container {
	padding-bottom: 60px;
}

.mjc-single-header { margin-bottom: 22px; }
.mjc-single-logo {
	float: right;
	width: 56px;
	height: 56px;
	border-radius: 14px;
	overflow: hidden;
	margin-left: 14px;
}
.mjc-single-logo img { width: 100%; height: 100%; object-fit: cover; }

.mjc-single-title {
	margin: 12px 0 6px;
	font-size: clamp(24px, 3.4vw, 32px);
	line-height: 1.25;
	font-weight: 800;
}
.mjc-single-role {
	margin: 0 0 4px;
	font-size: 15px;
	font-weight: 600;
	color: var(--mjc-purple, #7657f4);
}
.mjc-single-sub {
	margin: 0;
	font-size: 14px;
	color: var(--mjc-muted, #727987);
}
.mjc-single-sub a { color: inherit; text-decoration: underline; }

.mjc-expired-notice {
	margin: 14px 0 0;
	padding: 10px 14px;
	border-radius: 10px;
	background: #fff0f1;
	color: #d9414d;
	font-size: 13px;
	font-weight: 600;
}

.mjc-single-info-grid {
	margin: 22px 0;
	border-radius: 14px;
	overflow: hidden;
	border: 1px solid var(--mjc-stroke, #e2e5eb);
}

.mjc-single-content {
	margin: 26px 0;
	font-size: 16px;
	line-height: 1.75;
}
.mjc-single-content h2,
.mjc-single-content h3 { margin-top: 1.6em; }

/*
 * .mjc-single-columns / .mjc-single-content-col /
 * .mjc-single-sidebar-col are now defined in frontend.css, grouped
 * together with the listing pages' .mjc-listing-* equivalents — both
 * cloned from the theme's own real single.html / page.html / archive.html
 * column blocks (see the comment in frontend.css), so every MJC page
 * (single article, category archive, location archive) shares one
 * identical content/sidebar layout that matches the rest of the site.
 */

.mjc-detail-block {
	margin: 26px 0;
	padding: 20px 22px;
	border-radius: 16px;
	background: #f8f9fb;
	border: 1px solid var(--mjc-stroke, #e2e5eb);
}
.mjc-detail-block__title {
	margin: 0 0 10px;
	font-size: 17px;
	font-weight: 800;
}
.mjc-detail-block__text {
	font-size: 15px;
	line-height: 1.75;
	color: var(--mjc-text, #171a21);
}
.mjc-detail-block__text p:last-child { margin-bottom: 0; }

.mjc-dates-list {
	margin: 0;
	padding: 0;
	list-style: none;
}
.mjc-dates-list li {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 10px 0;
	border-bottom: 1px dashed var(--mjc-stroke, #e2e5eb);
	font-size: 14px;
}
.mjc-dates-list li:last-child { border-bottom: none; }
.mjc-dates-label { color: var(--mjc-muted, #727987); }
.mjc-dates-value { font-weight: 700; }

.mjc-apply-box {
	margin-top: 30px;
	padding: clamp(16px, 4vw, 22px);
	border-radius: 16px;
	background: #f8f9fb;
	border: 1px solid var(--mjc-stroke, #e2e5eb);
	text-align: center;
}
/*
 * Fluid across every breakpoint instead of one fixed pixel size, so the
 * button keeps the same look and proportions (never clipped, never
 * oversized) from small phones up to desktop — padding, font size and
 * corner radius all scale together with clamp() rather than jumping at
 * fixed media-query breakpoints.
 */
.mjc-apply-btn {
	display: inline-block;
	width: 100%;
	max-width: 360px;
	box-sizing: border-box;
	padding: clamp(12px, 3.2vw, 16px) clamp(20px, 6vw, 38px);
	border-radius: 999px;
	background: var(--mjc-purple, #7657f4);
	color: #fff !important;
	font-weight: 700;
	font-size: clamp(14px, 3.6vw, 16px);
	line-height: 1.3;
	text-decoration: none;
	text-align: center;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	transition: transform .15s ease, box-shadow .15s ease, opacity .15s ease;
}
.mjc-apply-btn:hover,
.mjc-apply-btn:focus-visible {
	transform: translateY(-1px);
	box-shadow: 0 6px 16px rgba(118, 87, 244, .28);
	opacity: .96;
}
.mjc-links-row {
	margin-top: 16px;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 10px 18px;
	padding-top: 14px;
	border-top: 1px solid var(--mjc-stroke, #e2e5eb);
}
.mjc-links-row a {
	font-size: 13px;
	font-weight: 600;
	color: var(--mjc-teal, #238f8f);
	text-decoration: underline;
}

/*
 * This file had no html[data-theme="dark"] rules at all, so the two
 * boxes below stayed hardcoded light regardless of the site's toggle.
 * Values mirror the equivalent light-mode treatment already
 * established in frontend.css's dark-mode block.
 */
html[data-theme="dark"] .mjc-expired-notice {
	background: rgba(255, 91, 102, .16);
	color: #ff9098;
}
html[data-theme="dark"] .mjc-apply-box {
	background: var(--mjc-card, #21232fa6);
}
html[data-theme="dark"] .mjc-detail-block {
	background: var(--mjc-card, #21232fa6);
}
html[data-theme="dark"] .mjc-detail-block__text {
	color: var(--mjc-text);
}
html[data-theme="dark"] .mjc-dates-label {
	color: var(--mjc-muted);
}