/*
Theme Name: FusionHQ
Theme URI: https://fusionhq.com
Author: FusionHQ Team
Author URI: https://fusionhq.com
Description: A premium WordPress theme that gives site owners and designers total visual control. Fully compatible with Elementor and WooCommerce, featuring glass navigation, customizable hero sections, global design tokens, and extensive customization options.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.4
Requires PHP: 8.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: fusionhq
Tags: custom-colors, custom-menu, custom-logo, editor-style, featured-images, flexible-header, post-formats, sticky-post, theme-options, threaded-comments, translation-ready, block-styles, wide-blocks, full-width-template, elementor, woocommerce, e-commerce, blog, custom-header, footer-widgets, one-column, two-columns, three-columns, four-columns, left-sidebar, right-sidebar, grid-layout, accessibility-ready, rtl-language-support

FusionHQ WordPress Theme, Copyright 2024 FusionHQ Team
FusionHQ is distributed under the terms of the GNU GPL

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

/* ==========================================================================
   CSS Variables (Design Tokens) - Generated from Customizer
   ========================================================================== */

:root {
	/* Colors - Primary Palette */
	--fuse-primary: #0073aa;
	--fuse-secondary: #00a0d2;
	--fuse-tertiary: #23282d;
	--fuse-link: #0073aa;
	--fuse-link-hover: #005177;
	--fuse-success: #46b450;
	--fuse-warning: #ffb900;
	--fuse-danger: #dc3232;
	
	/* Backgrounds */
	--fuse-bg-primary: #ffffff;
	--fuse-bg-secondary: #f5f5f5;
	--fuse-bg-tertiary: #23282d;
	
	/* Borders */
	--fuse-border-color: #ddd;
	--fuse-border-radius: 4px;
	
	/* Typography */
	--fuse-font-primary: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
	--fuse-font-secondary: Georgia, serif;
	--fuse-font-size-base: 16px;
	--fuse-line-height-base: 1.6;
	--fuse-letter-spacing-base: 0;
	
	/* Spacing */
	--fuse-spacing-xs: 0.25rem;
	--fuse-spacing-sm: 0.5rem;
	--fuse-spacing-md: 1rem;
	--fuse-spacing-lg: 1.5rem;
	--fuse-spacing-xl: 2rem;
	--fuse-spacing-xxl: 3rem;
	
	/* Container */
	--fuse-container-width: 1200px;
	--fuse-container-padding: 1rem;
	
	/* Header */
	--fuse-header-height: 80px;
	--fuse-header-bg: rgba(255, 255, 255, 0.95);
	--fuse-header-transparency: 0.95;
	--fuse-header-blur: 10px;
	
	/* Buttons */
	--fuse-btn-primary-bg: var(--fuse-primary);
	--fuse-btn-primary-color: #ffffff;
	--fuse-btn-primary-hover: var(--fuse-link-hover);
	--fuse-btn-border-radius: 4px;
	--fuse-btn-padding-y: 0.75rem;
	--fuse-btn-padding-x: 1.5rem;
	
	/* Transitions */
	--fuse-transition-base: 0.3s ease;
}

/* ==========================================================================
   Day/Night Mode Variables
   ========================================================================== */

