/* ==========================================================================
   DIRECTORY
   Block 6. Find activities, Services and support, What's on this week.

   Values come from the approved design's "Find Activities" and "Services and
   Support" specimens, which govern layout and structure, and from
   Design-Brief.md 4.1 to 4.6 for colour, radius, spacing and focus.

   Rules held throughout: no shadows anywhere; one radius, 4px; focus is 3px
   #FFB81C at 2px offset and is never removed; touch targets 44px minimum;
   #A84D98 never sits as text on #F3E5F0.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Intro and closing lines
   -------------------------------------------------------------------------- */

.directory__intro {
	max-width: var(--measure);
	margin-bottom: 32px;
}

.directory__closing {
	margin-top: 48px;
	padding-top: 24px;
	border-top: 1px solid var(--grey);
}

/* --------------------------------------------------------------------------
   Map and controls (6.4)
   Map left at 260px, controls right. The SVG is decorative in the
   interaction sense: role="img" with a title, no button semantics, never in
   the tab order. The pills carry everything.
   -------------------------------------------------------------------------- */

.directory-filters {
	margin-bottom: 32px;
}

/* The map and its controls sit on a pale purple panel, measured off design
   specimen 3a "Find Activities, desktop, live": #F3E5F0, 32px padding, 4px
   radius, 48px gap, align-items flex-start.

   This is what was missing. The map is 300x619 and renders 260x536, and the
   controls beside it are around 195px, so roughly 420px of the column is
   always going to be empty. That is unavoidable without distorting the map,
   and the design does not try to avoid it: it puts the whole block on a
   tinted panel, so the space reads as part of a panel instead of as a hole in
   the page. We had the same geometry on white, which is why it read as
   broken. No map dimension changes. */

/* The Western Isles run north to south, so the map SVG is 300 x 619: very
   tall and very narrow. Pinned to a fixed 260px column it rendered about
   536px high next to a controls column roughly half that, and the pink box
   was left with a long empty tail below the filters. Capping the map height
   lets the box close up around whichever column is taller.

   --map-max-height is the one number to change if it still looks off. The
   column is auto rather than 260px so the box does not keep the old width
   once the map is narrower. */
/* ---------------------------------------------------------------------------
   Find activities: headline and filters left, map right
   ---------------------------------------------------------------------------
   The map is 300 x 619 because the Western Isles run north to south. Beside
   short controls it left a long empty tail of pink, so the map now runs down
   the right from the headline, and the headline, intro and filter panel stack
   on the left. The map gets the full height of that stack to fill.

   .map-block itself is display:contents. It has to stay in the markup because
   js/find-activities.js looks up pills inside it and the region highlight is
   a .map-block[data-selected-area] attribute selector, but it no longer draws
   anything: the pink panel moved to .map-block__controls.

   --map-max-height is the one number to change if the map looks too big or
   too small against the left column.
   -------------------------------------------------------------------------- */
.find-layout {
	--map-width: 340px;
	--map-max-height: 640px;

	display: grid;
	grid-template-columns: minmax(0, 1fr) var(--map-width);
	column-gap: 48px;
	align-items: start;
}

.find-layout > * {
	grid-column: 1;
	min-width: 0;
}

.find-layout > .directory-filters,
.find-layout .map-block {
	display: contents;
}

/* The pink panel is now the filter panel only. */
.map-block__controls {
	grid-column: 1;
	min-width: 0;
	padding: 32px;
	border-radius: var(--radius);
	background: var(--purple-pale);
}

/* Spans the headline, the intro and the panel. Spanning more rows than exist
   is harmless; the extra implicit rows collapse to nothing. */
/* The map fills whatever height the left column happens to be, rather than
   being pinned to a number I would have to keep re-guessing every time the
   pills wrap differently. min-height:0 keeps it from pushing the rows taller
   than the left column needs; the SVG's own preserveAspectRatio (xMidYMid
   meet, the default) scales it to fit and centres it. --map-max-height is
   only a runaway guard. */
