/*
Theme Name: ZYLOPOS
Theme URI: https://www.zylopos.com
Author: ZYLOPOS Team
Author URI: https://www.zylopos.com
Description: A custom WordPress theme for ZYLOPOS POS System website. Fully responsive, multilingual support (EN, ZH, MS, JA, KO, TA), optimized for marketing and conversions. Built with Tailwind CSS integration and Elementor compatibility.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.9
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: zylopos
Tags: custom-background, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready, multilingual, business, responsive

ZYLOPOS Theme, Copyright 2025 ZYLOPOS Pte Ltd
ZYLOPOS is distributed under the terms of the GNU GPL
*/

/* 
==========================================
  ZYLOPOS Custom Theme
  Brand Colors:
  - Primary Blue: #1e40af
  - Success Green: #10b981
  - Accent Orange: #f59e0b
==========================================
*/

/* Reset and Base Styles */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

:root {
    --primary-blue: #1e40af;
    --secondary-green: #10b981;
    --accent-orange: #f59e0b;
    --text-dark: #1f2937;
    --text-light: #6b7280;
    --border-gray: #e5e7eb;
    --bg-light: #f9fafb;
}

body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Noto Sans SC', 'Noto Sans JP', 'Noto Sans KR', 'Noto Sans Tamil', sans-serif;
    font-size: 16px;
    line-height: 1.6;
    color: var(--text-dark);
    background-color: #ffffff;
}

/* Typography */
h1, h2, h3, h4, h5, h6 {
    font-weight: 700;
    line-height: 1.3;
    color: #111827;
}

h1 { font-size: 3rem; }
h2 { font-size: 2.25rem; }
h3 { font-size: 1.75rem; }
h4 { font-size: 1.5rem; }

a {
    color: var(--primary-blue);
    text-decoration: none;
    transition: color 0.3s ease;
}

a:hover {
    color: var(--secondary-green);
}

/* Container */
.container {
    max-width: 1140px;
    margin: 0 auto;
    padding: 0 15px;
}

/* Header Styles */
.site-header {
    background-color: #ffffff;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);
    position: fixed;
    width: 100%;
    top: 0;
    z-index: 1000;
    height: 80px;
}

.site-header .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 80px;
}

.site-logo {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--primary-blue);
}

.main-navigation ul {
    display: flex;
    list-style: none;
    gap: 2rem;
}

.main-navigation a {
    font-weight: 500;
    color: var(--text-dark);
}

/* Buttons */
.btn {
    display: inline-block;
    padding: 15px 30px;
    border-radius: 6px;
    font-weight: 600;
    text-align: center;
    transition: all 0.3s ease;
    cursor: pointer;
}

.btn-primary {
    background-color: var(--accent-orange);
    color: #ffffff;
}

.btn-primary:hover {
    background-color: #ea580c;
    transform: translateY(-2px);
    box-shadow: 0 6px 12px rgba(245, 158, 11, 0.3);
}

.btn-secondary {
    background-color: transparent;
    border: 2px solid var(--primary-blue);
    color: var(--primary-blue);
}

.btn-secondary:hover {
    background-color: var(--primary-blue);
    color: #ffffff;
}

/* Hero Section */
.hero-section {
    background: linear-gradient(135deg, var(--primary-blue) 0%, #3b82f6 100%);
    color: #ffffff;
    padding: 120px 0 80px;
    margin-top: 80px;
}

/* Cards */
.card {
    background: #ffffff;
    border-radius: 12px;
    padding: 2rem;
    border: 1px solid var(--border-gray);
    transition: all 0.3s ease;
}

.card:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

/* Footer */
.site-footer {
    background-color: #111827;
    color: #d1d5db;
    padding: 3rem 0;
}

.site-footer a {
    color: #d1d5db;
}

.site-footer a:hover {
    color: #ffffff;
}

/* Responsive */
@media (max-width: 768px) {
    h1 { font-size: 2rem; }
    h2 { font-size: 1.75rem; }
    
    .main-navigation {
        display: none;
    }
    
    .hero-section {
        padding: 80px 0 60px;
    }
}

/* Elementor Compatibility */
.elementor-widget-wrap {
    font-family: inherit;
}

/* Utility Classes */
.text-center { text-align: center; }
.mt-4 { margin-top: 1rem; }
.mb-4 { margin-bottom: 1rem; }
.py-20 { padding-top: 5rem; padding-bottom: 5rem; }