/**
 * Country hub v5 — component styles.
 *
 * Written against the Figma frames (uae.png, uae_1-8). Replaces v4's 99KB
 * country-hub-v4.css, which was sized for the design that was rejected; this
 * styles only the four v5 components and inherits everything else from the
 * theme.
 *
 * RTL: the AR twins use identical class names, so direction is handled with
 * logical properties (margin-inline, padding-inline, text-align: start) rather
 * than a mirrored stylesheet. There is no country-hub-v5-rtl.css on purpose.
 */

/* ── shared shell ─────────────────────────────────────────────────────── */

/*
 * Tokens live on :root, NOT on .rp-cp-shell.
 *
 * They were declared on .rp-cp-shell, which the template renders as a SIBLING
 * of .rp-cp-hero rather than its ancestor. Custom properties inherit down the
 * tree, so var(--rp-cp-navy) resolved to nothing in the hero and background
 * fell back to transparent - the hero read as rgba(0,0,0,0) and the quick panel
 * rendered white-on-white. The fact tiles looked fine only because their rules
 * use literal colours. Declaring on :root puts them where every component can
 * see them regardless of where the template places it.
 */
:root {
	/* ── A2 / Phase B (2026-08-13) ──────────────────────────────────────────
	 * ONE container, ONE gutter. Measured off the Figma export (outputs/figma/
	 * uae_3.png): the blue table header spans x 120-1258 in a 1380px export =
	 * 1139px, scaling to 1189px content with 125px gutters at 1440. 1440-1200
	 * = 240, 120 a side. .rp-cp-hero__columns was already 1200 and measured
	 * correctly, so the other three move to ITS value - not an average, not a
	 * new number.
	 *
	 * BREAKPOINTS, both stylesheets: 1024 / 768 / 480, mobile-first.
	 *
	 * max-width queries stop at .98 (1023.98 / 767.98 / 479.98) so they never fire
	 * on the same pixel as their min-width partner. They did: cp-body.css had
	 * `min-width: 768` giving 2 columns while this file had `max-width: 768`
	 * giving 1, so AT EXACTLY 768 both applied and the result depended on source
	 * order. 768 is iPad portrait, and the deliberate choice is that it renders as
	 * TABLET, not mobile.
	 * Was 1024/640/600 here and 991/780/560 in components/cp-body.css.
	 *
	 * ⚠ Defined on :root, not on .rp-cp-shell. The shell is a SIBLING of
	 * .rp-cp-hero, not an ancestor, so tokens scoped to it do not resolve in
	 * the hero - that is the exact bug that rendered the hero transparent.
	 */
	--rp-cp-container: 1200px;
	--rp-cp-gutter: 24px;
	--rp-cp-gutter-sm: 16px;

	--rp-cp-navy: #021143;
	--rp-cp-ink: #08080d;
	--rp-cp-muted: #5b6478;
	--rp-cp-line: #e4e8f0;
	--rp-cp-tint: #f5f7fc;
	--rp-cp-blue: #114ef7;
	--rp-cp-radius: 12px;
}

/* The shell no longer sets width or padding. It used to be 1200 + 24, which
   inset nav/facts/body by 24 relative to the hero (a sibling that carries its
   own container) - three different left edges from one wrapper. It is now a
   pass-through and each of the four containers below owns its own geometry, so
   their boxes are identical by construction rather than by coincidence. */
/* .rp-cp-shell is a wp:group with layout:constrained, so WordPress emits a rule
   giving its children the THEME's content-size. That is the third inset source:
   nav and facts landed at 147/175 while the hero (a sibling, outside the shell)
   sat at 113. Point the layout vars at our container so the generated rule agrees
   with the tokens instead of fighting them. */
.rp-cp-shell {
	max-width: none;
	margin-inline: auto;
	padding-inline: 0;
	/* 100%, NOT the container. Setting these to 1200 capped shell children at
	   1200 and THEN the container rule subtracted the gutter from that 1200,
	   giving 1152 and a second left edge at 1440. The layout must not size
	   anything; --rp-cp-container is the single source of width. */
	--wp--style--global--content-size: 100%;
	--wp--style--global--wide-size: 100%;
}

