/* Kamai Jackson-Wade - Theme CSS - Black & White */

/* Body background */
html body.animated.fadeIn,
html body.animated,
html body,
body.animated.fadeIn,
body.animated,
body {
    background: linear-gradient(135deg, #0b0e17 0%, #0a0d14 100%) !important;
    background-color: #0b0e17 !important;
    background-attachment: fixed !important;
    color: #f1f5f9 !important;
}

body #background-div,
html body #background-div,
#background-div {
    background: linear-gradient(135deg, #0b0e17 0%, #0a0d14 100%) !important;
    background-color: #0b0e17 !important;
}

body #background-svg,
html body #background-svg,
#background-svg {
    background: transparent !important;
}

.bgColor1,
stop.bgColor1,
#background-svg stop.bgColor1,
body #background-svg stop.bgColor1,
svg stop.bgColor1 {
    stop-color: #0b0e17 !important;
}

.bgColor2,
stop.bgColor2,
#background-svg stop.bgColor2,
body #background-svg stop.bgColor2,
svg stop.bgColor2 {
    stop-color: #0a0d14 !important;
}

/* Headers - white */
body .container h1,
body .content-div h1,
body h1,
html body h1,
h1,
.post-title {
    color: #ffffff !important;
    text-decoration-color: #ffffff !important;
    border-bottom-color: #333333 !important;
    background: none !important;
    -webkit-background-clip: unset !important;
    -webkit-text-fill-color: #ffffff !important;
    background-clip: unset !important;
}

body h1 a,
body h1 a:hover,
body .content-div h1 a,
body .content-div h1 a:hover,
h1 a,
h1 a:hover {
    color: #ffffff !important;
    background: none !important;
    -webkit-text-fill-color: #ffffff !important;
}

body .container h2,
body .content-div h2,
body h2,
html body h2,
h2 {
    color: #ffffff !important;
    border-bottom: 2px solid #333333 !important;
    border-bottom-color: #333333 !important;
}

body .container h3,
body .content-div h3,
body h3,
html body h3,
h3 {
    color: #ffffff !important;
}

body .container h4,
body .content-div h4,
body h4,
html body h4,
h4,
body .container h5,
body .content-div h5,
body h5,
html body h5,
h5,
body .container h6,
body .content-div h6,
body h6,
html body h6,
h6 {
    color: #ffffff !important;
}

/* Links - white with grey hover */
body .container a,
body .content-div a,
body a,
html body a,
a {
    color: #ffffff !important;
}

body .container a:hover,
body .content-div a:hover,
body a:hover,
html body a:hover,
a:hover {
    color: #aaaaaa !important;
}

/* Navigation background */
body nav:not(.navbar-container),
body .navbar:not(.navbar-container),
html body nav:not(.navbar-container),
html body .navbar:not(.navbar-container) {
    background-color: rgba(10, 10, 10, 0.95) !important;
    background: rgba(10, 10, 10, 0.95) !important;
}

body .navbar-icon,
body nav a,
body .navbar a,
html body .navbar-icon,
html body nav a,
.navbar-icon,
nav a,
.navbar a {
    color: #aaaaaa !important;
}

body .navbar-icon:hover,
body nav a:hover,
body .navbar a:hover,
html body .navbar-icon:hover,
html body nav a:hover,
.navbar-icon:hover,
nav a:hover,
.navbar a:hover {
    color: #ffffff !important;
    text-shadow: 0 0 .1em rgba(255, 255, 255, 0.4) !important;
}

/* Containers */
body .container,
body .wrapper,
body main,
html body .container,
html body .wrapper,
html body main,
.container,
.wrapper,
main {
    background: transparent !important;
    background-color: transparent !important;
    position: relative !important;
    z-index: 1 !important;
}

body .content-div,
body .container .content-div,
html body .content-div,
.content-div {
    color: #f1f5f9 !important;
    background: transparent !important;
    background-color: transparent !important;
    position: relative !important;
    z-index: 2 !important;
}

body .content-div p,
body .content-div li,
body .content-div span,
body .content-div div,
body .content-div strong,
body .content-div em,
body .content-div blockquote,
.content-div p,
.content-div li,
.content-div span,
.content-div div,
.content-div strong,
.content-div em,
.content-div blockquote {
    color: #f1f5f9 !important;
}

body p,
body li,
body .container p,
body .container li,
p,
li {
    color: #f1f5f9 !important;
}

body .content-div strong,
body strong,
strong {
    color: #ffffff !important;
    font-weight: 600 !important;
}

body .content-div em,
body em,
em {
    color: #cccccc !important;
    font-style: italic !important;
}

/* Code blocks */
body pre,
body code,
body .highlight,
pre,
code,
.highlight {
    background: #111111 !important;
    background-color: #111111 !important;
    color: #f1f5f9 !important;
    border: 1px solid #333333 !important;
}

