/**
 * Warrington.TV directory.
 *
 * Mobile-first, scoped to .wtv-* so nothing here can reach into Divi. Colours
 * and radii are custom properties: override them in a Divi Code module or the
 * child theme to match the site palette without touching this file.
 *
 * Typography is deliberately inherited. Divi owns the site's type; a directory
 * that sets its own font is a directory that looks bolted on.
 */

.wtv-directory,
.wtv-listing,
.wtv-back,
.wtv-page,
.wtv-page--category {
	--wtv-ink: #16202b;
	--wtv-ink-muted: #5c6b7a;
	--wtv-line: #dfe5ea;
	--wtv-surface: #fff;
	--wtv-surface-alt: #f5f7f9;
	/* One blue for everything interactive. Change it here and links, buttons
	   and focus rings all follow. */
	--wtv-accent: #3b5ba5;
	--wtv-accent-dark: #2f4a86;
	--wtv-link: var(--wtv-accent);
	--wtv-cta-bg: var(--wtv-accent);
	--wtv-cta-ink: #ffd400;
	--wtv-radius: 6px;
	--wtv-gap: 1.25rem;
}

/* Controls
   ------------------------------------------------------------------------ */

.wtv-directory__controls {
	display: grid;
	grid-template-columns: 1fr;
	gap: 0.75rem;
	margin-bottom: var(--wtv-gap);
}

.wtv-field {
	display: flex;
	flex-direction: column;
	gap: 0.35rem;
	min-width: 0;
}

.wtv-field--action {
	justify-content: flex-end;
}

.wtv-field__label {
	font-size: 0.8125rem;
	font-weight: 600;
	letter-spacing: 0.02em;
	color: var(--wtv-ink-muted);
	text-transform: uppercase;
}

.wtv-directory .wtv-input {
	width: 100%;
	padding: 0.65rem 0.75rem;
	border: 1px solid var(--wtv-line);
	border-radius: var(--wtv-radius);
	background: var(--wtv-surface);
	color: var(--wtv-ink);
	font: inherit;
	line-height: 1.4;
}

.wtv-directory .wtv-input:focus {
	outline: 2px solid var(--wtv-accent);
	outline-offset: 1px;
}

/* Previous / Next carry the same treatment as VISIT WEBSITE. Clear filters
   opts out via --ghost: it is a secondary action and should not compete. */
.wtv-directory .wtv-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 44px;
	padding: 0.7rem 1.4rem;
	border: 0;
	border-radius: var(--wtv-radius);
	background: var(--wtv-cta-bg);
	color: var(--wtv-cta-ink);
	font-family: inherit;
	font-size: 0.9375rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	line-height: 1.2;
	text-transform: uppercase;
	cursor: pointer;
}

.wtv-directory .wtv-button:hover:not(:disabled),
.wtv-directory .wtv-button:focus-visible:not(:disabled) {
	background: var(--wtv-accent-dark);
	color: var(--wtv-cta-ink);
}

/* Greyed rather than faded: yellow on blue at 45% opacity reads as a rendering
   fault, not as a disabled control. */
.wtv-directory .wtv-button:disabled {
	background: var(--wtv-surface-alt);
	color: var(--wtv-ink-muted);
	cursor: default;
}

.wtv-directory .wtv-button--ghost {
	min-height: 0;
	padding: 0.65rem 1rem;
	border: 1px solid var(--wtv-line);
	background: var(--wtv-surface-alt);
	color: var(--wtv-ink);
	font-size: inherit;
	font-weight: 400;
	letter-spacing: normal;
	text-transform: none;
}

.wtv-directory .wtv-button--ghost:hover:not(:disabled),
.wtv-directory .wtv-button--ghost:focus-visible:not(:disabled) {
	border-color: var(--wtv-accent);
	background: var(--wtv-surface-alt);
	color: var(--wtv-accent);
}

.wtv-directory .wtv-button:focus-visible {
	outline: 2px solid var(--wtv-accent);
	outline-offset: 2px;
}

/* Results
   ------------------------------------------------------------------------ */

.wtv-directory__count {
	margin: 0 0 0.75rem;
	font-size: 0.875rem;
	color: var(--wtv-ink-muted);
}

.wtv-directory__results {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--wtv-gap);
}

.wtv-directory.is-loading .wtv-directory__results {
	opacity: 0.5;
	transition: opacity 120ms ease-out;
}

