/*
 * Outrank Directory — single listing template styling.
 * Enqueued only on single `outrank_listing` views by Template_Loader
 * (see includes/class-template-loader.php). Layout/search/grid and
 * submission-form styling live separately in public/css/public.css.
 */

/*
 * Settings > Appearance (font family / text / heading color) — same
 * `:root` custom properties and `[class*="outrank-directory"]` approach as
 * public/css/public.css (see the longer comment there); duplicated here
 * rather than shared so this file stays self-contained regardless of
 * whether public.css is also loaded on a given page (Template_Loader
 * always enqueues both together today, but this file shouldn't depend on
 * that staying true). Accent color is used sparingly in this file — just
 * the active hero-slider thumbnail's border — since the single listing
 * page otherwise has no buttons that use the plugin's blue accent.
 */
[class*="outrank-directory"] {
	font-family: var(--outrank-font-family, inherit);
	color: var(--outrank-text-color, inherit);
}

[class*="outrank-directory"] h1,
[class*="outrank-directory"] h2,
[class*="outrank-directory"] h3,
[class*="outrank-directory"] h4 {
	color: var(--outrank-heading-color, inherit);
}

.outrank-directory-single-wrap {
	max-width: 1120px;
	margin: 0 auto;
	padding: 32px 20px 64px;
}

/* Sidebar (title, rating/views, address/email/phone/website, hours) +
   main column (photo, badges, description, features, video, gallery,
   map, reviews) — sidebar first so it reads left-to-right, matching how
   they're placed in the DOM. */

.outrank-directory-listing-layout {
	display: grid;
	grid-template-columns: 320px minmax(0, 1fr);
	gap: 36px;
	/* `stretch` (the grid default) rather than `start`: the sidebar <aside>
	   needs to be exactly as tall as the main column for the sidebar
	   card's `position: sticky` below to have any room to actually stick
	   while the page scrolls — with `start`, the aside would shrink to
	   just the card's own height, leaving sticky nothing to stick within
	   (it'd behave identically to `position: static`). */
	align-items: stretch;
}

@media (max-width: 860px) {
	.outrank-directory-listing-layout {
		grid-template-columns: 1fr;
	}
}

/* Sidebar */

.outrank-directory-sidebar-card {
	border: 1px solid #e5e7eb;
	border-radius: 14px;
	padding: 24px;
	background: #fff;
	position: sticky;
	top: 24px;
}

@media (max-width: 860px) {
	.outrank-directory-sidebar-card {
		position: static;
	}
}

.outrank-directory-sidebar-title {
	font-size: clamp(24px, 3vw, 32px);
	line-height: 1.2;
	margin: 0 0 10px;
}

.outrank-directory-sidebar-rating {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
	margin-bottom: 16px;
	font-size: 14px;
}

.outrank-directory-sidebar-rating .outrank-directory-rating-count {
	color: #667085;
}

.outrank-directory-sidebar-rating .outrank-directory-views {
	color: #98a2b3;
	font-size: 13px;
}

.outrank-directory-meta-list {
	list-style: none;
	margin: 0 0 18px;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.outrank-directory-meta-row {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	font-size: 14px;
	line-height: 1.5;
}

.outrank-directory-meta-icon {
	flex-shrink: 0;
	font-size: 15px;
}

.outrank-directory-meta-address {
	color: #344054;
}

.outrank-directory-meta-phone,
.outrank-directory-meta-email,
.outrank-directory-meta-website {
	color: #101828;
	text-decoration: none;
	font-weight: 600;
	word-break: break-word;
}

.outrank-directory-meta-phone:hover,
.outrank-directory-meta-email:hover,
.outrank-directory-meta-website:hover {
	text-decoration: underline;
}

/* Address-as-map-trigger — a plain <button> reset to look like the
   address text next to it, styled with a hover underline so it still
   reads as clickable. Opens the "Location" modal built by
   initLocationModal() in public/js/public.js. */

.outrank-directory-address-map-trigger {
	background: none;
	border: none;
	padding: 0;
	margin: 0;
	font: inherit;
	color: #344054;
	text-align: left;
	cursor: pointer;
}

.outrank-directory-address-map-trigger:hover {
	text-decoration: underline;
}

/* Location modal — hidden by default; initLocationModal() toggles
   `.is-open` and swaps the iframe's src on open/close. */

.outrank-directory-location-modal-overlay {
	position: fixed;
	inset: 0;
	z-index: 100000;
	display: none;
	align-items: center;
	justify-content: center;
	background: rgba(15, 23, 42, 0.6);
	padding: 20px;
}

.outrank-directory-location-modal-overlay.is-open {
	display: flex;
}

.outrank-directory-location-modal {
	width: 100%;
	max-width: 640px;
	max-height: 90vh;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	background: #fff;
	border-radius: 12px;
	box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
}

.outrank-directory-location-modal-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 16px 20px;
	border-bottom: 1px solid #e5e7eb;
}