.find-layout .map-block__map {
	grid-column: 2;
	grid-row: 1 / span 4;
	align-self: stretch;
	display: flex;
	flex-direction: column;
	min-height: 0;
}

.map-block {
	display: grid;
}

/* flex-basis 0 rather than auto is the whole trick. With auto, the SVG's own
   300 x 619 ratio gave it an intrinsic height of about 700px at this column
   width, and that height propagated back out to the grid rows: the map grew
   the layout instead of fitting it, which is why it hung well below the pink
   panel. At 0 it contributes nothing to sizing and simply takes whatever room
   is left once the hint and the credit have had theirs, so the map now ends
   level with the bottom of the panel on the left, whatever height that is. */
.map-block__map .wi-map {
	display: block;
	flex: 1 1 0%;
	min-height: 0;
	width: 100%;
	max-height: var(--map-max-height);
}

.map-block__map {
	min-width: 0;
}

.wi-map {
	display: block;
	width: 100%;
	height: auto;
}

/* Unselected islands are white, not #F3E5F0.

   AMENDS Design-Brief.md 6.4, which specifies a #F3E5F0 unselected fill. That
   was written for islands on a white page. Now the block carries the
   specimen's #F3E5F0 panel, so a #F3E5F0 island on a #F3E5F0 panel is 1.22:1
   and the islands disappear into their own background. White inverts the same
   relationship and keeps the map legible. The 1.2px #212B32 stroke is what
   actually delineates each island in either case, at 14.42:1 against white
   and 11.86:1 against the panel, so 1.4.11 is met by the outline as before.
   Brief amended in the same commit, per the precedence rule. */

.wi-region {
	fill: var(--white);
	stroke: var(--text);
	stroke-width: 1.2;
	stroke-linejoin: round;
}

/* Hover is decorative only. Nothing depends on it (brief 2.2). */
/* is-clickable is added by js/find-activities.js, so this only ever styles
   regions that really do respond. Without JS the map stays plain and the
   pills remain the only control, which is the honest state. */
.wi-region.is-clickable {
	cursor: pointer;
	fill: var(--purple-pale);
	transition: fill .2s linear;
}

.wi-region.is-clickable:hover {
	fill: #D4A5CC;
}

/* Selected fill mirrors the pressed pill. Never the only signal: the pill
   says "selected" in text and the result count names the area. */
.map-block[data-selected-area="lewis"]  #wi-lewis,
.map-block[data-selected-area="harris"] #wi-harris,
.map-block[data-selected-area="uist"]   #wi-uist,
.map-block[data-selected-area="barra"]  #wi-barra {
	fill: var(--purple);
}

/* Attribution, not content. It was running at full body size across the
   whole column and reading as if it mattered more than the map. */
.map-block__credit {
	flex: 0 0 auto;
	margin: 12px 0 0;
	font-size: 13px;
	line-height: 1.35;
}

/* --------------------------------------------------------------------------
   Area pills
   17px bold, 2px border, 4px radius, 44px minimum height. Selected fills
   purple with white text, which is 5.02:1.
   -------------------------------------------------------------------------- */

