/**
 * Stylesheet: Base Typography, Containers & Layout Grid
 *
 * @package    Gigsdock_WP_Plugin
 * @subpackage Assets_CSS
 * @since      1.0.0
 *
 * ============================================================================
 * Table of Contents:
 * 1. Google Fonts Import
 * 2. New Design System Containers (.gd-container, .gd-layout-sidebar)
 * 3. Legacy Template Containers (.gigsdock-job-container, .gigsdock-home-container)
 * 4. Legacy Two-Column Grid (.job-layout, .job-sidebar)
 * 5. Pagination (.gigsdock-pagination)
 * 6. Freshness Indicator (.gigsdock-fresh-badge)
 * 7. Accessibility: Reduced Motion
 * ============================================================================
 *
 * NOTE: Sections 3-5 are LEGACY ALIASES required because all existing templates
 * still use the old class names. Do NOT remove until all template HTML is
 * updated to use the new gd-* naming convention.
 */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

:root {
    /* Text Colors */
    --gd-text-heading: #0f172a;
    --gd-text-lead: #1e293b;
    --gd-text-body: #334155;
    --gd-text-secondary: #475569;
    --gd-text-muted: #64748b;
    --gd-text-subtle: #64748b;
    --gd-text-on-primary: #ffffff;
    --gd-text-on-dark: #ffffff;
    --gd-text-on-dark-muted: #cbd5e1;
    --gd-text-link: #2563eb;
    --gd-text-link-hover: #1d4ed8;
    --gd-text-danger: #b91c1c;
    --gd-text-warning-title: #b45309;
    --gd-text-warning-body: #78350f;
    --gd-text-remote: #0369a1;
    --gd-text-fresher: #7c3aed;
    --gd-text-salary: #166534;
    --gd-text-on-fresh: #ffffff;
    --gd-text-on-channel: #ffffff;

    /* Backgrounds */
    --gd-bg-surface: #ffffff;
    --gd-bg-subtle: #f8fafc;
    --gd-bg-muted: #f1f5f9;
    --gd-bg-strong: #e2e8f0;
    --gd-bg-dark: #0f172a;
    --gd-bg-primary: #2563eb;
    --gd-bg-primary-hover: #1d4ed8;
    --gd-bg-primary-tint: #eff6ff;
    --gd-bg-danger: #fef2f2;
    --gd-bg-warning: #fffbeb;
    --gd-bg-whatsapp: #15803d;
    --gd-bg-linkedin: #0a66c2;
    --gd-bg-fresh-start: #f97316;
    --gd-bg-fresh-end: #ea580c;
    --gd-bg-remote-tint: #e0f2fe;
    --gd-bg-fresher-tint: #f3e8ff;
    --gd-bg-success-tint: #dcfce7;
    --gd-glow-remote: radial-gradient(circle at top right, rgba(2, 132, 199, 0.05) 0%, transparent 60%);
    --gd-glow-fresher: radial-gradient(circle at top right, rgba(139, 92, 246, 0.05) 0%, transparent 60%);

    /* Warm Accent System (Highlights, "New" Badges & Retention) */
    /* Selected Active Warm Accent: Option 2 (Sunset Coral #f97316) */
    --gd-accent-warm: #f97316;
    --gd-accent-warm-hover: #ea580c;
    --gd-accent-warm-tint: #fff7ed;
    --gd-accent-warm-subtle: #ffedd5;
    --gd-accent-warm-border: #fed7aa;
    --gd-accent-warm-text: #c2410c;
    --gd-accent-warm-shadow: 0 2px 6px rgba(249, 115, 22, 0.25);

    /* Evaluation Swatches for Style Guide & Selection */
    /* Option 1: Amber / Warm Gold */
    --gd-swatch-amber: #f59e0b;
    --gd-swatch-amber-hover: #d97706;
    --gd-swatch-amber-tint: #fffbeb;
    --gd-swatch-amber-border: #fde68a;
    --gd-swatch-amber-text: #b45309;

    /* Option 2: Sunset Coral / Tangerine (Active Selected) */
    --gd-swatch-coral: #f97316;
    --gd-swatch-coral-hover: #ea580c;
    --gd-swatch-coral-tint: #fff7ed;
    --gd-swatch-coral-border: #fed7aa;
    --gd-swatch-coral-text: #c2410c;

    /* Option 3: Crimson Rose / Vermilion */
    --gd-swatch-rose: #e11d48;
    --gd-swatch-rose-hover: #be123c;
    --gd-swatch-rose-tint: #fff1f2;
    --gd-swatch-rose-border: #fecdd3;
    --gd-swatch-rose-text: #9f1239;

    /* Borders */
    --gd-border-default: #e2e8f0;
    --gd-border-hover: #cbd5e1;
    --gd-border-hover-strong: #94a3b8;
    --gd-border-primary: #2563eb;
    --gd-border-focus-dark: #1e293b;
    --gd-border-danger: #fecaca;
    --gd-border-warning: #fde68a;
    --gd-border-warning-accent: #f59e0b;
    --gd-border-tip-accent: #475569;
    --gd-border-success: #86efac;
    --gd-border-avatar: rgba(37, 99, 235, 0.15);

    /* Border Radii */
    --gd-radius-sm: 8px;
    --gd-radius-md: 12px;
    --gd-radius-lg: 16px;
    --gd-radius-pill-sm: 20px;
    --gd-radius-pill: 50px;

    /* Shadows */
    --gd-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.05);
    --gd-shadow-card-hover: 0 4px 12px rgba(0, 0, 0, 0.05);
    --gd-shadow-btn-hover: 0 4px 12px rgba(37, 99, 235, 0.15);
    --gd-shadow-focus-ring: 0 0 0 3px rgba(37, 99, 235, 0.1);
    --gd-shadow-featured: 0 10px 30px -10px rgba(0, 0, 0, 0.1);
    --gd-shadow-discovery: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
    --gd-shadow-fresh: 0 2px 6px rgba(249, 115, 22, 0.25);
    --gd-shadow-avatar: 0 2px 5px rgba(0, 0, 0, 0.04);
    --gd-focus-ring-color: rgba(37, 99, 235, 0.55);

    /* Font Weights */
    --gd-weight-regular: 400;
    --gd-weight-medium: 500;
    --gd-weight-semibold: 600;
    --gd-weight-bold: 700;
    --gd-weight-extrabold: 800;

    /* Font Sizes */
    --gd-font-size-11: 11px;
    --gd-font-size-12: 12px;
    --gd-font-size-13: 13px;
    --gd-font-size-14: 14px;
    --gd-font-size-15: 15px;
    --gd-font-size-16: 16px;
    --gd-font-size-17: 17px;
    --gd-font-size-18: 18px;
    --gd-font-size-20: 20px;
    --gd-font-size-22: 22px;
    --gd-font-size-24: 24px;
    --gd-font-size-26: 26px;
    --gd-font-size-28: 28px;
    --gd-font-size-32: 32px;
    --gd-font-size-36: 36px;
    --gd-font-size-42: 42px;

    /* Motion */
    --gd-duration-fast: 0.2s;
    --gd-duration-medium: 0.3s;
    --gd-duration-slow: 0.5s;
    --gd-ease-smooth: cubic-bezier(0.4, 0, 0.2, 1);

    /* Font Families */
    --gd-font-sans: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    --gd-font-sans-compact: 'Inter', -apple-system, sans-serif;
}


