/* =============================================================
   Fakaza Lite — main.css
   Brand system: --fkz-primary / --fkz-primary-dark come from the
   Theme Panel (see inc/theme-panel.php), defaulting to #003FA8/#002F7A.
   ============================================================= */

:root{
	--fkz-primary: #1479C9;
	--fkz-primary-dark: #0B5A9E;
	--fkz-header-bg-1: #1479C9;
	--fkz-header-bg-2: #0B5A9E;
	--fkz-mobile-menu-bg: #0b0b0f;
	--fkz-text: #1d2327;
	--fkz-text-muted: #646970;
	--fkz-border: #e5e7eb;
	--fkz-bg: #f6f7f9;
	--fkz-radius: 10px;
	--fkz-shadow: 0 1px 3px rgba(0,0,0,.06);
	--fkz-max: 1240px;
}

*, *::before, *::after{ box-sizing: border-box; }

html{ -webkit-text-size-adjust: 100%; }

body{
	margin: 0;
	background: var(--fkz-bg);
	color: var(--fkz-text);
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	font-size: 15px;
	line-height: 1.55;
}

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

.screen-reader-text{
	position: absolute !important;
	width: 1px; height: 1px;
	overflow: hidden;
	clip: rect(1px,1px,1px,1px);
	white-space: nowrap;
}

/* =============================================================
   HEADER — two-tier: logo bar + persistent quick-nav bar
   ============================================================= */

.fkz-header{
	position: sticky;
	top: 0;
	z-index: 100;
	box-shadow: 0 2px 8px rgba(0,0,0,.12);
}

/* ── Tier 1: logo bar ─────────────────────────────────────────── */

.fkz-header-top{
	background: linear-gradient(135deg, var(--fkz-header-bg-1), var(--fkz-header-bg-2));
}

.fkz-header-top-inner{
	max-width: var(--fkz-max);
	margin: 0 auto;
	padding: 12px 18px;
	display: grid;
	grid-template-columns: 40px 1fr 40px;
	align-items: center;
	gap: 12px;
}

.fkz-header-spacer{ display: block; width: 40px; height: 40px; }

.fkz-branding{ min-width: 0; display: flex; justify-content: center; }
.fkz-branding img{ max-height: 44px; width: auto; }

.fkz-logo-lockup{
	display: inline-flex;
	align-items: stretch;
	text-decoration: none;
	border-radius: 6px;
	overflow: hidden;
	box-shadow: 0 2px 6px rgba(0,0,0,.25);
}

.fkz-logo-dark{
	background: #0A0A0A;
	color: #fff;
	font-weight: 800;
	font-size: 19px;
	letter-spacing: -.01em;
	padding: 7px 12px;
	display: flex;
	align-items: center;
}

.fkz-logo-accent{
	background: #fff;
	color: var(--fkz-primary);
	font-weight: 800;
	font-size: 19px;
	letter-spacing: -.01em;
	padding: 7px 12px;
	display: flex;
	align-items: center;
}

/* ── Off-canvas toggle (hamburger) ───────────────────────────── */

.fkz-offcanvas-toggle{
	background: rgba(255,255,255,.12);
	border: none;
	border-radius: 8px;
	width: 40px;
	height: 40px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 4px;
	cursor: pointer;
	flex-shrink: 0;
}

.fkz-offcanvas-toggle-bar{
	width: 18px;
	height: 2px;
	background: #fff;
	border-radius: 2px;
}

/* ── Search toggle + inline form ─────────────────────────────── */

.fkz-search-toggle{
	background: rgba(255,255,255,.12);
	border: none;
	border-radius: 8px;
	width: 40px;
	height: 40px;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	flex-shrink: 0;
	color: #fff;
	margin-left: auto;
}

.fkz-search-toggle .dashicons{ font-size: 18px; width: 18px; height: 18px; }

.fkz-search-form{
	background: rgba(0,0,0,.15);
	overflow: hidden;
}

.fkz-search-form[hidden]{ display: none; }

.fkz-search-form-inner{
	max-width: var(--fkz-max);
	margin: 0 auto;
	padding: 12px 18px;
}

.fkz-search-form-inner .search-form{
	display: flex;
	gap: 8px;
}

.fkz-search-form-inner input[type="search"]{
	flex: 1;
	height: 40px;
	border: none;
	border-radius: 7px;
	padding: 0 12px;
	font-size: 14px;
}

.fkz-search-form-inner button{
	height: 40px;
	padding: 0 16px;
	border: none;
	border-radius: 7px;
	background: #fff;
	color: var(--fkz-primary);
	font-weight: 700;
	cursor: pointer;
}

/* ── Tier 2: persistent quick-nav bar ─────────────────────────── */
/* Always visible — never hidden behind a toggle. Scrolls
   horizontally on narrow screens instead of wrapping/hiding, so the
   primary links stay reachable in one tap at any width. */

.fkz-quicknav{
	background: #0A0A0A;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
}

