/*
 * ExamNeed single post and page design.
 * Loaded on posts and pages. Markup: template-parts/content-single.php.
 *
 * Goals: clean spacing, a key-facts strip, readable text, and tables that
 * always fit inside the white content box (no sideways page scroll).
 */

/* ==========================================================
   1. Article box and spacing
   ========================================================== */
.single-article,
.single-page {
	min-width: 0;
	padding: 24px 26px;
	border: 1px solid var(--c-border);
	border-radius: 14px;
	box-shadow: none;
}

.single-article > * + * {
	margin-top: 18px;
}

.single-article > .entry-header,
.single-article > .entry-thumbnail,
.single-article > .join-box,
.single-article > .entry-content {
	margin-bottom: 0;
}

/* ==========================================================
   2. Header: category chips, title, facts
   ========================================================== */
.entry-header .entry-cats {
	margin-bottom: 8px;
}

.entry-cat {
	margin: 0;
	padding: 3px 10px;
	border-radius: 999px;
	font-size: 11.5px;
	letter-spacing: 0.03em;
}

.entry-cat:hover {
	background: var(--c-primary);
	color: #fff;
	text-decoration: none;
}

.entry-title {
	margin: 0 0 10px;
	font-size: clamp(22px, 3.2vw, 30px);
	font-weight: 800;
	line-height: 1.3;
	letter-spacing: -0.01em;
	overflow-wrap: anywhere;
}

.entry-header .entry-meta {
	margin: 0 0 12px;
}

.fact-strip {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
	gap: 10px;
	margin-top: 14px;
}

.fact {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
	padding: 10px 14px;
	border: 1px solid var(--c-border);
	border-left-width: 4px;
	border-radius: 10px;
	background: rgba(127, 127, 127, 0.06);
	color: var(--c-text);
}

.fact-label {
	color: var(--c-muted);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.03em;
	text-transform: uppercase;
}

.fact-value {
	font-size: 16px;
	font-weight: 800;
	line-height: 1.3;
}

.fact.is-open {
	border-left-color: var(--c-open);
}

.fact.is-open .fact-value {
	color: var(--c-open);
}

.fact.is-soon {
	border-left-color: var(--c-accent);
}

.fact.is-soon .fact-value {
	color: var(--c-accent);
}

.fact.is-urgent,
.fact.is-expired {
	border-left-color: var(--c-closed);
}

.fact.is-urgent .fact-value,
.fact.is-expired .fact-value {
	color: var(--c-closed);
}

/* ==========================================================
   3. Featured image and join banner
   ========================================================== */
.single-article .entry-thumbnail {
	margin: 18px 0 0;
}

.single-article .entry-thumbnail img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 12px;
}

.single-article .join-box {
	margin: 18px 0 0;
	padding: 12px 16px;
	border: 0;
	border-radius: 12px;
	background: linear-gradient(135deg, var(--c-primary-dark), var(--c-primary));
	color: #fff;
}

.single-article .join-box-text {
	flex: 1 1 200px;
	margin: 0;
	color: #fff;
}

/* ==========================================================
   4. Article text
   ========================================================== */
.single-article .entry-content,
.single-page .entry-content {
	margin-top: 20px;
	font-size: 17px;
	line-height: 1.75;
	hyphens: manual;
}

.entry-content > :first-child {
	margin-top: 0;
}

.entry-content > :last-child {
	margin-bottom: 0;
}

.entry-content p {
	margin: 0 0 1em;
}

.entry-content h2,
.entry-content h3,
.entry-content h4 {
	margin: 1.6em 0 0.6em;
	line-height: 1.35;
	color: var(--c-text);
	overflow-wrap: anywhere;
}

.entry-content h2 {
	padding: 8px 12px;
	border-left: 4px solid var(--c-accent);
	border-radius: 0 8px 8px 0;
	background: rgba(11, 87, 208, 0.07);
	font-size: 20px;
	color: var(--c-primary);
}

.entry-content h3 {
	font-size: 18px;
	color: var(--c-primary);
}

.entry-content ul,
.entry-content ol {
	margin: 0 0 1.1em;
	padding-left: 1.4em;
}

.entry-content li {
	margin-bottom: 0.4em;
}

.entry-content li > ul,
.entry-content li > ol {
	margin-top: 0.4em;
	margin-bottom: 0;
}

.entry-content a {
	text-decoration: underline;
	text-underline-offset: 2px;
	overflow-wrap: anywhere;
}

.entry-content img,
.entry-content figure,
.entry-content video {
	max-width: 100%;
	height: auto;
}

.entry-content blockquote {
	margin: 1.2em 0;
	padding: 10px 16px;
	border-left: 4px solid var(--c-primary);
	background: rgba(127, 127, 127, 0.07);
	border-radius: 0 8px 8px 0;
}