/* ==========================================================================
   1. NEW DESIGN SYSTEM: CONTAINERS
   ========================================================================== */

.gd-container {
    max-width: 1200px;
    margin: 40px auto;
    padding: 20px;
    color: var(--gd-text-body);
    font-family: var(--gd-font-sans);
}

.gd-container.home-container {
    margin-top: 0;
}

/* ==========================================================================
   2. NEW DESIGN SYSTEM: TWO-COLUMN RESPONSIVE LAYOUT GRID
   ========================================================================== */

.gd-layout-sidebar {
    display: grid;
    grid-template-columns: 1fr;
    gap: 32px;
}

@media (min-width: 992px) {
    .gd-layout-sidebar {
        grid-template-columns: 2.2fr 1fr;
        gap: 40px;
        align-items: start;
    }

    .gd-sidebar {
        position: sticky;
        top: 40px;
        display: flex;
        flex-direction: column;
        gap: 24px;
    }

    .gd-sidebar .gd-card {
        margin: 0;
    }
}

/* ==========================================================================
   3. LEGACY: MAIN PAGE WRAPPER
   ========================================================================== */

.gigsdock-job-container {
    max-width: 1200px;
    margin: 40px auto;
    padding: 20px;
    color: var(--gd-text-body);
}

.gigsdock-home-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
    color: var(--gd-text-body);
}

