/*
 * SCF mobile layer. Loads after every page stylesheet (see SCF_EP_Frontend::enqueue_assets)
 * and only touches phones and small tablets. Page CSS is compiled with doubled scope
 * classes, so rules here use a tripled scope (.scf-scope x3) to win without fighting
 * selector by selector; !important is kept for the few properties set inline or by ID.
 */

/* ---------- Every page: tap targets and readable minimums (phones) ---------- */
@media (max-width: 767px) {
	/* Breadcrumbs: 44px tap rows */
	.scf-scope.scf-scope.scf-scope .crumbs a,
	.scf-scope.scf-scope.scf-scope nav[aria-label="Breadcrumb"] a {
		display: inline-flex;
		align-items: center;
		min-height: 44px;
		padding-inline: 4px;
		margin-inline: -4px;
	}

	/* Source and citation links that sit on their own line */
	.scf-scope.scf-scope.scf-scope .source a,
	.scf-scope.scf-scope.scf-scope .sources a,
	.scf-scope.scf-scope.scf-scope .in-sources a,
	.scf-scope.scf-scope.scf-scope .pk-sources a,
	.scf-scope.scf-scope.scf-scope .pk-strip a,
	.scf-scope.scf-scope.scf-scope .bd-sources a,
	.scf-scope.scf-scope.scf-scope .svc-sources a,
	.scf-scope.scf-scope.scf-scope figure small a,
	.scf-scope.scf-scope.scf-scope .gscore a,
	.scf-scope.scf-scope.scf-scope p.src a,
	.scf-scope.scf-scope.scf-scope .route a,
	.scf-scope.scf-scope.scf-scope .toc-support a {
		display: inline-flex;
		align-items: center;
		min-height: 44px;
	}

	/* Links inside table cells: a bigger hit area without changing the row look */
	.scf-scope.scf-scope.scf-scope td a {
		display: inline-block;
		padding: 10px 0;
		margin: -10px 0;
	}

	/* Filter chips and pill links */
	.scf-scope.scf-scope.scf-scope .filters .filter,
	.scf-scope.scf-scope.scf-scope .faq-filters button,
	.scf-scope.scf-scope.scf-scope .fq-filters button,
	.scf-scope.scf-scope.scf-scope a.scf-country-link,
	.scf-scope.scf-scope.scf-scope .dd a,
	.scf-scope.scf-scope.scf-scope dd > a {
		min-height: 44px !important;
		display: inline-flex;
		align-items: center;
	}

	/* Consent links in forms */
	.scf-scope.scf-scope.scf-scope label.consent a {
		padding: 8px 0;
	}

	/* Running text never below 14px on a phone */
	.scf-scope.scf-scope.scf-scope .form-foot,
	.scf-scope.scf-scope.scf-scope p.small,
	.scf-scope.scf-scope.scf-scope p.src,
	.scf-scope.scf-scope.scf-scope .toc-support p,
	.scf-scope.scf-scope.scf-scope .qcard-head .live,
	.scf-scope.scf-scope.scf-scope .sbp-src,
	.scf-scope.scf-scope.scf-scope figure.ig figcaption,
	.scf-scope.scf-scope.scf-scope .xrow figcaption,
	.scf-scope.scf-scope.scf-scope .stx p.out,
	.scf-scope.scf-scope.scf-scope .hero-copy p.byline,
	.scf-scope.scf-scope.scf-scope .cred-text-v2 p {
		font-size: 14px !important;
		line-height: 1.55;
	}

	/* Mono kickers on the Bangladesh page: 12.5px floor like the other labels */
	.scf-scope.scf-scope.scf-scope p.mono.kick {
		font-size: 12.5px !important;
	}

	/* Small uppercase labels: 12.5px floor */
	.scf-scope.scf-scope.scf-scope .office-rows dt,
	.scf-scope.scf-scope.scf-scope .route4 .who,
	.scf-scope.scf-scope.scf-scope .band-track li {
		font-size: 12.5px !important;
	}

	/* Long words and URLs never push a box wider than the screen */
	.scf-scope.scf-scope.scf-scope :is(p, li, dd, td, h1, h2, h3, h4, address) {
		overflow-wrap: break-word;
	}
	/* Emails and long links: "anywhere" also lowers their minimum width, so flex and grid
	   parents can shrink to the screen instead of being pushed wider by them. */
	.scf-scope.scf-scope.scf-scope :is(a[href^="mailto:"], a[href^="tel:"], a[href*="wa.me"], .contact-lines a, .in-contact a, .pk-contact a, .sf-contact a) {
		overflow-wrap: anywhere;
		min-width: 0;
	}
}