.pill-row {
	margin: 0 0 24px;
	padding: 0;
	border: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.pill-row__legend {
	width: 100%;
	padding: 0;
	margin-bottom: 12px;
	color: var(--nhs-blue);
	font-size: var(--fs-h4);
	font-weight: 700;
	line-height: var(--lh-heading);
}

.pill {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-height: 44px;
	padding: 0 18px;
	border: 2px solid var(--nhs-blue);
	border-radius: var(--radius);
	background: var(--white);
	color: var(--nhs-blue);
	font-family: var(--font-body);
	font-size: 17px;
	font-weight: 700;
	line-height: 1.2;
	cursor: pointer;
}

.pill:hover {
	background: var(--purple-pale);
}

.pill__count {
	font-weight: 400;
}

.pill.is-selected {
	border-color: var(--purple);
	background: var(--purple);
	color: var(--white);
}

/* The pressed pill says so in words as well as in colour. */
.pill.is-selected::after {
	content: " selected";
	font-weight: 700;
}

.pill--reset {
	border-color: var(--text);
	color: var(--text);
}

/* The reset pill states it in its own label ("Showing all 95"), so it does
   not take the suffix as well. */
.pill--reset.is-selected::after {
	content: none;
}

.pill--reset.is-selected {
	border-color: var(--text);
	background: var(--text);
	color: var(--white);
}

/* --------------------------------------------------------------------------
   Filter row
   Native select and checkbox, labelled, never a custom dropdown (6.4).
   -------------------------------------------------------------------------- */

.filter-row {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	gap: 24px;
}

.filter-row .field {
	flex: 1 1 220px;
	min-width: 0;
	margin-bottom: 0;
}

.filter-row--services .field {
	flex: 1 1 260px;
}

.field--check {
	display: flex;
	align-items: center;
	gap: 12px;
	min-height: 44px;
	flex: 0 0 auto;
}

.field--check input[type="checkbox"] {
	width: 28px;
	height: 28px;
	margin: 0;
	flex: 0 0 auto;
	accent-color: var(--nhs-blue);
}

.field--check label {
	font-weight: 700;
}

/* The filter submit is a button, not a full-width block like .btn. */
.btn--filter {
	width: auto;
	min-height: 50px;
	padding: 13px 28px;
	flex: 0 0 auto;
}

.filter-row__clear {
	min-height: 44px;
	display: inline-flex;
	align-items: center;
	font-weight: 700;
}

/* --------------------------------------------------------------------------
   Result count and results bar
   -------------------------------------------------------------------------- */

.result-count {
	margin: 0;
	padding-left: 12px;
	border-left: var(--rule-accent) solid var(--gold);
	font-weight: 700;
}

.results-bar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding-bottom: 16px;
	border-bottom: var(--rule-accent) solid var(--gold);
}

.print-button {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	min-height: 44px;
	padding: 0 18px;
	border: 2px solid var(--nhs-blue);
	border-bottom: var(--rule-accent) solid var(--gold);
	border-radius: var(--radius);
	background: var(--white);
	color: var(--nhs-blue);
	font-family: var(--font-body);
	font-size: 17px;
	font-weight: 700;
	cursor: pointer;
}

.print-button:hover {
	background: var(--purple-pale);
}

/* --------------------------------------------------------------------------
   Activity cards (6.4)
   Three across desktop, one across at 1022px and below, 24px gap.
   White card with a 1px border. Not the solid purple navigation card: these
   are records, and 19px of body copy reversed out of purple would be a
   different component doing a different job.
   -------------------------------------------------------------------------- */

.activities {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--grid-gap);
	margin: 24px 0 0;
	padding: 0;
	list-style: none;
}

.activity {
	display: flex;
}

.activity__inner {
	display: flex;
	flex: 1;
	flex-direction: column;
	gap: 12px;
	padding: 24px;
	border: 1px solid var(--text);
	border-radius: var(--radius);
	background: var(--white);
}

.activity__title {
	margin: 0;
	font-size: var(--fs-h4);
	font-weight: 700;
	line-height: var(--lh-heading);
	color: var(--nhs-blue);
}

.activity__when {
	margin: 0;
	font-weight: 700;
}

.activity__lines {
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.activity__note {
	margin: 0;
	font-size: var(--fs-small);
}

.record__line,
.record__note {
	margin: 0;
}

.record__note {
	font-size: var(--fs-small);
}

/* --------------------------------------------------------------------------
   Badges and tags
   #212B32 on #F3E5F0 is 11.86:1. Purple text on pale purple is forbidden.
   -------------------------------------------------------------------------- */

.badge,
.tag {
	display: inline-flex;
	align-items: center;
	align-self: flex-start;
	min-height: 28px;
	margin: 0;
	padding: 2px 10px;
	border-radius: var(--radius);
	color: var(--text);
	font-size: 14px;
	font-weight: 700;
	line-height: 1.3;
}

.badge--mode {
	border: 2px solid var(--text);
	background: var(--white);
	text-transform: uppercase;
}

.tag {
	background: var(--purple-pale);
}

/* --------------------------------------------------------------------------
   Service records (6.5)
   A stacked list, not a grid. Lower visual weight, higher volume.
   -------------------------------------------------------------------------- */

.services {
	margin: 0;
	padding: 0;
	list-style: none;
}

.service__inner {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 12px;
	padding: 32px 0;
	border-bottom: 1px solid var(--text);
}

.service__title {
	margin: 0;
	font-size: var(--fs-h4);
	font-weight: 700;
	line-height: var(--lh-heading);
	color: var(--nhs-blue);
}

.service__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px;
}

