/*
 * Scott Dylan — Global Theme Redesign
 * Comprehensive style overrides for the Johannes theme.
 *
 * Applies the same design language as the About page to every part of the site:
 * header, navigation, post cards, single posts, pages, sidebar, footer, forms, and more.
 *
 * Design tokens (mirrored from about-page.css):
 *   --t-dark    #0f1623   primary dark (header, footer, CTA)
 *   --t-mid     #1c2840   secondary dark (stat bands, accents)
 *   --t-accent  #d4aa6e   warm gold (links, hovers, highlights)
 *   --t-text    #374151   body copy
 *   --t-muted   #6b7280   secondary / meta text
 *   --t-line    #e5e7eb   borders / dividers
 *   --t-bg      #f9fafb   page background tint
 *   --t-white   #ffffff
 *
 * Organisation:
 *   01. Design tokens
 *   02. Global base
 *   03. Typography
 *   04. Links
 *   05. Header — desktop
 *   06. Header — top bar
 *   07. Header — branding
 *   08. Navigation — primary menu
 *   09. Navigation — dropdowns
 *   10. Navigation — action icons
 *   11. Header — sticky
 *   12. Header — mobile
 *   13. Off-canvas sidebar & overlay
 *   14. Page section structure
 *   15. Page & post headers
 *   16. Breadcrumbs
 *   17. Entry meta, categories, tags
 *   18. Featured images
 *   19. Entry content typography
 *   20. Post cards (archive / grid)
 *   21. Single post layout
 *   22. Author bio box
 *   23. Related posts
 *   24. Sidebar & widgets
 *   25. Pagination
 *   26. Comments
 *   27. Search form
 *   28. Footer
 *   29. Go-to-top button
 *   30. Homepage — front page sections
 *   31. Utility & misc
 *   32. Responsive — content area
 * -----------------------------------------------------------------------
 */

/* =======================================================================
   01. DESIGN TOKENS
   ======================================================================= */
:root {
	--t-dark:    #0f1623;
	--t-mid:     #1c2840;
	--t-accent:  #d4aa6e;
	--t-accent-h:#c49a57;
	--t-text:    #374151;
	--t-muted:   #6b7280;
	--t-line:    #e5e7eb;
	--t-bg:      #f9fafb;
	--t-white:   #ffffff;
	--t-radius:  10px;
	--t-shadow:  0 4px 24px rgba(0,0,0,.07);
	--t-shadow-lg: 0 12px 40px rgba(0,0,0,.12);
	--t-font:    -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
	--t-container: 1180px;
	--t-transition: .22s ease;
}

/* =======================================================================
   02. GLOBAL BASE
   ======================================================================= */
html {
	scroll-behavior: smooth;
}

body {
	font-family: var(--t-font) !important;
	color: var(--t-text) !important;
	background: var(--t-bg) !important;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

.johannes-wrapper {
	background: var(--t-bg);
}

/* Container max-width */
.container {
	max-width: var(--t-container) !important;
}

/* Sections that sit on the page background */
.johannes-section {
	background: var(--t-white);
}

/* =======================================================================
   03. TYPOGRAPHY
   ======================================================================= */
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
	font-family: var(--t-font) !important;
	color: var(--t-dark) !important;
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: -.02em;
}

h1 { font-size: clamp(1.875rem, 4vw, 2.75rem); }
h2 { font-size: clamp(1.5rem, 3vw, 2.125rem); }
h3 { font-size: clamp(1.25rem, 2.5vw, 1.625rem); }
h4 { font-size: 1.25rem; }
h5 { font-size: 1.0625rem; }
h6 { font-size: .9375rem; }

p { line-height: 1.75; }

/* =======================================================================
   04. LINKS
   ======================================================================= */
a {
	color: var(--t-accent);
	text-decoration: none;
	transition: color var(--t-transition);
}
a:hover,
a:focus {
	color: var(--t-accent-h);
	text-decoration: none;
}

/* Content body links look different — underlined blue */
.entry-content a:not(.wp-block-button__link):not(.sd-about__btn) {
	color: #1d4ed8;
	text-decoration: underline;
	text-underline-offset: 3px;
}
.entry-content a:not(.wp-block-button__link):not(.sd-about__btn):hover {
	color: #1e3a8a;
}

/* =======================================================================
   05. HEADER — DESKTOP
   ======================================================================= */
.johannes-header.johannes-header-main {
	background: var(--t-dark) !important;
	border-bottom: 1px solid rgba(255,255,255,.06);
	box-shadow: 0 2px 20px rgba(0,0,0,.35);
}

.header-top {
	background: var(--t-mid) !important;
	border-bottom: 1px solid rgba(255,255,255,.05);
}

.header-middle,
.header-mobile {
	background: var(--t-dark) !important;
	color: var(--t-white) !important;
}

.header-middle > .container {
	height: 74px !important;
}

/* =======================================================================
   06. HEADER — TOP BAR
   ======================================================================= */
.header-top,
.header-top a,
.header-top nav > ul > li > a,
.header-top .johannes-menu-social a,
.header-top .johannes-menu-action a {
	color: rgba(255,255,255,.65) !important;
	font-size: .8125rem;
	font-weight: 500;
}
.header-top nav > ul > li:hover > a,
.header-top .johannes-menu-action a:hover,
.header-top .johannes-menu-social li:hover a {
	color: var(--t-accent) !important;
}

/* =======================================================================
   07. HEADER — BRANDING
   ======================================================================= */
.johannes-site-branding .site-title,
.johannes-site-branding .site-title a,
.header-middle .johannes-site-branding .site-title a {
	color: var(--t-white) !important;
	font-family: var(--t-font) !important;
	font-weight: 800 !important;
	font-size: 1.375rem;
	letter-spacing: -.03em;
	transition: color var(--t-transition);
}
.johannes-site-branding .site-title a:hover,
.header-mobile .site-title a:hover {
	color: var(--t-accent) !important;
}

.johannes-site-branding .site-description {
	color: rgba(255,255,255,.45) !important;
	font-size: .75rem;
	letter-spacing: .04em;
}

/* Logo image — ensure it doesn't clash */
.johannes-site-branding img {
	max-height: 48px;
	width: auto;
}

/* =======================================================================
   08. NAVIGATION — PRIMARY MENU
   ======================================================================= */
.header-middle .johannes-menu > li > a,
.header-middle a {
	color: rgba(255,255,255,.8) !important;
	font-family: var(--t-font) !important;
	font-size: .875rem;
	font-weight: 600;
	letter-spacing: .03em;
	text-transform: none;
	padding: .5rem .9rem;
	border-radius: 6px;
	transition: color var(--t-transition), background var(--t-transition);
}
.header-middle .johannes-menu > li > a:hover,
.header-middle .johannes-menu > li.current-menu-item > a,
.header-middle .johannes-menu > li.current-menu-ancestor > a,
.header-middle li:hover > a,
.header-middle .current-menu-item > a {
	color: var(--t-accent) !important;
	background: rgba(212,170,110,.08) !important;
}

/* =======================================================================
   09. NAVIGATION — DROPDOWN MENUS
   ======================================================================= */
.header-middle .sub-menu,
.header-sticky-main .sub-menu {
	background: var(--t-dark) !important;
	border: 1px solid rgba(255,255,255,.08) !important;
	border-radius: var(--t-radius) !important;
	box-shadow: var(--t-shadow-lg) !important;
	padding: .5rem 0 !important;
	min-width: 200px;
}

.header-middle .sub-menu li a,
.header-sticky-main .sub-menu li a,
.header-middle .johannes-mega-menu .sub-menu li:hover a {
	color: rgba(255,255,255,.75) !important;
	font-size: .875rem !important;
	font-weight: 500 !important;
	padding: .55rem 1.25rem !important;
	border-radius: 0 !important;
	background: transparent !important;
	transition: color var(--t-transition), padding-left var(--t-transition);
}
.header-middle .sub-menu li a:hover,
.header-middle .johannes-mega-menu .sub-menu li a:hover,
.header-sticky-main .sub-menu li a:hover {
	color: var(--t-accent) !important;
	padding-left: 1.625rem !important;
	background: rgba(212,170,110,.06) !important;
}