/* ---------- Home: one card level on phones and tablets, swipeable tabs ---------- */
@media (max-width: 900px) {
	/* Outer white shells around card lists add a second frame and squeeze the text.
	   On phones the inner cards carry the design on their own. */
	.scf-scope.scf-scope.scf-scope .cred.cred-v2,
	.scf-scope.scf-scope.scf-scope #overview .easy-left,
	.scf-scope.scf-scope.scf-scope #roadmap .roadmap-shell,
	.scf-scope.scf-scope.scf-scope #services .tab-shell,
	.scf-scope.scf-scope.scf-scope #countries .country-showcase,
	.scf-scope.scf-scope.scf-scope #assessment .assessment-side {
		padding: 0 !important;
		background: transparent !important;
		border: 0 !important;
		box-shadow: none !important;
		border-radius: 0 !important;
	}
	.scf-scope.scf-scope.scf-scope .cred.cred-v2::before,
	.scf-scope.scf-scope.scf-scope .cred.cred-v2::after,
	.scf-scope.scf-scope.scf-scope #overview .easy-left::before,
	.scf-scope.scf-scope.scf-scope #overview .easy-left::after,
	.scf-scope.scf-scope.scf-scope #roadmap .roadmap-shell::before,
	.scf-scope.scf-scope.scf-scope #roadmap .roadmap-shell::after,
	.scf-scope.scf-scope.scf-scope #countries .country-showcase::before,
	.scf-scope.scf-scope.scf-scope #countries .country-showcase::after {
		display: none !important;
	}

	/* Service tabs: one swipeable row of chips instead of three stacked bars */
	.scf-scope.scf-scope.scf-scope #services .chips {
		flex-wrap: nowrap !important;
		flex-direction: row !important;
		overflow-x: auto;
		scroll-snap-type: x proximity;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
		gap: 8px;
		padding: 4px 2px !important;
		margin: 0 0 18px !important;
		background: transparent !important;
		border: 0 !important;
		box-shadow: none !important;
	}
	.scf-scope.scf-scope.scf-scope #services .chips::-webkit-scrollbar { display: none; }
	.scf-scope.scf-scope.scf-scope #services .chip {
		flex: none !important;
		width: auto !important;
		min-height: 44px;
		padding: 10px 18px !important;
		border-radius: 999px !important;
		border: 1px solid var(--line, #dbe7df) !important;
		background: #fff !important;
		scroll-snap-align: start;
		white-space: nowrap;
	}
	.scf-scope.scf-scope.scf-scope #services .chip[aria-selected="true"] {
		background: var(--green-700, #177447) !important;
		border-color: var(--green-700, #177447) !important;
		color: #fff !important;
	}

	/* Worldwide card: icon above the text, so the text uses the full width */
	.scf-scope.scf-scope.scf-scope #countries .coverage-title {
		flex-direction: column !important;
		align-items: flex-start !important;
		gap: 12px !important;
	}
	.scf-scope.scf-scope.scf-scope #countries .coverage-top { padding: 22px 18px !important; }
	.scf-scope.scf-scope.scf-scope #countries .coverage-body { padding: 18px !important; }

	/* Overview heading had no breathing room above its paragraph */
	.scf-scope.scf-scope.scf-scope #overview .easy-left h2 { margin-bottom: 12px !important; }

	/* Dark NEOM panel: the 46px/42px desktop padding is too much on a phone */
	.scf-scope.scf-scope.scf-scope #neom .neom-content { padding: 30px 20px !important; }

	/* Cards keep comfortable, even inner padding */
	.scf-scope.scf-scope.scf-scope :is(.cred-card-v2, .easy-card, .phase-card, .step-card, .assessment-point, .neom-card) {
		padding: 18px !important;
	}
}