.service__area {
	font-size: var(--fs-small);
	font-weight: 700;
}

/* overflow-wrap is a reflow fix, not cosmetic. Some client descriptions carry
   a bare URL, and "www.langabhatmedicalpractice.co.uk" has no break
   opportunity, so at a 320px viewport it pushed the page 9px wider than the
   screen and the whole services list scrolled sideways. WCAG 2.2 1.4.10 asks
   for no horizontal scroll at 320px. anywhere rather than break-word so the
   break is taken only when the word genuinely cannot fit. */

.service__about {
	margin: 0;
	max-width: var(--measure);
	overflow-wrap: anywhere;
}

/* The phone is the most-used control on this page for this audience, so it
   gets a large target and 22px type. */

.call-link {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	min-height: 44px;
	padding: 8px 16px 8px 12px;
	border: 2px solid var(--nhs-blue);
	border-bottom: var(--rule-accent) solid var(--gold);
	border-radius: var(--radius);
	color: var(--nhs-blue);
	font-size: 22px;
	font-weight: 700;
	text-decoration: none;
}

.call-link:hover,
.call-link:focus {
	background: var(--purple-pale);
	color: var(--nhs-blue);
}

.icon-phone {
	flex-shrink: 0;
}

.record__email,
.record__web {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-height: 24px;
	text-underline-offset: 4px;
	overflow-wrap: anywhere;
}

/* --------------------------------------------------------------------------
   Empty state
   -------------------------------------------------------------------------- */

.empty-panel {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 20px;
	margin-top: 24px;
	padding: 48px 32px;
	border: 1px solid var(--text);
	border-radius: var(--radius);
}

.empty-panel__heading {
	margin: 0;
	font-size: var(--fs-h3);
	line-height: var(--lh-heading);
}

.empty-panel__body {
	margin: 0;
	max-width: var(--measure);
}

.btn--inline {
	width: auto;
	display: inline-block;
	text-decoration: none;
}

/* --------------------------------------------------------------------------
   What's on this week (6.6)
   -------------------------------------------------------------------------- */

/* --------------------------------------------------------------------------
   What's on: jump to a day (6.6)

   Reuses .pill from Find Activities rather than inventing a control: same
   44px target, same 2px blue border, same 4px radius, so the two directory
   pages behave the same way. .pill is class based, not scoped to <button>,
   so an anchor takes it unchanged.
   -------------------------------------------------------------------------- */

.day-jump {
	margin: 0 0 48px;
}

.day-jump__heading {
	margin: 0 0 16px;
	font-size: var(--fs-h4);
}

