/*
 * JOURNAL (#756): the index (SPEC DELTA 23, board 5) and the post page (Master Design v1 section 5).
 * Hand-written, loaded on those pages only (inc/journal.php), scoped to .ra-jr. No build step.
 * Home v3 look: the latte ground, cards #fffdf9 with a 1px hairline, radius 14, Josefin Sans for titles and pills, Lato for text. One green, one
 * purple (SPEC DELTA 18). The panel shares the phone menu's components (SPEC DELTA 21): the photo under the latte veil, the 48 px field, the rows
 * with a round photo, the current one purple with a dot, the tiles, the purple pills.
 * The colours are listed once, here, light then dark (html[data-theme="dark"], the Home v3 dark block); tests/themes/JournalTest.php computes
 * the 4.5:1 text contrast of every pair. Mobile first.
 */

.ra-jr-wrap {
	--ra-jr-bg: #f5f0e8;
	--ra-jr-card: #fffdf9;
	--ra-jr-line: #e4dbcd;
	--ra-jr-field-line: #cfc4b3;
	--ra-jr-ink: #3e4546;
	--ra-jr-text: #5c6364;
	--ra-jr-muted: #5f6667;
	--ra-jr-eyebrow: #4f6145;
	--ra-jr-link: #7a5395;
	--ra-jr-dot: #875fa3;
	--ra-jr-pill: #875fa3;
	--ra-jr-on-pill: #ffffff;
	--ra-jr-sand: #e2d9ca;
	--ra-jr-icon: #5e7352;
	--ra-jr-veil-a: rgba(245, 240, 232, 0.9);
	--ra-jr-veil-b: rgba(245, 240, 232, 0.95);
	--ra-jr-head: 'Josefin Sans', 'Century Gothic', Futura, 'Trebuchet MS', Arial, sans-serif;

	background: var(--ra-jr-bg);
	box-sizing: border-box;
	color: var(--ra-jr-text);
	font-family: Lato, 'Helvetica Neue', Helvetica, Arial, sans-serif;
	font-size: 16px;
	line-height: 1.6;
}

html[data-theme='dark'] .ra-jr-wrap {
	--ra-jr-bg: #1a1917;
	--ra-jr-card: #2f3430;
	--ra-jr-line: #3a3631;
	--ra-jr-field-line: #4a453f;
	--ra-jr-ink: #f5f0e8;
	--ra-jr-text: #d9d3c9;
	--ra-jr-muted: #b4ada2;
	--ra-jr-eyebrow: #a9bf9c;
	--ra-jr-link: #b196cb;
	--ra-jr-dot: #b196cb;
	--ra-jr-sand: #302c27;
	--ra-jr-icon: #a9bf9c;
	--ra-jr-veil-a: rgba(26, 28, 25, 0.88);
	--ra-jr-veil-b: rgba(26, 28, 25, 0.94);
}

.ra-jr-wrap *,
.ra-jr-wrap *::before,
.ra-jr-wrap *::after {
	box-sizing: inherit;
}

.ra-jr {
	margin: 0 auto;
	max-width: 1320px;
	padding: 20px 16px 56px;
}

.ra-jr-wrap a:focus-visible,
.ra-jr-wrap button:focus-visible,
.ra-jr-wrap input:focus-visible {
	outline: 2px solid var(--ra-jr-link);
	outline-offset: 2px;
}

/* Eyebrow: topic, date, read time */
.ra-jr-wrap .ra-jr-eyebrow {
	color: var(--ra-jr-eyebrow);
	font-family: var(--ra-jr-head);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.16em;
	margin: 0 0 8px;
	text-transform: uppercase;
}

/* Photos */
.ra-jr-photo {
	background: var(--ra-jr-sand);
	border-radius: 14px;
	display: block;
	overflow: hidden;
}

.ra-jr-photo img {
	aspect-ratio: 16 / 9;
	display: block;
	height: auto;
	object-fit: cover;
	width: 100%;
}

.ra-jr-photo__empty {
	aspect-ratio: 16 / 9;
	display: block;
}

/* Featured post: 16:9; on a phone the text is under the photo, from 640px it sits over it on a dark gradient */
.ra-jr-featured {
	background: var(--ra-jr-card);
	border: 1px solid var(--ra-jr-line);
	border-radius: 14px;
	overflow: hidden;
	position: relative;
}