/* Blockquotes */
body blockquote,
body .content-div blockquote,
blockquote {
    border-left: 4px solid #ffffff !important;
    background: rgba(255,255,255,0.05) !important;
    background-color: #111111 !important;
    color: #aaaaaa !important;
    padding: 1rem 1.5rem !important;
    margin: 1.5rem 0 !important;
}

/* Tables */
body table th,
body .content-div table th,
table th {
    background-color: #111111 !important;
    color: #ffffff !important;
}

body table td,
body .content-div table td,
table td {
    background-color: #0b0e17 !important;
    color: #f1f5f9 !important;
}

/* Buttons */
body button,
body .btn,
button,
.btn {
    background: #000000 !important;
    background-color: #000000 !important;
    color: #ffffff !important;
    border: 1px solid #ffffff !important;
}

/* Lists */
body .content-div ul,
body .content-div ol,
body ul,
body ol,
ul,
ol {
    color: #f1f5f9 !important;
}

body ul li,
body ol li,
ul li,
ol li {
    color: #f1f5f9 !important;
}

/* HR */
body .content-div hr,
body hr,
hr {
    border-color: #333333 !important;
    background-color: #333333 !important;
}

/* Z-index */
body .content-div {
    z-index: 10 !important;
    position: relative !important;
}

body #background-div {
    z-index: -1 !important;
    position: relative !important;
}

body #background-svg {
    z-index: 0 !important;
}

/* Manifold background canvas */
#manifold-background {
    z-index: 0 !important;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    pointer-events: none !important;
    background: transparent !important;
    display: block !important;
    visibility: visible !important;
    opacity: 0.8 !important;
}

/* Hide home icon in default theme nav */


/* Landing page */
.landing-content {
    text-align: center !important;
    max-width: 600px !important;
    margin: 0 auto !important;
    padding: 4rem 2rem !important;
    min-height: 60vh !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: center !important;
}

.landing-title {
    font-size: 4rem !important;
    font-weight: 700 !important;
    margin: 0 0 1rem 0 !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    background: none !important;
}

.landing-subtitle {
    font-size: 1.5rem !important;
    color: #aaaaaa !important;
    margin: 0 0 2rem 0 !important;
    font-weight: 400 !important;
}

a.learn-more-btn,
.learn-more-btn,
.landing-content .learn-more-btn,
body .learn-more-btn {
    display: inline-block !important;
    padding: 0.75rem 2rem !important;
    background: #ffffff !important;
    background-color: #ffffff !important;
    color: #000000 !important;
    text-decoration: none !important;
    border-radius: 6px !important;
    font-weight: 500 !important;
    transition: transform 0.2s ease, box-shadow 0.2s ease !important;
    margin-top: 1rem !important;
    border: none !important;
}

a.learn-more-btn:hover,
.learn-more-btn:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 12px rgba(255, 255, 255, 0.2) !important;
    color: #000000 !important;
    background: #dddddd !important;
}

/* Footer */
html,
body {
    min-height: 100vh !important;
    display: flex !important;
    flex-direction: column !important;
}

body {
    flex: 1 !important;
}

body .container {
    flex: 1 !important;
    display: flex !important;
    flex-direction: column !important;
}

body .content-div {
    flex: 1 !important;
}

.site-footer {
    text-align: center !important;
    padding: 3rem 1rem 2rem 1rem !important;
    margin-top: auto !important;
    border-top: 1px solid #333333 !important;
    background: rgba(10, 10, 10, 0.6) !important;
    color: #aaaaaa !important;
    font-size: 0.875rem !important;
    width: 100% !important;
    position: relative !important;
    clear: both !important;
    flex-shrink: 0 !important;
}

.site-footer p {
    margin: 0 !important;
    color: #aaaaaa !important;
    opacity: 0.8 !important;
}

/* Hide theme footer social links */
footer.theme-footer,
footer a[href*="github"],
footer a[href*="linkedin"],
footer a[href*="twitter"],
footer a[href*="facebook"],
footer .social-links,
footer .social,
footer .fa-github,
footer .fa-linkedin,
footer .fa-twitter,
footer .fa-facebook,
footer i.fa,
footer .icon {
    display: none !important;
    visibility: hidden !important;
}

/* Container margins */
body .container,
body .wrapper {
    margin-right: auto !important;
    margin-left: auto !important;
    max-width: 84% !important;
    padding-right: 2rem !important;
    padding-left: 2rem !important;
}

body .content-div {
    margin-right: 0 !important;
    margin-left: 0 !important;
    max-width: 100% !important;
    padding-right: 0 !important;
    padding-left: 0 !important;
}

