/* Editorial pages. Mirrors the measure and the rhythm of .sola-legal so a page
   written in the back-office reads like the rest of the site rather than like a
   second design. */

/* The template makes .wrapper a centred flex column, which suits a landing block
   and breaks an article: every paragraph becomes a flex item sized to its own
   content, so the text no longer shares one left edge. Back to a block flow.
   The width is left to .container, so an article aligns with the home page. */
.sola-content .wrapper {
	display: block;
	text-align: left;
}

/* What an administrator sees on a page a visitor does not. Kept here rather than
   in admin.css so a public page never loads the whole back-office stylesheet. */
.sola-admin-preview-banner {
	position: sticky;
	top: 0;
	z-index: 1001;
	padding: .75rem 1rem;
	background: var(--sola-blue-darker);
	color: #fff;
	text-align: center;
}

.sola-admin-page-bar {
	position: sticky;
	top: 0;
	z-index: 1001;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 1.5rem;
	padding: .75rem 1rem;
	background: var(--sola-blue-darker);
	color: #fff;
}

.sola-admin-page-bar a {
	color: #fff;
	font-weight: 600;
	text-decoration: underline;
}

.sola-draft-badge {
	display: inline-block;
	margin-left: .5rem;
	padding: .2rem .6rem;
	border-radius: 1rem;
	background: #c0392b;
	color: #fff;
	font-size: .875rem;
	font-weight: 600;
	/* It sits inside the h1, whose tight tracking would swallow the word space. */
	letter-spacing: normal;
	vertical-align: middle;
}

.sola-content-index {
	margin: 0 0 2.5rem;
	padding: 0;
	list-style: none;
}

.sola-content-index > li {
	display: grid;
	gap: .25rem;
	padding: 1.1rem 0;
	border-bottom: 1px solid var(--sola-border);
}

.sola-content-index > li > a {
	color: var(--sola-ink);
	font-size: 1.15rem;
	font-weight: 600;
	text-decoration: none;
}

.sola-content-index > li > a:hover {
	color: var(--sola-blue);
}

.sola-content-index > li > time {
	color: var(--sola-muted);
	font-size: .85rem;
}

.sola-content-index > li > span {
	color: var(--sola-muted);
	line-height: 1.6;
}

.sola-breadcrumb-nav {
	margin-bottom: 1.25rem;
}

.sola-breadcrumb {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .5rem;
	margin: 0;
	padding: 0;
	list-style: none;
	color: var(--sola-muted);
	font-size: .875rem;
}

.sola-breadcrumb > li + li::before {
	content: '>';
	margin-right: .5rem;
	color: var(--sola-border);
}

.sola-breadcrumb a {
	color: var(--sola-muted);
	text-decoration: none;
}

.sola-breadcrumb a:hover {
	color: var(--sola-blue);
	text-decoration: underline;
}

/* The last entry is the page being read: it is not a link, and it says so by
   carrying the ink colour the rest of the trail does not. */
.sola-breadcrumb > li:last-child {
	color: var(--sola-ink);
	font-weight: 600;
}

.sola-content-header {
	margin-bottom: 2rem;
}

/* The template sizes h1 for a hero. An article title sits above its own text,
   not above a full screen, so it takes a reading size instead. */
.sola-content-header h1 {
	margin: 0 0 1rem;
	color: var(--sola-ink);
	font-size: 2.25rem;
	line-height: 1.2;
}

.sola-content-lead {
	margin: 0 0 .5rem;
	color: var(--sola-muted);
	font-size: 1.15rem;
	line-height: 1.6;
}

.sola-content-date {
	margin: 0;
	color: var(--sola-muted);
	font-size: .9rem;
}

.sola-content-image {
	display: block;
	width: 100%;
	height: auto;
	margin: 0 0 2rem;
	border: 1px solid var(--sola-border);
	border-radius: .75rem;
}

.sola-content-body {
	color: var(--sola-muted);
	line-height: 1.7;
}

/* The editing surface inherits the template's own weight and heading sizes, which
   made the body look bold and h3 larger than h2. Writing must show what the page
   will render, so the same rules apply to both. */
.ck-content {
	color: var(--sola-muted);
	font-weight: 400;
	line-height: 1.7;
}

/* Scoped to the whole section, not just the body: the index page carries its own
   h2 outside it, and the template sizes an h2 larger than our h1. */
.sola-content h2,
.ck-content h2 {
	margin: 2.5rem 0 .75rem;
	color: var(--sola-ink);
	font-size: 1.35rem;
	font-weight: 600;
	line-height: 1.3;
}

.sola-content h3,
.ck-content h3 {
	margin: 2rem 0 .5rem;
	color: var(--sola-ink);
	font-size: 1.1rem;
	font-weight: 600;
	line-height: 1.3;
}

.sola-content-body p,
.sola-content-body ul,
.sola-content-body ol {
	margin: 0 0 1rem;
}

