/* ===========================================================================
 * The "importing walnut saplings into Russia" page.
 *
 * Rendered by walnut-tree-import-to-russia.php, which is RUSSIAN ONLY --
 * "import_russia" is defined in $ru_paths and nowhere else, so wt_url()
 * returns '' in the other thirteen languages and the footer skips it. See the
 * header comment on that file.
 *
 * ---------------------------------------------------------------------------
 * WHY THIS IS ITS OWN FILE AND NOT A NUMBERED SECTION OF css/site.css
 * ---------------------------------------------------------------------------
 * site.css is render-blocking on EVERY url of the site. This is ~450 lines
 * serving exactly one page in one language, so it goes in its own stylesheet
 * requested through $styles_to_load -- the css/orchard-calculator.css and
 * css/handbook.css precedent, not the prices.php one. It reuses .wt-dtable,
 * .wt-note and .wt-faq from site.css (sections 16 and 18) rather than
 * restyling tables or the accordion.
 *
 * ---------------------------------------------------------------------------
 * EVERYTHING IS SCOPED UNDER .wt-rimp, WHICH THE PAGE PUTS ON <main>
 * ---------------------------------------------------------------------------
 * Same containment argument as .wt-ru (site.css section 19), .wt-about
 * (section 20) and .wt-handbook: the page carries a warm paper ground and a
 * type scale the rest of the site does not have, and none of it may leak.
 *
 * THE PALETTE IS DELIBERATELY THE ONE .wt-ru USES, TO THE HEX. #f7f4ed and
 * #e3dccc are section 19's exact values for the Russia homepage block, and
 * that block is where most readers of this page arrive from -- a second paper
 * a shade off would read as a different site rather than as the next page.
 * Section 20 made the same call for the same reason.
 *
 * What this file does NOT do is reuse section 19's classes. .wt-ru-steps and
 * friends are unscoped class names, so it would work -- and it would also mean
 * that restyling the homepage silently restyles this page. The duplication is
 * the cheaper of the two.
 *
 * Square corners throughout: --bs-border-radius is 0 site-wide.
 * ========================================================================= */

.wt-rimp {
	--rimp-paper: #f7f4ed;
	--rimp-line: #e3dccc;

	display: block;
}

/* Sentence case, against site.css section 2's uppercase default.
 *
 * REDUNDANT TODAY AND KEPT ANYWAY, exactly as section 19's copy of this rule
 * is. All fourteen languages carry 'headings' => 'title' in $wt_languages as
 * of 2026-09-05, so body.wt-headings-title already turns the transform off
 * everywhere -- but that flag is the FLOOR a fifteenth language lands on, and
 * a new language's copy arrives shouting like every other did. This page's h1
 * is eleven words; shouted, it is a wall. If that ever happens the copy is the
 * thing to fix -- text-transform cannot lower-case a string that arrives
 * capitalised, it can only stop hiding it. */
.wt-rimp h1,
.wt-rimp h2,
.wt-rimp h3,
.wt-rimp h4 { text-transform: none; }


/* ---------------------------------------------------------------------------
 * Hero
 *
 * A split panel on paper rather than includes/partials/page-hero.php, which
 * puts a white headline over a photograph behind a flat scrim. The difference
 * matters here: this h1 is eleven words and the lede under it is another forty,
 * and neither is legible laid over foliage. The photograph sits beside the
 * words instead of under them.
 * ------------------------------------------------------------------------ */
.wt-rimp-hero {
	background: var(--rimp-paper);
	border-bottom: 1px solid var(--rimp-line);
	padding: var(--wt-space-md) 0;
}

@media (min-width: 768px) {
	.wt-rimp-hero { padding: var(--wt-space-lg) 0; }
}

.wt-rimp-eyebrow {
	margin-bottom: .4rem;
	font-family: var(--bs-body-font-family);
	font-size: .8125rem;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--wt-gold-dark);
}

.wt-rimp-h1 {
	margin-bottom: var(--wt-space-sm);
	font-size: 1.875rem;
	line-height: 1.15;
}

@media (min-width: 768px) {
	.wt-rimp-h1 { font-size: 2.5rem; }
}

@media (min-width: 1200px) {
	.wt-rimp-h1 { font-size: 2.875rem; }
}

