/* Non-critical styles loaded async. Anything below the LCP fold. */

.archive-header{max-width:1180px;margin:0 auto;padding:24px 16px 0}
.archive-title{font-size:26px;margin:0 0 8px}
.archive-description{color:#555;max-width:80ch}

.search-form{display:flex;gap:8px;max-width:480px;margin:24px auto}
.search-form input[type=search]{flex:1;padding:10px 14px;border:1px solid #ccc;border-radius:8px}
.search-form button{padding:10px 16px;border-radius:8px;background:#0a6abd;color:#fff;border:0;font-weight:600;cursor:pointer;min-height:44px}

.error-404{max-width:720px;margin:60px auto;text-align:center;padding:0 16px}
.error-404 h1{font-size:48px;margin:0 0 8px}
.error-404 p{color:#555;font-size:18px;margin:0 0 24px}

.entry-content{line-height:1.7}
.entry-content p{margin:0 0 1em}
.entry-content h2{font-size:22px;margin:1.6em 0 .5em}
.entry-content h3{font-size:18px;margin:1.4em 0 .5em}
.entry-content img{border-radius:10px;margin:1em 0}

.trp-language-switcher,.trp-language-switcher-container{margin-left:auto}
.trp-language-switcher select,.trp-language-switcher-container select{background:transparent;color:#fff;border:1px solid rgba(255,255,255,.4);padding:6px 10px;border-radius:6px;min-height:44px}

/* Yoast / breadcrumb spacing */
.yoast-breadcrumbs{font-size:14px;color:#555;padding:8px 16px;max-width:1280px;margin:0 auto}

/* Light contrast bump for the onlyf filter pills (accessibility) */
.onlyf_filter_label,.onlyf_models_profile_filter{color:#222}
.onlyf_models_profile_filter.active{background:#0a6abd!important;color:#fff!important}

/* Color-contrast bumps to pass WCAG AA. Onlyf master plugin uses #424242
   which is borderline against white at small text sizes (4.43:1). Bump to
   #212121 for ≥7:1 and clear sailing. */
h1.onlyf_page_heading,.onlyf_page_heading{color:#212121!important}
.onlyf_card .onlyf_card-body a,.onlyf_card h3{color:#212121}
.footer-col-title{font-size:18px;margin:0 0 .5em;color:#fff;font-weight:700}

/* Ensure all interactive elements meet 44x44 tap target on mobile */
@media (pointer:coarse) {
	a,button,select,input[type=submit],input[type=button]{min-height:44px}
}

/* Hide leftover Elementor markup in case any cached page contains it */
[data-elementor-type]:empty{display:none}

/* Force font-display:swap on Dashicons (only used in dev/admin paths but
   referenced by TP CSS via @font-face). Avoids 30 ms FOIT during render. */
@font-face{font-family:dashicons;src:url("/wp-includes/fonts/dashicons.woff");font-display:swap;font-weight:normal;font-style:normal}

/* === Listing card layout fixes ============================================
   Issue: inline-element line-height was leaving a white gap between the
   card's top border and the image. The <a> wrapping the <img> defaults to
   `display: inline`, which generates a line-box with leading. Force the
   wrapping anchor to block, kill line-height on the header, and anchor
   the image to the top of its box. Applies to all cards (.promoted,
   regular, sponsored). */
.onlyf_card .onlyf_card-header {
	line-height: 0 !important;
	font-size: 0 !important;
	padding: 0 !important;
	margin: 0 !important;
}
.onlyf_card .onlyf_card-header > a {
	display: block !important;
	line-height: 0 !important;
	padding: 0 !important;
	margin: 0 !important;
}
.onlyf_card .onlyf_card-header img {
	display: block !important;
	vertical-align: top !important;
	margin: 0 !important;
	padding: 0 !important;
	object-fit: cover;
	object-position: center top;
}

/* === Listing page top: kill the Elementor container padding that creates
   the blue gap above the white content area AND inset the cards from
   their container. Zero padding-top + L/R on every Elementor wrapper
   inside .entry-content so the white card reaches the dark header bar. */
.entry-content > .elementor > .e-con,
.entry-content > .elementor > .e-con > .e-con-inner,
.entry-content > .elementor > .e-con .e-con,
.entry-content > .elementor > .e-con .e-con > .e-con-inner {
	padding-top: 0 !important;
	padding-left: 0 !important;
	padding-right: 0 !important;
}
.entry-content > .elementor .elementor-widget-shortcode,
.entry-content > .elementor .elementor-widget-shortcode > .elementor-widget-container {
	padding: 0 !important;
	margin: 0 !important;
}

/* Compress the wasted whitespace above the listing grid. The shortcode
   wraps in `.main_warp { padding: 20px 0 }` — zero out so the heading +
   subtitle sit closer to the page top. */
.main_warp {
	padding: 0 !important;
}
.onlyf_custom_heading {
	margin: 0 0 4px;
}
.onlyf_custom_heading .onlyf_page_heading,
.onlyf_custom_heading h1 {
	margin: 0;
	padding: 0;
	line-height: 1.15;
}

/* Hide the JS-relocated nls-filterbar (its pills are duplicated in the site
   header anyway). The Sort dropdown moves back into .onlyf_models_count_data
   so it lives on the SAME row as "Displaying X of Y", right-aligned. */
.nls-filterbar { display: none !important; }

/* Page header row: sort dropdown to the right of the model count line.
   Re-show the count_data's hidden desktop sort select (JS sets inline
   `display:none`; our !important external rule wins). */
.onlyf_models_count_data {
	display: flex;
	justify-content: space-between;
	align-items: center;
	flex-wrap: wrap;
	gap: 12px;
	margin: 2px 0 14px !important;
}
.onlyf_models_count_data p { margin: 0; flex: 1; }
.onlyf_models_count_data .shortw,
.onlyf_models_count_data #onlyf_short_by,
.onlyf_models_count_data select.onlyf_hide_on_mobile {
	display: inline-block !important;
	width: auto !important;
	max-width: none !important;
	font-size: 13px;
	font-weight: 600;
	padding: 6px 28px 6px 12px;
	border: 1px solid #e6eaf0;
	border-radius: 999px;
	background: #fff url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 8" fill="%23506178"><path d="M6 8 0 0h12z"/></svg>') no-repeat right 10px center/8px 6px;
	-webkit-appearance: none;
	appearance: none;
	color: #06142d;
	cursor: pointer;
}
@media (max-width: 768px) {
	.onlyf_models_count_data .shortw.onlyf_hide_on_mobile,
	.onlyf_models_count_data select.onlyf_hide_on_mobile { display: none !important; }
}

/* Featured (sponsored) card: edge-to-edge inside its column, no extra
   horizontal margin/padding. The `.cards` flex container handles the
   gap between siblings. */
.cards #onlyf-sponsored-model-container,
.onlyf_card.promoted.onlyf_large_layout {
	margin-left: 0 !important;
	margin-right: 0 !important;
}

/* Cards grid: tighten gap on mobile so we don't lose width to gutters.
   Only `.onlyf_card.promoted.onlyf_large_layout` goes full-width here —
   not `#onlyf-sponsored-model-container`, because the onlyf plugin emits
   that same id on every inline-sponsored card, and a `.cards #...` selector
   would otherwise blow every small sponsored card up to 100% width and
   orphan its would-be row-mate. Keep the yellow border + rounded corners
   intact (no border-/border-radius zeroing) so the gold frame is visible. */
@media (max-width: 768px) {
	.cards { gap: 8px !important; }
	.onlyf_card.promoted.onlyf_large_layout {
		width: 100% !important;
		max-width: 100% !important;
	}
}

/* ---------------------------------------------------------------------------
   Search autocomplete + "near me".

   The panel is anchored to .nls-input-wrap rather than to .nls-bar, because
   the bar is two different boxes depending on state: an inline flex child of
   the header normally, and a full-width absolutely-positioned slide-down panel
   once body carries .nls-search-open. Only the input wrap keeps the same
   geometry in both, so hanging the list off it is what puts the dropdown under
   the input and not under the whole header.

   Everything here is in main.css, which loads async. The list cannot be on
   screen before a visitor has focused the box, so it is never part of first
   paint and has no business in the critical block.
   --------------------------------------------------------------------------- */
.nls-input-wrap { position: relative; }

/* Near me: a pill riding at the right end of the input. It is a link, so it
   inherits the fleet's 44px coarse-pointer minimum unless told otherwise --
   which inside a 36px input would push the pill out of its own box. */
.nls-near {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	flex: 0 0 auto;
	margin-left: 6px;
	padding: 0 9px;
	height: 26px;
	min-height: 0;
	border-radius: 999px;
	background: #eef3fa;
	color: #0a6abd;
	font-size: 12px;
	font-weight: 600;
	line-height: 1;
	text-decoration: none;
	white-space: nowrap;
	transition: background .15s, color .15s;
}
.nls-near:hover,
.nls-near:focus-visible { background: #0a6abd; color: #fff; }
/* Narrow screens keep the pin and drop the word: at 360px the label is the
   difference between a usable input and a two-character one. */
@media (max-width: 480px) {
	.nls-near span { position: absolute; width: 1px; height: 1px; overflow: hidden;
		clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
	.nls-near { padding: 0 7px; }
}

.nls-ac {
	position: absolute;
	top: calc(100% + 6px);
	left: 0;
	right: 0;
	z-index: 60;
	margin: 0;
	padding: 4px;
	list-style: none;
	max-height: min(60vh, 420px);
	overflow-y: auto;
	background: #fff;
	border: 1px solid #e2e6ee;
	border-radius: 10px;
	box-shadow: 0 12px 32px rgba(10, 20, 45, .18);
	overscroll-behavior: contain;
}
.nls-ac[hidden] { display: none; }

.nls-ac-row {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 8px 10px;
	border-radius: 7px;
	cursor: pointer;
	color: #06142d;
	font-size: 14px;
	line-height: 1.25;
}
.nls-ac-row.is-active { background: #eef3fa; }
.nls-ac-ico { flex: 0 0 auto; color: #8a97ab; }
.nls-ac-row.is-active .nls-ac-ico { color: #0a6abd; }
.nls-ac-label { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nls-ac-label b { font-weight: 700; color: #0a6abd; }
.nls-ac-sub {
	flex: 0 1 auto;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	color: #7b8798;
	font-size: 12px;
}
/* The count is pushed to the far end and is the first thing allowed to
   disappear: it is the least useful part of the row on a phone. */
.nls-ac-n { margin-left: auto; padding-left: 8px; color: #99a3b3; font-size: 12px; font-variant-numeric: tabular-nums; }
@media (max-width: 420px) { .nls-ac-n { display: none; } }

/* Near me and the free-text fallback are not places, so they are separated
   from the ones that are. */
.nls-ac-near { font-weight: 600; }
.nls-ac-near .nls-ac-ico { color: #0a6abd; }
.nls-ac-query { border-top: 1px solid #eef1f6; border-radius: 0 0 7px 7px; margin-top: 2px; }
.nls-ac-query .nls-ac-label { font-style: italic; }

/* On the results page the same form is a wide block on a white background,
   so the panel needs the width of the input it hangs from and nothing more. */
.nls-search .nls-input-wrap { position: relative; }

/* The near-me control ships hidden and is revealed by search-ac.js only for a
   visitor inside the country the site covers. [hidden] needs saying explicitly
   because .nls-near sets display:inline-flex, which would otherwise win. */
.nls-near[hidden] { display: none; }

/* Section headings inside the dropdown. Small, quiet, and not clickable: they
   are role="presentation", so nothing about them should invite a click. */
.nls-ac-head {
	padding: 8px 10px 3px;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: #9aa5b5;
	cursor: default;
}
.nls-ac-head:first-child { padding-top: 4px; }
/* A place we have no listing page for: the row still leads somewhere (a radius
   listing), so it reads as a normal suggestion, just without a count. */
.nls-ac-place .nls-ac-ico { color: #b3bcc9; }