/*
Theme Name: ScaleBlogger Dark
Theme URI: https://github.com/joxdigital/scaleblogger-dark
Author: Joshua Okapes, Kelvin K (Contributor)
Author URI: https://tumainicenter.africa
Template: generatepress
Version: 0.1.0
Description: Dark design system and global styles for ScaleBlogger Blog
Text Domain: scaleblogger-dark
*/

/* =========================
SBD – RAW DESIGN TOKENS
========================= */

.sbd {
	/* Typography */
	--sbd-font-sans: Inter, system-ui, -apple-system, sans-serif;

	/* Brand */
	--sbd-blue: 217.2 91.2% 59.8%;
	--sbd-blue-glow: 262 80% 65%;

	/* Dark palette */
	--sbd-dark-bg: 222.2 84% 4.9%;
	--sbd-dark-fg: 210 40% 98%;
	--sbd-dark-border: 217.2 32.6% 17.5%;
	--sbd-dark-muted: 217.2 32.6% 17.5%;
	--sbd-dark-muted-fg: 215 20.2% 65.1%;

	/* NORE RAY TOKENS FROM PARENT SITE */
	--background: 0 0% 100%;
	--foreground: 222.2 84% 4.9%;
	--card: 0 0% 100%;
	--card-foreground: 222.2 84% 4.9%;
	--popover: 0 0% 100%;
	--popover-foreground: 222.2 84% 4.9%;
	--primary: 222.1 83.2% 53.3%;
	--primary-foreground: 210 40% 98%;
	--secondary: 210 40% 96.1%;
	--secondary-foreground: 222.2 47.4% 11.2%;
	--muted: 210 40% 96.1%;
	--muted-foreground: 215.4 16.3% 46.9%;
	--accent: 210 40% 96.1%;
	--accent-foreground: 222.2 47.4% 11.2%;
	--destructive: 0 84.2% 60.2%;
	--destructive-foreground: 210 40% 98%;
	--border: 214.3 31.8% 91.4%;
	--input: 214.3 31.8% 91.4%;
	--ring: 222.1 83.2% 53.3%;
	--primary-glow: 262 83% 58%;
	--radius: .5rem;
	--sidebar-background: 0 0% 100%;
	--sidebar-foreground: 222.2 84% 4.9%;
	--sidebar-primary: 222.1 83.2% 53.3%;
	--sidebar-primary-foreground: 210 40% 98%;
	--sidebar-accent: 210 40% 96.1%;
	--sidebar-accent-foreground: 222.2 47.4% 11.2%;
	--sidebar-border: 214.3 31.8% 91.4%;
	--sidebar-ring: 222.1 83.2% 53.3%;
	--chart-1: 221 83% 53%;
	--chart-2: 262 83% 58%;
	--chart-3: 336 84% 68%;
	--chart-4: 142 76% 36%;
	--chart-5: 25 95% 53%;

	/* States */
	--sbd-danger: 0 62.8% 30.6%;
	--sbd-ring: 224.3 76.3% 48%;

	/* Radius */
	--sbd-radius-sm: 6px;
	--sbd-radius-md: 10px;
	--sbd-radius-lg: 14px;
}






/* =========================
SBD – LIGHT MODE TOKENS
========================= */

.sbd {
	--color-bg: hsl(0 0% 100%);
	--color-text: hsl(222.2 84% 4.9%);
	--color-border: hsl(214.3 31.8% 91.4%);

	--color-primary: hsl(var(--sbd-blue));
	--color-primary-soft: hsl(var(--sbd-blue) / 0.12);

	--color-muted: hsl(210 40% 96.1%);
	--color-muted-fg: hsl(215 16% 47%);

	--color-blue: hsl(var(--sbd-blue));
	--color-blue-glow: hsl(var(--sbd-blue-glow));

	--color-accent: hsl(var(--sbd-blue));
	--color-accent-soft: hsl(var(--sbd-blue) / 0.12);
	--color-accent-glow: hsl(var(--sbd-blue-glow));
}


