/* pw/contact: details, Get Directions, map and form. summary = approved homepage design; full = proposal. */

.pw-contact__heading {
	margin-bottom: var(--space-6);
}

.pw-contact__intro {
	margin-bottom: var(--space-6);
}

.pw-contact__address {
	margin-bottom: var(--space-5);
	color: var(--colour-text);
	font-style: normal;
	line-height: 1.7;
}

.pw-contact__line {
	margin-bottom: var(--space-4);
}

.pw-contact__link {
	margin: var(--space-6) 0 0;
}

.pw-contact__grid,
.pw-contact__full {
	display: grid;
	gap: var(--space-8);
	align-items: start;
}

/* Static map preview (summary and the pre-consent state of the full variant) */

.pw-contact__map {
	position: relative;
	display: block;
	overflow: hidden;
	border: var(--border);
	border-radius: var(--radius);
	background-color: var(--colour-surface);
}

.pw-contact__map-wrap {
	position: relative;
}

.pw-contact__map--graphic {
	aspect-ratio: 4 / 5;
	color: var(--colour-text);
}

@media (min-width: 37.5em) {
	.pw-contact__map--graphic {
		aspect-ratio: 16 / 9;
	}
}

@media (min-width: 56.25em) {
	.pw-contact__map--graphic {
		aspect-ratio: 590 / 330;
	}

	/* Narrower map than the full variant: larger label units keep the text near 14px on screen. */
	.pw-contact--summary .pw-map-labels {
		font-size: 28px;
	}
}

.pw-contact__map-svg {
	display: block;
	width: 100%;
	height: 100%;
}

.pw-map-bg {
	fill: var(--colour-surface-paper);
}

.pw-map-park {
	fill: var(--colour-surface-deep);
	stroke: none;
}

/* Lines keep their pixel width at every size (non-scaling strokes). */
.pw-map-water path,
.pw-map-rail path,
.pw-map-road path {
	fill: none;
	stroke-linecap: round;
	stroke-linejoin: round;
	vector-effect: non-scaling-stroke;
}

.pw-map-water path {
	stroke: color-mix(in srgb, var(--colour-border) 60%, var(--colour-white));
	stroke-width: 12px;
}

.pw-map-rail path {
	stroke: var(--colour-border);
	stroke-dasharray: 2 6;
	stroke-width: 2px;
}

.pw-map-road--service path {
	stroke: color-mix(in srgb, var(--colour-border) 55%, var(--colour-surface-paper));
	stroke-width: 1.5px;
}

.pw-map-road--minor path {
	stroke: var(--colour-border);
	stroke-width: 3px;
}

.pw-map-road--mid path {
	stroke: color-mix(in srgb, var(--colour-border) 55%, var(--colour-text-secondary));
	stroke-width: 5px;
}

.pw-map-road--major path {
	stroke: color-mix(in srgb, var(--colour-border) 35%, var(--colour-text-secondary));
	stroke-width: 7px;
}

/* Labels: sized in viewBox units, stepped so they read at about 14px on screen at every width. */
.pw-map-labels {
	fill: var(--colour-text);
	font-family: var(--font-body);
	font-size: 25px;
	font-weight: var(--weight-medium);
	paint-order: stroke;
	stroke: var(--colour-surface-paper);
	stroke-linejoin: round;
	stroke-width: 5px;
}

.pw-map-label--water {
	font-style: italic;
}

@media (min-width: 37.5em) {
	.pw-map-labels {
		font-size: 22px;
	}
}

@media (min-width: 48em) {
	.pw-map-labels {
		font-size: 19px;
	}
}

@media (min-width: 56.25em) {
	.pw-map-labels {
		font-size: 16px;
	}
}

@media (min-width: 75em) {
	.pw-map-labels {
		font-size: 13px;
	}
}

/* The pin tip sits on the image centre, which is the exact location. */
.pw-contact__map-pin {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 2rem;
	height: 2.75rem;
	transform: translate(-50%, -100%);
	pointer-events: none;
}

.pw-pin-body {
	fill: var(--colour-red);
	stroke: var(--colour-white);
	stroke-width: 2;
}

.pw-pin-dot {
	fill: var(--colour-white);
}

.pw-contact__map-label {
	position: absolute;
	right: var(--space-4);
	bottom: var(--space-4);
	padding: var(--space-2) var(--space-4);
	border-radius: var(--radius);
	background-color: var(--colour-white);
	color: var(--colour-text);
	font-size: var(--text-small);
	font-weight: var(--weight-semibold);
	transition: color var(--transition-fast);
}