.outrank-directory-location-modal-header h2 {
	margin: 0;
	font-size: 18px;
}

.outrank-directory-location-modal-close {
	background: none;
	border: none;
	padding: 4px;
	font-size: 18px;
	line-height: 1;
	color: #667085;
	cursor: pointer;
}

.outrank-directory-location-modal-close:hover {
	color: #101828;
}

.outrank-directory-location-modal .outrank-directory-map-wrap {
	border-radius: 0;
	margin: 0;
}

.outrank-directory-hours h3 {
	font-size: 15px;
	margin: 18px 0 10px;
	border-top: 1px solid #e5e7eb;
	padding-top: 16px;
}

.outrank-directory-hours-table {
	width: 100%;
	border-collapse: collapse;
	font-size: 13px;
}

.outrank-directory-hours-table th {
	text-align: left;
	font-weight: 600;
	padding: 4px 0;
	width: 45%;
	color: #667085;
}

.outrank-directory-hours-table td {
	padding: 4px 0;
	text-align: right;
}

/* Main column */

.outrank-directory-listing-thumb {
	position: relative;
	width: 100%;
	margin-bottom: 20px;
}

/* Single-photo case: Helpers::renderSingleHeroSlider() returns a bare
   <img> (no slider chrome) when the listing has exactly one photo total
   across its featured image + gallery — styled directly since there's no
   thumbnail strip below it to leave room for. */
.outrank-directory-listing-thumb > img {
	display: block;
	width: 100%;
	max-height: 420px;
	object-fit: cover;
	border-radius: 14px;
}

/* Hero slider — 2+ photos (featured image + gallery, combined and
   deduplicated by Helpers::renderSingleHeroSlider()). Reuses the same
   .outrank-directory-slider/-slide/-arrow classes and click handling as
   the card grid's photo slider (see public/js/public.js' initSliders()),
   with a thumbnail nav row (.outrank-directory-hero-thumbs) added below
   instead of the card version's dots. */

.outrank-directory-hero-slider {
	position: relative;
}

.outrank-directory-hero-slider .outrank-directory-slider-track {
	position: relative;
	width: 100%;
	height: 420px;
	overflow: hidden;
	border-radius: 14px;
	background: #f2f4f7;
}

.outrank-directory-hero-slider .outrank-directory-slider-slide {
	width: 100%;
	height: 100%;
}

.outrank-directory-hero-slider .outrank-directory-slider-slide img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

@media (max-width: 640px) {
	.outrank-directory-hero-slider .outrank-directory-slider-track {
		height: 260px;
	}
}

.outrank-directory-hero-thumbs {
	display: flex;
	gap: 8px;
	margin-top: 10px;
	overflow-x: auto;
	padding-bottom: 2px;
}

.outrank-directory-slider-thumb {
	flex: 0 0 72px;
	width: 72px;
	height: 54px;
	padding: 0;
	border: 2px solid transparent;
	border-radius: 8px;
	overflow: hidden;
	cursor: pointer;
	background: none;
	opacity: 0.7;
	transition: opacity 0.15s ease, border-color 0.15s ease;
}

.outrank-directory-slider-thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.outrank-directory-slider-thumb:hover {
	opacity: 1;
}

.outrank-directory-slider-thumb.is-active {
	opacity: 1;
	border-color: var(--outrank-accent-color, #1d4ed8);
}

/* .outrank-directory-favorite-button's base look comes from
   public/css/public.css (also enqueued on single views); this just
   overlays it on the listing photo the same way it overlays a card. */
.outrank-directory-listing-thumb > .outrank-directory-favorite-button {
	position: absolute;
	top: 14px;
	right: 14px;
	z-index: 2;
	background: rgba(255, 255, 255, 0.9);
	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15);
}

/* No featured image: the favorite button falls back to its plain inline
   look (from public/css/public.css) right above the badges/description
   instead of overlaying a photo. */
.outrank-directory-main > .outrank-directory-favorite-button {
	margin-bottom: 12px;
}

.outrank-directory-badges {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-bottom: 8px;
}

.outrank-directory-badge {
	display: inline-flex;
	align-items: center;
	font-size: 12px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	padding: 4px 12px;
	border-radius: 999px;
}

