/**
 * Kingdom Connect Theme Styles
 *
 * Universal theme styling system that works with any WordPress theme.
 * Includes color schemes and menu orientation controls.
 *
 * @package    Kingdom_Connect
 * @subpackage Kingdom_Connect/assets/css
 */

/* ============================================
	CSS Custom Properties (Variables)
	============================================ */
:root {
	--kc-primary-color: #2271b1;
	--kc-secondary-color: #135e96;
	--kc-accent-color: #72aee6;
	--kc-text-color: #333333;
	--kc-menu-bg-color: #ffffff;
	--kc-menu-text-color: #333333;
	--kc-menu-hover-color: #2271b1;
	--kc-menu-orientation: row;
}

/* ============================================
	Universal Menu Styling
	============================================ */

/* Target all common WordPress menu structures */
body .main-navigation,
body .site-navigation,
body nav.menu,
body #site-navigation,
body .navigation,
body .nav-menu,
body .menu-primary,
body .menu-main,
body header nav,
body header .menu,
body .site-header nav,
body .site-header .menu,
body header.site-header nav,
body header.site-header .menu,
body .header-menu,
body #main-menu,
body #primary-menu,
body .primary-menu,
body .menu-container,
body .menu-wrapper {
	display: flex !important;
	flex-direction: var(--kc-menu-orientation) !important;
	flex-wrap: wrap !important;
	background-color: var(--kc-menu-bg-color) !important;
	list-style: none !important;
	margin: 0 !important;
	padding: 0 !important;
	align-items: center !important;
}

/* Menu list items (ul) */
body .main-navigation ul,
body .site-navigation ul,
body nav.menu ul,
body #site-navigation ul,
body .navigation ul,
body .nav-menu ul,
body .menu-primary ul,
body .menu-main ul,
body header nav ul,
body header .menu ul,
body .site-header nav ul,
body .site-header .menu ul,
body header.site-header nav ul,
body header.site-header .menu ul,
body .header-menu ul,
body #main-menu ul,
body #primary-menu ul,
body .primary-menu ul,
body .menu-container ul,
body .menu-wrapper ul {
	display: flex !important;
	flex-direction: var(--kc-menu-orientation) !important;
	flex-wrap: wrap !important;
	list-style: none !important;
	margin: 0 !important;
	padding: 0 !important;
	align-items: center !important;
	gap: 0 !important;
}

/* Menu items (li) */
body .main-navigation li,
body .site-navigation li,
body nav.menu li,
body #site-navigation li,
body .navigation li,
body .nav-menu li,
body .menu-primary li,
body .menu-main li,
body header nav li,
body header .menu li,
body .site-header nav li,
body .site-header .menu li,
body header.site-header nav li,
body header.site-header .menu li,
body .header-menu li,
body #main-menu li,
body #primary-menu li,
body .primary-menu li,
body .menu-container li,
body .menu-wrapper li,
body .main-navigation .menu-item,
body .site-navigation .menu-item,
body nav.menu .menu-item,
body #site-navigation .menu-item {
	display: flex !important;
	align-items: center !important;
	margin: 0 !important;
	padding: 0 !important;
	list-style: none !important;
}

/* Menu links */
body .main-navigation a,
body .site-navigation a,
body nav.menu a,
body #site-navigation a,
body .navigation a,
body .nav-menu a,
body .menu-primary a,
body .menu-main a,
body header nav a,
body header .menu a,
body .site-header nav a,
body .site-header .menu a,
body header.site-header nav a,
body header.site-header .menu a,
body .header-menu a,
body #main-menu a,
body #primary-menu a,
body .primary-menu a,
body .menu-container a,
body .menu-wrapper a,
body .main-navigation .menu-item a,
body .site-navigation .menu-item a,
body nav.menu .menu-item a,
body #site-navigation .menu-item a {
	color: var(--kc-menu-text-color) !important;
	text-decoration: none !important;
	padding: 12px 20px !important;
	display: block !important;
	transition: all 0.3s ease !important;
	font-weight: 500 !important;
}

