/*
Theme Name: Corporate Global Theme
Theme URI: https://example.com/corporate-global-theme
Author: Development Team
Author URI: https://example.com
Description: A lightweight, modular corporate theme optimized for Elementor Page Builder. Features product catalog, news system, job recruitment, and multi-language support (EN/TC/SC).
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.7
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: corporate-global
Domain Path: /languages
Tags: corporate, elementor, multilingual, custom-menu, custom-logo, featured-images, translation-ready
*/

/* ==========================================================================
   CSS Variables / Design Tokens
   ========================================================================== */

:root {
    /* Primary Colors */
    --cgt-primary: #1a3a5c;
    --cgt-primary-light: #2a5a8c;
    --cgt-primary-dark: #0d1f33;

    /* Secondary Colors */
    --cgt-secondary: #e8a838;
    --cgt-secondary-light: #f0c060;
    --cgt-secondary-dark: #c08820;

    /* Neutral Colors */
    --cgt-white: #ffffff;
    --cgt-light: #f8f9fa;
    --cgt-gray-100: #f1f3f5;
    --cgt-gray-200: #e9ecef;
    --cgt-gray-300: #dee2e6;
    --cgt-gray-400: #ced4da;
    --cgt-gray-500: #adb5bd;
    --cgt-gray-600: #6c757d;
    --cgt-gray-700: #495057;
    --cgt-gray-800: #343a40;
    --cgt-gray-900: #212529;
    --cgt-black: #000000;

    /* Status Colors */
    --cgt-success: #28a745;
    --cgt-warning: #ffc107;
    --cgt-danger: #dc3545;
    --cgt-info: #17a2b8;

    /* Typography */
    --cgt-font-primary: 'Noto Sans', 'Noto Sans TC', 'Noto Sans SC', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --cgt-font-heading: 'Noto Sans', 'Noto Sans TC', 'Noto Sans SC', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --cgt-font-mono: 'Fira Code', 'Courier New', monospace;

    /* Font Sizes */
    --cgt-text-xs: 0.75rem;
    --cgt-text-sm: 0.875rem;
    --cgt-text-base: 1rem;
    --cgt-text-lg: 1.125rem;
    --cgt-text-xl: 1.25rem;
    --cgt-text-2xl: 1.5rem;
    --cgt-text-3xl: 1.875rem;
    --cgt-text-4xl: 2.25rem;
    --cgt-text-5xl: 3rem;

    /* Spacing */
    --cgt-space-xs: 0.25rem;
    --cgt-space-sm: 0.5rem;
    --cgt-space-md: 1rem;
    --cgt-space-lg: 1.5rem;
    --cgt-space-xl: 2rem;
    --cgt-space-2xl: 3rem;
    --cgt-space-3xl: 4rem;
    --cgt-space-4xl: 6rem;

    /* Layout */
    --cgt-container-max: 1200px;
    --cgt-container-wide: 1400px;
    --cgt-sidebar-width: 300px;

    /* Borders */
    --cgt-radius-sm: 4px;
    --cgt-radius-md: 8px;
    --cgt-radius-lg: 12px;
    --cgt-radius-full: 9999px;

    /* Shadows */
    --cgt-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.08);
    --cgt-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.1);
    --cgt-shadow-lg: 0 8px 30px rgba(0, 0, 0, 0.12);
    --cgt-shadow-xl: 0 20px 60px rgba(0, 0, 0, 0.15);

    /* Transitions */
    --cgt-transition-fast: 150ms ease;
    --cgt-transition-base: 300ms ease;
    --cgt-transition-slow: 500ms ease;

    /* Z-Index Scale */
    --cgt-z-dropdown: 100;
    --cgt-z-sticky: 200;
    --cgt-z-fixed: 300;
    --cgt-z-modal-backdrop: 400;
    --cgt-z-modal: 500;
    --cgt-z-popover: 600;
    --cgt-z-tooltip: 700;
}

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

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
}

body {
    margin: 0;
    font-family: var(--cgt-font-primary);
    font-size: var(--cgt-text-base);
    line-height: 1.6;
    color: var(--cgt-gray-800);
    background-color: var(--cgt-white);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

img {
    max-width: 100%;
    height: auto;
    display: block;
}

a {
    color: var(--cgt-primary);
    text-decoration: none;
    transition: color var(--cgt-transition-fast);
}

a:hover {
    color: var(--cgt-primary-light);
}

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

h1, h2, h3, h4, h5, h6 {
    font-family: var(--cgt-font-heading);
    font-weight: 700;
    line-height: 1.3;
    margin-top: 0;
    color: var(--cgt-gray-900);
}

h1 { font-size: var(--cgt-text-5xl); }
h2 { font-size: var(--cgt-text-4xl); }
h3 { font-size: var(--cgt-text-3xl); }
h4 { font-size: var(--cgt-text-2xl); }
h5 { font-size: var(--cgt-text-xl); }
h6 { font-size: var(--cgt-text-lg); }

p {
    margin-top: 0;
    margin-bottom: var(--cgt-space-md);
}

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

.cgt-container {
    width: 100%;
    max-width: var(--cgt-container-max);
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--cgt-space-lg);
    padding-right: var(--cgt-space-lg);
}

.cgt-container--wide {
    max-width: var(--cgt-container-wide);
}

.cgt-section {
    padding-top: var(--cgt-space-4xl);
    padding-bottom: var(--cgt-space-4xl);
}

.cgt-grid {
    display: grid;
    gap: var(--cgt-space-xl);
}

.cgt-grid--2 { grid-template-columns: repeat(2, 1fr); }
.cgt-grid--3 { grid-template-columns: repeat(3, 1fr); }
.cgt-grid--4 { grid-template-columns: repeat(4, 1fr); }

/* ==========================================================================
   Screen Reader Only
   ========================================================================== */

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