:root {
	/* Space left above an FAQ opened from a #faq- link: the theme's fixed 90px header plus breathing room. */
	--wfkb-scroll-offset: 130px;
	--wfkb-shadow: none;		
	--wfkb-border-color: rgba(0, 0, 0, .15);
	--wfkb-border-width: 1px;
	--wfkb-radius: 4px;
}
.article-hero {
    min-height: 430px;

	.article-hero__wrapper {
		min-height: 430px;

		.article-hero__inner {
			min-height: 430px;
			background-color: #1f7ce0;
    		border-bottom-left-radius: 50px;
    		border-bottom-right-radius: 50px;
			display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
			gap: 1rem;

			.article-hero__inner-container {
				color: inherit;
    			position: relative;
    			width: 100%;
			}
		}
	}
}

.wightfibre-kb-search-wrapper {
    display: flex;
    flex-direction: column;
    justify-content: center;
    border-radius: 25px;
    color: #707070;
    padding: 28px 32px;
    background: white;
    width: fit-content;
    align-items: center;
    gap: 34px;
	width: 100%;
	max-width: 750px;

	@media (max-width: 768px) {
		padding: 22px 22px;
		width: 90%;
	}

	.wightfibre-kb__search {
		display: flex;
		flex-direction: column;
		justify-content: center;
		width: 100%;

		
		.wightfibre-kb__search-fields {
			position: relative;

			input {
				border: 1px solid #F4F4F4;
				border-radius: 5px;
				width: 100%;
				max-width: 100%;
				padding-left: 10px;
				/* Room for the search button inside the box. */
				padding-right: 56px;
				min-height: 49px;
				background: #F4F4F4;
				color: #9F9F9F;
			}

			.wightfibre-kb__search-button {
				position: absolute;
				top: 0;
				right: 0;
				bottom: 0;
				display: flex;
				align-items: center;
				justify-content: center;
				width: 52px;
				margin: 0;
				padding: 0;
				border: 0;
				border-radius: 0 5px 5px 0;
				background: transparent;
				color: #1f7ce0;
				cursor: pointer;

				&:hover {
					background: rgba(31, 124, 224, .08);
				}

				&:focus-visible {
					outline: 2px solid #1f7ce0;
					outline-offset: -2px;
				}
			}
		}
	}
}

.wightfibre-kb {
	padding-bottom: 126px;

	.wightfibre-kb__container {
		max-width: 1110px;
		margin: 0 auto;
		padding: 6rem 1rem;

		@media (max-width: 1440px) {
			padding: 3rem 1rem;
		}

		.popular-questions__header {
			margin-top: 3rem;
			text-align: center;

			@media (max-width: 768px) {
				margin-top: 2rem;
			}
		}
		
		.wightfibre-kb__breadcrumbs {
			margin-bottom: 3rem;

			@media (max-width: 768px) {
				margin-bottom: 2rem;
			}

			ol {
				display: flex;
				flex-wrap: wrap;
				justify-content: center;
				gap: 0.5rem;
				margin: 0;
				padding: 0;
				list-style: none;
			}

			li + li::before {
				content: "/";
				margin-right: 0.5rem;
			}
		}

		.wightfibre-kb__intro {
			text-align: center;
			margin-bottom: 3rem;

			@media (max-width: 768px) {
				margin-bottom: 2rem;
			}
		}

		.wightfibre-kb__results {
			display: grid;
			grid-template-columns: repeat(4, 1fr);
			grid-template-rows: repeat(1, 1fr);
			gap: 2rem;
			margin: auto;

			@media (max-width: 1440px) {
				gap: 1rem;
			}

			@media (max-width: 768px) {
				grid-template-columns: repeat(2, 1fr);
				gap: 1rem;
			}

			@media (max-width: 576px) {
				grid-template-columns: repeat(1, 1fr);
				gap: 1rem;
			}

			> a {
				display: flex;
			}

			.wightfibre-kb__results-card {
				flex: 1;
				display: flex;
				flex-direction: column;
				gap: 1rem;
				text-align: center;
				padding: 2rem;
				border: var(--wfkb-border-width) solid var(--wfkb-border-color);
				border-radius: var(--wfkb-radius);
				box-shadow: var(--wfkb-shadow);
				align-items: center;
				justify-content: space-between;

				&:hover {
					background: rgba(0, 0, 0, .03);
					
					h2 {
						font-size: 1.2rem;
						margin: 0;
					}

					img {
						max-height: 100px;
						height: 100px;
						transform: scale(1.05);
					}
				}

				h2 {
					font-size: 1.2rem;
					margin: 0;
				}

				img {
					max-height: 100px;
					height: 100px;
				}
			}
		}
	}
}