/* Menu link hover and active states */
body .main-navigation a:hover,
body .site-navigation a:hover,
body nav.menu a:hover,
body #site-navigation a:hover,
body .navigation a:hover,
body .nav-menu a:hover,
body .menu-primary a:hover,
body .menu-main a:hover,
body header nav a:hover,
body header .menu a:hover,
body .site-header nav a:hover,
body .site-header .menu a:hover,
body header.site-header nav a:hover,
body header.site-header .menu a:hover,
body .header-menu a:hover,
body #main-menu a:hover,
body #primary-menu a:hover,
body .primary-menu a:hover,
body .menu-container a:hover,
body .menu-wrapper a:hover,
body .main-navigation .current-menu-item a,
body .site-navigation .current-menu-item a,
body nav.menu .current-menu-item a,
body #site-navigation .current-menu-item a,
body .main-navigation .current_page_item a,
body .site-navigation .current_page_item a,
body nav.menu .current_page_item a,
body #site-navigation .current_page_item a,
body .main-navigation .menu-item a:hover,
body .site-navigation .menu-item a:hover,
body nav.menu .menu-item a:hover,
body #site-navigation .menu-item a:hover {
	color: var(--kc-menu-hover-color) !important;
	background-color: transparent !important;
}

/* ============================================
	Site Header Styling
	============================================ */
body .site-header,
body header.site-header,
body .header,
body header {
	background-color: var(--kc-menu-bg-color) !important;
}

/* ============================================
	Elementor Menu Widget Support
	============================================ */
body .elementor-nav-menu,
body .elementor-nav-menu__container,
body .elementor-menu-toggle {
	display: flex !important;
	flex-direction: var(--kc-menu-orientation) !important;
	flex-wrap: wrap !important;
	background-color: var(--kc-menu-bg-color) !important;
}

body .elementor-nav-menu ul {
	display: flex !important;
	flex-direction: var(--kc-menu-orientation) !important;
	flex-wrap: wrap !important;
	list-style: none !important;
	margin: 0 !important;
	padding: 0 !important;
}

body .elementor-nav-menu a,
body .elementor-nav-menu .menu-item a,
body .elementor-nav-menu li a {
	color: var(--kc-menu-text-color) !important;
	text-decoration: none !important;
	padding: 12px 20px !important;
	display: block !important;
	transition: all 0.3s ease !important;
}

body .elementor-nav-menu a:hover,
body .elementor-nav-menu .menu-item a:hover,
body .elementor-nav-menu .current-menu-item a,
body .elementor-nav-menu .current_page_item a {
	color: var(--kc-menu-hover-color) !important;
}

body .elementor-menu-toggle {
	color: var(--kc-menu-text-color) !important;
	background-color: var(--kc-menu-bg-color) !important;
}

body .elementor-menu-toggle:hover {
	color: var(--kc-menu-hover-color) !important;
}

/* ============================================
	Button and Link Styling
	============================================ */
body a:not(.site-header a):not(.elementor-nav-menu a):not(nav a),
body .kc-button,
body button.primary,
body .wp-block-button__link,
body .button-primary {
	color: var(--kc-primary-color) !important;
	text-decoration: none !important;
}

body a:not(.site-header a):not(.elementor-nav-menu a):not(nav a):hover,
body .kc-button:hover,
body button.primary:hover {
	color: var(--kc-secondary-color) !important;
}

body .kc-button,
body button.primary,
body .wp-block-button__link,
body .button-primary {
	background-color: var(--kc-primary-color) !important;
	border-color: var(--kc-primary-color) !important;
	color: #ffffff !important;
	padding: 10px 20px !important;
	border-radius: 4px !important;
	transition: all 0.3s ease !important;
	cursor: pointer !important;
	display: inline-block !important;
}

body .kc-button:hover,
body button.primary:hover,
body .wp-block-button__link:hover {
	background-color: var(--kc-secondary-color) !important;
	border-color: var(--kc-secondary-color) !important;
	color: #ffffff !important;
}

/* ============================================
	Text Color Styling
	============================================ */
body,
body .entry-content,
body .widget,
body .content,
body .post-content,
body .page-content {
	color: var(--kc-text-color) !important;
}

/* ============================================
	Vertical Menu Override
	============================================ */
body.kc-menu-vertical .main-navigation,
body.kc-menu-vertical .site-navigation,
body.kc-menu-vertical nav.menu,
body.kc-menu-vertical #site-navigation,
body.kc-menu-vertical .navigation,
body.kc-menu-vertical .nav-menu,
body.kc-menu-vertical .menu-primary,
body.kc-menu-vertical .menu-main,
body.kc-menu-vertical header nav,
body.kc-menu-vertical header .menu,
body.kc-menu-vertical .site-header nav,
body.kc-menu-vertical .site-header .menu,
body.kc-menu-vertical header.site-header nav,
body.kc-menu-vertical header.site-header .menu,
body.kc-menu-vertical .header-menu,
body.kc-menu-vertical #main-menu,
body.kc-menu-vertical #primary-menu,
body.kc-menu-vertical .primary-menu,
body.kc-menu-vertical .menu-container,
body.kc-menu-vertical .menu-wrapper,
body.kc-menu-vertical .elementor-nav-menu,
body.kc-menu-vertical .elementor-nav-menu__container {
	flex-direction: column !important;
	align-items: flex-start !important;
}