.pw-contact__map--graphic:hover .pw-contact__map-label {
	color: var(--colour-red-text);
}

.pw-contact__map-credit {
	position: absolute;
	left: 1px;
	bottom: 1px;
	z-index: 1;
	padding: 0.3125rem var(--space-2);
	background-color: rgb(255 255 255 / 85%);
	color: var(--colour-text);
	font-size: 0.75rem;
	line-height: 1.4;
	text-decoration: none;
}

a.pw-contact__map-credit:hover {
	text-decoration: underline;
}

/* Full variant */

.pw-contact__finding {
	margin-top: var(--space-7);
}

.pw-contact__finding h3,
.pw-contact__form-title {
	font-size: var(--text-h4);
}

.pw-contact__directions {
	margin: var(--space-6) 0 0;
}

.pw-contact__form {
	padding: var(--space-6);
	border: var(--border);
	border-radius: var(--radius);
	background-color: var(--colour-white);
}

.pw-contact__map--embed {
	margin-top: var(--space-8);
	width: 100%;
}

.pw-contact__map-view {
	position: relative;
	height: 22rem;
}

.pw-contact__map--embed.is-loaded {
	height: 28rem;
}

.pw-contact__map--embed iframe {
	display: block;
	width: 100%;
	height: 100%;
	border: 0;
}

.pw-contact__map-panel {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--space-3);
	padding: var(--space-5);
	border-top: var(--border);
	background-color: var(--colour-white);
}

.pw-contact__map-panel .pw-contact__map-note {
	margin: 0;
	color: var(--colour-text-secondary);
	font-size: var(--text-small);
}

/* Gravity Forms controls: 44px touch targets. Its own stylesheet sets sizes through variables and
   logical properties, so these selectors repeat its framework class to win on specificity. */
.pw-contact__form .gform_wrapper.gform-theme--framework input[type="text"],
.pw-contact__form .gform_wrapper.gform-theme--framework input[type="email"],
.pw-contact__form .gform_wrapper.gform-theme--framework input[type="tel"],
.pw-contact__form .gform_wrapper.gform-theme--framework select,
.pw-contact__form .gform_wrapper.gform-theme--framework .gform_button {
	min-block-size: 2.75rem;
}

.pw-contact__form .gform_wrapper.gform-theme--framework .gform_button {
	--gf-ctrl-btn-size: 2.75rem;
	--gf-ctrl-btn-bg-color-primary: var(--colour-red);
	--gf-ctrl-btn-bg-color-hover-primary: var(--colour-red-hover);
	--gf-ctrl-btn-bg-color-focus-primary: var(--colour-red-hover);
	--gf-ctrl-btn-color-primary: var(--colour-white);
	--gf-ctrl-btn-color-hover-primary: var(--colour-white);
	--gf-ctrl-btn-border-color-primary: var(--colour-red);
	--gf-local-height: 2.75rem;
	--gf-local-min-height: 2.75rem;
	block-size: 2.75rem;
	padding-inline: var(--space-5);
	border: 0;
	border-radius: var(--radius);
	background-color: var(--colour-red);
	color: var(--colour-white);
	font-weight: var(--weight-semibold);
	cursor: pointer;
	transition: background-color var(--transition-fast);
}

.pw-contact__form .gform_wrapper.gform-theme--framework .gform_button:hover {
	background-color: var(--colour-red-hover);
}

@media (min-width: 56.25em) {
	.pw-contact__map--embed {
		position: relative;
		height: 32rem;
	}

	.pw-contact__map-view {
		position: absolute;
		inset: 0;
		height: auto;
	}

	/* On wide screens the consent panel floats over the map's lower left. */
	.pw-contact__map-panel {
		position: absolute;
		bottom: var(--space-7);
		left: var(--space-5);
		max-width: 24rem;
		border: var(--border);
		border-radius: var(--radius);
	}

	.pw-contact__map--embed.is-loaded {
		height: 32rem;
	}

	.pw-contact__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: var(--space-8);
	}

	.pw-contact__full {
		grid-template-columns: 5fr 7fr;
		gap: var(--space-10);
	}
}

@media (min-width: 75em) {
	.pw-contact__grid {
		grid-template-columns: minmax(0, 1fr) 590px;
		gap: var(--space-11);
	}
}