/* =======================================================================
   10. NAVIGATION — ACTION ICONS (search, social, hamburger)
   ======================================================================= */
.header-middle .johannes-menu-action a,
.header-middle .johannes-menu-action li a {
	color: rgba(255,255,255,.7) !important;
	font-size: .9375rem;
	transition: color var(--t-transition);
}
.header-middle .johannes-menu-action a:hover {
	color: var(--t-accent) !important;
}

/* hamburger icon */
.johannes-hamburger a i {
	color: rgba(255,255,255,.8);
	transition: color var(--t-transition);
}
.johannes-hamburger a:hover i {
	color: var(--t-accent);
}

/* =======================================================================
   11. HEADER — STICKY
   ======================================================================= */
.header-sticky {
	background: rgba(15,22,35,.97) !important;
	backdrop-filter: saturate(180%) blur(8px);
	-webkit-backdrop-filter: saturate(180%) blur(8px);
	border-bottom: 1px solid rgba(255,255,255,.06);
	box-shadow: 0 4px 24px rgba(0,0,0,.3);
}

.header-sticky-main {
	background: transparent !important;
	color: var(--t-white) !important;
}
.header-sticky-main > .container { height: 64px !important; }
.header-sticky-main a { color: rgba(255,255,255,.8) !important; }
.header-sticky-main li:hover > a,
.header-sticky-main .current-menu-item > a { color: var(--t-accent) !important; }
.header-sticky-main .johannes-site-branding .site-title a { color: var(--t-white) !important; }
.header-sticky-main .johannes-site-branding .site-title a:hover { color: var(--t-accent) !important; }

.header-sticky-contextual {
	background: rgba(255,255,255,.04);
	color: var(--t-white);
	font-size: .875rem;
	border-top: 1px solid rgba(255,255,255,.07);
}

/* =======================================================================
   12. HEADER — MOBILE
   ======================================================================= */
.header-mobile.johannes-header {
	background: var(--t-dark) !important;
	border-bottom: 1px solid rgba(255,255,255,.06);
	padding: .75rem 0;
}
.header-mobile a,
.header-mobile .site-title a {
	color: var(--t-white) !important;
}
.header-mobile a:hover {
	color: var(--t-accent) !important;
}
.header-mobile .site-title {
	font-weight: 800;
	font-size: 1.125rem;
}

/* =======================================================================
   13. OFF-CANVAS SIDEBAR & OVERLAY
   ======================================================================= */
.johannes-sidebar.johannes-sidebar-hidden {
	background: var(--t-dark);
	border-left: 1px solid rgba(255,255,255,.06);
}

.johannes-sidebar-branding {
	background: var(--t-mid);
	border-bottom: 1px solid rgba(255,255,255,.06);
	padding: 1.25rem 1.5rem;
}
.johannes-sidebar-branding .site-title a { color: var(--t-white) !important; }
.johannes-sidebar-branding .site-title a:hover { color: var(--t-accent) !important; }

.johannes-action-close { color: rgba(255,255,255,.6); transition: color var(--t-transition); }
.johannes-action-close:hover { color: var(--t-accent); }

/* Mobile menu inside sidebar */
.johannes-menu-mobile.widget .widget-title {
	color: rgba(255,255,255,.45) !important;
	font-size: .6875rem;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
	border-bottom: 1px solid rgba(255,255,255,.06);
	padding-bottom: .625rem;
	margin-bottom: .75rem;
}
.johannes-sidebar-hidden .johannes-menu li a {
	color: rgba(255,255,255,.75) !important;
	font-weight: 500;
	font-size: .9375rem;
	border-bottom: 1px solid rgba(255,255,255,.05);
	padding: .625rem 0;
	display: block;
	transition: color var(--t-transition), padding-left var(--t-transition);
}
.johannes-sidebar-hidden .johannes-menu li a:hover {
	color: var(--t-accent) !important;
	padding-left: .5rem;
}
.johannes-sidebar-hidden .johannes-menu li.current-menu-item > a { color: var(--t-accent) !important; }

/* Sidebar widgets (in off-canvas) */
.johannes-sidebar-hidden .widget { border-bottom: 1px solid rgba(255,255,255,.06); padding: 1.25rem 0; }
.johannes-sidebar-hidden .widget-title { color: rgba(255,255,255,.45) !important; font-size: .6875rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.johannes-sidebar-hidden .widget a { color: rgba(255,255,255,.7) !important; }
.johannes-sidebar-hidden .widget a:hover { color: var(--t-accent) !important; }

/* Overlay */
.johannes-action-overlay {
	background: rgba(0,0,0,.6);
	backdrop-filter: blur(2px);
}

/* =======================================================================
   14. PAGE SECTION STRUCTURE
   ======================================================================= */
.johannes-section {
	padding-top: 3.5rem;
	padding-bottom: 3.5rem;
}
.johannes-section.johannes-section-margin-alt {
	padding-bottom: 0;
	background: var(--t-white);
}

/* Content section below the header */
.johannes-section + .johannes-section,
.johannes-section-margin-alt + .johannes-section {
	background: var(--t-white);
	padding-top: 2.5rem;
	padding-bottom: 4rem;
}

/* Alt background sections */
.johannes-bg-alt-1 { background: var(--t-bg) !important; }
.johannes-bg-alt-2 { background: var(--t-dark) !important; }

/* Cover / hero section (page layouts 3 & 4) */
.johannes-cover {
	min-height: 420px;
	display: flex;
	align-items: flex-end;
}
.johannes-cover .section-bg::after {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(to top, rgba(15,22,35,.85) 0%, rgba(15,22,35,.3) 60%, transparent 100%);
}
.johannes-cover .section-head-alt {
	position: relative;
	z-index: 2;
	padding: 3rem 0 2.5rem;
}
.johannes-cover .entry-title { color: var(--t-white) !important; }
.johannes-cover .johannes-breadcrumbs span,
.johannes-cover .johannes-breadcrumbs a { color: rgba(255,255,255,.65) !important; }

/* =======================================================================
   15. PAGE & POST HEADERS
   ======================================================================= */
.section-head-alt {
	padding: 3rem 0 2.5rem;
	text-align: center;
}

/* Standard page title section (layouts 1 & 3) */
.section-head-alt-page .entry-title {
	font-size: clamp(2rem, 5vw, 3rem);
	font-weight: 800;
	letter-spacing: -.03em;
	line-height: 1.1;
	color: var(--t-dark) !important;
	margin-bottom: 1rem;
	position: relative;
	display: inline-block;
}
/* Gold accent bar under page title */
.section-head-alt-page .entry-title::after {
	content: '';
	display: block;
	width: 60px;
	height: 3px;
	background: var(--t-accent);
	margin: .75rem auto 0;
	border-radius: 2px;
}

/* Single post title */
.section-head-alt-post .entry-title {
	font-size: clamp(1.875rem, 4.5vw, 2.75rem);
	font-weight: 800;
	letter-spacing: -.03em;
	line-height: 1.12;
	color: var(--t-dark) !important;
	margin-bottom: .75rem;
}
/* Gold accent bar under post title */
.section-head-alt-post .entry-title::after {
	content: '';
	display: block;
	width: 50px;
	height: 3px;
	background: var(--t-accent);
	margin: .75rem auto 0;
	border-radius: 2px;
}

/* Inline title (layouts 2, 5, 6 — inside the article) */
.single-layout-2 .entry-title {
	font-size: clamp(1.75rem, 4vw, 2.5rem);
	font-weight: 800;
	color: var(--t-dark) !important;
}

/* Entry meta in header — tighten spacing */
.section-head-alt .entry-meta {
	margin-top: .75rem;
	justify-content: center;
}
.section-head-alt .entry-category {
	margin-bottom: .625rem;
}

/* =======================================================================
   16. BREADCRUMBS
   ======================================================================= */
.johannes-breadcrumbs,
.johannes-breadcrumbs span,
.johannes-breadcrumbs a {
	font-size: .8125rem;
	font-weight: 500;
	color: var(--t-muted) !important;
	letter-spacing: .02em;
}
.johannes-breadcrumbs a:hover { color: var(--t-accent) !important; }
.johannes-breadcrumbs .sep { color: var(--t-line) !important; margin: 0 .375rem; }

/* =======================================================================
   17. ENTRY META, CATEGORIES, TAGS
   ======================================================================= */
/* Category pill / label */
.entry-category a {
	display: inline-block;
	background: var(--t-accent) !important;
	color: var(--t-dark) !important;
	font-size: .6875rem !important;
	font-weight: 800 !important;
	letter-spacing: .1em;
	text-transform: uppercase;
	padding: .3rem .8rem !important;
	border-radius: 100px !important;
	transition: background var(--t-transition), color var(--t-transition);
}
.entry-category a:hover {
	background: var(--t-accent-h) !important;
	color: var(--t-dark) !important;
}

/* Entry meta (date, author, read time) */
.entry-meta,
.entry-meta a,
.entry-meta span {
	color: var(--t-muted) !important;
	font-size: .8125rem;
	font-weight: 500;
}
.entry-meta a:hover { color: var(--t-accent) !important; }

/* Separator dots between meta items */
.entry-meta .sep { color: var(--t-line) !important; margin: 0 .35rem; }

/* Tags */
.entry-tags { margin-top: 2rem; padding-top: 1.5rem; border-top: 1px solid var(--t-line); }
.entry-tags a,
.wp-block-tag-cloud a {
	display: inline-block;
	margin: .25rem .3rem .25rem 0;
	padding: .35rem .875rem;
	background: var(--t-bg);
	border: 1px solid var(--t-line);
	border-radius: 100px;
	color: var(--t-text) !important;
	font-size: .8125rem;
	font-weight: 500;
	transition: background var(--t-transition), border-color var(--t-transition), color var(--t-transition);
}
.entry-tags a:hover,
.wp-block-tag-cloud a:hover {
	background: var(--t-accent);
	border-color: var(--t-accent);
	color: var(--t-dark) !important;
}
.entry-tags span { color: var(--t-muted); font-size: .8125rem; font-weight: 600; margin-right: .5rem; }

/* Post summary / excerpt highlight */
.entry-summary {
	background: var(--t-bg);
	border-left: 3px solid var(--t-accent);
	border-radius: 0 var(--t-radius) var(--t-radius) 0;
	padding: 1.25rem 1.5rem;
	margin-bottom: 2rem;
	font-style: normal;
	color: var(--t-text);
}
.entry-summary span {
	font-size: .75rem;
	font-weight: 800;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--t-accent);
	display: block;
	margin-bottom: .5rem;
}

