/*
 * █████       █████   ███   █████ ██████████
 *░░███       ░░███   ░███  ░░███ ░░███░░░░███
 * ░███        ░███   ░███   ░███  ░███   ░░███
 * ░███        ░███   ░███   ░███  ░███    ░███
 * ░███        ░░███  █████  ███   ░███    ░███
 * ░███      █  ░░░█████░█████░    ░███    ███
 * ███████████    ░░███ ░░███      ██████████
 *░░░░░░░░░░░      ░░░   ░░░      ░░░░░░░░░░
 *           Lime Web Development
 *         lwd.rocks || hello@lwd.rocks

 * Theme Name: Bloke Dot Org Theme
 * Theme URI: https://bloke.org/
 * Author: Bloke Dot Org
 * Author URI: https://bloke.org/
 * Description: A broadsheet-styled WordPress theme built on Bootstrap 5.
 * Version: 1.0
 * License: GNU General Public License v2 or later
 * License URI: http://www.gnu.org/licenses/gpl-2.0.html
 * Text Domain: bloke
 */

/* -------------------------------------------------------------------------
 * Design tokens
 * ---------------------------------------------------------------------- */
:root {
	--bloke-paper:      #f1ede1;
	--bloke-paper-2:    #ece7d8;
	--bloke-ink:        #1a2036;
	--bloke-ink-soft:   #4a4f63;
	--bloke-rule:       #1a2036;
	--bloke-accent:     #00f320;
	--bloke-accent-ink: #f1ede1;

	--bloke-serif:   "Playfair Display", Georgia, "Times New Roman", serif;
	--bloke-body:    "Lora", Georgia, serif;
	--bloke-mono:    "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;

	--bloke-max: 1180px;
}

/* -------------------------------------------------------------------------
 * Base
 * ---------------------------------------------------------------------- */
body {
	background-color: var(--bloke-paper);
	color: var(--bloke-ink);
	font-family: var(--bloke-body);
	font-size: 1.0625rem;
	line-height: 1.65;
	-webkit-font-smoothing: antialiased;
}

.container {
	max-width: var(--bloke-max);
}

.container--narrow {
	max-width: 760px;
}

a {
	color: var(--bloke-accent);
	text-decoration: none;
}

a:hover {
	color: var(--bloke-ink);
	text-decoration: underline;
	text-underline-offset: 3px;
}

::selection {
	background: var(--bloke-ink);
	color: var(--bloke-paper) !important;
}

/* Utility: monospaced, letter-spaced uppercase labels used throughout. */
.bloke-label {
	font-family: var(--bloke-mono);
	text-transform: uppercase;
	letter-spacing: 0.14em;
	font-size: 0.72rem;
	font-weight: 500;
	color: var(--bloke-ink);
}

/* -------------------------------------------------------------------------
 * Header + navigation
 * ---------------------------------------------------------------------- */
.site-header {
	background: var(--bloke-paper-2);
	border-bottom: 2px solid var(--bloke-rule);
}

.site-header .navbar {
	padding-top: 0.9rem;
	padding-bottom: 0.9rem;
}

.bloke-brand {
	display: flex;
	align-items: center;
	gap: 0.7rem;
}

/* Uploaded logo image — capped so it lines up with the brand wordmark. */
.bloke-brand__logo {
	display: block;
	max-height: 44px;
	width: auto;
}

.bloke-brand__name {
	font-family: var(--bloke-serif);
	font-weight: 800;
	font-size: 1.7rem;
	line-height: 1;
	color: var(--bloke-ink);
}

.bloke-brand:hover .bloke-brand__name {
	color: var(--bloke-ink);
}

/* The 3x3 tile logo mark. */
.bloke-brand__mark {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 3px;
	width: 40px;
	height: 40px;
}

.bloke-brand__mark span {
	background: var(--bloke-accent);
	border-radius: 2px;
}

/* A couple of tiles knocked back to read as an unsolved grid. */
.bloke-brand__mark span:nth-child(2),
.bloke-brand__mark span:nth-child(6),
.bloke-brand__mark span:nth-child(7) {
	background: transparent;
	border: 1.5px solid var(--bloke-accent);
}

.bloke-nav .nav-link {
	font-family: var(--bloke-mono);
	text-transform: uppercase;
	letter-spacing: 0.12em;
	font-size: 0.74rem;
	font-weight: 500;
	color: var(--bloke-ink);
	padding: 0.5rem 0.9rem;
}