/* Semantic aliases – DARK */
body.sbd-dark {
	--background: var(--sbd-dark-bg);
	--foreground: var(--sbd-dark-fg);

	--card: var(--sbd-dark-bg);
	--card-foreground: var(--sbd-dark-fg);

	--popover: var(--sbd-dark-bg);
	--popover-foreground: var(--sbd-dark-fg);

	--primary: var(--sbd-blue);
	--primary-foreground: 222.2 47.4% 11.2%;

	--secondary: var(--sbd-dark-muted);
	--secondary-foreground: var(--sbd-dark-fg);

	--muted: var(--sbd-dark-muted);
	--muted-foreground: var(--sbd-dark-muted-fg);

	--accent: var(--sbd-dark-muted);
	--accent-foreground: var(--sbd-dark-fg);

	--destructive: var(--sbd-danger);
	--destructive-foreground: var(--sbd-dark-fg);

	--border: var(--sbd-dark-border);
	--input: var(--sbd-dark-border);
	--ring: var(--sbd-ring);

	--primary-glow: var(--sbd-blue-glow);
}



/* =========================
SBD – DARK MODE TOKENS
========================= */

.sbd-dark {
	--color-bg: hsl(var(--sbd-dark-bg));
	--color-bg-soft: hsl(var(--sbd-dark-muted));
	--color-text: hsl(var(--sbd-dark-fg));
	--color-border: hsl(var(--sbd-dark-border) / 0.6);

	--color-primary: hsl(var(--sbd-blue));
	--color-primary-soft: hsl(var(--sbd-blue) / 0.15);

	--color-muted: hsl(var(--sbd-dark-muted));
	--color-muted-fg: hsl(var(--sbd-dark-muted-fg));

	--color-blue: hsl(var(--sbd-blue));
	--color-blue-glow: hsl(var(--sbd-blue-glow));

	--color-accent: hsl(var(--sbd-blue));
	--color-accent-soft: hsl(var(--sbd-blue) / 0.15);
	--color-accent-glow: hsl(var(--sbd-blue-glow));
}

body.sbd-dark {
	--color-bg: hsl(var(--background));
	--color-text: hsl(var(--foreground));
	--color-border: hsl(var(--border) / 0.6);

	--color-primary: hsl(var(--primary));
	--color-primary-soft: hsl(var(--primary) / 0.15);

	--color-muted: hsl(var(--muted));
	--color-muted-fg: hsl(var(--muted-foreground));

	--color-accent: hsl(var(--primary));
	--color-accent-soft: hsl(var(--primary) / 0.15);
	--color-accent-glow: hsl(var(--primary-glow));
}

/* =========================
SBD – SPACING & LAYOUT
========================= */

:root {
	--sbd-space-2xs: 0.25rem;
	--sbd-space-xs: 0.375rem;
	--sbd-space-sm: 0.5rem;
	--sbd-space-md: 0.75rem;
	--sbd-space-lg: 1rem;
	--sbd-space-xl: 1.5rem;
	--sbd-space-2xl: 2rem;
	--sbd-space-3xl: 3rem;
	--sbd-space-4xl: 6rem;

	--gb-container-width: 100%;

	--sbd-width-md: 350px;
}

/* =========================
SBD – BASE STYLES
========================= */

body.sbd {
	background: var(--color-bg);
	color: var(--color-text);
	font-family: var(--sbd-font-sans);
	font-size: 16px;
}


body.sbd-dark .separate-containers .inside-article,
body.sbd-dark .comments-area,
body.sbd-dark .page-header,
body.sbd-dark .paging-navigation {
	background-color: var(--sbd-dark-bg);
}


.sbd h1,
.sbd h2,
.sbd h3 {
	font-weight: 600;
	letter-spacing: -0.02em;
}

.sbd a {
	color: var(--color-text);
	text-decoration: none;
}

.sbd a:hover {
	text-decoration: underline;
}

.sbd svg {
	fill: var(--color-text);
}

.sbd {
	color: var(--color-text);
}

.sbd svg {
	fill: currentColor;
}

.sbd .gb-shape {
	color: var(--color-text);
}

/* Card primitive */
.sbd .sbd-card {
	background: var(--color-bg);
	border: 1px solid var(--color-border);
	border-radius: var(--sbd-radius-md);
}


