/* 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;
	}
}