.ra-jr-featured .ra-jr-photo {
	border-radius: 0;
}

.ra-jr-featured__text {
	padding: 18px 20px 22px;
}

.ra-jr-wrap .ra-jr-featured__title {
	font-family: var(--ra-jr-head);
	font-size: 26px;
	font-weight: 600;
	line-height: 1.2;
	margin: 0 0 10px;
}

.ra-jr-wrap .ra-jr-featured__title a,
.ra-jr-wrap .ra-jr-card__title a {
	color: var(--ra-jr-ink);
	text-decoration: none;
}

.ra-jr-featured__excerpt {
	margin: 0 0 16px;
}

/* The outline pill: purple text, 44px */
.ra-jr-wrap .ra-jr-read {
	align-items: center;
	border: 1px solid var(--ra-jr-link);
	border-radius: 999px;
	color: var(--ra-jr-link);
	display: inline-flex;
	font-family: var(--ra-jr-head);
	font-size: 14px;
	font-weight: 600;
	letter-spacing: 0.08em;
	min-height: 44px;
	padding: 0 22px;
	text-decoration: none;
	text-transform: uppercase;
}

/* Cards: one column on a phone, two to a row from 640px, gap 24 */
.ra-jr-grid {
	display: grid;
	gap: 24px;
	margin: 24px 0 0;
}

.ra-jr-card {
	background: var(--ra-jr-card);
	border: 1px solid var(--ra-jr-line);
	border-radius: 14px;
	overflow: hidden;
}

.ra-jr-card .ra-jr-photo {
	border-radius: 0;
}

.ra-jr-card .ra-jr-photo img,
.ra-jr-card .ra-jr-photo__empty {
	aspect-ratio: 3 / 2;
}

.ra-jr-card__text {
	padding: 16px 20px 20px;
}

.ra-jr-wrap .ra-jr-card__title {
	font-family: var(--ra-jr-head);
	font-size: 20px;
	font-weight: 600;
	line-height: 1.25;
	margin: 0 0 8px;
}

.ra-jr-card__excerpt {
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	display: -webkit-box;
	font-size: 15px;
	margin: 0 0 10px;
	overflow: hidden;
}

.ra-jr-wrap .ra-jr-card__when {
	color: var(--ra-jr-muted);
	font-size: 13px;
	margin: 0;
}

/* "More posts": the purple button, a real link */
.ra-jr-paging {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	justify-content: center;
	margin: 32px 0 0;
}

.ra-jr-wrap .ra-jr-more {
	align-items: center;
	background: var(--ra-jr-pill);
	border-radius: 999px;
	color: var(--ra-jr-on-pill);
	display: inline-flex;
	font-family: var(--ra-jr-head);
	font-size: 16px;
	font-weight: 600;
	justify-content: center;
	min-height: 48px;
	padding: 0 32px;
	text-decoration: none;
}

.ra-jr-empty {
	text-align: center;
}

/* The side: the panel, then the authors card (on a phone the panel is the sheet, so the authors card follows the articles) */
.ra-jr-side {
	display: contents;
}

.ra-jr-panel {
	background-color: var(--ra-jr-bg);
	background-image: linear-gradient(var(--ra-jr-veil-a), var(--ra-jr-veil-b)), var(--ra-jr-panel-photo, none);
	background-position: center;
	background-size: cover;
	border: 1px solid var(--ra-jr-line);
	border-radius: 14px;
	margin: 24px 0 0;
	padding: 20px;
}

.ra-jr-panel__bar {
	display: none;
}

.ra-jr-panel__body > * + * {
	margin-top: 20px;
}

.ra-jr-wrap .ra-jr-panel__label {
	color: var(--ra-jr-eyebrow);
	font-family: var(--ra-jr-head);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.16em;
	margin: 0 0 10px;
	text-transform: uppercase;
}

/* Search of the posts: 48px, radius 8, an olive icon */
.ra-jr-search {
	position: relative;
}