/* =========================
SBD – BUTTONS
========================= */

.sbd .gb-button,
.sbd button,
.sbd input[type="submit"] {
	background: var(--color-primary);
	color: var(--color-bg);
	border-radius: var(--sbd-radius-md);
}

/* Primary button */
.sbd a.btn-primary, 
a.btn-primary.gb-text-bab4619e
.sbd .gb-button.is-primary {
	background: var(--color-accent);
	color: var(--color-bg);
	border-radius: var(--sbd-radius-md);
	padding: 0.75rem 1.25rem;
	font-weight: 600;

	transition:
		background 0.2s ease,
		transform 0.2s ease,
		box-shadow 0.2s ease;
	color: var(--color-bg);
	fill: var(--color-bg);
	width: fit-content;


}

.sbd a.btn-primary.gb-text-bab4619e:hover, a.btn-primary:hover {
	box-shadow: rgba(255, 255, 255, .2) 0 3px 15px inset, rgba(0, 0, 0, .1) 0 3px 5px, rgba(0, 0, 0, .1) 0 10px 13px;
	transform: scale(1.05);
}

.sbd .btn-primary.gb-text-bab4619e svg {
	fill: var(--color-bg) !important;
}

.sbd .btn-primary:hover button.btn-primary.gb-text-bab4619e:hover {
	transform: translateY(-1px);
	box-shadow: 0 0 0 3px var(--color-accent-soft);
}


/* Secondary button */
.sbd .btn-secondary {
	background: transparent;
	color: var(--color-text);
	border: 1px solid var(--color-border);
}

.sbd .btn-secondary:hover {
	border-color: var(--color-accent);
	color: var(--color-accent);
}

/* CTA BUTTON EXTRA */

.sbd .btn-cta-extra {
	background-color: --color-bg;
	border: 0;
	border-radius: var(--sbd-space-3xl);
	color: #fff;
	cursor: pointer;
	display: inline-block;
	font-size: 1rem;
	font-weight: 600;
	outline: 0;
	padding: .5rem 1rem;
	position: relative;
	text-align: center;
	text-decoration: none;
	transition: all .3s;
	user-select: none;
	-webkit-user-select: none;
	touch-action: manipulation;
}

@media (min-width: 769px) {

	.sbd .btn-cta-extra {
		padding: 1rem 1.5rem;
	}
}

.sbd .btn-cta-extra::before {
	background-color: initial;
	background-image: linear-gradient(#fff 0, rgba(255, 255, 255, 0) 100%);
	border-radius: var(--sbd-space-xl);
	content: "";
	height: 50%;
	left: 4%;
	opacity: .5;
	position: absolute;
	top: 0;
	transition: all .3s;
	width: 92%;
}

.sbd .btn-cta-extra:hover {
	box-shadow: rgba(255, 255, 255, .2) 0 3px 15px inset, rgba(0, 0, 0, .1) 0 3px 5px, rgba(0, 0, 0, .1) 0 10px 13px;
	transform: scale(1.05);
}

/* =========================
SBD – GENERATEPRESS NORMALIZATION
========================= */

.sbd.separate-containers .inside-article,
.sbd.separate-containers .comments-area,
.sbd.separate-containers .page-header,
.sbd.one-container .container,
.sbd.separate-containers .paging-navigation,
.sbd .inside-page-header {
	background: var(--color-bg);
}

.sbd .main-navigation, .main-navigation ul ul {
	background: var(--color-bg);
}

.sbd .site-footer {
	background-color: var(--color-muted);
}

.sbd .gb-shape svg {
	fill: var(--color-muted-fg);
}

.sbd .inside-header {
	padding: 0 1rem;
}


.sbd .main-navigation.navigation-stick .sticky-navigation-logo img {
	height: 40px;
	width: auto;

}

.sbd #sticky-navigation {
	background: var(--color-bg);
	border-bottom: 1px solid var(--color-border);
}

.sbd-fp-hero svg {
	fill: var(--color-text);
}

.sbd-fp-hero .text-glow {
	color: var(--color-accent);
}

