/* shared styles for the advice hub and support hub pages and their articles */

section.page-section.hub-hero {
	padding: 0;
	background-color: var(--orange);

	div.content {
		box-sizing: border-box;
		position: relative;
		display: flex;
		flex-direction: column;
		align-items: center;
		width: 100%;
		padding: var(--margin);
		color: var(--white);

		h1 {
			margin-top: 0;
			margin-bottom: var(--gap-quarter);
			color: var(--white);
		}

		p {
			margin-bottom: var(--gap-half);
			text-align: center;
		}

		form {
			width: 360rem;

			input {
				box-sizing: border-box;
				width: 100%;
				height: 40rem;
				padding: 0 var(--gap-half) 0 45rem;
				border: none;
				border-radius: 20rem;
				font-family: inherit;
				font-size: 14rem;
				background-color: var(--white);
				background-image: url(img/icon-tick-orange.svg);
				background-repeat: no-repeat;
				background-size: 18rem;
				background-position: 15rem center;
			}
		}

		img.capsy {
			position: absolute;
			right: 120rem;
			bottom: 0;
			height: 85%;
		}
	}
}

section.page-section.search-found {
	div.content {
		h3 {
			margin-bottom: var(--gap-quarter);
		}

		p.query {
			font-weight: 600;
		}
	}
}

section.page-section.article-links-band {
	div.content {
		p.search-found-note {
			max-width: 640rem;
			margin: 0 auto var(--gap);
		}

		h3.latest-support-topics {
			max-width: 640rem;
			margin: 0 auto var(--gap-half);
			text-transform: uppercase;
		}
	}
}

section.page-section.topic-pills {
	div.content {
		h3 {
			margin-bottom: var(--gap-half);
		}

		ul {
			display: flex;
			flex-direction: row;
			flex-wrap: wrap;
			gap: var(--gap-quarter);
			list-style: none;

			li {
				a {
					display: inline-block;
					padding: 8rem 18rem;
					border: 1px solid var(--black);
					border-radius: 18rem;
					font-size: 14rem;
					font-weight: 600;
					text-decoration: none;
				}

				&.active {
					a {
						border-color: var(--orange);
						background-color: var(--orange);
						color: var(--white);
					}
				}
			}
		}
	}
}

section.page-section.featured-article {
	div.content {
		display: flex;
		flex-direction: row;

		> img {
			width: 45%;
			object-fit: cover;
		}

		div.text {
			box-sizing: border-box;
			width: 55%;
			padding: var(--gap);
			background-color: var(--pink-light);

			h2 {
				margin-bottom: var(--gap-half);
			}

			p.reviewed-by-and-meta {
				margin-bottom: var(--gap-half);
				font-size: 14rem;

				strong {
					font-weight: bold;
				}

				span.meta {
					color: var(--text-light-3);
				}
			}

			a.btn-text {
				display: block;
				width: fit-content;
				margin: 0 auto;
				text-align: center;
			}
		}
	}
}

span.article-tag {
	display: inline-block;
	margin-bottom: var(--gap-quarter);
	padding: 4rem 12rem;
	border-radius: 12rem;
	background-color: var(--orange);
	color: var(--white);
	font-size: 11rem;
	font-weight: bold;
	text-transform: uppercase;
}

ul.article-cards {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	gap: var(--gap);
	list-style: none;

	li {
		flex: 1 1 30%;
		border: 1px solid var(--gray-light);
		border-radius: 8rem;
		overflow: hidden;

		article {
			display: flex;
			flex-direction: column;
			height: 100%;

			div.img-wrap {
				height: 200rem;

				img {
					width: 100%;
					height: 100%;
					object-fit: cover;
				}
			}

			div.text {
				display: flex;
				flex-direction: column;
				flex-grow: 1;
				padding: var(--gap-half);

				h4 {
					margin-bottom: var(--gap-quarter);
				}

				p {
					margin-bottom: var(--gap-half);
					font-size: 13rem;
					color: var(--text-light-3);
				}

				div.article-meta {
					display: flex;
					flex-direction: row;
					justify-content: space-between;
					align-items: center;
					margin-top: auto;
					font-size: 13rem;

					a.read-more {
						font-weight: bold;
						color: var(--orange);
						text-decoration: none;
					}
				}
			}
		}
	}
}

section.page-section.article-cards-band {
	div.content {
		div.controls {
			display: flex;
			justify-content: center;
			margin-top: var(--gap);
		}
	}
}

