/* Guides section (/guides/). Loaded on guide pages only (inc/guides.php). */

.guide-page {
	--guide-navy: #05306F;
	--guide-teal: #235F73; /* headings, as on the service pages */
	--guide-blue: #45A1C6;
	--guide-ink: #212121;
	--guide-muted: #616161;
	--guide-tint: #EEF6FA;
	color: var(--guide-ink);
}

.guide-wrap {
	max-width: 820px;
	margin: 0 auto;
	padding: 0 16px;
}
.guide-wrap-wide,
.guide-archive,
.guide-related {
	max-width: 1140px;
}

/* Hero */
.guide-hero {
	background: var(--guide-teal);
	color: #fff;
	padding: 56px 0 40px;
}
.guide-body ul,
.guide-body ol,
.guide-faq-answer ul,
.guide-faq-answer ol {
	margin: 0 0 1.5em 1.4em;
}
.guide-body li {
	margin-bottom: .4em;
}
.guide-breadcrumb {
	font-size: 14px;
	margin-bottom: 16px;
}
.guide-breadcrumb a,
.guide-breadcrumb span {
	color: #fff;
	margin-right: 6px;
}
.guide-breadcrumb a {
	text-decoration: underline;
}
.guide-title {
	color: #fff;
	font-size: clamp(30px, 5vw, 46px);
	line-height: 1.15;
	margin: 0 0 12px;
}
.guide-meta,
.guide-intro {
	color: #fff;
	margin: 0;
	font-size: 16px;
}
.guide-intro {
	font-size: 18px;
	max-width: 640px;
}

/* Article */
.guide-article {
	padding-top: 32px;
	padding-bottom: 48px;
}
.guide-answer {
	background: var(--guide-tint);
	border-left: 4px solid var(--guide-blue);
	padding: 20px 24px;
	margin-bottom: 32px;
	font-size: 18px;
	line-height: 1.6;
}
.guide-answer p {
	margin: 0;
}
.guide-answer .guide-answer-label {
	font-size: 13px;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--guide-teal);
	margin-bottom: 6px;
}
.guide-featured-image {
	margin: 0 0 32px;
}
.guide-featured-image img {
	width: 100%;
	height: auto;
	display: block;
}
.guide-body {
	font-size: 17px;
	line-height: 1.7;
}
.guide-body h2 {
	color: var(--guide-teal);
	margin-top: 40px;
}
.guide-body > :first-child {
	margin-top: 0;
}
.guide-body h3 {
	color: var(--guide-teal);
	margin-top: 28px;
}
.guide-body a {
	color: var(--guide-teal);
	text-decoration: underline;
}
.guide-body img {
	max-width: 100%;
	height: auto;
}
.guide-body table {
	width: 100%;
	border-collapse: collapse;
	margin: 24px 0;
	font-size: 16px;
}
.guide-body th,
.guide-body td {
	border: 1px solid #d8e3e8;
	padding: 10px 12px;
	text-align: left;
}
.guide-body th {
	background: var(--guide-tint);
}

/* FAQs */
.guide-faqs {
	margin-top: 48px;
}
.guide-faqs h2 {
	color: var(--guide-teal);
}
.guide-faq {
	border-bottom: 1px solid #d8e3e8;
}
.guide-faq summary {
	cursor: pointer;
	font-weight: 700;
	font-size: 17px;
	padding: 16px 32px 16px 0;
	position: relative;
	list-style: none;
	min-height: 44px;
}
.guide-faq summary::-webkit-details-marker {
	display: none;
}
.guide-faq summary::after {
	content: "+";
	position: absolute;
	right: 4px;
	top: 14px;
	font-size: 22px;
	color: var(--guide-teal);
}
.guide-faq[open] summary::after {
	content: "–";
}
.guide-faq-answer {
	padding: 0 0 16px;
	line-height: 1.6;
}

/* Reviewer */
.guide-reviewer {
	display: flex;
	gap: 16px;
	align-items: center;
	margin-top: 40px;
	padding: 20px;
	border: 1px solid #d8e3e8;
}
.guide-reviewer-photo {
	width: 72px;
	height: 72px;
	border-radius: 50%;
	object-fit: cover;
	flex-shrink: 0;
}
.guide-reviewer p {
	margin: 0;
}
.guide-reviewer-name {
	font-weight: 700;
}
.guide-reviewer-role,
.guide-reviewer-credentials {
	color: var(--guide-muted);
	font-size: 15px;
}