.fkz-quicknav::-webkit-scrollbar{ display: none; }

.fkz-quicknav-menu{
	display: flex;
	align-items: center;
	list-style: none;
	margin: 0;
	padding: 0 14px;
	max-width: var(--fkz-max);
	margin-inline: auto;
	white-space: nowrap;
}

.fkz-quicknav-menu li{ position: relative; flex-shrink: 0; }

.fkz-quicknav-menu a{
	display: block;
	padding: 13px 14px;
	color: rgba(255,255,255,.85);
	text-decoration: none;
	font-weight: 700;
	font-size: 13.5px;
	text-transform: uppercase;
	letter-spacing: .02em;
}

.fkz-quicknav-menu a:hover{
	color: #fff;
	background: var(--fkz-primary);
}

.fkz-quicknav-menu ul.sub-menu{ display: none; }

/* ── Off-canvas panel ─────────────────────────────────────────── */

.fkz-offcanvas{
	position: fixed;
	inset: 0;
	z-index: 300;
}

.fkz-offcanvas[hidden]{ display: none; }

.fkz-offcanvas-backdrop{
	position: absolute;
	inset: 0;
	background: rgba(0,0,0,.5);
	opacity: 0;
	transition: opacity .25s ease;
}

.fkz-offcanvas.is-open .fkz-offcanvas-backdrop{ opacity: 1; }