.ra-jr-wrap .ra-jr-search__field {
	background: var(--ra-jr-card);
	border: 1px solid var(--ra-jr-field-line);
	border-radius: 8px;
	color: var(--ra-jr-ink);
	font: inherit;
	height: 48px;
	margin: 0;
	padding: 0 48px 0 14px;
	width: 100%;
}

/* The parent theme gives every <button> `padding: 16px 2.5em`, `height: auto`, a 2px purple frame and no radius through a long :not() chain
   (a very high specificity), which made this a 60 x 52 (74 x 60 on a desktop) square sticking out of the 48px field, its icon off the
   field's axis (STYLE-ROUND-02, Owner 19.10). The size, the frame and the radius are !important, as for the phone menu's close button. */
.ra-jr-wrap .ra-jr-search__go {
	align-items: center;
	background: none !important;
	border: 0 !important;
	border-radius: 8px !important;
	box-sizing: border-box;
	color: var(--ra-jr-icon) !important;
	cursor: pointer;
	display: flex;
	height: 48px !important;
	justify-content: center;
	margin: 0;
	min-height: 0 !important;
	padding: 0 !important;
	position: absolute;
	right: 0;
	top: 0;
	width: 48px !important;
}

.ra-jr-wrap .ra-jr-search__go:focus-visible {
	outline: 2px solid var(--ra-jr-icon);
	outline-offset: -4px;
}

/* Topics: rows of 48px with a 36px round photo, hairlines, the current one purple with a dot */
.ra-jr-topics ul,
.ra-jr-plants ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.ra-jr-topics li + li {
	border-top: 1px solid var(--ra-jr-line);
}

.ra-jr-wrap .ra-jr-topic {
	align-items: center;
	color: var(--ra-jr-ink);
	display: flex;
	font-family: var(--ra-jr-head);
	font-size: 18px;
	font-weight: 600;
	gap: 12px;
	min-height: 48px;
	text-decoration: none;
}

.ra-jr-topic__thumb {
	background: var(--ra-jr-sand);
	border-radius: 50%;
	flex: none;
	height: 36px;
	object-fit: cover;
	width: 36px;
}

.ra-jr-wrap .ra-jr-topic[aria-current='page'] {
	color: var(--ra-jr-link);
}

.ra-jr-topic[aria-current='page'] .ra-jr-topic__name::after {
	background: var(--ra-jr-dot);
	border-radius: 50%;
	content: '';
	display: inline-block;
	height: 7px;
	margin-left: 10px;
	vertical-align: middle;
	width: 7px;
}

/* Browse by plant: photo tiles, four to a row */
.ra-jr-plants ul {
	display: grid;
	gap: 8px;
	grid-template-columns: repeat(4, minmax(0, 1fr));
}

.ra-jr-wrap .ra-jr-plant {
	border: 2px solid transparent;
	border-radius: 10px;
	color: var(--ra-jr-ink);
	display: block;
	text-align: center;
	text-decoration: none;
}

.ra-jr-plant__photo {
	background: var(--ra-jr-sand);
	border-radius: 8px;
	display: block;
	height: 56px;
	object-fit: cover;
	width: 100%;
}

