/*
Theme Name: TalentHub
Theme URI: https://www.websolutions.im
Author: Web Solutions IOM
Author URI: https://www.websolutions.im
Description: TalentHub is a clean WordPress framework theme built for talent management and recruitment websites. Features Advanced Custom Fields integration, responsive design, GSAP animations, Slick.js carousels, WOW.js scroll effects, and modern JavaScript libraries. Built on the BlankSlate framework with a focus on performance and developer experience.
Tags: recruitment, talent-management, corporate, custom-menu, featured-images, threaded-comments, translation-ready, accessibility-ready, responsive
Version: 1.0
Requires at least: 5.2
Tested up to: 6.8
Requires PHP: 7.4
License: GNU General Public License v3 or Later
License URI: https://www.gnu.org/licenses/gpl.html
Text Domain: talenthub

TalentHub WordPress Theme 2025
Built on BlankSlate framework / Distributed under the terms of the GNU GPL
*/

/* ========================================
   CSS CUSTOM PROPERTIES (CSS VARIABLES)
   ======================================== */
:root {
	/* ===== BRAND COLORS ===== */
	--color-primary: var(--custom-primary, #003366);
	--color-primary-rgb: 0, 51, 102;
	--color-primary-light: #004080;
	--color-primary-dark: #002244;

	/* Secondary Colors */
	--color-secondary: #666666;
	--color-secondary-dark: #444444;
	--color-secondary-light: #999999;
	--color-accent: #007acc;

	/* ===== NEUTRALS ===== */
	--color-background: #ffffff;
	--color-surface: #f8f9fa;
	--color-border: #e0e0e0;
	--color-text: #1a1a1a;
	--color-text-muted: #6c757d;

	/* Legacy background aliases for compatibility */
	--color-bg-primary: var(--color-background);
	--color-bg-secondary: #f2f2f2;
	--color-bg-light: var(--color-surface);
	--color-bg-dark: #242424;
	--color-bg-accent: #f5f5f5;

	/* Legacy text aliases */
	--color-text-primary: var(--color-text);
	--color-text-secondary: #1d1d1d;
	--color-text-light: #666;
	--color-text-white: #ffffff;

	/* ===== SEMANTIC COLORS ===== */
	--color-success: #28a745;
	--color-warning: #ffc107;
	--color-error: #dc3545;
	--color-info: #17a2b8;

	/* ===== TYPOGRAPHY ===== */
	--font-family-base: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
	--font-family-heading: var(--font-family-base);
	--font-size-base: 1rem;
	--font-size-sm: 0.875rem;
	--font-size-lg: 1.125rem;
	--font-size-xl: 1.25rem;
	--font-size-2xl: 1.5rem;
	--font-size-3xl: 2rem;
	--font-size-4xl: 2.5rem;
	--font-size-h1: 2.5rem;
	--font-size-h2: 2rem;
	--font-size-h3: 1.5rem;
	--font-size-h4: 1.25rem;
	--font-size-h5: 1.125rem;
	--font-size-h6: 1rem;
	--line-height-base: 1.5;

	/* Legacy font aliases */
	--font-body: 'Crimson Pro', serif;
	--font-heading: 'Raleway', sans-serif;

	/* ===== SPACING ===== */
	--spacing-2xs: 0.125rem;
	--spacing-xs: 0.25rem;
	--spacing-sm: 0.5rem;
	--spacing-md: 1rem;
	--spacing-lg: 1.5rem;
	--spacing-xl: 2rem;
	--spacing-2xl: 3rem;
	--spacing-3xl: 4rem;

	/* ===== LAYOUT ===== */
	--container-width: 1200px;
	--container-max-width: 1400px;

	/* ===== BORDERS ===== */
	--border-radius: 0.5rem;
	--border-radius-sm: 0.25rem;
	--border-radius-md: 0.5rem;
	--border-radius-lg: 1rem;
	--border-width: 1px;

	/* Legacy border aliases */
	--border-radius-small: var(--border-radius-sm);
	--border-radius-medium: var(--border-radius-md);
	--border-radius-large: var(--border-radius-lg);
	--color-border-light: #f8f7f6;
	--color-border-medium: #ccc;
	--color-border-dark: #242424;

	/* ===== SHADOWS ===== */
	--shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
	--shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1);
	--shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1);

	/* ===== BUTTONS ===== */
	--color-button-primary: var(--color-primary);
	--color-button-primary-hover: var(--color-primary-dark);
	--color-button-text: #ffffff;
	--color-button-text-alt: #333333;
	--color-button-border: var(--color-primary);

	/* Button Variations */
	--color-button-blue: #007acc;
	--color-button-blue-hover: #0099ff;
	--color-button-orange: #ff6b35;
	--color-button-green: var(--color-success);

	/* ===== FORMS ===== */
	--color-form-bg: #d9e9ee;
	--color-form-border: #2c5bad;
	--color-form-text: #2c5bad;
	--color-form-error: var(--color-error);

	/* ===== HEADERS ===== */
	--color-header-h1: #242424;
	--color-header-h2: #333333;
	--color-header-h3: #666666;
	--color-header-h4: #1d1d1d;
	--color-header-h5: #333333;
	--color-header-h6: #242424;

	/* ===== LINKS ===== */
	--color-link: var(--color-accent);
	--color-link-hover: #005a9c;
	--color-link-footer: #f2f2f2;
	--color-link-footer-hover: var(--color-accent);

	/* ===== UTILITY ===== */
	--color-white: #ffffff;
	--color-light-gray: #e9ecef;
	--color-background-light: var(--color-surface);

	/* Z-index scale */
	--z-dropdown: 1000;
	--z-sticky: 1020;
	--z-fixed: 1030;
	--z-header: 1035;
	--z-modal-backdrop: 1040;
	--z-modal: 1050;
	--z-popover: 1060;
	--z-tooltip: 1070;
}