/* ==========================================================
   5. Tables that fit the box
   ========================================================== */
/* The wrapper (added in functions.php) is the only thing that scrolls. */
.entry-content .table-scroll {
	max-width: 100%;
	margin: 0 0 1.3em;
	overflow-x: auto;
	border: 1px solid var(--c-table-line, #c5cfdb);
	border-radius: 0;
	-webkit-overflow-scrolling: touch;
}

.entry-content .wp-block-table {
	margin: 0 0 1.3em;
}

.entry-content .wp-block-table .table-scroll {
	margin: 0;
}

.entry-content table {
	display: table;
	width: 100% !important;
	max-width: 100%;
	margin: 0;
	border: 0;
	border-collapse: collapse;
	background: transparent;
	font-size: 15px;
	line-height: 1.5;
	table-layout: auto;
}

/* Tables pasted without the wrapper (e.g. in page templates): still fit */
.entry-content > table {
	display: block;
	overflow-x: auto;
	margin-bottom: 1.3em;
}

/* Ignore fixed widths and column sizes pasted from Word or Excel */
.entry-content colgroup,
.entry-content col {
	width: auto !important;
}

.entry-content table th,
.entry-content table td {
	width: auto !important;
	min-width: 0;
	height: auto !important;
	padding: 11px 14px;
	border: 1px solid var(--c-table-line, #c5cfdb);
	vertical-align: top;
	text-align: left;
	overflow-wrap: anywhere;
	word-break: normal;
}

/* Headings and label columns keep whole words; long links in other cells wrap */
.entry-content table th,
.entry-content table td:first-child:not(:last-child) {
	overflow-wrap: normal;
	min-width: 5.5em;
}

/* Header row: clear blue band with a strong bottom line */
.entry-content table th,
.entry-content table thead td {
	border-bottom: 2px solid var(--c-primary);
	background: rgba(11, 87, 208, 0.12);
	color: var(--c-primary);
	font-weight: 700;
}

/* Zebra rows make long tables easy to follow */
.entry-content table tbody tr:nth-child(even) > td {
	background: rgba(11, 87, 208, 0.045);
}

.entry-content table tbody tr:hover > td {
	background: rgba(11, 87, 208, 0.09);
}

/* First column of a two-column "label | value" table reads as a label */
.entry-content table:not(:has(th)) td:first-child:not(:last-child) {
	font-weight: 600;
}

.entry-content table p {
	margin: 0;
}

.entry-content table ul,
.entry-content table ol {
	margin: 0;
	padding-left: 1.2em;
}

/* Many columns: keep readable, let the box scroll sideways */
.entry-content .table-scroll-wide table {
	min-width: 560px;
}

/* ==========================================================
   6. Notice, share, tags
   ========================================================== */
.single-article .candidate-notice {
	margin: 22px 0 0;
	border-radius: 0 10px 10px 0;
	font-size: 14.5px;
}

.single-article .entry-footer {
	margin-top: 20px;
	padding-top: 16px;
}

.single-article .share-buttons {
	margin-bottom: 12px;
}

.single-article .share-btn {
	padding: 6px 14px;
}

.entry-tags a {
	padding: 3px 10px;
	border-radius: 999px;
	background: rgba(127, 127, 127, 0.1);
	color: var(--c-muted);
	font-size: 13px;
}

.entry-tags a:hover {
	background: var(--c-primary);
	color: #fff;
	text-decoration: none;
}

/* ==========================================================
   7. Navigation and related posts
   ========================================================== */
.post-navigation a,
.related-posts {
	border: 1px solid var(--c-border);
	border-radius: 12px;
	box-shadow: none;
}

.post-navigation .nav-title {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	font-weight: 600;
}

.related-posts .section-title {
	margin: 0 0 6px;
	font-size: 18px;
}

/* ==========================================================
   8. Phones
   ========================================================== */
@media (max-width: 800px) {
	.single-article,
	.single-page {
		padding: 18px 16px;
	}
}

@media (max-width: 600px) {
	.single-article,
	.single-page {
		padding: 16px 14px;
		border-radius: 12px;
	}

	/* Key facts: one compact line of three small tiles */
	.fact-strip {
		grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
		grid-auto-flow: column;
		gap: 6px;
		margin-top: 10px;
	}

	.fact {
		padding: 6px 7px;
		gap: 1px;
		border-radius: 8px;
		border-left-width: 3px;
	}

	.fact-label {
		font-size: 9.5px;
		letter-spacing: 0.02em;
	}

	/* Join banner: text on top, two buttons side by side */
	.single-article .join-box {
		flex-direction: row;
		flex-wrap: wrap;
		align-items: center;
		text-align: left;
	}

	.single-article .join-box-text {
		flex: 1 1 100%;
	}

	.single-article .join-box .join-btn {
		flex: 1 1 0;
		width: auto;
		text-align: center;
	}

	.single-article .share-btn {
		flex: 1 1 calc(50% - 6px);
		text-align: center;
	}

	.single-article .share-label {
		flex: 1 1 100%;
	}

	.fact-value {
		font-size: 12px;
		line-height: 1.25;
	}

	.single-article .entry-content {
		font-size: 16px;
		line-height: 1.7;
	}

	.entry-content h2 {
		font-size: 18px;
	}

	.entry-content table {
		font-size: 14px;
	}

	.entry-content table th,
	.entry-content table td {
		padding: 9px 10px;
	}

	.entry-content .table-scroll-wide table {
		min-width: 520px;
	}

	/* Let wide tables use the full width of the screen edge to edge */
	.entry-content .table-scroll {
		border-radius: 0;
	}
}

/* ==========================================================
   9. Ads and embeds: boxed, always inside the article
   ========================================================== */
.embed-box {
	clear: both;
	box-sizing: border-box;
	width: 100%;
	max-width: 100%;
	margin: 22px 0;
	overflow: hidden;
	border-radius: 12px;
}

.embed-box.is-ad {
	padding: 10px 10px 12px;
	border: 1px solid var(--c-border);
	background: rgba(127, 127, 127, 0.06);
}

.embed-box.is-ad::before {
	content: "Advertisement";
	display: block;
	margin-bottom: 8px;
	color: var(--c-muted);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-align: center;
	text-transform: uppercase;
}

/* Whatever width, margin or position the code was pasted with */
.entry-content iframe,
.entry-content ins.adsbygoogle,
.entry-content embed,
.entry-content object {
	position: static !important;
	display: block;
	box-sizing: border-box;
	width: 100% !important;
	max-width: 100% !important;
	margin: 0 !important;
	border: 0;
	transform: none !important;
}

.embed-box.is-ad iframe {
	border-radius: 8px;
	background: var(--c-card);
}

.entry-content ins.adsbygoogle {
	min-height: 100px;
	overflow: hidden;
}

/* Pasted ad blocks, banners and images with a fixed width or offset */
.entry-content > div[style*="width"],
.entry-content > div[style*="margin-left"],
.entry-content > figure,
.entry-content > p > a > img,
.entry-content > a > img {
	max-width: 100% !important;
	box-sizing: border-box;
}

.entry-content > div[style*="width"],
.entry-content > div[style*="margin-left"] {
	width: auto !important;
	margin-right: 0 !important;
	margin-left: 0 !important;
	overflow: hidden;
}

.entry-content img {
	display: inline-block;
	max-width: 100% !important;
	height: auto !important;
}

/* Nothing in the article may push the page sideways */
.single-article,
.single-page {
	overflow: hidden;
}

@media (max-width: 600px) {
	.embed-box {
		margin: 18px 0;
	}

	.embed-box.is-ad {
		padding: 8px 8px 10px;
	}
}

/* ==========================================================
   10. Phones: article runs edge to edge (no side gaps)
   ========================================================== */
@media (max-width: 600px) {
	body.single .container.content-area,
	body.page:not(.home) .container.content-area {
		padding-right: 0;
		padding-left: 0;
	}

	body.single .single-article,
	body.page:not(.home) .single-page {
		padding: 16px 12px;
		border-right: 0;
		border-left: 0;
		border-radius: 0;
	}

	/* Other boxes under the article keep a small margin */
	body.single .primary-column > *:not(.single-article):not(.single-page),
	body.page:not(.home) .primary-column > *:not(.single-article):not(.single-page),
	body.single .sidebar,
	body.page:not(.home) .sidebar {
		margin-right: 10px;
		margin-left: 10px;
	}
}

/* ==========================================================
   11. Phones: ads inside posts are open and full width (no box)
   ========================================================== */
@media (max-width: 600px) {
	.single-article .embed-box.is-ad,
	.single-article .ad-slot {
		margin-right: -12px;
		margin-left: -12px;
		padding: 0;
		border: 0;
		border-radius: 0;
		background: transparent;
	}

	/* Keep only a tiny label above the ad */
	.single-article .embed-box.is-ad::before,
	.single-article .ad-slot.has-label::before {
		margin-bottom: 4px;
		font-size: 10px;
		letter-spacing: 0.1em;
		opacity: 0.8;
	}

	.single-article .embed-box.is-ad iframe {
		border-radius: 0;
		background: transparent;
	}

	.single-article .ad-slot ins.adsbygoogle {
		width: 100%;
	}
}