/* The answer, set in the heading face and larger than body copy, so the first
 * thing under the question is the reply. Same device as .wt-ru-lede. */
.wt-rimp-lede {
	font-family: var(--wt-serif);
	font-size: 1.1875rem;
	line-height: 1.55;
	color: var(--wt-ink);
}

@media (min-width: 768px) {
	.wt-rimp-lede { font-size: 1.3125rem; }
}

.wt-rimp-actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wt-space-xs) var(--wt-space-sm);
	margin: var(--wt-space-sm) 0 0;
}

/* A thin gold rule along the bottom rather than a frame: the picture sits on a
 * tinted ground, so a full border would read as a second card. */
.wt-rimp-figure {
	margin: 0;
	border-bottom: 3px solid var(--wt-gold);
}

/* Paired with the width/height attributes on the <img> -- site.css section 10.
 * Both or neither: a height attribute without this squashes the picture. */
.wt-rimp-figure img {
	display: block;
	width: 100%;
	height: auto;
}


/* ---------------------------------------------------------------------------
 * The article / contents grid
 *
 * From 1200px the contents becomes a sticky sidebar in the space a capped
 * reading measure leaves empty -- the same answer css/handbook.css gives, and
 * for the same reason: widening the prose to fill a 1440px screen makes a
 * 120-character line, which is harder to read rather than easier.
 *
 * THE CONTENTS STAYS FIRST IN THE DOM and is moved right with grid-column. It
 * is navigation: on a phone it belongs above the thing it navigates, and a
 * screen reader should meet it there.
 * ------------------------------------------------------------------------ */
.wt-rimp-layout { display: block; }

@media (min-width: 1200px) {
	.wt-rimp-layout {
		display: grid;
		grid-template-columns: minmax(0, 1fr) 272px;
		gap: var(--wt-space-md);
		/* Or the sidebar stretches to the full row height and has nowhere left
		 * to move to. The single most common way a sticky sidebar silently
		 * does nothing. */
		align-items: start;
	}

	.wt-rimp-toc     { grid-column: 2; grid-row: 1; }
	.wt-rimp-article { grid-column: 1; grid-row: 1; }
}

.wt-rimp-toc {
	margin-bottom: var(--wt-space-md);
	padding: var(--wt-space-sm);
	background: var(--rimp-paper);
	border-top: 3px solid var(--wt-gold);
}

@media (min-width: 1200px) {
	.wt-rimp-toc {
		position: sticky;
		/* Clear of the fixed header. --wt-header-h is seeded by the inline
		 * script in includes/header.php and maintained by js/site.js. */
		top: calc(var(--wt-header-h, 81px) + 1rem);
		/* A sticky block taller than the viewport pins its own top off-screen
		 * and its last links then cannot be reached at all -- the trap
		 * recorded against the handbook sidebar and the prices quote card.
		 * Cap it and let it scroll. */
		max-height: calc(100vh - var(--wt-header-h, 81px) - 2rem);
		overflow-y: auto;
		margin-bottom: 0;
	}
}

.wt-rimp-toc-title {
	margin: 0 0 .6rem;
	font-family: var(--bs-body-font-family);
	font-size: .8125rem;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--wt-gold-dark);
}

.wt-rimp-toc ol {
	list-style: none;
	counter-reset: rimp-toc;
	margin: 0;
	padding: 0;
}

.wt-rimp-toc li {
	counter-increment: rimp-toc;
	border-top: 1px solid var(--rimp-line);
}

.wt-rimp-toc li:first-child { border-top: 0; }

.wt-rimp-toc a {
	position: relative;
	display: block;
	padding: .5rem 0 .5rem 1.9rem;
	color: var(--wt-body);
	font-size: .9375rem;
	line-height: 1.35;
	text-decoration: none;
}

.wt-rimp-toc a::before {
	content: counter(rimp-toc);
	position: absolute;
	left: 0;
	top: .5rem;
	width: 1.35rem;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	color: var(--wt-gold-dark);
}

.wt-rimp-toc a:hover,
.wt-rimp-toc a:focus-visible {
	color: var(--wt-ink);
	text-decoration: underline;
}


