/*
 * James Retail SEO
 *
 * The heading rules below exist purely to keep the H1 change invisible.
 * Every rule on the live site that styles .avia-caption-title targets it by class
 * and never by tag, so promoting an H2 to an H1 inherits the identical styling.
 * Measured against the live site at 375px, 768px and desktop, the only property
 * that differed was margin-bottom (10px as an H2, 14px as an H1). That is pinned
 * here and nothing else needs touching.
 */

h1.avia-caption-title {
	margin-bottom: 10px;
}

/* An H1 that search engines and screen readers read but that occupies no space. */
.lk-jr-visually-hidden {
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	padding: 0 !important;
	margin: -1px !important;
	overflow: hidden !important;
	clip: rect(0 0 0 0) !important;
	clip-path: inset(50%) !important;
	white-space: nowrap !important;
	border: 0 !important;
}

/* ---------- Individual store pages ---------- */

.lk-jr-store__intro p {
	font-size: 1.05em;
}

.lk-jr-store__grid {
	display: flex;
	flex-wrap: wrap;
	gap: 30px;
	margin: 30px 0;
}

.lk-jr-store__panel {
	flex: 1 1 260px;
	min-width: 0;
}

.lk-jr-store__panel h2 {
	font-size: 1.15em;
	margin: 0 0 12px;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.lk-jr-store__address {
	font-style: normal;
	line-height: 1.7;
}

.lk-jr-store__phone,
.lk-jr-store__directions {
	margin: 12px 0 0;
}

/* Enfold sets ".entry-content-wrapper ul { list-style: outside disc }" and indents
   its list items, which beat a bare class and produced a second bullet. The
   compound selectors below outrank it without using !important. */
.lk-jr-store__features,
.entry-content-wrapper ul.lk-jr-store__features {
	list-style: none;
	margin: 0;
	padding: 0;
}

.lk-jr-store__features li,
.entry-content-wrapper ul.lk-jr-store__features li {
	list-style: none;
	margin-left: 0;
	padding: 6px 0 6px 22px;
	position: relative;
	line-height: 1.5;
}

.lk-jr-store__features li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.85em;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: currentColor;
	opacity: 0.45;
}

.lk-jr-store__back {
	margin-top: 30px;
}

/* ---------- The all-stores index on the Stores page ---------- */
/* This sits inside an Enfold colour section with a dark navy gradient background,
   while the inherited text colour is dark navy too, so anything relying on the
   theme's colours is unreadable there. The index is therefore given its own white
   panel, matching the locator's own .jrsl__panel (14px radius, same border and
   shadow) so the two read as one design. */

.lk-jr-index {
	margin: 46px 0 0;
	padding: 30px 30px 34px;
	background: #fff;
	border: 1px solid #ebebeb;
	border-radius: 14px;
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.06);
	color: #233044;
}

.lk-jr-index__head {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 4px 14px;
	padding-bottom: 18px;
	margin-bottom: 20px;
	border-bottom: 1px solid #ebebeb;
}

.lk-jr-index__title {
	margin: 0;
	font-size: 22px;
	line-height: 1.2;
	color: #233044;
}

.lk-jr-index__count {
	font-size: 13px;
	color: rgba(35, 48, 68, 0.55);
}

.lk-jr-index__grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(206px, 1fr));
	gap: 8px;
}

.lk-jr-index__card {
	display: block;
	padding: 12px 14px 13px;
	border: 1px solid #ebebeb;
	border-radius: 10px;
	background: #fff;
	text-decoration: none;
	color: inherit;
	transition: border-color 0.16s ease, background-color 0.16s ease;
}

.lk-jr-index__card:hover,
.lk-jr-index__card:focus {
	border-color: #c3d0e0;
	background: #f7f9fc;
}

.lk-jr-index__name {
	display: block;
	margin-bottom: 2px;
	font-weight: 600;
	font-size: 14.5px;
	line-height: 1.3;
	color: #233044;
}

.lk-jr-index__card:hover .lk-jr-index__name,
.lk-jr-index__card:focus .lk-jr-index__name {
	color: #1a4f8a;
}

.lk-jr-index__meta {
	display: block;
	margin-bottom: 7px;
	font-size: 12.5px;
	line-height: 1.4;
	color: rgba(35, 48, 68, 0.58);
}

/* A quiet dot rather than 39 coloured pills, which read as noise at this count. */
.lk-jr-index__tag {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 10px;
	font-weight: 500;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: rgba(35, 48, 68, 0.5);
}

.lk-jr-index__tag::before {
	content: "";
	flex: none;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: currentColor;
}

.lk-jr-index__tag--neighbourhood { color: #4a6fa1; }
.lk-jr-index__tag--transient { color: #b3703f; }

@media only screen and (max-width: 767px) {
	.lk-jr-index {
		padding: 22px 16px 24px;
	}
	.lk-jr-index__title {
		font-size: 19px;
	}
	.lk-jr-index__head {
		padding-bottom: 14px;
		margin-bottom: 14px;
	}
	.lk-jr-index__grid {
		grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
		gap: 6px;
	}
	/* Compact rows, so a single column of 39 stores is not an endless scroll. */
	.lk-jr-index__card {
		padding: 10px 12px;
	}
	.lk-jr-index__name {
		font-size: 14px;
		margin-bottom: 1px;
	}
	.lk-jr-index__meta {
		font-size: 12px;
		margin-bottom: 0;
	}
	.lk-jr-index__tag {
		font-size: 9.5px;
		margin-top: 4px;
	}
}

/* ---------- Store page template wrapper ---------- */
/* The plugin serves its own template for store pages because the theme has blog
   post elements disabled, so these few rules replace what Enfold's own single
   template would normally provide. */

.lk-jr-store-entry {
	padding: 50px 0 40px;
}

.lk-jr-store-title {
	margin: 0 0 26px;
}

.lk-jr-store-main .entry-content-header {
	margin: 0;
}