/**
 * MFE Dark Terminal Theme
 *
 * Design system: Dark background, neon accents, terminal aesthetic.
 * Loaded globally via MFE Site Manager plugin.
 */

/* ==========================================================================
   1. CSS Custom Properties (Design Tokens)
   ========================================================================== */

:root {
	/* Backgrounds */
	--mfe-bg-primary: #0a0a0a;
	--mfe-bg-secondary: #111827;
	--mfe-bg-card: #1a1a2e;
	--mfe-bg-card-hover: #1f1f3a;
	--mfe-bg-input: #111827;
	--mfe-bg-code: #0d1117;

	/* Accents */
	--mfe-cyan: #00FFFF;
	--mfe-blue: #0067FF;
	--mfe-green: #00FF41;
	--mfe-orange: #FF6600;
	--mfe-purple: #8B5CF6;

	/* Text */
	--mfe-text-primary: #E5E7EB;
	--mfe-text-secondary: #9CA3AF;
	--mfe-text-heading: #FFFFFF;
	--mfe-text-muted: #6B7280;

	/* Borders */
	--mfe-border: #1F2937;
	--mfe-border-light: #374151;
	--mfe-glow-cyan: rgba(0, 255, 255, 0.3);
	--mfe-glow-blue: rgba(0, 103, 255, 0.3);

	/* Gradients */
	--mfe-gradient-accent: linear-gradient(135deg, #00FFFF 0%, #0067FF 50%, #8B5CF6 100%);
	--mfe-gradient-dark: linear-gradient(180deg, #0a0a0a 0%, #111827 100%);

	/* Spacing */
	--mfe-section-padding: 100px;
	--mfe-container-max: 1200px;

	/* Shadows */
	--mfe-shadow-glow: 0 0 20px rgba(0, 255, 255, 0.15);
	--mfe-shadow-card: 0 4px 24px rgba(0, 0, 0, 0.4);

	/* Transitions */
	--mfe-transition: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ==========================================================================
   2. Global Base Styles
   ========================================================================== */

body,
.ast-separate-container,
.ast-plain-container {
	background-color: var(--mfe-bg-primary) !important;
	color: var(--mfe-text-primary);
}

/* Override Astra content background */
.site-content .ast-container,
.ast-separate-container .ast-article-single,
.ast-separate-container .ast-article-post,
.ast-separate-container .ast-comment-list li,
.ast-separate-container .comment-respond {
	background-color: transparent !important;
}

/* ==========================================================================
   3. Typography
   ========================================================================== */

/* Import fonts */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500;600;700&family=Fira+Code:wght@400;500&display=swap');

h1, h2, h3, h4, h5, h6,
.entry-title,
.ast-archive-title {
	font-family: 'JetBrains Mono', monospace !important;
	color: var(--mfe-text-heading) !important;
	letter-spacing: -0.02em;
}

body,
p,
.entry-content p {
	font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
	color: var(--mfe-text-primary);
	line-height: 1.7;
}

h1 { font-size: clamp(2.5rem, 5vw, 4.5rem); font-weight: 700; }
h2 { font-size: clamp(2rem, 4vw, 3rem); font-weight: 700; }
h3 { font-size: clamp(1.5rem, 3vw, 2rem); font-weight: 600; }
h4 { font-size: clamp(1.2rem, 2vw, 1.5rem); font-weight: 600; }

a {
	color: var(--mfe-cyan);
	text-decoration: none;
	transition: color var(--mfe-transition);
}
a:hover {
	color: #66FFFF;
}

/* ==========================================================================
   4. Header (Transparent Dark)
   ========================================================================== */

.ast-theme-transparent-header #masthead,
#masthead {
	background-color: rgba(10, 10, 10, 0.85) !important;
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
	border-bottom: 1px solid var(--mfe-border);
}

.main-header-menu a,
.ast-header-break-point .ast-button-wrap .menu-toggle {
	color: var(--mfe-text-primary) !important;
	font-family: 'JetBrains Mono', monospace !important;
	font-size: 13px !important;
	letter-spacing: 0.05em;
	text-transform: uppercase;
}

.main-header-menu a:hover,
.main-header-menu .current-menu-item > a {
	color: var(--mfe-cyan) !important;
}

/* Mobile menu popup — dark background to match theme
   Uses hardcoded colors + .active to match Astra's inline CSS specificity */
.ast-mobile-popup-drawer.active .ast-mobile-popup-inner,
.ast-mobile-popup-drawer .ast-mobile-popup-inner,
.ast-mobile-popup-drawer,
.ast-mobile-popup-content,
.ast-mobile-header-content,
.ast-mobile-header-wrap .ast-mobile-header-content {
	background-color: #0a0a0a !important;
}

.ast-mobile-popup-drawer.active .menu-toggle-close,
.ast-mobile-popup-drawer .menu-toggle-close,
.menu-toggle-close {
	color: #9CA3AF !important;
}

.ast-mobile-popup-drawer .main-header-menu a,
.ast-mobile-popup-drawer .menu-item > a,
.ast-mobile-popup-content .main-header-menu a,
.ast-mobile-popup-content .menu-item > a,
#ast-mobile-header .main-header-menu a,
#ast-mobile-header .menu-item > a {
	color: #E5E7EB !important;
	font-family: 'JetBrains Mono', monospace !important;
	font-size: 14px !important;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	border-bottom: 1px solid #1F2937 !important;
	padding: 12px 20px !important;
}

.ast-mobile-popup-drawer .main-header-menu a:hover,
.ast-mobile-popup-drawer .menu-item > a:hover,
.ast-mobile-popup-content .menu-item > a:hover,
#ast-mobile-header .menu-item > a:hover {
	color: #00FFFF !important;
}

