/* ============================================================================
 * Grand Tour #68 + #69 — "Border post" & "Information desk"  (nav re-skin)
 * ----------------------------------------------------------------------------
 * CONCEPT (Instrument, rail-travel voice — RESTRAINED)
 *   #68  The language switcher becomes a small passport-control / border-post
 *        stamp: the "EN ▾" button gets a hairline frame with two faint
 *        burnt-orange corner ticks, so the current language reads like a
 *        stamped entry in a travel document. Its function, dropdown and flex
 *        layout are untouched.
 *   #69  The search affordance becomes an information desk: the nav lupa gains
 *        a subtle "desk-hairline" counter edge, and the full-screen overlay
 *        reads like an enquiry counter — a soft hairline ledge under the ink
 *        counter rule, with the caret picking up the accent. The lupa (left)
 *        and "Search" submit (right) already frame the counter like a service
 *        desk, so no markup and no heavy redecoration are needed.
 *
 * CSS-ONLY, adds no markup. Reversible by dequeuing.
 *
 * LIVE STRUCTURE (verified read-only against costandprofitability.com theme,
 * coachfocus-child/cnp-nav-praxis.php + cnp-praxis-discoverability.css, 20 Jul 2026)
 *   Right-hand controls sit inside a runtime wrapper <div> (not direct children
 *   of .nav-inner), so every selector below is a DESCENDANT selector, never `>`:
 *     button.nav-search#cnp-search-open            (34px round lupa)
 *     div#cnp-lang-wrap  >  button.nav-lang#cnp-lang-btn   ("EN ▾")
 *                           div.nav-lang-dropdown#cnp-lang-dropdown
 *   Search overlay (dialog appended after the nav):
 *     div.search-overlay#cnp-search-overlay[data-open]
 *       div.search-scrim · button.search-close
 *       div.search-inner
 *         div.search-eyebrow            (mono desk sign, orange rule)
 *         form.search-form              (flex: svg.lupa · input.search-input · button.search-submit)
 *         div.chips-wrap … .chips-label … .chip
 *
 * SPECIFICITY / SAFETY
 *   The base rules are .praxis .nav-lang (0,2,0), .nav-search / .search-form /
 *   .search-input (0,1,0). Every rule here is prefixed with the nav id
 *   (#cnp-nav-praxis) or the overlay id (#cnp-search-overlay) so it out-specifies
 *   the base (1,1,0 > 0,2,0) with NO !important. All decorative pseudo-elements
 *   are position:absolute, so they leave the flex flow of the (inline-)flex
 *   button/form and never reorder "EN ▾" or the counter fields. All new colour
 *   flows through four local custom properties holding the exact Instrument
 *   tokens.
 *
 * PALETTE (Instrument, exact — monochrome + the single burnt-orange accent)
 *   cream #F5EEE1 · card #FBF6EB · ink #2A211B · soft-ink #6E6253
 *   hairline #DED3BF · burnt-orange #C75B22
 * FONTS  IBM Plex Mono already loads site-wide (the lang label is already mono).
 * ========================================================================== */

/* Instrument tokens (exact) scoped to the two nav surfaces we touch. */
#cnp-nav-praxis,
#cnp-search-overlay{
	--gt-hair:#DED3BF;    /* hairline                          */
	--gt-ink:#2A211B;     /* ink                               */
	--gt-soft:#6E6253;    /* soft-ink                          */
	--gt-accent:#C75B22;  /* burnt orange — the single accent  */
}

/* --- #68  Language switcher as a border post -------------------------------
 * A small stamped "passport control" box: hairline frame + two faint accent
 * corner ticks; the current language firms to ink so it reads as a stamped
 * entry. Tiny and legible; the dropdown and its position are unchanged. */
#cnp-nav-praxis .nav-lang{
	position:relative;
	border:1px solid var(--gt-hair);
	border-radius:2px;
	padding:3px 9px;
	color:var(--gt-ink);
	transition:border-color .15s ease, color .15s ease;
}
/* Passport-stamp corner ticks (top-left + bottom-right). position:absolute
 * keeps them OUT of the button's inline-flex flow, so "EN" and "▾" never move. */
#cnp-nav-praxis .nav-lang::before,
#cnp-nav-praxis .nav-lang::after{
	content:"";
	position:absolute;
	width:5px;
	height:5px;
	border-color:var(--gt-accent);
	opacity:.5;
	pointer-events:none;
}
#cnp-nav-praxis .nav-lang::before{
	top:2px;
	left:2px;
	border-top:1px solid;
	border-left:1px solid;
}
#cnp-nav-praxis .nav-lang::after{
	bottom:2px;
	right:2px;
	border-bottom:1px solid;
	border-right:1px solid;
}
/* Border-post check-through: frame + label warm to the accent. */
#cnp-nav-praxis .nav-lang:hover,
#cnp-nav-praxis .nav-lang:focus-visible{
	border-color:var(--gt-accent);
	color:var(--gt-accent);
}

/* --- #69  Search as an information desk ------------------------------------
 * (a) Nav trigger: a subtle desk-hairline "counter edge" beneath the lupa.
 *     position:absolute keeps it out of the button's inline-flex flow. */
#cnp-nav-praxis .nav-search{
	position:relative;
}
#cnp-nav-praxis .nav-search::after{
	content:"";
	position:absolute;
	left:50%;
	bottom:3px;
	width:15px;
	height:1px;
	transform:translateX(-50%);
	background:var(--gt-hair);
	transition:background .15s ease, width .15s ease;
	pointer-events:none;
}
#cnp-nav-praxis .nav-search:hover::after,
#cnp-nav-praxis .nav-search:focus-visible::after{
	background:var(--gt-accent);
	width:19px;
}

/* (b) Overlay = the enquiry counter. A soft hairline ledge runs directly under
 *     the existing 2px ink counter rule (border-bottom of .search-form), and
 *     the enquiry caret takes the accent. box-shadow adds no flex child and
 *     causes no layout overflow. */
#cnp-search-overlay .search-form{
	box-shadow:0 2px 0 0 var(--gt-hair);
}
#cnp-search-overlay .search-input{
	caret-color:var(--gt-accent);
}

/* --- Reduced motion: drop the only transitions we introduced. -------------- */
@media (prefers-reduced-motion: reduce){
	#cnp-nav-praxis .nav-lang,
	#cnp-nav-praxis .nav-search::after{
		transition:none;
	}
}