/* The one container, applied to all four measured regions.
 *
 * width + margin-inline:auto, NOT max-width + padding-inline. Padding does not
 * move an element's left edge, so the padding version left all four flush at 0
 * below the container width while the hero was inset by its parent - i.e. it
 * looked right at 1440 and was still wrong at 390 and 768. width:min() moves the
 * BOX, so the four edges are equal at every viewport, which is what the
 * acceptance measures. */
.rp-cp-hero__columns,
.rp-cp-nav,
.rp-cp-facts,
.rp-cp-models,
.rp-cp-body {
	width: min(100% - (2 * var(--rp-cp-gutter)), var(--rp-cp-container)) !important;
	max-width: none !important;
	margin-inline: auto;
	padding-inline: 0;
	box-sizing: border-box;
}

/* The hero band keeps its vertical padding but must not inset its container,
   or the hero edge parts company with the other three again. */
.rp-cp-hero {
	padding-inline: 0;
}

/* ── hero ─────────────────────────────────────────────────────────────── */

.rp-cp-hero {
	background: var(--rp-cp-navy);
	color: #fff;
	padding-block: 56px 64px;
}

.rp-cp-hero__columns {
	max-width: var(--rp-cp-container);
	margin-inline: auto;
	padding-inline: var(--rp-cp-gutter);
	display: flex;
	gap: 48px;
	align-items: flex-start;
	justify-content: space-between;
}

.rp-cp-hero__content {
	flex: 1 1 560px;
	min-width: 0;
}

.rp-cp-hero__title {
	color: #fff;
	font-size: clamp(32px, 3.4vw, 48px);
	line-height: 1.15;
	margin: 0 0 20px;
	text-align: start;
}

.rp-cp-hero__desc {
	color: rgba(255, 255, 255, .82);
	font-size: 17px;
	line-height: 1.6;
	max-width: 60ch;
	margin: 0;
	text-align: start;
}

/* verification row — renders only when both the flag and the date are set */
.rp-cp-verified {
	display: flex;
	gap: 12px;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
	background: var(--rp-cp-tint);
	color: var(--rp-cp-muted);
	font-size: 14px;
	padding: 10px 24px;
}

.rp-cp-verified__date {
	color: var(--rp-cp-ink);
}

/*
 * Hero text colour, scoped.
 *
 * .rp-cp-hero__title alone is (0,1,0) = 10 and LOSES to qa-fixes-pages.min.css's
 * `.wp-block-group h1, .wp-block-group h2 { color: rgb(21,17,59) }` at (0,1,1) = 11,
 * so the headline computed to dark navy on a #021143 background - present but
 * unreadable. Scoping under .rp-cp-hero reaches (0,2,0) = 20 and wins cleanly,
 * with no !important.
 *
 * Applied to the WHOLE hero rather than just the title: the description and every
 * piece of hero furniture still to be built (eyebrow, breadcrumb, callout, CTAs,
 * trust line) would lose the same fight against .wp-block-group p and friends.
 * One scoped block covers them in advance.
 */
.rp-cp-hero,
.rp-cp-hero h1,
.rp-cp-hero h2,
.rp-cp-hero h3,
.rp-cp-hero p,
.rp-cp-hero li,
.rp-cp-hero span,
.rp-cp-hero strong {
	color: #fff;
}

.rp-cp-hero .rp-cp-hero__title {
	color: #fff;
}

.rp-cp-hero .rp-cp-hero__desc {
	color: rgba(255, 255, 255, .82);
}

.rp-cp-hero a:not(.rp-cp-hero__btn) {
	color: #fff;
	text-decoration: underline;
}

/* the quick panel sits inside the hero and inherits the same fight */
.rp-cp-hero .rp-cp-quick__title {
	color: rgba(255, 255, 255, .6);
}