.sbd-fp-hero h1 {
	font-size: 5rem;
}

@media (max-width:600px) {
	.sbd-fp-hero h1 {
		font-size: 3rem;
	}
}
/* Sticky header normalization */
.sbd #sticky-navigation {
	height: 60px;
	transition: 
		height 0.25s ease,
		background-color 0.25s ease,
		box-shadow 0.25s ease;
}

.sbd .navigation-stick.is-sticky #sticky-navigation {
	box-shadow: 0 4px 24px hsl(0 0% 0% / 0.4);
}

.sbd #sticky-navigation img.is-logo-image {
	max-height: 40px;
	transition: max-height 0.25s ease;
}

/* Single post hero */
.sbd .single-page-hero {
	position: relative;
	background-image: var(--inline-bg-image);
	background-size: cover;
	background-position: center;
}
/* 
.sbd .single-page-hero::before {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(
to bottom,
hsl(var(--sbd-dark-bg) / 0.75),
hsl(var(--sbd-dark-bg) / 0.9)
);
}
*/
.sbd .single-page-hero > * {
	position: relative;
	z-index: 1;
}

.sbd .gb-element-89f62b81 {
	background: hsl(var(--sbd-dark-bg) / 0.6);
	backdrop-filter: blur(6px);
	padding: 1rem 1.5rem;
	border-radius: var(--sbd-radius-md);
}

.sbd .gb-element-89f62b81 {
	background: hsl(var(--sbd-dark-bg));
	backdrop-filter: blur(6px);
	padding: 1rem 1.5rem;
	border-radius: var(--sbd-radius-md);
	background: hsl(var(--sbd-dark-bg));
}

.sbg-dark .gb-element-89f62b81 {
	color: hsl(var(--sbd-dark-fg));
	background: hsl(var(--sbd-dark-bg));

}

/* Single Post Images */
.dynamic-entry-content img {
	margin: 1rem;
	border: 1px solid var(--color-accent-soft);
	border-radius: var(--sbd-radius-sm);
}

/* Single Post Images */
.wp-block-table {
	overflow-x: auto;
	padding: .6rem;
	font-size: .9rem;
}

.sbd .gb-element-942cb235 a {
	font-size: 2rem;
}

.sbd .gb-element-942cb235 a {
	font-size: 2rem;
}

.sbd .gb-element-facb83c3.sbd-sm-butttons {
	background-color: hsl(var(--color-bg));
	color: hsl(var(--sbd-fg));
	border-bottom: unset;

}

.sbd .gb-text.gb-text-2a26c7f2, .gb-text-4fe339ec {
	color: var(--color-muted-fg);
}

/* Blog Post card title */
.sbd .gb-text-44ec0ee1 h3{
	font-size: 1.35rem;
	margin-bottom: 5px;
	font-weight: 700;
}

.sbd .gb-text-44ec0ee1 p{
	font-size: .95rem;
	margin-bottom: 5px;
	font-weight: 500;
	color: var(--color-muted-fg);
}

.sbd .sbd-topic-link .btn-cta-extra {
	padding: 8px 12px 6px 12px;
	margin-top: auto;
	margin-bottom: 1rem;
}

.sbd .sbd-topic-link {
	border-radius: var(--sbd-radius-md);
}



/* =========================
SBD – HEADER
========================= */

.sbd .site-header {
	background: var(--color-bg);
	border-bottom: 1px solid var(--color-border);
}




.sbd .gb-element-942cb235 a svg:hover {
	fill: hsl(var(--color-muted));
	background-color: var(--color-accent);
	border-radius: var(--sbd-radius-sm);
	padding: 0.2rem;
}

/* Main Menu */
#primary-menu.main-nav {
	margin-right: auto;
}

.sbd .main-navigation a {
	color: var(--color-text);
	font-weight: 600;
	padding: 0.2rem;
}

.sbd #primary-menu a {
	padding-left: 1rem;
	padding-right: 1rem;
	line-height: 1.5;
}

.sbd #primary-menu a:hover, #primary-menu a:active {
	background-color: var(--color-muted);
	border-radius: var(--sbd-radius-sm);
	text-decoration: none;
	color: var(--color-blue);
}