.bloke-nav .nav-link:hover {
	color: var(--bloke-accent);
	text-decoration: none;
}

.bloke-toggler {
	border: 1.5px solid var(--bloke-ink);
	border-radius: 4px;
	padding: 0.4rem 0.55rem;
}

.bloke-toggler:focus {
	box-shadow: none;
}

.bloke-toggler .navbar-toggler-icon {
	background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='%231a2036' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

/* -------------------------------------------------------------------------
 * Buttons
 * ---------------------------------------------------------------------- */
.bloke-btn {
	display: inline-block;
	font-family: var(--bloke-mono);
	text-transform: uppercase;
	letter-spacing: 0.1em;
	font-size: 0.78rem;
	font-weight: 500;
	padding: 0.7rem 1.25rem;
	border: 1.5px solid var(--bloke-ink);
	transition: background-color .15s ease, color .15s ease;
	white-space: nowrap;
}

.bloke-btn:hover {
	text-decoration: none;
}

.bloke-btn--solid {
	background: var(--bloke-ink);
	color: var(--bloke-paper);
}

.bloke-btn--solid:hover {
	background: var(--bloke-accent);
	border-color: var(--bloke-accent);
	color: #fff;
}

.bloke-btn--ghost {
	background: transparent;
	color: var(--bloke-ink);
	border-color: transparent;
	padding-left: 0.25rem;
	padding-right: 0.25rem;
}

.bloke-btn--ghost:hover {
	color: var(--bloke-accent);
}

/* Nav "Sign Up" button variant sits inside the mono nav list. */
.bloke-nav .bloke-btn--solid {
	color: var(--bloke-paper);
	margin-left: 0.5rem;
}

.bloke-nav .bloke-btn--solid:hover {
	color: #fff;
}

/* -------------------------------------------------------------------------
 * Masthead
 * ---------------------------------------------------------------------- */
.masthead {
	padding: 2.75rem 0 2.25rem;
}

.masthead__dateline,
.page-lead .masthead__dateline {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 1rem;
	padding-bottom: 0.6rem;
	border-bottom: 2px solid var(--bloke-rule);
	margin-bottom: 2rem;
}

.masthead__edition {
	flex: 1;
	text-align: center;
}

.masthead__title {
	font-family: var(--bloke-serif);
	font-weight: 900;
	text-align: center;
	line-height: 0.95;
	letter-spacing: -0.01em;
	font-size: clamp(3.25rem, 11vw, 7rem);
	margin: 0 0 1.1rem;
}

.masthead__tagline {
	text-align: center;
	letter-spacing: 0.2em;
	font-size: 0.82rem;
	margin: 0 auto 1.9rem;
	max-width: 80ch;
	line-height: 1.9;
}

.masthead__categories .list-inline {
	text-align: center;
	margin: 0 auto 0rem;
}

.masthead__categories .list-inline-item {
	margin: 0 0.9rem;
}

.masthead__categories a {
	text-transform: uppercase;
	letter-spacing: 0.15em;
	font-size: 0.72rem;
	font-weight: 600;
	color: var(--bloke-ink-soft);
	text-decoration: none;
}

.masthead__categories a:hover,
.masthead__categories a:focus {
	color: var(--bloke-accent);
}

.masthead__stats {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.4rem 1.4rem;
	padding: 0.9rem 0;
	border-top: 1px solid var(--bloke-rule);
	border-bottom: 1px solid var(--bloke-rule);
}

.masthead__stat-label {
	color: var(--bloke-ink-soft);
}

.masthead__stat-value {
	color: var(--bloke-ink);
	font-weight: 600;
	margin-left: 0.4rem;
}

/* -------------------------------------------------------------------------
 * Lead story
 * ---------------------------------------------------------------------- */
.lead-story {
	padding: 3rem 0 3.5rem;
}

.lead-story__kicker {
	color: var(--bloke-accent);
	margin-bottom: 1rem;
}

.lead-story__headline {
	font-family: var(--bloke-serif);
	font-weight: 800;
	font-size: clamp(2.4rem, 5.5vw, 3.9rem);
	line-height: 1.02;
	letter-spacing: -0.015em;
	margin-bottom: 1.4rem;
}

.lead-story__body {
	font-style: italic;
	font-size: 1.2rem;
	line-height: 1.65;
	color: var(--bloke-ink);
	max-width: 46ch;
}

.lead-story__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.75rem 1.25rem;
	margin: 2rem 0 1.25rem;
}