/* ===== DARK MODE ===== */
/* Dark mode color definitions (for prefers-color-scheme fallbacks) */
:root {
	--color-dark-bg: #111827;
	--color-dark-surface: #1f2937;
	--color-dark-border: #374151;
	--color-dark-text: #f3f4f6;
	--color-dark-text-secondary: #d1d5db;
	--color-dark-text-light: #9ca3af;
}

[data-theme="dark"] {
	--color-background: #1a1a1a;
	--color-surface: #2d2d2d;
	--color-border: #404040;
	--color-text: #f0f0f0;
	--color-text-muted: #a0a0a0;

	/* Adjust shadows for dark mode */
	--shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
	--shadow-md: 0 4px 6px rgba(0, 0, 0, 0.4);
	--shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.5);

	/* Dark mode specific overrides */
	--color-bg-primary: var(--color-background);
	--color-bg-secondary: #242424;
	--color-bg-light: var(--color-surface);
	--color-text-primary: var(--color-text);
	--color-text-light: #a0a0a0;
	--color-text-secondary: #d0d0d0;

	/* Headers in dark mode */
	--color-header-h1: #f0f0f0;
	--color-header-h2: #e0e0e0;
	--color-header-h3: #d0d0d0;
	--color-header-h4: #f0f0f0;
	--color-header-h5: #e0e0e0;
	--color-header-h6: #f0f0f0;
}
/* CSS Reset */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}

/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
	display: block;
}

/* Base HTML elements */
html { scroll-behavior: smooth; }

nav ul, nav ol { list-style: none; margin: 0; padding: 0; }

blockquote, q { quotes: none; }
blockquote::before, blockquote::after,
q::before, q::after { content: none; }

q { display: inline; font-style: italic; }
q::before, q::after { content: '"'; font-style: normal; }

table { border-collapse: collapse; border-spacing: 0; }
th, td { padding: 2px; }