.ra-jr-plant__name {
	display: block;
	font-family: var(--ra-jr-head);
	font-size: 12px;
	font-weight: 600;
	overflow: hidden;
	padding-top: 4px;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.ra-jr-wrap .ra-jr-plant:hover,
.ra-jr-wrap .ra-jr-plant:focus-visible,
.ra-jr-wrap .ra-jr-plant[aria-current='page'] {
	border-color: var(--ra-jr-pill);
	color: var(--ra-jr-link);
}

/* Authors card */
.ra-jr-authors {
	background: var(--ra-jr-card);
	border: 1px solid var(--ra-jr-line);
	border-radius: 14px;
	margin: 24px 0 0;
	padding: 18px;
}

.ra-jr-authors__head {
	align-items: center;
	display: flex;
	gap: 14px;
}

.ra-jr-authors__photo {
	border-radius: 50%;
	flex: none;
	height: 64px;
	object-fit: cover;
	object-position: 50% 0;
	width: 64px;
}

.ra-jr-wrap .ra-jr-authors__name {
	color: var(--ra-jr-ink);
	font-family: var(--ra-jr-head);
	font-size: 18px;
	font-weight: 600;
	line-height: 1.25;
	margin: 0 0 2px;
}

.ra-jr-wrap .ra-jr-authors__line {
	color: var(--ra-jr-muted);
	font-size: 14px;
	line-height: 1.4;
	margin: 0;
}

.ra-jr-authors__links {
	display: flex;
	gap: 8px;
	margin: 14px 0 0;
}

.ra-jr-wrap .ra-jr-pill {
	align-items: center;
	background: var(--ra-jr-pill);
	border-radius: 999px;
	color: var(--ra-jr-on-pill);
	display: inline-flex;
	flex: 1;
	font-family: var(--ra-jr-head);
	font-size: 15px;
	font-weight: 600;
	justify-content: center;
	min-height: 44px;
	padding: 0 16px;
	text-decoration: none;
}

/* Phone: one button opens the panel as a full-height sheet (inc/journal.php, journal.js). Without the script the panel is just in the page. */
/* The parent theme's long `button:not(...)` rule (display: inline-block, specificity 0,6,1) beats a plain class, so the phone-only button showed on
 * a computer and took a grid column; each `display` rule of this button carries :not(#ra-jr-x), one ID more (the id is never on a page). */
.ra-jr-sheet-btn:not(#ra-jr-x) {
	display: none;
}

.ra-jr-js .ra-jr-sheet-btn:not(#ra-jr-x) {
	align-items: center;
	background: var(--ra-jr-card);
	border: 1px solid var(--ra-jr-field-line);
	border-radius: 8px;
	color: var(--ra-jr-ink);
	cursor: pointer;
	display: flex;
	font: inherit;
	gap: 10px;
	height: 48px;
	margin: 0 0 20px;
	padding: 0 12px;
	text-align: left;
	width: 100%;
}

.ra-jr-sheet-btn__label {
	font-family: var(--ra-jr-head);
	font-weight: 600;
}

.ra-jr-sheet-btn__current {
	color: var(--ra-jr-muted);
	font-size: 14px;
	margin-left: auto;
}

.ra-jr-js .ra-jr-panel {
	display: none;
}

.ra-jr-js .ra-jr-panel.is-open {
	border-radius: 0;
	bottom: 0;
	display: flex;
	flex-direction: column;
	left: 0;
	margin: 0;
	overflow-y: auto;
	padding: 0 16px 24px;
	position: fixed;
	right: 0;
	top: 0;
	z-index: 100000;
}

.ra-jr-js .ra-jr-panel.is-open .ra-jr-panel__bar {
	align-items: center;
	display: flex;
	flex: none;
	gap: 12px;
	height: 64px;
}

.ra-jr-wrap .ra-jr-panel__close {
	align-items: center;
	background: none;
	border: 0;
	color: var(--ra-jr-ink);
	cursor: pointer;
	display: flex;
	height: 44px;
	justify-content: center;
	padding: 0;
	width: 44px;
}

.ra-jr-panel__title {
	color: var(--ra-jr-ink);
	flex: 1;
	font-family: var(--ra-jr-head);
	font-size: 14px;
	font-weight: 600;
	letter-spacing: 0.16em;
	margin-right: 44px;
	text-align: center;
	text-transform: uppercase;
}

.ra-jr-js .ra-jr-panel.is-open .ra-jr-topic {
	font-size: 20px;
	min-height: 56px;
}

.ra-jr-js .ra-jr-panel.is-open .ra-jr-topic__thumb {
	height: 40px;
	width: 40px;
}

.ra-jr-js .ra-jr-panel.is-open .ra-jr-plant__photo {
	height: 64px;
}

body.ra-jr-sheet-open {
	overflow: hidden;
}

/* Post page: a 720px reading column */
.ra-jr-post {
	margin: 0 auto;
	max-width: 720px;
	padding: 28px 16px 56px;
}

.ra-jr-post__head {
	margin: 0 0 24px;
	text-align: center;
}

.ra-jr-post__hero {
	border-radius: 14px;
	margin: 0 0 32px;
	overflow: hidden;
}

.ra-jr-post__hero img {
	aspect-ratio: 16 / 9;
	display: block;
	height: auto;
	object-fit: cover;
	width: 100%;
}

.ra-jr-post__body {
	font-size: 17px;
	line-height: 1.7;
}

.ra-jr-post__body p {
	margin: 0 0 1.2em;
}

.ra-jr-post__body h2,
.ra-jr-post__body h3 {
	color: var(--ra-jr-ink);
	font-family: var(--ra-jr-head);
	font-weight: 600;
	line-height: 1.25;
	margin: 1.8em 0 0.6em;
}

.ra-jr-post__body img {
	border-radius: 14px;
	height: auto;
	max-width: 100%;
}

.ra-jr-post__body a {
	color: var(--ra-jr-link);
}

.ra-jr-post__back {
	margin: 40px 0 0;
	text-align: center;
}

/* "Mentioned in this post" */
.ra-jr-mention {
	margin: 40px 0 0;
}

.ra-jr-wrap .ra-jr-mention__label {
	color: var(--ra-jr-eyebrow);
	font-family: var(--ra-jr-head);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.16em;
	margin: 0 0 10px;
	text-transform: uppercase;
}

.ra-jr-wrap .ra-jr-mention__card {
	align-items: center;
	background: var(--ra-jr-card);
	border: 1px solid var(--ra-jr-line);
	border-radius: 14px;
	color: var(--ra-jr-ink);
	display: flex;
	gap: 16px;
	padding: 12px;
	text-decoration: none;
}

.ra-jr-mention__photo {
	flex: none;
	width: 88px;
}

.ra-jr-mention__photo img {
	border-radius: 8px;
	display: block;
	height: auto;
	width: 100%;
}

.ra-jr-mention__body {
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.ra-jr-mention__title {
	font-family: var(--ra-jr-head);
	font-size: 18px;
	font-weight: 600;
}

.ra-jr-mention__price {
	color: var(--ra-jr-muted);
}

@media (min-width: 640px) {
	.ra-jr-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.ra-jr-featured {
		border: 0;
	}

	.ra-jr-featured__text {
		background: linear-gradient(to top, rgba(26, 24, 22, 0.84), rgba(26, 24, 22, 0.72) calc(100% - 56px), rgba(26, 24, 22, 0));
		bottom: 0;
		color: #ffffff;
		left: 0;
		padding: 56px 28px 24px;
		position: absolute;
		right: 0;
	}

	.ra-jr-wrap .ra-jr-featured__text .ra-jr-eyebrow {
		color: #f5f0e8;
	}

	.ra-jr-wrap .ra-jr-featured__title {
		font-size: 30px;
	}

	.ra-jr-wrap .ra-jr-featured__title a {
		color: #ffffff;
	}

	.ra-jr-featured__excerpt {
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 1;
		display: -webkit-box;
		margin: 0 0 14px;
		overflow: hidden;
	}

	.ra-jr-wrap .ra-jr-featured__text .ra-jr-read {
		border-color: #ffffff;
		color: #ffffff;
	}
}

@media (min-width: 900px) {
	.ra-jr {
		padding: 40px 40px 80px;
	}

	.ra-jr--index {
		align-items: start;
		display: grid;
		gap: 40px;
		grid-template-columns: minmax(0, 1fr) 320px;
	}

	.ra-jr-grid {
		gap: 24px;
	}

	.ra-jr-side {
		display: block;
	}

	.ra-jr-side > :first-child {
		margin-top: 0;
	}

	/* The phone's sheet is not wanted here, whether or not the script ran */
	.ra-jr-js .ra-jr-sheet-btn:not(#ra-jr-x) {
		display: none;
	}

	.ra-jr-js .ra-jr-panel {
		display: block;
	}

	.ra-jr-post {
		padding: 40px 0 80px;
	}

	.ra-jr-post__body {
		font-size: 18px;
	}
}

/* Sticky only when the side fits the window (about 860px), else it scrolls with the page so nothing is cut off */
@media (min-width: 900px) and (min-height: 900px) {
	.ra-jr-side {
		position: sticky;
		top: 24px;
	}
}

@media (prefers-reduced-motion: no-preference) {
	.ra-jr-wrap .ra-jr-more,
	.ra-jr-wrap .ra-jr-pill,
	.ra-jr-wrap .ra-jr-plant {
		transition: background-color 0.15s ease, border-color 0.15s ease;
	}
}