/* ==========================================================================
   JobScout MW — mobile.css (v1.10.20)
   Loaded after main.css. Desktop appearance is unchanged: everything here
   only takes effect at 1232px and narrower, or is neutral on wide screens.
   ========================================================================== */

html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

/* 1. Side padding was being lost on every <main class="site-main container">
   (pages, job archive, WooCommerce): .site-main { padding: 56px 0 76px } is
   declared after .container and wiped its left/right padding, so text ran
   to the very edge of the screen. max-width is raised by the same 72px so
   the content column stays exactly 1160px wide on desktop. */
.site-main.container {
	max-width: 1232px;
	padding-left: 36px;
	padding-right: 36px;
}
@media (max-width: 900px) {
	.container,
	.site-main.container { padding-left: 20px; padding-right: 20px; }
	.footer-widgets.container { padding-left: 20px; padding-right: 20px; }
}

@media (max-width: 600px) {
	.container,
	.site-main.container,
	.footer-widgets.container { padding-left: 16px; padding-right: 16px; }
	.site-main { padding-top: 28px; padding-bottom: 44px; }
	.front-page-layout .site-main { padding-top: 24px; }
	.layout-with-sidebar { gap: 24px; padding-top: 24px; padding-bottom: 40px; }

	/* Page and post titles */
	.entry-title { font-size: clamp(1.4rem, 6.4vw, 1.8rem); overflow-wrap: anywhere; }
	.section-title { font-size: 1.3rem; }

	/* Body copy: slightly smaller than the 13pt desktop size so lines are
	   not cramped, and never wider than the screen. */
	body { font-size: 16px; }
	.entry-content, .job-description { font-size: 16px; line-height: 1.6; }
	.entry-content h1, .job-description h1 { font-size: 1.6rem; }
	.entry-content h2, .job-description h2 { font-size: 1.35rem; }
	.entry-content h3, .job-description h3 { font-size: 1.15rem; }
	.entry-content img, .entry-content iframe, .entry-content video, .entry-content embed, .entry-content object,
	.entry-content pre, .entry-content figure, .entry-content .wp-caption,
	.job-description img, .job-description iframe, .job-description video, .job-description pre { max-width: 100%; }

	/* 2. Lists: the desktop indent (80px) leaves almost no room on a phone. */
	.entry-content ul, .entry-content ol,
	.job-description ul, .job-description ol { padding-left: 26px; }
	.entry-content ul ul, .entry-content ol ol,
	.entry-content ul ol, .entry-content ol ul { padding-left: 22px; }

	/* 3. Page-list plugin (tenders / consultancies / digests): the 150px
	   logo floated left with the title and excerpt wrapping around and
	   underneath it. Now: small logo beside the title, excerpt full width
	   underneath. */
	.page-list-ext-item {
		display: grid;
		grid-template-columns: 64px minmax(0, 1fr);
		column-gap: 14px;
		row-gap: 8px;
		align-items: center;
		padding: 16px 0;
		border-bottom: 1px solid var(--jsmw-line);
		margin: 0;
	}
	.page-list-ext-item:last-child { border-bottom: 0; }
	.page-list-ext-image {
		float: none !important;
		grid-column: 1;
		grid-row: 1;
		width: 64px;
		margin: 0 !important;
	}
	.page-list-ext-image img {
		display: block;
		width: 64px !important;
		height: 64px !important;
		object-fit: contain;
		border: 1px solid var(--jsmw-line);
		border-radius: 8px;
		background: #fff;
	}
	.page-list-ext-title {
		grid-column: 2;
		grid-row: 1;
		min-width: 0;
		font-size: 1.02rem;
		line-height: 1.35;
		overflow-wrap: anywhere;
	}
	.page-list-ext-item-content {
		grid-column: 1 / -1;
		grid-row: 2;
		min-width: 0;
		font-size: 0.92rem;
		line-height: 1.55;
		overflow-wrap: anywhere;
	}
	/* Items with no logo: title/excerpt use the full width */
	.page-list-ext-item:not(:has(.page-list-ext-image)) { grid-template-columns: minmax(0, 1fr); }
	.page-list-ext-item:not(:has(.page-list-ext-image)) .page-list-ext-title { grid-column: 1; }

	/* Floated images and alignments inside any page content */
	.entry-content .alignleft,
	.entry-content .alignright,
	.entry-content img[style*="float"] {
		float: none !important;
		display: block;
		margin: 0 0 12px !important;
	}
	.entry-content .wp-caption { max-width: 100% !important; width: auto !important; }

	/* Forms: full width, 16px text (stops iOS zooming in on focus), easy to tap */
	.entry-content input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]),
	.entry-content select,
	.entry-content textarea,
	.job-manager-form input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]),
	.job-manager-form select,
	.job-manager-form textarea,
	.widget input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]),
	.widget select,
	.widget textarea {
		max-width: 100%;
		font-size: 16px;
	}
	.entry-content input, .entry-content select, .entry-content textarea { width: 100%; }
	.entry-content input[type="checkbox"], .entry-content input[type="radio"] { width: auto; }
	.entry-content button, .entry-content .button, .entry-content input[type="submit"] { min-height: 44px; }

	/* Tables: scroll sideways inside their own box (already set above);
	   tighter cells so more fits on screen. */
	.entry-content table, .job-description table { font-size: 14px; }
	.entry-content table th, .entry-content table td,
	.job-description table th, .job-description table td { padding: 6px 8px; min-width: 90px; }

	/* Hero */
	.hero { padding: 36px 0 44px; }
	.hero-title { font-size: clamp(1.5rem, 7vw, 2rem); margin-bottom: 20px; }
	.hero-eyebrow { font-size: 0.7rem; letter-spacing: 0.1em; }
	.hero-search { padding: 8px; border-radius: 12px; }
	.hero-search .btn { width: 100%; text-align: center; min-height: 46px; }

	/* Header / menu */
	.header-inner { min-height: 60px; gap: 8px; }
	.menu-toggle { min-width: 44px; min-height: 44px; display: flex; flex-direction: column; justify-content: center; align-items: center; }
	/* Open menu panel: scrolls inside itself if taller than the screen. justify-content
	   must be flex-start (desktop uses flex-end, which would push the first items
	   above the top of the panel where they cannot be scrolled to). */
	.main-navigation > ul, .main-navigation > div > ul { top: 100%; max-height: calc(100vh - 80px); overflow-y: auto; -webkit-overflow-scrolling: touch; justify-content: flex-start; }
	.main-navigation li { flex-shrink: 0; }
	.main-navigation a, .main-navigation > ul > li > a { padding: 14px 20px; white-space: normal; font-size: 1rem; }
	.main-navigation ul ul a { padding: 12px 20px 12px 28px; }
	.main-navigation li:hover > ul, .main-navigation li:focus-within > ul { display: flex; }
	.site-logo, .site-branding .custom-logo { height: 42px; max-height: 42px; }

	/* Job cards */
	ul.job_listings { gap: 10px; }
	.job-card-link { padding: 14px; column-gap: 12px; }
	.job-card-title { font-size: 1rem; }
	.job-card-meta { font-size: 0.88rem; overflow-wrap: anywhere; }
	.job-card-side { display: flex; flex-wrap: wrap; gap: 8px 10px; align-items: center; }

	/* Widgets, posts, footer */
	.widget { padding: 16px; }
	.widget-area-home .widget { padding: 16px; }
	.widget iframe, .widget img { max-width: 100%; height: auto; }
	.post-card { padding: 20px 16px; }
	.footer-widgets { gap: 22px; padding-top: 32px; padding-bottom: 32px; }
	.site-info-inner { flex-direction: column; align-items: flex-start; }
	.site-info ul { flex-wrap: wrap; gap: 8px 16px; }
	.nav-links .page-numbers { padding: 10px 14px; }
	.load_more_jobs, a.load_more_jobs { padding: 14px; }
}

/* Very small phones */
@media (max-width: 360px) {
	.page-list-ext-item { grid-template-columns: 52px minmax(0, 1fr); column-gap: 10px; }
	.page-list-ext-image, .page-list-ext-image img { width: 52px !important; height: 52px !important; }
}