.wtv-card {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	padding: 1.1rem;
	border: 1px solid var(--wtv-line);
	border-radius: var(--wtv-radius);
	background: var(--wtv-surface);
}

.wtv-card__tags,
.wtv-listing__tags {
	display: flex;
	flex-wrap: wrap;
	gap: 0.35rem;
}

.wtv-tag {
	display: inline-block;
	padding: 0.15rem 0.5rem;
	border-radius: 999px;
	background: var(--wtv-surface-alt);
	color: var(--wtv-ink-muted);
	font-size: 0.75rem;
	line-height: 1.6;
	text-decoration: none;
}

/* Tags are links on a listing page and plain spans on a card, so the colour
   follows the element: blue means you can click it. */
a.wtv-tag {
	color: var(--wtv-link);
	font-weight: 600;
}

a.wtv-tag:hover,
a.wtv-tag:focus-visible {
	text-decoration: underline;
}

.wtv-card__title {
	margin: 0;
	font-size: 1.1rem;
	line-height: 1.3;
}

/* Business names are the primary click target on a card, so they carry the
   link colour rather than the body ink. */
.wtv-card__title a {
	color: var(--wtv-link);
	text-decoration: none;
}

.wtv-card__title a:hover,
.wtv-card__title a:focus-visible {
	text-decoration: underline;
}

/* The excerpt is already cut to length server-side, so no clamping is needed
   here — which means the inline Read more link is always visible rather than
   being hidden inside an overflow. */
.wtv-card__description {
	margin: 0;
	color: var(--wtv-ink);
	font-size: 0.9375rem;
	line-height: 1.55;
}

.wtv-card__readmore {
	color: var(--wtv-link);
	font-weight: 600;
	text-decoration: none;
	white-space: nowrap;
}

.wtv-card__readmore:hover,
.wtv-card__readmore:focus-visible {
	text-decoration: underline;
}

.wtv-card__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.75rem;
	margin-top: auto;
	padding-top: 0.5rem;
	border-top: 1px solid var(--wtv-line);
	font-size: 0.875rem;
}

.wtv-card__link,
.wtv-card__more {
	color: var(--wtv-link);
	text-decoration: none;
}

.wtv-card__more {
	margin-left: auto;
	color: var(--wtv-link);
	font-weight: 600;
	white-space: nowrap;
}

.wtv-card__link:hover,
.wtv-card__link:focus-visible,
.wtv-card__more:hover,
.wtv-card__more:focus-visible {
	text-decoration: underline;
}

.wtv-directory__empty,
.wtv-directory__loading {
	margin: 0;
	padding: 1.5rem;
	border: 1px dashed var(--wtv-line);
	border-radius: var(--wtv-radius);
	color: var(--wtv-ink-muted);
	text-align: center;
}

.wtv-directory__category-list {
	margin: 0.5rem 0 0;
	padding-left: 1.25rem;
}

/* Pagination
   ------------------------------------------------------------------------ */

.wtv-directory__pager {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 0.75rem 1rem;
	margin-top: var(--wtv-gap);
}

/* Declared after the display rule: a display value on the same element beats
   the browser's default [hidden] styling, so a single page of results was
   still showing Previous and Next. */
.wtv-directory__pager[hidden] {
	display: none;
}

.wtv-directory__page {
	font-size: 0.875rem;
	color: var(--wtv-ink-muted);
}

/* Back link
   ------------------------------------------------------------------------ */

.wtv-back {
	margin: 0 0 1.25rem;
}

.wtv-back__link {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	padding: 0.5rem 0.9rem;
	border: 1px solid var(--wtv-line);
	border-radius: var(--wtv-radius);
	background: var(--wtv-surface-alt);
	color: var(--wtv-link);
	font-size: 0.875rem;
	font-weight: 600;
	line-height: 1.4;
	text-decoration: none;
}

.wtv-back__link:hover,
.wtv-back__link:focus-visible {
	border-color: var(--wtv-link);
	text-decoration: none;
}

.wtv-back__arrow {
	font-size: 1em;
	line-height: 1;
}

/* Single listing
   ------------------------------------------------------------------------ */

.wtv-page__inner {
	max-width: 900px;
	margin: 0 auto;
	padding: 2rem 1.25rem 3rem;
}

.wtv-listing__title,
.wtv-page__title {
	margin: 0 0 0.75rem;
}