/* Day Mode (Default) - Variables will be overridden by customizer */
:root,
:root.theme-day,
body.theme-day {
	/* Background Colors */
	--fuse-mode-bg-primary: var(--fuse-day-bg-primary, #ffffff);
	--fuse-mode-bg-secondary: var(--fuse-day-bg-secondary, #f5f5f5);
	--fuse-mode-bg-tertiary: var(--fuse-day-bg-tertiary, #23282d);
	
	/* Text Colors */
	--fuse-mode-text-primary: var(--fuse-day-text-primary, #23282d);
	--fuse-mode-text-secondary: var(--fuse-day-text-secondary, #666666);
	
	/* Header Colors */
	--fuse-mode-header-bg: var(--fuse-day-header-bg, rgba(255, 255, 255, 0.95));
	--fuse-mode-header-text: var(--fuse-day-header-text, #23282d);
	--fuse-mode-header-link: var(--fuse-day-header-link, #23282d);
	--fuse-mode-header-link-hover: var(--fuse-day-header-link-hover, #0073aa);
	
	/* Button Colors - Overrides Button Settings */
	--fuse-mode-btn-primary-bg: var(--fuse-day-btn-primary-bg, #0073aa);
	--fuse-mode-btn-primary-color: var(--fuse-day-btn-primary-color, #ffffff);
	--fuse-mode-btn-primary-hover: var(--fuse-day-btn-primary-hover, #005177);
	
	/* Secondary Button Colors */
	--fuse-mode-btn-secondary-bg: var(--fuse-day-btn-secondary-bg, transparent);
	--fuse-mode-btn-secondary-color: var(--fuse-day-btn-secondary-color, #0073aa);
	--fuse-mode-btn-secondary-border: var(--fuse-day-btn-secondary-border, #0073aa);
	--fuse-mode-btn-secondary-hover-bg: var(--fuse-day-btn-secondary-hover-bg, #0073aa);
	--fuse-mode-btn-secondary-hover-color: var(--fuse-day-btn-secondary-hover-color, #ffffff);
	
	/* Link Colors */
	--fuse-mode-link: var(--fuse-day-link, #0073aa);
	--fuse-mode-link-hover: var(--fuse-day-link-hover, #005177);
	
	/* Border Colors */
	--fuse-mode-border: var(--fuse-day-border, #dddddd);
	
	/* Footer Colors */
	--fuse-mode-footer-bg: var(--fuse-day-footer-bg, #f5f5f5);
	--fuse-mode-footer-text: var(--fuse-day-footer-text, #23282d);
	--fuse-mode-footer-link: var(--fuse-day-footer-link, #23282d);
	--fuse-mode-footer-link-hover: var(--fuse-day-footer-link-hover, #0073aa);
	
	/* Footer Block Heading Colors */
	--fuse-mode-footer-block-heading: var(--fuse-day-footer-block-heading, #23282d);
}

/* Night Mode - Variables will be overridden by customizer */
:root.theme-night,
body.theme-night {
	/* Background Colors */
	--fuse-mode-bg-primary: var(--fuse-night-bg-primary, #1a1a1a);
	--fuse-mode-bg-secondary: var(--fuse-night-bg-secondary, #2d2d2d);
	--fuse-mode-bg-tertiary: var(--fuse-night-bg-tertiary, #ffffff);
	
	/* Text Colors */
	--fuse-mode-text-primary: var(--fuse-night-text-primary, #e0e0e0);
	--fuse-mode-text-secondary: var(--fuse-night-text-secondary, #b0b0b0);
	
	/* Header Colors */
	--fuse-mode-header-bg: var(--fuse-night-header-bg, rgba(26, 26, 26, 0.95));
	--fuse-mode-header-text: var(--fuse-night-header-text, #e0e0e0);
	--fuse-mode-header-link: var(--fuse-night-header-link, #e0e0e0);
	--fuse-mode-header-link-hover: var(--fuse-night-header-link-hover, #4a9eff);
	
	/* Button Colors - Overrides Button Settings */
	--fuse-mode-btn-primary-bg: var(--fuse-night-btn-primary-bg, #4a9eff);
	--fuse-mode-btn-primary-color: var(--fuse-night-btn-primary-color, #ffffff);
	--fuse-mode-btn-primary-hover: var(--fuse-night-btn-primary-hover, #6bb3ff);
	
	/* Secondary Button Colors */
	--fuse-mode-btn-secondary-bg: var(--fuse-night-btn-secondary-bg, transparent);
	--fuse-mode-btn-secondary-color: var(--fuse-night-btn-secondary-color, #4a9eff);
	--fuse-mode-btn-secondary-border: var(--fuse-night-btn-secondary-border, #4a9eff);
	--fuse-mode-btn-secondary-hover-bg: var(--fuse-night-btn-secondary-hover-bg, #4a9eff);
	--fuse-mode-btn-secondary-hover-color: var(--fuse-night-btn-secondary-hover-color, #ffffff);
	
	/* Link Colors */
	--fuse-mode-link: var(--fuse-night-link, #4a9eff);
	--fuse-mode-link-hover: var(--fuse-night-link-hover, #6bb3ff);
	
	/* Border Colors */
	--fuse-mode-border: var(--fuse-night-border, #404040);
	
	/* Footer Colors */
	--fuse-mode-footer-bg: var(--fuse-night-footer-bg, #2d2d2d);
	--fuse-mode-footer-text: var(--fuse-night-footer-text, #e0e0e0);
	--fuse-mode-footer-link: var(--fuse-night-footer-link, #e0e0e0);
	--fuse-mode-footer-link-hover: var(--fuse-night-footer-link-hover, #4a9eff);
	
	/* Footer Block Heading Colors */
	--fuse-mode-footer-block-heading: var(--fuse-night-footer-block-heading, #e0e0e0);
}

/* Apply mode-specific colors to elements */
body {
	color: var(--fuse-mode-text-primary);
	background-color: var(--fuse-mode-bg-primary);
	transition: background-color var(--fuse-transition-base), color var(--fuse-transition-base);
}

h1, h2, h3, h4, h5, h6 {
	color: var(--fuse-mode-text-primary);
}

a {
	color: var(--fuse-mode-link);
}

a:hover,
a:focus {
	color: var(--fuse-mode-link-hover);
}

/* ==========================================================================
   Reset & Base Styles
   ========================================================================== */

* {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}

html {
	-webkit-text-size-adjust: 100%;
	-ms-text-size-adjust: 100%;
}

body {
	font-family: var(--fuse-font-body, var(--fuse-font-primary));
	font-size: var(--fuse-font-size-base);
	line-height: var(--fuse-line-height-base);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

/* ==========================================================================
   Accessibility
   ========================================================================== */

/* Skip Link */
.skip-link {
	position: absolute;
	left: -9999px;
	z-index: 999999;
}

.skip-link:focus {
	left: 6px;
	top: 7px;
	background: var(--fuse-primary);
	color: #fff;
	padding: 8px 16px;
	text-decoration: none;
	border-radius: var(--fuse-border-radius);
}

/* Focus Styles */
*:focus {
	outline: 2px solid var(--fuse-primary);
	outline-offset: 2px;
}

button:focus,
a:focus,
input:focus,
textarea:focus,
select:focus {
	outline: 2px solid var(--fuse-primary);
	outline-offset: 2px;
}



/* Screen Reader Text */
.screen-reader-text {
	clip: rect(1px, 1px, 1px, 1px);
	position: absolute !important;
	height: 1px;
	width: 1px;
	overflow: hidden;
	word-wrap: normal !important;
}

.screen-reader-text:focus {
	background-color: #f1f1f1;
	border-radius: 3px;
	box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);
	clip: auto !important;
	color: #21759b;
	display: block;
	font-size: 14px;
	font-weight: bold;
	height: auto;
	left: 5px;
	line-height: normal;
	padding: 15px 23px 14px;
	text-decoration: none;
	top: 5px;
	width: auto;
	z-index: 100000;
}

/* ==========================================================================
   Typography
   ========================================================================== */

h1, h2, h3, h4, h5, h6 {
	font-family: var(--fuse-font-header, var(--fuse-font-primary));
	font-weight: 600;
	line-height: 1.2;
	margin-bottom: var(--fuse-spacing-md);
}

h1 { font-size: 2.5rem; }
h2 { font-size: 2rem; }
h3 { font-size: 1.75rem; }
h4 { font-size: 1.5rem; }
h5 { font-size: 1.25rem; }
h6 { font-size: 1rem; }

p {
	margin-bottom: var(--fuse-spacing-md);
}

a {
	text-decoration: none;
	transition: color var(--fuse-transition-base);
}

/* ==========================================================================
   Layout
   ========================================================================== */

.site-container {
	max-width: var(--fuse-container-width);
	margin: 0 auto;
	padding: 0 var(--fuse-container-padding);
}

.site-main {
	padding: var(--fuse-spacing-xl) 0;
}

/* ==========================================================================
   Buttons
   ========================================================================== */

.btn,
.button,
button,
input[type="button"],
input[type="reset"],
input[type="submit"] {
	display: inline-block;
	padding: var(--fuse-btn-padding-y) var(--fuse-btn-padding-x);
	font-family: var(--fuse-font-primary);
	font-size: var(--fuse-font-size-base);
	font-weight: 500;
	line-height: 1.5;
	text-align: center;
	text-decoration: none;
	white-space: nowrap;
	vertical-align: middle;
	cursor: pointer;
	border: none;
	border-radius: var(--fuse-btn-border-radius);
	transition: all var(--fuse-transition-base);
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
}

.btn-primary,
.button-primary {
	background-color: var(--fuse-btn-primary-bg);
	color: var(--fuse-btn-primary-color);
}

.btn-primary:hover,
.btn-primary:focus,
.button-primary:hover,
.button-primary:focus {
	background-color: var(--fuse-btn-primary-hover);
	color: var(--fuse-btn-primary-color);
}

/* ==========================================================================
   Responsive
   ========================================================================== */

@media (max-width: 768px) {
	:root {
		--fuse-font-size-base: 14px;
		--fuse-container-padding: 1rem;
	}
	
	h1 { font-size: 2rem; }
	h2 { font-size: 1.75rem; }
	h3 { font-size: 1.5rem; }
}

/* ==========================================================================
   RTL Support
   ========================================================================== */

[dir="rtl"] {
	direction: rtl;
}

[dir="rtl"] .site-container {
	text-align: right;
}