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

/* Page header row: sort dropdown to the right of the model count line */
.onlyf_models_count_data {
	display: flex;
	justify-content: space-between;
	align-items: center;
	flex-wrap: wrap;
	gap: 12px;
	margin: 4px 0 12px;
}
.onlyf_models_count_data p { margin: 0; }

/* 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-top: 0 !important;
	padding-left: 0 !important;
	padding-right: 0 !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. */
@media (max-width: 768px) {
	.cards { gap: 8px !important; }
	.cards #onlyf-sponsored-model-container,
	.onlyf_card.promoted.onlyf_large_layout {
		width: 100% !important;
		max-width: 100% !important;
		border-left-width: 0;
		border-right-width: 0;
		border-radius: 0;
	}
}