/* =======================================================================
   18. FEATURED IMAGES
   ======================================================================= */
.entry-media {
	border-radius: var(--t-radius);
	overflow: hidden;
	margin-bottom: 2.5rem;
	box-shadow: 0 8px 32px rgba(0,0,0,.1), 0 2px 8px rgba(0,0,0,.06);
	position: relative;
}
.entry-media img {
	width: 100%;
	height: auto;
	display: block;
	transition: transform .5s cubic-bezier(.25,.46,.45,.94);
}
.entry-media:hover img { transform: scale(1.03); }

/* No gradient overlay — keep images clean */

/* Caption below featured image */
.wp-caption-text {
	font-size: .8125rem;
	color: var(--t-muted);
	text-align: center;
	padding: .75rem 1rem .25rem;
	font-style: italic;
	line-height: 1.5;
	position: relative;
	z-index: 1;
}

/* =======================================================================
   19. ENTRY CONTENT TYPOGRAPHY
   ======================================================================= */
.entry-content,
.entry-single {
	font-size: 1.125rem;
	line-height: 1.85;
	color: var(--t-text);
	letter-spacing: -.005em;
}

.entry-content > * + * { margin-top: 1.5em; }

/* ── Lead paragraph — first paragraph is slightly larger ── */
.entry-content > p:first-child,
.entry-content > .entry-single > p:first-child {
	font-size: 1.25rem;
	line-height: 1.7;
	color: #1f2937;
}

/* ── Drop cap — only on single posts, not pages ── */
body.single-post .entry-content > p:first-child::first-letter {
	float: left;
	font-size: 3.5em;
	line-height: .85;
	font-weight: 800;
	color: var(--t-dark);
	margin-right: .1em;
	margin-top: .05em;
}

/* ── Headings inside content — decorative left accent ── */
.entry-content h2 {
	margin-top: 2.75em;
	margin-bottom: .75em;
	padding-bottom: .5em;
	border-bottom: 2px solid var(--t-line);
	position: relative;
}
.entry-content h2::after {
	content: '';
	position: absolute;
	bottom: -2px;
	left: 0;
	width: 50px;
	height: 2px;
	background: var(--t-accent);
}

.entry-content h3 {
	margin-top: 2.25em;
	margin-bottom: .625em;
	padding-left: .875rem;
	border-left: 3px solid var(--t-accent);
}

.entry-content h4,
.entry-content h5 {
	margin-top: 2em;
	margin-bottom: .5em;
	color: var(--t-dark) !important;
	text-transform: uppercase;
	font-size: .875rem;
	letter-spacing: .06em;
}

/* ── Lists — custom styling ── */
.entry-content ul,
.entry-content ol {
	padding-left: 1.75rem;
	margin: 1.5em 0;
}
.entry-content ul { list-style: none; }
.entry-content ul > li {
	position: relative;
	padding-left: .5rem;
	margin-bottom: .625em;
}
.entry-content ul > li::before {
	content: '';
	position: absolute;
	left: -.875rem;
	top: .7em;
	width: 6px;
	height: 6px;
	background: var(--t-accent);
	border-radius: 50%;
}
.entry-content ol > li {
	margin-bottom: .625em;
	padding-left: .25rem;
}
.entry-content ol > li::marker {
	color: var(--t-accent);
	font-weight: 700;
}

/* ── Blockquotes ── */
.entry-content blockquote {
	border-left: 4px solid var(--t-accent);
	background: var(--t-bg);
	padding: 1.5rem 2rem;
	margin: 2.5rem 0;
	border-radius: 0 var(--t-radius) var(--t-radius) 0;
	font-style: italic;
	color: var(--t-muted);
	position: relative;
}
.entry-content blockquote::before {
	content: '\201C';
	position: absolute;
	top: -.25rem;
	left: .75rem;
	font-size: 3.5rem;
	color: var(--t-accent);
	opacity: .25;
	font-style: normal;
	line-height: 1;
	font-family: Georgia, serif;
}
.entry-content blockquote p { margin: 0; }
.entry-content blockquote cite {
	display: block;
	margin-top: .75rem;
	font-size: .875rem;
	font-style: normal;
	font-weight: 700;
	color: var(--t-accent);
}

/* ── Code ── */
.entry-content pre,
.entry-content code {
	background: #1e293b;
	color: #e2e8f0;
	border-radius: 6px;
	font-family: 'JetBrains Mono', 'Fira Code', Consolas, monospace;
}
.entry-content code {
	padding: .2em .45em;
	font-size: .85em;
	border-radius: 4px;
}
.entry-content pre {
	padding: 1.5rem 1.75rem;
	overflow-x: auto;
	box-shadow: inset 0 2px 8px rgba(0,0,0,.2);
	margin: 2rem 0;
}
.entry-content pre code { background: none; padding: 0; }