.fkz-offcanvas-panel{
	position: absolute;
	top: 0; left: 0; bottom: 0;
	width: 82%;
	max-width: 320px;
	background: var(--fkz-mobile-menu-bg, #0A0A0A);
	box-shadow: 4px 0 24px rgba(0,0,0,.35);
	padding: 18px 0 32px;
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
	transform: translateX(-100%);
	transition: transform .25s ease;
}

.fkz-offcanvas.is-open .fkz-offcanvas-panel{ transform: translateX(0); }

.fkz-offcanvas-close{
	background: rgba(255,255,255,.1);
	border: none;
	border-radius: 8px;
	width: 36px;
	height: 36px;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #fff;
	cursor: pointer;
	margin: 0 16px 14px auto;
}

.fkz-offcanvas-menu{
	list-style: none;
	margin: 0;
	padding: 0 10px;
}

.fkz-offcanvas-menu a{
	display: block;
	padding: 14px 12px;
	color: rgba(255,255,255,.9);
	text-decoration: none;
	font-weight: 600;
	font-size: 15px;
	border-bottom: 1px solid rgba(255,255,255,.08);
}

.fkz-offcanvas-menu > li:last-child > a{ border-bottom: none; }

.fkz-offcanvas-menu a:hover{ background: rgba(255,255,255,.06); }

.fkz-offcanvas-menu .sub-menu{
	list-style: none;
	margin: 0 0 0 14px;
	padding: 0;
	border-left: 2px solid rgba(255,255,255,.15);
}

.fkz-offcanvas-menu .sub-menu a{ font-size: 13.5px; padding: 11px 10px; opacity: .85; }

body.fkz-menu-open{ overflow: hidden; }

/* ── Header banner (ad/HTML code) ────────────────────────────── */

.fkz-header-banner{
	max-width: var(--fkz-max);
	margin: 0 auto;
	padding: 14px 18px 0;
	text-align: center;
	overflow-x: auto;
}

@media (min-width: 901px){
	.fkz-header-banner.fkz-hide-desktop{ display: none; }
}

@media (min-width: 641px) and (max-width: 900px){
	.fkz-header-banner.fkz-hide-tablet{ display: none; }
}

@media (min-width: 641px){
	.fkz-header-top-inner{ grid-template-columns: 40px 1fr 40px; padding: 14px 24px; }
	.fkz-branding img{ max-height: 52px; }
	.fkz-logo-dark, .fkz-logo-accent{ font-size: 22px; padding: 9px 16px; }
	.fkz-quicknav-menu{ padding: 0 24px; }
	.fkz-quicknav-menu a{ padding: 15px 18px; font-size: 14px; }
}


/* =============================================================
   CONTENT BLOCK (td_block_7-compatible) — header bar + card grid
   ============================================================= */

.fkz-home,
.fkz-page,
.fkz-fallback{
	max-width: var(--fkz-max);
	margin: 0 auto;
	padding: 20px 18px 40px;
}

.tdc-zone, .vc_row, .vc_column{ display: block; }

.fkz-block{ margin-bottom: 28px; }

.fkz-block-head{
	--fkz-block-color: var(--fkz-primary);
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	background: var(--fkz-block-color);
	clip-path: polygon(0 0, 100% 0, calc(100% - 22px) 100%, 0 100%);
	padding: 13px 34px 13px 18px;
	margin-bottom: 14px;
}

.fkz-block-title{
	margin: 0;
	font-size: 16px;
	font-weight: 800;
	font-style: italic;
	text-transform: uppercase;
	letter-spacing: .01em;
	color: #fff;
	overflow-wrap: break-word;
	word-break: break-word;
	min-width: 0;
}

.fkz-block-actions{
	display: flex;
	align-items: center;
	flex-shrink: 0;
}

.fkz-block-foot{
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	margin-top: 14px;
}

.fkz-block-nav{
	width: 30px;
	height: 30px;
	border-radius: 50%;
	border: 1px solid var(--fkz-border);
	background: #fff;
	color: var(--fkz-text);
	font-size: 16px;
	line-height: 1;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: background .15s, color .15s, border-color .15s;
}

.fkz-block-nav:hover:not(:disabled){
	background: var(--fkz-primary);
	border-color: var(--fkz-primary);
	color: #fff;
}

.fkz-block-nav:disabled{
	opacity: .35;
	cursor: default;
}

.fkz-block-viewall{
	font-size: 12.5px;
	font-weight: 700;
	color: #fff;
	text-decoration: none;
	white-space: nowrap;
	padding: 6px 14px;
	border: 1px solid rgba(255,255,255,.6);
	border-radius: 20px;
	transition: background .15s, color .15s;
}

.fkz-block-viewall:hover{
	background: #fff;
	color: var(--fkz-primary);
}

.fkz-block-grid{
	display: flex;
	flex-direction: column;
	gap: 18px;
	transition: opacity .15s;
}

@media (min-width: 901px){
	.fkz-block-grid{
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 24px 28px;
	}
}

.fkz-block-grid.is-loading{ opacity: .45; }

.fkz-block-empty{
	color: var(--fkz-text-muted);
	font-size: 14px;
	padding: 20px;
	text-align: center;
	background: #fff;
	border-radius: var(--fkz-radius);
	border: 1px dashed var(--fkz-border);
}

/* Cards — horizontal row: fixed-width thumbnail on the left, text
   filling the rest on the right. This is Fakaza's signature layout,
   distinct from GJ Theme's vertical grid cards. */
.fkz-card{
	display: flex;
	align-items: flex-start;
	gap: 16px;
}

.fkz-card:hover .fkz-card-title a{ color: var(--fkz-primary); }

.fkz-card-thumb{
	display: block;
	flex: 0 0 130px;
	width: 130px;
	aspect-ratio: 4 / 3;
	background: var(--fkz-bg);
	overflow: hidden;
	border-radius: 8px;
}

.fkz-card-thumb img{
	width: 100%; height: 100%;
	object-fit: cover;
}

.fkz-card-thumb-placeholder{
	display: block;
	width: 100%; height: 100%;
	background: linear-gradient(135deg, var(--fkz-border), #f3f4f6);
}

.fkz-card-body{ flex: 1; min-width: 0; padding-top: 2px; }

.fkz-card-title{
	margin: 0 0 8px;
	font-size: 16px;
	font-weight: 700;
	line-height: 1.35;
	overflow-wrap: break-word;
	word-break: break-word;
}

.fkz-card-title a{
	color: var(--fkz-text);
	text-decoration: none;
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.fkz-card-cat{
	display: inline-block;
	font-size: 10.5px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .03em;
	color: #fff;
	background: var(--fkz-primary);
	padding: 3px 8px;
	border-radius: 20px;
	text-decoration: none;
	margin-bottom: 6px;
}

.fkz-card-meta{
	display: flex;
	align-items: center;
	font-size: 12.5px;
	color: var(--fkz-text-muted);
}

.fkz-card-date{ display: inline-flex; align-items: center; gap: 4px; }
.fkz-card-date .dashicons{ font-size: 14px; width: 14px; height: 14px; }
.fkz-card-meta-sep{ margin: 0 6px; }
.fkz-card-readtime{ white-space: nowrap; }
.fkz-card-author{ white-space: nowrap; font-weight: 600; color: var(--fkz-text); }

@media (min-width: 641px){
	.fkz-card-thumb{ flex-basis: 170px; width: 170px; }
	.fkz-card-title{ font-size: 17px; }
}

/* ── Dense Grid (td_block_13) — smaller thumbnail, tighter card ── */

.fkz-block-grid--dense{ gap: 10px; }

.fkz-card--sm .fkz-card-thumb{ flex-basis: 88px; width: 88px; }
.fkz-card--sm .fkz-card-title{ font-size: 13.5px; -webkit-line-clamp: 2; margin-bottom: 4px; }
.fkz-card--sm .fkz-card-cat{ font-size: 9px; padding: 2px 6px; }
.fkz-card--sm .fkz-card-meta{ font-size: 11px; }

@media (min-width: 641px){
	.fkz-card--sm .fkz-card-thumb{ flex-basis: 110px; width: 110px; }
}

/* ── Hero (td_block_2 Featured Spotlight, td_block_9 Split Feature) ── */

.fkz-hero{
	display: flex;
	flex-direction: column;
	background: #fff;
	border: 1px solid var(--fkz-border);
	border-radius: var(--fkz-radius);
	overflow: hidden;
	box-shadow: var(--fkz-shadow);
}

.fkz-hero-thumb{
	display: block;
	aspect-ratio: 16 / 9;
	background: var(--fkz-bg);
	overflow: hidden;
}

.fkz-hero-thumb img{ width: 100%; height: 100%; object-fit: cover; }

.fkz-hero-body{ padding: 16px 18px 18px; }

.fkz-hero-title{
	margin: 6px 0 8px;
	font-size: 19px;
	font-weight: 800;
	line-height: 1.3;
}

.fkz-hero-title a{ color: var(--fkz-text); text-decoration: none; }
.fkz-hero-title a:hover{ color: var(--fkz-primary); }

.fkz-hero-excerpt{
	margin: 0 0 10px;
	font-size: 13.5px;
	line-height: 1.55;
	color: var(--fkz-text-muted);
}

@media (min-width: 640px){
	.fkz-hero-title{ font-size: 24px; }
}

/* ── Split Feature (td_block_9) — hero left, list right ── */

.fkz-split{
	display: flex;
	flex-direction: column;
	gap: 18px;
}

.fkz-split-feature{ flex: none; }
.fkz-split-list{ display: flex; flex-direction: column; gap: 2px; }

@media (min-width: 780px){
	.fkz-split{ flex-direction: row; align-items: stretch; }
	.fkz-split-feature{ flex: 1 1 58%; min-width: 0; }
	.fkz-split-list{ flex: 1 1 42%; min-width: 0; justify-content: flex-start; }
}

/* ── Compact List (td_block_5, and the list side of td_block_9) ── */

.fkz-list{ display: flex; flex-direction: column; }

.fkz-list-row{
	display: flex;
	align-items: baseline;
	gap: 12px;
	padding: 11px 4px;
	border-bottom: 1px solid var(--fkz-border);
}

.fkz-list-row:last-child{ border-bottom: none; }

.fkz-list-index{
	flex: none;
	font-size: 13px;
	font-weight: 800;
	color: var(--fkz-primary);
	font-variant-numeric: tabular-nums;
}

.fkz-list-row-body{ min-width: 0; }

.fkz-list-row-title{
	margin: 0 0 2px;
	font-size: 13.5px;
	font-weight: 700;
	line-height: 1.4;
}

.fkz-list-row-title a{ color: var(--fkz-text); text-decoration: none; }
.fkz-list-row-title a:hover{ color: var(--fkz-primary); }

.fkz-list-row-date{
	font-size: 11px;
	color: var(--fkz-text-muted);
}

/* =============================================================
   TWO-COLUMN LAYOUT (single / category / tag / page / search / 404)
   Homepage deliberately excluded — matches the actual site.
   ============================================================= */

.fkz-layout{
	display: flex;
	align-items: flex-start;
	gap: 24px;
}

.fkz-layout-main{
	flex: 1 1 0;
	min-width: 0;
}

.fkz-sidebar{
	flex: 0 0 320px;
	width: 320px;
	display: flex;
	flex-direction: column;
	gap: 18px;
}

/* The sidebar column is too narrow for the 2-per-row desktop grid —
   keep Related posts single-column there regardless of viewport. */
.fkz-sidebar .fkz-block-grid{
	display: flex !important;
	flex-direction: column;
}

.fkz-sidebar .fkz-card-thumb{ flex-basis: 96px; width: 96px; }
.fkz-sidebar .fkz-card-title{ font-size: 14px; }

@media (max-width: 900px){
	.fkz-layout{ flex-direction: column; }
	.fkz-sidebar{ width: 100%; flex-basis: auto; }
}

/* Widget styling — matches the before_widget/before_title wrapper
   markup registered in functions.php (aside.widget > .block-title),
   so both our own widgets and any plugin-provided ones look
   consistent. */

.fkz-sidebar .widget{
	background: #fff;
	border: 1px solid var(--fkz-border);
	border-radius: var(--fkz-radius);
	box-shadow: var(--fkz-shadow);
	padding: 18px;
	overflow: hidden;
}

.fkz-sidebar .block-title{
	margin: 0 0 14px;
	padding-bottom: 10px;
	border-bottom: 2px solid var(--fkz-primary);
}

.fkz-sidebar .block-title span{
	font-size: 14px;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: .03em;
	color: var(--fkz-text);
}

.fkz-sidebar .widget ul{
	list-style: none;
	margin: 0;
	padding: 0;
}

.fkz-sidebar .widget li{
	padding: 9px 0;
	border-bottom: 1px solid var(--fkz-bg);
	font-size: 13.5px;
}

.fkz-sidebar .widget li:last-child{ border-bottom: none; }

.fkz-sidebar .widget a{
	color: var(--fkz-text);
	text-decoration: none;
}

.fkz-sidebar .widget a:hover{ color: var(--fkz-primary); }

.fkz-sidebar .widget img{ max-width: 100%; height: auto; }

.gj-trending-list li{ padding: 10px 0; }

.gj-trending-title{
	display: block;
	font-weight: 600;
	font-size: 13.5px;
	line-height: 1.4;
	margin-bottom: 4px;
}

.gj-trending-meta{
	font-size: 11.5px;
	color: var(--fkz-text-muted);
	display: flex;
	gap: 5px;
}

.fkz-single{
	max-width: var(--fkz-max);
	margin: 0 auto;
	padding: 20px 18px 10px;
}

.fkz-single-inner{
	background: #fff;
	border: 1px solid var(--fkz-border);
	border-radius: var(--fkz-radius);
	box-shadow: var(--fkz-shadow);
	overflow: hidden;
	max-width: 820px;
	margin: 0 auto;
}

.fkz-single-header{ padding: 24px 24px 0; }

.fkz-single-cat{
	display: inline-block;
	font-size: 11.5px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .04em;
	color: #fff;
	background: var(--fkz-primary);
	padding: 4px 10px;
	border-radius: 20px;
	text-decoration: none;
	margin-bottom: 10px;
}

.fkz-single-title{
	margin: 0 0 10px;
	font-size: 26px;
	font-weight: 800;
	line-height: 1.3;
	color: var(--fkz-text);
	overflow-wrap: break-word;
	word-break: break-word;
}

.fkz-single-meta{
	font-size: 13px;
	color: var(--fkz-text-muted);
	margin-bottom: 18px;
}

.fkz-single-meta-sep{ margin: 0 6px; }

.fkz-single-thumb{
	background: var(--fkz-bg);
	margin: -8px -24px 20px;
}

.fkz-single-thumb img{ width: 100%; }

.fkz-single-content{
	padding: 22px 24px 6px;
	font-size: 15.5px;
	line-height: 1.75;
	color: var(--fkz-text);
	overflow: hidden;
}

/* Classic clearfix — if the content includes a floated element (a
   hand-coded "player beside a list" layout, for example) without its
   own clearing rule, whatever comes after this div — including
   anything an ad plugin appends via the_content — would otherwise
   render pulled up into that same spot instead of cleanly below it. */
.fkz-single-content::after{
	content: "";
	display: table;
	clear: both;
}

.fkz-single-content p{ margin: 0 0 16px; }
.fkz-single-content img{
	border-radius: 8px;
	margin: 10px auto;
	display: block;
	max-width: 100%;
	height: auto;
}
.fkz-single-content audio{ width: 100%; margin: 10px 0; }
.fkz-single-content h2,
.fkz-single-content h3,
.fkz-single-content h4{ margin: 24px 0 12px; font-weight: 700; }
.fkz-single-content a{ color: var(--fkz-primary); }

.fkz-single-content ul,
.fkz-single-content ol{
	margin: 0 0 16px;
	padding-left: 22px;
}

.fkz-single-content li{ margin-bottom: 6px; }

.fkz-single-content blockquote{
	margin: 0 0 16px;
	padding: 12px 18px;
	border-left: 4px solid var(--fkz-primary);
	background: var(--fkz-bg);
	border-radius: 0 8px 8px 0;
	font-style: italic;
	color: var(--fkz-text-muted);
}

.fkz-single-content table{
	width: 100%;
	max-width: 100%;
	border-collapse: collapse;
	margin: 0 0 16px;
	font-size: 14px;
	overflow-wrap: break-word;
}

.fkz-single-content th,
.fkz-single-content td{
	padding: 10px 12px;
	border: 1px solid var(--fkz-border);
	text-align: left;
	vertical-align: top;
}

.fkz-single-content th{
	background: var(--fkz-bg);
	font-weight: 700;
}

/* Real data tables (tracklists, spec sheets, etc.) keep their actual
   row/column structure at every screen size — collapsing them to a
   stacked list destroys the "No. / Title / Link" relationship the
   table exists to show. If a table is wider than the screen, it
   scrolls horizontally as a unit instead. */
@media (max-width: 640px){
	.fkz-single-content table{
		display: block;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
		table-layout: auto;
		white-space: nowrap;
	}
	.fkz-single-content th,
	.fkz-single-content td{
		white-space: normal;
	}
}

.fkz-single-tags{
	padding: 4px 24px 22px;
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.fkz-tag-pill{
	font-size: 12.5px;
	font-weight: 600;
	color: var(--fkz-primary);
	background: #f0f4ff;
	padding: 6px 12px;
	border-radius: 20px;
	text-decoration: none;
	transition: background .15s, color .15s;
}

.fkz-tag-pill:hover{
	background: var(--fkz-primary);
	color: #fff;
}

.fkz-single-author-box{
	display: flex;
	gap: 14px;
	align-items: flex-start;
	margin: 0 24px 24px;
	padding: 16px;
	background: var(--fkz-bg);
	border-radius: var(--fkz-radius);
}

.fkz-single-author-box img{ border-radius: 50%; flex-shrink: 0; }
.fkz-single-author-box strong{ display: block; margin-bottom: 4px; font-size: 14px; }
.fkz-single-author-box p{ margin: 0; font-size: 13px; color: var(--fkz-text-muted); line-height: 1.5; }

.fkz-related{
	margin-top: 24px;
}

.fkz-comments{
	margin-top: 24px;
}

/* =============================================================
   COMMENTS
   ============================================================= */

.fkz-comments-area{
	background: #fff;
	border: 1px solid var(--fkz-border);
	border-radius: var(--fkz-radius);
	box-shadow: var(--fkz-shadow);
	padding: 22px 24px;
}

.fkz-comments-title{
	margin: 0 0 18px;
	font-size: 17px;
	font-weight: 800;
	padding-bottom: 12px;
	border-bottom: 2px solid var(--fkz-border);
}

.fkz-comment-list,
.fkz-comment-list .children{
	list-style: none;
	margin: 0;
	padding: 0;
}

.fkz-comment-list .children{
	margin-left: 20px;
	padding-left: 16px;
	border-left: 2px solid var(--fkz-border);
}

.fkz-comment-list > li{ margin-bottom: 18px; }

.comment-body{
	display: flex;
	gap: 12px;
}

.comment-author .avatar{
	border-radius: 50%;
	flex-shrink: 0;
	display: block;
}

.comment-author .fn{
	font-style: normal;
	font-weight: 700;
	font-size: 14px;
	color: var(--fkz-text);
}

.comment-metadata{
	font-size: 12px;
	color: var(--fkz-text-muted);
	margin-bottom: 6px;
}

.comment-metadata a{ color: inherit; text-decoration: none; }

.comment-content p{ margin: 0 0 8px; font-size: 14px; line-height: 1.6; }
.comment-content p:last-child{ margin-bottom: 0; }

.comment-reply-link{
	display: inline-block;
	margin-top: 6px;
	font-size: 12px;
	font-weight: 700;
	color: var(--fkz-primary);
	text-decoration: none;
}

.comment-reply-link:hover{ text-decoration: underline; }

.fkz-comments-closed{
	color: var(--fkz-text-muted);
	font-size: 14px;
	padding: 14px;
	background: var(--fkz-bg);
	border-radius: var(--fkz-radius);
	text-align: center;
}

/* Comment form */
#respond{ margin-top: 24px; }

#reply-title{
	margin: 0 0 14px;
	font-size: 16px;
	font-weight: 800;
}

#reply-title small{
	font-weight: 500;
	font-size: 12px;
	margin-left: 8px;
}

#reply-title small a{ color: var(--fkz-primary); }

.comment-form-comment label,
.comment-form-author label,
.comment-form-email label,
.comment-form-url label{
	display: block;
	font-size: 12.5px;
	font-weight: 700;
	margin-bottom: 5px;
	color: var(--fkz-text);
}

#commentform textarea,
#commentform input[type="text"],
#commentform input[type="email"],
#commentform input[type="url"]{
	width: 100%;
	border: 1px solid #d0d5dd;
	border-radius: 6px;
	padding: 8px 11px;
	font-size: 13px;
	font-family: inherit;
	margin-bottom: 14px;
}

#commentform textarea:focus,
#commentform input:focus{
	outline: none;
	border-color: var(--fkz-primary);
	box-shadow: 0 0 0 3px rgba(0,63,168,.12);
}