.rp-cp-hero .rp-cp-quick__label {
	color: rgba(255, 255, 255, .68);
}

.rp-cp-hero .rp-cp-quick__value {
	color: #fff;
}

/* ── quick overview panel ─────────────────────────────────────────────── */

.rp-cp-quick {
	flex: 0 0 360px;
	background: rgba(255, 255, 255, .06);
	border: 1px solid rgba(255, 255, 255, .14);
	border-radius: var(--rp-cp-radius);
	padding: 20px 24px;
}

.rp-cp-quick__title {
	margin: 0 0 12px;
	font-size: 12px;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, .6);
}

/*
 * Label and value are separate elements and are laid out as a two-column row.
 * Gate 5 read "Can you hire?Yes" because nothing styled them — the separation
 * has to survive without CSS too, so the label also carries a trailing space in
 * the markup. This gives it the visual gap.
 */
.rp-cp-quick__row {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 16px;
	padding-block: 10px;
	border-bottom: 1px solid rgba(255, 255, 255, .1);
	font-size: 15px;
}

.rp-cp-quick__row:last-child {
	border-bottom: 0;
}

.rp-cp-quick__label {
	color: rgba(255, 255, 255, .68);
	white-space: nowrap;
}

.rp-cp-quick__value {
	color: #fff;
	font-weight: 600;
	text-align: end;
}

/* ── nine-tile fact grid ──────────────────────────────────────────────── */

/* padding-inline was 28px, which inset .rp-cp-facts__grid - the element the
   visible cards sit in - by 28px at desktop and 18px at mobile. The wrapper
   aligned and the cards did not, which is what a reader actually sees. The tint
   card keeps its block padding; the grid now shares the container edge. */
.rp-cp-facts {
	background: var(--rp-cp-tint);
	border-radius: var(--rp-cp-radius);
	padding-block: 28px;
	padding-inline: 24px;
	margin-block: 40px;
}

.rp-cp-facts__grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 16px;
}

.rp-cp-tile {
	display: flex;
	gap: 12px;
	align-items: center;
	background: #fff;
	border: 1px solid var(--rp-cp-line);
	border-radius: 10px;
	padding: 16px 18px;
	min-width: 0;
}

.rp-cp-tile__icon {
	flex: 0 0 auto;
	display: inline-flex;
	width: 36px;
	height: 36px;
	align-items: center;
	justify-content: center;
	border-radius: 8px;
	background: #eaf0ff;
}

.rp-cp-tile__icon img {
	width: 20px;
	height: 20px;
}

.rp-cp-tile__body {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}

.rp-cp-tile__label {
	font-size: 13px;
	color: var(--rp-cp-muted);
}

.rp-cp-tile__value {
	font-size: 15px;
	font-weight: 600;
	color: var(--rp-cp-ink);
	overflow-wrap: anywhere;
}

/* ── section anchor nav ───────────────────────────────────────────────── */

.rp-cp-nav {
	position: sticky;
	top: 96px;
	z-index: 20;
	background: #fff;
	border-bottom: 1px solid var(--rp-cp-line);
	margin-block: 0 8px;
}

.rp-cp-nav__inner {
	display: flex;
	gap: 8px;
	overflow-x: auto;
	padding-block: 12px;
	scrollbar-width: none;
}

.rp-cp-nav__inner::-webkit-scrollbar {
	display: none;
}

.rp-cp-nav__link {
	flex: 0 0 auto;
	padding: 8px 14px;
	border-radius: 999px;
	font-size: 15px;
	color: var(--rp-cp-muted);
	text-decoration: none;
	white-space: nowrap;
}

.rp-cp-nav__link:hover,
.rp-cp-nav__link[aria-current="true"] {
	background: #eaf0ff;
	color: var(--rp-cp-blue);
}

/* ── body ─────────────────────────────────────────────────────────────── */

/* The 860px cap put the body's left edge at 283 while everything else sat at
   137. Measure width is now the shared container; prose line-length is handled
   per-element in components/cp-body.css, not by narrowing the whole column. */
