/*
 * ExamNeed responsive refinements.
 *
 * Loaded after style.css (which has the basic mobile layout) and before
 * np-dark.css. This file adds the finer details: more breakpoints,
 * bigger touch targets, a full-width search on phones, fluid headings,
 * safe handling of embeds, ads, code blocks and aligned images, and
 * tweaks for very small and very large screens.
 *
 * Breakpoints used:
 *   1400px and up  large desktops
 *   1024px and down  tablets and small laptops
 *   800px and down   large phones and portrait tablets
 *   600px and down   phones
 *   400px and down   small phones
 */

/* ==========================================================
   1. Always-on safeguards (all screen sizes)
   ========================================================== */
.entry-title,
.post-card-title,
.page-title {
	overflow-wrap: anywhere;
}

.entry-content {
	hyphens: auto;
}

.entry-content pre,
.entry-content code {
	max-width: 100%;
	overflow-x: auto;
}

.entry-content pre {
	padding: 12px 14px;
	border-radius: var(--radius);
	background: rgba(127, 127, 127, 0.12);
	font-size: 14px;
}

/* Responsive embeds (YouTube, maps, forms) */
.entry-content iframe,
.entry-content video,
.entry-content embed,
.entry-content object {
	max-width: 100%;
}

.wp-block-embed__wrapper,
.entry-content .video-wrap {
	position: relative;
	max-width: 100%;
}

.entry-content iframe[src*="youtube"],
.entry-content iframe[src*="youtu.be"] {
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 9;
}

/* Ad units must never push the page wider than the screen */
ins.adsbygoogle,
.adsbygoogle {
	display: block;
	max-width: 100%;
	overflow: hidden;
}

/* WordPress image alignment classes */
.alignleft {
	float: left;
	margin: 4px 16px 8px 0;
}

.alignright {
	float: right;
	margin: 4px 0 8px 16px;
}

.aligncenter {
	display: block;
	margin-right: auto;
	margin-left: auto;
}

.wp-caption {
	max-width: 100%;
}

.wp-caption-text {
	font-size: 13px;
	color: var(--c-muted);
}

/* Keep the page from jumping when the back-to-top button is added
   on phones with a home bar (notch devices) */
.back-to-top {
	right: calc(16px + env(safe-area-inset-right, 0px));
	bottom: calc(16px + env(safe-area-inset-bottom, 0px));
}

/* ==========================================================
   2. Large desktops
   ========================================================== */
@media (min-width: 1400px) {
	:root {
		--container: 1280px;
	}

	.content-area {
		grid-template-columns: minmax(0, 1fr) 320px;
		gap: 28px;
	}

	.content-area.has-left-sidebar {
		grid-template-columns: 260px minmax(0, 1fr) 320px;
	}
}

/* ==========================================================
   3. Tablets and small laptops
   ========================================================== */
