/**
 * ACB Service Area Section
 *
 * Scoped under .acb-sa. Three traps this site has already paid for, all
 * guarded below:
 *
 * 1. Scoped resets outrank component rules. `.acb-sa a{color:inherit}` is
 *    (0,1,1) and silently beats `.acb-sa__link{...}` at (0,1,0). Resets here
 *    are wrapped in :where() so they carry zero specificity. (Cost the
 *    acb-footer phone and email colours.)
 * 2. Astra's button and input rules fight anything unscoped, and its padding
 *    plus box-sizing floors an unsized SVG at zero width. Every control below
 *    is addressed at (0,2,0) and every SVG gets an explicit width/height.
 * 3. Colours are tokens so a brand change is one block, not a hunt.
 */

.acb-sa {
	/* Brand Bible palette, exact values. The design shipped near-misses of all
	   three (#4a90d9, #1f3a5f, #f6c343); snapped here. */
	--acb-sa-blue: #4790cd;        /* Sky Blue */
	--acb-sa-navy: #223e5a;        /* Deep Navy */
	--acb-sa-yellow: #ffcd47;      /* Sunshine Yellow */

	/* Derived, each one measured against WCAG AA rather than eyeballed. */
	--acb-sa-check: #223e5a;       /* Deep Navy, 11.03:1 with white. Sky Blue would be 3.42:1 and fail. */
	--acb-sa-check-hover: #1a3049;
	--acb-sa-check-edge: #16283b;   /* the pressed-button edge under the mobile CTA */
	--acb-sa-yellow-hover: #f2be2e;
	--acb-sa-caveat-bar: #c37c1c;   /* 3.03:1 on the green panel, so the ferry notice has an edge */
	--acb-sa-yellow-edge: #b58400;  /* 3.01:1 on the result panels, so the yellow CTA still reads as a button */
	--acb-sa-heading: #3b5a8c;     /* 6.18:1 on the section background */
	--acb-sa-body: #333333;        /* 11.25:1 */
	--acb-sa-muted: #5a6474;       /* 5.33:1 */
	--acb-sa-hint: #75767c;        /* Slate Grey darkened to 4.53:1; brand #7A7B81 is 4.20:1 */
	--acb-sa-placeholder: #667488; /* 4.51:1; the design's #9aa4b3 was 2.39:1 */

	--acb-sa-bg: #eef2f9;
	--acb-sa-surface: #ffffff;
	--acb-sa-field: #f7f9fc;
	--acb-sa-line: #cfd8e6;
	--acb-sa-rule: #e2e7ef;

	/* Map */
	--acb-sa-out: #d5dbe5;
	--acb-sa-out-2: #c3cbd8;
	--acb-sa-context: #f1f4f9;

	/* Result states */
	--acb-sa-yes-bg: #e8f6ee; --acb-sa-yes: #1b5e3a; --acb-sa-yes-dot: #2e9e5b;
	--acb-sa-no-bg: #fdf1e4;  --acb-sa-no: #7a4a12;  --acb-sa-no-dot: #e0932a;
	--acb-sa-err-bg: #f1f3f7; --acb-sa-err: #3b4654; --acb-sa-err-dot: #8a95a6;

	/* The Brand Bible moved off Raleway to Roboto; the design still asked for
	   Raleway on headings. Swap this one token to go back. */
	--acb-sa-font: Roboto, Helvetica, Arial, sans-serif;
	--acb-sa-font-head: Roboto, Helvetica, Arial, sans-serif;

	background: var(--acb-sa-bg);
	padding: 72px 24px;
	font-family: var(--acb-sa-font);
	color: var(--acb-sa-body);
	-webkit-font-smoothing: antialiased;
}

/* Zero-specificity resets, see note 1. */
:where(.acb-sa, .acb-sa *, .acb-sa *::before, .acb-sa *::after) { box-sizing: border-box; }
:where(.acb-sa p, .acb-sa h2) { margin: 0; padding: 0; }
:where(.acb-sa a) { text-decoration: none; }
:where(.acb-sa svg) { display: block; }

