/*
Theme Name: Black Box Consulting
Theme URI: https://consultblackbox.com
Author: Black Box Consulting
Author URI: https://consultblackbox.com
Description: A lightweight, minimalist WordPress theme purpose-built to pair with the Elementor page builder. It stays out of the way, no bloat, no opinionated styling, so you get a clean, performance-conscious foundation and build the actual design entirely in Elementor's drag-and-drop editor. Straightforward enough for a first build, flexible enough for a seasoned developer.
Version: 2.7.0
Requires at least: 6.0
Requires PHP: 7.4
Text Domain: bbc-theme
*/

/* Base resets. Keep this thin, Elementor handles page-level layout. */

* {
	box-sizing: border-box;
}

body {
	margin: 0;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	line-height: 1.5;
}

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

a {
	color: inherit;
}

.bbc-container {
	max-width: var(--bbc-container-width, 1200px);
	margin: 0 auto;
	padding: 0 20px;
}

.skip-link {
	position: absolute;
	left: -9999px;
	top: 0;
	background: #000;
	color: #fff;
	padding: 10px 15px;
	z-index: 100000;
}

.skip-link:focus {
	left: 10px;
}

.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;
	width: 1px;
	word-wrap: normal !important;
}

/* Non-Elementor template layout (index, single, page, archive, search). */

.bbc-layout {
	display: flex;
	gap: 40px;
	align-items: flex-start;
	padding: 40px 20px;
}

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

.bbc-sidebar {
	flex: 0 0 var(--bbc-sidebar-width, 280px);
}

@media (max-width: 1024px) {
	.bbc-layout {
		flex-direction: column;
	}

	.bbc-sidebar {
		flex-basis: auto;
		width: 100%;
	}
}

/* Header / footer / widgets */

.bbc-footer .bbc-container {
	display: flex;
	flex-direction: column;
	flex-wrap: wrap;
	gap: 12px;
	padding: 20px;
	width: 100%;
}

.bbc-footer-align-left {
	align-items: flex-start;
	text-align: left;
}

.bbc-footer-align-center {
	align-items: center;
	text-align: center;
}

.bbc-footer-align-right {
	align-items: flex-end;
	text-align: right;
}

.bbc-footer-align-center .bbc-footer-social,
.bbc-footer-align-right .bbc-footer-social {
	justify-content: center;
}

.bbc-footer-align-right .bbc-footer-social {
	justify-content: flex-end;
}

.bbc-footer {
	margin-top: 40px;
	border-top: 1px solid #e5e5e5;
}

.widget {
	margin-bottom: 20px;
}

.widget-title {
	margin-top: 0;
}

.bbc-footer-logo {
	margin-bottom: 8px;
}

.bbc-footer-logo img {
	display: block;
	max-height: var(--bbc-logo-height, 70px);
	width: auto;
}

.bbc-footer-align-center .bbc-footer-logo img {
	margin: 0 auto;
}

.bbc-footer-align-right .bbc-footer-logo img {
	margin-left: auto;
}

.bbc-footer-address {
	font-style: normal;
	line-height: 1.5;
}

.bbc-footer-phone,
.bbc-footer-email,
.bbc-footer-address,
.bbc-copyright {
	margin: 0;
}

.bbc-footer-social {
	display: flex;
	gap: 12px;
	flex-wrap: wrap;
}

.bbc-footer-nav ul {
	display: flex;
	gap: 20px;
	flex-wrap: wrap;
	list-style: none;
	margin: 0;
	padding: 0;
}

.bbc-footer-align-center .bbc-footer-nav ul {
	justify-content: center;
}

.bbc-footer-align-right .bbc-footer-nav ul {
	justify-content: flex-end;
}

/* Header: logo on the left, menu alignment configurable (left/center/right),
   CTA button pinned to the right. Layout, logo size, and menu colors are all
   controlled from the Black Box Theme settings page via CSS variables. */

.bbc-header {
	border-bottom: 1px solid #e5e5e5;
	margin-top: var(--bbc-header-margin-top, 0px);
	margin-bottom: var(--bbc-header-margin-bottom, 0px);
}