.wtv-listing__description {
	margin: 1rem 0;
	font-size: 1.0625rem;
	line-height: 1.6;
}

.wtv-listing__details {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1rem;
	margin-top: 1.5rem;
	padding: 1.25rem;
	border: 1px solid var(--wtv-line);
	border-radius: var(--wtv-radius);
	background: var(--wtv-surface-alt);
}

.wtv-detail {
	display: flex;
	flex-direction: column;
	gap: 0.2rem;
}

.wtv-detail__label {
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.04em;
	color: var(--wtv-ink-muted);
	text-transform: uppercase;
}

.wtv-detail__value {
	color: var(--wtv-ink);
	line-height: 1.5;
}

.wtv-detail__value a {
	color: var(--wtv-link);
	text-decoration: none;
	overflow-wrap: anywhere;
}

.wtv-detail__value a:hover {
	text-decoration: underline;
}

/* Visit website call to action
   ------------------------------------------------------------------------ */

.wtv-listing__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	margin-top: 1.25rem;
}

.wtv-listing .wtv-visit {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 44px;
	padding: 0.7rem 1.4rem;
	border: 0;
	border-radius: var(--wtv-radius);
	background: var(--wtv-cta-bg);
	color: var(--wtv-cta-ink);
	font-size: 0.9375rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	line-height: 1.2;
	text-decoration: none;
	text-transform: uppercase;
}

.wtv-listing .wtv-visit:hover,
.wtv-listing .wtv-visit:focus-visible {
	background: var(--wtv-accent-dark);
	color: var(--wtv-cta-ink);
	text-decoration: none;
}

.wtv-listing .wtv-visit:focus-visible {
	outline: 2px solid var(--wtv-cta-bg);
	outline-offset: 2px;
}

/* Divi ships this class, but the listing page can render outside a Divi
   layout, so the plugin cannot assume it exists. */
.wtv-listing .screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	border: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

/* Wider screens
   ------------------------------------------------------------------------ */