.wightfibre-kb__article {
	margin-top: 3rem;

	@media (max-width: 768px) {
		margin-bottom: 2rem;
	}

	.wightfibre-kb-faqs {
		--wfkb-faq-q-bg: transparent;
		--wfkb-faq-q-bg-hover: var(--wfkb-faq-q-bg);
		--wfkb-faq-q-bg-open: var(--wfkb-faq-q-bg);
		--wfkb-faq-q-color: inherit;
		--wfkb-faq-q-color-open: var(--wfkb-faq-q-color);
		--wfkb-faq-a-bg: rgba(0, 0, 0, .03);
		--wfkb-faq-a-color: inherit;
		--wfkb-faq-a-pad-top: 0px;
		--wfkb-faq-gap: .5rem;
		--wfkb-faq-pad-y: 1rem;
		--wfkb-faq-pad-x: 1.25rem;
		--wfkb-faq-q-size: inherit;
		--wfkb-faq-q-weight: 600;
		--wfkb-faq-a-size: inherit;
		--wfkb-faq-icon-color: currentColor;
		--wfkb-faq-icon-size: .9rem;
	

		.wightfibre-kb-faqs__list {
			display: flex;
			flex-direction: column;
			gap: var(--wfkb-faq-gap);
		}

		.wightfibre-kb-faq {
			margin: 0;
			border: var(--wfkb-border-width) solid var(--wfkb-border-color);
			border-radius: var(--wfkb-radius);
			box-shadow: var(--wfkb-shadow);
			overflow: hidden;

			scroll-margin-top: var(--wfkb-scroll-offset);

			&:target {
				animation: wightfibre-kb-faq-highlight 3.5s ease-out;

				@media (prefers-reduced-motion: reduce) {
					animation: none;
				}
			}

			.wightfibre-kb-faq__question {
				display: flex;
				align-items: center;
				gap: 1rem;
				padding: var(--wfkb-faq-pad-y) var(--wfkb-faq-pad-x);
				background: var(--wfkb-faq-q-bg);
				color: var(--wfkb-faq-q-color);
				font-size: var(--wfkb-faq-q-size);
				font-weight: var(--wfkb-faq-q-weight);
				line-height: 1.4;
				cursor: pointer;
				list-style: none;
				transition: background-color .15s ease, color .15s ease;

				@media (prefers-reduced-motion: reduce) {
					transition: none;
				}

				&::-webkit-details-marker {
					display: none;
				}

				&::marker {
					content: "";
				}

				&:hover {
					background: var(--wfkb-faq-q-bg-hover);

					.wightfibre-kb-faq__title {
						text-decoration: underline;
						text-underline-offset: .2em;
					}
				}

				&:focus-visible {
					outline: 2px solid currentColor;
					outline-offset: -4px;
				}
			}

			.wightfibre-kb-faq__title {
				flex: 1;
				min-width: 0;
			}

			.wightfibre-kb-faq__icon {
				position: relative;
				flex: 0 0 var(--wfkb-faq-icon-size);
				width: var(--wfkb-faq-icon-size);
				height: var(--wfkb-faq-icon-size);
				color: var(--wfkb-faq-icon-color);

				&::before,
				&::after {
					content: "";
					position: absolute;
					left: 0;
					top: 50%;
					width: 100%;
					height: 2px;
					margin-top: -1px;
					background: currentColor;
					transition: transform .2s ease;

					@media (prefers-reduced-motion: reduce) {
						transition: none;
					}
				}

				&::after {
					transform: rotate(90deg);
				}
			}

			.wightfibre-kb-faq__answer {
				padding: var(--wfkb-faq-a-pad-top) var(--wfkb-faq-pad-x) var(--wfkb-faq-pad-y);
				color: var(--wfkb-faq-a-color);
				font-size: var(--wfkb-faq-a-size);

				> :first-child {
					margin-top: 0;
				}

				> :last-child {
					margin-bottom: 0;
				}
			}

			&[open] {
				background: var(--wfkb-faq-a-bg);

				> .wightfibre-kb-faq__question {
					background: var(--wfkb-faq-q-bg-open);
					color: var(--wfkb-faq-q-color-open);
				}

				.wightfibre-kb-faq__icon::after {
					transform: rotate(0deg);
				}
			}
		}
	}
}

.wightfibre-kb-suggest {
	position: relative;
	flex: 1 1 auto;
	width: 100%;
}

.wightfibre-kb-suggest__list {
	position: absolute;
	top: calc(100% + 4px);
	left: 0;
	right: 0;
	z-index: 20;
	max-height: 22rem;
	margin: 0;
	padding: .25rem 0;
	overflow-y: auto;
	list-style: none;
	text-align: left;
	background: #fff;
	border: 1px solid var(--wfkb-border-color);
	border-radius: 5px;
	box-shadow: 0 8px 24px rgba(0, 0, 0, .12);

	&[hidden] {
		display: none;
	}

	a {
		display: block;
		padding: .6rem .9rem;
		color: #333;
		line-height: 1.35;
		text-decoration: none;
	}

	.wightfibre-kb-suggest__option.is-active a,
	a:hover {
		background: rgba(31, 124, 224, .08);
		color: #1f7ce0;
	}

	.wightfibre-kb-suggest__option--all {
		border-top: 1px solid #F4F4F4;

		a {
			font-weight: 600;
			color: #1f7ce0;
		}
	}
}

.wightfibre-kb-suggest__status {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

#wightfibre-kb-search::-webkit-search-cancel-button {
	-webkit-appearance: none;
	appearance: none;
}

@keyframes wightfibre-kb-faq-highlight {
	from {
		border-color: #1f7ce0;
		box-shadow: 0 0 0 4px rgba(31, 124, 224, .75);
	}
}