.acb-sa__inner {
	max-width: 1180px;
	margin: 0 auto;
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: 56px;
	align-items: center;
}

/* Mobile-only furniture. Hidden by default, switched on in the 860px block. */
.acb-sa .acb-checker__trust { display: none; }
@media (min-width: 861px) { .acb-sa .acb-checker__sub { display: none; } }

.acb-sa__h2 {
	font-family: var(--acb-sa-font-head);
	font-weight: 700;
	font-size: clamp(30px, 3.2vw, 42px);
	line-height: 1.15;
	color: var(--acb-sa-heading);
	margin: 0 0 18px;
	text-wrap: pretty;
}
.acb-sa__h2 em { font-style: normal; color: var(--acb-sa-blue); }
.acb-sa__lead { font-size: 18px; line-height: 1.6; margin: 0 0 12px; color: var(--acb-sa-body); text-wrap: pretty; }
.acb-sa__lead strong { font-weight: 500; color: var(--acb-sa-navy); }
.acb-sa__note { font-size: 15px; line-height: 1.6; color: var(--acb-sa-muted); margin: 0 0 28px; }

/* ---------- Postcode checker ---------- */

.acb-sa .acb-checker {
	background: var(--acb-sa-surface);
	border-radius: 16px;
	padding: 24px;
	box-shadow: 0 6px 24px rgba(31, 58, 95, .1);
	margin: 0;
}
.acb-sa .acb-checker__label {
	display: block;
	font-weight: 500;
	font-size: 16px;
	color: var(--acb-sa-navy);
	margin-bottom: 10px;
}
.acb-sa .acb-checker__row { display: flex; gap: 10px; flex-wrap: wrap; }

/* (0,2,0) so Astra's input rules lose. Every box property is stated. */
.acb-sa .acb-checker__input {
	flex: 1 1 180px;
	min-width: 0;
	width: auto;
	height: 54px;
	margin: 0;
	font: inherit;
	font-size: 18px;
	line-height: normal;
	letter-spacing: .04em;
	text-transform: uppercase;
	padding: 0 16px;
	border: 2px solid var(--acb-sa-line);
	border-radius: 10px;
	color: var(--acb-sa-navy);
	background: var(--acb-sa-field);
	box-shadow: none;
	outline: none;
}
.acb-sa .acb-checker__input:focus,
.acb-sa .acb-checker__input:focus-visible {
	border-color: var(--acb-sa-blue);
	background: var(--acb-sa-surface);
	box-shadow: 0 0 0 3px rgba(71, 144, 205, .28);
}
.acb-sa .acb-checker__input::placeholder {
	text-transform: none;
	letter-spacing: 0;
	color: var(--acb-sa-placeholder);
	opacity: 1;
}

