/*
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;

	/* Talent Community surfaces (banner + archive card + single-page
	 * apply pill) — aliased to the recruiter's brand primary so the
	 * Talent Community sections inherit Settings → Brand colours like
	 * the rest of the site. Mutual exclusion with the register CTA
	 * (ecaf05e) means there's no visual-clash reason to keep these
	 * deliberately distinct from --color-primary any more. The values
	 * below are kept as named variables so feature CSS can continue to
	 * reference --color-talent-community semantically — flip the alias
	 * here if a future install needs a TC-specific override. */
	--color-talent-community: var(--color-primary);
	--color-talent-community-dark: var(--color-primary-dark);

	/* ===== 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 =====
	 * Manrope is the default brand typeface (substitute for Noir Pro,
	 * which isn't on Google Fonts). The actual <link> to Google Fonts is
	 * emitted by talenthub_emit_typography() in utilities.php; the system
	 * stack below is the failsafe if Manrope fails to load. Recruiters
	 * can override per-slot via Settings → Typography. */
	--font-family-base: 'Manrope', 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;
	}
}

/* ===================================================================
 * .btn-pill — global pill-shaped CTA primitive
 *
 * Shared shape used by the homepage Talent Community banner and the
 * archive Talent Community card. Lives in style.css (always enqueued)
 * rather than forms.css (only loaded on contact-form pages) so it
 * resolves on every surface that needs it.
 *
 * Standalone — does NOT require .btn. Surfaces using it set their own
 * background/color via more specific rules (banner pill is white on
 * banner colour; card pill is solid Talent Community colour).
 * =================================================================== */
.btn-pill {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 14px 28px;
	border-radius: 999px;
	font-size: 1rem;
	font-weight: 600;
	line-height: 1;
	text-decoration: none;
	border: none;
	cursor: pointer;
	transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease, color 0.2s ease;
}
.btn-pill:hover,
.btn-pill:focus {
	transform: translateY(-2px);
	text-decoration: none;
	outline: none;
}
.btn-pill__arrow {
	display: inline-block;
	transition: transform 0.2s ease;
}
.btn-pill:hover .btn-pill__arrow,
.btn-pill:focus .btn-pill__arrow {
	transform: translateX(4px);
}

/* ===================================================================
 * .btn-pill--view — "View Details" CTA on job cards (Feature #34)
 *
 * Smaller than the global pill (job-card footer context) and tinted
 * with the brand primary. Sits alongside the Save pill in the footer.
 * =================================================================== */
.btn-pill--view {
	padding: 10px 20px;
	font-size: 0.9375rem;
	background: var(--color-primary, #003366);
	color: #fff;
}
.btn-pill--view:hover,
.btn-pill--view:focus {
	background: var(--color-primary, #003366);
	color: #fff;
	box-shadow: 0 6px 16px rgba(0, 51, 102, 0.25);
}

/* ===================================================================
 * .btn-pill--save — Save Job toggle (Feature #34)
 *
 * Candidate-only pill that replaces the icon-only heart/bookmark.
 * Two contexts: small in the card header; full-size in the single-job
 * header and sidebar (.btn-pill--save-large). `.is-saved` flips it to
 * the brand primary fill.
 * =================================================================== */
.btn-pill--save {
	padding: 8px 16px;
	font-size: 0.875rem;
	background: #f3f4f6;
	color: #374151;
	border: 1px solid #e5e7eb;
}
.btn-pill--save:hover,
.btn-pill--save:focus {
	background: #e5e7eb;
	color: #111827;
}
.btn-pill--save.is-saved {
	background: var(--color-primary, #003366);
	color: #fff;
	border-color: var(--color-primary, #003366);
}
.btn-pill--save.is-saved:hover,
.btn-pill--save.is-saved:focus {
	background: var(--color-primary, #003366);
	color: #fff;
}
.btn-pill--save-large {
	padding: 14px 28px;
	font-size: 1rem;
}

/* ===================================================================
 * .btn-pill state variants — Apply CTAs on the single-job page (#58)
 *
 * Four states with distinct colour cues, all in the same pill shape:
 *   --apply      Primary brand colour (Apply now)
 *   --applied    Success green (already applied)
 *   --incomplete Warning amber (profile incomplete — finish first)
 *   --register   Primary brand colour (anon → register to apply)
 *
 * Talent Community single-page already uses .btn-pill via its own
 * .talent-community-single__cta variant; these mirror that shape so
 * the public-side apply experience is visually consistent.
 *
 * .btn-pill--block stretches the pill to full sidebar width for the
 * sidebar CTA placement.
 * =================================================================== */
.btn-pill--apply,
.btn-pill--register {
	background: var(--color-primary, #003366);
	color: #fff;
	box-shadow: 0 4px 12px rgba(0, 51, 102, 0.18);
}
.btn-pill--apply:hover,
.btn-pill--apply:focus,
.btn-pill--register:hover,
.btn-pill--register:focus {
	background: var(--color-primary-dark, #002244);
	color: #fff;
	box-shadow: 0 6px 16px rgba(0, 51, 102, 0.25);
}

.btn-pill--applied {
	background: var(--color-success, #28a745);
	color: #fff;
	box-shadow: 0 4px 12px rgba(40, 167, 69, 0.18);
}
.btn-pill--applied:hover,
.btn-pill--applied:focus {
	background: #1f8636;
	color: #fff;
	box-shadow: 0 6px 16px rgba(40, 167, 69, 0.25);
}

.btn-pill--incomplete {
	background: #f0ad4e;
	color: #fff;
	box-shadow: 0 4px 12px rgba(240, 173, 78, 0.20);
}
.btn-pill--incomplete:hover,
.btn-pill--incomplete:focus {
	background: #ec971f;
	color: #fff;
	box-shadow: 0 6px 16px rgba(240, 173, 78, 0.28);
}

.btn-pill--block {
	display: flex;
	justify-content: center;
	width: 100%;
}

.apply-profile-incomplete-hint {
	margin-top: 8px;
	font-size: 0.9em;
	color: #6b7280;
}

.b-fields-notice {
	margin-top: 10px;
	padding: 10px;
	background: #fcf8e3;
	border: 1px solid #faebcc;
	border-radius: 4px;
	font-size: 13px;
	color: #8a6d3b;
}