/**
 * Aggressively override theme fonts inside our layout containers.
 * Required because themes like Neve inject their own font stack on all elements.
 */
.gigsdock-job-container,
.gigsdock-job-container p,
.gigsdock-job-container h1,
.gigsdock-job-container h2,
.gigsdock-job-container h3,
.gigsdock-job-container h4,
.gigsdock-job-container li,
.gigsdock-job-container a,
.gigsdock-job-container span,
.gigsdock-job-container div,
.gigsdock-home-container,
.gigsdock-home-container p,
.gigsdock-home-container h1,
.gigsdock-home-container h2,
.gigsdock-home-container h3,
.gigsdock-home-container h4,
.gigsdock-home-container li,
.gigsdock-home-container a,
.gigsdock-home-container span,
.gigsdock-home-container div,
.gd-container,
.gd-container p,
.gd-container h1,
.gd-container h2,
.gd-container h3,
.gd-container h4,
.gd-container li,
.gd-container a,
.gd-container span,
.gd-container div {
    font-family: var(--gd-font-sans) !important;
}

/* Visible focus ring on interactive elements */
.gigsdock-job-container :is(a, button, summary, input, select, textarea):focus-visible,
.gigsdock-home-container :is(a, button, summary, input, select, textarea):focus-visible,
.gd-container :is(a, button, summary, input, select, textarea):focus-visible {
    outline: 3px solid var(--gd-focus-ring-color);
    outline-offset: 2px;
}

/* ==========================================================================
   4. LEGACY: TWO-COLUMN GRID (.job-layout, .job-sidebar)
   ========================================================================== */

.job-layout {
    display: grid;
    grid-template-columns: 1fr;
    gap: 32px;
}

@media (min-width: 992px) {
    .job-layout {
        grid-template-columns: 2.2fr 1fr;
        gap: 40px;
        align-items: start;
    }

    .job-sidebar {
        position: sticky;
        top: 40px;
        display: flex;
        flex-direction: column;
        gap: 24px;
    }

    .job-sidebar .info-card,
    .job-sidebar .share-box-bottom,
    .job-sidebar .job-section.related-jobs {
        margin: 0;
    }
}

/* ==========================================================================
   5. LEGACY: PAGINATION (.gigsdock-pagination)
   ========================================================================== */

.gigsdock-pagination {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-top: 32px;
    flex-wrap: wrap;
}

.gigsdock-pagination li .page-numbers {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    height: 40px;
    padding: 0 12px;
    border: 1px solid var(--gd-border-default);
    border-radius: var(--gd-radius-sm);
    font-size: var(--gd-font-size-14);
    font-weight: var(--gd-weight-semibold);
    color: var(--gd-text-secondary);
    text-decoration: none;
    background: var(--gd-bg-surface);
    transition: all var(--gd-duration-fast) ease;
}

.gigsdock-pagination li a.page-numbers:hover {
    border-color: var(--gd-border-primary);
    color: var(--gd-text-link);
    background: var(--gd-bg-primary-tint);
}

.gigsdock-pagination li .page-numbers.current {
    background: var(--gd-bg-primary);
    color: var(--gd-text-on-primary);
    border-color: var(--gd-border-primary);
    pointer-events: none;
}

.gigsdock-pagination li .page-numbers.dots {
    border: none;
    background: transparent;
    color: var(--gd-text-subtle);
    pointer-events: none;
}

/* ==========================================================================
   6. FRESHNESS INDICATOR (.gigsdock-fresh-badge)
   ========================================================================== */
.gigsdock-fresh-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: linear-gradient(135deg, var(--gd-bg-fresh-start) 0%, var(--gd-bg-fresh-end) 100%);
    color: var(--gd-text-on-fresh);
    font-size: var(--gd-font-size-11);
    font-weight: var(--gd-weight-bold);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 2px 8px;
    border-radius: var(--gd-radius-pill-sm);
    box-shadow: var(--gd-shadow-fresh);
    vertical-align: middle;
}

/* ==========================================================================
   7. ACCESSIBILITY: REDUCED MOTION
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
    .gigsdock-job-container *,
    .gigsdock-home-container *,
    .gd-container * {
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
    }

    .btn-primary:hover,
    .related-job-card:hover,
    .gigsdock-job-card:hover {
        transform: none;
    }
}