/* ---------------------------------------------------------------------------
 * Sections and headings
 * ------------------------------------------------------------------------ */
.wt-rimp-section {
	margin-top: var(--wt-space-md);
	/* The site header is position: fixed, so an in-page jump would otherwise
	 * land with the heading hidden underneath it. Every .wt-rimp-section
	 * carries the id the contents links to. */
	scroll-margin-top: calc(var(--wt-header-h, 81px) + 1rem);
}

.wt-rimp-section:first-child { margin-top: 0; }

/* A short gold bar over every h2, the same device .wt-ab-head uses on
 * about-us.php -- and chosen there over numbering the sections for a reason
 * that applies here too: a section whose copy is missing does not render, so a
 * printed number would have to be counted at render time. A rule is the same
 * mark whatever survives the gating. */
.wt-rimp-h2 {
	display: inline-block;
	margin-bottom: var(--wt-space-sm);
	padding-top: .9rem;
	font-size: 1.625rem;
	line-height: 1.2;
	border-top: 3px solid var(--wt-gold);
}

@media (min-width: 768px) {
	.wt-rimp-h2 { font-size: 2rem; }
}

.wt-rimp-h3 {
	margin-bottom: .5rem;
	font-size: 1.25rem;
	font-weight: 700;
}

/* Running prose is capped short of the article column, the same argument as
 * .hb-prose in the handbook: everything shares a left edge, so the full-width
 * furniture below reads as deliberate rather than ragged. */
.wt-rimp-prose { max-width: 44rem; }


/* ---------------------------------------------------------------------------
 * The nine-line summary
 *
 * Two columns from 768px, because these are one-line items and a single column
 * of nine short lines is a very tall, very empty block. Still a real <ol>.
 * ------------------------------------------------------------------------ */
.wt-rimp-brief {
	list-style: none;
	counter-reset: rimp-brief;
	margin: 0;
	padding: var(--wt-space-sm);
	background: var(--rimp-paper);
	border-left: 3px solid var(--wt-gold);
}

@media (min-width: 768px) {
	.wt-rimp-brief {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: .35rem var(--wt-space);
		padding: var(--wt-space);
	}
}

.wt-rimp-brief li {
	counter-increment: rimp-brief;
	position: relative;
	padding: .35rem 0 .35rem 2.1rem;
	line-height: 1.45;
}

.wt-rimp-brief li::before {
	content: counter(rimp-brief);
	position: absolute;
	left: 0;
	top: .35rem;
	width: 1.5rem;
	height: 1.5rem;
	background: var(--wt-gold);
	color: #fff;
	font-family: var(--bs-body-font-family);
	font-size: .8125rem;
	font-weight: 700;
	line-height: 1.5rem;
	text-align: center;
	font-variant-numeric: tabular-nums;
}


/* ---------------------------------------------------------------------------
 * The numbered rails
 *
 * Used twice: the seven stages of the supply, and the sixteen steps of the
 * Rosselkhoznadzor application. A vertical rail rather than a wrapped grid
 * because these are strictly sequential -- step 2 cannot begin before step 1 is
 * done -- and because a rail keeps the same shape on a phone as on a desktop.
 * Same reasoning and the same construction as .wt-ru-steps.
 *
 * Numbered by counter, not by the list marker, which cannot be styled this way.
 * It is still a real <ol>, so the order survives for a screen reader.
 * ------------------------------------------------------------------------ */
.wt-rimp-steps {
	list-style: none;
	counter-reset: rimp-step;
	margin: 0;
	padding: 0;
}

.wt-rimp-step {
	counter-increment: rimp-step;
	position: relative;
	padding: 0 0 var(--wt-space) 3.25rem;
	/* The rail, drawn on the item rather than on the list so the last step can
	 * switch it off and the line stops at the final number instead of running
	 * on into the whitespace below. */
	border-left: 1px solid var(--rimp-line);
	margin-left: 1.1rem;
}

.wt-rimp-step:last-child {
	padding-bottom: 0;
	border-left-color: transparent;
}