.lead-story__note {
	color: var(--bloke-ink-soft);
	letter-spacing: 0.1em;
}

/* -------------------------------------------------------------------------
 * Puzzle figure (Sudoku)
 * ---------------------------------------------------------------------- */
.puzzle-figure {
	margin: 0;
}

.sudoku {
	display: grid;
	grid-template-columns: repeat(9, 1fr);
	aspect-ratio: 1 / 1;
	width: 100%;
	border: 2px solid var(--bloke-ink);
	background: var(--bloke-ink);
	gap: 1px;
}

.sudoku__cell {
	background: var(--bloke-paper);
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: var(--bloke-mono);
	font-weight: 500;
	font-size: clamp(0.9rem, 2.2vw, 1.35rem);
	color: var(--bloke-ink);
	aspect-ratio: 1 / 1;
}

/* Heavier rules between the 3x3 boxes. */
.sudoku__cell:nth-child(9n+4),
.sudoku__cell:nth-child(9n+7) {
	border-left: 2px solid var(--bloke-ink);
}

.sudoku__cell:nth-child(n+28):nth-child(-n+36),
.sudoku__cell:nth-child(n+55):nth-child(-n+63) {
	border-top: 2px solid var(--bloke-ink);
}

.puzzle-figure__caption {
	display: flex;
	justify-content: space-between;
	gap: 1rem;
	margin-top: 0.9rem;
	color: var(--bloke-ink-soft);
}

/* -------------------------------------------------------------------------
 * Sections + listings
 * ---------------------------------------------------------------------- */
.section-rule,
.site-footer__rule {
	border-top: 2px solid var(--bloke-rule);
}

.section-heading {
	color: var(--bloke-accent);
	padding-top: 0.9rem;
	margin-bottom: 1.75rem;
}

.latest {
	padding-bottom: 4rem;
}

.page-lead {
	padding: 2.5rem 0 1rem;
}

.page-lead__title {
	font-family: var(--bloke-serif);
	font-weight: 800;
	font-size: clamp(2.4rem, 6vw, 4rem);
	line-height: 1.03;
	margin: 0;
}

.page-lead__desc {
	font-style: italic;
	color: var(--bloke-ink-soft);
	margin-top: 0.75rem;
}

/* -------------------------------------------------------------------------
 * Post cards
 * ---------------------------------------------------------------------- */
.post-card {
	display: flex;
	flex-direction: column;
	border-top: 1.5px solid var(--bloke-rule);
	padding-top: 1.1rem;
}

.post-card__thumb {
	display: block;
	overflow: hidden;
	margin-bottom: 1rem;
}

.post-card__thumb img {
	width: 100%;
	height: auto;
	display: block;
	filter: grayscale(15%);
	transition: transform .3s ease, filter .3s ease;
}

.post-card__thumb:hover img {
	transform: scale(1.03);
	filter: grayscale(0);
}

.post-card__meta {
	color: var(--bloke-ink-soft);
	margin-bottom: 0.5rem;
}

.post-card__title {
	font-family: var(--bloke-serif);
	font-weight: 700;
	font-size: 1.5rem;
	line-height: 1.15;
	margin-bottom: 0.6rem;
}

.post-card__title a {
	color: var(--bloke-ink);
}

.post-card__title a:hover {
	color: var(--bloke-accent);
	text-decoration: none;
}

.post-card__excerpt {
	color: var(--bloke-ink-soft);
	margin-bottom: 0.9rem;
}

.post-card__more {
	margin-top: auto;
	color: var(--bloke-accent);
}

.post-card__more:hover {
	color: var(--bloke-ink);
	text-decoration: none;
}

.bloke-empty {
	font-style: italic;
	color: var(--bloke-ink-soft);
}

/* -------------------------------------------------------------------------
 * Single post / page
 * ---------------------------------------------------------------------- */
.single {
	padding-bottom: 4rem;
}

.single__header {
	padding: 2.5rem 0 1.5rem;
}

.single__title {
	font-family: var(--bloke-serif);
	font-weight: 800;
	font-size: clamp(2.3rem, 5.5vw, 3.6rem);
	line-height: 1.05;
	letter-spacing: -0.01em;
	margin: 0;
}