body.kc-menu-vertical .main-navigation ul,
body.kc-menu-vertical .site-navigation ul,
body.kc-menu-vertical nav.menu ul,
body.kc-menu-vertical #site-navigation ul,
body.kc-menu-vertical .navigation ul,
body.kc-menu-vertical .nav-menu ul,
body.kc-menu-vertical .menu-primary ul,
body.kc-menu-vertical .menu-main ul,
body.kc-menu-vertical header nav ul,
body.kc-menu-vertical header .menu ul,
body.kc-menu-vertical .site-header nav ul,
body.kc-menu-vertical .site-header .menu ul,
body.kc-menu-vertical header.site-header nav ul,
body.kc-menu-vertical header.site-header .menu ul,
body.kc-menu-vertical .header-menu ul,
body.kc-menu-vertical #main-menu ul,
body.kc-menu-vertical #primary-menu ul,
body.kc-menu-vertical .primary-menu ul,
body.kc-menu-vertical .menu-container ul,
body.kc-menu-vertical .menu-wrapper ul,
body.kc-menu-vertical .elementor-nav-menu ul {
	flex-direction: column !important;
	align-items: flex-start !important;
	width: 100% !important;
}

body.kc-menu-vertical .main-navigation li,
body.kc-menu-vertical .site-navigation li,
body.kc-menu-vertical nav.menu li,
body.kc-menu-vertical #site-navigation li,
body.kc-menu-vertical .navigation li,
body.kc-menu-vertical .nav-menu li,
body.kc-menu-vertical .menu-primary li,
body.kc-menu-vertical .menu-main li,
body.kc-menu-vertical header nav li,
body.kc-menu-vertical header .menu li,
body.kc-menu-vertical .site-header nav li,
body.kc-menu-vertical .site-header .menu li,
body.kc-menu-vertical header.site-header nav li,
body.kc-menu-vertical header.site-header .menu li,
body.kc-menu-vertical .header-menu li,
body.kc-menu-vertical #main-menu li,
body.kc-menu-vertical #primary-menu li,
body.kc-menu-vertical .primary-menu li,
body.kc-menu-vertical .menu-container li,
body.kc-menu-vertical .menu-wrapper li {
	width: 100% !important;
}

body.kc-menu-vertical .main-navigation a,
body.kc-menu-vertical .site-navigation a,
body.kc-menu-vertical nav.menu a,
body.kc-menu-vertical #site-navigation a,
body.kc-menu-vertical .navigation a,
body.kc-menu-vertical .nav-menu a,
body.kc-menu-vertical .menu-primary a,
body.kc-menu-vertical .menu-main a,
body.kc-menu-vertical header nav a,
body.kc-menu-vertical header .menu a,
body.kc-menu-vertical .site-header nav a,
body.kc-menu-vertical .site-header .menu a,
body.kc-menu-vertical header.site-header nav a,
body.kc-menu-vertical header.site-header .menu a,
body.kc-menu-vertical .header-menu a,
body.kc-menu-vertical #main-menu a,
body.kc-menu-vertical #primary-menu a,
body.kc-menu-vertical .primary-menu a,
body.kc-menu-vertical .menu-container a,
body.kc-menu-vertical .menu-wrapper a {
	width: 100% !important;
}

/* ============================================
	Responsive Design
	============================================ */
@media (max-width: 768px) {
	body .main-navigation,
	body .site-navigation,
	body nav.menu,
	body #site-navigation,
	body .elementor-nav-menu {
		flex-direction: column !important;
		align-items: flex-start !important;
	}

	body .main-navigation ul,
	body .site-navigation ul,
	body nav.menu ul,
	body #site-navigation ul,
	body .elementor-nav-menu ul {
		flex-direction: column !important;
		align-items: flex-start !important;
		width: 100% !important;
	}

	body .main-navigation a,
	body .site-navigation a,
	body nav.menu a,
	body #site-navigation a,
	body .elementor-nav-menu a {
		width: 100% !important;
		padding: 10px 15px !important;
	}
}