.bbc-header-container {
	max-width: var(--bbc-header-max-width, 1200px);
	margin: 0 auto;
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 24px;
	padding-top: var(--bbc-header-padding-top, 20px);
	padding-bottom: var(--bbc-header-padding-bottom, 20px);
	padding-left: var(--bbc-header-padding-left, 20px);
	padding-right: var(--bbc-header-padding-right, 20px);
}

.bbc-header-left {
	flex: 0 0 auto;
}

.bbc-header-center {
	flex: 1 1 auto;
	display: flex;
	min-width: 0;
}

.bbc-header-center.bbc-nav-align-left {
	justify-content: flex-start;
}

.bbc-header-center.bbc-nav-align-right {
	justify-content: flex-end;
}

.bbc-header-center.bbc-nav-align-center {
	justify-content: center;
}

.bbc-header-right {
	flex: 0 0 auto;
}

.bbc-site-branding {
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.bbc-logo img {
	display: block;
	max-height: var(--bbc-logo-height, 70px);
	width: auto;
}

.bbc-site-title {
	font-size: 1.5rem;
	font-weight: 700;
	text-decoration: none;
}

.bbc-tagline {
	margin: 6px 0 0;
	font-size: 0.85rem;
	color: #666;
}

.bbc-primary-nav {
	display: flex;
	align-items: center;
}

.bbc-primary-nav ul {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 28px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.bbc-primary-nav > ul > li {
	margin-right: 28px;
}

.bbc-primary-nav > ul > li:last-child {
	margin-right: 0;
}

/* Main menu link states: Normal / Hover / Active, each fully configurable
   (text color, background, border) from the Navigation tab. The underline
   is a positioned bar (not native text-decoration) so its color, length,
   gap, thickness, and top/bottom position can all be configured. */

.bbc-primary-nav > ul > li > a {
	position: relative;
	display: inline-block;
	color: var(--bbc-menu-normal-text-color, inherit);
	background-color: var(--bbc-menu-normal-bg-color, transparent);
	border-color: var(--bbc-menu-normal-border-color, transparent);
	border-width: var(--bbc-menu-normal-border-width, 0px);
	border-style: var(--bbc-menu-normal-border-style, none);
	border-radius: 4px;
	padding: 8px 14px;
	text-decoration: none;
	transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.bbc-primary-nav > ul > li > a::after {
	content: '';
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
	width: var(--bbc-underline-length, 100%);
	height: var(--bbc-underline-thickness, 2px);
	background-color: var(--bbc-underline-color, currentColor);
	top: var(--bbc-underline-top, auto);
	bottom: var(--bbc-underline-bottom, auto);
	opacity: var(--bbc-menu-normal-underline-opacity, 0);
	pointer-events: none;
	transition: opacity 0.15s ease;
}

.bbc-primary-nav > ul > li > a:hover,
.bbc-primary-nav > ul > li > a:focus {
	color: var(--bbc-menu-hover-text-color, inherit);
	background-color: var(--bbc-menu-hover-bg-color, transparent);
	border-color: var(--bbc-menu-hover-border-color, transparent);
	border-width: var(--bbc-menu-hover-border-width, 0px);
	border-style: var(--bbc-menu-hover-border-style, none);
}

.bbc-primary-nav > ul > li > a:hover::after,
.bbc-primary-nav > ul > li > a:focus::after {
	opacity: var(--bbc-menu-hover-underline-opacity, 0);
}

.bbc-primary-nav > ul > li.current-menu-item > a,
.bbc-primary-nav > ul > li.current_page_item > a {
	color: var(--bbc-menu-active-text-color, inherit);
	background-color: var(--bbc-menu-active-bg-color, transparent);
	border-color: var(--bbc-menu-active-border-color, transparent);
	border-width: var(--bbc-menu-active-border-width, 0px);
	border-style: var(--bbc-menu-active-border-style, none);
}

.bbc-primary-nav > ul > li.current-menu-item > a::after,
.bbc-primary-nav > ul > li.current_page_item > a::after {
	opacity: var(--bbc-menu-active-underline-opacity, 0);
}

.bbc-primary-nav ul ul {
	position: absolute;
	flex-direction: column;
	gap: 0;
	background: var(--bbc-submenu-bg, #ffffff);
	border: 1px solid #e5e5e5;
	padding-top: var(--bbc-submenu-padding-top, 10px);
	padding-right: var(--bbc-submenu-padding-right, 0px);
	padding-bottom: var(--bbc-submenu-padding-bottom, 10px);
	padding-left: var(--bbc-submenu-padding-left, 0px);
	min-width: 180px;
	display: none;
}

.bbc-primary-nav li {
	position: relative;
}

.bbc-primary-nav li:hover > ul,
.bbc-primary-nav li:focus-within > ul {
	display: flex;
}

.bbc-primary-nav ul ul li {
	margin-right: 0;
}

/* Submenu link states: Normal / Hover / Active, same idea as the main
   menu, plus a configurable text alignment inside the dropdown. Shares
   the same underline bar settings as the main menu. */

.bbc-primary-nav ul ul a {
	position: relative;
	display: block;
	padding: 8px 16px;
	text-align: var(--bbc-submenu-text-align, left);
	text-decoration: none;
	color: var(--bbc-submenu-normal-text-color, inherit);
	background-color: var(--bbc-submenu-normal-bg-color, transparent);
	border-color: var(--bbc-submenu-normal-border-color, transparent);
	border-width: var(--bbc-submenu-normal-border-width, 0px);
	border-style: var(--bbc-submenu-normal-border-style, none);
}

.bbc-primary-nav ul ul a::after {
	content: '';
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
	width: var(--bbc-underline-length, 100%);
	height: var(--bbc-underline-thickness, 2px);
	background-color: var(--bbc-underline-color, currentColor);
	top: var(--bbc-underline-top, auto);
	bottom: var(--bbc-underline-bottom, auto);
	opacity: var(--bbc-submenu-normal-underline-opacity, 0);
	pointer-events: none;
	transition: opacity 0.15s ease;
}

.bbc-primary-nav ul ul li:hover > a,
.bbc-primary-nav ul ul li:focus-within > a,
.bbc-primary-nav ul ul a:hover,
.bbc-primary-nav ul ul a:focus {
	color: var(--bbc-submenu-hover-text-color, inherit);
	background-color: var(--bbc-submenu-hover-bg-color, transparent);
	border-color: var(--bbc-submenu-hover-border-color, transparent);
	border-width: var(--bbc-submenu-hover-border-width, 0px);
	border-style: var(--bbc-submenu-hover-border-style, none);
}

.bbc-primary-nav ul ul li:hover > a::after,
.bbc-primary-nav ul ul li:focus-within > a::after,
.bbc-primary-nav ul ul a:hover::after,
.bbc-primary-nav ul ul a:focus::after {
	opacity: var(--bbc-submenu-hover-underline-opacity, 0);
}

.bbc-primary-nav ul ul li.current-menu-item > a,
.bbc-primary-nav ul ul li.current_page_item > a {
	color: var(--bbc-submenu-active-text-color, inherit);
	background-color: var(--bbc-submenu-active-bg-color, transparent);
	border-color: var(--bbc-submenu-active-border-color, transparent);
	border-width: var(--bbc-submenu-active-border-width, 0px);
	border-style: var(--bbc-submenu-active-border-style, none);
}

.bbc-primary-nav ul ul li.current-menu-item > a::after,
.bbc-primary-nav ul ul li.current_page_item > a::after {
	opacity: var(--bbc-submenu-active-underline-opacity, 0);
}

.bbc-cta-button {
	display: inline-block;
	white-space: nowrap;
	padding: 12px 28px;
	border-radius: 999px;
	font-weight: 700;
	text-transform: uppercase;
	font-size: 0.85rem;
	letter-spacing: 0.02em;
	text-decoration: none;
	background-color: var(--bbc-cta-bg, #2271b1);
	border: 2px solid var(--bbc-cta-border, #2271b1);
	color: var(--bbc-cta-color, #ffffff);
	transition: opacity 0.15s ease;
}

.bbc-cta-button:hover,
.bbc-cta-button:focus {
	opacity: 0.9;
	color: var(--bbc-cta-color, #ffffff);
}

/* Mobile nav toggle button (hamburger). Hidden on desktop, hover on the
   nav still works there since the toggle button and touch-only submenu
   buttons only come into play at the mobile breakpoint below. */

.bbc-nav-toggle {
	display: none;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	gap: 5px;
	width: 44px;
	height: 44px;
	padding: 0;
	background: none;
	border: 1px solid #ccc;
	border-radius: 4px;
	cursor: pointer;
	flex: 0 0 auto;
}

.bbc-nav-toggle-bar {
	display: block;
	width: 20px;
	height: 2px;
	background-color: currentColor;
}

.bbc-nav-toggle-bar + .bbc-nav-toggle-bar {
	margin-top: 5px;
}

/* Touch-only submenu toggle (the little arrow button), only shown and
   only needed on mobile where there's no hover to rely on. */

.bbc-submenu-toggle {
	display: none;
	background: none;
	border: none;
	cursor: pointer;
	padding: 8px 12px;
	font-size: 0.9rem;
	line-height: 1;
	color: inherit;
}

@media (max-width: 1024px) {
	.bbc-header-container {
		flex-wrap: wrap;
		align-items: center;
	}

	.bbc-header-left {
		flex: 1 1 auto;
	}

	/* Custom horizontal header padding can otherwise eat into the very
	   limited width phones have to work with, cap it here regardless of
	   what's configured in Header Layout. */
	.bbc-header-container {
		padding-left: 16px !important;
		padding-right: 16px !important;
	}

	.bbc-nav-toggle {
		display: inline-flex;
		order: 2;
	}

	.bbc-header-right {
		order: 3;
	}

	.bbc-header-right:empty {
		display: none;
	}

	.bbc-header-center {
		order: 4;
		flex-basis: 100%;
		width: 100%;
		display: none;
		justify-content: flex-start !important;
		margin-top: 16px;
	}

	.bbc-header.bbc-nav-open .bbc-header-center {
		display: flex;
	}

	.bbc-primary-nav {
		width: 100%;
	}

	.bbc-primary-nav > ul {
		flex-direction: column;
		align-items: stretch;
		gap: 0;
		width: 100%;
	}

	.bbc-primary-nav > ul > li {
		margin-right: 0;
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: space-between;
		border-bottom: 1px solid rgba(0, 0, 0, 0.08);
	}

	.bbc-primary-nav > ul > li > a {
		flex: 1 1 auto;
		border-radius: 0;
	}

	.bbc-submenu-toggle {
		display: block;
	}

	/* Submenus become an inline expandable panel instead of a floating
	   dropdown, hover no longer applies here, only the toggle button and
	   the "already open" class do. */
	.bbc-primary-nav ul ul {
		position: static;
		display: none;
		width: 100%;
		min-width: 0;
		border: none;
		box-shadow: none;
	}

	.bbc-primary-nav li.bbc-submenu-open > ul {
		display: flex;
	}

	.bbc-primary-nav li:hover > ul,
	.bbc-primary-nav li:focus-within > ul {
		display: none;
	}

	.bbc-primary-nav li.bbc-submenu-open:hover > ul,
	.bbc-primary-nav li.bbc-submenu-open:focus-within > ul {
		display: flex;
	}
}

/* Full Width (No Sidebar) page template. */

.bbc-fullwidth {
	width: 100%;
	padding: 40px 0;
}

.bbc-fullwidth .entry-header {
	padding-top: 0;
	margin-bottom: 20px;
}

.bbc-fullwidth .entry-content {
	width: 100%;
}

.bbc-fullwidth .entry-content > * {
	max-width: 100%;
}

/* Scroll-to-Top button. */

#bbc-scroll-top {
	position: fixed;
	right: 24px;
	bottom: 24px;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	border: none;
	background: var(--bbc-cta-bg, #2271b1);
	color: #ffffff;
	font-size: 1.25rem;
	line-height: 1;
	cursor: pointer;
	opacity: 0;
	visibility: hidden;
	transform: translateY(10px);
	transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
	z-index: 9999;
}

#bbc-scroll-top.is-visible {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

#bbc-scroll-top:hover,
#bbc-scroll-top:focus {
	opacity: 0.9;
}