.rp-cp-body {
	width: 100%;
}

.rp-cp-body h2 {
	scroll-margin-top: 160px;
}

/* ── responsive ───────────────────────────────────────────────────────── */

@media (max-width: 1023.98px) {
	.rp-cp-hero__columns {
		flex-direction: column;
		gap: 32px;
	}

	/* Stacked: don't let the 560px flex-basis become a forced column HEIGHT
	   (that was the big empty gap under the hero content on mobile/tablet). */
	.rp-cp-hero__content {
		flex: 0 0 auto;
	}

	.rp-cp-quick {
		flex: 1 1 auto;
		width: 100%;
	}

	.rp-cp-facts__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 767.98px) {
	.rp-cp-hero__columns,
	.rp-cp-nav,
	.rp-cp-facts,
	.rp-cp-models,
	.rp-cp-body {
		width: min(100% - (2 * var(--rp-cp-gutter-sm)), var(--rp-cp-container)) !important;
	}

	.rp-cp-hero {
		padding-block: 32px 40px;
	}

	.rp-cp-facts {
		padding-block: 18px;
		padding-inline: 16px;
	}

	.rp-cp-facts__grid {
		grid-template-columns: 1fr;
	}

	.rp-cp-quick__row {
		font-size: 14px;
	}
}

/* ── hero furniture (2026-08-13) ───────────────────────────────────────────
 *
 * Breadcrumb, eyebrow, callout and CTAs. Each element is emitted only when it
 * has something to show, so there are no :empty guards here - if you are seeing
 * a gap, the component rendered and the copy is blank, which is a data problem
 * not a CSS one.
 *
 * Everything is scoped under .rp-cp-hero for the same reason the title is: the
 * bare class is (0,1,0) and loses to qa-fixes-pages.min.css's `.wp-block-group
 * h1`-shaped rules. See the note at the top of this file.
 * ------------------------------------------------------------------------- */

.rp-cp-hero .rp-cp-breadcrumb {
	max-width: 1200px;
	margin: 0 auto 20px;
	padding-inline: var(--rp-cp-gutter);
	font-size: 14px;
	color: rgba(255, 255, 255, .72);
	text-align: start;
}

.rp-cp-hero .rp-cp-breadcrumb a {
	color: rgba(255, 255, 255, .72);
	text-decoration: none;
}

.rp-cp-hero .rp-cp-breadcrumb a:hover {
	color: #fff;
	text-decoration: underline;
}

.rp-cp-hero .rp-cp-breadcrumb__sep {
	margin-inline: 8px;
	opacity: .6;
}

.rp-cp-hero .rp-cp-breadcrumb__current {
	color: #fff;
}

.rp-cp-hero .rp-cp-hero__eyebrow {
	margin: 0 0 12px;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, .75);
	text-align: start;
}

.rp-cp-hero .rp-cp-hero__callout {
	margin: 20px 0 0;
	padding: 16px 20px;
	border-radius: 10px;
	background: rgba(17, 78, 247, .18);
	border-inline-start: 3px solid var(--rp-cp-blue, #114EF7);
	color: rgba(255, 255, 255, .92);
	font-size: 15px;
	line-height: 1.6;
	max-width: 60ch;
	text-align: start;
}

.rp-cp-hero .rp-cp-hero__cta {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin-top: 28px;
}

.rp-cp-hero .rp-cp-hero__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 48px;
	padding: 0 24px;
	border-radius: 8px;
	font-size: 15px;
	font-weight: 600;
	line-height: 1;
	text-decoration: none;
	transition: background-color .15s ease, color .15s ease;
}

.rp-cp-hero .rp-cp-hero__btn--primary {
	background: var(--rp-cp-blue, #114EF7);
	color: #fff;
}

.rp-cp-hero .rp-cp-hero__btn--primary:hover {
	background: #0d3fd0;
	color: #fff;
}

.rp-cp-hero .rp-cp-hero__btn--secondary {
	background: transparent;
	color: #fff;
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .45);
}

