/* shared styles for the content pages: about, contact, terms */

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

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

		div.text {
			flex-grow: 1;

			h1 {
				margin-top: 0;
				color: var(--white);

				span {
					color: var(--black);
				}
			}

			p {
				max-width: 400rem;
				margin-bottom: var(--gap);
			}

			a.btn-text {
				background-color: var(--white);
				color: var(--black);
			}
		}

		img {
			max-width: 640rem;
			height: auto;
		}
	}
}

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

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

				div.img-wrap {
					height: 200rem;
					background-color: var(--pink-light);

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

				h3 {
					margin: var(--gap-half) var(--gap-half) var(--gap-quarter);
					text-align: center;
				}

				p {
					margin: 0 var(--gap-half) var(--gap-half);
					font-size: 14rem;
					text-align: center;
				}
			}
		}
	}
}

section.page-section.accredited {
	div.content {
		text-align: center;

		p {
			margin-bottom: var(--gap);
		}

		div.logos {
			display: flex;
			flex-direction: row;
			justify-content: center;
			align-items: center;
			gap: var(--gap);

			img {
				max-height: 60rem;
			}
		}
	}
}

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

			form.contact-form {
				flex-grow: 1;

				h3 {
					text-transform: uppercase;
				}

				div.form-row {
					display: flex;
					flex-direction: row;
					gap: var(--gap-half);
					margin-bottom: var(--gap-half);

					label {
						flex: 1;
						display: flex;
						flex-direction: column;
						gap: var(--gap-quarter);
						font-size: 14rem;
						font-weight: 600;

						input,
						select,
						textarea {
							box-sizing: border-box;
							width: 100%;
							padding: 10rem;
							border: 1px solid var(--gray-dark);
							border-radius: 8rem;
							font-family: inherit;
							font-size: var(--font-size-p);
						}

						textarea {
							min-height: 120rem;
							resize: vertical;
						}
					}
				}

				button.btn-text {
					display: block;
					width: 100%;
					text-align: center;
				}
			}

			aside.contact-cards {
				flex-shrink: 0;
				display: flex;
				flex-direction: column;
				gap: var(--gap-half);
				width: 340rem;

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

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

					a {
						color: var(--orange);
						font-weight: 600;
					}

					p {
						margin: var(--gap-quarter) 0 0;
						font-size: 14rem;
					}
				}
			}
		}
	}
}

section.page-section.faq {
	div.content {
		h2 {
			text-align: center;
		}

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

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

				button.title {
					display: flex;
					flex-direction: row;
					justify-content: space-between;
					align-items: center;
					width: 100%;
					padding: var(--gap-half) 0;
					border: none;
					font-size: 16rem;
					font-weight: bold;
					text-align: left;

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

				div.details {
					display: none;
					padding-bottom: var(--gap-half);
				}

				&.active {
					button.title {
						&::after {
							transform: rotate(180deg);
						}
					}

					div.details {
						display: block;
					}
				}
			}
		}
	}
}

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

		article {
			flex-grow: 1;

			h1 {
				font-family: 'Inter', sans-serif;
				font-style: normal;
				font-size: 28rem;
				text-transform: none;
			}
		}

		aside.share-this-article {
			flex-shrink: 0;
			box-sizing: border-box;
			width: 280rem;
			padding: var(--gap-half);
			border: 1px solid var(--gray-light);
			border-radius: 8rem;
			align-self: start;

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

			ul {
				list-style: none;

				li {
					padding: var(--gap-quarter) 0;

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

					a {
						text-decoration: none;
					}
				}
			}
		}
	}
}

/* mobile */
@media screen and (max-width: 767px) {
	section.page-section.content-hero {
		div.content {
			flex-direction: column;
			padding: var(--gap);

			img {
				/* full-bleed above the text block */
				width: calc(100% + 2 * var(--gap));
				max-width: none;
				margin: calc(-1 * var(--gap)) calc(-1 * var(--gap)) 0;
				order: -1;
			}
		}
	}

	section.page-section.accredited {
		div.content {
			div.logos {
				flex-wrap: wrap;
			}
		}
	}

	section.page-section.stand-for {
		div.content {
			ul {
				flex-direction: column;
			}
		}
	}

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

				form.contact-form {
					div.form-row {
						flex-direction: column;
					}
				}

				aside.contact-cards {
					width: 100%;
				}
			}
		}
	}

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

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