/* Header CTA Button */
.ast-header-button-1 .ast-custom-button,
.ast-header-button-1 a {
	background: transparent !important;
	color: var(--mfe-cyan) !important;
	border: 1px solid var(--mfe-cyan) !important;
	border-radius: 4px !important;
	font-family: 'JetBrains Mono', monospace !important;
	font-size: 12px !important;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	transition: all var(--mfe-transition) !important;
}

.ast-header-button-1 .ast-custom-button:hover,
.ast-header-button-1 a:hover {
	background: rgba(0, 255, 255, 0.1) !important;
	box-shadow: var(--mfe-shadow-glow) !important;
}

/* ==========================================================================
   5. Footer (Dark)
   ========================================================================== */

.site-footer,
.ast-footer-overlay,
.ast-small-footer {
	background-color: var(--mfe-bg-secondary) !important;
	color: var(--mfe-text-secondary) !important;
	border-top: 1px solid var(--mfe-border);
}

.site-footer a {
	color: var(--mfe-text-secondary) !important;
}
.site-footer a:hover {
	color: var(--mfe-cyan) !important;
}

/* ==========================================================================
   6. Cards & Containers
   ========================================================================== */

.mfe-card {
	background: var(--mfe-bg-card);
	border: 1px solid var(--mfe-border);
	border-radius: 12px;
	padding: 32px;
	transition: all var(--mfe-transition);
}

.mfe-card:hover {
	border-color: var(--mfe-cyan);
	box-shadow: var(--mfe-shadow-glow);
	transform: translateY(-2px);
}

.mfe-card-icon {
	width: 48px;
	height: 48px;
	margin-bottom: 20px;
	color: var(--mfe-cyan);
}

.mfe-card h3 {
	font-size: 1.25rem;
	margin-bottom: 12px;
}

.mfe-card p {
	color: var(--mfe-text-secondary);
	font-size: 15px;
}

/* ==========================================================================
   7. Buttons
   ========================================================================== */

.mfe-btn-primary {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 14px 32px;
	background: transparent;
	color: var(--mfe-cyan);
	border: 2px solid var(--mfe-cyan);
	border-radius: 6px;
	font-family: 'JetBrains Mono', monospace;
	font-size: 14px;
	font-weight: 600;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	cursor: pointer;
	transition: all var(--mfe-transition);
	text-decoration: none;
}

.mfe-btn-primary:hover {
	background: rgba(0, 255, 255, 0.1);
	box-shadow: var(--mfe-shadow-glow);
	color: var(--mfe-cyan);
}