.single__hero {
	margin-bottom: 2rem;
}

.single__hero img {
	width: 100%;
	height: auto;
	display: block;
}

.entry-content {
	font-size: 1.15rem;
	line-height: 1.75;
}

.entry-content p {
	margin-bottom: 1.4rem;
}

.entry-content h2,
.entry-content h3,
.entry-content h4 {
	font-family: var(--bloke-serif);
	font-weight: 700;
	margin: 2.2rem 0 1rem;
	line-height: 1.2;
}

.entry-content h2 { font-size: 2rem; }
.entry-content h3 { font-size: 1.6rem; }

.entry-content blockquote {
	border-left: 3px solid var(--bloke-accent);
	padding-left: 1.25rem;
	margin: 1.75rem 0;
	font-style: italic;
	color: var(--bloke-ink-soft);
}

.entry-content img {
	max-width: 100%;
	height: auto;
}

.entry-content a {
	text-decoration: underline;
	text-underline-offset: 3px;
}



.single__tags {
	color: var(--bloke-ink-soft);
}

/* -------------------------------------------------------------------------
 * Pagination
 * ---------------------------------------------------------------------- */
.bloke-pagination {
	margin-top: 3rem;
	border-top: 2px solid var(--bloke-rule);
	padding-top: 1.5rem;
}

.bloke-pagination .page-numbers {
	font-family: var(--bloke-mono);
	text-transform: uppercase;
	letter-spacing: 0.1em;
	font-size: 0.78rem;
	padding: 0.4rem 0.75rem;
	color: var(--bloke-ink);
	border: 1.5px solid transparent;
}

.bloke-pagination .page-numbers.current {
	border-color: var(--bloke-ink);
}

.bloke-pagination a.page-numbers:hover {
	color: var(--bloke-accent);
	text-decoration: none;
}

/* -------------------------------------------------------------------------
 * Footer
 * ---------------------------------------------------------------------- */
.site-footer {
	padding: 2.5rem 0 3rem;
	margin-top: auto;
}

.site-footer__rule {
	margin-bottom: 1.25rem;
}

.site-footer .bloke-label {
	color: var(--bloke-ink-soft);
}

/* -------------------------------------------------------------------------
 * Comments
 * ---------------------------------------------------------------------- */
.comments-area {
	padding-top: 1.5rem;
}

.comments-title {
	font-family: var(--bloke-serif);
	font-weight: 700;
	font-size: 1.6rem;
	margin-bottom: 1.5rem;
}

.comments-area .comment-list {
	list-style: none;
	padding: 0;
	margin-bottom: 2.5rem;
}

/* Threaded replies are indented only — no side rails. */
.comments-area .comment-list ol.children {
	list-style: none;
	padding-left: 1.5rem;
}

/* Long URLs shouldn't blow out the narrow deep-thread column. */
.comments-area .comment-content {
	overflow-wrap: anywhere;
}

/* Relax the indent so deep threads stay readable on phones. */
@media (max-width: 575.98px) {
	.comments-area .comment-list ol.children {
		padding-left: 0.85rem;
	}
}

/* A single bottom rule separates every comment; nothing on the sides. */
.comments-area .comment-body {
	padding: 1rem 0 1.25rem;
	border-bottom: 1.5px solid var(--bloke-rule);
}

/* No trailing rule beneath the final comment (when it has no replies). */
.comments-area .comment-list > li.comment:last-child:not(:has(.children)) > .comment-body {
	border-bottom: none;
}

.comments-area .comment-author {
	font-family: var(--bloke-serif);
	font-weight: 700;
}

.comments-area .comment-metadata,
.comments-area .comment-metadata a,
.comments-area .reply a {
	font-family: var(--bloke-mono);
	text-transform: uppercase;
	letter-spacing: 0.1em;
	font-size: 0.7rem;
	color: var(--bloke-ink-soft);
}

.comments-area .says {
	display: none;
}

.no-comments {
	color: var(--bloke-ink-soft);
	margin-top: 1rem;
}

/* Flush accordion holding the form. Transparent like the page, framed by
   full-width rules top and bottom to match the newspaper dividers used
   elsewhere — no side borders, no Bootstrap blue. */