.comment-form-cookies-consent{
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 12.5px;
	color: var(--fkz-text-muted);
	margin-bottom: 14px;
}

.comment-form-cookies-consent input{ margin: 0; }

.fkz-comment-submit{
	background: var(--fkz-primary);
	border: 1px solid var(--fkz-primary);
	color: #fff;
	font-weight: 600;
	padding: 10px 22px;
	border-radius: 7px;
	cursor: pointer;
	font-size: 14px;
}

.fkz-comment-submit:hover{ background: var(--fkz-primary-dark); border-color: var(--fkz-primary-dark); }

@media (max-width: 640px){
	.fkz-comments-area{ padding: 18px 16px; }
	.fkz-comment-list .children{ margin-left: 12px; padding-left: 10px; }
	.comment-body{ gap: 10px; }
	.comment-author img{ width: 36px; height: 36px; }
}

.fkz-archive{
	max-width: var(--fkz-max);
	margin: 0 auto;
	padding: 20px 18px 40px;
}

.fkz-archive-header{
	background: #fff;
	border: 1px solid var(--fkz-border);
	border-radius: var(--fkz-radius);
	box-shadow: var(--fkz-shadow);
	padding: 20px 22px;
	margin-bottom: 18px;
	border-left: 4px solid var(--fkz-primary);
}

