/*!
Theme Name: CyberTech
Theme URI: https://zerotenweb.com.ng/wordpress/themes/cybertech
Author: Zeroten Technologies Ltd.
Author URI: https://zerotenweb.com.ng
Description: A premium, minimalist grid layout theme built for modern tech tools, AI platforms, and tech software blogging.
Version: 1.0.0
Tested up to: 6.5
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: cybertech
Tags: custom-background, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned.

CyberTech is owned and developed by Zeroten Technologies Ltd.
It is based on Underscores https://underscores.me/, (C) 2012-2020 Automattic, Inc.
Underscores is distributed under the terms of the GNU GPL v2 or later.

Normalizing styles have been helped along thanks to the fine work of
Nicolas Gallagher and Jonathan Neal https://necolas.github.io/normalize.css/
*/

/*--------------------------------------------------------------
>>> TABLE OF CONTENTS:
----------------------------------------------------------------
# Generic
	- Normalize
	- Box sizing
	- Custom Brand Variables
# Base
	- Typography
	- Elements
	- Links
	- Forms
## Layouts
# Components
	- Navigation
	- Posts and pages
	- Comments
	- Widgets
	- Media
	- Captions
	- Galleries
# plugins
	- Jetpack infinite scroll
# Utilities
	- Accessibility
	- Alignments
# Dashboard Theme Extensions (FutureToolLab Match)
--------------------------------------------------------------*/

/*--------------------------------------------------------------
# Generic
--------------------------------------------------------------*/

/* Normalize
--------------------------------------------- */
html {
	line-height: 1.15;
	-webkit-text-size-adjust: 100%;
}

body {
	margin: 0;
}

main {
	display: block;
}

h1 {
	font-size: 2em;
	margin: 0.67em 0;
}

hr {
	box-sizing: content-box;
	height: 0;
	overflow: visible;
}

pre {
	font-family: monospace, monospace;
	font-size: 1em;
}

a {
	background-color: transparent;
}

abbr[title] {
	border-bottom: none;
	text-decoration: underline;
	text-decoration: underline dotted;
}

b,
strong {
	font-weight: bolder;
}

code,
kbd,
samp {
	font-family: monospace, monospace;
	font-size: 1em;
}

small {
	font-size: 80%;
}

sub,
sup {
	font-size: 75%;
	line-height: 0;
	position: relative;
	vertical-align: baseline;
}

sub {
	bottom: -0.25em;
}

sup {
	top: -0.5em;
}

img {
	border-style: none;
}

button,
input,
optgroup,
select,
textarea {
	font-family: inherit;
	font-size: 100%;
	line-height: 1.15;
	margin: 0;
}

button,
input {
	overflow: visible;
}

button,
select {
	text-transform: none;
}

button,
[type="button"],
[type="reset"],
[type="submit"] {
	-webkit-appearance: button;
}

button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {
	border-style: none;
	padding: 0;
}

button:-moz-focusring,
[type="button"]:-moz-focusring,
[type="reset"]:-moz-focusring,
[type="submit"]:-moz-focusring {
	outline: 1px dotted ButtonText;
}

fieldset {
	padding: 0.35em 0.75em 0.625em;
}

legend {
	box-sizing: border-box;
	color: inherit;
	display: table;
	max-width: 100%;
	padding: 0;
	white-space: normal;
}

progress {
	vertical-align: baseline;
}

textarea {
	overflow: auto;
}

[type="checkbox"],
[type="radio"] {
	box-sizing: border-box;
	padding: 0;
}