.rp-cp-hero .rp-cp-hero__btn--secondary:hover {
	background: rgba(255, 255, 255, .1);
	color: #fff;
}

@media (max-width: 479.98px) {
	.rp-cp-hero .rp-cp-hero__cta {
		flex-direction: column;
		align-items: stretch;
	}

	.rp-cp-hero .rp-cp-hero__btn {
		width: 100%;
	}
}

/* ── A4: six-card hiring-model row ────────────────────────────────────────
 * Its OWN container and its own grid, outside .rp-unified-cards. The three
 * inline .rp-model-card divs used to flow inside the 7-card decision row, so a
 * container sized for three held ten items and neither grid resolved to whole
 * columns (2.7 fact tiles, 1.5 model cards).
 * 1 / 2 / 3 / 6 columns. No icons yet - six are commissioned in the
 * decision-card family; a gap beats an emoji placeholder.
 * ---------------------------------------------------------------------- */
.rp-cp-models {
	margin-block: 32px 40px;
}

.rp-cp-models__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 16px;
}

@media (min-width: 768px) {
	.rp-cp-models__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 1024px) {
	.rp-cp-models__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (min-width: 1400px) {
	.rp-cp-models__grid { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}









.rp-cp-models .rp-cp-model__link:hover { text-decoration: underline; }

/* CSS backstop for the retired inline model cards.
 *
 * The sanctioned pattern in this codebase for content a render_block filter can
 * miss: filter where it fires, PLUS a page-scoped hide as the guaranteed catch-all
 * (see inc/demo-remove-testimonials.php:9-17, which does exactly this because the
 * AR path renders nested/cached and never re-fires render_block).
 *
 * This stylesheet only loads on page-country-hub-v5, so nothing else is touched -
 * v4 country pages keep rendering these cards from post_content.
 *
 * NOT a substitute for deleting the calculator (Greg's separate ruling): that was
 * about not shipping a feature at all. This is a duplicate render of content the
 * six-card component replaces, on one template, with the filter as primary.
 */
.rp-model-card,
.wp-block-column:has(> .rp-model-card) {
	display: none !important;
}

/* ── STOPGAP (2026-08-13): clamp the fact-tile value ──────────────────────
 *
 * ⚠ THIS IS A STOPGAP, NOT THE FIX. Labelled so nobody mistakes it for the
 * design.
 *
 * The Phase C sync writes API prose into fields the frame sized for short
 * strings. Measured across 46 live countries: canada's min_wage is 1074
 * characters and rendered a 592px tile against a 70px baseline - 8.5x the row
 * height, a paragraph sitting in a fact tile. philippines 491ch/322px,
 * switzerland 406ch/268px. 1074 is the dataset maximum, so it cannot get worse.
 *
 * Three lines of clamp, with the ellipsis doing the important work: it SIGNALS
 * truncation rather than letting a cut-off legal fact read as complete.
 *
 * What this does NOT solve: the full prose still has no home on the page. The
 * proper fix is a short-form field for the tile with the full text in the body -
 * a content job across 55 countries, deliberately not wedged in ahead of the
 * remaining rollout.
 * ---------------------------------------------------------------------- */
/* ALL THREE value slots, not one. rp_cp_field() feeds the fact grid, the hero
   Quick Overview AND the model row, so clamping only .rp-cp-tile__value left
   canada's 1,074-character min_wage rendering in FULL inside the hero panel -
   hundreds of pixels tall, filling the viewport. UAE hid it because its value is
   86 characters. One selector was specified, one was verified, and the same data
   renders in three components. */
.rp-cp-tile__value,
.rp-cp-quick__value,
.rp-cp-models .rp-cp-model__value {
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

/* Scoped under .rp-cp-models for SPECIFICITY, not tidiness: the bare
   .rp-cp-model__label (0,1,0) lost to a theme `p` rule at (0,1,1) and all three
   levels computed to 17px - the markup was right and the type was flat.

   Model cards: four type levels, matching .rp-decision-card's treatment in
   components/cp-body.css - icon chip, uppercase label, bold value, small grey
   detail. The previous rules gave value+title one size and label+desc another,
   so the card had two levels where the frame has four. */
.rp-cp-model {
	background: #fff;
	border: 1px solid var(--rp-cp-line);
	border-radius: var(--rp-cp-radius);
	padding: 22px 20px;
	display: flex;
	flex-direction: column;
	gap: 0;
	justify-content: flex-start;
	min-width: 0;
}

.rp-cp-models .rp-cp-model__icon {
	width: 40px;
	height: 40px;
	border-radius: 10px;
	background: #eaf0ff;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 14px;
}

.rp-cp-models .rp-cp-model__icon img { width: 22px; height: 22px; }

.rp-cp-models .rp-cp-model__label {
	font-size: 12px;
	font-weight: 600;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: #8388A1;
	margin: 0 0 6px;
}

.rp-cp-models .rp-cp-model__value {
	font-size: 22px;
	font-weight: 700;
	line-height: 1.2;
	color: var(--rp-cp-ink);
	margin: 0 0 8px;
}

.rp-cp-models .rp-cp-model__desc {
	font-size: 13px;
	line-height: 1.5;
	color: #6B7280;
	margin: 0;
}

.rp-cp-models .rp-cp-model__link {
	margin-top: auto;
	padding-top: 14px;
	font-size: 14px;
	font-weight: 600;
	color: var(--rp-cp-blue);
	text-decoration: none;
}

.rp-cp-model__link:hover { text-decoration: underline; }

/* Guide cards share a baseline (item 3). They aligned to their own content, so
   column 1 sat ~10px above columns 2 and 3 in both rows - the same content-not-
   baseline offset that made a top-equality row counter under-read. */
.rp-cp-body .rp-guides-grid { align-items: stretch; }
.rp-cp-body .rp-guides-grid > .rp-guide-card { height: 100%; }

/* Ordered lists were rendering smaller and tighter than the bullet lists around
   them (item 6) - the public-holidays list next to the leave bullets. Give ol
   the same treatment as ul. */
.rp-cp-body ol,
.rp-cp-body ul {
	font-size: 16px;
	line-height: 1.7;
	margin: 0 0 18px;
	padding-inline-start: 22px;
}

.rp-cp-body ol li,
.rp-cp-body ul li { margin-bottom: 6px; }

/* Wide data tables (e.g. mandatory-benefits) were cut off on narrow screens.
   Make the table its own horizontal-scroll container: it only scrolls when it
   actually overflows, so desktop is unchanged. */
.rp-cp-body table {
	display: block;
	max-width: 100%;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}

/* ── item 1: section content authored inside callout divs ─────────────────
 * ⚠ CONTENT-DEPENDENT SELECTOR. The real fix is editorial - section content
 * should not be authored inside .rp-callout--highlight - but that is 55
 * countries of post_content, and we are not editing content to solve styling.
 *
 * Discriminator, confirmed on /country/uae: the SECTION-shaped ones carry an
 * inline border-left (green or blue); the genuine asides ("Key fact:") carry no
 * inline style. So the attribute selector separates them without touching the
 * real callouts.
 * ---------------------------------------------------------------------- */
.rp-cp-body .rp-callout--highlight[style*="border-left"] {
	background: none !important;
	border: 0 !important;
	border-radius: 0 !important;
	padding: 0 !important;
	margin: 0 0 18px !important;
}

/* ── item 2: the h2 blue bar belongs on LEFT-ALIGNED headings only ────────
 * The CTA banner heading is centred, so the bar rendered at the far-left edge
 * of the container, floating ~200px from its own text. Keyed on alignment
 * rather than on the banner's class, because the rule is about alignment. */
.rp-cp-body h2.has-text-align-center,
.rp-cp-body h2[style*="text-align:center"],
.rp-cp-body h2[style*="text-align: center"] {
	border-left: 0;
	padding-left: 0;
}