/* Hide theme navigation */
html body>nav:not(header nav):not(.navbar-container):not(.site-navbar),
html body>aside:not(header aside),
html body>.toolbar:not(.navbar-container):not(.navbar-menu),
html body>.sidebar,
html body .toolbar:not(.navbar-container):not(.navbar-menu):not(.site-navbar),
html body .sidebar:not(header .sidebar),
body>nav:not(header nav):not(.navbar-container):not(.site-navbar),
body>aside:not(header aside),
body>.toolbar:not(.navbar-container):not(.navbar-menu),
body>.sidebar,
.toolbar:not(.navbar-container):not(.navbar-menu):not(.site-navbar),
.sidebar:not(header .sidebar) {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    position: absolute !important;
    left: -9999px !important;
    width: 0 !important;
    height: 0 !important;
    overflow: hidden !important;
    pointer-events: none !important;
}

/* Custom header */
header.site-header,
header.site-header.navbar,
header.site-header .navbar,
header.site-header .site-navbar {
    background: rgba(10, 10, 10, 0.95) !important;
    backdrop-filter: blur(10px) !important;
    border-bottom: 1px solid #333333 !important;
    padding: 1rem 0 !important;
    position: sticky !important;
    top: 0 !important;
    z-index: 10000 !important;
    width: 100% !important;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    margin: 0 !important;
}

.navbar-container {
    max-width: 1200px !important;
    margin: 0 auto !important;
    padding: 0 2rem !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 3rem !important;
}

.navbar-brand,
.navbar .navbar-brand,
nav .navbar-brand,
header .navbar-brand,
a.navbar-brand,
a.jetbundle-logo,
header a.navbar-brand,
header a.jetbundle-logo {
    color: #ffffff !important;
    font-size: 1rem !important;
    font-weight: 500 !important;
    text-decoration: none !important;
    margin-right: 0 !important;
    background: none !important;
    -webkit-background-clip: unset !important;
    -webkit-text-fill-color: #ffffff !important;
    background-clip: unset !important;
    display: inline-block !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    cursor: pointer !important;
    position: relative !important;
    z-index: 10001 !important;
    padding: 0.5rem 0.5rem !important;
    transition: all 0.2s ease !important;
    text-shadow: none !important;
}

.navbar-brand:hover,
header .navbar-brand:hover,
a.navbar-brand:hover {
    color: #aaaaaa !important;
    -webkit-text-fill-color: #aaaaaa !important;
    transform: scale(1.05) !important;
    text-shadow: 0 0 12px rgba(255, 255, 255, 0.3) !important;
    opacity: 1 !important;
}

.navbar-menu {
    display: flex !important;
    gap: 2rem !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
}

.navbar-link,
.navbar-menu a {
    color: #aaaaaa !important;
    text-decoration: none !important;
    font-weight: 500 !important;
    font-size: 1rem !important;
    padding: 0.5rem 0.5rem !important;
    transition: color 0.2s ease, transform 0.2s ease !important;
    display: inline-block !important;
    white-space: nowrap !important;
}

.navbar-link:hover,
.navbar-menu a:hover {
    color: #ffffff !important;
    text-shadow: 0 0 6px rgba(255, 255, 255, 0.3) !important;
    transform: translateY(-2px) !important;
}

/* Dropdowns */
.toolbar a,
nav a,
.navbar a,
.navbar-link {
    display: inline-block !important;
    text-decoration: none !important;
}

.toolbar a::after,
nav a::after,
.navbar a::after,
.navbar-link::after {
    display: none !important;
    content: none !important;
}

header .navbar,
.navbar-container {
    display: flex !important;
}



/* Hide theme sidebar/toolbar */
html body aside,
html body .sidebar,
html body .toolbar:not(.navbar-container):not(.navbar-menu),
html body nav.toolbar:not(header nav):not(.navbar-container),
html body .side-nav,
html body .nav-sidebar,
html body aside.toolbar,
html body .toolbar-sidebar,
html body #sidebar,
html body #toolbar,
html body [class*="sidebar"]:not(.navbar-menu):not(.navbar-container),
html body [class*="toolbar"]:not(.navbar-container):not(.navbar-menu),
html body [id*="sidebar"],
html body [id*="toolbar"],
body aside,
body .sidebar,
body .toolbar:not(.navbar-container):not(.navbar-menu),
body nav.toolbar:not(header nav):not(.navbar-container),
body .side-nav,
body .nav-sidebar {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    width: 0 !important;
    height: 0 !important;
    overflow: hidden !important;
    position: absolute !important;
    left: -9999px !important;
    pointer-events: none !important;
}

/* Ensure our header elements are always visible */
header.site-header .navbar,
header.site-header .navbar-container,
header.site-header .navbar-menu,
header.site-header .navbar-link,
header.site-header .navbar-brand {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
}

header.site-header .navbar-link,
header.site-header .navbar-brand {
    cursor: pointer !important;
    pointer-events: auto !important;
    z-index: 10001 !important;
}

a.jetbundle-logo,
a.navbar-brand[href="/"],
header a[href="/"].navbar-brand {
    display: inline-block !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    cursor: pointer !important;
}