.day-jump__list {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.day-jump__link {
	text-decoration: none;
}

.day-jump__link:hover,
.day-jump__link:focus-visible {
	background: var(--purple-pale);
}

.day-group {
	margin-bottom: 48px;
}

/* Jumped-to headings need clearance, or the heading lands hard against the
   top edge of the window with its gold rule touching the frame. */

.day-group__heading {
	scroll-margin-top: 24px;
}

/* Note on the focus ring: the heading and the jump nav both carry
   tabindex="-1" so a jump link can move focus into the section. Neither
   suppresses its outline. The hard rule against outline: none has no
   exception for "it is only a heading", and a brief flash of the ring on
   arrival is a fair signal that focus really moved, which is the whole point
   of putting it there. */

.day-group__back {
	margin: 24px 0 0;
}

.day-group__heading {
	padding-bottom: 12px;
	border-bottom: var(--rule-accent) solid var(--gold);
}

.day-group__note {
	max-width: var(--measure);
}

/* --------------------------------------------------------------------------
   High contrast (section 7)
   Black background, white text, gold links, matching components.css.
   -------------------------------------------------------------------------- */

.aw-hc-on .activity__inner,
.aw-hc-on .empty-panel,
.aw-hc-on .print-button,
.aw-hc-on .pill,
.aw-hc-on .call-link {
	background: #000000;
	color: #FFFFFF;
	border-color: var(--gold);
}

.aw-hc-on .activity__title,
.aw-hc-on .service__title,
.aw-hc-on .empty-panel__heading,
.aw-hc-on .record__line,
.aw-hc-on .record__note,
.aw-hc-on .service__area,
.aw-hc-on .badge,
.aw-hc-on .tag {
	color: #FFFFFF;
	background: #000000;
	border-color: var(--gold);
}

.aw-hc-on .call-link,
.aw-hc-on .record__email,
.aw-hc-on .record__web {
	color: var(--gold);
}

.aw-hc-on .pill.is-selected {
	background: var(--gold);
	color: #000000;
	border-color: var(--gold);
}

.aw-hc-on .wi-region {
	fill: #000000;
	stroke: var(--gold);
}

.aw-hc-on .map-block[data-selected-area="lewis"]  #wi-lewis,
.aw-hc-on .map-block[data-selected-area="harris"] #wi-harris,
.aw-hc-on .map-block[data-selected-area="uist"]   #wi-uist,
.aw-hc-on .map-block[data-selected-area="barra"]  #wi-barra {
	fill: var(--gold);
}

.aw-hc-on .service__inner {
	border-bottom-color: var(--gold);
}

/* --------------------------------------------------------------------------
   Responsive
   Breakpoints 1022 / 767 / 570, matching responsive.css.
   -------------------------------------------------------------------------- */