.outrank-directory-badge-category {
	background: #eef2ff;
	color: #3730a3;
}

.outrank-directory-badge-location {
	background: #ecfdf3;
	color: #027a48;
}

.outrank-directory-badge-tag {
	background: #fef6ee;
	color: #b93815;
}

/* Directory Builder archive chrome (templates/builder-listing-loop.php) */

.outrank-directory-archive-header {
	max-width: 1120px;
	margin: 0 auto 32px;
	padding: 0 20px;
}

.outrank-directory-archive-title {
	font-size: clamp(26px, 4vw, 38px);
	line-height: 1.15;
	margin: 0 0 10px;
}

.outrank-directory-archive-description {
	font-size: 15px;
	line-height: 1.6;
	color: #667085;
}

.outrank-directory-archive-description > :first-child {
	margin-top: 0;
}

.outrank-directory-listing-content {
	line-height: 1.7;
	font-size: 16px;
}

.outrank-directory-listing-content > :first-child {
	margin-top: 0;
}

.outrank-directory-listing-section {
	margin-top: 32px;
}

.outrank-directory-listing-section h2 {
	font-size: 20px;
	margin-bottom: 14px;
}

/* Features */

.outrank-directory-features-list {
	margin: 0;
	padding-left: 20px;
	display: flex;
	flex-direction: column;
	gap: 10px;
	font-size: 15px;
	line-height: 1.6;
	color: #344054;
}

.outrank-directory-features-list strong {
	color: #101828;
}

/* Responsive video player */

.outrank-directory-video-wrap {
	position: relative;
	width: 100%;
	height: 0;
	padding-bottom: 56.25%;
	border-radius: 10px;
	overflow: hidden;
	background: #000;
}

.outrank-directory-video-wrap iframe,
.outrank-directory-video-wrap embed,
.outrank-directory-video-wrap object {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	border: 0;
}

/* Photo gallery */

.outrank-directory-gallery-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
	gap: 12px;
}

.outrank-directory-gallery-grid img {
	width: 100%;
	height: 140px;
	object-fit: cover;
	border-radius: 10px;
	display: block;
	transition: transform 0.15s ease;
}

.outrank-directory-gallery-lightbox:hover img {
	transform: scale(1.03);
}

/* Location map */

.outrank-directory-map-wrap {
	position: relative;
	width: 100%;
	height: 0;
	padding-bottom: 45%;
	border-radius: 10px;
	overflow: hidden;
	background: #f2f4f7;
}

.outrank-directory-map-wrap iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	border: 0;
}

/* Reviews */

.outrank-directory-review-summary {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-bottom: 14px;
}

.outrank-directory-review-summary h2 {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0;
}

.outrank-directory-review-summary-icon {
	color: #f59e0b;
}

.outrank-directory-write-review-button {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 10px 18px;
	border-radius: 8px;
	background: #1f2937;
	color: #fff;
	font-size: 13px;
	font-weight: 600;
	text-decoration: none;
	white-space: nowrap;
}

.outrank-directory-write-review-button:hover {
	background: #111827;
	color: #fff;
}

.outrank-directory-reviews-empty {
	color: #667085;
	font-size: 14px;
}

.outrank-directory-reviews-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 18px;
}

.outrank-directory-review-item {
	border: 1px solid #e5e7eb;
	border-radius: 10px;
	padding: 14px 16px;
}

.outrank-directory-review-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-bottom: 8px;
}

.outrank-directory-review-author {
	font-weight: 600;
	font-size: 14px;
}

.outrank-directory-review-text {
	margin: 0;
	font-size: 14px;
	line-height: 1.6;
	color: #344054;
}

.outrank-directory-leave-review {
	margin-top: 32px;
	padding-top: 24px;
	border-top: 1px solid #e5e7eb;
}

.outrank-directory-leave-review h3 {
	font-size: 18px;
	margin: 0 0 14px;
}

.outrank-directory-review-form p,
.outrank-directory-review-form fieldset {
	margin-bottom: 16px;
}

.outrank-directory-review-form label {
	display: block;
	font-weight: 600;
	margin-bottom: 4px;
	font-size: 14px;
}

.outrank-directory-review-form input[type="text"],
.outrank-directory-review-form select,
.outrank-directory-review-form textarea {
	width: 100%;
	max-width: 480px;
	padding: 8px 10px;
	border: 1px solid #d0d5dd;
	border-radius: 6px;
	font-size: 14px;
	box-sizing: border-box;
}

.outrank-directory-review-rating-field select {
	max-width: 220px;
}