/* ── Images inside content ── */
.entry-content img {
	border-radius: var(--t-radius);
	box-shadow: 0 4px 20px rgba(0,0,0,.08);
	transition: box-shadow .3s ease;
}
.entry-content img:hover {
	box-shadow: 0 8px 32px rgba(0,0,0,.14);
}

/* ── Figures and captions in content ── */
.entry-content figure {
	margin: 2.5rem 0;
}
.entry-content figure img {
	display: block;
	width: 100%;
}
.entry-content figcaption,
.entry-content .wp-caption-text,
.entry-content .wp-element-caption {
	font-size: .8125rem;
	color: var(--t-muted);
	text-align: center;
	margin-top: .625rem;
	font-style: italic;
	line-height: 1.5;
}

/* ── Horizontal rules ── */
.entry-content hr {
	border: none;
	height: 1px;
	background: linear-gradient(to right, transparent, var(--t-line), var(--t-accent), var(--t-line), transparent);
	margin: 3rem 0;
}

/* ── Tables in content ── */
.entry-content table {
	width: 100%;
	border-collapse: collapse;
	margin: 2rem 0;
	font-size: 1rem;
	border-radius: var(--t-radius);
	overflow: hidden;
	box-shadow: 0 1px 4px rgba(0,0,0,.06);
}
.entry-content table th {
	background: var(--t-dark);
	color: var(--t-white);
	font-weight: 700;
	padding: .875rem 1.125rem;
	text-align: left;
	font-size: .875rem;
	letter-spacing: .02em;
}
.entry-content table td {
	padding: .75rem 1.125rem;
	border-bottom: 1px solid var(--t-line);
}
.entry-content table tr:nth-child(even) td { background: var(--t-bg); }
.entry-content table tr:last-child td { border-bottom: none; }

/* ── WordPress block buttons ── */
.entry-content .wp-block-button__link {
	background: var(--t-accent) !important;
	color: var(--t-dark) !important;
	border-radius: 6px !important;
	font-weight: 700 !important;
	padding: .8125rem 2rem !important;
	font-size: .9375rem !important;
	transition: background var(--t-transition), transform var(--t-transition), box-shadow var(--t-transition);
	box-shadow: 0 4px 14px rgba(212,170,110,.25);
}
.entry-content .wp-block-button__link:hover {
	background: var(--t-accent-h) !important;
	transform: translateY(-2px);
	box-shadow: 0 6px 20px rgba(212,170,110,.35);
}
.entry-content .wp-block-button.is-style-outline .wp-block-button__link {
	background: transparent !important;
	color: var(--t-accent) !important;
	border: 2px solid var(--t-accent) !important;
	box-shadow: none;
}
.entry-content .wp-block-button.is-style-outline .wp-block-button__link:hover {
	background: var(--t-accent) !important;
	color: var(--t-dark) !important;
}

/* ── WP block images ── */
.entry-content .wp-block-image {
	margin: 2.5rem 0;
}
.entry-content .wp-block-image img {
	border-radius: var(--t-radius);
	box-shadow: 0 4px 24px rgba(0,0,0,.1);
}
.entry-content .wp-block-image.is-style-rounded img {
	border-radius: 50%;
}

/* ── WP columns block ── */
.entry-content .wp-block-columns {
	margin: 2.5rem 0;
	gap: 2rem;
}
.entry-content .wp-block-column {
	padding: 0;
}

/* ── WP media & text block ── */
.entry-content .wp-block-media-text {
	margin: 2.5rem 0;
	border-radius: var(--t-radius);
	overflow: hidden;
	background: var(--t-bg);
	border: 1px solid var(--t-line);
}
.entry-content .wp-block-media-text .wp-block-media-text__content {
	padding: 2rem;
}

/* ── WP gallery block ── */
.entry-content .wp-block-gallery {
	margin: 2.5rem 0;
	gap: .75rem !important;
}
.entry-content .wp-block-gallery .wp-block-image img {
	border-radius: 8px;
}

/* ── WP cover block ── */
.entry-content .wp-block-cover {
	border-radius: var(--t-radius);
	overflow: hidden;
	margin: 2.5rem 0;
	min-height: 320px;
}

/* ── Strong / bold emphasis ── */
.entry-content strong {
	font-weight: 700;
	color: var(--t-dark);
}

/* ── Mark / highlight ── */
.entry-content mark {
	background: rgba(212,170,110,.2);
	color: inherit;
	padding: .1em .3em;
	border-radius: 3px;
}

/* =======================================================================
   20. POST CARDS — ARCHIVE / GRID
   ======================================================================= */

/* Cards within the post grid */
.johannes-posts .entry-item,
.johannes-items .entry-item {
	background: var(--t-white);
	border: 1px solid var(--t-line);
	border-radius: var(--t-radius);
	overflow: hidden;
	transition: box-shadow var(--t-transition), transform var(--t-transition), border-color var(--t-transition);
	height: 100%;
}
.johannes-posts .entry-item:hover,
.johannes-items .entry-item:hover {
	box-shadow: var(--t-shadow-lg);
	transform: translateY(-4px);
	border-color: rgba(212,170,110,.35);
}

/* Card image */
.entry-item .entry-media {
	border-radius: 0;
	margin: 0;
	aspect-ratio: 16 / 10;
	overflow: hidden;
}
.entry-item .entry-media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Card text area */
.entry-item .entry-inner {
	padding: 1.25rem 1.5rem 1.5rem;
}

/* Card title */
.entry-item .entry-title {
	font-size: 1.0625rem !important;
	font-weight: 700 !important;
	line-height: 1.35 !important;
	margin: .625rem 0 .5rem !important;
	color: var(--t-dark) !important;
	transition: color var(--t-transition);
}
.entry-item .entry-title a { color: inherit !important; }
.entry-item .entry-title a:hover { color: var(--t-accent) !important; }

/* Large / featured card title */
.entry-item.entry-item-1 .entry-title,
.entry-item.style-1 .entry-title {
	font-size: clamp(1.25rem, 2.5vw, 1.625rem) !important;
}

/* Card meta */
.entry-item .entry-meta { margin-top: .5rem; }

/* Card excerpt */
.entry-item .entry-excerpt {
	font-size: .9375rem;
	line-height: 1.65;
	color: var(--t-muted);
	margin-top: .625rem;
}

/* Read more link on cards */
.entry-item .entry-more a,
.entry-item .more-link {
	display: inline-flex;
	align-items: center;
	gap: .375rem;
	margin-top: 1rem;
	font-size: .875rem;
	font-weight: 700;
	letter-spacing: .03em;
	color: var(--t-accent) !important;
}
.entry-item .entry-more a:hover,
.entry-item .more-link:hover { color: var(--t-accent-h) !important; gap: .625rem; }

/* Archive section header (category / tag title) */
.section-archive-1 .section-head {
	padding: 3rem 0 2.5rem;
	border-bottom: 1px solid var(--t-line);
	margin-bottom: 2rem;
}
.section-archive-1 .section-title,
.archive-title {
	font-size: clamp(1.5rem, 3vw, 2.25rem);
	font-weight: 800;
	color: var(--t-dark) !important;
	position: relative;
	display: inline-block;
}
.section-archive-1 .section-title::after {
	content: '';
	display: block;
	width: 50px;
	height: 3px;
	background: var(--t-accent);
	margin: .75rem auto 0;
	border-radius: 2px;
}
.section-archive-1 .section-description {
	margin-top: 1rem;
	font-size: 1.0625rem;
	color: var(--t-muted);
	max-width: 640px;
	margin-inline: auto;
}
.section-archive-1 .section-meta {
	color: var(--t-muted);
	font-size: .875rem;
	font-weight: 500;
	margin-top: .5rem;
}

/* =======================================================================
   21. SINGLE POST & PAGE CONTENT LAYOUT
   ======================================================================= */