.wt-rimp-step::before {
	content: counter(rimp-step);
	position: absolute;
	left: -1.1rem;
	top: 0;
	width: 2.2rem;
	height: 2.2rem;
	background: var(--wt-gold);
	color: #fff;
	font-family: var(--bs-body-font-family);
	font-size: 1rem;
	font-weight: 700;
	line-height: 2.2rem;
	text-align: center;
	font-variant-numeric: tabular-nums;
}

.wt-rimp-step-title {
	margin-top: .2rem;
	margin-bottom: .45rem;
	font-size: 1.125rem;
	font-weight: 700;
}

.wt-rimp-step > p,
.wt-rimp-step > ul,
.wt-rimp-step > ol { max-width: 44rem; }

.wt-rimp-step > p:last-child { margin-bottom: 0; }


/* ---------------------------------------------------------------------------
 * Tick lists on the paper ground
 *
 * The tick is drawn with a border rather than a glyph, so it needs nothing from
 * the icon font (this page deliberately does not load Font Awesome) and cannot
 * fall back to a different size on a platform missing the character.
 *
 * gold-dark, not gold-light: .wt-ru-checks sets its ticks for an ink panel and
 * they are too pale to read on paper. This is the "split the colour out again"
 * case the note beside that rule asks for. The ink CTA at the foot of this page
 * puts gold-light back for its own copy of the list.
 * ------------------------------------------------------------------------ */
.wt-rimp-list {
	list-style: none;
	max-width: 44rem;
	margin: 0 0 var(--wt-space-sm);
	padding: 0;
}

.wt-rimp-list li {
	position: relative;
	padding: 0 0 .5rem 1.6rem;
	line-height: 1.55;
}

.wt-rimp-list li::before {
	content: "";
	position: absolute;
	left: .1rem;
	top: .45em;
	width: .65rem;
	height: .35rem;
	border-left: 2px solid var(--wt-gold-dark);
	border-bottom: 2px solid var(--wt-gold-dark);
	transform: rotate(-45deg);
}

.wt-rimp-list li:last-child { padding-bottom: 0; }


/* ---------------------------------------------------------------------------
 * Filled-in examples
 *
 * What the applicant actually types into a field of the Rosselkhoznadzor form.
 * Set apart from the instruction around it because it is a specimen rather than
 * a sentence -- and left in the body face rather than a monospace one: these
 * are addresses and variety names, not code.
 * ------------------------------------------------------------------------ */
.wt-rimp-example {
	max-width: 44rem;
	margin: 0 0 var(--wt-space-sm);
	padding: .75rem var(--wt-space-sm);
	background: var(--wt-surface-2);
	border-left: 3px solid var(--rimp-line);
	color: var(--wt-body);
	font-size: .9375rem;
	line-height: 1.6;
}

.wt-rimp-example-label {
	display: block;
	margin-bottom: .25rem;
	font-size: .75rem;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--wt-muted);
}


/* ---------------------------------------------------------------------------
 * Callouts
 *
 * ONE VARIANT, DELIBERATELY. css/handbook.css carries six and keeps `warning`
 * rare because a second one halves the weight of the first. This page is
 * shorter than a handbook chapter and has exactly two things a reader must not
 * miss -- start early, and the import permit is not the phytosanitary
 * certificate. Two panels that look alike are two panels that get read.
 * ------------------------------------------------------------------------ */
.wt-rimp-callout {
	max-width: 44rem;
	margin: 0 0 var(--wt-space-sm);
	padding: var(--wt-space-sm);
	background: var(--rimp-paper);
	border-left: 3px solid var(--wt-gold);
}

.wt-rimp-callout-label {
	display: block;
	margin-bottom: .3rem;
	font-size: .75rem;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--wt-gold-dark);
}

.wt-rimp-callout p:last-child { margin-bottom: 0; }


/* ---------------------------------------------------------------------------
 * The document set
 *
 * A card per document rather than a bullet list: this is the answer to "what
 * paperwork do I actually end up with", and a reader scanning for one of them
 * finds it faster in a grid of eight short labels than in a run-on list.
 * ------------------------------------------------------------------------ */