textarea,input[type="text"],input[type="button"],input[type="submit"],input[type="reset"],input[type="search"],input[type="password"]{-webkit-appearance:none;appearance:none;border-radius:0}

button { outline: 0;}
/* Text elements */
big { font-size: 120%; }
small, sup, sub { font-size: 80%; }
sup { vertical-align: super; }
sub { vertical-align: sub; }
dd { margin-left: 20px; }
kbd, tt { font-family: monospace; font-size: 12px; }
ins { text-decoration: underline; }
del, strike, s { text-decoration: line-through; }
dt { font-weight: bold; }
address, cite, var { font-style: italic; }

/* Links */
a { text-decoration-skip-ink: auto; }
a[href^="tel"] { color: inherit; text-decoration: none; }

/* Accessibility */
.screen-reader-text,
.visually-hidden:not(:focus):not(:active),
.form-allowed-tags:not(:focus):not(:active) {
	position: absolute !important;
	width: 1px; height: 1px;
	padding: 0; margin: -1px;
	overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px);
	white-space: nowrap;
}

.screen-reader-text:focus,
.skip-link:focus {
	background: #f7f7f7;
	border-radius: 3px;
	box-shadow: 0 0 2px rgba(0,0,0,.6);
	color: #007acc;
	font-size: .875rem; font-weight: 700;
	line-height: normal;
	padding: 15px 23px 14px;
	position: absolute;
	top: 5px; left: 6px; right: auto;
	width: auto; height: auto;
	z-index: 100000;
}

.skip-link {
	left: -9999rem;
	top: 2.5rem;
	text-decoration: underline;
}

/* ========================================
   TALENTHUB ANIMATIONS & INTERACTIONS
   ======================================== */

/* Base transition setup for interactive elements */
.btn, 
.search-button, 
button[type="submit"],
.job-card,
.step-card,
.search-input,
input[type="text"],
input[type="email"], 
input[type="password"],
textarea {
	transition: all 0.3s cubic-bezier(0.4, 0.0, 0.2, 1);
}

/* Enhanced button interactions */
.btn {
	transform: translateY(0);
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.btn:hover {
	transform: translateY(-2px);
	box-shadow: 0 4px 12px rgba(var(--color-primary, 51, 102, 153), 0.25);
}

.btn:active {
	transform: translateY(0);
	transition-duration: 0.1s;
}

/* Job card hover effects */
.job-card {
	transform: translateY(0) scale(1);
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
	border-radius: 8px;
	overflow: hidden;
}

.job-card:hover {
	transform: translateY(-6px) scale(1.02);
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
}

/* Step card hover effects */
.step-card {
	transform: translateY(0) scale(1);
	box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
	border-radius: 12px;
	perspective: 1000px;
}

.step-card:hover {
	transform: translateY(-8px) scale(1.03);
	box-shadow: 0 12px 32px rgba(0, 0, 0, 0.15);
}

.step-card .step-icon {
	transition: transform 0.4s cubic-bezier(0.4, 0.0, 0.2, 1);
}

/* Form field focus animations */
.search-input:focus,
input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
textarea:focus {
	transform: scale(1.02);
	box-shadow: 0 4px 12px rgba(var(--color-primary, 51, 102, 153), 0.15);
	border-color: var(--color-primary, #336699);
	outline: none;
}

/* Mobile menu transitions */
.mobile-menu,
.main-navigation .menu {
	transition: transform 0.4s cubic-bezier(0.4, 0.0, 0.2, 1), 
	            opacity 0.4s ease;
}

/* Hero section elements - prepared for GSAP animations */
.hero-headline {
	transform: translateY(40px);
	opacity: 0;
}

.hero-subheadline {
	transform: translateY(30px);
	opacity: 0;
}

.hero-search-form,
.hero-actions {
	transform: translateY(25px);
	opacity: 0;
}

/* Featured jobs section elements */
.featured-jobs-section .section-header > * {
	transform: translateY(30px);
	opacity: 0;
}

.featured-jobs-section .job-card {
	transform: translateY(40px) scale(0.95);
	opacity: 0;
}

.featured-jobs-section .section-footer {
	transform: translateY(30px);
	opacity: 0;
}

/* How It Works section elements */
.how-it-works-section .section-title {
	transform: translateY(30px);
	opacity: 0;
}

.how-it-works-section .section-description {
	transform: translateY(20px);
	opacity: 0;
}

.how-it-works-section .stats-row {
	transform: translateY(30px) scale(0.95);
	opacity: 0;
}

.how-it-works-section .step-card {
	transform: translateY(50px) rotateY(15deg);
	opacity: 0;
}

/* CTA section elements */
.cta-section .cta-headline {
	transform: translateY(30px);
	opacity: 0;
}

.cta-section .cta-button {
	transform: translateY(20px) scale(0.95);
	opacity: 0;
}

/* Job archive elements */
.jobs-grid .job-card,
.job-listings .job-card {
	transform: translateY(30px) scale(0.98);
	opacity: 0;
}

.jobs-filters,
.job-search-form {
	transform: translateY(30px);
	opacity: 0;
}

/* Reduced motion support - disable animations for users who prefer less motion */
@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}

	/* Reset transforms when animations are disabled */
	.hero-headline,
	.hero-subheadline,
	.hero-search-form,
	.hero-actions,
	.featured-jobs-section .section-header > *,
	.featured-jobs-section .job-card,
	.featured-jobs-section .section-footer,
	.how-it-works-section .section-title,
	.how-it-works-section .section-description,
	.how-it-works-section .stats-row,
	.how-it-works-section .step-card,
	.cta-section .cta-headline,
	.cta-section .cta-button,
	.jobs-grid .job-card,
	.job-listings .job-card,
	.jobs-filters,
	.job-search-form {
		transform: none !important;
		opacity: 1 !important;
	}
}