@media (max-width: 1260px) {

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

@media (max-width: 1022px) {

	/* Brief 6.1 and 6.4: the card grid drops to one across here. */
	.activities {
		grid-template-columns: 1fr;
	}

	.find-layout {
		--map-max-height: 420px;

		column-gap: 24px;
	}
}

@media (max-width: 767px) {

	/* Stacked, map above the pills, 180px wide and left aligned. Measured off
	   design specimen 3c "Find Activities, mobile" at 390px, where the map is
	   180x371 at x=32 and the pills begin well below it. Brief 6.4 gives the
	   180px width; it kept the two columns side by side below 767px, which at
	   these widths leaves the pills about 120px to sit in. Stacking here
	   rather than at 570px follows the specimen.

	   Panel padding drops to 20px so a 180px map still clears the panel at a
	   320px viewport: 280 container, less 40 padding, is 240 of content. */

	.find-layout,
	.find-layout > .directory-filters,
	.find-layout .map-block {
		display: block;
	}

	.map-block__controls {
		padding: 20px;
	}

	/* The desktop map is a flex child with flex-basis 0, sized by the height
	   of the column beside it. There is no column beside it here, so that
	   would collapse it to nothing. Back to intrinsic sizing, bounded by
	   height rather than width so the shape stays predictable.

	   Height-bounded, not width-bounded, on purpose: at full column width the
	   map would be roughly 690px tall on a phone, and pushing the results
	   that far down the page is the exact problem the "View the list below"
	   cue exists to solve. */
	.find-layout .map-block__map {
		display: block;
		align-self: auto;
		width: auto;
		margin-top: 24px;
	}

	.map-block__map .wi-map {
		flex: 0 0 auto;
		width: auto;
		height: auto;
		max-width: 100%;
		max-height: var(--map-max-height);
	}

	.filter-row {
		gap: 16px;
	}

	.btn--filter,
	.filter-row .field,
	.filter-row--services .field {
		flex: 1 1 100%;
	}
}

@media (max-width: 570px) {

	.find-layout {
		display: block;
	}

	/* The desktop map is a flex child with flex-basis 0, sized by the height
	   of the column beside it. There is no column beside it here, so that
	   would collapse it to nothing. Back to intrinsic sizing, bounded by
	   height rather than width so the shape stays predictable.

	   Height-bounded, not width-bounded, on purpose: at full column width the
	   map would be roughly 690px tall on a phone, and pushing the results
	   that far down the page is the exact problem the "View the list below"
	   cue exists to solve. */
	.find-layout .map-block__map {
		display: block;
		align-self: auto;
		width: auto;
		margin-top: 24px;
	}

	.map-block__map .wi-map {
		flex: 0 0 auto;
		width: auto;
		height: auto;
		max-width: 100%;
		max-height: var(--map-max-height);
	}

	.pill {
		width: 100%;
	}

	.service__inner {
		padding: 24px 0;
	}

	.empty-panel {
		padding: 32px 20px;
	}

	.call-link {
		font-size: 19px;
	}
}

/* --------------------------------------------------------------------------
   Print (6.5)
   A whole filtered set on A4: drop the chrome and the controls, keep the
   records, print the phone numbers and web addresses as text.
   -------------------------------------------------------------------------- */

@media print {

	.site-header,
	.site-footer,
	.skip-link,
	.directory-filters,
	.print-button,
	.directory__closing,
	.a11y-toolbar {
		display: none !important;
	}

	body {
		background: #FFFFFF;
		color: #000000;
		font-size: 11pt;
	}

	.site-main {
		padding-top: 0;
	}

	h1 {
		font-size: 20pt;
		color: #000000;
	}

	.result-count {
		border-left: 0;
		padding-left: 0;
		font-size: 11pt;
	}

	.results-bar {
		border-bottom: 1pt solid #000000;
	}

	.activities {
		display: block;
	}

	.activity__inner,
	.service__inner {
		border: 0;
		border-bottom: 1pt solid #000000;
		border-radius: 0;
		padding: 8pt 0;
	}

	.activity__title,
	.service__title {
		font-size: 13pt;
		color: #000000;
	}

	/* Keep a record whole across a page break where the browser allows it. */
	.activity,
	.service {
		break-inside: avoid;
		page-break-inside: avoid;
	}

	.call-link {
		min-height: 0;
		padding: 0;
		border: 0;
		font-size: 12pt;
		color: #000000;
	}

	.icon-phone,
	.icon-external {
		display: none;
	}

	.record__email,
	.record__web,
	a {
		color: #000000;
		text-decoration: none;
	}

	/* Web addresses are useless in print unless they are spelled out. */
	.record__web span:first-child::after {
		content: "";
	}

	.tag,
	.badge {
		border: 1pt solid #000000;
		background: none;
	}
}


/* ---------------------------------------------------------------------------
   "View the list below"
   ---------------------------------------------------------------------------
   Sits at the foot of the controls column, inside the pink box, because that
   is where the eye finishes after setting the filters. Styled as a link with
   a downward arrow rather than as a button: it moves you down the page, it
   does not submit anything, and the box already has a submit button in
   "Show activities". Making both look alike would be a trap.
   -------------------------------------------------------------------------- */
.map-block__jump {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-height: 44px;
	margin-top: 24px;
	color: var(--purple-dark);
	font-weight: 700;
}

.map-block__jump-icon {
	flex: 0 0 auto;
}

/* The results block is focusable so the anchor lands there properly. It is
   only ever focused programmatically, never tabbed to, so scroll-margin keeps
   it clear of the sticky header when it does receive focus. */
.directory__results {
	scroll-margin-top: 24px;
}

@media (max-width: 767px) {

	/* The map is already reduced to 180px wide on small screens, so the cap
	   would fight that rule. Let width lead here. */
	.find-layout {
		--map-max-height: 520px;
	}

	.map-block__jump {
		margin-top: 16px;
	}

}


/* Revealed by js/find-activities.js only where clicking actually works. */
.map-block__hint {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 12px 0 0;
	color: var(--nhs-blue);
	font-size: var(--fs-small);
	font-weight: 700;
}

.map-block__hint[hidden] {
	display: none;
}

.map-block__hint-icon {
	flex: 0 0 auto;
}

@media (max-width: 767px) {

	.find-layout {
		--map-width: auto;
	}

}


/* "Show activities" sits on its own line above "Clear all filters" rather
   than trailing the day and dementia controls. Requested 24 August 2026.
   align-items:flex-start keeps the button its natural width instead of
   stretching it across the panel. */
.filter-actions {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 16px;
	margin-top: 24px;
}


/* ---------------------------------------------------------------------------
   Activity card actions
   ---------------------------------------------------------------------------
   Email and website as labelled buttons instead of raw addresses. Styled to
   match .pill rather than .btn: these are secondary to the card, and the
   solid blue of .btn would pull more attention than the activity's own name.

   44px minimum and 12px gap so two of them can be tapped apart on a phone.
   -------------------------------------------------------------------------- */
.record-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin: 16px 0 0;
}