.bloke-comment-accordion {
	background: transparent;
	--bs-accordion-bg: transparent;
	--bs-accordion-active-bg: transparent;
	--bs-accordion-active-color: var(--bloke-ink);
	--bs-accordion-btn-color: var(--bloke-ink);
	--bs-accordion-btn-focus-box-shadow: none;
	--bs-accordion-btn-focus-border-color: transparent;
	--bs-accordion-border-color: var(--bloke-rule);
	--bs-accordion-btn-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%231a2036'%3e%3cpath d='M2 5L8 11L14 5'/%3e%3c/svg%3e");
	--bs-accordion-btn-active-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%231a2036'%3e%3cpath d='M2 5L8 11L14 5'/%3e%3c/svg%3e");
}

.bloke-comment-accordion .accordion-item {
	background-color: transparent;
	border-left: 0;
	border-right: 0;
}

/* Full-width rule above and below the panel. These :first/:last-child
   selectors match accordion-flush's specificity so they win by source order
   (accordion-flush otherwise strips the top/bottom borders). */
.bloke-comment-accordion .accordion-item:first-child {
	border-top: 2px solid var(--bloke-rule);
}

.bloke-comment-accordion .accordion-item:last-child {
	border-bottom: 2px solid var(--bloke-rule);
}

.bloke-comment-accordion .accordion-button {
	font-family: var(--bloke-mono);
	text-transform: uppercase;
	letter-spacing: 0.12em;
	font-size: 0.8rem;
	font-weight: 500;
	color: var(--bloke-ink);
	background-color: transparent;
	padding: 1.1rem 0;
	box-shadow: none;
}

/* Expanded: stay ink, and rule the header off from the form below it. */
.bloke-comment-accordion .accordion-button:not(.collapsed) {
	color: var(--bloke-ink);
	border-bottom: 1.5px solid var(--bloke-rule);
}

.bloke-comment-accordion .accordion-button:hover,
.bloke-comment-accordion .accordion-button:focus {
	color: var(--bloke-ink);
	background-color: transparent;
	box-shadow: none;
	outline: none;
}

.bloke-comment-accordion .accordion-body {
	padding: 0.5rem 0 1.5rem;
}

/* Hide the in-form reply heading; the accordion button is the heading.
   It reappears only when replying (JS relocates #respond out of the panel). */
.accordion-body .bloke-comment-reply-title {
	display: none;
}

/* Form fields */
.comments-area .form-label {
	margin-bottom: 0.35rem;
	color: var(--bloke-ink-soft);
}

.comments-area .required {
	color: var(--bloke-ink);
}

.comments-area .bloke-input {
	background: var(--bloke-paper-2);
	border: 1.5px solid var(--bloke-rule);
	border-radius: 0;
	color: var(--bloke-ink);
	font-family: var(--bloke-body);
	padding: 0.65rem 0.8rem;
}

.comments-area .bloke-input:focus {
	background: var(--bloke-paper);
	border-color: var(--bloke-accent);
	box-shadow: 0 0 0 0.15rem rgba(0, 243, 32, 0.18);
}

.comments-area .form-submit {
	margin-top: 0.5rem;
	margin-bottom: 0;
}

.comments-area .comment-reply-title {
	font-family: var(--bloke-serif);
	font-weight: 700;
	font-size: 1.3rem;
	margin-bottom: 1rem;
}

.comments-area .comment-reply-title small {
	font-family: var(--bloke-mono);
	font-size: 0.7rem;
	margin-left: 0.75rem;
}

.comment-navigation {
	margin: 1.5rem 0 2rem;
}

/* -------------------------------------------------------------------------
 * Layout: keep footer at the bottom on short pages
 * ---------------------------------------------------------------------- */
body {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
}

.site-main {
	flex: 1 0 auto;
}

/* -------------------------------------------------------------------------
 * Responsive tweaks
 * ---------------------------------------------------------------------- */
@media (max-width: 991.98px) {
	.bloke-nav {
		padding-top: 0.75rem;
	}

	.bloke-nav .nav-link {
		padding-left: 0;
	}

	.bloke-nav .bloke-btn--solid {
		margin-left: 0;
		margin-top: 0.5rem;
		display: inline-block;
	}

	.masthead__dateline {
		flex-wrap: wrap;
	}

	.masthead__edition {
		order: 3;
		flex-basis: 100%;
		text-align: left;
	}
}

@media (max-width: 575.98px) {
	.lead-story__actions {
		flex-direction: column;
		align-items: flex-start;
	}

	.bloke-btn--solid {
		width: 100%;
		text-align: center;
	}
}