.wt-rimp-docs {
	list-style: none;
	/* FLEX, NOT GRID, AND THAT IS THE WHOLE POINT OF THIS BLOCK.
	 *
	 * There are seven documents. A three-column grid puts 3 + 3 + 1 on the page
	 * and leaves TWO EMPTY CELLS showing the container tint through the gap --
	 * which reads as a table somebody failed to finish. Flex items that grow
	 * make the last row fill itself whatever the count is, so adding or
	 * removing a document needs no change here. Same reasoning as the about-us
	 * photo mosaic, which solved its orphan by arithmetic instead. */
	display: flex;
	flex-wrap: wrap;
	gap: 1px;
	margin: 0 0 var(--wt-space-sm);
	padding: 0;
	/* The 1px gap shows this through, so neighbours share ONE hairline instead
	 * of stacking two borders into a 2px seam. */
	background: var(--rimp-line);
	border: 1px solid var(--rimp-line);
}

.wt-rimp-docs li {
	/* Roughly three per row in the article column, two on a tablet, one on a
	 * phone -- and the remainder stretches rather than leaving a hole. */
	flex: 1 1 15rem;
	background: var(--wt-surface);
	padding: .85rem var(--wt-space-sm);
	font-weight: 700;
	line-height: 1.4;
}


/* ---------------------------------------------------------------------------
 * The two application links
 *
 * Argus-Fito and Gosuslugi. Outlined rather than solid so they do not compete
 * with the page's own call to action.
 * ------------------------------------------------------------------------ */
.wt-rimp-links {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wt-space-xs) var(--wt-space-sm);
	margin: 0 0 var(--wt-space-sm);
}

.wt-rimp-links a {
	display: inline-block;
	padding: .55rem 1rem;
	background: var(--wt-surface);
	border: 1px solid var(--wt-gold);
	color: var(--wt-ink);
	font-size: .9375rem;
	font-weight: 700;
	text-decoration: none;
}

.wt-rimp-links a:hover,
.wt-rimp-links a:focus-visible {
	background: var(--wt-gold);
	border-color: var(--wt-gold);
	color: #fff;
}


/* ---------------------------------------------------------------------------
 * The closing call to action
 *
 * Ink, not gold. Gold is a surface colour on this site and the primary button
 * is black (site.css sections 1 and 5), so a gold panel would put the accent
 * behind the one control the page exists for. The button turns gold HERE
 * precisely because nothing else on the panel is.
 * ------------------------------------------------------------------------ */
.wt-rimp-cta {
	margin-top: var(--wt-space-md);
	padding: var(--wt-space);
	background: var(--wt-ink);
	color: var(--wt-on-dark);
	border-top: 3px solid var(--wt-gold);
}

@media (min-width: 768px) {
	.wt-rimp-cta { padding: var(--wt-space-md); }
}

.wt-rimp-cta-title {
	margin-bottom: .75rem;
	font-size: 1.5rem;
	font-weight: 700;
	color: #fff;
}

.wt-rimp-cta p { max-width: 44rem; }

.wt-rimp-cta .wt-rimp-list li::before {
	border-left-color: var(--wt-gold-light);
	border-bottom-color: var(--wt-gold-light);
}

.wt-rimp-cta-action {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wt-space-xs) var(--wt-space-sm);
	margin: var(--wt-space-sm) 0 0;
}

.wt-rimp-cta .btn-primary {
	background: var(--wt-gold);
	border-color: var(--wt-gold);
	color: #fff;
}

.wt-rimp-cta .btn-primary:hover,
.wt-rimp-cta .btn-primary:focus-visible {
	background: var(--wt-gold-light);
	border-color: var(--wt-gold-light);
	color: var(--wt-ink);
}

/* site.css section 5 makes .btn-secondary the quiet transparent variant with a
 * near-black label, which is invisible on this panel. Lift it onto the ink. */
.wt-rimp-cta .btn-secondary {
	background: transparent;
	border-color: rgba(255, 255, 255, .55);
	color: #fff;
}

.wt-rimp-cta .btn-secondary:hover,
.wt-rimp-cta .btn-secondary:focus-visible {
	background: #fff;
	border-color: #fff;
	color: var(--wt-ink);
}


/* --- The standing "requirements change" note ----------------------------- */
.wt-rimp-disclaimer {
	max-width: 44rem;
	margin: var(--wt-space-md) 0 0;
	padding-top: var(--wt-space-sm);
	border-top: 1px solid var(--wt-border);
}