[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button {
	height: auto;
}

[type="search"] {
	-webkit-appearance: textfield;
	outline-offset: -2px;
}

[type="search"]::-webkit-search-decoration {
	-webkit-appearance: none;
}

::-webkit-file-upload-button {
	-webkit-appearance: button;
	font: inherit;
}

details {
	display: block;
}

summary {
	display: list-item;
}

template {
	display: none;
}

[hidden] {
	display: none;
}

/* Box sizing
--------------------------------------------- */
*,
*::before,
*::after {
	box-sizing: inherit;
}

html {
	box-sizing: border-box;
}

/* Custom Brand Variables
--------------------------------------------- */
:root {
	/* Client Brand Colors */
	--brand-primary: #0F172A;
	--brand-accent: #3B82F6;
	--brand-secondary: #14B8A6;
	--brand-bg: #F8FAFC;
	--brand-gray-light: #F8FAFC;
	--brand-border: #E2E8F0;
	
	/* Brand Typography Engine */
	--font-sans: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	--font-mono: 'Fira Code', monaco, consolas, "Andale Mono", monospace;

	/* Added FutureToolLab Specific Variables */
	--ftl-card-bg: #ffffff;
	--ftl-primary-blue: #0066ff;
	--ftl-text-main: #0f172a;
	--ftl-text-muted: #64748b;
	--ftl-dark-box: #0b1329;
}

/*--------------------------------------------------------------
# Base
--------------------------------------------------------------*/

/* Typography
--------------------------------------------- */
body,
button,
input,
select,
optgroup,
textarea {
	color: var(--brand-primary);
	font-family: var(--font-sans);
	font-size: 1rem;
	line-height: 1.6;
}

h1,
h2,
h3,
h4,
h5,
h6 {
	clear: both;
	color: var(--brand-primary);
	font-weight: 700;
}

p {
	margin-bottom: 1.5em;
	color: rgba(15, 23, 42, 0.85);
}

dfn,
cite,
em,
i {
	font-style: italic;
}

blockquote {
	margin: 0 1.5em;
	padding-left: 1em;
	border-left: 4px solid var(--brand-accent);
	color: var(--brand-primary);
	font-style: italic;
}

address {
	margin: 0 0 1.5em;
}

pre {
	background: var(--brand-gray-light);
	border: 1px solid var(--brand-border);
	border-radius: 6px;
	font-family: var(--font-mono);
	line-height: 1.6;
	margin-bottom: 1.6em;
	max-width: 100%;
	overflow: auto;
	padding: 1.6em;
}

code,
kbd,
tt,
var {
	font-family: var(--font-mono);
	background: var(--brand-gray-light);
	border: 1px solid var(--brand-border);
	padding: 2px 6px;
	border-radius: 4px;
	font-size: 0.9em;
}

abbr,
acronym {
	border-bottom: 1px dotted #666;
	cursor: help;
}

mark,
ins {
	background: #fff9c0;
	text-decoration: none;
}

big {
	font-size: 125%;
}

/* Elements
--------------------------------------------- */
body {
	background: var(--brand-bg);
}

hr {
	background-color: var(--brand-border);
	border: 0;
	height: 1px;
	margin-bottom: 1.5em;
}

ul,
ol {
	margin: 0 0 1.5em 2em;
}

ul {
	list-style: disc;
}

ol {
	list-style: decimal;
}

li > ul,
li > ol {
	margin-bottom: 0;
	margin-left: 1.5em;
}

dt {
	font-weight: 700;
}

dd {
	margin: 0 1.5em 1.5em;
}

embed,
iframe,
object {
	max-width: 100%;
}

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

figure {
	margin: 1em 0;
}

table {
	margin: 0 0 1.5em;
	width: 100%;
	border-collapse: collapse;
}

table th, 
table td {
	border: 1px solid var(--brand-border);
	padding: 10px;
	text-align: left;
}

table th {
	background: var(--brand-gray-light);
}

/* Links
--------------------------------------------- */
a {
	color: var(--brand-accent);
	text-decoration: none;
	transition: color 0.2s ease-in-out;
}

a:visited {
	color: var(--brand-accent);
}

a:hover,
a:focus,
a:active {
	color: var(--brand-secondary);
	text-decoration: none;
}

a:focus {
	outline: 2px dashed var(--brand-accent);
	outline-offset: 2px;
}

a:hover,
a:active {
	outline: 0;
}

/* Forms
--------------------------------------------- */
button,
input[type="button"],
input[type="reset"],
input[type="submit"] {
	border: 1px solid var(--brand-accent);
	border-radius: 4px;
	background: var(--brand-accent);
	color: #ffffff;
	line-height: 1;
	font-weight: 600;
	padding: 0.8em 1.4em;
	cursor: pointer;
	transition: background 0.2s ease, border-color 0.2s ease;
}

button:hover,
input[type="button"]:hover,
input[type="reset"]:hover,
input[type="submit"]:hover {
	background: var(--brand-secondary);
	border-color: var(--brand-secondary);
	color: #ffffff;
}

input[type="text"],
input[type="email"],
input[type="url"],
input[type="password"],
input[type="search"],
input[type="number"],
input[type="tel"],
textarea {
	color: var(--brand-primary);
	border: 1px solid var(--brand-border);
	background: #ffffff;
	border-radius: 4px;
	padding: 8px 12px;
	width: 100%;
	max-width: 100%;
	box-shadow: none;
	transition: border-color 0.2s ease;
}

input[type="text"]:focus,
input[type="email"]:focus,
textarea:focus {
	border-color: var(--brand-accent);
	outline: none;
}

select {
	border: 1px solid var(--brand-border);
	padding: 6px;
	border-radius: 4px;
}

/*--------------------------------------------------------------
# Components
--------------------------------------------------------------*/

/* Navigation Defaults */
.main-navigation {
	display: block;
	width: 100%;
}
.main-navigation ul {
	display: none;
	list-style: none;
	margin: 0;
	padding-left: 0;
}
.main-navigation ul ul {
	box-shadow: 0 4px 12px rgba(15, 23, 42, 0.08);
	float: left;
	position: absolute;
	top: 100%;
	left: -999em;
	z-index: 99999;
	background: var(--brand-primary);
	border-radius: 4px;
	padding: 8px 0;
}
.main-navigation ul ul li:hover > ul {
	display: block;
	left: auto;
}
.main-navigation ul ul a {
	width: 200px;
	padding: 8px 16px;
	color: rgba(255, 255, 255, 0.8);
}
.main-navigation ul ul a:hover {
	color: var(--brand-accent);
	background: rgba(255, 255, 255, 0.05);
}
.main-navigation li {
	position: relative;
}
.main-navigation a {
	display: block;
	text-decoration: none;
}

.comment-navigation .nav-links,
.posts-navigation .nav-links,
.post-navigation .nav-links {
	display: flex;
}
.comment-navigation .nav-previous,
.posts-navigation .nav-previous,
.post-navigation .nav-previous {
	flex: 1 0 50%;
}
.comment-navigation .nav-next,
.posts-navigation .nav-next,
.post-navigation .nav-next {
	text-align: end;
	flex: 1 0 50%;
}

/* Posts and pages basic overrides */
.sticky { display: block; }
.post, .page { margin: 0 0 2.5em; }
.updated:not(.published) { display: none; }
.page-content, .entry-content, .entry-summary { margin: 1.5em 0 0; }

/* Widgets basic settings */
.widget {
	margin: 0 0 2em;
	padding: 20px;
	background: var(--brand-gray-light);
	border: 1px solid var(--brand-border);
	border-radius: 6px;
}
.widget-title {
	font-size: 1.15rem;
	margin-top: 0;
	margin-bottom: 12px;
	border-bottom: 2px solid var(--brand-border);
	padding-bottom: 6px;
}

/* Captions & Media */
.custom-logo-link { display: inline-block; }
.wp-caption {
	margin-bottom: 1.5em;
	max-width: 100%;
	background: var(--brand-gray-light);
	border: 1px solid var(--brand-border);
	border-radius: 4px;
	padding: 6px;
}
.wp-caption .wp-caption-text {
	margin: 0.8075em 0;
	font-size: 0.85rem;
	color: rgba(15, 23, 42, 0.7);
	text-align: center;
}

/* Galleries */
.gallery { margin-bottom: 1.5em; display: grid; grid-gap: 1.5em; }
.gallery-item { display: inline-block; text-align: center; width: 100%; }
.gallery-columns-3 { grid-template-columns: repeat(3, 1fr); }

/* Accessibility Utility Styles */
.screen-reader-text {
	border: 0;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute !important;
	width: 1px;
	word-wrap: normal !important;
}

/* Alignments */
.alignleft { float: left; margin-right: 1.5em; margin-bottom: 1.5em; }
.alignright { float: right; margin-left: 1.5em; margin-bottom: 1.5em; }
.aligncenter { clear: both; display: block; margin-left: auto; margin-right: auto; margin-bottom: 1.5em; }

/*--------------------------------------------------------------
# CyberTech Base Navigation Header Styles
--------------------------------------------------------------*/
.site-header {
	background-color: var(--brand-primary);
	border-bottom: 1px solid rgba(255, 255, 255, 0.1);
	padding: 15px 0;
	width: 100%;
	position: relative;
}
.header-container {
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 20px;
	display: flex;
	justify-content: space-between;
	align-items: center;
}
.site-branding { display: flex; align-items: center; gap: 12px; }
.custom-logo { max-height: 40px; width: auto; }
.site-title { font-size: 1.25rem; font-weight: 700; margin: 0; }
.site-title a { color: #FFFFFF !important; }
.site-description { font-size: 0.75rem; color: rgba(255, 255, 255, 0.6); margin: 2px 0 0 0; }
.header-navigation-wrapper { display: flex; align-items: center; gap: 40px; }
.main-navigation ul { display: flex; gap: 24px; margin: 0; padding: 0; }
.main-navigation a {
	color: rgba(255, 255, 255, 0.8) !important;
	font-size: 0.95rem;
	font-weight: 500;
	padding: 8px 0;
}
.main-navigation a:hover { color: var(--brand-accent) !important; }
.header-actions { display: flex; align-items: center; gap: 20px; }
.header-subscribe-btn {
	background-color: var(--brand-accent) !important;
	border-color: var(--brand-accent) !important;
	color: #ffffff !important;
	padding: 8px 18px !important;
	font-size: 0.9rem !important;
	border-radius: 6px !important;
}

/* Global Reset for Menu Toggle */
.menu-toggle {
	display: none;
	background: transparent;
	border: none;
	padding: 0;
	cursor: pointer;
}

/* Modal Mechanical Engine Layout Setup */
.search-overlay-modal {
	position: fixed; top: 0; left: 0; width: 100%; height: 100%;
	background-color: rgba(15, 23, 42, 0.95); backdrop-filter: blur(8px);
	z-index: 999999; display: flex; align-items: flex-start; justify-content: center;
	padding-top: 10vh; opacity: 0; pointer-events: none; transition: opacity 0.25s ease;
}
.search-overlay-modal:target { opacity: 1; pointer-events: auto; }
.search-modal-inner-content { width: 100%; max-width: 600px; padding: 30px; background: #FFFFFF; border-radius: 12px; }

/*--------------------------------------------------------------
# Dashboard App Framework Layout Rules (FutureToolLab Sync Engine)
--------------------------------------------------------------*/

/* Main Application Layout Centering Wrapper */
.ftl-container {
	max-width: 1200px;
	margin: 0 auto;
	padding: 40px 20px;
}

/* --- 1. Featured Section UI --- */
.ftl-hero-section {
	margin-bottom: 32px;
}
.ftl-hero-card {
	background: linear-gradient(135deg, #ffffff 0%, #edf4ff 100%);
	border: 1px solid var(--brand-border);
	border-radius: 16px;
	padding: 32px;
	display: flex;
	position: relative;
	overflow: hidden;
}
.ftl-hero-content {
	flex: 1;
	z-index: 2;
}
.ftl-badge {
	background-color: var(--ftl-primary-blue);
	color: #fff;
	font-size: 11px;
	font-weight: bold;
	text-transform: uppercase;
	padding: 4px 10px;
	border-radius: 20px;
	display: inline-block;
	margin-bottom: 12px;
}
.ftl-hero-title {
	font-size: 28px;
	font-weight: 800;
	line-height: 1.2;
	margin: 0 0 12px 0;
	color: var(--ftl-text-main);
}
.ftl-hero-excerpt {
	color: var(--ftl-text-muted);
	font-size: 15px;
	line-height: 1.5;
	margin-bottom: 20px;
}
.ftl-btn-primary {
	background-color: var(--ftl-primary-blue);
	color: #fff !important;
	text-decoration: none;
	font-weight: 600;
	font-size: 14px;
	padding: 12px 22px;
	border-radius: 8px;
	display: inline-block;
}
.ftl-hero-visual {
	width: 30%;
	display: flex;
	align-items: center;
	justify-content: center;
}
.ftl-mock-graphic {
	font-size: 72px;
	filter: drop-shadow(0px 10px 15px rgba(0,102,255,0.2));
}
.ftl-carousel-dots {
	text-align: center;
	margin-top: 16px;
}
.ftl-carousel-dots .dot {
	height: 6px;
	width: 6px;
	background-color: #cbd5e1;
	border-radius: 50%;
	display: inline-block;
	margin: 0 4px;
}
.ftl-carousel-dots .dot.active {
	background-color: var(--ftl-primary-blue);
	width: 16px;
	border-radius: 4px;
}

/* --- 2. Horizontal Slider Navigation Menu Grid --- */
.ftl-category-grid {
	display: flex;
	gap: 16px;
	overflow-x: auto;
	padding-bottom: 16px;
	margin-bottom: 40px;
	scrollbar-width: none;
}
.ftl-category-grid::-webkit-scrollbar { 
	display: none;
}
.ftl-cat-card {
	background: var(--ftl-card-bg);
	border: 1px solid var(--brand-border);
	border-radius: 12px;
	padding: 16px 12px;
	text-align: center;
	text-decoration: none;
	min-width: 130px;
	flex: 1;
	flex-shrink: 0;
	box-shadow: 0 1px 3px rgba(0,0,0,0.02);
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.ftl-cat-card:hover {
	transform: translateY(-2px);
	box-shadow: 0 4px 12px rgba(15, 23, 42, 0.05);
}
.ftl-cat-icon {
	width: 44px;
	height: 44px;
	border-radius: 8px;
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0 auto 10px auto;
	font-size: 20px;
}
.icon-blue { background-color: #e0f2fe; }
.icon-green { background-color: #dcfce7; }
.icon-purple { background-color: #f3e8ff; }
.icon-teal { background-color: #ccfbf1; }
.icon-darkblue { background-color: #dbeafe; }

.ftl-cat-card h3 {
	font-size: 14px;
	margin: 0 0 4px 0;
	color: var(--ftl-text-main);
}
.ftl-cat-card p {
	font-size: 11px;
	margin: 0;
	color: var(--ftl-text-muted);
}

/* --- 3. Custom Responsive Feed Layout --- */
.ftl-main-content {
	margin-bottom: 40px;
}
.ftl-section-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 20px;
}
.ftl-section-header h2 {
	font-size: 20px;
	font-weight: 700;
	margin: 0;
}
.ftl-view-all {
	color: var(--ftl-primary-blue);
	font-size: 14px;
	text-decoration: none;
	font-weight: 600;
}

/* Default Mobile Post Stack List */
.ftl-posts-list {
	display: flex;
	flex-direction: column;
	gap: 12px;
}
.ftl-post-row {
	background: var(--ftl-card-bg);
	border: 1px solid var(--brand-border);
	border-radius: 12px;
	margin: 0;
	overflow: hidden;
}
.ftl-post-row-link {
	display: flex;
	align-items: center;
	padding: 16px 20px;
	text-decoration: none;
	transition: background 0.2s ease;
}
.ftl-post-row-link:hover {
	background-color: #f8fafc;
}
.ftl-post-thumbnail img, .ftl-post-thumb-placeholder {
	width: 48px;
	height: 48px;
	border-radius: 8px;
	object-fit: cover;
}
.ftl-post-thumb-placeholder {
	background-color: #6366f1;
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	font-weight: bold;
	font-size: 13px;
}
.ftl-post-details {
	flex: 1;
	padding-left: 16px;
}
.ftl-post-title {
	font-size: 15px;
	font-weight: 600;
	color: var(--ftl-text-main) !important;
	margin: 0 0 4px 0;
	line-height: 1.4;
}
.ftl-post-date {
	font-size: 12px;
	color: var(--ftl-text-muted);
}
.ftl-post-arrow {
	color: #94a3b8;
	font-size: 22px;
	font-weight: 300;
}

/* --- 4. Deep Dark Mode Newsletter Box Structure --- */
.ftl-newsletter-box {
	background-color: var(--ftl-dark-box);
	border-radius: 16px;
	padding: 32px;
	color: #ffffff;
	position: relative;
}
.ftl-news-icon {
	font-size: 28px;
	margin-bottom: 12px;
}
.ftl-news-text h3 {
	font-size: 20px;
	margin: 0 0 8px 0;
	color: #ffffff;
}
.ftl-news-text p {
	color: #94a3b8;
	font-size: 14px;
	line-height: 1.5;
	margin: 0 0 20px 0;
}
.ftl-news-form {
	display: flex;
	gap: 12px;
	margin-bottom: 14px;
	max-width: 500px;
}
.ftl-news-form input[type="email"] {
	flex: 1;
	background-color: #1e293b;
	border: 1px solid #334155;
	padding: 12px 16px;
	border-radius: 8px;
	color: #fff;
	font-size: 14px;
}
.ftl-news-form button {
	background-color: var(--ftl-primary-blue);
	color: white;
	border: none;
	padding: 12px 24px;
	border-radius: 8px;
	font-weight: 600;
	cursor: pointer;
}
.ftl-news-subtext {
	font-size: 11px;
	color: #64748b;
	display: block;
}

/* --- 5. Desktop Grid Enhancements --- */
@media screen and (min-width: 48rem) {
	.ftl-posts-list {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		gap: 16px;
	}
	.ftl-hero-title {
		font-size: 32px;
	}
}

/*--------------------------------------------------------------
# Global Navigation Mobile Adaptations Engine Override Rules
--------------------------------------------------------------*/
@media screen and (max-width: 48rem) {
	/* 1. Reset and style the core button container */
	.main-navigation .menu-toggle {
		display: flex !important;
		background: transparent !important;
		border: none !important;
		padding: 0 !important;
		width: 24px;
		height: 18px;
		align-items: center;
		justify-content: center;
		cursor: pointer;
		z-index: 100000;
		position: relative;
	}

	/* 2. Create bounding box parameters for the icon */
	.hamburger-box {
		width: 24px;
		height: 18px;
		display: inline-block;
		position: relative;
	}

	/* 3. Draw middle line bar, use pseudo-elements for top and bottom lines */
	.hamburger-inner,
	.hamburger-inner::before,
	.hamburger-inner::after {
		width: 24px;
		height: 2px;
		background-color: #ffffff !important;
		position: absolute;
		border-radius: 4px;
		transition: transform 0.2s ease-in-out, opacity 0.2s ease-in-out;
	}

	/* Absolute spacing mappings for all 3 layered bars */
	.hamburger-inner {
		top: 50%;
		transform: translateY(-50%);
	}
	.hamburger-inner::before {
		content: "";
		top: -7px;
		left: 0;
	}
	.hamburger-inner::after {
		content: "";
		bottom: -7px;
		left: 0;
	}
	
	/* Prevent old open/close markup structures from breaking layouts */
	.menu-toggle.open-menu,
	.menu-toggle.close-menu {
		display: none !important;
	}

	/* 4. Dropdown navigation sheet setup */
	.main-navigation ul {
		display: none;
		flex-direction: column;
		position: absolute;
		top: 100%;
		left: 0;
		right: 0;
		width: 100%;
		background-color: var(--brand-primary);
		padding: 24px;
		z-index: 99999;
		gap: 16px;
		box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.3);
	}
	.main-navigation ul ul {
		position: relative;
		left: 0;
		top: 0;
		box-shadow: none;
		padding-left: 15px;
		display: block;
	}

	/* 5. Trigger dropdown animation visibility mapping when class exists */
	.main-navigation.toggled ul {
		display: flex !important;
	}

	/* 6. Mechanical CSS Morph Engine: Turn 3 bars into close 'X' symbol */
	.main-navigation.toggled .hamburger-inner {
		transform: rotate(45deg);
	}
	.main-navigation.toggled .hamburger-inner::before {
		opacity: 0;
	}
	.main-navigation.toggled .hamburger-inner::after {
		transform: translateY(-7px) rotate(-90deg);
	}
}

/* Desktop Safety & Presentation Rules */
@media screen and (min-width: 48.01rem) {
	.menu-toggle,
	.main-navigation .menu-toggle {
		display: none !important;
	}
	.main-navigation ul {
		display: flex !important;
	}
}

/*--------------------------------------------------------------
# Featured Slider Component Layout Extensions
--------------------------------------------------------------*/
.ftl-slider-wrapper {
    position: relative;
    width: 100%;
    min-height: 320px;
}

/* Hide inactive slides and set transition behavior */
.ftl-hero-card.ftl-slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.5s ease-in-out, visibility 0.5s ease-in-out;
}

/* Make the active slide interactable */
.ftl-hero-card.ftl-slide.active {
    position: relative;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

/* Fix link coloring in slide titles */
.ftl-hero-title a {
    color: var(--ftl-text-main);
    text-decoration: none;
}
.ftl-hero-title a:hover {
    color: var(--ftl-primary-blue);
}

/* Responsive constraints for featured images */
.ftl-slider-image-wrapper {
    width: 100%;
    height: 160px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border-radius: 12px;
}
.ftl-slider-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Make slider indicators clickable */
.ftl-carousel-dots .dot {
    cursor: pointer;
    transition: background-color 0.3s ease, width 0.3s ease;
}

@media screen and (max-width: 48rem) {
    .ftl-slider-wrapper {
        min-height: 420px;
    }
    .ftl-hero-card {
        flex-direction: column;
        padding: 20px;
    }
    .ftl-hero-visual {
        width: 100%;
        margin-top: 15px;
    }
}

/*--------------------------------------------------------------
# Premium Ultra-Dark Minimalist Footer (Image 1001041659.jpeg Reference Match)
--------------------------------------------------------------*/
.site-footer {
	background-color: #020719 !important; /* Deep midnight slate */
	padding: 40px 20px 30px !important;
	color: #94a3b8 !important;
	font-family: var(--font-sans);
	width: 100% !important;
	margin-top: 60px;
	box-sizing: border-box;
	display: block !important;
	clear: both !important;
}

.site-footer .footer-container {
	max-width: 1200px;
	margin: 0 auto !important;
	display: flex !important;
	flex-direction: column !important;
	align-items: center !important;
	justify-content: center !important;
	text-align: center !important;
}

/* Row 1: Social Media SVG Row Layout */
.site-footer .footer-social-row {
	display: flex !important;
	justify-content: center !important;
	align-items: center !important;
	gap: 34px !important;
	margin: 0 auto 28px auto !important;
	padding: 0 !important;
	flex-wrap: wrap;
	list-style: none !important;
}

.site-footer .footer-social-row a {
	color: #ffffff !important;
	text-decoration: none !important;
	opacity: 0.85;
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	transition: opacity 0.2s ease, transform 0.2s ease;
}

.site-footer .footer-social-row a:hover {
	opacity: 1;
	transform: translateY(-1px);
}

.site-footer .footer-social-row a svg {
	width: 19px !important;
	height: 19px !important;
	fill: currentColor !important;
	display: block !important;
}

/* Seamless Horizontal Separator Rules */
.site-footer .footer-divider {
	width: 100% !important;
	border: 0 !important;
	border-top: 1px solid rgba(255, 255, 255, 0.07) !important;
	margin: 0 0 24px 0 !important;
	height: 1px !important;
}

/* Row 2: Navigation Menu Row Setup */
.site-footer .footer-navigation-row {
	margin-bottom: 20px !important;
	width: 100% !important;
}

.site-footer .footer-inline-menu {
	list-style: none !important;
	padding: 0 !important;
	margin: 0 auto !important; /* Clears global left margin indentations */
	display: flex !important;
	justify-content: center !important;
	align-items: center !important;
	gap: 28px !important;
	flex-wrap: wrap;
}

.site-footer .footer-inline-menu li {
	list-style: none !important;
	margin: 0 !important;
	padding: 0 !important;
}

.site-footer .footer-inline-menu a {
	color: #94a3b8 !important;
	font-size: 0.825rem !important;
	font-weight: 500 !important;
	text-decoration: none !important;
	transition: color 0.2s ease;
}

.site-footer .footer-inline-menu a:hover {
	color: #ffffff !important;
}

/* Row 3: Bottom Credits Text Mappings */
.site-footer .footer-bottom-row {
	text-align: center !important;
	width: 100% !important;
	margin: 0 !important;
	padding: 0 !important;
}

/* Explicitly overrides global dark slate text properties to avoid black-on-black text drops */
.site-footer p.copyright-text, 
.site-footer .footer-bottom-row p {
	margin: 0 !important;
	padding: 0 !important;
	color: #64748b !important;
	font-size: 0.775rem !important;
	font-weight: 400 !important;
	letter-spacing: 0.2px;
	line-height: 1.5 !important;
	display: block !important;
	visibility: visible !important;
	text-align: center !important;
}

/* Mobile Responsiveness Rules Override */
@media screen and (max-width: 48rem) {
	.site-footer {
		padding: 32px 16px 24px !important;
	}
	.site-footer .footer-inline-menu {
		gap: 16px 20px !important;
	}
	.site-footer .footer-social-row {
		gap: 24px !important;
		margin-bottom: 22px !important;
	}
}

/*--------------------------------------------------------------
# Premium Single Article Typography & Blueprint Layouts
--------------------------------------------------------------*/
.cyber-single-container {
    max-width: 740px !important; /* Ideal width constraint for comfortable text scanning */
    margin: 0 auto;
    padding-top: 50px;
    padding-bottom: 80px;
}

.cyber-single-post {
    background: #ffffff;
    border: 1px solid var(--brand-border);
    border-radius: 16px;
    padding: 40px;
    margin-bottom: 30px;
    box-shadow: 0 4px 6px -1px rgba(15, 23, 42, 0.02), 0 2px 4px -1px rgba(15, 23, 42, 0.01);
}

/* Post Header Structures */
.single-post-header {
    margin-bottom: 32px;
    text-align: left;
}

.single-post-meta-top {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
}

.single-post-badge {
    background-color: rgba(59, 130, 246, 0.1);
    color: var(--brand-accent) !important;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 4px 12px;
    border-radius: 20px;
}

.single-post-date {
    font-size: 0.85rem;
    color: var(--ftl-text-muted);
}

.single-post-title {
    font-size: 2.25rem;
    line-height: 1.25;
    font-weight: 800;
    color: var(--ftl-text-main);
    margin: 0 0 20px 0;
    letter-spacing: -0.5px;
}

/* Author Profiling Rules */
.single-post-author-wrapper {
    display: flex;
    align-items: center;
    gap: 12px;
    border-top: 1px solid var(--brand-border);
    padding-top: 16px;
}

.author-avatar img {
    border-radius: 50%;
    background: var(--brand-gray-light);
    display: block;
}

.author-name {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--ftl-text-main);
}

/* Image Presentation Engines */
.single-post-featured-media {
    margin-left: -40px;
    margin-right: -40px;
    margin-bottom: 36px;
    overflow: hidden;
}

.single-post-hero-img {
    width: 100%;
    height: auto;
    max-height: 420px;
    object-fit: cover;
    display: block;
}

/* Core Typography Deep Overrides for High Content Scannability */
.single-post-entry-content {
    font-size: 1.075rem;
    line-height: 1.75;
    color: #334155; /* Neutral slate dark gray for low eye strain */
}

.single-post-entry-content p {
    color: #334155;
    margin-bottom: 1.6em;
}

.single-post-entry-content h2 {
    font-size: 1.6rem;
    margin: 1.8em 0 0.6em 0;
    color: var(--ftl-text-main);
    letter-spacing: -0.3px;
}

.single-post-entry-content h3 {
    font-size: 1.3rem;
    margin: 1.6em 0 0.6em 0;
    color: var(--ftl-text-main);
}

/* Style links typed manually directly inside content files */
.single-post-entry-content a {
    color: var(--brand-accent);
    text-decoration: underline;
    text-underline-offset: 4px;
    font-weight: 500;
}

.single-post-entry-content a:hover {
    color: var(--brand-secondary);
}

/* Bottom Tags & Navigation System mapping styles */
.single-post-footer-meta {
    margin-top: 40px;
    padding-top: 20px;
    border-top: 1px solid var(--brand-border);
}

.single-post-tags {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    font-size: 0.85rem;
}

.tags-label {
    color: var(--ftl-text-muted);
    font-weight: 500;
}

.single-post-tags a {
    background: var(--brand-gray-light);
    color: var(--ftl-text-main) !important;
    padding: 4px 10px;
    border-radius: 4px;
    border: 1px solid var(--brand-border);
}

.single-post-tags a:hover {
    background: #edf4ff;
    border-color: rgba(59, 130, 246, 0.3);
    color: var(--brand-accent) !important;
}

/* Inter-post Nav Link Layouts below article cards */
.post-navigation {
    margin-bottom: 40px;
}

.post-navigation .nav-links {
    display: flex;
    justify-content: space-between;
    gap: 20px;
}

.post-navigation a {
    background: #ffffff;
    border: 1px solid var(--brand-border);
    padding: 14px 20px;
    border-radius: 12px;
    flex: 1;
    display: flex;
    flex-direction: column;
    transition: border-color 0.2s ease, transform 0.2s ease;
}

.post-navigation a:hover {
    border-color: rgba(59, 130, 246, 0.4);
    transform: translateY(-1px);
}

.post-navigation .nav-next {
    text-align: right;
}

.nav-subtitle {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--brand-accent);
}

/* Single View Responsive Adaptations */
@media screen and (max-width: 48rem) {
    .cyber-single-container {
        padding-top: 20px;
    }
    .cyber-single-post {
        padding: 24px 20px;
        border-radius: 0; /* Bleed to glass edges cleanly on mobile screens */
        border-left: none;
        border-right: none;
    }
    .single-post-featured-media {
        margin-left: -20px;
        margin-right: -20px;
    }
    .single-post-title {
        font-size: 1.75rem;
    }
    .post-navigation .nav-links {
        flex-direction: column;
    }
}

/*--------------------------------------------------------------
# Responsive Grid Blueprints for Post and Sidebar Layouts
--------------------------------------------------------------*/
.cyber-single-grid-layout {
    display: grid;
    grid-template-columns: 1fr; /* Stack layout seamlessly on mobile screens */
    gap: 30px;
    align-items: start;
}

/* Sidebar formatting rules matching your theme */
.cyber-single-sidebar-column {
    width: 100%;
}
.cyber-single-sidebar-column .widget {
    background: #ffffff;
    border: 1px solid var(--brand-border);
    border-radius: 16px;
    padding: 24px;
    box-shadow: 0 4px 6px -1px rgba(15, 23, 42, 0.02);
}

/* --- Related Posts Grid Architecture --- */
.cyber-related-posts-section {
    margin: 40px 0;
    padding-top: 30px;
    border-top: 1px solid var(--brand-border);
}

.related-section-title {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--ftl-text-main);
    margin-bottom: 20px;
    letter-spacing: -0.2px;
}

.cyber-related-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
}

.related-post-card {
    background: #ffffff;
    border: 1px solid var(--brand-border);
    border-radius: 12px;
    overflow: hidden;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.related-post-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(15, 23, 42, 0.05);
}

.related-card-link {
    display: flex; /* Clean horizontal layouts on small blocks */
    align-items: center;
    text-decoration: none;
}

.related-card-media {
    width: 90px;
    height: 75px;
    flex-shrink: 0;
    overflow: hidden;
    background: var(--brand-gray-light);
}

.related-card-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.related-placeholder-thumb {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: bold;
    color: #ffffff;
    background: var(--brand-accent);
}

.related-card-meta {
    padding: 12px 16px;
    flex: 1;
}

.related-date {
    font-size: 0.75rem;
    color: var(--ftl-text-muted);
    display: block;
    margin-bottom: 3px;
}

.related-title {
    font-size: 0.95rem;
    font-weight: 600;
    line-height: 1.3;
    color: var(--ftl-text-main) !important;
    margin: 0;
}

/*--------------------------------------------------------------
# Desktop Grid Media Queries (Minimum 48rem/768px Widths)
--------------------------------------------------------------*/
@media screen and (min-width: 48.01rem) {
    .cyber-single-grid-layout {
        grid-template-columns: 2.3fr 1fr; /* Perfect golden-ratio tracking layout splits */
    }
    
    .cyber-related-grid {
        grid-template-columns: repeat(3, 1fr); /* Split related items layout to 3 structural rows */
    }
    
    .related-card-link {
        flex-direction: column; /* Vertical post blocks look pristine on desktop */
        align-items: stretch;
    }
    
    .related-card-media {
        width: 100%;
        height: 120px;
    }
}

/*--------------------------------------------------------------
# Premium Custom Sidebar Layout Component Upgrades
--------------------------------------------------------------*/
.cyber-custom-sidebar {
    display: flex;
    flex-direction: column;
    gap: 24px; /* Distinct gap spacing between stacked widgets */
}

/* Latest Updates Structural Item Cards */
.sidebar-latest-posts-list {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-top: 14px;
}

.sidebar-post-item {
    border-bottom: 1px solid rgba(226, 232, 240, 0.5);
    padding-bottom: 14px;
}

.sidebar-post-item:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.sidebar-post-link {
    display: flex;
    align-items: center;
    gap: 12px;
    text-decoration: none;
}

.sidebar-post-thumb {
    width: 52px;
    height: 52px;
    flex-shrink: 0;
    overflow: hidden;
    border-radius: 8px;
    background: var(--brand-gray-light);
    border: 1px solid var(--brand-border);
}

.sidebar-post-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.sidebar-placeholder-thumb {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    font-weight: 700;
    color: #ffffff;
    background: var(--brand-secondary);
}

.sidebar-post-info {
    flex: 1;
}

.sidebar-post-title {
    font-size: 0.9rem;
    font-weight: 600;
    line-height: 1.35;
    color: var(--ftl-text-main) !important;
    margin: 0 0 4px 0;
    display: -webkit-box;
    -webkit-line-clamp: 2; /* Truncate text elegantly after 2 rows */
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.sidebar-post-date {
    font-size: 0.75rem;
    color: var(--ftl-text-muted);
}

/* Category Pill/Stack Item Rules */
.sidebar-category-list {
    list-style: none !important;
    padding: 0 !important;
    margin: 12px 0 0 0 !important;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.sidebar-category-list li {
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
}

.sidebar-category-list a {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 14px;
    background: var(--brand-gray-light);
    border: 1px solid var(--brand-border);
    border-radius: 8px;
    color: var(--ftl-text-main) !important;
    font-size: 0.85rem;
    font-weight: 500;
    transition: all 0.2s ease;
}

.sidebar-category-list a:hover {
    background: #edf4ff;
    border-color: rgba(59, 130, 246, 0.3);
    color: var(--brand-accent) !important;
    transform: translateX(2px); /* Gentle slide indicator highlight on hover */
}

.cat-count {
    font-size: 0.75rem;
    font-weight: 600;
    background: #ffffff;
    color: var(--ftl-text-muted);
    padding: 2px 8px;
    border-radius: 20px;
    border: 1px solid var(--brand-border);
}

.sidebar-category-list a:hover .cat-count {
    background: var(--brand-accent);
    color: #ffffff;
    border-color: var(--brand-accent);
}

.no-sidebar-posts {
    font-size: 0.85rem;
    color: var(--ftl-text-muted);
    margin: 0;
}

/*--------------------------------------------------------------
# Sidebar Search Optimization Styles
--------------------------------------------------------------*/
.cyber-single-sidebar-column {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.sidebar-search-header-block {
    background: #ffffff;
    border: 1px solid var(--brand-border);
    border-radius: 16px;
    padding: 16px;
    box-shadow: 0 4px 6px -1px rgba(15, 23, 42, 0.02);
}

/* Style the native WP search form input fields directly */
.sidebar-search-header-block .search-form {
    display: flex;
    align-items: center;
    width: 100%;
    gap: 8px;
}

.sidebar-search-header-block .search-form label {
    flex: 1;
    margin: 0;
}

.sidebar-search-header-block .search-field {
    width: 100%;
    background: var(--brand-gray-light);
    border: 1px solid var(--brand-border);
    padding: 10px 14px;
    border-radius: 8px;
    font-size: 0.875rem;
    color: var(--ftl-text-main);
    outline: none;
    transition: border-color 0.2s ease, background-color 0.2s ease;
}

.sidebar-search-header-block .search-field:focus {
    border-color: var(--brand-accent);
    background: #ffffff;
}

.sidebar-search-header-block .search-submit {
    background: var(--brand-accent);
    color: #ffffff;
    border: none;
    padding: 10px 16px;
    border-radius: 8px;
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.sidebar-search-header-block .search-submit:hover {
    background: var(--brand-secondary);
}

/*--------------------------------------------------------------
# Category Archive Structural Header Component Layouts
--------------------------------------------------------------*/
.archive-header-hero-panel {
    background: #ffffff;
    border: 1px solid var(--brand-border);
    border-radius: 16px;
    padding: 30px 40px;
    margin-top: 40px;
    margin-bottom: 30px;
    box-shadow: 0 4px 6px -1px rgba(15, 23, 42, 0.02);
}

.archive-eyebrow {
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--brand-accent);
    display: block;
    margin-bottom: 6px;
}

.archive-title-heading {
    font-size: 2rem;
    font-weight: 800;
    line-height: 1.2;
    color: var(--ftl-text-main);
    margin: 0;
    letter-spacing: -0.5px;
}

.archive-description-text {
    font-size: 0.95rem;
    line-height: 1.5;
    color: var(--ftl-text-muted);
    margin-top: 10px;
    max-width: 600px;
}

/* Category Feed Spacing Wrappers */
.cyber-category-posts-feed {
    display: flex;
    flex-direction: column;
    gap: 16px; /* Spacing between row layout posts */
    margin-bottom: 40px;
}

/* --- Native Archive Feed Pagination Styles --- */
.navigation.pagination {
    margin: 40px 0;
}

.navigation.pagination .nav-links {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.navigation.pagination .page-numbers {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    height: 40px;
    padding: 0 14px;
    border-radius: 8px;
    background: #ffffff;
    border: 1px solid var(--brand-border);
    color: var(--ftl-text-main);
    font-size: 0.9rem;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.2s ease;
}

.navigation.pagination .page-numbers.current,
.navigation.pagination .page-numbers:hover {
    background: var(--brand-accent);
    border-color: var(--brand-accent);
    color: #ffffff !important;
}

.navigation.pagination .page-numbers.dots {
    background: transparent;
    border-color: transparent;
    color: var(--ftl-text-muted);
    min-width: auto;
    padding: 0 4px;
}

/* Responsive Adaptive Clean-ups */
@media screen and (max-width: 48rem) {
    .archive-header-hero-panel {
        margin-top: 20px;
        padding: 24px 20px;
        border-radius: 0;
        border-left: none;
        border-right: none;
    }
    .archive-title-heading {
        font-size: 1.6rem;
    }
}

/*--------------------------------------------------------------
# Static Page Architecture & Typography
--------------------------------------------------------------*/
.cyber-page-center-layout {
    max-width: 740px; /* Golden standard width for pure text readability */
    margin: 40px auto;
    padding: 0 20px;
}

.page-header-panel {
    margin-bottom: 24px;
    text-align: left;
}

.page-main-title {
    font-size: 2.5rem;
    font-weight: 800;
    letter-spacing: -0.75px;
    color: var(--ftl-text-main);
    line-height: 1.15;
    margin: 0;
}

.page-featured-media {
    margin-bottom: 32px;
    overflow: hidden;
    border-radius: 12px;
    border: 1px solid var(--brand-border);
}

.page-hero-img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
}

/* Page Body Typography Enhancements */
.page-body-content {
    font-size: 1.05rem;
    line-height: 1.65;
    color: var(--ftl-text-main);
}

.page-body-content p {
    margin-bottom: 1.5rem;
}

.page-body-content h2 {
    font-size: 1.75rem;
    font-weight: 700;
    margin-top: 2rem;
    margin-bottom: 1rem;
    color: var(--ftl-text-main);
    letter-spacing: -0.3px;
}

/* Responsive Scaling rules */
@media screen and (max-width: 48rem) {
    .cyber-page-center-layout {
        margin: 20px auto;
    }
    .page-main-title {
        font-size: 2rem;
    }
}

/*--------------------------------------------------------------
# Modern App-Style 404 Error Component System
--------------------------------------------------------------*/
.cyber-error-page-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 80px 0;
    min-height: 65vh;
}

.error-404-card {
    max-width: 600px;
    margin: 0 auto;
    background: #ffffff;
    border: 1px solid var(--brand-border);
    border-radius: 16px;
    padding: 50px 40px;
    text-align: center;
    box-shadow: 0 10px 25px -5px rgba(15, 23, 42, 0.04), 0 8px 10px -6px rgba(15, 23, 42, 0.04);
}

/* Big tech numeric error anchor */
.error-graphic-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--brand-gray-light);
    border: 1px solid var(--brand-border);
    padding: 8px 24px;
    border-radius: 30px;
    margin-bottom: 24px;
}

.error-code {
    font-family: 'Fira Code', monospace, sans-serif;
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--brand-accent);
    letter-spacing: 1px;
}

.error-title-main {
    font-size: 2.25rem;
    font-weight: 800;
    line-height: 1.2;
    color: var(--ftl-text-main);
    margin: 0 0 14px 0;
    letter-spacing: -0.75px;
}

.error-lead-text {
    font-size: 1.05rem;
    line-height: 1.6;
    color: var(--ftl-text-muted);
    margin: 0 0 36px 0;
}

/* Recovery Form Integration overrides */
.error-recovery-action-panel {
    border-top: 1px solid var(--brand-border);
    padding-top: 32px;
}

.search-helper-label {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--ftl-text-main);
    margin-bottom: 12px;
    text-align: left;
}

/* Force 404 search bar layout matching single view */
.error-search-box-wrapper .search-form {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    margin-bottom: 30px;
}

.error-search-box-wrapper .search-form label {
    flex: 1;
}

.error-search-box-wrapper .search-field {
    width: 100%;
    background: var(--brand-gray-light);
    border: 1px solid var(--brand-border);
    padding: 12px 16px;
    border-radius: 10px;
    font-size: 0.9rem;
    outline: none;
    transition: all 0.2s ease;
}

.error-search-box-wrapper .search-field:focus {
    background: #ffffff;
    border-color: var(--brand-accent);
}

.error-search-box-wrapper .search-submit {
    background: var(--brand-accent);
    color: #ffffff;
    border: none;
    padding: 12px 20px;
    border-radius: 10px;
    font-weight: 600;
    font-size: 0.9rem;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.error-search-box-wrapper .search-submit:hover {
    background: var(--brand-secondary);
}

/* Return Button Style */
.error-home-btn {
    display: inline-flex;
    align-items: center;
    color: var(--ftl-text-muted);
    text-decoration: none;
    font-size: 0.9rem;
    font-weight: 600;
    transition: color 0.2s ease;
}

.error-home-btn:hover {
    color: var(--brand-accent);
}

/* Responsive Scaling rules */
@media screen and (max-width: 48rem) {
    .cyber-error-page-wrapper {
        padding: 40px 20px;
    }
    .error-404-card {
        padding: 36px 20px;
        border-radius: 12px;
    }
    .error-title-main {
        font-size: 1.75rem;
    }
}

/*--------------------------------------------------------------
# Premium Dynamic Sitemap Component Layout
--------------------------------------------------------------*/
.cyber-sitemap-card {
    background: #ffffff;
    border: 1px solid var(--brand-border);
    border-radius: 16px;
    padding: 50px 40px;
    margin: 40px auto;
    box-shadow: 0 4px 6px -1px rgba(15, 23, 42, 0.02);
    max-width: 1100px;
}

.sitemap-eyebrow {
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--brand-accent);
    display: block;
    margin-bottom: 6px;
}

.sitemap-main-title {
    font-size: 2.5rem;
    font-weight: 800;
    color: var(--ftl-text-main);
    margin: 0 0 12px 0;
    letter-spacing: -0.75px;
}

.sitemap-intro-text {
    font-size: 1rem;
    line-height: 1.5;
    color: var(--ftl-text-muted);
    max-width: 600px;
}

.sitemap-divider {
    border: 0;
    height: 1px;
    background: var(--brand-border);
    margin: 35px 0;
}

/* 3-Column Architecture Grid Configuration */
.sitemap-grid-layout {
    display: grid;
    grid-template-columns: 1fr;
    gap: 40px;
}

.sitemap-col-title {
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--ftl-text-main);
    margin: 0 0 20px 0;
    display: flex;
    align-items: center;
    gap: 8px;
    letter-spacing: -0.2px;
}

.sitemap-col-title .col-icon {
    font-size: 1.1rem;
}

/* Link Node Tree Resets */
.sitemap-links-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.sitemap-links-list li {
    font-size: 0.95rem;
    line-height: 1.4;
    position: relative;
}

.sitemap-links-list li a {
    color: var(--ftl-text-main);
    text-decoration: none;
    transition: color 0.15s ease;
}

.sitemap-links-list li a:hover {
    color: var(--brand-accent);
}

/* Format WordPress default parent/child page indentation natively */
.sitemap-links-list .children {
    list-style: none;
    padding-left: 16px;
    margin-top: 10px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    border-left: 2px solid var(--brand-border);
}

/* Category count badge style match */
.sitemap-links-list li .children {
    margin-bottom: -4px;
}

/* Responsive Adaptive Viewports Breakpoints */
@media screen and (min-width: 48.01rem) {
    .sitemap-grid-layout {
        grid-template-columns: repeat(3, 1fr); /* Snaps cleanly into 3 uniform rows */
    }
}

@media screen and (max-width: 48rem) {
    .cyber-sitemap-card {
        padding: 30px 20px;
        margin: 20px auto;
        border-radius: 12px;
    }
    .sitemap-main-title {
        font-size: 2rem;
    }
}

/*--------------------------------------------------------------
# Hard Override: Complete Branding Gap Elimination
--------------------------------------------------------------*/

/* 1. Strip the logo image and its anchor link down to absolute zero */
.site-branding img.custom-logo,
.custom-logo-link img,
.custom-logo-link {
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    max-height: 120px !important;
    height: 75px !important;
    width: auto !important;
}

/* 2. Target the text container wrapper to shift it left */
.site-branding .site-branding-text,
.site-branding .header-text-wrapper,
.site-branding div[class*="-text"] {
    margin-left: -25px !important; /* Forces text to jump left, overlapping the logo's transparent space */
    padding-left: 0 !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

/* 3. Strip individual text elements */
.site-title, 
.site-title a {
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1.0 !important;
    display: block !important;
}

/* 4. Target the site description / subtitle specifically to reduce size */
.site-description {
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1.0 !important;
    display: block !important;
    font-size: 0.50rem !important; /* Adjust this value (e.g., 12px, 0.75rem) to find your perfect size */
    letter-spacing: 1px;           /* Gives the tagline clean readability */
    margin-top: 4px !important;    /* Adds a tiny bit of breathing room below the title */
}

/* 5. Force container alignment */
.site-branding {
    display: flex !important;
    align-items: center !important;
    gap: 0 !important;
}
/*--------------------------------------------------------------
# CyberTech Mobile View Branding Adjustments
--------------------------------------------------------------*/
@media screen and (max-width: 48rem) {
    
    /* 1. Scale down the logo slightly so it fits mobile screen widths */
    .site-branding img.custom-logo,
    .custom-logo-link img {
        height: 55px !important; /* Slightly shorter for mobile headers */
        max-height: 90px !important;
		margin-top: 9px !important;
		margin-left: -10px !important;
    }

    /* 2. Balance the text shift on small screens */
    .site-branding .site-branding-text,
    .site-branding .header-text-wrapper,
    .site-branding div[class*="-text"] {
        margin-left: -12px !important; /* A gentler shift so it doesn't overlap text on mobile view */
        padding-left: 0 !important;
    }

    /* 3. Ensure the branding container stays side-by-side and centered */
    .site-branding {
        display: flex !important;
        align-items: center !important;
        gap: 0 !important;
    }

    /* 4. Fine tune mobile title sizing if it's wrapping too early */
    .site-title {
        font-size: 1.1rem !important; /* Makes the title text a bit smaller to match the smaller logo */
        line-height: 1.1 !important;
		margin-left: -12px !important;
		
    }

    /* 5. Match desktop tagline sizing rules for mobile */
    .site-description {
        font-size: 0.40rem !important; /* Perfectly matches your desktop size choice */
        line-height: 1.0 !important;
        display: block !important;
        letter-spacing: 1px;
        margin-top: 3px !important;    /* Slightly tighter gap for mobile layouts */
		margin-left: -12px !important;
    }
}
/*--------------------------------------------------------------
# Force Featured Slider Image to Show on Top on Mobile Viewports
--------------------------------------------------------------*/
@media screen and (max-width: 48rem) {
    
    /* 1. Turn the slider card into a flex column framework */
    .ftl-hero-card.ftl-slide {
        display: flex !important;
        flex-direction: column !important;
    }

    /* 2. Explicitly force the visual media element to index position 1 */
    .ftl-hero-card .ftl-hero-visual {
        order: 1 !important;
        margin-top: 0 !important;
        margin-bottom: 20px !important; /* Creates buffer space below the image */
    }

    /* 3. Explicitly force the text content block to index position 2 */
    .ftl-hero-card .ftl-hero-content {
        order: 2 !important;
    }
}

@media screen and (min-width: 48.01rem) {
    /* 1. Ensure the wrapper acts as a row layout for desktop */
    .header-navigation-wrapper {
        display: flex !important;
        flex-direction: row !important;
        align-items: center;
        gap: 40px; /* Maintains your existing gap */
    }

    /* 2. Force the navigation menu to come first */
    #site-navigation {
        order: 1 !important;
    }

    /* 3. Force the search icon actions to sit after the menu */
    .header-actions {
        order: 2 !important;
    }
}

@media screen and (max-width: 48rem) {
    /* 1. Establish flex configuration on the mobile wrapping parent */
    .header-navigation-wrapper {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        gap: 16px !important; /* Adjust gap for mobile dimensions if needed */
    }

    /* 2. Force the search icon to load first on mobile viewports */
    .header-actions {
        order: 1 !important;
    }

    /* 3. Force the navigation container (hamburger) to sit after search */
    #site-navigation {
        order: 2 !important;
    }
    
    /* 4. Keep the internal layout safe for the button toggle */
    .main-navigation .menu-toggle {
        display: flex !important;
    }
}