@media (max-width: 1024px) {
	.header-search {
		flex-basis: 240px;
	}

	.main-navigation .menu a {
		padding: 11px 13px;
		font-size: 14.5px;
	}

	.footer-widgets-inner {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.post-card-thumb {
		flex-basis: 130px;
	}

	.page-title {
		font-size: clamp(22px, 3vw, 26px);
	}
}

/* ==========================================================
   4. Large phones and portrait tablets
   ========================================================== */
@media (max-width: 800px) {
	/* Show the search box on phones, as a full-width row under the logo */
	.header-main-inner {
		flex-wrap: wrap;
		gap: 10px 12px;
	}

	.header-search {
		display: block;
		flex: 1 1 100%;
		order: 3;
	}

	.header-search .search-form {
		width: 100%;
	}

	/* Bigger touch targets (about 44px, the usual minimum) */
	.menu-toggle {
		min-width: 44px;
		min-height: 44px;
	}

	.main-navigation .menu a {
		padding: 14px 16px;
	}

	.join-btn,
	.read-more,
	.share-btn,
	.search-submit,
	.search-form input[type="submit"] {
		min-height: 40px;
		display: inline-flex;
		align-items: center;
		justify-content: center;
	}

	.search-field,
	.search-form input[type="search"] {
		min-height: 44px;
		font-size: 16px; /* 16px stops iPhones zooming in on focus */
	}

	.pagination .page-numbers {
		min-width: 44px;
		min-height: 44px;
		display: inline-flex;
		align-items: center;
		justify-content: center;
	}

	.widget li a,
	.footer-links a,
	.footer-menu a {
		display: inline-block;
		padding: 4px 0;
	}

	/* Sidebars move below the content; show widgets side by side on tablets */
	.sidebar {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 0 16px;
		align-items: start;
	}

	.sidebar .widget {
		margin-bottom: 16px;
	}

	.news-ticker {
		font-size: 13px;
	}

	.related-posts,
	.comments-area {
		padding: 14px 16px;
	}
}

/* ==========================================================
   5. Phones
   ========================================================== */
@media (max-width: 600px) {
	.container {
		padding-right: 14px;
		padding-left: 14px;
	}

	.content-area {
		gap: 18px;
		padding-top: 16px;
		padding-bottom: 24px;
	}

	/* One column everywhere */
	.sidebar {
		display: block;
	}

	.footer-widgets-inner {
		grid-template-columns: minmax(0, 1fr);
		gap: 20px;
	}

	/* Fluid headings */
	.entry-title {
		font-size: clamp(20px, 5.6vw, 24px);
	}

	.page-title {
		font-size: clamp(19px, 5.2vw, 22px);
	}

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

	.entry-content h3 {
		font-size: 17px;
	}

	.post-card-title {
		font-size: 17px;
	}

	.page-header {
		padding: 14px 16px;
	}

	/* Join and share buttons fill the row */
	.join-box,
	.footer-join-inner {
		flex-direction: column;
		align-items: stretch;
		text-align: center;
	}

	.join-box .join-btn,
	.footer-join-inner .join-btn {
		width: 100%;
	}

	.share-buttons {
		gap: 6px;
	}

	.share-btn {
		flex: 1 1 calc(50% - 6px);
	}

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

	/* Last-date box fills the width */
	.quick-facts {
		display: flex;
		width: 100%;
	}

	.entry-meta,
	.post-card-meta {
		flex-direction: column;
		gap: 2px;
	}

	/* Lists: put the date under the title instead of squeezing beside it */
	.related-list li,
	.closing-list li,
	.latest-list li {
		flex-direction: column;
		align-items: flex-start;
		gap: 2px;
	}

	/* Floated images stack and centre */
	.alignleft,
	.alignright {
		float: none;
		display: block;
		margin: 0 auto 12px;
	}

	/* Tables inside articles: a little smaller, still scrollable */
	.entry-content table {
		font-size: 14px;
	}

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

	/* Shorter pagination: hide the middle page numbers */
	.pagination .page-numbers:not(.current):not(.prev):not(.next):not(.dots) {
		display: none;
	}

	.pagination .page-numbers.current + .page-numbers:not(.next),
	.pagination .page-numbers:not(.current):has(+ .page-numbers.current) {
		display: inline-flex;
	}

	/* Footer: stack the bottom bar */
	.footer-bottom-inner {
		flex-direction: column;
		align-items: flex-start;
	}

	.footer-menu {
		gap: 4px 14px;
	}

	.back-to-top {
		width: 46px;
		height: 46px;
	}

	.error-code {
		font-size: 56px;
	}

	.no-results,
	.error-404 {
		padding: 18px;
	}
}

/* ==========================================================
   6. Small phones
   ========================================================== */
@media (max-width: 400px) {
	.container {
		padding-right: 12px;
		padding-left: 12px;
	}

	.topbar {
		font-size: 13px;
	}

	.topbar-join .join-btn {
		padding: 5px 11px;
		font-size: 13px;
	}

	.site-title {
		font-size: 20px;
	}

	.site-tagline {
		display: none;
	}

	.ticker-label {
		display: none;
	}

	.share-btn {
		flex-basis: 100%;
	}

	.single-article,
	.single-page {
		padding: 14px;
	}

	.widget {
		padding: 14px;
	}

	.read-more {
		width: 100%;
	}
}

/* ==========================================================
   7. Short landscape screens (phones turned sideways)
   ========================================================== */
@media (max-height: 500px) and (orientation: landscape) {
	.topbar {
		display: none;
	}

	.news-ticker {
		display: none;
	}

	.back-to-top {
		width: 38px;
		height: 38px;
		font-size: 17px;
	}
}

/* ==========================================================
   8. Touch screens: no hover-only behaviour
   ========================================================== */
@media (hover: none) {
	/* Dropdown menus open with the menu button, not by hovering */
	.main-navigation li:hover > .sub-menu {
		display: none;
	}

	.main-navigation li:focus-within > .sub-menu {
		display: block;
	}

	.job-table tbody tr:hover {
		background: transparent;
	}
}

@media (max-width: 800px) and (hover: none) {
	/* On mobile the menu is a single open list, so show sub-menus always */
	.main-navigation .sub-menu {
		display: block;
	}
}

/* ==========================================================
   9. Skip-link target (see skip-link-focus-fix.js)
   ========================================================== */
/* The script makes <main> focusable so keyboard focus lands there;
   no outline is needed on a whole page region. */
.site-content[tabindex="-1"]:focus {
	outline: 0;
}

/* ==========================================================
   10. "Nothing found" block (template-parts/content-none.php)
   ========================================================== */
.no-results .no-results-header {
	margin: 0 0 12px;
	padding: 0;
	background: transparent;
	box-shadow: none;
}

.no-results .no-results-title {
	margin: 0;
	font-size: 22px;
}

.no-results .search-form {
	margin: 14px 0;
}