/* Force pages to use full-width centered content (no empty sidebar gaps) */
body.page .section-content.row {
	justify-content: center !important;
}
body.page .section-content > .single-md-content {
	flex: 0 0 100% !important;
	max-width: 100% !important;
}
/* Hide empty sidebar columns on pages */
body.page .section-content > .johannes-order-2 {
	display: none;
}

/* Content column */
.single-md-content article.post,
.single-md-content article.page {
	background: var(--t-white);
}

/* Constrain content for comfortable reading */
.single-md-content .entry-content {
	max-width: 800px;
	margin-inline: auto;
}

/* Single posts — keep sidebar if present */
body.single-post .section-content > .johannes-order-2 {
	display: block;
}
body.single-post .section-content > .single-md-content {
	flex: unset !important;
	max-width: unset !important;
}

/* Section containing the page/post header */
.johannes-section.johannes-section-margin-alt {
	border-bottom: none;
	background: var(--t-white) !important;
	padding-top: 2.5rem;
}

/* Featured image within the header section */
.johannes-section-margin-alt .entry-media {
	max-width: 800px;
	margin-inline: auto;
	margin-top: 1rem;
	border-radius: var(--t-radius);
}

/* =======================================================================
   22. AUTHOR BIO BOX
   ======================================================================= */
.entry-author,
.johannes-author {
	background: var(--t-bg);
	border: 1px solid var(--t-line);
	border-radius: var(--t-radius);
	padding: 2rem 2.25rem;
	margin: 3rem 0;
	display: flex;
	gap: 1.5rem;
	align-items: flex-start;
	position: relative;
	overflow: hidden;
}
/* Subtle gold accent stripe on author box */
.entry-author::before,
.johannes-author::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 4px;
	height: 100%;
	background: var(--t-accent);
}
.entry-author .author-avatar img,
.johannes-author .author-avatar img {
	border-radius: 50%;
	width: 80px;
	height: 80px;
	object-fit: cover;
	border: 3px solid var(--t-accent);
	box-shadow: 0 4px 12px rgba(0,0,0,.1);
}
.entry-author .author-name,
.johannes-author h6 {
	font-weight: 800;
	font-size: 1.0625rem;
	color: var(--t-dark);
}
.entry-author .author-name a,
.johannes-author h6 a { color: inherit !important; }
.entry-author .author-name a:hover,
.johannes-author h6 a:hover { color: var(--t-accent) !important; }
.entry-author .author-bio,
.johannes-author .author-description {
	font-size: .9375rem;
	line-height: 1.65;
	color: var(--t-muted);
	margin-top: .4rem;
}
.entry-author .author-links a {
	display: inline-flex;
	align-items: center;
	gap: .375rem;
	font-size: .8125rem;
	font-weight: 700;
	color: var(--t-accent) !important;
	margin-top: .625rem;
}
/* "Written by" label */
.johannes-author .text-small {
	display: block;
	font-size: .6875rem;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--t-accent);
	margin-bottom: .25rem;
}

/* =======================================================================
   23. RELATED POSTS
   ======================================================================= */
.johannes-related {
	background: var(--t-bg);
	padding: 3rem 0;
	border-top: 1px solid var(--t-line);
	margin-top: 2rem;
}
.johannes-related .section-title {
	font-size: 1.125rem;
	font-weight: 800;
	letter-spacing: -.01em;
	color: var(--t-dark) !important;
	text-transform: none;
	padding-bottom: 1.25rem;
	margin-bottom: 1.75rem;
	border-bottom: 2px solid var(--t-accent);
	display: inline-block;
}

/* =======================================================================
   24. SIDEBAR & WIDGETS
   ======================================================================= */
.johannes-sidebar {
	padding-left: .5rem;
}
.widget {
	background: var(--t-white);
	border: 1px solid var(--t-line);
	border-radius: var(--t-radius);
	padding: 1.5rem;
	margin-bottom: 1.5rem;
	box-shadow: 0 1px 4px rgba(0,0,0,.04);
	transition: box-shadow var(--t-transition);
}
.widget:hover {
	box-shadow: 0 4px 16px rgba(0,0,0,.07);
}
.widget-title {
	font-size: .8125rem !important;
	font-weight: 800 !important;
	letter-spacing: .09em;
	text-transform: uppercase !important;
	color: var(--t-dark) !important;
	border-bottom: 2px solid var(--t-accent);
	padding-bottom: .75rem;
	margin-bottom: 1.25rem !important;
}
.widget a { color: var(--t-text) !important; transition: color var(--t-transition); }
.widget a:hover { color: var(--t-accent) !important; }
.widget li {
	border-bottom: 1px solid var(--t-line);
	padding: .5rem 0;
	font-size: .9375rem;
}
.widget li:last-child { border-bottom: none; }

/* Widget inside (used by Johannes for background class) */
.widget-inside { border-radius: inherit; }

/* Widget images (recent posts with thumbnails etc.) */
.widget img {
	border-radius: 6px;
}

/* Search widget */
.widget .search-form {
	display: flex;
	gap: .5rem;
}
.widget .search-form input[type="search"] {
	flex: 1;
	padding: .625rem 1rem;
	border: 1px solid var(--t-line);
	border-radius: 6px;
	font-size: .9375rem;
	background: var(--t-bg);
	color: var(--t-text);
	outline-offset: 2px;
}
.widget .search-form input[type="search"]:focus {
	border-color: var(--t-accent);
	outline: 2px solid rgba(212,170,110,.25);
}
.widget .search-form button,
.widget .search-form input[type="submit"] {
	padding: .625rem 1.125rem;
	background: var(--t-accent);
	color: var(--t-dark);
	border: none;
	border-radius: 6px;
	font-weight: 700;
	font-size: .875rem;
	cursor: pointer;
	transition: background var(--t-transition);
}
.widget .search-form button:hover,
.widget .search-form input[type="submit"]:hover { background: var(--t-accent-h); }

/* =======================================================================
   25. PAGINATION
   ======================================================================= */
.johannes-pagination,
.pagination,
.nav-links,
.page-numbers {
	display: flex;
	flex-wrap: wrap;
	gap: .5rem;
	justify-content: center;
	padding: 2.5rem 0;
	list-style: none;
}
.page-numbers a,
.page-numbers span,
.nav-links a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 42px;
	height: 42px;
	padding: 0 .75rem;
	border-radius: 8px;
	border: 1px solid var(--t-line);
	background: var(--t-white);
	color: var(--t-text) !important;
	font-size: .875rem;
	font-weight: 600;
	text-decoration: none;
	transition: background var(--t-transition), border-color var(--t-transition), color var(--t-transition);
}
.page-numbers a:hover,
.nav-links a:hover {
	background: var(--t-accent);
	border-color: var(--t-accent);
	color: var(--t-dark) !important;
}
.page-numbers.current {
	background: var(--t-dark);
	border-color: var(--t-dark);
	color: var(--t-white) !important;
}
.page-numbers.dots { border: none; background: none; color: var(--t-muted) !important; }
.page-numbers.prev,
.page-numbers.next {
	font-size: .9375rem;
}

/* =======================================================================
   26. COMMENTS
   ======================================================================= */
#comments {
	margin-top: 3rem;
	padding-top: 3rem;
	border-top: 1px solid var(--t-line);
}
#comments .comments-title {
	font-size: 1.125rem;
	font-weight: 800;
	color: var(--t-dark) !important;
	margin-bottom: 2rem;
}

/* Comment list */
.comment-list,
.comment-list .children {
	list-style: none;
	margin: 0;
	padding: 0;
}
.comment-list .comment {
	padding: 1.5rem 0;
	border-bottom: 1px solid var(--t-line);
}
.comment-list .comment:last-child { border-bottom: none; }