.fkz-archive-title{
	margin: 0 0 6px;
	font-size: 22px;
	font-weight: 800;
	color: var(--fkz-text);
}

.fkz-archive-desc{
	font-size: 14px;
	color: var(--fkz-text-muted);
	margin-bottom: 8px;
}

.fkz-archive-count{
	margin: 0;
	font-size: 12.5px;
	color: var(--fkz-text-muted);
}

.fkz-archive-pagination{
	margin-top: 22px;
	display: flex;
	justify-content: center;
}

.fkz-archive-pagination .nav-links{
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	align-items: center;
}

.fkz-archive-pagination .page-numbers{
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 36px;
	height: 36px;
	padding: 0 10px;
	border-radius: 7px;
	background: #fff;
	border: 1px solid var(--fkz-border);
	color: var(--fkz-text);
	text-decoration: none;
	font-size: 13px;
	font-weight: 600;
	transition: background .15s, color .15s, border-color .15s;
}

.fkz-archive-pagination .page-numbers:hover{
	border-color: var(--fkz-primary);
	color: var(--fkz-primary);
}

.fkz-archive-pagination .page-numbers.current{
	background: var(--fkz-primary);
	border-color: var(--fkz-primary);
	color: #fff;
}

.fkz-archive-pagination .page-numbers.dots{
	background: transparent;
	border: none;
}

