@import "@wordpress/base-styles/breakpoints";
@import "@wordpress/base-styles/mixins";

.layout.has-header-section.is-section-reader .layout__header-section-content {
	box-sizing: border-box;
	max-width: 1140px;
	margin: 0 auto;

	@include break-medium {
		padding-left: 108px;
		padding-right: 108px;
	}
	@include break-wide {
		padding-left: 0;
		padding-right: 0;
	}
	h1 {
		font-family: Recoleta, "Noto Serif", Georgia, "Times New Roman", Times, serif;
		font-size: 60px;
		font-weight: 400;
		margin-bottom: 4px;

		@media (max-width: $break-medium) {
			font-size: $font-headline-small;
			font-weight: 400;
			line-height: 40px;
		}
	}
	p {
		font-weight: 400;
	}
}

.is-section-reader.has-no-sidebar .layout__content .tags__main {
	padding-left: 24px;
	padding-right: 24px;
	max-width: 1140px;
	margin: 0 auto;

	@include break-medium {
		padding-left: 108px;
		padding-right: 108px;
	}
	@include break-wide {
		padding-left: 0;
		padding-right: 0;
	}
}

// to match other reader pages.
.is-section-reader .layout:not(.has-no-sidebar) .tags__main {
	padding: 30px 20px;
	max-width: 600px;
	margin: 0 auto;
	@media (min-width: 660px) {
		padding: 30px 0;
	}
	@media (min-width: 782px) {
		padding: 24px 0;
		max-width: 1140px;
	}
}

.is-section-reader .layout.is-global-sidebar-visible {
	@media (max-width: $break-small) {
		.sticky-panel {
			right: 24px;
		}
	}

	&.is-group-reader .layout__content .layout__primary > div {
		overflow-y: auto;
	}

	.tags__main {
		box-sizing: border-box;
		max-width: 968px; // Max width of dual column reader stream.
		padding: 24px 0;

		.navigation-header {
			// Align the header text with the text in tags page content below.
			padding-inline: 35px;
		}

		.tags__header h4 {
			margin: -4px 0 19px;
		}

		.alphabetic-tags__header {
			padding-bottom: 24px;
			padding-top: 24px;
		}

		.tags__header,
		.trending-tags__container,
		.sticky-container,
		.alphabetic-tags__table {
			// Apply max-width at this level so we still have the full width content frame
			// and scroll containers.
			max-width: 1140px;
			margin: 0 auto;
		}

		@include break-small {
			.sticky-panel.is-sticky .sticky-panel__content {
				border-top-left-radius: 4px;
				border-top-right-radius: 4px;
				margin-top: 25px;
				overflow: hidden;

				.alphabetic-tags__header {
					align-items: center;
					box-sizing: border-box;
					display: flex;
					height: 64px;

					h2 {
						margin: 0;
					}
				}
			}
		}

		@media (min-width: 782px) {
			.sticky-panel.is-sticky .sticky-panel__content {
				margin-top: 16px;
			}
		}
	}
}

.tags__header {
	border-bottom: 1px solid var(--studio-gray-5);
	padding: 0 35px;
	h4 {
		color: var(--studio-gray-50);
		margin-bottom: 15px;
	}
}

.trending-tags__container {
	padding-bottom: 58px;
}

.trending-tags__row {
	padding: 0;

	@include break-small {
		display: flex;
		flex-direction: row;
		// we need to set the border on the column for mobile and the row for desktop
		//border-top: 1px solid var(--studio-gray-5);
		&:not(:last-child) {
			border-bottom: 1px solid var(--studio-gray-5);
		}
	}
	.trending-tags__column {
		width: 100%;
		// we need to set the border on the column for mobile and the row for desktop
		border-top: 1px solid var(--studio-gray-5);
		padding: 10px 35px;
		box-sizing: border-box;
		@include break-small {
			width: 50%;
			border-top: none;
		}
		a:focus {
			outline: none;
		}
		a:focus-visible .trending-tags__title {
			outline: 2px solid #000;
			outline-offset: 4px;
		}
		.trending-tags__title {
			font-size: $font-headline-small;
			font-weight: 600;
			color: var(--studio-black);
			margin-right: 12px;
			padding-right: 2px;

			@media (max-width: $break-medium) {
				font-size: 28px;
				line-height: 32px;
			}
		}
		.trending-tags__count {
			font-size: 16px;
			color: var(--studio-gray-50);
		}
	}
	&:last-child .trending-tags__column:last-child {
		border-bottom: 1px solid var(--studio-gray-5);
		@include break-small {
			border-bottom: none;
		}
	}
}

.alphabetic-tags__header {
	background-color: var(--studio-white);
	border-bottom: 1px solid var(--studio-gray-5);
	margin-bottom: 26px;
	padding: 20px 35px 10px 35px;

	@include break-large {
		display: flex;
		flex-direction: row;
	}

	h2 {
		font-size: 16px;
		color: var(--studio-gray-50);
		font-weight: 500;
		width: 100%;
		margin-bottom: 20px;
		@include break-large {
			width: 50%;
			margin-bottom: 0;
		}
	}
	.alphabetic-tags__tag-links {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		width: 100%;
		@include break-large {
			width: 50%;
		}
		button {
			font-size: 16px;
			color: var(--studio-gray-50);
			text-decoration: none;
			font-weight: 500;
			flex-grow: 1;
			&:last-child {
				flex-grow: 0;
			}
			&:focus {
				border-radius: 0;
				box-shadow: none;
				outline: none;
			}
			&:focus-visible {
				outline: 2px solid #000;
			}
		}
	}
}

@media (max-width: $break-small) {
	.alphabetic-tags__header {
		border: none;
		margin: 0;
		padding: 0 35px;

		.alphabetic-tags__tag-links {
			align-items: center;
			flex-direction: column;
		}
		h2 {
			display: none;
		}
	}
	.sticky-container {
		position: relative;
	}
	.sticky-panel {
		position: absolute;
		right: -12px;
		// width must be set for resizing when the panel is already sticky
		width: 16px;
	}
	.sticky-panel__content {
		padding-top: 24px;
	}
}

.alphabetic-tags__table {
	padding-bottom: 26px;
	&:not(:last-child) {
		border-bottom: 1px solid var(--studio-gray-5);
	}
	margin-bottom: 26px;
	padding-left: 35px;

	.alphabetic-tags__letter-title {
		font-size: 32px;
		margin-bottom: 22px;
		font-weight: 500;

		&:focus-visible {
			text-decoration: underline;
		}
	}
	.alphabetic-tags__row {
		display: flex;
		flex-wrap: wrap;

		.alphabetic-tags__col {
			width: 100%;
			padding: 6px 10px 6px 0;
			box-sizing: border-box;

			@include break-small {
				width: 50%;
			}

			@include break-medium {
				width: 25%;
			}

			a {
				color: var(--studio-gray-80);
				font-weight: 400;
				display: inline-block;
				border-bottom: 1px solid transparent;

				&:hover {
					border-bottom: 1px solid var(--studio-gray-80);
				}
				&:focus {
					outline: none;
				}
				&:focus-visible {
					outline: 2px solid #000;
					outline-offset: 4px;
				}
			}
		}
	}
}