.record-action {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-height: 44px;
	padding: 0 16px;
	border: 2px solid var(--nhs-blue);
	border-radius: var(--radius);
	background: var(--white);
	color: var(--nhs-blue);
	font-size: 17px;
	font-weight: 700;
	line-height: 1.2;
	text-decoration: none;
	transition: background .2s linear;
}

/* Without this, a visited View website button turns purple and stops looking
   like the Email and phone buttons beside it. The site's global visited-link
   colour is right for links in prose; inside a button it just reads as three
   controls that do not match. */
.record-action:visited {
	color: var(--nhs-blue);
}

.aw-hc-on .record-action:visited {
	color: var(--gold);
}

.record-action:hover {
	background: var(--purple-pale);
}

.record-action__icon {
	flex: 0 0 auto;
}

.aw-hc-on .record-action {
	background: #000000;
	border-color: var(--gold);
	color: var(--gold);
}

@media print {

	/* On paper a button is useless, so print the address it points at. The
	   title attribute holds it. */
	.record-action::after {
		content: " (" attr(title) ")";
		font-weight: 400;
	}

	.record-action__icon {
		display: none;
	}

}


/* Shown only when a record carries more than one address, so two "Email"
   buttons can be told apart. Lighter weight, the same way .pill__count sits
   beside its area name. */
.record-action__qualifier {
	font-weight: 400;
}

/* Social handles that are not URLs. Twenty-four service records carry things
   like "Facebook: Advocacy Western Isles" — a name, not an address. Turning
   one into a link means guessing a URL that may well 404, so it is printed
   as text and left for the reader to search. */
.record__social {
	margin: 12px 0 0;
	font-size: var(--fs-small);
	color: var(--text);
}


/* The price label. Blue and bold so the eye can skip to it, but the same
   size as the line it sits on: this is a signpost, not a heading. */
/* Any label + value line: where, area, price. */
.record__pair {
	display: flex;
	flex-wrap: wrap;
	gap: 4px 8px;
}

.record__label {
	color: var(--nhs-blue);
	font-weight: 700;
}

.record__label::after {
	content: ":";
}

.record__value--free {
	font-weight: 700;
}

.aw-hc-on .record__label {
	color: var(--gold);
}


/* The phone number now sits in the same row as Email and View website, and
   takes the same shape: same border, radius, height and hover. It keeps a
   larger type size because it is the one control on the card that most of
   this audience will actually use, and on a phone it dials. The icon is
   scaled to match.

   .call-link is untouched: the Contact page still uses it for the main
   switchboard number, where a big standalone call target is right. */
/* Same size as Email and View website. The 20px version read as a different
   kind of control sitting in a row of matching ones, which is exactly the
   inconsistency the row was meant to remove. */
.record-action--phone {
	padding: 0 16px;
}

.record-action--phone svg {
	flex: 0 0 auto;
	width: 20px;
	height: 20px;
}