/*
Theme Name: BOFK
Description: Custom theme for Biuro Obsługi Finansowo-Księgowej Tomasz Talar. Quiet luxury enterprise architecture.
Author: BOFK
Version: 1.1.0
Text Domain: bofk
*/

/* ==========================================================================
   1. Root Variables & Theme Tokens (2026 Quiet Luxury Standard)
   ========================================================================== */
:root {
	--bofk-red: #d91c1a;
	--bofk-red-hover: #b51513;
	--bofk-bg: #ffffff;
	--bofk-dark: #111215;
	--bofk-dark-secondary: #202024;
	--bofk-text-main: #222328;
	--bofk-muted: #666670;
	--bofk-separator: rgba(17, 18, 21, 0.12);
	--bofk-border-subtle: #eae8e3;
	--bofk-header-height: 84px;
	--bofk-topbar-height: 40px;
	
	/* 2026 Recommended Accents & Shadows */
	--bofk-glass-bg: #ffffff;
	--bofk-glass-border: rgba(17, 18, 21, 0.08);
	--bofk-shadow-elegant: 0 4px 25px rgba(0, 0, 0, 0.06);
	--bofk-shadow-card: 0 12px 36px -8px rgba(17, 18, 21, 0.06);
	--bofk-shadow-hover: 0 20px 48px -10px rgba(217, 28, 26, 0.18);
	--bofk-transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

/* ==========================================================================
   2. Reset, Base Typography & Helpers
   ========================================================================== */
*, *::before, *::after {
	box-sizing: border-box;
}

html {
	scroll-behavior: smooth;
}

body {
	margin: 0;
	padding: 0;
	font-family: poppins, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
	font-size: 15px;
	line-height: 1.6;
	font-weight: 400;
	color: var(--bofk-text-main);
	background-color: var(--bofk-bg);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	overflow-x: hidden;
}

h1, h2, h3, h4, h5, h6 {
	font-family: poppins, sans-serif;
	font-weight: 600;
	color: var(--bofk-dark);
	line-height: 1.25;
	margin: 0 0 20px;
}

h1 { font-size: clamp(30px, 4vw, 44px); }
h2 { font-size: clamp(24px, 3vw, 34px); }
h3 { font-size: clamp(20px, 2.2vw, 26px); }
h4 { font-size: clamp(18px, 1.8vw, 20px); }
h5, h6 { font-size: 16px; }

p {
	margin: 0 0 20px;
}

img {
	max-width: 100%;
	height: auto;
	display: block;
}

a {
	color: inherit;
	text-decoration: none;
}

ul, ol {
	margin: 0;
	padding: 0;
	list-style: none;
}

/* ==========================================================================
   3. Global Layout Containers
   ========================================================================== */
.bofk-container {
	width: 100%;
	max-width: 1300px;
	margin: 0 auto;
	padding: 0 44px;
}

.bofk-container--header {
	width: 100%;
	padding: 0 44px;
}

main#bofk-content {
	min-height: 40vh;
	width: 100%;
}

.bofk-page-wrapper {
	padding: 60px 0 100px;
}

.bofk-entry-content {
	max-width: 860px;
	margin: 0 auto;
	font-size: 16.5px;
	line-height: 1.8;
}

.bofk-entry-content p {
	margin-bottom: 24px;
}

/* ==========================================================================
   4. 2026 Quiet Luxury Ambient Canvas (Harvey.ai + Carmine Signature)
   ========================================================================== */