/* ---------- Text-heavy cards on other pages (phones) ---------- */
@media (max-width: 640px) {
	/* Privacy and terms: sections become plain blocks with a rule, items keep one frame */
	.scf-scope.scf-scope.scf-scope .policy-section {
		padding: 22px 0 !important;
		background: transparent !important;
		border: 0 !important;
		border-top: 1px solid var(--line, #dbe7df) !important;
		border-radius: 0 !important;
		box-shadow: none !important;
	}
}

/* ---------- Home on tablets: two service cards per row, NEOM photo at a sensible height ---------- */
@media (min-width: 600px) and (max-width: 1023px) {
	.scf-scope.scf-scope.scf-scope #services .panel.grid3 {
		grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
	}
}
@media (max-width: 1023px) {
	.scf-scope.scf-scope.scf-scope #neom .neom-media img {
		width: 100% !important;
		height: clamp(220px, 46vw, 400px) !important;
		object-fit: cover;
	}
}
/* ---------- Last phone touches ---------- */
@media (max-width: 767px) {
	/* Hub situation cards: links sit in normal text flow, so wrapped lines don't overlap */
	.scf-scope.scf-scope.scf-scope .which td a { padding: 0; margin: 0; display: inline; }
	.scf-scope.scf-scope.scf-scope .which td { line-height: 1.6; }
	/* FAQ category tags, captions and definition values */
	.scf-scope.scf-scope.scf-scope details > summary > i { font-size: 12px !important; }
	.scf-scope.scf-scope.scf-scope figcaption,
	.scf-scope.scf-scope.scf-scope main dd { font-size: 14px !important; }
}
/* Home NEOM section: link to the NEOM supplier guide, styled as a gold chip */
.scf-scope.scf-scope.scf-scope a.neom-guide {
	display: inline-flex;
	align-items: center;
	min-height: 40px;
	padding: 8px 16px;
	border-radius: 999px;
	background: var(--gold, #d9b46b);
	color: #0a2a1b;
	font-weight: 800;
	font-size: 14px;
	text-decoration: none;
}
.scf-scope.scf-scope.scf-scope a.neom-guide:hover { background: #ecd29b; }

/* Contrast: WhatsApp green and brass buttons dark enough for white text (4.5:1) */
.scf-scope.scf-scope.scf-scope .mbar .mb-alt { background: #0f7d42 !important; }
.scf-scope.scf-scope.scf-scope .pk-book .form .btn.primary { background: #8a6420 !important; }

/* ---------- v1.15 QA pass: tap targets, readable minimums, policy grid (phones) ---------- */
@media (max-width: 767px) {
	.scf-scope.scf-scope.scf-scope :is(.fq-group h3 a, .fig a, .role .links a, .ix-stats a, .nap a, .side-box .small a, a.post-cat, .author-box .links a, .rev-cta a, .faq-side a, .who a) {
		display: inline-flex;
		align-items: center;
		min-height: 44px;
	}
	.scf-scope.scf-scope.scf-scope label.consent a { padding: 12px 0; }
	.scf-scope.scf-scope.scf-scope .filters .filter { min-height: 44px !important; }
	/* Privacy and terms: the side menu and intro card never push the page wider than the phone */
	.scf-scope.scf-scope.scf-scope .policy-grid { grid-template-columns: minmax(0, 1fr) !important; }
	.scf-scope.scf-scope.scf-scope .policy-grid > *,
	.scf-scope.scf-scope.scf-scope .policy-content > * { min-width: 0; overflow-wrap: break-word; }
	/* Captions sit under the photo instead of covering it */
	.scf-scope.scf-scope.scf-scope .docsplit figure figcaption { position: static; border: 0; border-radius: 0; }
	/* Notes and helper lines: 14px floor */
	.scf-scope.scf-scope.scf-scope :is(.gmb-note, p.tzone, .form-note, .certificate-trust p, .field .hint, .field .err, #costing .quote-only span, .hero-strip span) {
		font-size: 14px !important;
		line-height: 1.5;
	}
	/* Home: small uppercase labels at the 12px floor */
	.scf-scope.scf-scope.scf-scope :is(#services .fields dt, .cred-text-v2 span, .office-head h3 + span, .office-index, .office-address b) {
		font-size: 12px !important;
	}
	/* Every enquiry form: full-width submit and no zoom on focus (iOS zooms below 16px) */
	.scf-scope.scf-scope.scf-scope form :is(input:not([type="checkbox"]):not([type="radio"]), select, textarea) { font-size: 16px !important; }
	.scf-scope.scf-scope.scf-scope form :is(button[type="submit"], .form-submit .bb, .form-submit .btn) { width: 100%; }
}

/* Typography roles v2 (site rule): Archivo headings, Source Serif 4 subheadings + quotes + heading accents, Inter body. */
.scf-content.scf-content.scf-content{font-family:Inter,system-ui,-apple-system,"Segoe UI",sans-serif}
.scf-content.scf-content.scf-content :is(h1,h2){font-family:Archivo,Inter,system-ui,sans-serif!important}
.scf-content.scf-content.scf-content :is(h3,h4,blockquote,q,.pull-quote){font-family:"Source Serif 4",Georgia,"Times New Roman",serif!important;letter-spacing:0}
.scf-content.scf-content.scf-content :is(h1,h2) em{font-family:"Source Serif 4",Georgia,"Times New Roman",serif!important;font-style:italic;font-weight:600}