/*
GDV Aroma Blog — the single article page's own components.

Only what the plugin's own markup needs. Everything else on this page (title,
byline, separators, body copy) is theme-owned and stays that way.
*/

/*
The open-access badge, under the title and above the byline.

A pill, not the theme's .blog-notice-green bar. The bar is the notice system:
full width, solid green, sized to interrupt. Interrupting is right for "this
article is not published yet, do not pass the link on" and wrong here, where the
message is good news a reader glances at once and then reads past. So: the
card's green and its small-caps voice (.gdv-ab-card__flag--open in blog.css), at
badge weight instead of banner weight.

Tokens read through var() fallbacks, like blog.css, so the badge still renders
correctly if the theme is not present.
*/
.gdv-ab-open-access {
	display: flex;
	align-items: baseline;
	justify-content: center;
	/* Separates the icon from the sentence, and nothing else: the sentence is
	one span, so the date keeps the single space the translated string gives it
	instead of picking up this gap as a second one. */
	gap: 0.45em;

	/* fit-content + auto margins: the pill is as wide as its text and sits on
	the same centre axis as the title and the byline. */
	width: fit-content;
	max-width: 100%;
	margin: 0 auto 0.5em auto;
	padding: 0.3em 0.9em;

	/* A hairline at 45% rather than the full green: at pill size a solid green
	outline draws harder than the words inside it. */
	border: 1px solid #a7c0c0;
	border: 1px solid color-mix(in srgb, var(--green, #427a7b) 45%, #ffffff);
	border-radius: 999px;
	/* Flat fallback first for anything without color-mix (pre-2023 browsers):
	they get the plain tint, not a broken transparent pill. */
	background: #eef3f3;
	background: color-mix(in srgb, var(--green, #427a7b) 10%, #ffffff);
	color: var(--green, #427a7b);

	font-size: 0.875rem;
	/* Sentence case, not the card flag's small-caps. The flag can carry small
	caps because it is a solid colour bar reading as a label; at pill size the
	same treatment turns an abbreviated date ("t.e.m. 30 sep. 2026") into a run
	of undersized capitals and gives the badge a formal, printed voice. */
	line-height: 1.4;
	text-align: center;
}

/*
Compound selector, not the bare class: this file loads before the theme's
style.css, so it loses any equal-specificity tie. Same load-order problem as
.fe-blog-membership.gdv-ab-notify-confirmed in front.css.
*/
.gdv-ab-open-access .gdv-ab-open-access__icon {
	/* Under the text size: the icon marks the badge, it does not compete with
	the words. */
	width: 0.9em;
	height: 0.9em;
	fill: none;
	stroke: currentColor;
	color: inherit;
	flex-shrink: 0;
}

/*
The date is the one thing a reader is actually looking for here, so it is the
one thing set in weight. Not a colour change: a second colour inside a coloured
pill reads as two messages.
*/
.gdv-ab-open-access__date {
	font-weight: 600;
}

@media (prefers-color-scheme: dark) {
	/*
	The tinted-white fill turns into a near-black one: on the dark page the pill
	has to sit a shade above its background, not glow. The border and the text
	carry the green.
	*/
	.gdv-ab-open-access {
		background: #2a3434;
		background: color-mix(in srgb, var(--green, #427a7b) 22%, #212121);
		color: #cfe0e0;
		border-color: color-mix(in srgb, var(--green, #427a7b) 60%, #212121);
	}
}

/*
Article table of contents
Built by assets/js/article-toc.js from the headings as rendered.

Three columns on a wide screen: this panel on the left, the article, then the
existing author sidebar on the right.

Fixed, not sticky. A theme that makes the body or its wrapper a scroll container
silently disables position: sticky for everything inside it, which neve-child
does. A fixed panel attached straight to the body is unaffected by that whatever
the theme does.
*/
.gdv-toc-panel {
	position: fixed;

	/*
	Anchored below the header rather than vertically centred. Centring put it over
	the logo and breadcrumbs whenever the page sat at the top. It is also hidden
	until the reader scrolls past the header, so the two can never collide.
	*/
	top: 4rem;
	left: 1rem;

	opacity: 0;
	visibility: hidden;
	transition: opacity 0.25s ease;

	/*
	Article plus sidebar is about 1048px wide and centred, so the free margin is
	50vw - 524px. Take that minus breathing room, capped, so the panel can never
	reach the article text.
	*/
	width: min( 300px, calc( 50vw - 556px ) );

	/*
	Stops short of the reader bar rather than running to the foot of the screen.
	The panel is fixed to the body and the bar is fixed over the same corner, so
	a section list long enough to fill the window used to end underneath it, and
	the panel's higher z-index drew those last entries straight over the bar's
	controls.

	4rem is the top offset above, and 4.5rem clears the 3.75rem bar with a little
	air, so the two never meet whatever the article's length.
	*/
	max-height: calc( 100vh - 8.5rem );
	overflow-y: auto;
	scrollbar-width: thin;
	z-index: 20;
}

.gdv-toc-panel.is-visible {
	opacity: 1;
	visibility: visible;
}

.gdv-toc-panel h2.gdv-toc-title {
	font-family: Lato, sans-serif;
	font-size: 1rem;
	font-weight: bold;
	line-height: 1.3;
	letter-spacing: normal;
	color: var(--text-color, #444444);
	text-align: left;
	text-transform: none;
	margin: 0 0 0.75em 0;
}

.gdv-toc ul,
.gdv-toc li {
	list-style: none;
	list-style-type: none;
	margin: 0;
	padding: 0;
}

.gdv-toc li {
	margin-bottom: 0.35em;
}

/*
No underline at rest, unlike a link in prose. The site-wide rule is a 2px gold
line at a 1.5px offset, which is right for the occasional link in a paragraph
and wrong for a stacked list: a contents panel of eight questions wrapping to
three or four lines each turns into roughly twenty-five gold rules in a narrow
column, and that density is the loudest thing on an article page.

Nothing is lost by dropping it. In a vertical list the indent and position
already say these are links, the sub-sections keep their own colour, and the
current item keeps its bar. The underline comes back on hover and focus, where
it is a response to the reader rather than permanent decoration.
*/
.gdv-toc a {
	display: block;
	font-size: 1rem;
	line-height: 1.4;
	color: var(--text-color, #444444);
	border-left: 3px solid transparent;
	padding: 0.2em 0 0.2em 0.6em;
	text-decoration: none;
}

/* The jump to the comments sits apart from the article sections. */
.gdv-toc .gdv-toc-comments {
	margin-top: 0.9em;
	padding-top: 0.7em;
	border-top: 1px solid var(--grey, #d6d6d6);
}

/* The like button, between the last section and the jump to the comments. It
takes the same rule above it as that jump does, so the sections end once and the
two actions read as one group beneath them. */
.gdv-toc .gdv-toc-heart {
	margin-top: 0.9em;
	padding-top: 0.7em;
	padding-left: 0.6em;
	border-top: 1px solid var(--grey, #d6d6d6);
}

/* Where the heart is present the comments entry follows it directly, so its own
rule would draw a second line a few pixels below the first. */
.gdv-toc .gdv-toc-heart + .gdv-toc-comments {
	margin-top: 0;
	padding-top: 0;
	border-top: 0;
}

/*
Panel only. On a narrow screen the same nav is moved into the collapsed block
under the article title, which the reader opens once before they have read
anything: a heart there asks for a verdict on an article nobody has started.
*/
.gdv-toc-inline .gdv-toc-heart {
	display: none;
}

/*
The reader bar, for every screen the panel above cannot reach.

Pinned to the bottom edge and shown while the article is on screen. Its z-index
is deliberately low for a fixed element: anything the site draws over the bottom
of the screen to ask the reader a question should come out on top of a bar of
tools, and does so without either side knowing about the other.
*/
.gdv-reader-bar {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 15;

	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem;
	padding: 0.5rem max( 0.75rem, env( safe-area-inset-left ) );
	padding-bottom: max( 0.5rem, env( safe-area-inset-bottom ) );

	/*
	A literal colour, not var(--nv-site-bg). That token is deliberately set to
	`transparent` at the top of this file to overwrite the Neve Customizer, and a
	var() fallback does not help: the fallback is used only when the property is
	undefined, never when it is defined as something unwanted. The first version
	used it and the bar came out see-through, with the article running straight
	underneath the heart.
	*/
	background: #ffffff;
	border-top: 1px solid var(--grey, #d6d6d6);
	box-shadow: 0 -2px 12px rgba( 0, 0, 0, 0.07 );

	opacity: 0;
	visibility: hidden;
	transform: translateY( 100% );
	transition: opacity 0.25s ease, transform 0.25s ease;
}

.gdv-reader-bar.is-visible {
	opacity: 1;
	visibility: visible;
	transform: translateY( 0 );
}


@media (prefers-reduced-motion: reduce) {
	.gdv-reader-bar {
		transition: none;
	}
}

.gdv-reader-bar__sections {
	background: none;
	border: 0;
	box-shadow: none;
	padding: 0.4rem 0;
	color: var(--text-color, #444444);
	font-family: Lato, sans-serif;
	font-size: 1rem;
	font-weight: bold;
	line-height: 1;
	letter-spacing: normal;
	text-transform: none;
	cursor: pointer;

	/* The row has no second line to fall to, so on a narrow screen the label
	gives up its width before the controls beside it do. Left, not the centre a
	button aligns its text to by default: once the label is cut it has to be cut
	at the end. */
	min-width: 0;
	text-align: left;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.gdv-reader-bar__sections:hover,
.gdv-reader-bar__sections:focus {
	background: none;
	color: var(--hover, #f0605c);
}

/* min-width: 0 so this shrinks rather than pushing the row past the right edge:
a flex item's floor is its content width until it is told otherwise, and the
chat button's label is whatever the chat's settings screen was given. */
.gdv-reader-bar__controls {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	min-width: 0;
}

/* The chat's own button is a full theme button in the article. In a bar it has
to sit beside two icons without becoming the loudest thing on the screen.

Capped at half the screen and cut with an ellipsis past that. A label of a few
words, which is what fr_FR and nl_BE turn a short English one into, otherwise
carries the whole row off the side of a phone. */
.gdv-reader-bar__controls .gdv-chat-open {
	padding: 0.5rem 0.9rem;
	font-size: 0.9rem;
	line-height: 1.2;
	min-height: 2.75rem;
	max-width: 50vw;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* The sections sheet, over the bar rather than beside it: on a phone there is
no beside. */
/* Spelled out rather than left to the browser's own [hidden] rule. This theme
has form for setting display on elements that carry the attribute, and an
overlay that ignores it would sit over the article permanently. */
.gdv-reader-sheet[hidden] {
	display: none !important;
}

.gdv-reader-sheet {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;

	/* Above the table-of-contents panel, which on a wide screen occupies the left
	margin the full-width sheet opens across. The sheet is something the reader
	has just asked for, so it wins that overlap. */
	z-index: 21;
	max-height: 70vh;
	overflow-y: auto;
	/* The sheet is drawn over the bar, so its own foot has to clear the bar's
	3.75rem or the last section in the list sits under the controls. */
	padding: 1.25rem 1rem calc( 4.25rem + env( safe-area-inset-bottom ) );
	background: #ffffff;
	border-top: 1px solid var(--grey, #d6d6d6);
	box-shadow: 0 -4px 20px rgba( 0, 0, 0, 0.12 );
}

/* The title and the way out share one row, so the cross sits where a reader
looks for it rather than below the list they are trying to leave. */
.gdv-reader-sheet__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem;
	margin-bottom: 0.6em;
}

.gdv-reader-sheet__title {
	font-family: Lato, sans-serif;
	font-size: 1rem;
	font-weight: bold;
	line-height: 1.3;
	letter-spacing: normal;
	color: var(--text-color, #444444);
	margin: 0;
}

/* Qualified with the sheet: Neve styles a bare `button` with the primary-button
background and padding, and a single class does not reliably outrank that.

The negative margins pull the 2.75rem touch target back out to the sheet's own
padding, so the cross keeps a thumb-sized box without pushing the title down. */
.gdv-reader-sheet .gdv-reader-sheet__close {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	min-width: 2.75rem;
	min-height: 2.75rem;
	margin: -0.5rem -0.5rem -0.5rem 0;
	padding: 0;
	background: none;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	color: var(--text-color, #444444);
	cursor: pointer;
}

.gdv-reader-sheet .gdv-reader-sheet__close:is(:hover, :focus, :active) {
	background: none;
	box-shadow: none;
	color: var(--hover, #f0605c);
}

.gdv-reader-sheet__close-icon {
	width: 1.4rem;
	height: 1.4rem;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.75;
	stroke-linecap: round;
}

/* Both surfaces are opaque panels laid over the article, so they need the dark
palette spelled out rather than inherited from a page that has none. */
@media (prefers-color-scheme: dark) {
	.gdv-reader-bar,
	.gdv-reader-sheet {
		background: var(--darkmode-bg, #212121);
		border-top-color: var(--darkmode-border-color, #3a3a3a);
	}

	.gdv-reader-bar {
		box-shadow: 0 -2px 12px rgba( 0, 0, 0, 0.5 );
	}

	.gdv-reader-sheet {
		box-shadow: 0 -4px 20px rgba( 0, 0, 0, 0.6 );
	}

	.gdv-reader-bar__sections,
	.gdv-reader-sheet__title,
	.gdv-reader-sheet .gdv-reader-sheet__close {
		color: var(--darkmode-text-color, #fcfcfc);
	}
}

/* The bar covers the foot of the page, so the last lines of an article would sit
permanently underneath it. Its controls are 2.75rem tall inside 0.5rem of padding
either side, so the bar itself is 3.75rem and this clears it with a little air. */
body.single-gdv_article {
	padding-bottom: 5rem;
}

/* The newsletter popup pins itself to the same bottom edge, 320px wide against the
right margin at z-index 9999, which is exactly where the bar keeps the heart, the
save toggle and the way into the chat. It wins on z-index, so on a phone it covers
all three. The bar owns the bottom of an article, so the popup starts above it.

The rule belongs here rather than in gdv-mailjet-sign-up because this stylesheet
loads only where the bar is drawn, on a single gdv_article. That plugin ships to
sites with no reader bar and must not carry an offset for one. */
body.single-gdv_article #gdv-mj-popup {
	bottom: 3.75rem;
	border-radius: 12px;
}

/* Sub-sections read as subordinate through the indent, not a smaller size. */
.gdv-toc .gdv-toc-h3 a {
	padding-left: 1.8em;
	color: var(--grey-text, #797979);
}

.gdv-toc a:hover,
.gdv-toc a:focus {
	color: var(--hover, #f0605c);
	text-decoration: underline;
}

.gdv-toc a.is-current {
	color: var(--green, #427a7b);
	border-left-color: var(--yellow, #e1ad4e);
	font-weight: bold;
}

/*
Below the panel breakpoint: a collapsed block under the article title.
*/
.gdv-toc-inline {
	margin: 0 0 1.5em 0;
	padding: 0.5em 1em;
	background-color: #fcfcf8;
	border-left: 4px solid var(--yellow, #e1ad4e);
}

.gdv-toc-inline > summary {
	cursor: pointer;
	font-weight: bold;
	padding: 0.25em 0;
}

.gdv-toc-inline[open] > summary {
	margin-bottom: 0.5em;
}

@media (prefers-color-scheme: dark) {
	.gdv-toc-inline {
		background-color: var(--darkmode-bg, #212121);
	}

	.gdv-toc a {
		color: var(--darkmode-text-color, #fcfcfc);
	}

	.gdv-toc-panel h2.gdv-toc-title {
		color: var(--darkmode-text-color, #fcfcfc);
	}
}