.comment-author .fn { font-weight: 700; color: var(--t-dark); }
.comment-meta { font-size: .8125rem; color: var(--t-muted); margin-bottom: .75rem; }
.comment-meta a { color: var(--t-muted) !important; }
.comment-meta a:hover { color: var(--t-accent) !important; }
.comment-content { font-size: .9375rem; line-height: 1.7; }
.comment-reply-link {
	font-size: .8125rem;
	font-weight: 700;
	color: var(--t-accent) !important;
}
.comment-reply-link:hover { color: var(--t-accent-h) !important; }

/* Comment avatars */
.comment-author img {
	border-radius: 50%;
	border: 2px solid var(--t-line);
}

/* Comment form */
#respond {
	background: var(--t-bg);
	border: 1px solid var(--t-line);
	border-radius: var(--t-radius);
	padding: 2rem;
	margin-top: 2.5rem;
}
#respond .comment-reply-title {
	font-size: 1.0625rem;
	font-weight: 800;
	color: var(--t-dark) !important;
	margin-bottom: 1.5rem;
}
#respond .comment-form label {
	display: block;
	font-size: .875rem;
	font-weight: 600;
	color: var(--t-dark);
	margin-bottom: .375rem;
}
#respond .comment-form input,
#respond .comment-form textarea {
	width: 100%;
	padding: .75rem 1rem;
	border: 1px solid var(--t-line);
	border-radius: 8px;
	background: var(--t-white);
	color: var(--t-text);
	font-family: var(--t-font);
	font-size: .9375rem;
	transition: border-color var(--t-transition), box-shadow var(--t-transition);
}
#respond .comment-form input:focus,
#respond .comment-form textarea:focus {
	border-color: var(--t-accent);
	box-shadow: 0 0 0 3px rgba(212,170,110,.2);
	outline: none;
}
#respond .comment-form textarea { resize: vertical; min-height: 140px; }
#respond .form-submit .submit {
	display: inline-flex;
	align-items: center;
	padding: .8125rem 2rem;
	background: var(--t-accent);
	color: var(--t-dark) !important;
	border: none;
	border-radius: 8px;
	font-family: var(--t-font);
	font-size: .9375rem;
	font-weight: 700;
	cursor: pointer;
	transition: background var(--t-transition), transform var(--t-transition);
}
#respond .form-submit .submit:hover {
	background: var(--t-accent-h);
	transform: translateY(-2px);
}

/* =======================================================================
   27. SEARCH FORM (global / page-level)
   ======================================================================= */
.search-form,
.searchform {
	display: flex;
	gap: .5rem;
}
.search-form input[type="search"],
.searchform input[type="text"] {
	flex: 1;
	padding: .75rem 1.125rem;
	border: 1px solid var(--t-line);
	border-radius: 8px 0 0 8px;
	font-size: .9375rem;
	background: var(--t-white);
	color: var(--t-text);
}
.search-form input[type="search"]:focus,
.searchform input[type="text"]:focus {
	border-color: var(--t-accent);
	outline: none;
}
.search-form button,
.search-form input[type="submit"],
.searchform input[type="submit"] {
	padding: .75rem 1.5rem;
	background: var(--t-accent);
	color: var(--t-dark);
	border: none;
	border-radius: 0 8px 8px 0;
	font-weight: 700;
	cursor: pointer;
	font-size: .875rem;
	transition: background var(--t-transition);
}
.search-form button:hover,
.search-form input[type="submit"]:hover,
.searchform input[type="submit"]:hover { background: var(--t-accent-h); }

/* Search results page */
.search .section-head-alt-page .entry-title span {
	color: var(--t-accent);
}

/* =======================================================================
   28. FOOTER
   ======================================================================= */
.johannes-footer {
	background: var(--t-dark) !important;
	color: rgba(255,255,255,.65) !important;
	padding: 3.5rem 0 0;
	border-top: 1px solid rgba(255,255,255,.05);
}

/* Footer widget headings */
.johannes-footer .widget-title {
	color: var(--t-white) !important;
	background: none !important;
	border-color: var(--t-accent) !important;
	font-size: .75rem !important;
}

/* Footer widget text */
.johannes-footer .widget,
.johannes-footer p {
	background: transparent !important;
	border: none !important;
	border-radius: 0 !important;
	padding: 0 !important;
	color: rgba(255,255,255,.6) !important;
	font-size: .9375rem;
	line-height: 1.7;
}

/* Footer links */
.johannes-footer a,
.johannes-footer .widget a {
	color: rgba(255,255,255,.65) !important;
	transition: color var(--t-transition);
}
.johannes-footer a:hover,
.johannes-footer .widget a:hover { color: var(--t-accent) !important; }

/* Footer widget list items */
.johannes-footer .widget li {
	border-color: rgba(255,255,255,.08) !important;
	padding: .45rem 0;
	font-size: .9375rem;
}
.johannes-footer .widget li:last-child { border-bottom: none !important; }

/* Footer widget grid spacer */
.footer-divider {
	border: none;
	border-top: 1px solid rgba(255,255,255,.06);
	margin: 0 0 2.5rem;
}
.johannes-footer-widgets { padding-bottom: 2.5rem; }

/* Copyright bar */
.johannes-copyright {
	border-top: 1px solid rgba(255,255,255,.06);
	padding: 1.25rem 0;
	margin-top: .5rem;
}
.johannes-copyright p {
	font-size: .8125rem;
	color: rgba(255,255,255,.4) !important;
	margin: 0 !important;
	text-align: center;
}
.johannes-copyright a { color: rgba(255,255,255,.5) !important; }
.johannes-copyright a:hover { color: var(--t-accent) !important; }

/* =======================================================================
   29. GO-TO-TOP BUTTON
   ======================================================================= */
.johannes-goto-top {
	background: var(--t-accent) !important;
	color: var(--t-dark) !important;
	border-radius: 50% !important;
	width: 44px !important;
	height: 44px !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	box-shadow: var(--t-shadow) !important;
	transition: background var(--t-transition), transform var(--t-transition) !important;
}
.johannes-goto-top:hover {
	background: var(--t-accent-h) !important;
	transform: translateY(-3px) !important;
}

/* =======================================================================
   30. HOMEPAGE — FRONT PAGE SECTIONS
   ======================================================================= */

/* ─────────────────────────────────────────────
   WELCOME / ABOUT SECTION (wa-layout-1 & 2)
   ───────────────────────────────────────────── */
.johannes-front-wa {
	padding: 7rem 0;
	background: var(--t-dark);
	position: relative;
	overflow: hidden;
}

/* Subtle radial glow in the background */
.johannes-front-wa::before {
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 900px;
	height: 600px;
	background: radial-gradient(ellipse at center, rgba(212,170,110,.08) 0%, transparent 65%);
	pointer-events: none;
}

/* Welcome image — gold-ringed portrait with dramatic shadow */
.johannes-front-wa .entry-media {
	border-radius: 16px;
	overflow: hidden;
	box-shadow: 0 20px 60px rgba(0,0,0,.4), 0 0 0 4px rgba(212,170,110,.5);
	aspect-ratio: 4 / 5;
	max-width: 380px;
	margin-inline: auto;
	position: relative;
	z-index: 1;
}
.johannes-front-wa .entry-media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center top;
	display: block;
}
.johannes-front-wa .entry-media:hover img {
	transform: scale(1.03);
	transition: transform .6s ease;
}

/* Welcome headline — large, white on dark */
.johannes-front-wa .display-1 {
	font-size: clamp(2rem, 4.5vw, 3.25rem) !important;
	font-weight: 800 !important;
	line-height: 1.1 !important;
	letter-spacing: -.035em;
	color: var(--t-white) !important;
	margin-bottom: 1.5rem !important;
}

/* Accent underline on headline */
.johannes-front-wa .display-1::after {
	content: '';
	display: block;
	width: 56px;
	height: 4px;
	background: var(--t-accent);
	border-radius: 2px;
	margin-top: 1rem;
}