.fkz-archive-title span{
	color: var(--fkz-primary);
}

.fkz-search-empty{
	background: #fff;
	border: 1px dashed var(--fkz-border);
	border-radius: var(--fkz-radius);
	padding: 30px 20px;
	text-align: center;
}

.fkz-search-empty p{
	color: var(--fkz-text-muted);
	margin: 0 0 16px;
}

.fkz-search-empty .search-form{
	display: flex;
	gap: 8px;
	max-width: 420px;
	margin: 0 auto;
}

.fkz-search-empty input[type="search"]{
	flex: 1;
	height: 40px;
	border: 1px solid #d0d5dd;
	border-radius: 7px;
	padding: 0 12px;
	font-size: 14px;
}

.fkz-search-empty button{
	height: 40px;
	padding: 0 18px;
	border: none;
	border-radius: 7px;
	background: var(--fkz-primary);
	color: #fff;
	font-weight: 700;
	cursor: pointer;
}

/* =============================================================
   404
   ============================================================= */

.fkz-404{
	max-width: var(--fkz-max);
	margin: 0 auto;
	padding: 20px 18px 40px;
}

.fkz-404-inner{
	background: #fff;
	border: 1px solid var(--fkz-border);
	border-radius: var(--fkz-radius);
	box-shadow: var(--fkz-shadow);
	max-width: 560px;
	margin: 0 auto 30px;
	padding: 44px 30px;
	text-align: center;
}