.sbd #primary-menu  ul.sub-menu li {
	padding: var(--sbd-space-sm);
	width: var(--sbd-width-md);
	z-index: 100;
	background-color: var(--color-bg);
}

/* =========================
SBD – BLOG LOOP CARDS
========================= */

.sbd .gb-loop-item.is-loop-template-item {
	display: flex;
	flex-direction: column;
	gap: var(--sbd-space-md);

	background: var(--color-bg);
	border: 1px solid var(--color-border);
	border-radius: var(--sbd-radius-md);
	padding: var(--sbd-space-lg);

	transition: border-color .2s ease, transform .2s ease;
}

.sbd .gb-loop-item.is-loop-template-item:hover {
	border-color: var(--color-primary);
	transform: translateY(-2px);
}

.sbd .gb-element-64545c82 {
	background-image: var(--inline-bg-image);
	background-size: cover;
	background-position: center;
	border-radius: var(--sbd-radius-sm);
	min-height: 180px;
	padding: var(--sbd-space-sm);
}

.sbd .gb-text-36b3ea72 a {
	font-size: 0.75rem;
	font-weight: 500;
	letter-spacing: .02em;
	color: var(--color-primary);
	background: var(--color-primary-soft);
	padding: 0.25rem 0.5rem;
	border-radius: 999px;
}

.sbd .gb-text-bab4619e {
	margin-top: auto;
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	font-size: 0.85rem;
	color: var(--color-bg);
	width: fit-content;
	align-self: center;

	transition:
		background 0.2s ease,
		transform 0.2s ease,
		box-shadow 0.2s ease;
	color: var(--color-bg);
	fill: var(--color-bg);
}

.sbd .gb-text-bab4619e:hover {
	transform: translateY(-1px);
	box-shadow: 0 0 0 3px var(--color-accent-soft);
	text-decoration: unset;
}


/* ------------------- */
/* --- added edits --- */
/* ------------------- */

/* Off-canvas toggle & close button reset */
.sbd .menu-toggle,
.sbd .slideout-exit {
	background: transparent;
	border: 0;
	box-shadow: none;
	padding: 0.5rem;
	color: var(--color-text);
	line-height: 1;
}

/* Make icon big & clear */
.sbd .menu-toggle svg,
.sbd .slideout-exit svg {
	width: 1.75rem;
	height: 1.75rem;
	fill: currentColor;
}

@media (hover: hover) {
	.sbd .menu-toggle:hover,
	.sbd .slideout-exit:hover {
		opacity: 0.8;
	}
}

/* Full-width off-canvas */
.sbd #generate-slideout-menu {
	width: 100vw;
	max-width: 100vw;
}

/* Inner padding */
.sbd #generate-slideout-menu .inside-navigation {
	padding-left: 1rem;
	padding-right: 1rem;
}

/* Off-canvas logo */
.sbd .offcanvas-logo {
	display: block;
	padding: 0 1rem;
}

.sbd .offcanvas-logo img {
	height: 24px;
	max-height: 24px;
	width: 142px;
	max-width: 142px;
}



/* Hide mobile toggle on desktop */
@media (min-width: 769px) {
	.sbd .menu-toggle {
		display: none;
	}
}

@media (min-width: 769px) {
	.sbd .navigation-search {
		position: relative;
	}

	.sbd .navigation-search input[type="search"] {
		width: 220px;
		padding: 0.45rem 0.75rem;
		border-radius: var(--sbd-radius-md);
		border: 1px solid var(--color-border);
		background: var(--color-bg-soft);
		color: var(--color-text);
	}

	.sbd .navigation-search .search-submit {
		display: none;
	}
}