/* Welcome body text */
.johannes-front-wa .entry-header p {
	font-size: 1.0625rem;
	line-height: 1.8;
	color: rgba(255,255,255,.72);
	margin-bottom: 1.25rem;
}

/* Welcome CTA button — gold filled */
.johannes-front-wa .johannes-button {
	display: inline-flex;
	align-items: center;
	gap: .5rem;
	background: var(--t-accent) !important;
	color: var(--t-dark) !important;
	border: 2px solid var(--t-accent) !important;
	border-radius: 6px !important;
	padding: .875rem 2.25rem !important;
	font-size: .9375rem !important;
	font-weight: 700 !important;
	letter-spacing: .02em;
	text-decoration: none !important;
	transition: background var(--t-transition), transform .15s ease, box-shadow var(--t-transition);
	box-shadow: 0 4px 20px rgba(212,170,110,.3);
	margin-top: .5rem;
}
.johannes-front-wa .johannes-button:hover {
	background: var(--t-accent-h) !important;
	border-color: var(--t-accent-h) !important;
	transform: translateY(-3px);
	box-shadow: 0 8px 28px rgba(212,170,110,.4);
}

/* ── Welcome layout 3 & 4 (full-width dark cover with bg image) ── */
.johannes-front-wa.johannes-cover {
	min-height: 500px;
	padding: 7rem 0;
}
.johannes-front-wa.johannes-cover .display-1 {
	color: var(--t-white) !important;
}
.johannes-front-wa.johannes-cover .entry-header p,
.johannes-front-wa.johannes-cover .johannes-content p {
	color: rgba(255,255,255,.72);
}
.johannes-front-wa.johannes-cover .johannes-button {
	box-shadow: 0 6px 24px rgba(0,0,0,.25);
}

/* ─────────────────────────────────────────────
   SECTION TITLES ON THE FRONT PAGE
   ───────────────────────────────────────────── */
.home .section-head {
	text-align: center;
	margin-bottom: 3rem;
	padding-bottom: 0;
}

.home .section-title {
	font-size: clamp(1.5rem, 3vw, 2rem) !important;
	font-weight: 800 !important;
	letter-spacing: -.025em;
	color: var(--t-dark) !important;
	text-transform: none !important;
	position: relative;
	display: inline-block;
	margin-bottom: 0 !important;
}

/* Gold bar beneath section title */
.home .section-title::after {
	content: '';
	display: block;
	width: 48px;
	height: 3px;
	background: var(--t-accent);
	margin: .875rem auto 0;
	border-radius: 2px;
}

/* ─────────────────────────────────────────────
   CLASSIC POST LOOP — HOMEPAGE GRID
   ───────────────────────────────────────────── */
.johannes-front-classic {
	padding: 5rem 0 6rem;
	background: var(--t-bg);
}

/* Post cards in the homepage grid — all layout variants */
.johannes-front-classic .johannes-post {
	background: var(--t-white);
	border-radius: var(--t-radius);
	overflow: hidden;
	border: 1px solid var(--t-line);
	transition: box-shadow .25s ease, transform .2s ease, border-color .2s ease;
	height: 100%;
	display: flex;
	flex-direction: column;
}
.johannes-front-classic .johannes-post:hover {
	box-shadow: 0 12px 40px rgba(0,0,0,.1);
	transform: translateY(-5px);
	border-color: rgba(212,170,110,.4);
}

/* Featured image — consistent 16:9 */
.johannes-front-classic .entry-media {
	aspect-ratio: 16 / 10;
	overflow: hidden;
	border-radius: 0;
	margin: 0;
}
.johannes-front-classic .entry-media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .5s ease;
}
.johannes-front-classic .johannes-post:hover .entry-media img {
	transform: scale(1.05);
}

/* Header and content areas inside cards */
.johannes-front-classic .entry-header,
.johannes-front-classic .entry-content {
	padding: 1.5rem 1.5rem 0;
}
.johannes-front-classic .entry-footer {
	padding: 1rem 1.5rem 1.5rem;
	margin-top: auto;
}

/* Category pill */
.johannes-front-classic .entry-category .cat-item,
.johannes-front-classic .entry-category a {
	display: inline-block;
	font-size: .7rem !important;
	font-weight: 700 !important;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--t-dark) !important;
	background: rgba(212,170,110,.18);
	border: 1px solid rgba(212,170,110,.3);
	padding: .25rem .75rem;
	border-radius: 100px;
	text-decoration: none;
}
.johannes-front-classic .entry-category .cat-item:hover,
.johannes-front-classic .entry-category a:hover {
	background: var(--t-accent);
	color: var(--t-dark) !important;
	border-color: var(--t-accent);
}

/* Card title */
.johannes-front-classic .entry-title {
	font-size: 1.125rem !important;
	font-weight: 700 !important;
	line-height: 1.35 !important;
	color: var(--t-dark) !important;
	margin: .625rem 0 0 !important;
	letter-spacing: -.01em;
}
.johannes-front-classic .entry-title a {
	color: inherit !important;
	text-decoration: none !important;
}
.johannes-front-classic .entry-title a:hover {
	color: var(--t-accent) !important;
}

/* Card meta */
.johannes-front-classic .entry-meta {
	font-size: .8125rem;
	color: var(--t-muted);
	margin-top: .625rem;
}

/* Card excerpt */
.johannes-front-classic .entry-content p,
.johannes-front-classic .entry-content {
	font-size: .9375rem !important;
	line-height: 1.65 !important;
	color: var(--t-muted) !important;
	margin-top: .625rem;
}

/* Read more in cards */
.johannes-front-classic .johannes-button-secondary {
	font-size: .8125rem !important;
	font-weight: 700 !important;
	color: var(--t-accent) !important;
	background: transparent !important;
	border: none !important;
	padding: 0 !important;
	text-decoration: none !important;
	display: inline-flex;
	align-items: center;
	gap: .25rem;
	letter-spacing: .04em;
	text-transform: uppercase;
}
.johannes-front-classic .johannes-button-secondary:hover {
	color: var(--t-accent-h) !important;
	gap: .5rem;
}

/* ─────────────────────────────────────────────
   FEATURED AREA (front page)
   ───────────────────────────────────────────── */
.johannes-front-featured {
	padding: 5rem 0;
	background: var(--t-white);
	border-top: 1px solid var(--t-line);
}

/* Featured post cards */
.johannes-front-featured .johannes-post {
	border-radius: var(--t-radius);
	overflow: hidden;
	border: 1px solid var(--t-line);
	transition: box-shadow .25s ease, transform .2s ease;
	background: var(--t-white);
}
.johannes-front-featured .johannes-post:hover {
	box-shadow: var(--t-shadow-lg);
	transform: translateY(-4px);
}

/* Featured image */
.johannes-front-featured .entry-media {
	aspect-ratio: 16 / 9;
	overflow: hidden;
}
.johannes-front-featured .entry-media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .5s ease;
}
.johannes-front-featured .johannes-post:hover .entry-media img {
	transform: scale(1.04);
}

/* ─────────────────────────────────────────────
   CUSTOM CONTENT SECTIONS
   ───────────────────────────────────────────── */
.johannes-front-custom-content {
	padding: 5rem 0;
	background: var(--t-bg);
}
.johannes-front-custom-content .johannes-custom-content {
	font-size: 1.0625rem;
	line-height: 1.8;
	color: var(--t-text);
}
.johannes-front-custom-content .johannes-custom-content img {
	border-radius: var(--t-radius);
	box-shadow: 0 8px 28px rgba(0,0,0,.1);
}

/* ─────────────────────────────────────────────
   SECTION BACKGROUND ASSIGNMENTS
   ───────────────────────────────────────────── */

/* Classic post section sits on the light-gray background */
.home .johannes-front-classic {
	background: var(--t-bg);
}