.sola-content-body ul,
.sola-content-body ol {
	padding-left: 1.25rem;
}

.sola-content-body a {
	color: var(--sola-blue);
	text-decoration: underline;
}

/* The template reserves .image for its 28x28 pictograms, and the editor gives
   that same class to every figure it inserts, so an illustration inherited a
   28px height and spilled out of its frame. Only a resized figure keeps a width,
   which it carries inline and which therefore still wins. */
.sola-content-body figure.image,
.ck-content figure.image {
	width: auto;
	height: auto;
	max-width: 100%;
	margin: 1.5rem 0;
}

.sola-content-body figure.image img,
.ck-content figure.image img {
	display: block;
	width: 100%;
	height: auto;
}

.sola-content-body figure.image figcaption,
.ck-content figure.image figcaption {
	padding-top: .5rem;
	font-size: .875rem;
	color: var(--sola-muted);
}

.sola-content-body img {
	max-width: 100%;
	height: auto;
	border-radius: .5rem;
}

.sola-content-body blockquote {
	margin: 1.5rem 0;
	padding-left: 1rem;
	border-left: 3px solid var(--sola-green);
	color: var(--sola-ink);
}

/* Tables come out of the editor wrapped in figure.table and carry no styling of
   their own. Wide ones scroll inside their own frame rather than pushing the
   article sideways on a phone. */
.sola-content-body figure.table,
.ck-content figure.table {
	margin: 1.5rem 0;
	overflow-x: auto;
}

.sola-content-body table,
.ck-content figure.table table {
	width: 100%;
	border-collapse: collapse;
	font-size: .95rem;
}

.sola-content-body th,
.sola-content-body td,
.ck-content figure.table th,
.ck-content figure.table td {
	padding: .6rem .75rem;
	border: 1px solid var(--sola-border);
	text-align: left;
	vertical-align: top;
}

.sola-content-body th,
.ck-content figure.table th {
	background: var(--sola-surface);
	color: var(--sola-ink);
	font-weight: 600;
}

.sola-content-body figcaption,
.ck-content figure.table figcaption {
	padding-top: .5rem;
	font-size: .875rem;
	color: var(--sola-muted);
}

.sola-content-body hr {
	margin: 2rem 0;
	border: 0;
	border-top: 1px solid var(--sola-border);
}

.sola-content-body code {
	padding: .1rem .35rem;
	border-radius: .25rem;
	background: var(--sola-surface);
	font-size: .9em;
}

.sola-content-body pre {
	margin: 1.5rem 0;
	padding: 1rem;
	overflow-x: auto;
	border-radius: .5rem;
	background: var(--sola-ink);
	color: #fff;
}

.sola-content-body pre code {
	padding: 0;
	background: none;
	color: inherit;
}

/* Shapes the editor can apply from its Styles menu. They are written for a bare
   link because the template's own .primary-button needs three nested div for its
   hover animation, which no editor produces. Duplicated on .ck-content so the
   writing screen shows what the page will render. */
.sola-content-body a.sola-cta,
.ck-content a.sola-cta {
	display: inline-block;
	margin: .5rem 0;
	padding: .8rem 1.6rem;
	border: 2px solid transparent;
	border-radius: 2rem;
	background-image: linear-gradient(135deg, var(--sola-blue) 0%, var(--sola-blue-dark) 100%);
	color: #fff;
	font-weight: 600;
	text-decoration: none;
}

.sola-content-body a.sola-cta--ghost,
.ck-content a.sola-cta--ghost {
	background-image: none;
	border-color: var(--sola-blue);
	color: var(--sola-blue);
}

.sola-content-body p.sola-note,
.ck-content p.sola-note {
	margin: 1.5rem 0;
	padding: 1rem 1.25rem;
	border-left: 3px solid var(--sola-green);
	border-radius: .4rem;
	background: var(--sola-surface);
	color: var(--sola-ink);
}

/* A bullet list turned into a grid of cards, matching the .choose-card of the
   home page: white ground, the charter's border, one column on a phone. The
   bold run that opens an item is read as its title. */
.sola-content-body ul.sola-cards,
.ck-content ul.sola-cards {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr));
	gap: 1.5rem;
	margin: 2rem 0;
	padding: 0;
	list-style: none;
}

.sola-content-body ul.sola-cards > li,
.ck-content ul.sola-cards > li {
	margin: 0;
	padding: 1.75rem;
	border: 1px solid var(--sola-border);
	border-radius: 1rem;
	background: #fff;
}

/* The editor wraps the content of a list item in a technical span, so the title
   has to be reached through it too, or it stays glued to the text that follows
   while writing and only separates once published. */
.sola-content-body ul.sola-cards > li > strong:first-child,
.ck-content ul.sola-cards > li > strong:first-child,
.ck-content ul.sola-cards > li > span:first-child > strong:first-child {
	display: block;
	margin-bottom: .6rem;
	color: var(--sola-ink);
	font-size: 1.15rem;
	font-weight: 700;
}