@media (max-width: 768px) {
	.sbd .navigation-search input {
		display: none;
	}


	/* Off-canvas menu items */
	.sbd .slideout-navigation .menu > li > a {
		font-size: 1.125rem;
		padding: 0.75rem 0;
		color: var(--color-text);
		border-bottom: 1px solid var(--color-border);
	}

	/* Sub-menus */
	.sbd .slideout-navigation .sub-menu a {
		font-size: 1rem;
		padding-left: 1rem;
		opacity: 0.9;
	}

	/* Off-canvas social icons row */
	.sbd #generate-slideout-menu > .inside-navigation > div:last-child {
		display: flex;
		gap: 1rem;
		margin-top: 2rem;
	}

	/* Header control order */
	.sbd .inside-navigation {
		display: flex;
		align-items: center;
	}

	.sbd .site-logo {
		order: 1;
	}

	.sbd .navigation-search {
		order: 2;
		margin-left: auto;
	}

	.sbd .menu-toggle {
		order: 3;
		margin-left: 0.5rem;
	}

	.sbd nav#mobile-header {
		padding: 0 1rem;
	}

	.sbd .gb-looper-f8b19c80 {
		padding: 0 2rem;
	}
}

@media (min-width: 769px) {
	.sbd .menu-bar-item.slideout-toggle.hide-on-mobile.has-svg-icon {
		display: none;
	}
}

.gp-icon.icon-arrow {
	vertical-align: sub;
}


/* BLOG CARDS */

.blog-card {
	display: flex;
	flex-direction: column;
	background: var(--color-bg);
	border: 1px solid var(--color-border);
	border-radius: var(--sbd-radius-md);
	overflow: hidden;
	transition: transform .2s ease, box-shadow .2s ease;
}

.blog-card:hover {
	transform: translateY(-2px);
	box-shadow: 0 10px 30px rgba(0,0,0,.08);
}

.sbd-dark .blog-card:hover {
	box-shadow: 0 10px 30px rgba(0,0,0,.35);
}

.blog-card__media {
	display: block;
	aspect-ratio: 16 / 9;
	background: var(--color-muted);
}

.blog-card__image {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.blog-card__body {
	padding: 1rem;
}

.blog-card__meta {
	display: flex;
	justify-content: space-between;
	font-size: 0.875rem;
	color: var(--color-muted-fg);
	margin: .5rem 0;
}

.blog-card__footer {
	padding: 0 1rem 1rem;
	display: flex;
	justify-content: center;
}

/* Search — Desktop Inline Input */

@media (min-width: 769px) {

	.sbd .navigation-search {
		display: flex;
		align-items: center;
	}

	.sbd .navigation-search a {
		display: none; /* hide icon trigger */
	}

	.sbd .navigation-search form {
		display: block;
	}

}


/* Tables in Posts (Dark Mode) */

.sbd-dark figure.wp-block-table {
	border-color: var(--color-border);
}

.sbd-dark figure.wp-block-table th {
	background: var(--color-muted) !important;
	color: var(--color-text) !important;
}

.sbd-dark figure.wp-block-table td {
	background: var(--color-bg);
	color: var(--color-text);
}

.sbd-dark figure.wp-block-table.is-style-stripes tr:nth-child(even) td {
	background: var(--color-bg-soft);
}

.sbd .blog-card__meta {
	display: flex;
	justify-content: space-between;
}

.blog-card {
	position: relative;
	transition:
		transform 0.2s ease,
		box-shadow 0.2s ease,
		border-color 0.2s ease;
}

.blog-card:hover {
	transform: translateY(-3px);
	border-color: var(--color-primary);
	box-shadow: 0 12px 32px rgba(0,0,0,0.08);
}

.sbd-dark .blog-card:hover {
	box-shadow: 0 16px 40px rgba(0,0,0,0.45);
}


.blog-card__media {
	overflow: hidden;
}

.blog-card__image {
	border-radius: var(--sbd-space-xs);
	transition: transform 0.3s ease, filter 0.3s ease;
}

.blog-card:hover .blog-card__image {
	transform: scale(1.04);
	filter: contrast(1.03);
}


.blog-card__title a {
	color: var(--color-text);
	text-decoration: none;
	transition: color 0.2s ease;
}

.blog-card:hover .blog-card__title a {
	color: var(--color-primary);
}

.blog-card__cta {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	color: var(--color-muted-fg);
	transition: color 0.2s ease, transform 0.2s ease;
}

.blog-card:hover .blog-card__cta {
	color: var(--color-bg-soft);
	transform: translateX(2px);
	text-decoration: none;
}

.blog-card:focus-within {
	transform: translateY(-3px);
	border-color: var(--color-primary);
	box-shadow: 0 12px 32px rgba(0,0,0,0.08);
}

@media (prefers-reduced-motion: reduce) {
	.blog-card,
	.blog-card * {
		transition: none !important;
		transform: none !important;
	}
}


.main-navigation a {
	position: relative;
	transition:
		color 150ms ease,
		opacity 150ms ease;
}


.main-navigation a::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: -4px;
	width: 100%;
	height: 2px;
	background-color: currentColor;
	transform: scaleX(0);
	transform-origin: left;
	transition: transform 180ms ease;
}