/* Performance optimizations for animations */
.btn,
.job-card,
.step-card,
.hero-headline,
.hero-subheadline {
	will-change: transform, opacity;
}

/* Remove will-change after animations complete to free up GPU memory */
.animation-complete {
	will-change: auto;
}

/* Loading state for elements that will be animated */
.gsap-loading .hero-headline,
.gsap-loading .hero-subheadline,
.gsap-loading .hero-search-form,
.gsap-loading .hero-actions,
.gsap-loading .featured-jobs-section .section-header > *,
.gsap-loading .featured-jobs-section .job-card,
.gsap-loading .how-it-works-section .step-card {
	visibility: hidden;
}

/* Ensure elements are visible once GSAP initializes */
.gsap-initialized .hero-headline,
.gsap-initialized .hero-subheadline,
.gsap-initialized .hero-search-form,
.gsap-initialized .hero-actions,
.gsap-initialized .featured-jobs-section .section-header > *,
.gsap-initialized .featured-jobs-section .job-card,
.gsap-initialized .how-it-works-section .step-card {
	visibility: visible;
}

/* Smooth scrolling for internal links */
html {
	scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}
}

/* Stats Row Styling */
.stats-row {
	display: flex;
	justify-content: center;
	gap: 3rem;
	margin-top: 2rem;
	padding: 2rem 0;
}

.stat-item {
	text-align: center;
}

.stat-number {
	display: block;
	font-size: 2.5rem;
	font-weight: 700;
	color: var(--color-primary, #336699);
	line-height: 1;
	margin-bottom: 0.5rem;
}

.stat-label {
	display: block;
	font-size: 0.95rem;
	color: var(--color-text-muted, #6c757d);
	font-weight: 500;
}

/* Mobile responsive stats */
@media (max-width: 768px) {
	.stats-row {
		flex-direction: column;
		gap: 1.5rem;
		margin-top: 1.5rem;
		padding: 1.5rem 0;
	}
	
	.stat-number {
		font-size: 2rem;
	}
}