.acb-sa .acb-checker__btn {
	height: 54px;
	min-height: 0;
	padding: 0 22px;
	margin: 0;
	border: 0;
	border-radius: 10px;
	background: var(--acb-sa-check);
	color: #fff;
	font: inherit;
	font-weight: 500;
	font-size: 16px;
	line-height: normal;
	text-transform: none;
	letter-spacing: normal;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	white-space: nowrap;
	box-shadow: none;
}
.acb-sa .acb-checker__btn:hover,
.acb-sa .acb-checker__btn:focus { background: var(--acb-sa-check-hover); color: #fff; }
.acb-sa .acb-checker__btn:disabled { opacity: .6; cursor: wait; }
/* Trap 2: without an explicit size this collapses to zero width inside a
   padded Astra button. Same failure as the status bar's close icon. */
.acb-sa .acb-checker__btn svg { width: 16px; height: 16px; flex: none; }

.acb-sa .acb-checker__hint { margin: 12px 0 0; font-size: 13px; color: var(--acb-sa-hint); }
.acb-sa .acb-checker__hint strong { color: var(--acb-sa-navy); font-weight: 500; }
/* The number is a tel: link, which the design did not have. Without this the
   anchor takes the browser default blue, which beats the inherited colour on
   the surrounding <strong> and looks unstyled. */
.acb-sa .acb-checker__hint a {
	color: var(--acb-sa-navy);
	text-decoration: underline;
	text-underline-offset: 2px;
}
.acb-sa .acb-checker__hint a:hover,
.acb-sa .acb-checker__hint a:focus { color: var(--acb-sa-heading); }

.acb-sa .acb-result {
	margin-top: 16px;
	border-radius: 12px;
	padding: 14px 16px;
	font-size: 16px;
	line-height: 1.5;
	display: none;
	gap: 12px;
	align-items: flex-start;
}
.acb-sa .acb-result[data-state] { display: flex; }
.acb-sa .acb-result[data-state="yes"] { background: var(--acb-sa-yes-bg); color: var(--acb-sa-yes); }
.acb-sa .acb-result[data-state="no"]  { background: var(--acb-sa-no-bg);  color: var(--acb-sa-no); }
.acb-sa .acb-result[data-state="err"] { background: var(--acb-sa-err-bg); color: var(--acb-sa-err); }
.acb-sa .acb-result__icon {
	flex: 0 0 26px;
	height: 26px;
	border-radius: 50%;
	display: grid;
	place-items: center;
	font-size: 15px;
	font-weight: 700;
	color: #fff;
	margin-top: 2px;
}
.acb-sa .acb-result[data-state="yes"] .acb-result__icon { background: var(--acb-sa-yes-dot); }
.acb-sa .acb-result[data-state="no"]  .acb-result__icon { background: var(--acb-sa-no-dot); }
.acb-sa .acb-result[data-state="err"] .acb-result__icon { background: var(--acb-sa-err-dot); }
.acb-sa .acb-result strong { font-weight: 500; }
/* Inline links in the result underline; the CTA is a button and must not.
   `.acb-sa .acb-result a` is (0,2,1) and would beat a bare `.acb-result__cta`
   at (0,2,0), so the CTA is addressed with the element too. Same trap as the
   one in the header comment. */
.acb-sa .acb-result a { color: var(--acb-sa-heading); font-weight: 500; text-decoration: underline; }
/* Editor-only warning. Never rendered for visitors: the template only emits it
   when Elementor reports edit mode. */
.acb-sa__editor-note {
	margin: 0;
	padding: 12px 16px;
	background: #fdf1e4;
	border-left: 4px solid #c37c1c;
	color: #7a4a12;
	font-family: Roboto, Helvetica, Arial, sans-serif;
	font-size: 14px;
	line-height: 1.5;
}

/* Ferry caveat, shown inside the green success panel for the Isle of Wight.
   The amber panel is 1.00:1 against the green one, so the left bar is what
   gives it an edge: #C37C1C reads at 3.03:1 on both. */
.acb-sa .acb-result__caveat {
	display: flex;
	gap: 10px;
	align-items: flex-start;
	width: 100%;
	margin: 12px 0 0;
	padding: 10px 12px;
	border-radius: 8px;
	border-left: 4px solid var(--acb-sa-caveat-bar);
	background: var(--acb-sa-no-bg);
	color: var(--acb-sa-no);
	font-size: 15px;
	line-height: 1.5;
}
.acb-sa .acb-result__caveat-icon {
	flex: 0 0 20px;
	height: 20px;
	margin-top: 1px;
	border-radius: 50%;
	background: var(--acb-sa-caveat-bar);
	color: #fff;
	font-size: 13px;
	font-weight: 700;
	display: grid;
	place-items: center;
}

.acb-sa .acb-result a.acb-result__cta {
	display: inline-flex;
	align-items: center;
	margin-top: 10px;
	background: var(--acb-sa-yellow);
	color: #1a1a1a;
	text-decoration: none;
	font-weight: 500;
	/* Sunshine Yellow is only 1.34:1 against the pale green success panel, so
	   without an edge the button has no visible boundary. */
	border: 1px solid var(--acb-sa-yellow-edge);
	padding: 10px 16px;
	border-radius: 8px;
	font-size: 15px;
}
.acb-sa .acb-result a.acb-result__cta:hover,
.acb-sa .acb-result a.acb-result__cta:focus { background: var(--acb-sa-yellow-hover); color: #1a1a1a; text-decoration: none; }

/* ---------- Map ---------- */

.acb-sa .acb-map {
	position: relative;
	background: var(--acb-sa-surface);
	border-radius: 20px;
	box-shadow: 0 8px 30px rgba(31, 58, 95, .12);
	padding: 18px;
	overflow: hidden;
}
.acb-sa .acb-map__svg { width: 100%; height: auto; }
.acb-sa .acb-map__context path { fill: var(--acb-sa-context); stroke: var(--acb-sa-rule); }
.acb-sa .acb-map__region { stroke: #fff; stroke-width: 1.2; }
.acb-sa .acb-map__borders { fill: none; stroke: #fff; stroke-width: 2.5; stroke-dasharray: 6 4; pointer-events: none; }
/* Regional divisions. Deliberately faint: they should read as a soft hint of
   how the coverage area is organised, not as hard borders. Clipped to the
   covered land in the SVG, and painted under the excluded hatching. */
.acb-sa .acb-map__regions {
	fill: none;
	stroke: #fff;
	stroke-opacity: .5;
	stroke-width: 1.4;
	stroke-dasharray: 0.5 5;
	stroke-linecap: round;
}
/* fill:none would leave only the stroke hit-testable, so the interior needs
   this to be hoverable. */
.acb-sa .acb-map__regions path { pointer-events: all; cursor: pointer; }
/* Lift the region under the cursor without moving anything. */
.acb-sa .acb-map__region.is-hot { filter: brightness(1.07); }
.acb-sa .acb-map__regions path.is-hot { stroke-opacity: .95; stroke-dasharray: none; stroke-width: 1.8; }

.acb-sa .acb-map__labels { pointer-events: none; }
.acb-sa .acb-map__labels text {
	text-anchor: middle;
	font-family: var(--acb-sa-font-head);
	font-weight: 700;
	stroke-width: 3;
	paint-order: stroke;
	stroke-linejoin: round;
}
.acb-sa .acb-map__labels .is-in  { fill: #fff; stroke: var(--acb-sa-heading); }
.acb-sa .acb-map__labels .is-out { fill: #3b4654; stroke: #fff; }
.acb-sa .acb-map__hq { pointer-events: none; }
.acb-sa .acb-map__hq-dot { fill: var(--acb-sa-yellow); stroke: #fff; stroke-width: 3; }
.acb-sa .acb-map__hq-pill { fill: var(--acb-sa-navy); }
.acb-sa .acb-map__hq-text {
	text-anchor: middle;
	fill: #fff;
	font-size: 12px;
	font-weight: 500;
	font-family: var(--acb-sa-font);
}
.acb-pulse { fill: var(--acb-sa-yellow); animation: acbPulse 1.8s ease-out infinite; }
@keyframes acbPulse { 0% { r: 8; opacity: .7 } 100% { r: 26; opacity: 0 } }

.acb-sa .acb-map__legend {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 18px;
	justify-content: center;
	font-size: 13px;
	color: #3b4654;
	padding: 12px 6px 0;
	border-top: 1px solid var(--acb-sa-rule);
	margin-top: 6px;
}
.acb-sa .acb-map__legend span { display: flex; align-items: center; gap: 8px; }
.acb-sa .acb-map__legend i { width: 14px; height: 14px; border-radius: 3px; display: inline-block; flex: none; }

.acb-sa .acb-map__tip {
	position: absolute;
	left: 0;
	top: 0;
	pointer-events: none;
	background: var(--acb-sa-navy);
	color: #fff;
	padding: 9px 12px;
	border-radius: 10px;
	box-shadow: 0 8px 22px rgba(31, 58, 95, .3);
	white-space: nowrap;
	opacity: 0;
	visibility: hidden;
	transform: translate(-50%, -100%) translateY(-10px);
	transition: opacity .14s ease, transform .14s ease;
	z-index: 3;
}
.acb-sa .acb-map__tip.is-on {
	opacity: 1;
	visibility: visible;
	transform: translate(-50%, -100%) translateY(-14px);
}
/* Caret, anchored to the pointer rather than the card, so it stays put when
   the card is clamped away from the edge of the map. */
.acb-sa .acb-map__tip::after {
	content: '';
	position: absolute;
	top: 100%;
	left: var(--acb-sa-tip-caret, 50%);
	transform: translateX(-50%);
	border: 6px solid transparent;
	border-top-color: var(--acb-sa-navy);
}
.acb-sa .acb-map__tip-name {
	display: block;
	font-size: 14px;
	font-weight: 700;
	line-height: 1.25;
}
.acb-sa .acb-map__tip-status {
	display: flex;
	align-items: center;
	gap: 6px;
	margin-top: 3px;
	font-size: 12.5px;
	line-height: 1.3;
	color: #c7d4e4;
}
.acb-sa .acb-map__tip-status::before {
	content: '\2713';
	font-weight: 700;
	font-size: 12px;
	color: #6fd39b;
}
.acb-sa .acb-map__tip[data-covered="no"] .acb-map__tip-status::before {
	content: '\2715';
	color: #f0a94a;
}

@media (hover: none) {
	.acb-sa .acb-map__regions path { cursor: default; }
}

@media (prefers-reduced-motion: reduce) {
	.acb-pulse { animation: none; opacity: 0; }
	.acb-sa .acb-map__tip { transition: none; }
}

@media (max-width: 860px) {
	.acb-sa { padding: 40px 18px 48px; }
	.acb-sa__inner { grid-template-columns: 1fr; gap: 28px; }


	.acb-sa__h2 { font-size: 32px; line-height: 1.1; margin-bottom: 14px; }
	.acb-sa__lead { font-size: 17px; margin-bottom: 8px; }
	.acb-sa__note { font-size: 15px; margin-bottom: 20px; }

	.acb-sa .acb-checker {
		padding: 22px 18px 18px;
		border: 3px solid var(--acb-sa-blue);
		box-shadow: 0 12px 32px rgba(71, 144, 205, .28);
	}
	.acb-sa .acb-checker__label {
		font-family: var(--acb-sa-font-head);
		font-weight: 700;
		font-size: 22px;
		color: var(--acb-sa-navy);
		line-height: 1.2;
		margin-bottom: 4px;
	}
	.acb-sa .acb-checker__sub {
		display: block;
		font-weight: 400;
		font-size: 15px;
		color: var(--acb-sa-muted);
		margin-bottom: 14px;
	}

	.acb-sa .acb-checker__row { flex-direction: column; gap: 12px; }
	.acb-sa .acb-checker__input { flex: none; width: 100%; height: 60px; font-size: 22px; text-align: center; border-width: 2px; }
	.acb-sa .acb-checker__btn {
		width: 100%;
		height: 60px;
		justify-content: center;
		font-size: 18px;
		font-weight: 700;
		border-radius: 12px;
		/* The design gives this a solid bottom edge that depresses on tap. Its
		   colour was a dark yellow for a yellow button; ours is navy. */
		box-shadow: 0 4px 0 var(--acb-sa-check-edge);
	}
	.acb-sa .acb-checker__btn:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--acb-sa-check-edge); }

	.acb-sa .acb-checker__trust {
		display: flex;
		flex-wrap: wrap;
		gap: 6px 14px;
		justify-content: center;
		margin: 14px 0 0;
		padding: 0;
		list-style: none;
		font-size: 13px;
		color: #3b4654;
	}
	.acb-sa .acb-checker__trust li { display: flex; align-items: center; gap: 5px; }
	.acb-sa .acb-checker__trust li::before { content: '\2713'; color: var(--acb-sa-yes-dot); font-weight: 700; }

	.acb-sa .acb-checker__hint { text-align: center; margin-top: 12px; }

	.acb-sa .acb-map { padding: 12px; border-radius: 16px; }
	.acb-sa .acb-map__legend { font-size: 12px; gap: 6px 12px; }

	.acb-sa .acb-result a.acb-result__cta { width: 100%; justify-content: center; padding: 14px; font-size: 16px; font-weight: 500; }
}