ul.article-links {
	max-width: 640rem;
	margin: 0 auto;
	list-style: none;

	li {
		border-bottom: 1px solid var(--gray-light);

		a {
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			align-items: center;
			padding: var(--gap-half) 0;
			font-size: 14rem;
			font-weight: 600;
			text-decoration: none;

			&::after {
				content: "";
				width: 8rem;
				height: 14rem;
				background-image: url(img/icon-arrow-right-orange.svg);
				background-size: contain;
				background-repeat: no-repeat;
			}
		}
	}
}

section.page-section.article-links-band {
	div.content {
		h2 {
			text-align: center;
		}

		div.controls {
			display: flex;
			justify-content: center;
			margin-top: var(--gap);
		}
	}
}

section.page-section.topic-cards {
	div.content {
		ul {
			display: flex;
			flex-direction: row;
			flex-wrap: wrap;
			gap: var(--gap);
			list-style: none;

			li {
				flex: 1 1 30%;
				padding: var(--gap-half);
				border: 1px solid var(--gray-light);
				border-radius: 8rem;
				text-align: center;

				div.icon {
					display: flex;
					justify-content: center;
					align-items: center;
					width: 50rem;
					height: 50rem;
					margin: 0 auto var(--gap-quarter);
					border-radius: 50%;
					background-color: var(--pink-light);

					img {
						max-width: 25rem;
						max-height: 27rem;
					}
				}

				h4 {
					margin-bottom: var(--gap-quarter);
				}

				p {
					margin-bottom: var(--gap-quarter);
					font-size: 13rem;
					color: var(--text-light-3);
				}

				a.article-count {
					font-size: 13rem;
					font-weight: bold;
					color: var(--orange);
				}
			}
		}
	}
}

section.page-section.contact-us-row {
	div.content {
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
		gap: var(--gap-half);

		p {
			margin: 0;
			font-weight: bold;
		}
	}
}

section.page-section.page-article {
	div.content {
		display: flex;
		flex-direction: row;
		gap: var(--gap);

		article {
			flex-grow: 1;

			> img.article-hero {
				width: 100%;
				max-height: 400rem;
				margin-bottom: var(--gap-half);
				object-fit: cover;
			}

			p.author {
				margin-bottom: var(--gap-half);
				font-size: 14rem;

				span.meta {
					color: var(--text-light-3);
				}
			}

			div.callout {
				margin-bottom: var(--gap);
				padding: var(--gap-half);
				background-color: var(--pink-light);
				font-style: italic;

				p {
					margin: 0;
				}
			}
		}

		aside.article-sidebar {
			flex-shrink: 0;
			display: flex;
			flex-direction: column;
			gap: var(--gap-half);
			width: 280rem;

			div.card {
				box-sizing: border-box;
				width: 100%;
				padding: var(--gap-half);
				border: 1px solid var(--gray-light);
				border-radius: 8rem;

				h4 {
					padding-bottom: var(--gap-quarter);
					border-bottom: 2px solid var(--orange);
				}

				ul {
					list-style: none;

					li {
						padding: var(--gap-quarter) 0;
						font-size: 14rem;

						&:not(:last-child) {
							border-bottom: 1px solid var(--gray-light);
						}

						a {
							text-decoration: none;
						}
					}
				}

				a.btn-text {
					display: block;
					text-align: center;
				}

				p.disclaimer {
					margin: 0;
					font-size: 12rem;
					font-style: italic;
					color: var(--text-light-3);
				}
			}
		}
	}
}

/* mobile */
@media screen and (max-width: 767px) {
	section.page-section.hub-hero {
		div.content {
			align-items: start;
			padding: var(--gap);

			p {
				text-align: left;
				max-width: 60%;
			}

			form {
				width: 100%;
			}

			img.capsy {
				right: var(--gap);
				height: 55%;
			}
		}
	}

	section.page-section.featured-article {
		div.content {
			flex-direction: column;

			> img {
				width: 100%;
			}

			div.text {
				width: 100%;
				padding: var(--gap-half);
			}
		}
	}

	ul.article-cards {
		flex-direction: column;

		li {
			flex: 1 1 100%;
		}
	}

	section.page-section.topic-cards {
		div.content {
			ul {
				flex-direction: column;
			}
		}
	}

	section.page-section.page-article {
		div.content {
			flex-direction: column;

			aside.article-sidebar {
				/* sidebar cards not shown on mobile */
				display: none;
			}
		}
	}
}