@media (min-width: 600px) {
	.wtv-directory__results {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.wtv-listing__details {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 900px) {
	.wtv-directory__controls {
		grid-template-columns: 2fr 2fr auto;
		align-items: end;
	}

	.wtv-directory__results {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

@media (prefers-reduced-motion: reduce) {
	.wtv-directory.is-loading .wtv-directory__results {
		transition: none;
	}
}

/* Contact form
   ------------------------------------------------------------------------ */

.wtv-contact {
	padding: 0;
	border: 0;
	background: none;
	color: var(--wtv-link);
	font: inherit;
	cursor: pointer;
}

.wtv-contact:hover,
.wtv-contact:focus-visible {
	text-decoration: underline;
}

.wtv-listing .wtv-contact--primary {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 44px;
	padding: 0.7rem 1.4rem;
	border: 2px solid var(--wtv-cta-bg);
	border-radius: var(--wtv-radius);
	background: var(--wtv-surface);
	color: var(--wtv-cta-bg);
	font-size: 0.9375rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	line-height: 1.2;
	text-transform: uppercase;
}

.wtv-listing .wtv-contact--primary:hover,
.wtv-listing .wtv-contact--primary:focus-visible {
	background: var(--wtv-cta-bg);
	color: var(--wtv-cta-ink);
	text-decoration: none;
}

/* Modal
   ------------------------------------------------------------------------ */

.wtv-modal {
	--wtv-ink: #16202b;
	--wtv-ink-muted: #5c6b7a;
	--wtv-line: #dfe5ea;
	--wtv-surface: #fff;
	--wtv-surface-alt: #f5f7f9;
	--wtv-accent: #3b5ba5;
	--wtv-accent-dark: #2f4a86;
	--wtv-link: var(--wtv-accent);
	--wtv-cta-bg: var(--wtv-accent);
	--wtv-cta-ink: #ffd400;
	--wtv-radius: 6px;

	position: fixed;
	z-index: 100000;
	display: flex;
	align-items: flex-start;
	justify-content: center;
	padding: 1rem;
	inset: 0;
	overflow-y: auto;
}

.wtv-modal[hidden] {
	display: none;
}

body.wtv-modal-open {
	overflow: hidden;
}

.wtv-modal__backdrop {
	position: fixed;
	background: rgba(10, 18, 28, 0.6);
	inset: 0;
}

.wtv-modal__panel {
	position: relative;
	z-index: 1;
	width: 100%;
	max-width: 520px;
	margin: auto;
	padding: 1.5rem;
	border-radius: var(--wtv-radius);
	background: var(--wtv-surface);
	color: var(--wtv-ink);
	box-shadow: 0 18px 50px rgba(10, 18, 28, 0.3);
}

.wtv-modal__close {
	position: absolute;
	top: 0.5rem;
	right: 0.5rem;
	width: 40px;
	height: 40px;
	border: 0;
	background: none;
	color: var(--wtv-ink-muted);
	font-size: 1.5rem;
	line-height: 1;
	cursor: pointer;
}

.wtv-modal__title {
	margin: 0 2rem 0.5rem 0;
	font-size: 1.25rem;
	line-height: 1.3;
}

.wtv-modal__intro {
	margin: 0 0 1rem;
	color: var(--wtv-ink-muted);
	font-size: 0.9375rem;
	line-height: 1.5;
}

.wtv-modal .wtv-field {
	margin-bottom: 0.9rem;
}

.wtv-modal .wtv-input {
	width: 100%;
	padding: 0.65rem 0.75rem;
	border: 1px solid var(--wtv-line);
	border-radius: var(--wtv-radius);
	background: var(--wtv-surface);
	color: var(--wtv-ink);
	font: inherit;
	line-height: 1.4;
}

.wtv-modal .wtv-input:focus {
	outline: 2px solid var(--wtv-accent);
	outline-offset: 1px;
}

.wtv-modal .wtv-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	min-height: 44px;
	padding: 0.7rem 1.4rem;
	border: 0;
	border-radius: var(--wtv-radius);
	background: var(--wtv-cta-bg);
	color: var(--wtv-cta-ink);
	font-family: inherit;
	font-size: 0.9375rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	cursor: pointer;
}

.wtv-modal .wtv-button:hover:not(:disabled) {
	background: var(--wtv-accent-dark);
}

.wtv-modal .wtv-button:disabled {
	background: var(--wtv-surface-alt);
	color: var(--wtv-ink-muted);
	cursor: default;
}

.wtv-modal .wtv-button--ghost {
	border: 1px solid var(--wtv-line);
	background: var(--wtv-surface-alt);
	color: var(--wtv-ink);
	font-weight: 400;
	letter-spacing: normal;
	text-transform: none;
}

.wtv-modal__status {
	margin: 0 0 0.75rem;
	font-size: 0.875rem;
}

.wtv-modal__status.is-error {
	color: #b32d2e;
	font-weight: 600;
}

.wtv-modal__success {
	margin: 0 0 1rem;
	font-size: 1.0625rem;
	line-height: 1.5;
}

.wtv-modal__privacy {
	margin: 0.9rem 0 0;
	color: var(--wtv-ink-muted);
	font-size: 0.8125rem;
	line-height: 1.5;
}

.wtv-turnstile {
	margin-bottom: 0.9rem;
}

/* Honeypot. Not type=hidden — bots skip those, and this needs filling in. */
.wtv-hp {
	position: absolute !important;
	width: 1px;
	height: 1px;
	margin: -1px;
	overflow: hidden;
	clip-path: inset(50%);
}

@media (min-width: 600px) {
	.wtv-modal {
		align-items: center;
		padding: 2rem;
	}
}

/* Customer account pages
   ------------------------------------------------------------------------ */

.wtv-account,
.wtv-page--account {
	--wtv-ink: #16202b;
	--wtv-ink-muted: #5c6b7a;
	--wtv-line: #dfe5ea;
	--wtv-surface: #fff;
	--wtv-surface-alt: #f5f7f9;
	--wtv-accent: #3b5ba5;
	--wtv-accent-dark: #2f4a86;
	--wtv-link: var(--wtv-accent);
	--wtv-cta-bg: var(--wtv-accent);
	--wtv-cta-ink: #ffd400;
	--wtv-radius: 6px;
}

.wtv-page__inner--narrow {
	max-width: 620px;
}

.wtv-page__intro {
	margin: 0 0 1.5rem;
	color: var(--wtv-ink-muted);
	line-height: 1.6;
}

.wtv-account__intro {
	margin: 0 0 1.5rem;
	color: var(--wtv-ink-muted);
	line-height: 1.6;
}

.wtv-account__business {
	margin: 0;
	font-size: 1.125rem;
	font-weight: 700;
}

.wtv-account__header {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: 0.75rem;
}

.wtv-account__signout {
	color: var(--wtv-link);
	font-size: 0.875rem;
	font-weight: 600;
	text-decoration: none;
}

.wtv-account__signout:hover {
	text-decoration: underline;
}

.wtv-account .wtv-field {
	display: flex;
	flex-direction: column;
	gap: 0.35rem;
	margin: 0 0 1.25rem;
	padding: 0;
	border: 0;
}

.wtv-account .wtv-field__label {
	font-size: 0.8125rem;
	font-weight: 600;
	letter-spacing: 0.02em;
	color: var(--wtv-ink-muted);
	text-transform: uppercase;
}

.wtv-account .wtv-input {
	width: 100%;
	padding: 0.65rem 0.75rem;
	border: 1px solid var(--wtv-line);
	border-radius: var(--wtv-radius);
	background: var(--wtv-surface);
	color: var(--wtv-ink);
	font: inherit;
	line-height: 1.4;
}

.wtv-account .wtv-input:focus {
	outline: 2px solid var(--wtv-accent);
	outline-offset: 1px;
}

.wtv-field__hint {
	color: var(--wtv-ink-muted);
	font-size: 0.8125rem;
	line-height: 1.5;
}

.wtv-field__hint.is-error,
.wtv-account__status.is-error {
	color: #b32d2e;
	font-weight: 600;
}

.wtv-account__categories {
	max-height: 260px;
	margin-top: 0.5rem;
	padding: 0.5rem;
	border: 1px solid var(--wtv-line);
	border-radius: var(--wtv-radius);
	overflow-y: auto;
	background: var(--wtv-surface);
}

.wtv-account .wtv-category {
	display: block;
	padding: 0.2rem 0;
	line-height: 1.5;
}

.wtv-account .wtv-category[hidden] {
	display: none;
}

.wtv-account__status {
	margin: 0 0 0.75rem;
	font-size: 0.9375rem;
	line-height: 1.5;
}

.wtv-account .wtv-cta {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 44px;
	padding: 0.7rem 1.4rem;
	border: 0;
	border-radius: var(--wtv-radius);
	background: var(--wtv-cta-bg);
	color: var(--wtv-cta-ink);
	font-family: inherit;
	font-size: 0.9375rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	line-height: 1.2;
	text-decoration: none;
	text-transform: uppercase;
	cursor: pointer;
}

.wtv-account .wtv-cta:hover:not(:disabled),
.wtv-account .wtv-cta:focus-visible:not(:disabled) {
	background: var(--wtv-accent-dark);
	color: var(--wtv-cta-ink);
}

.wtv-account .wtv-cta:disabled {
	background: var(--wtv-surface-alt);
	color: var(--wtv-ink-muted);
	cursor: default;
}

.wtv-alert {
	margin: 0 0 1.25rem;
	padding: 0.9rem 1rem;
	border-left: 4px solid var(--wtv-line);
	border-radius: var(--wtv-radius);
	background: var(--wtv-surface-alt);
	line-height: 1.5;
}

.wtv-alert--success {
	border-left-color: #00733f;
	background: #edfaef;
}

.wtv-alert--warning {
	border-left-color: #8a5a00;
	background: #fcf3e6;
}

.wtv-alert--error {
	border-left-color: #b32d2e;
	background: #fcebeb;
}

.wtv-account__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.75rem;
}

.wtv-account .wtv-cta--ghost {
	border: 1px solid var(--wtv-line);
	background: var(--wtv-surface-alt);
	color: var(--wtv-ink);
	text-decoration: none;
}

.wtv-account .wtv-cta--ghost:hover,
.wtv-account .wtv-cta--ghost:focus-visible {
	border-color: var(--wtv-accent);
	background: var(--wtv-surface-alt);
	color: var(--wtv-accent);
}

.wtv-account .wtv-cta[hidden] {
	display: none;
}

/* Signup
   ------------------------------------------------------------------------ */

.wtv-field--check label {
	display: flex;
	align-items: flex-start;
	gap: 0.6rem;
	line-height: 1.5;
}

.wtv-field--check input {
	margin-top: 0.25rem;
	flex: 0 0 auto;
}

.wtv-signup .wtv-turnstile {
	margin-bottom: 1rem;
}