.mfe-btn-secondary {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 14px 32px;
	background: var(--mfe-cyan);
	color: var(--mfe-bg-primary);
	border: 2px solid var(--mfe-cyan);
	border-radius: 6px;
	font-family: 'JetBrains Mono', monospace;
	font-size: 14px;
	font-weight: 600;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	cursor: pointer;
	transition: all var(--mfe-transition);
	text-decoration: none;
}

.mfe-btn-secondary:hover {
	background: #66FFFF;
	box-shadow: var(--mfe-shadow-glow);
	color: var(--mfe-bg-primary);
}

/* ==========================================================================
   8. Terminal / Code Elements
   ========================================================================== */

.mfe-terminal {
	background: var(--mfe-bg-code);
	border: 1px solid var(--mfe-border);
	border-radius: 8px;
	overflow: hidden;
}

.mfe-terminal-header {
	background: var(--mfe-bg-secondary);
	padding: 10px 16px;
	display: flex;
	align-items: center;
	gap: 8px;
	border-bottom: 1px solid var(--mfe-border);
}

.mfe-terminal-dot {
	width: 12px;
	height: 12px;
	border-radius: 50%;
}
.mfe-terminal-dot.red { background: #FF5F56; }
.mfe-terminal-dot.yellow { background: #FFBD2E; }
.mfe-terminal-dot.green { background: #27C93F; }

.mfe-terminal-title {
	color: var(--mfe-text-muted);
	font-family: 'JetBrains Mono', monospace;
	font-size: 12px;
	margin-left: 8px;
}

.mfe-terminal-body {
	padding: 20px;
	font-family: 'Fira Code', 'JetBrains Mono', monospace;
	font-size: 14px;
	line-height: 1.8;
	color: var(--mfe-text-primary);
}

.mfe-terminal-body .prompt {
	color: var(--mfe-green);
}

.mfe-terminal-body .command {
	color: var(--mfe-text-heading);
}

.mfe-terminal-body .output {
	color: var(--mfe-text-secondary);
}

.mfe-terminal-body .highlight {
	color: var(--mfe-cyan);
}

.mfe-terminal-body .error {
	color: var(--mfe-orange);
}

/* Cursor blink animation */
.mfe-cursor {
	display: inline-block;
	width: 10px;
	height: 1.2em;
	background: var(--mfe-cyan);
	animation: mfe-blink 1s step-end infinite;
	vertical-align: text-bottom;
}

@keyframes mfe-blink {
	0%, 100% { opacity: 1; }
	50% { opacity: 0; }
}

/* ==========================================================================
   9. Section Styles
   ========================================================================== */

.mfe-section-dark {
	background: var(--mfe-bg-primary);
	padding: var(--mfe-section-padding) 0;
}

.mfe-section-darker {
	background: var(--mfe-bg-secondary);
	padding: var(--mfe-section-padding) 0;
}

/* Gradient divider line */
.mfe-divider {
	height: 1px;
	background: var(--mfe-gradient-accent);
	border: none;
	margin: 0;
	opacity: 0.5;
}

/* Subtle grid background */
.mfe-grid-bg {
	background-image:
		linear-gradient(rgba(255,255,255,0.03) 1px, transparent 1px),
		linear-gradient(90deg, rgba(255,255,255,0.03) 1px, transparent 1px);
	background-size: 60px 60px;
}

/* Dot pattern background */
.mfe-dot-bg {
	background-image: radial-gradient(rgba(255,255,255,0.05) 1px, transparent 1px);
	background-size: 30px 30px;
}

/* Glow border on elements */
.mfe-glow-border {
	position: relative;
}
.mfe-glow-border::before {
	content: '';
	position: absolute;
	inset: -1px;
	border-radius: inherit;
	padding: 1px;
	background: var(--mfe-gradient-accent);
	-webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
	-webkit-mask-composite: xor;
	mask-composite: exclude;
	opacity: 0;
	transition: opacity var(--mfe-transition);
}
.mfe-glow-border:hover::before {
	opacity: 1;
}

/* ==========================================================================
   10. Terminal-Style Heading Prefix
   ========================================================================== */

.mfe-heading-terminal::before {
	content: '$ ';
	color: var(--mfe-green);
	font-family: 'Fira Code', monospace;
}

/* ==========================================================================
   11. Tech Stack Badges
   ========================================================================== */

.mfe-tech-badge {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 8px 16px;
	background: var(--mfe-bg-card);
	border: 1px solid var(--mfe-border);
	border-radius: 20px;
	font-family: 'JetBrains Mono', monospace;
	font-size: 13px;
	color: var(--mfe-text-secondary);
	transition: all var(--mfe-transition);
}

.mfe-tech-badge:hover {
	border-color: var(--mfe-cyan);
	color: var(--mfe-cyan);
}

/* ==========================================================================
   12. Responsive
   ========================================================================== */

@media (max-width: 768px) {
	:root {
		--mfe-section-padding: 60px;
	}

	h1 { font-size: 2.2rem; }
	h2 { font-size: 1.8rem; }

	/* Footer: horizontal padding on mobile */
	.site-above-footer-wrap {
		padding-left: 20px !important;
		padding-right: 20px !important;
	}
	.site-below-footer-wrap {
		padding-left: 20px !important;
		padding-right: 20px !important;
	}
}

/* ==========================================================================
   13. Elementor Overrides (Dark Mode)
   ========================================================================== */

/* Elementor page wrapper — prevent horizontal overflow */
.elementor {
	overflow-x: hidden;
}


/* Elementor sections */
.elementor-section {
	background-color: transparent;
}

/* Elementor containers — max-width and overflow control */
.e-con {
	max-width: 100%;
	overflow: hidden;
}

/* Elementor text — ensure light colors on dark backgrounds */
.elementor-widget-text-editor {
	color: var(--mfe-text-secondary);
}

.elementor-widget-heading .elementor-heading-title {
	color: var(--mfe-text-heading);
}

/* Elementor icon boxes */
.elementor-icon-box-title {
	color: var(--mfe-text-heading) !important;
}
.elementor-icon-box-description {
	color: var(--mfe-text-secondary) !important;
}

/* Elementor buttons */
.elementor-button {
	font-family: 'JetBrains Mono', monospace !important;
	letter-spacing: 0.05em;
}

/* Elementor divider */
.elementor-divider-separator {
	border-color: var(--mfe-border) !important;
}

/* ==========================================================================
   14. Footer Widget Alignment
   ========================================================================== */

/* Footer logo — horizontal version */
.mfe-footer-logo {
	width: 240px !important;
	height: auto !important;
	margin: 0 !important;
	padding: 0 !important;
}

/* Footer description text — move below the 3-column grid */
.site-footer .widget_custom_html {
	margin-top: 8px;
}

/* Footer widget titles — align with logo top */
.site-footer .widget-title,
.site-footer .wp-block-heading {
	color: var(--mfe-text-heading) !important;
	font-family: 'JetBrains Mono', monospace !important;
	font-size: 14px !important;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	margin-bottom: 16px;
	margin-top: 0;
}

/* Footer widget list links */
.site-footer .widget_nav_menu a {
	color: var(--mfe-text-secondary) !important;
	font-size: 14px;
	line-height: 2.2;
}
.site-footer .widget_nav_menu a:hover {
	color: var(--mfe-cyan) !important;
}

/* Footer widget list - no bullets */
.site-footer .widget_nav_menu ul {
	list-style: none;
	padding: 0;
	margin: 0;
}

/* Above footer row — align items to top, reduce default padding */
.site-above-footer-wrap .ast-builder-grid-row {
	align-items: flex-start !important;
}
.site-above-footer-wrap {
	padding-top: 40px !important;
	padding-bottom: 40px !important;
}
.site-above-footer-wrap .footer-widget-area {
	padding-top: 0 !important;
}

/* Below footer (copyright) — border top + spacing */
.site-below-footer-wrap {
	border-top: 1px solid var(--mfe-border);
}

/* Footer description as separate row below columns */
.site-above-footer-wrap .site-footer-above-section-1 {
	display: flex;
	flex-direction: column;
}