.bofk-blog-canvas {
	background-color: #FAFAF9;
	background-image: 
		radial-gradient(100% 70% at 50% 0%, rgba(255, 255, 255, 0.98) 0%, rgba(250, 250, 249, 0.85) 50%, rgba(244, 242, 238, 0.6) 100%),
		radial-gradient(60% 40% at 90% 8%, rgba(227, 6, 19, 0.018) 0%, transparent 75%),
		radial-gradient(50% 50% at 10% 45%, rgba(242, 240, 236, 0.5) 0%, transparent 100%),
		linear-gradient(180deg, #FFFFFF 0%, #FAFAF9 40%, #F5F4F0 100%);
	position: relative;
	width: 100%;
	min-height: 100vh;
}

.bofk-blog-outer-wrap {
	width: 100%;
	max-width: 1680px;
	margin: 0 auto;
	padding: 0 40px;
	min-width: 0;
}

.bofk-blog-explorer-inner {
	padding: 80px calc(100% / 12) 160px;
	min-width: 0;
}

/* ==========================================================================
   5. Top Section: Harvey.ai Timeline Announcements Carousel
   ========================================================================== */
.bofk-announcements-section {
	padding: 0;
	background: transparent;
	position: relative;
	width: 100%;
	min-width: 0;
}

.bofk-announcements-inner {
	padding-top: 100px;
	padding-bottom: 60px;
}

.bofk-announcements-header {
	margin-bottom: 44px;
}

.bofk-announcements-title {
	font-family: ivymode, "Playfair Display", Georgia, serif;
	font-size: clamp(32px, 3.6vw, 48px);
	font-weight: 400;
	color: #111215;
	letter-spacing: -0.015em;
	line-height: 1.2;
	margin: 0;
}

.bofk-timeline-container {
	position: relative;
	width: 100%;
	min-width: 0;
}

.bofk-timeline-track {
	display: flex;
	gap: 0;
	overflow-x: auto;
	scroll-behavior: smooth;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
	-ms-overflow-style: none;
	padding-bottom: 24px;
	min-width: 0;
}

.bofk-timeline-track::-webkit-scrollbar {
	display: none;
}

.bofk-timeline-item {
	flex: 0 0 310px;
	min-width: 310px;
	display: flex;
	flex-direction: column;
	padding-right: 36px;
	text-decoration: none;
	color: inherit;
	cursor: pointer;
}

.bofk-timeline-date {
	font-family: poppins, sans-serif;
	font-size: clamp(24px, 2.4vw, 32px);
	font-weight: 600;
	color: #111215;
	letter-spacing: -0.02em;
	line-height: 1;
	margin-bottom: 14px;
	transition: color 0.25s ease;
}

.bofk-timeline-line-wrap {
	position: relative;
	height: 12px;
	margin-bottom: 16px;
}

.bofk-timeline-line {
	position: absolute;
	left: -2px;
	top: 5px;
	width: 100%;
	height: 1px;
	background-color: rgba(17, 18, 21, 0.16);
}

.bofk-timeline-line::before {
	content: "";
	position: absolute;
	left: 0;
	top: -2.5px;
	width: 6px;
	height: 6px;
	background-color: #111215;
	transform: rotate(45deg);
	transition: transform 0.25s ease, background-color 0.25s ease;
}

.bofk-timeline-text {
	font-family: poppins, sans-serif;
	font-size: 15px;
	color: #666670;
	line-height: 1.45;
	margin: 0;
	max-width: 255px;
	transition: color 0.25s ease, transform 0.25s ease;
}

.bofk-timeline-item:hover .bofk-timeline-date {
	color: var(--bofk-red);
}

.bofk-timeline-item:hover .bofk-timeline-line::before {
	background-color: var(--bofk-red);
	transform: rotate(45deg) scale(1.25);
}

.bofk-timeline-item:hover .bofk-timeline-text {
	color: #111215;
	transform: translateY(2px);
}

.bofk-timeline-nav {
	display: flex;
	justify-content: flex-end;
	gap: 10px;
	margin-top: 16px;
}

.bofk-timeline-btn {
	width: 42px;
	height: 42px;
	border-radius: 4px;
	background-color: #f1f1f3;
	border: 1px solid rgba(17, 18, 21, 0.08);
	color: #111215;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	transition: all 0.2s ease;
}

.bofk-timeline-btn svg {
	width: 18px;
	height: 18px;
	transition: transform 0.2s ease;
}

.bofk-timeline-btn:hover:not(:disabled) {
	background-color: #111215;
	color: #ffffff;
}

.bofk-timeline-btn:disabled {
	opacity: 0.35;
	cursor: not-allowed;
	pointer-events: none;
}

/* ==========================================================================
   6. Main Section: Harvey.ai 1:1 Blog Explorer (Sticky 50/50 Desktop)
   ========================================================================== */
.bofk-blog-explorer-section {
	padding: 0;
	background: transparent;
	border-top: 1px solid #111215;
	position: relative;
	width: 100%;
	min-width: 0;
	scroll-margin-top: 84px;
}

.bofk-blog-explorer-layout {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0;
	align-items: stretch;
	min-width: 0;
	max-width: 100%;
}

.bofk-blog-sidebar {
	position: relative;
	width: 100%;
	min-width: 0;
	max-width: 100%;
	padding-right: 60px;
}

.bofk-blog-sidebar-sticky {
	position: -webkit-sticky;
	position: sticky;
	top: 118px;
	display: flex;
	flex-direction: column;
	height: calc(100vh - 140px);
	max-height: 680px;
	min-width: 0;
	max-width: 100%;
}

.bofk-blog-cat-list {
	display: flex;
	flex-direction: column;
	gap: 14px;
	min-width: 0;
	max-width: 100%;
}

.bofk-cat-btn {
	background: transparent;
	border: none;
	padding: 0;
	margin: 0;
	text-align: left;
	cursor: pointer;
	font-family: ivymode, "Playfair Display", Georgia, serif;
	font-size: clamp(32px, 2.6vw, 40px);
	font-weight: 400;
	line-height: 1.15;
	color: #111215;
	opacity: 0.45;
	transition: opacity 0.25s ease, transform 0.25s ease;
	outline: none;
	display: block;
}

.bofk-cat-btn:hover {
	opacity: 1;
	transform: translateX(4px);
}

.bofk-cat-btn.bofk--active {
	opacity: 1;
	font-weight: 400;
}

.bofk-blog-search-wrap {
	margin-top: 40px;
	margin-bottom: auto;
	width: 100%;
	min-width: 0;
}

.bofk-blog-search-box {
	position: relative;
	width: 100%;
	max-width: 320px;
}

.bofk-blog-search-input {
	width: 100%;
	height: 48px;
	border: 1px solid rgba(17, 18, 21, 0.22);
	border-radius: 6px;
	padding: 0 44px 0 16px;
	font-family: poppins, sans-serif;
	font-size: 14px;
	color: #111215;
	background: transparent;
	transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
	outline: none;
}

.bofk-blog-search-input:focus {
	border-color: #111215;
	background: #ffffff;
	box-shadow: 0 0 0 1px #111215;
}

.bofk-blog-search-input::placeholder {
	color: rgba(17, 18, 21, 0.45);
}

.bofk-blog-search-icon {
	position: absolute;
	right: 16px;
	top: 50%;
	transform: translateY(-50%);
	width: 18px;
	height: 18px;
	color: rgba(17, 18, 21, 0.45);
	pointer-events: none;
}

.bofk-blog-articles-col {
	min-width: 0;
	max-width: 100%;
	align-self: start;
}

.bofk-blog-articles-list {
	display: flex;
	flex-direction: column;
	min-width: 0;
	max-width: 100%;
}

.bofk-article-row {
	border-bottom: 1px solid rgba(17, 18, 21, 0.12);
	padding-bottom: 28px;
	margin-bottom: 28px;
	transition: opacity 0.3s ease, transform 0.3s ease;
	min-width: 0;
	max-width: 100%;
}

.bofk-article-row:last-child {
	border-bottom: none;
	margin-bottom: 0;
	padding-bottom: 0;
}

.bofk-article-row-link {
	display: flex;
	gap: 28px;
	align-items: flex-start;
	text-decoration: none;
	color: inherit;
	min-width: 0;
	max-width: 100%;
}

.bofk-article-row-thumb {
	width: 250px;
	min-width: 250px;
	aspect-ratio: 16 / 9;
	border-radius: 6px;
	overflow: hidden;
	position: relative;
	background-color: #141518;
	transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
	flex-shrink: 0;
}

.bofk-article-img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

.bofk-article-thumb-placeholder {
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;
	transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

.bofk-article-thumb-placeholder--1 {
	background: linear-gradient(135deg, #18191c 0%, #292b30 100%);
}

.bofk-article-thumb-placeholder--2 {
	background: linear-gradient(135deg, #1b1919 0%, #2f2525 100%);
}

.bofk-article-thumb-placeholder--3 {
	background: linear-gradient(135deg, #14171a 0%, #202730 100%);
}

.bofk-placeholder-overlay {
	position: absolute;
	inset: 0;
	background: radial-gradient(circle at 50% 50%, rgba(227, 6, 19, 0.12) 0%, transparent 70%);
	pointer-events: none;
}

.bofk-placeholder-badge {
	font-family: poppins, sans-serif;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.22em;
	color: rgba(255, 255, 255, 0.45);
	text-transform: uppercase;
	position: relative;
	z-index: 1;
}

.bofk-article-row-body {
	display: flex;
	flex-direction: column;
	flex: 1;
	min-width: 0;
	max-width: 100%;
	transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.bofk-article-row-tag {
	font-family: poppins, sans-serif;
	font-size: 12.5px;
	font-weight: 600;
	color: #e30613;
	margin-bottom: 6px;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.bofk-article-row-title {
	font-family: poppins, sans-serif;
	font-size: clamp(18px, 1.8vw, 22px);
	font-weight: 500;
	color: #111215;
	line-height: 1.35;
	margin: 0 0 10px;
	transition: color 0.25s ease;
}

.bofk-article-row-date {
	font-family: poppins, sans-serif;
	font-size: 13px;
	color: #777780;
}

.bofk-article-row-link:hover .bofk-article-row-title {
	color: var(--bofk-red);
}

.bofk-article-row-link:hover .bofk-article-row-thumb {
	transform: translateY(-2px);
}

.bofk-article-row-link:hover .bofk-article-img,
.bofk-article-row-link:hover .bofk-article-thumb-placeholder {
	transform: scale(1.04);
}

.bofk-no-filter-results {
	padding: 48px 0;
	text-align: center;
	font-family: poppins, sans-serif;
	font-size: 15px;
	color: #777780;
}

/* ==========================================================================
   7. Single Post Editorial Template (single.php) — Bespoke 2026 Quiet Luxury
   ========================================================================== */
.bofk-single-canvas {
	padding-top: 40px;
	padding-bottom: 0;
}

.bofk-single-header {
	width: 100%;
	padding: 24px 0 28px;
}

.bofk-single-header-inner {
	max-width: 820px;
	margin: 0 auto;
	padding: 0 24px;
}

.bofk-single-pre-header {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 22px;
	flex-wrap: wrap;
}

.bofk-single-back-link {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-family: poppins, sans-serif;
	font-size: 13px;
	font-weight: 500;
	color: #777782;
	text-decoration: none;
	transition: color 0.2s ease, transform 0.2s ease;
}

.bofk-single-back-link svg {
	width: 14px;
	height: 14px;
	transition: transform 0.2s ease;
}

.bofk-single-back-link:hover {
	color: var(--bofk-red);
	transform: translateX(-2px);
}

.bofk-single-cat-sep {
	color: #d8d6d2;
	font-size: 13px;
}

.bofk-single-cat-badge {
	font-family: poppins, sans-serif;
	font-size: 12px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--bofk-red);
	text-decoration: none;
	transition: opacity 0.2s ease;
}

.bofk-single-cat-badge:hover {
	opacity: 0.8;
}

.bofk-single-title {
	font-family: ivymode, "Playfair Display", Georgia, serif;
	font-size: clamp(32px, 4.2vw, 50px);
	font-weight: 400;
	color: #111215;
	letter-spacing: -0.025em;
	line-height: 1.16;
	margin: 0 0 20px;
}

.bofk-single-meta {
	display: flex;
	align-items: center;
	gap: 8px;
	font-family: poppins, sans-serif;
	font-size: 13.5px;
	color: #777782;
	margin-bottom: 28px;
}

.bofk-single-meta-sep {
	color: #cfcdc8;
}

.bofk-single-lead {
	margin-bottom: 36px;
	padding-top: 24px;
	border-top: 1px solid rgba(17, 18, 21, 0.08);
}

.bofk-single-lead p {
	font-family: poppins, sans-serif;
	font-size: clamp(18px, 1.9vw, 21px);
	line-height: 1.68;
	color: #2c2d34;
	margin: 0;
	font-weight: 400;
}

.bofk-single-media-wrap {
	max-width: 1060px;
	margin: 36px auto 52px;
	padding: 0 24px;
}

.bofk-single-media-container {
	position: relative;
	width: 100%;
	aspect-ratio: 16 / 9;
	border-radius: 12px;
	overflow: hidden;
	background: #111215;
	box-shadow: 0 16px 44px -8px rgba(17, 18, 21, 0.08);
}

.bofk-single-featured-img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.bofk-single-body-wrap {
	width: 100%;
}

.bofk-single-body-inner {
	max-width: 820px;
	margin: 0 auto;
	padding: 0 24px;
}

/* ==========================================================================
   Editorial Prose Typography System
   ========================================================================== */
.bofk-article-prose {
	font-family: poppins, sans-serif;
	font-size: 17.5px;
	line-height: 1.84;
	color: #2b2c33;
}

.bofk-article-prose p {
	margin-bottom: 28px;
}

.bofk-article-prose h2 {
	font-family: ivymode, "Playfair Display", Georgia, serif;
	font-size: clamp(26px, 3.1vw, 36px);
	font-weight: 400;
	color: #111215;
	letter-spacing: -0.02em;
	line-height: 1.22;
	margin: 56px 0 20px;
}

.bofk-article-prose h3 {
	font-family: poppins, sans-serif;
	font-size: clamp(19px, 2vw, 22px);
	font-weight: 600;
	color: #111215;
	letter-spacing: -0.01em;
	line-height: 1.35;
	margin: 38px 0 16px;
}

/* Custom Minimalist Red-Dash Bullets */
.bofk-article-prose ul {
	list-style: none;
	padding-left: 0;
	margin: 28px 0 34px;
}

.bofk-article-prose ul > li {
	position: relative;
	padding-left: 24px;
	margin-bottom: 12px;
	line-height: 1.78;
	color: #2b2c33;
}

.bofk-article-prose ul > li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 13px;
	width: 10px;
	height: 1.5px;
	border-radius: 1px;
	background-color: var(--bofk-red);
	opacity: 0.95;
}

/* Custom Serif-Italic Numbered Lists (01., 02., 03.) */
.bofk-article-prose ol {
	list-style: none;
	counter-reset: bofk-editorial-counter;
	padding-left: 0;
	margin: 28px 0 34px;
}

.bofk-article-prose ol > li {
	counter-increment: bofk-editorial-counter;
	position: relative;
	padding-left: 36px;
	margin-bottom: 14px;
	line-height: 1.78;
	color: #2b2c33;
}

.bofk-article-prose ol > li::before {
	content: counter(bofk-editorial-counter, decimal-leading-zero) ".";
	position: absolute;
	left: 0;
	top: 0;
	font-family: ivymode, Georgia, serif;
	font-size: 15px;
	font-style: italic;
	color: var(--bofk-red);
	font-weight: 400;
}

.bofk-article-prose strong {
	font-weight: 600;
	color: #111215;
}

.bofk-article-prose em {
	font-style: italic;
	color: #18191d;
}

/* Bespoke Minimalist Underline for Links */
.bofk-article-prose a {
	color: #111215;
	text-decoration: underline;
	text-decoration-color: rgba(217, 28, 26, 0.45);
	text-underline-offset: 4px;
	text-decoration-thickness: 1.5px;
	transition: text-decoration-color 0.2s ease, color 0.2s ease;
}

.bofk-article-prose a:hover {
	color: var(--bofk-red);
	text-decoration-color: var(--bofk-red);
}

/* Minimalist Inline Code */
.bofk-article-prose code {
	font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
	font-size: 0.86em;
	padding: 2px 7px;
	background: rgba(17, 18, 21, 0.04);
	border: 1px solid rgba(17, 18, 21, 0.08);
	border-radius: 4px;
	color: #111215;
	font-weight: 500;
}

/* Pure Editorial Blockquote (No heavy AI boxes) */
.bofk-article-prose blockquote {
	margin: 48px 0;
	padding: 10px 0 10px 32px;
	border-left: 2px solid var(--bofk-red);
	background: transparent;
	border-radius: 0;
}

.bofk-article-prose blockquote p {
	font-family: ivymode, Georgia, serif;
	font-size: clamp(20px, 2.2vw, 24px);
	font-style: italic;
	line-height: 1.55;
	color: #111215;
	margin: 0;
	letter-spacing: -0.01em;
}

/* Editorial Horizontal Rule */
.bofk-article-prose hr {
	border: none;
	height: 1px;
	background: rgba(17, 18, 21, 0.08);
	margin: 52px 0;
}

/* ==========================================================================
   Article Footer: Integrated Editorial Signature & Share Bar
   ========================================================================== */
.bofk-single-footer {
	width: 100%;
	margin-top: 36px;
}

.bofk-single-footer-inner {
	max-width: 820px;
	margin: 0 auto;
	padding: 24px 24px 32px;
	border-top: 1px solid rgba(17, 18, 21, 0.1);
}

.bofk-single-author-block {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 28px;
	flex-wrap: wrap;
}

.bofk-author-info {
	display: flex;
	align-items: center;
	gap: 16px;
	flex: 1;
	min-width: 260px;
}

.bofk-author-avatar {
	width: 48px;
	height: 48px;
	border-radius: 50%;
	object-fit: cover;
	object-position: center top;
	border: 1px solid rgba(17, 18, 21, 0.1);
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
	flex-shrink: 0;
	display: block;
}

.bofk-author-meta {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.bofk-author-name {
	font-family: poppins, sans-serif;
	font-size: 15px;
	font-weight: 600;
	color: #111215;
	line-height: 1.2;
}

.bofk-author-bio {
	font-family: poppins, sans-serif;
	font-size: 13px;
	color: #6b6c75;
	margin: 0;
	line-height: 1.45;
}

.bofk-single-share-inline {
	display: flex;
	align-items: center;
	gap: 12px;
	flex-shrink: 0;
}

.bofk-share-label {
	font-family: poppins, sans-serif;
	font-size: 12px;
	font-weight: 500;
	color: #888892;
	text-transform: uppercase;
	letter-spacing: 0.06em;
}

.bofk-share-icons {
	display: flex;
	align-items: center;
	gap: 8px;
}

.bofk-share-icon-btn {
	width: 36px;
	height: 36px;
	border-radius: 50%;
	border: 1px solid rgba(17, 18, 21, 0.12);
	display: flex;
	align-items: center;
	justify-content: center;
	color: #44454d;
	background: transparent;
	cursor: pointer;
	text-decoration: none;
	transition: all 0.2s ease;
}

.bofk-share-icon-btn svg {
	width: 15px;
	height: 15px;
}

.bofk-share-icon-btn:hover {
	border-color: var(--bofk-red);
	color: var(--bofk-red);
	background: rgba(217, 28, 26, 0.04);
	transform: translateY(-1px);
}

.bofk-share-copy-btn.bofk--copied {
	border-color: #1a8754;
	color: #1a8754;
	background: rgba(26, 135, 84, 0.06);
}

/* Related Articles Grid */
.bofk-single-related-section {
	border-top: 1px solid rgba(17, 18, 21, 0.1);
	padding: 44px 0 72px;
	width: 100%;
}

.bofk-single-related-inner {
	max-width: 1440px;
	margin: 0 auto;
	padding: 0 40px;
}

.bofk-related-header {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	margin-bottom: 36px;
}

.bofk-related-title {
	font-family: ivymode, Georgia, serif;
	font-size: clamp(26px, 2.8vw, 36px);
	font-weight: 400;
	color: #111215;
	margin: 0;
}

.bofk-related-view-all {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-family: poppins, sans-serif;
	font-size: 13.5px;
	font-weight: 500;
	color: #777782;
	text-decoration: none;
	transition: color 0.2s ease;
}

.bofk-related-view-all svg {
	width: 15px;
	height: 15px;
}

.bofk-related-view-all:hover {
	color: var(--bofk-red);
}

.bofk-related-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 28px;
}

.bofk-related-card {
	display: flex;
	flex-direction: column;
	gap: 14px;
	text-decoration: none;
	color: inherit;
	transition: transform 0.25s ease;
}

.bofk-related-card:hover {
	transform: translateY(-3px);
}

.bofk-related-card-thumb {
	position: relative;
	width: 100%;
	aspect-ratio: 16 / 9;
	border-radius: 8px;
	overflow: hidden;
	background: #111215;
}

.bofk-related-card-thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.4s ease;
}

.bofk-related-card:hover .bofk-related-card-thumb img {
	transform: scale(1.03);
}

.bofk-related-card-thumb-fallback {
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	background: linear-gradient(135deg, #111215 0%, #202128 100%);
}

.bofk-related-fallback-tag {
	font-family: poppins, sans-serif;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.2em;
	color: rgba(255, 255, 255, 0.4);
}

.bofk-related-card-content {
	display: flex;
	flex-direction: column;
	gap: 5px;
}

.bofk-related-card-cat {
	font-family: poppins, sans-serif;
	font-size: 11.5px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: var(--bofk-red);
}

.bofk-related-card-title {
	font-family: poppins, sans-serif;
	font-size: 17px;
	font-weight: 500;
	color: #111215;
	line-height: 1.4;
	margin: 0;
	transition: color 0.2s ease;
}

.bofk-related-card:hover .bofk-related-card-title {
	color: var(--bofk-red);
}

.bofk-related-card-date {
	font-family: poppins, sans-serif;
	font-size: 12.5px;
	color: #888892;
}


/* ==========================================================================
   8. Footer Component (#bofk-footer)
   ========================================================================== */
#bofk-footer {
	background-color: #111215;
	color: #ffffff;
	border-top: 1px solid rgba(255, 255, 255, 0.08);
	padding: 80px 0 48px;
	position: relative;
	width: 100%;
}

.bofk-footer-top {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 36px;
	padding-bottom: 48px;
	border-bottom: 1px solid rgba(255, 255, 255, 0.1);
	margin-bottom: 56px;
}

.bofk-footer-top-heading {
	font-family: ivymode, "Playfair Display", Georgia, serif;
	font-size: clamp(23px, 3.4vw, 36px);
	font-weight: 500;
	color: #ffffff;
	letter-spacing: -0.015em;
	margin: 0;
	line-height: 1.22;
	max-width: 660px;
}

.bofk-footer-cta-btn {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 14px 30px;
	background-color: #ffffff;
	color: #111215;
	border-radius: 30px;
	font-family: poppins, sans-serif;
	font-size: 14.5px;
	font-weight: 500;
	text-decoration: none;
	white-space: nowrap;
	flex-shrink: 0;
	transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25);
}

.bofk-footer-cta-btn svg {
	width: 16px;
	height: 16px;
	transition: transform 0.25s ease;
}

.bofk-footer-cta-btn:hover {
	background-color: var(--bofk-red);
	color: #ffffff;
	transform: translateY(-2px);
	box-shadow: 0 12px 32px rgba(217, 28, 26, 0.4);
}

.bofk-footer-cta-btn:hover svg {
	transform: translateX(3px);
}

.bofk-footer-main {
	display: grid;
	grid-template-columns: 420px 1fr;
	gap: clamp(48px, 5vw, 84px);
	align-items: start;
}

.bofk-footer-brand-col {
	display: flex;
	flex-direction: column;
	max-width: 380px;
}

.bofk-footer-logo-link {
	display: inline-flex;
	align-items: center;
	height: 36px;
	margin-bottom: 22px;
	transition: opacity 0.25s ease;
}

.bofk-footer-logo-link:hover {
	opacity: 0.85;
}

.bofk-footer-logo {
	height: 100%;
	width: auto;
	object-fit: contain;
}

.bofk-footer-brand-desc {
	font-family: poppins, sans-serif;
	font-size: 13.5px;
	color: rgba(255, 255, 255, 0.58);
	line-height: 1.75;
	margin: 0 0 28px;
}

.bofk-footer-copyright {
	font-family: poppins, sans-serif;
	font-size: 12.5px;
	color: rgba(255, 255, 255, 0.4);
	line-height: 1.5;
}

.bofk-footer-copyright--mobile {
	display: none;
}

.bofk-footer-nav-grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: clamp(28px, 3.2vw, 56px);
}

.bofk-footer-nav-col {
	display: flex;
	flex-direction: column;
}

.bofk-footer-nav-title {
	font-family: poppins, sans-serif;
	font-size: 11.5px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: rgba(255, 255, 255, 0.95);
	margin: 0 0 18px;
}

.bofk-footer-nav-list {
	display: flex;
	flex-direction: column;
	gap: 10px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.bofk-footer-nav-list a {
	font-family: poppins, sans-serif;
	font-size: 13.5px;
	color: rgba(255, 255, 255, 0.58);
	text-decoration: none;
	line-height: 1.45;
	transition: color 0.2s ease, transform 0.2s ease;
	display: inline-block;
	padding: 2px 0;
}

.bofk-footer-nav-list a:hover {
	color: #ffffff;
	transform: translateX(2px);
}

.bofk-footer-contact-info {
	font-family: poppins, sans-serif;
	font-size: 13.5px;
	color: rgba(255, 255, 255, 0.58);
	line-height: 1.65;
}

.bofk-footer-contact-info p {
	margin: 0 0 10px;
}

.bofk-footer-contact-link {
	color: rgba(255, 255, 255, 0.8);
	text-decoration: none;
	transition: color 0.2s ease;
}

.bofk-footer-contact-link:hover {
	color: var(--bofk-red);
}

.bofk-footer-hours-label {
	font-size: 12.5px;
	color: rgba(255, 255, 255, 0.4);
}

/* ==========================================================================
   9. Unified, Clean Responsive Breakpoints (1280px down to 320px)
   ========================================================================== */

/* Laptop / Small Desktop (≤ 1280px) */
@media (max-width: 1280px) {
	.bofk-blog-explorer-inner {
		padding: 60px calc(100% / 24) 120px;
	}
	.bofk-announcements-inner {
		padding-top: 80px;
		padding-bottom: 48px;
	}
	.bofk-footer-logo-link {
		height: 34px;
		margin-bottom: 20px;
	}
	.bofk-footer-main {
		grid-template-columns: 320px 1fr;
		gap: 36px;
	}
	.bofk-footer-nav-grid {
		gap: 24px;
	}
}

/* Tablet Landscape (≤ 1024px) */
@media (max-width: 1024px) {
	.bofk-blog-explorer-inner {
		padding: 48px 0 80px;
	}
	.bofk-announcements-inner {
		padding-top: 60px;
		padding-bottom: 40px;
	}
	.bofk-blog-explorer-layout {
		grid-template-columns: 260px 1fr;
	}
	.bofk-blog-sidebar {
		padding-right: 0;
	}
	.bofk-cat-btn {
		font-size: 28px;
	}
	.bofk-single-related-inner {
		padding: 0 32px;
	}
	.bofk-related-grid {
		grid-template-columns: repeat(2, 1fr);
		gap: 24px;
	}
	.bofk-single-cta-banner {
		flex-direction: column;
		align-items: flex-start;
		padding: 36px;
	}
}

/* Tablet Portrait (≤ 991px) */
@media (max-width: 991px) {
	.bofk-container,
	.bofk-container--header {
		padding: 0 24px;
	}
	.bofk-blog-outer-wrap {
		padding: 0 32px;
	}
	.bofk-announcements-inner {
		padding-top: 56px;
		padding-bottom: 40px;
	}
	.bofk-timeline-item {
		flex: 0 0 270px;
		min-width: 270px;
		padding-right: 28px;
	}
	.bofk-blog-explorer-inner {
		padding: 36px 0 64px;
	}
	.bofk-blog-explorer-layout {
		grid-template-columns: 1fr;
		gap: 28px;
	}
	.bofk-blog-sidebar-sticky {
		position: static;
		height: auto;
		max-height: none;
		overflow: visible;
	}
	.bofk-blog-cat-list {
		flex-direction: row;
		overflow-x: auto;
		white-space: nowrap;
		gap: 20px;
		padding: 4px 24px 10px 0;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
		-ms-overflow-style: none;
	}
	.bofk-blog-cat-list::-webkit-scrollbar {
		display: none;
	}
	.bofk-cat-btn {
		font-size: 22px;
		flex-shrink: 0;
	}
	.bofk-cat-btn.bofk--active {
		border-bottom: 2px solid #111215;
		padding-bottom: 2px;
	}
	.bofk-blog-search-wrap {
		margin: 16px 0 24px;
	}
	.bofk-blog-search-box {
		max-width: 100%;
	}
	.bofk-blog-search-input {
		background: #ffffff;
		border: 1px solid #dcdad5;
		border-radius: 8px;
		height: 46px;
	}
	.bofk-article-row-link {
		gap: 24px;
	}
	.bofk-article-row-thumb {
		width: 220px;
		min-width: 220px;
		border-radius: 8px;
	}
	.bofk-footer {
		padding: 60px 0 40px;
	}
	.bofk-footer-top {
		flex-direction: column;
		align-items: flex-start;
		gap: 24px;
		margin-bottom: 44px;
		padding-bottom: 36px;
	}
	.bofk-footer-main {
		grid-template-columns: 1fr;
		gap: 40px;
	}
	.bofk-footer-brand-col {
		max-width: 100%;
	}
	.bofk-footer-nav-grid {
		grid-template-columns: repeat(4, 1fr);
		gap: 24px;
	}
}

/* Mobile Landscape & Phablet (≤ 768px) */
@media (max-width: 768px) {
	.bofk-single-canvas {
		padding-top: 24px;
		padding-bottom: 64px;
	}
	.bofk-single-header {
		padding: 24px 0 16px;
	}
	.bofk-single-header-inner,
	.bofk-single-media-wrap,
	.bofk-single-body-inner,
	.bofk-single-footer-inner {
		padding: 0 20px;
	}
	.bofk-single-meta {
		display: flex;
		flex-direction: row;
		align-items: center;
		gap: 8px;
		font-size: 13px;
		margin-bottom: 20px;
	}
	.bofk-single-related-inner {
		padding: 0 20px;
	}
	.bofk-related-grid {
		grid-template-columns: 1fr;
		gap: 28px;
	}
	.bofk-single-author-block {
		flex-direction: column;
		align-items: flex-start;
		gap: 18px;
	}
	.bofk-single-share-inline {
		width: 100%;
		justify-content: space-between;
		padding-top: 14px;
		border-top: 1px solid rgba(17, 18, 21, 0.06);
	}
	.bofk-footer {
		padding: 50px 0 32px;
	}
	.bofk-footer-top {
		margin-bottom: 36px;
		padding-bottom: 30px;
	}
	.bofk-footer-logo-link {
		height: 32px;
		margin-bottom: 18px;
	}
	.bofk-footer-nav-grid {
		grid-template-columns: repeat(2, 1fr);
		gap: 32px 20px;
	}
	.bofk-footer-copyright--desktop {
		display: none;
	}
	.bofk-footer-copyright--mobile {
		display: block;
		margin-top: 36px;
		padding-top: 24px;
		border-top: 1px solid rgba(255, 255, 255, 0.08);
	}
}

/* Mobile (≤ 680px) */
@media (max-width: 680px) {
	.bofk-blog-outer-wrap {
		padding: 0 20px;
	}
	.bofk-announcements-inner {
		padding-top: 36px;
		padding-bottom: 24px;
	}
	.bofk-announcements-header {
		margin-bottom: 20px;
	}
	.bofk-blog-explorer-section {
		padding: 24px 0 48px;
	}
	.bofk-blog-explorer-inner {
		padding: 28px 0 48px;
	}
	.bofk-blog-explorer-layout {
		gap: 20px;
	}
	.bofk-article-row-link {
		flex-direction: column;
		gap: 12px;
	}
	.bofk-article-row-thumb {
		width: 100%;
		min-width: 100%;
		aspect-ratio: 16 / 9;
		max-height: 210px;
		border-radius: 10px;
	}
	.bofk-article-row {
		padding-bottom: 22px;
		margin-bottom: 22px;
	}
	.bofk-cat-btn {
		font-size: 19px;
	}
	.bofk-article-row-title {
		font-size: 18px;
	}
}

/* Standard Mobile (≤ 480px) */
@media (max-width: 480px) {
	.bofk-container,
	.bofk-container--header {
		padding: 0 16px;
	}
	.bofk-blog-outer-wrap {
		padding: 0 16px;
	}
	.bofk-timeline-item {
		flex: 0 0 240px;
		min-width: 240px;
		padding-right: 20px;
	}
	.bofk-timeline-text {
		font-size: 14px;
	}
	.bofk-cat-btn {
		font-size: 17.5px;
	}
	.bofk-article-row-thumb {
		max-height: 180px;
		border-radius: 8px;
	}
	.bofk-article-row-title {
		font-size: 17px;
	}
	.bofk-blog-search-input {
		height: 44px;
		font-size: 13.5px;
	}
	.bofk-single-pre-header {
		margin-bottom: 16px;
	}
	.bofk-single-header-inner,
	.bofk-single-media-wrap,
	.bofk-single-body-inner,
	.bofk-single-footer-inner {
		padding: 0 16px;
	}
	.bofk-article-prose {
		font-size: 16.5px;
		line-height: 1.8;
	}
	.bofk-article-prose blockquote {
		padding: 16px 20px;
	}
	.bofk-single-share-bar {
		flex-direction: column;
		align-items: flex-start;
		gap: 12px;
	}
	.bofk-cta-btn {
		width: 100%;
		justify-content: center;
	}
	.bofk-footer-top-heading {
		font-size: 21px;
		line-height: 1.28;
	}
	.bofk-footer-cta-btn {
		width: 100%;
		justify-content: center;
		padding: 13px 20px;
		font-size: 14px;
	}
	.bofk-footer-logo-link {
		height: 30px;
		margin-bottom: 16px;
	}
	.bofk-footer-nav-grid {
		grid-template-columns: repeat(2, 1fr);
		gap: 28px 16px;
	}
	.bofk-footer-brand-desc {
		margin-bottom: 20px;
	}
}

/* Compact Mobile (≤ 360px) */
@media (max-width: 360px) {
	.bofk-container,
	.bofk-container--header {
		padding: 0 12px;
	}
	.bofk-blog-outer-wrap {
		padding: 0 12px;
	}
	.bofk-announcements-inner {
		padding-top: 28px;
		padding-bottom: 18px;
	}
	.bofk-timeline-item {
		flex: 0 0 215px;
		min-width: 215px;
		padding-right: 14px;
	}
	.bofk-timeline-btn {
		width: 36px;
		height: 36px;
	}
	.bofk-cat-btn {
		font-size: 16px;
	}
	.bofk-article-row-thumb {
		max-height: 150px;
		border-radius: 6px;
	}
	.bofk-article-row-title {
		font-size: 15px;
		line-height: 1.35;
	}
	.bofk-single-header-inner,
	.bofk-single-media-wrap,
	.bofk-single-body-inner,
	.bofk-single-footer-inner {
		padding: 0 12px;
	}
	.bofk-single-media-container {
		border-radius: 10px;
	}
	.bofk-article-prose {
		font-size: 15.5px;
	}
	.bofk-article-prose h2 {
		margin-top: 40px;
	}
	.bofk-footer {
		padding: 40px 0 24px;
	}
	.bofk-footer-top {
		margin-bottom: 28px;
		padding-bottom: 24px;
	}
	.bofk-footer-top-heading {
		font-size: 19px;
		line-height: 1.25;
	}
	.bofk-footer-cta-btn {
		font-size: 13.5px;
		padding: 12px 16px;
	}
	.bofk-footer-logo-link {
		height: 28px;
		margin-bottom: 14px;
	}
	.bofk-footer-nav-grid {
		grid-template-columns: 1fr;
		gap: 24px;
	}
	.bofk-footer-nav-list a {
		font-size: 13.5px;
		padding: 4px 0;
	}
}

/* Ultra-Compact Mobile (≤ 320px) */
@media (max-width: 320px) {
	.bofk-timeline-item {
		flex: 0 0 190px;
		min-width: 190px;
		padding-right: 10px;
	}
	.bofk-timeline-text {
		font-size: 13px;
	}
	.bofk-announcements-title {
		font-size: 22px;
	}
	.bofk-cat-btn {
		font-size: 15px;
	}
	.bofk-article-row-title {
		font-size: 14.5px;
	}
	.bofk-article-row-thumb {
		max-height: 135px;
	}
}



/* ==========================================================================
   10. Quiet Luxury Varied Hardware-Accelerated Animation Suite
   ========================================================================== */

/* Base state for all reveal items */
.bofk-reveal-base {
	opacity: 0;
	will-change: opacity, transform;
	transition-property: opacity, transform, box-shadow;
	transition-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
}

/* 1. Slide-Up Reveal (Headers, Headings, Subtitles) */
.bofk-reveal--slide-up {
	transform: translateY(22px);
	transition-duration: 0.65s;
}
.bofk-reveal--slide-up.bofk--revealed {
	opacity: 1;
	transform: translateY(0);
}

/* 2. Timeline Horizontal Glide (Announcements Carousel) */
.bofk-reveal--timeline-glide {
	transform: translateX(18px) scale(0.98);
	transition-duration: 0.6s;
}
.bofk-reveal--timeline-glide.bofk--revealed {
	opacity: 1;
	transform: translateX(0) scale(1);
}
.bofk-timeline-item:nth-child(1) { transition-delay: 0.04s; }
.bofk-timeline-item:nth-child(2) { transition-delay: 0.10s; }
.bofk-timeline-item:nth-child(3) { transition-delay: 0.16s; }
.bofk-timeline-item:nth-child(4) { transition-delay: 0.22s; }
.bofk-timeline-item:nth-child(5) { transition-delay: 0.28s; }

/* 3. Cascade Left (Sidebar Category Buttons) */
.bofk-reveal--cascade-left {
	transform: translateX(-16px);
	transition-duration: 0.5s;
}
.bofk-reveal--cascade-left.bofk--revealed {
	opacity: 0.45;
	transform: translateX(0);
}
.bofk-cat-btn.bofk--active.bofk--revealed {
	opacity: 1;
}
.bofk-cat-btn:nth-child(1) { transition-delay: 0.04s; }
.bofk-cat-btn:nth-child(2) { transition-delay: 0.09s; }
.bofk-cat-btn:nth-child(3) { transition-delay: 0.14s; }
.bofk-cat-btn:nth-child(4) { transition-delay: 0.19s; }
.bofk-cat-btn:nth-child(5) { transition-delay: 0.24s; }

/* 4. Card Lift & Fade (Article List & Related Posts) */
.bofk-reveal--card-lift {
	transform: translateY(24px);
	transition-duration: 0.65s;
}
.bofk-reveal--card-lift.bofk--revealed {
	opacity: 1;
	transform: translateY(0);
}
.bofk-article-row:nth-child(1) { transition-delay: 0.04s; }
.bofk-article-row:nth-child(2) { transition-delay: 0.09s; }
.bofk-article-row:nth-child(3) { transition-delay: 0.14s; }
.bofk-article-row:nth-child(4) { transition-delay: 0.19s; }
.bofk-article-row:nth-child(5) { transition-delay: 0.24s; }

/* 5. Soft Fade (Search Bar, Footer Columns) */
.bofk-reveal--soft-fade {
	transform: translateY(12px) scale(0.99);
	transition-duration: 0.55s;
}
.bofk-reveal--soft-fade.bofk--revealed {
	opacity: 1;
	transform: translateY(0) scale(1);
}
.bofk-footer-nav-col:nth-child(1) { transition-delay: 0.05s; }
.bofk-footer-nav-col:nth-child(2) { transition-delay: 0.12s; }
.bofk-footer-nav-col:nth-child(3) { transition-delay: 0.19s; }
.bofk-footer-nav-col:nth-child(4) { transition-delay: 0.26s; }

/* 6. Cinematic Zoom Reveal (Single Post Featured Image) */
.bofk-reveal--cinematic-zoom {
	transform: scale(0.96);
	transition-duration: 0.85s;
}
.bofk-reveal--cinematic-zoom.bofk--revealed {
	opacity: 1;
	transform: scale(1);
}

/* 7. Floating Elevation Reveal (Author Bio & CTA Banner) */
.bofk-reveal--float-elevate {
	transform: translateY(26px);
	transition-duration: 0.75s;
}
.bofk-reveal--float-elevate.bofk--revealed {
	opacity: 1;
	transform: translateY(0);
}

/* Micro-Interaction Polish */
.bofk-article-row-link {
	transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
@media (min-width: 681px) {
	.bofk-article-row-link:hover {
		transform: translateX(4px);
	}
}

/* Reduced Motion Accessibility */
@media (prefers-reduced-motion: reduce) {
	.bofk-reveal-base,
	.bofk-breadcrumbs,
	.bofk-page-title,
	.bofk-reveal-base.bofk--revealed {
		opacity: 1 !important;
		transform: none !important;
		transition: none !important;
		animation: none !important;
	}
}