.fkz-404-code{
	margin: 0;
	font-size: 56px;
	font-weight: 900;
	color: var(--fkz-primary);
	line-height: 1;
	letter-spacing: -.02em;
}

.fkz-404-title{
	margin: 8px 0 10px;
	font-size: 20px;
	font-weight: 800;
}

.fkz-404-text{
	margin: 0 0 22px;
	color: var(--fkz-text-muted);
	font-size: 14px;
}

.fkz-404-search .search-form{
	display: flex;
	gap: 8px;
	margin-bottom: 20px;
}

.fkz-404-search input[type="search"]{
	flex: 1;
	height: 42px;
	border: 1px solid #d0d5dd;
	border-radius: 7px;
	padding: 0 14px;
	font-size: 14px;
}

.fkz-404-search button{
	height: 42px;
	padding: 0 18px;
	border: none;
	border-radius: 7px;
	background: var(--fkz-primary);
	color: #fff;
	font-weight: 700;
	cursor: pointer;
}

.fkz-404-home{
	display: inline-block;
	font-size: 13.5px;
	font-weight: 700;
	color: var(--fkz-primary);
	text-decoration: none;
}

.fkz-404-home:hover{ text-decoration: underline; }

@media (max-width: 640px){
	.fkz-single-header{ padding: 18px 16px 0; }
	.fkz-single-title{ font-size: 21px; }
	.fkz-single-content{ padding: 18px 16px 4px; font-size: 15px; }
	.fkz-single-thumb{ margin: -18px -16px 16px; }
	.fkz-single-tags{ padding: 4px 16px 18px; }
	.fkz-single-author-box{ margin: 0 16px 18px; flex-direction: column; align-items: flex-start; }
}

.fkz-page-article{
	background: #fff;
	border: 1px solid var(--fkz-border);
	border-radius: var(--fkz-radius);
	box-shadow: var(--fkz-shadow);
	padding: 28px 24px;
	max-width: 800px;
	margin: 0 auto;
}

.fkz-page-title{
	margin: 0 0 18px;
	padding-bottom: 14px;
	border-bottom: 3px solid var(--fkz-primary);
	font-size: 26px;
	font-weight: 800;
}

.fkz-page-thumb{
	margin: 0 0 20px;
	border-radius: var(--fkz-radius);
	overflow: hidden;
}