/* A carousel is stored as a plain list of images. Before the script runs, and in
   the editor, it stays a readable stack; Splide then lays it out on one row. */
.sola-content-body ul.sola-carousel,
.ck-content ul.sola-carousel {
	margin: 2rem 0;
	padding: 0;
	list-style: none;
}

.sola-content-body ul.sola-carousel > li,
.ck-content ul.sola-carousel > li {
	margin: 0 0 1rem;
}

.sola-content-body ul.sola-carousel img,
.ck-content ul.sola-carousel img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: .75rem;
}

/* Splide styles nothing by itself: the arrows and the dots are ours. */
.sola-content-carousel {
	position: relative;
	margin: 2rem 0;
}

.sola-content-carousel .splide__arrow {
	position: absolute;
	z-index: 1;
	top: 50%;
	width: 2.75rem;
	height: 2.75rem;
	transform: translateY(-50%);
	border: 0;
	border-radius: 50%;
	background: #fff;
	box-shadow: 0 .25rem .75rem rgb(31 45 61 / 18%);
	cursor: pointer;
}

.sola-content-carousel .splide__arrow--prev {
	left: .75rem;
}

.sola-content-carousel .splide__arrow--next {
	right: .75rem;
}

.sola-content-carousel .splide__arrow svg {
	width: 1rem;
	height: 1rem;
	fill: var(--sola-blue);
}

.sola-content-carousel .splide__pagination {
	display: flex;
	justify-content: center;
	gap: .5rem;
	margin: .75rem 0 0;
	padding: 0;
	list-style: none;
}

.sola-content-carousel .splide__pagination__page {
	width: .55rem;
	height: .55rem;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: var(--sola-border);
	cursor: pointer;
}

.sola-content-carousel .splide__pagination__page.is-active {
	background: var(--sola-blue);
}

/* The charter's bullet: green, punctual, as on the home page. */
.sola-content-body ul.sola-checklist,
.ck-content ul.sola-checklist {
	margin: 1.5rem 0;
	padding: 0;
	list-style: none;
}

.sola-content-body ul.sola-checklist > li,
.ck-content ul.sola-checklist > li {
	position: relative;
	margin: 0 0 .75rem;
	padding-left: 1.75rem;
}

.sola-content-body ul.sola-checklist > li::before,
.ck-content ul.sola-checklist > li::before {
	content: "";
	position: absolute;
	top: .55em;
	left: 0;
	width: .6rem;
	height: .6rem;
	border-radius: 50%;
	background: var(--sola-green);
}

/* Key figures: the number opens the item in bold, the rest is its label. */
.sola-content-body ul.sola-figures,
.ck-content ul.sola-figures {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
	gap: 1.5rem;
	margin: 2rem 0;
	padding: 0;
	list-style: none;
	text-align: center;
}

.sola-content-body ul.sola-figures > li,
.ck-content ul.sola-figures > li {
	margin: 0;
}

.sola-content-body ul.sola-figures > li > strong:first-child,
.ck-content ul.sola-figures > li > strong:first-child,
.ck-content ul.sola-figures > li > span:first-child > strong:first-child {
	display: block;
	color: var(--sola-blue);
	font-size: 2.25rem;
	font-weight: 700;
	line-height: 1.1;
}

/* A closing call to action, on the charter's blue ground. Its own quote bar is
   dropped: the shape already reads as a block of its own. */
.sola-content-body blockquote.sola-banner,
.ck-content blockquote.sola-banner {
	margin: 2.5rem 0;
	padding: 2rem;
	border: 0;
	border-radius: 1rem;
	background-image: linear-gradient(135deg, var(--sola-blue) 0%, var(--sola-blue-darker) 100%);
	color: #fff;
	text-align: center;
}

.sola-content-body blockquote.sola-banner p,
.ck-content blockquote.sola-banner p {
	color: #fff;
}

.sola-content-body blockquote.sola-banner h2,
.sola-content-body blockquote.sola-banner h3,
.ck-content blockquote.sola-banner h2,
.ck-content blockquote.sola-banner h3 {
	margin-top: 0;
	color: #fff;
}

/* On the blue ground a blue button reads as a flat rectangle: invert it, the
   same choice the home page makes inside its own call-to-action block. */
.sola-content-body blockquote.sola-banner a.sola-cta,
.ck-content blockquote.sola-banner a.sola-cta {
	background-image: none;
	background-color: #fff;
	color: var(--sola-blue-dark);
}

.sola-content-body p.sola-accroche,
.ck-content p.sola-accroche {
	margin: 1.5rem 0;
	color: var(--sola-ink);
	font-size: 1.2rem;
	line-height: 1.55;
	font-weight: 500;
}