.main-navigation a:hover::after,
.main-navigation a:focus-visible::after,
.main-navigation .current-menu-item > a::after {
	transform: scaleX(1);
}

:root {
	--nav-hover-opacity: 0.85;
}

.main-navigation a:hover,
.main-navigation a:focus-visible {
	opacity: var(--nav-hover-opacity);
}

.site-header {
	transition:
		background-color 200ms ease,
		box-shadow 200ms ease;
}

.site-header:hover {
	box-shadow: 0 6px 20px rgba(0,0,0,0.06);
}

[data-theme="dark"] .site-header:hover {
	box-shadow: 0 6px 20px rgba(0,0,0,0.3);
}

.site-logo img {
	transition:
		transform 180ms ease,
		opacity 180ms ease;
}

.site-logo:hover img {
	transform: scale(1.03);
	opacity: 0.9;
}

.site-title a {
	transition: letter-spacing 180ms ease;
}

.site-title a:hover {
	letter-spacing: 0.03em;
}

.menu-toggle {
	transition:
		transform 150ms ease,
		opacity 150ms ease;
}

.menu-toggle:hover {
	opacity: 0.85;
	transform: scale(1.05);
}


.menu-toggle[aria-expanded="true"] {
	transform: rotate(90deg);
}

.main-navigation ul ul {
	opacity: 0;
	transform: translateY(6px);
	transition:
		opacity 150ms ease,
		transform 150ms ease;
}

.main-navigation li:hover > ul,
.main-navigation li:focus-within > ul {
	opacity: 1;
	transform: translateY(0);
}

.main-navigation a:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 4px;
}

.slideout-exit.has-svg-icon {
	width: unset !important;
}



/* Base inline code */
.sbd code,
.sbd-dark code {
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	font-size: 0.95em;
	padding: 0.15em 0.35em;
	border-radius: 4px;
}

/* Light */
.sbd code {
	background: rgba(0,0,0,0.05);
	color: #2d2d2d;
}

/* Dark */
.sbd-dark code {
	background: rgba(255,255,255,0.08);
	color: #f1f1f1;
}

/* Long inline code (JSON etc.) */
.sbd p > code,
.sbd-dark p > code {
	display: inline-block;
	max-width: 100%;
	overflow-x: auto;
	white-space: nowrap;
}

.sbd :not(pre) > code,
.sbd-dark :not(pre) > code {
  white-space: nowrap;
}

.sbd pre,
.sbd-dark pre {
  margin: 1.25em 0;
  padding: 1em 1.25em;
  overflow-x: auto;
  border-radius: 8px;
  line-height: 1.5;
}


.sbd pre {
  background: #f6f8fa;
  color: #24292e;
}

.sbd-dark pre {
  background: #0f172a;
  color: #e5e7eb;
}

.sbd pre code,
.sbd-dark pre code {
  background: none;
  padding: 0;
  white-space: pre;
  display: block;
}

.sbd p > code,
.sbd-dark p > code {
  display: inline-block;
  max-width: 100%;
  overflow-x: auto;
  vertical-align: middle;
}

.sbd pre::-webkit-scrollbar {
  height: 8px;
}
.sbd pre::-webkit-scrollbar-thumb {
  background: rgba(0,0,0,0.2);
  border-radius: 4px;
}
.sbd-dark pre::-webkit-scrollbar-thumb {
  background: rgba(255,255,255,0.25);
}