/* Call and quote buttons (area page heroes) */
.guide-cta-buttons {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin-bottom: 12px;
}
.guide-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 48px;
	padding: 0 22px;
	font-weight: 700;
	text-decoration: none;
	border: 2px solid #fff;
}
.guide-btn-call {
	background: var(--guide-blue);
	border-color: var(--guide-blue);
	color: #fff;
}
.guide-btn-quote {
	background: transparent;
	color: #fff;
}
.guide-btn:hover,
.guide-btn:focus-visible {
	background: #fff;
	color: var(--guide-navy);
	border-color: #fff;
}

/* Closing call to action on area pages and guides: Locus teal panel with a faded photo, like the page heroes */
.area-cta {
	--area-teal: #016074;
	position: relative;
	overflow: hidden;
	margin-top: 48px;
	background: var(--area-teal);
	color: #fff;
}
.area-cta-image {
	position: absolute;
	inset: 0 0 0 35%;
}
.area-cta-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: 1;
	filter: grayscale(30%);
}
.area-cta.has-image::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	background: linear-gradient(90deg, var(--area-teal) 35%, rgba(1, 96, 116, .8) 55%, rgba(1, 96, 116, .1) 100%);
}
.area-cta-inner {
	position: relative;
	z-index: 2;
	max-width: 680px;
	padding: 48px 40px;
}
.area-cta-eyebrow {
	display: inline-block;
	margin: 0 0 12px;
	padding-bottom: 8px;
	border-bottom: 3px solid var(--guide-blue);
	font-size: 14px;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--guide-blue);
}
.area-cta h2 {
	margin: 0 0 12px;
	color: #fff;
}
.area-cta p {
	color: #fff;
	margin: 0 0 24px;
}
.area-cta .area-cta-eyebrow {
	color: var(--guide-blue);
	margin-bottom: 12px;
}
.area-cta-buttons {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
}
.area-cta-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 48px;
	padding: 0 24px;
	border: 2px solid var(--guide-blue);
	font-size: 14px;
	font-weight: 700;
	letter-spacing: .04em;
	text-transform: uppercase;
	text-decoration: none;
	color: #fff;
}
.area-cta-btn-solid {
	background: var(--guide-blue);
}
.area-cta-btn-outline {
	border-color: #fff;
}
.area-cta-btn:hover,
.area-cta-btn:focus-visible {
	background: #fff;
	border-color: #fff;
	color: var(--area-teal);
}
.area-cta .area-cta-service {
	margin: 20px 0 0;
	font-size: 15px;
}
.guide-closing-cta {
	margin-bottom: 48px;
}
.area-cta-service a {
	color: #fff;
	text-decoration: underline;
}
@media (max-width: 600px) {
	.area-cta-image {
		inset: 0;
	}
	.area-cta.has-image::before {
		background: linear-gradient(180deg, rgba(1, 96, 116, .92) 0%, rgba(1, 96, 116, .7) 100%);
	}
	.area-cta-inner {
		padding: 32px 20px;
	}
	.area-cta-btn {
		width: 100%;
	}
}

/* Archive and cards */
.guide-archive-page {
	background: #E5E5E5; /* the service pages' section grey */
}
.guide-archive {
	padding-top: 32px;
	padding-bottom: 56px;
}
.guide-filter {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-bottom: 28px;
}
.guide-filter a {
	display: inline-flex;
	align-items: center;
	min-height: 40px;
	padding: 0 14px;
	border: 1px solid var(--guide-teal);
	background: #fff;
	color: var(--guide-teal);
	text-decoration: none;
	font-size: 15px;
}
.guide-filter a[aria-current="page"],
.guide-filter a:hover {
	background: var(--guide-teal);
	color: #fff;
}
.guide-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
	gap: 28px;
}

/* Card: job photo with the service on it, a light-blue base line like the
   homepage work slider, and a lift on hover. */
