/*
 * Front-end styles of the nazmulrobin-blog plugin, one section per feature.
 * Colours come from the theme's variables, so every rule follows dark mode.
 */

/* Code and tables in a post, which arrive from Markdown as plain HTML without block classes */
.wp-block-post-content :not(pre) > code {
	background: var(--wp--preset--color--accent-5, #f2f2f2);
	border: 1px solid var(--wp--preset--color--accent-6, #ddd);
	border-radius: 5px;
	padding: 0.05em 0.35em;
	font-size: 0.85em;
}

.wp-block-post-content pre {
	background: var(--wp--preset--color--accent-3, #1b2530);
	border-radius: 10px;
	color: #e8edf2;
	padding: 1.1rem 1.25rem;
	overflow-x: auto;
	font-size: 0.85rem;
	line-height: 1.7;
}

/* The parts of a code block, coloured by includes/CodeHighlight.php. A code block is dark in light and in dark mode, so these are fixed. */
.hljs-comment, .hljs-quote {
	color: #8c9ba9;
}

.hljs-keyword, .hljs-literal, .hljs-built_in, .hljs-type, .hljs-meta, .hljs-name, .hljs-selector-tag {
	color: #7bdb4f;
}

.hljs-string, .hljs-number, .hljs-regexp, .hljs-symbol, .hljs-bullet {
	color: #e6c07b;
}

.hljs-title, .hljs-section, .hljs-attr, .hljs-attribute, .hljs-selector-class, .hljs-selector-id {
	color: #7fb7e6;
}

.wp-block-post-content table {
	border-collapse: collapse;
	display: block;
	font-size: 0.9em;
	overflow-x: auto;
	width: 100%;
}

.wp-block-post-content table th, .wp-block-post-content table td {
	border: 1px solid var(--wp--preset--color--accent-6, #ddd);
	padding: 0.5em 0.75em;
	text-align: left;
}

/* Contents list above a post */
.nazmulrobin-toc {
	border: 1px solid var(--wp--preset--color--accent-6, #ddd);
	border-radius: 10px;
	font-size: 0.9rem;
	padding: 1.1rem 1.5rem;
}

.nazmulrobin-toc__title {
	font-size: 0.75rem;
	letter-spacing: 0.08em;
	margin: 0 0 0.4rem;
	opacity: 0.75;
	text-transform: uppercase;
}

.nazmulrobin-toc ol {
	column-gap: 2rem;
	columns: 2 16rem;
	margin: 0;
	padding-left: 1.4rem;
}

.nazmulrobin-toc li {
	break-inside: avoid;
	padding: 0.3rem 0;
}

.nazmulrobin-toc a {
	color: inherit;
	text-decoration: none;
}

.nazmulrobin-toc a:hover {
	text-decoration: underline;
}

.wp-block-post-content h2[id] {
	scroll-margin-top: 3rem;
}

/* Reaction buttons under a post */
.nazmulrobin-reactions {
	align-items: center;
	border-top: 1px solid var(--wp--preset--color--accent-6, #ddd);
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin-top: 2.5rem;
	padding-top: 1.75rem;
	font-size: 0.9rem;
}

.nazmulrobin-reactions__title {
	margin-right: 0.4rem;
	opacity: 0.75;
}

.nazmulrobin-reactions button {
	background: transparent;
	border: 1px solid var(--wp--preset--color--accent-6, #ddd);
	border-radius: 8px;
	color: inherit;
	cursor: pointer;
	align-items: center;
	display: inline-flex;
	font: inherit;
	font-weight: 500;
	gap: 0.45rem;
	min-height: 44px;
	padding: 0 0.9rem;
}

.nazmulrobin-reactions button:hover, .nazmulrobin-reactions button[aria-pressed="true"] {
	border-color: var(--wp--preset--color--accent-2, currentColor);
}

.nazmulrobin-reactions button[aria-pressed="true"] {
	color: var(--wp--preset--color--accent-2, inherit);
}

.nazmulrobin-reactions__count:empty {
	display: none;
}

/* Share links under a post */
.nazmulrobin-share {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: 0 1.25rem;
	margin-top: 0.75rem;
	font-size: 0.9rem;
}

.nazmulrobin-share__title {
	opacity: 0.75;
}

.nazmulrobin-share a, .nazmulrobin-share button {
	align-items: center;
	background: none;
	border: 0;
	color: inherit;
	cursor: pointer;
	display: inline-flex;
	font: inherit;
	gap: 0.4rem;
	min-height: 44px;
	padding: 0;
	text-decoration: none;
}

.nazmulrobin-share button {
	color: var(--wp--preset--color--accent-2, inherit);
	font-weight: 500;
}

.nazmulrobin-share a:hover span, .nazmulrobin-share button:hover span {
	text-decoration: underline;
}

/* The line icons beside the reactions and the share links */
.nazmulrobin-icon {
	flex: none;
}

/* Series: previous and next part under a post, and the list on the Series page */
.nazmulrobin-series {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 1rem;
	margin-top: 2rem;
}

.nazmulrobin-series a {
	border: 1px solid var(--wp--preset--color--accent-6, #ddd);
	border-radius: 10px;
	color: inherit;
	display: flex;
	flex-direction: column;
	gap: 0.35rem;
	padding: 1.1rem 1.25rem;
	text-decoration: none;
}

.nazmulrobin-series a:hover .nazmulrobin-series__title {
	text-decoration: underline;
}

.nazmulrobin-series__label {
	font-size: 0.8em;
	opacity: 0.75;
}

.nazmulrobin-series__title {
	font-weight: 600;
	line-height: 1.35;
}

@media (max-width: 600px) {
	.nazmulrobin-series {
		grid-template-columns: minmax(0, 1fr);
	}

	.nazmulrobin-series__empty {
		display: none;
	}
}

.nazmulrobin-series-list section {
	border-bottom: 1px solid var(--wp--preset--color--accent-6, #ddd);
	padding-block: 28px;
}

.nazmulrobin-series-list h2 {
	font-size: 1.375rem;
	margin: 0;
}

.nazmulrobin-series-list h2 a {
	color: inherit;
	text-decoration: none;
}

.nazmulrobin-series-list h2 a:hover {
	text-decoration: underline;
}

.nazmulrobin-series-list p {
	color: var(--wp--preset--color--accent-4, inherit);
	margin: 8px 0 0;
}

.nazmulrobin-series-list .nazmulrobin-series-list__count {
	color: var(--wp--preset--color--accent-2, inherit);
	font-size: 0.8rem;
}

.nazmulrobin-series-list ol {
	margin: 14px 0 0;
	padding-left: 1.4em;
}

.nazmulrobin-series-list li {
	padding-block: 5px;
}

/* Searched words in search results */
.wp-block-post-title mark, .wp-block-post-excerpt mark {
	background: color-mix(in srgb, var(--wp--preset--color--accent-1, #62CB31) 28%, transparent);
	border-radius: 4px;
	color: inherit;
	padding: 1px 3px;
}