/*
 * Blog redesign: shared base (tokens, container, breadcrumbs, signup band).
 * Values come from the Figma file (frames are 1520px wide with a 98px inset, mobile frames 393px).
 * Page-specific styles live in blog-home.css, article.css and author.css.
 */

.aalp-rd {
	--rd-navy: #0b3e64;
	--rd-text: #0b3e64;
	--rd-muted: #6b7480;
	--rd-sky: #b3e5fc;
	--rd-page: #fdfdfb;
	--rd-white: #ffffff;
	--rd-inset: 98px;
	--rd-max: 1324px;

	font-family: 'Roboto', system-ui, -apple-system, 'Segoe UI', Arial, sans-serif;
	font-variation-settings: 'wdth' 100;
	color: var(--rd-text);
	background: var(--rd-page);
	-webkit-font-smoothing: antialiased;
}

.aalp-rd *,
.aalp-rd *::before,
.aalp-rd *::after {
	box-sizing: border-box;
}

.aalp-rd .rd-container {
	width: 100%;
	max-width: calc(var(--rd-max) + 2 * var(--rd-inset));
	margin: 0 auto;
	padding-left: var(--rd-inset);
	padding-right: var(--rd-inset);
}

/* The old theme doesn't define WordPress's screen-reader-text class. */
.aalp-rd .screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* The old theme's global li (18px, brown) and span (black) rules would override the breadcrumb's 13px grey. */
.aalp-rd .rd-breadcrumbs li,
.aalp-rd .rd-breadcrumbs span {
	font-size: inherit;
	line-height: inherit;
	color: inherit;
}

/* Breadcrumbs (3139:65) */
.aalp-rd .rd-breadcrumbs {
	padding-top: 28px;
}

.aalp-rd .rd-breadcrumbs ol {
	display: flex;
	flex-wrap: wrap;
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: 13px;
	line-height: 19px;
	color: var(--rd-muted);
}

.aalp-rd .rd-breadcrumbs li + li::before {
	content: '/';
	margin: 0 7px 0 6px;
}

.aalp-rd .rd-breadcrumbs a {
	color: var(--rd-muted);
	text-decoration: none;
}

.aalp-rd .rd-breadcrumbs a:hover {
	text-decoration: underline;
}

/* Weekly teaching tips signup (3139:242) */
.aalp-rd .rd-signup {
	background: var(--rd-navy);
	color: var(--rd-white);
}

.aalp-rd .rd-signup__inner {
	display: flex;
	align-items: center;
	gap: 64px;
	min-height: 360px; /* the band is a fixed 360px frame in Figma, content centered */
	padding-top: 76px;
	padding-bottom: 76px;
}

.aalp-rd .rd-signup__copy {
	flex: 1 1 0;
	min-width: 0;
}

.aalp-rd .rd-signup__title {
	margin: 0 0 8px;
	padding: 0;
	font-family: inherit;
	letter-spacing: normal;
	text-transform: none;
	text-align: left;
	font-size: 34px;
	line-height: 45px;
	font-weight: 700;
	color: var(--rd-white);
}

.aalp-rd .rd-signup__text {
	margin: 0;
	font-size: 20px;
	line-height: 30px;
	color: var(--rd-white);
}

.aalp-rd .rd-signup__form-wrap {
	flex: 0 0 570px;
	max-width: 570px;
}

.aalp-rd .rd-signup__form {
	display: flex;
	gap: 9px;
	margin: 0;
}

.aalp-rd .rd-signup__input {
	flex: 1 1 0;
	min-width: 0;
	height: 48px;
	padding: 0 15px;
	border: 0;
	border-radius: 999px;
	background: var(--rd-white);
	font: inherit;
	font-size: 18px;
	color: var(--rd-navy);
}

.aalp-rd .rd-signup__input::placeholder {
	color: var(--rd-muted);
}

.aalp-rd .rd-signup__button {
	flex: 0 0 132px;
	height: 48px;
	border: 0;
	border-radius: 999px;
	background: var(--rd-sky);
	font: inherit;
	font-size: 20px;
	line-height: 30px;
	color: var(--rd-navy);
	cursor: pointer;
}

.aalp-rd .rd-signup__button:hover {
	filter: brightness(0.96);
}

.aalp-rd .rd-signup__note {
	margin: 20px 0 0;
	font-size: 14px;
	color: rgba(255, 255, 255, 0.65);
}

@media (max-width: 1100px) {
	.aalp-rd {
		--rd-inset: 40px;
	}
}

@media (max-width: 900px) {
	.aalp-rd .rd-signup__inner {
		flex-direction: column;
		align-items: stretch;
		gap: 28px;
	}

	.aalp-rd .rd-signup__form-wrap {
		flex-basis: auto;
		max-width: none;
	}
}

@media (max-width: 600px) {
	.aalp-rd {
		--rd-inset: 20px;
	}

	.aalp-rd .rd-signup__inner {
		min-height: 0;
		padding-top: 48px;
		padding-bottom: 48px;
	}

	.aalp-rd .rd-signup__title {
		font-size: 28px;
		line-height: 36px;
	}

	.aalp-rd .rd-signup__text {
		font-size: 18px;
		line-height: 27px;
	}
}