.guide-card {
	background: #fff;
	border-bottom: 4px solid var(--guide-blue);
	box-shadow: 0 2px 10px rgba(5, 48, 111, .08);
	transition: box-shadow .2s ease, transform .2s ease;
}
.guide-card:hover,
.guide-card:focus-within {
	box-shadow: 0 12px 28px rgba(5, 48, 111, .16);
	transform: translateY(-3px);
}
/* The theme underlines and recolours every link on hover, which reached all the card text. */
.guide-card-link,
.guide-card-link:visited,
.guide-card-link:hover,
.guide-card-link:focus {
	display: flex;
	flex-direction: column;
	height: 100%;
	color: var(--guide-ink);
	text-decoration: none;
}
.guide-card-link:focus-visible {
	outline: 3px solid var(--guide-blue);
	outline-offset: 2px;
}
.guide-card-image {
	position: relative;
	aspect-ratio: 16 / 10;
	overflow: hidden;
	background: var(--guide-teal);
}
.guide-card-image img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .4s ease;
}
.guide-card:hover .guide-card-image img {
	transform: scale(1.04);
}
.guide-card-service {
	position: absolute;
	left: 0;
	bottom: 0;
	padding: 7px 14px;
	background: #016074;
	color: #fff;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
}
.guide-card-body {
	padding: 20px 22px 22px;
	display: flex;
	flex-direction: column;
	flex: 1;
}
.guide-card-title {
	color: var(--guide-teal);
	font-size: 20px;
	line-height: 1.3;
	margin: 0 0 10px;
}
.guide-card:hover .guide-card-title {
	text-decoration: underline;
	text-decoration-thickness: 2px;
	text-underline-offset: 3px;
}
.guide-card-summary {
	margin: 0 0 18px;
	color: var(--guide-muted);
	font-size: 16px;
	line-height: 1.55;
	flex: 1;
}
.guide-card-more {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	align-self: flex-start;
	font-size: 14px;
	font-weight: 700;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: #016074;
}
.guide-card-more::after {
	content: "\2192";
	content: "\2192" / "";
	transition: transform .2s ease;
}
.guide-card:hover .guide-card-more::after {
	transform: translateX(4px);
}
@media (prefers-reduced-motion: reduce) {
	.guide-card,
	.guide-card-image img,
	.guide-card-more::after {
		transition: none;
	}
	.guide-card:hover,
	.guide-card:focus-within,
	.guide-card:hover .guide-card-image img {
		transform: none;
	}
}
.guide-related {
	padding-bottom: 56px;
}
.guide-related h2 {
	color: var(--guide-teal);
}
.guide-page .nav-links {
	display: flex;
	gap: 12px;
	margin-top: 32px;
}

@media (max-width: 600px) {
	.guide-hero {
		padding: 32px 0 28px;
	}
	.guide-btn {
		width: 100%;
	}
	.guide-reviewer {
		align-items: flex-start;
	}

	/* Columns size to their words instead of splitting them mid-word; a table that
	   still doesn't fit scrolls sideways inside its block (core gives it overflow-x). */
	.guide-body table {
		table-layout: auto !important;
		font-size: 14px;
	}
	.guide-body th,
	.guide-body td {
		padding: 6px 8px;
		overflow-wrap: normal;
		word-break: normal !important;
		hyphens: none;
	}
}

/* "Guides and advice" section on service pages */
.guide-service-section {
	padding-top: 48px;
}
.guide-service-all {
	margin: 24px 0 0;
}
.guide-service-all a {
	font-weight: 700;
	color: var(--guide-teal);
	text-decoration: underline;
}

/* Hero: text beside a job photo on desktop, the photo first on phones (area pages and
   guides). The desktop menu overlaps the top of the teal hero, so the photo starts below it.
   Kept after the .guide-hero rules above so these win. */
.area-hero {
	padding: 76px 0 40px;
}
.area-hero-grid {
	display: grid;
	gap: 40px;
	align-items: stretch;
}
.area-hero.has-image .area-hero-grid {
	grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
}
.area-hero-text {
	align-self: center;
}
.area-hero-photo {
	position: relative;
	min-height: 340px;
	border-bottom: 6px solid var(--guide-blue);
}
.area-hero-photo img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center 35%;
}
.area-hero-buttons,
.area-hero .area-hero-buttons {
	margin: 24px 0 0;
}
@media (max-width: 767px) {
	.area-hero {
		padding: 16px 0 28px;
	}
	.area-hero.has-image .area-hero-grid {
		grid-template-columns: minmax(0, 1fr);
		gap: 16px;
	}
	.area-hero-photo {
		order: -1;
		min-height: 0;
		aspect-ratio: 3 / 2;
		border-bottom-width: 4px;
	}
}