.fkz-page-content{ font-size: 15px; line-height: 1.7; color: var(--fkz-text); }
.fkz-page-content p{ margin: 0 0 16px; }

.fkz-page-content h2,
.fkz-page-content h3,
.fkz-page-content h4{
	margin: 28px 0 12px;
	font-weight: 700;
	line-height: 1.35;
	color: var(--fkz-text);
}

.fkz-page-content h2{ font-size: 20px; padding-bottom: 8px; border-bottom: 2px solid var(--fkz-border); }
.fkz-page-content h3{ font-size: 17px; }
.fkz-page-content h4{ font-size: 15px; }

.fkz-page-content ul,
.fkz-page-content ol{
	margin: 0 0 16px;
	padding-left: 22px;
}

.fkz-page-content li{ margin-bottom: 6px; }
.fkz-page-content li > ul,
.fkz-page-content li > ol{ margin-top: 6px; margin-bottom: 0; }

.fkz-page-content blockquote{
	margin: 0 0 16px;
	padding: 12px 18px;
	border-left: 4px solid var(--fkz-primary);
	background: var(--fkz-bg);
	border-radius: 0 8px 8px 0;
	font-style: italic;
	color: var(--fkz-text-muted);
}

.fkz-page-content blockquote p:last-child{ margin-bottom: 0; }

.fkz-page-content table{
	width: 100%;
	border-collapse: collapse;
	margin: 0 0 16px;
	font-size: 14px;
}

.fkz-page-content th,
.fkz-page-content td{
	padding: 10px 12px;
	border: 1px solid var(--fkz-border);
	text-align: left;
}

.fkz-page-content th{
	background: var(--fkz-bg);
	font-weight: 700;
}

@media (max-width: 640px){
	.fkz-page-content table{
		display: block;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
	}
}

.fkz-page-content a{
	color: var(--fkz-primary);
	text-decoration: underline;
}

.fkz-page-content img{
	border-radius: 8px;
	margin: 12px 0;
}

.fkz-page-content hr{
	border: none;
	border-top: 1px solid var(--fkz-border);
	margin: 28px 0;
}

.fkz-page-content strong{ font-weight: 700; }

/* =============================================================
   FOOTER
   ============================================================= */

.fkz-footer{
	background: #14161a;
	color: #cfd3d8;
	margin-top: 30px;
}

.fkz-footer-bar{
	max-width: var(--fkz-max);
	margin: 0 auto;
	padding: 16px 18px;
	display: flex;
	align-items: flex-start;
}

.fkz-footer-bottom{
	flex: 0 0 35%;
	max-width: 35%;
}

.fkz-footer-bottom p{
	margin: 0;
	font-size: 12px;
	color: #9099a3;
	white-space: normal;
	word-wrap: break-word;
}

.fkz-footer-nav{
	flex: 0 0 65%;
	max-width: 65%;
}

.fkz-footer-menu{
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-end;
	gap: 4px 2px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.fkz-footer-menu li{ position: relative; }

.fkz-footer-menu a{
	display: block;
	padding: 5px 11px;
	color: #cfd3d8;
	text-decoration: none;
	font-size: 11px;
	font-weight: 600;
	border-radius: 6px;
	white-space: nowrap;
	transition: background .15s, color .15s;
}

.fkz-footer-menu a:hover{
	background: rgba(255,255,255,.08);
	color: #fff;
}

.fkz-footer-menu .sub-menu{
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-end;
	width: 100%;
}

.fkz-footer-widgets{
	max-width: var(--fkz-max);
	margin: 0 auto;
	padding: 30px 18px 10px;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 24px;
}

.fkz-footer-col .widget{ margin-bottom: 20px; }
.fkz-footer-col .widget:last-child{ margin-bottom: 0; }

.fkz-footer-col .block-title{
	margin: 0 0 12px;
	padding-bottom: 8px;
	border-bottom: 2px solid rgba(255,255,255,.15);
}

.fkz-footer-col .block-title span{
	font-size: 13px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .04em;
	color: #fff;
}

.fkz-footer-col .widget,
.fkz-footer-col .widget p{
	color: #9099a3;
	font-size: 13px;
	line-height: 1.6;
}

.fkz-footer-col .widget ul{
	list-style: none;
	margin: 0;
	padding: 0;
}

.fkz-footer-col .widget li{
	padding: 7px 0;
	border-bottom: 1px solid rgba(255,255,255,.06);
	font-size: 13px;
}

.fkz-footer-col .widget li:last-child{ border-bottom: none; }

.fkz-footer-col .widget a{
	color: #cfd3d8;
	text-decoration: none;
}

.fkz-footer-col .widget a:hover{ color: #fff; }

.fkz-footer-col .widget img{ max-width: 100%; height: auto; border-radius: 6px; }

@media (max-width: 720px){
	.fkz-footer-widgets{ grid-template-columns: 1fr; gap: 20px; }
}