/* Welcome section is always dark */
.home .johannes-front-wa {
	background: var(--t-dark);
}

/* Alternate remaining sections */
.home .johannes-front-featured,
.home .johannes-front-cpt { background: var(--t-white); }
.home .johannes-front-shop { background: var(--t-bg); }

/* ─────────────────────────────────────────────
   FRONT PAGE RESPONSIVE
   ───────────────────────────────────────────── */
@media (max-width: 991px) {
	.johannes-front-wa {
		padding: 5rem 0;
	}
	.johannes-front-wa .entry-media {
		max-width: 320px;
		margin-bottom: 3rem;
	}
	.johannes-front-wa .entry-header {
		text-align: left;
	}
}

@media (max-width: 767px) {
	.johannes-front-wa {
		padding: 4rem 0;
	}
	.johannes-front-wa .entry-media {
		max-width: 260px;
		margin-bottom: 2.5rem;
	}
	.johannes-front-classic {
		padding: 3.5rem 0 4.5rem;
	}
	.home .section-title {
		font-size: 1.5rem !important;
	}
}

/* =======================================================================
   31. UTILITY & MISC
   ======================================================================= */

/* Skip link */
.skip-link:focus {
	background: var(--t-accent);
	color: var(--t-dark);
	padding: .75rem 1.5rem;
	border-radius: 0 0 var(--t-radius) var(--t-radius);
	font-weight: 700;
	z-index: 99999;
}

/* WordPress alignment utilities */
.alignleft  { float: left; margin: .5rem 1.75rem 1rem 0; }
.alignright { float: right; margin: .5rem 0 1rem 1.75rem; }
.aligncenter { display: block; margin-inline: auto; }
.alignwide  { max-width: 1100px; margin-inline: auto; }
.alignfull  { max-width: none; margin-inline: -2rem; }

/* WP block image captions */
.wp-caption-text,
figcaption {
	font-size: .8125rem;
	color: var(--t-muted);
	text-align: center;
	margin-top: .625rem;
	font-style: italic;
	line-height: 1.5;
}

/* Image round corner on standalone img blocks */
.wp-block-image img {
	border-radius: var(--t-radius);
	box-shadow: 0 4px 20px rgba(0,0,0,.08);
}

/* Separator block */
.wp-block-separator {
	border: none;
	height: 1px;
	background: linear-gradient(to right, transparent, var(--t-line), var(--t-accent), var(--t-line), transparent);
	margin: 3rem auto;
}
.wp-block-separator.is-style-wide { max-width: 100%; }
.wp-block-separator.is-style-dots {
	background: none;
	text-align: center;
	color: var(--t-accent);
	letter-spacing: .75em;
	font-size: 1.25rem;
}

/* Quote block */
.wp-block-quote {
	border-left: 4px solid var(--t-accent);
	background: var(--t-bg);
	padding: 1.5rem 2rem;
	margin: 2.5rem 0;
	border-radius: 0 var(--t-radius) var(--t-radius) 0;
}
.wp-block-quote p { color: var(--t-text); font-style: italic; }
.wp-block-quote cite { color: var(--t-accent); font-weight: 700; font-style: normal; font-size: .875rem; }

/* Pullquote block */
.wp-block-pullquote {
	border-color: var(--t-accent);
	color: var(--t-dark);
	padding: 2rem;
	margin: 2.5rem 0;
}
.wp-block-pullquote blockquote {
	border: none;
	padding: 0;
}
.wp-block-pullquote blockquote p {
	font-size: 1.375rem;
	font-weight: 600;
	line-height: 1.5;
	color: var(--t-dark);
}

/* Cover block overlay tint */
.wp-block-cover {
	border-radius: var(--t-radius);
	overflow: hidden;
}

/* Table block */
.wp-block-table table {
	border-collapse: collapse;
	width: 100%;
	font-size: .9375rem;
	border-radius: var(--t-radius);
	overflow: hidden;
}
.wp-block-table th {
	background: var(--t-dark);
	color: var(--t-white);
	padding: .875rem 1.125rem;
	font-weight: 700;
	text-align: left;
}
.wp-block-table td {
	padding: .75rem 1.125rem;
	border-bottom: 1px solid var(--t-line);
	color: var(--t-text);
}
.wp-block-table tr:nth-child(even) td { background: var(--t-bg); }
.wp-block-table tr:last-child td { border-bottom: none; }

/* No results block */
.content-none { text-align: center; padding: 4rem 2rem; }
.content-none h2 { font-size: 1.5rem; color: var(--t-dark) !important; margin-bottom: 1rem; }
.content-none p  { color: var(--t-muted); margin-bottom: 1.5rem; }

/* 404 page */
.error404 .container-404 {
	text-align: center;
	padding: 5rem 0;
	align-items: center;
}
.error404 .container-404 .h0 {
	font-size: clamp(5rem, 14vw, 10rem);
	font-weight: 900;
	color: var(--t-accent) !important;
	line-height: 1;
	display: block;
	letter-spacing: -.04em;
}
.error404 .container-404 .title-404 {
	font-size: clamp(1.25rem, 3vw, 1.75rem);
	font-weight: 700;
	color: var(--t-dark) !important;
	margin-top: 1rem;
}
.error404 .search-alt p {
	color: var(--t-muted);
	font-size: 1.0625rem;
	line-height: 1.7;
	margin-bottom: 1.5rem;
}

/* =======================================================================
   32. RESPONSIVE — CONTENT AREA
   ======================================================================= */
@media (max-width: 991px) {
	/* Sidebar stacks below content on tablet — add spacing */
	.johannes-sidebar {
		padding-left: 0;
		margin-top: 3rem;
		padding-top: 2rem;
		border-top: 1px solid var(--t-line);
	}

	/* Let content breathe on tablet */
	.single-md-content article.post,
	.single-md-content article.page {
		padding: 1rem 0 1.5rem;
	}
}

@media (max-width: 767px) {
	/* Reduce vertical spacing on mobile */
	.johannes-section {
		padding-top: 2.5rem;
		padding-bottom: 2.5rem;
	}

	/* Content typography scales down */
	.entry-content,
	.entry-single {
		font-size: 1.0625rem;
		line-height: 1.8;
	}
	.entry-content > p:first-child {
		font-size: 1.125rem;
	}

	/* Drop cap smaller on mobile */
	body.single-post .entry-content > p:first-child::first-letter {
		font-size: 2.75em;
	}

	/* Featured image — less shadow on mobile */
	.entry-media {
		box-shadow: 0 4px 16px rgba(0,0,0,.08);
	}

	/* Author box stacks vertically */
	.entry-author,
	.johannes-author {
		flex-direction: column;
		align-items: center;
		text-align: center;
		padding: 1.5rem;
	}
	.entry-author .author-avatar img,
	.johannes-author .author-avatar img {
		width: 72px;
		height: 72px;
	}

	/* Content headings — tighten spacing on mobile */
	.entry-content h2 { margin-top: 2em; }
	.entry-content h3 { margin-top: 1.75em; }

	/* Floated images go full-width on mobile */
	.alignleft,
	.alignright {
		float: none;
		margin: 1.5rem auto;
		display: block;
	}
}

@media (max-width: 479px) {
	/* Section heading title bar adjustment */
	.section-head-alt {
		padding: 2rem 0 1.75rem;
	}
	.section-head-alt-page .entry-title {
		font-size: 1.75rem;
	}
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		transition-duration: .01ms !important;
		animation-duration: .01ms !important;
		animation-iteration-count: 1 !important;
	}
}

/* Print */
@media print {
	.johannes-header,
	.header-sticky,
	.johannes-footer,
	.johannes-goto-top,
	.entry-tags,
	.johannes-related,
	#respond { display: none !important; }
	body { background: #fff !important; color: #000 !important; }
	a { color: #000 !important; text-decoration: underline; }
}