/*
Theme Name: Alalama Theme
Theme URI: https://al3lama.ly
Author: Al3lama Team
Author URI: https://al3lama.ly
Description: قالب ووردبريس مخصص لشركة العلامة للحاسبات والتقنية، محول من تطبيق React مع دعم كامل للغة العربية.
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: alalama-theme
Tags: custom, tailwindcss, professional, rtl, arabic
*/

/* ========================================
   Reset & Base Styles
   (Tailwind CSS handles most resets)
   ======================================== */

/* RTL Support */
html {
    direction: rtl;
    scroll-behavior: smooth;
}

body {
    font-family: 'Cairo', -apple-system, BlinkMacSystemFont, 'Segoe UI', Tahoma, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Remove orange focus outline from buttons and links */
a:focus,
button:focus,
*:focus {
    outline: none !important;
    box-shadow: none !important;
}

/* ========================================
   Custom Animations
   ======================================== */

/* Fade In Animation */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.animate-fade-in {
    animation: fadeIn 0.6s ease-out forwards;
}

/* Fade In Up Animation */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.animate-fade-in-up {
    animation: fadeInUp 0.8s ease-out forwards;
}

/* Pulse Animation */
@keyframes pulse-gentle {

    0%,
    100% {
        opacity: 1;
        transform: scale(1);
    }

    50% {
        opacity: 0.8;
        transform: scale(1.05);
    }
}

.animate-pulse-gentle {
    animation: pulse-gentle 2s ease-in-out infinite;
}

/* Float Animation */
@keyframes float {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-10px);
    }
}

.animate-float {
    animation: float 3s ease-in-out infinite;
}

/* Slide In from Right (for RTL) */
@keyframes slideInRight {
    from {
        opacity: 0;
        transform: translateX(-30px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.animate-slide-in-right {
    animation: slideInRight 0.6s ease-out forwards;
}

/* Scale In Animation */
@keyframes scaleIn {
    from {
        opacity: 0;
        transform: scale(0.9);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}

.animate-scale-in {
    animation: scaleIn 0.5s ease-out forwards;
}

/* Bounce Animation */
@keyframes bounceGentle {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-5px);
    }
}

.animate-bounce-gentle {
    animation: bounceGentle 1s ease-in-out infinite;
}

/* ========================================
   Custom Scrollbar
   ======================================== */

::-webkit-scrollbar {
    width: 10px;
}

::-webkit-scrollbar-track {
    background: #f1f1f1;
}

::-webkit-scrollbar-thumb {
    background: #0052cc;
    border-radius: 5px;
}

::-webkit-scrollbar-thumb:hover {
    background: #003d99;
}

/* ========================================
   Selection Style
   ======================================== */

::selection {
    background-color: #0052cc;
    color: white;
}

::-moz-selection {
    background-color: #0052cc;
    color: white;
}

/* ========================================
   Focus States (Accessibility)
   ======================================== */

/* Remove outline on mouse click, keep for keyboard users */
a:focus,
button:focus {
    outline: none;
}

/* Show outline only for keyboard navigation (accessibility) */
a:focus-visible,
button:focus-visible {
    outline: 2px solid #0052cc;
    outline-offset: 2px;
}

/* ========================================
   Hero Section Parallax Effect
   ======================================== */

.parallax-bg {
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

@media (max-width: 768px) {
    .parallax-bg {
        background-attachment: scroll;
    }
}

/* ========================================
   Card Hover Effects
   ======================================== */

.card-hover {
    transition: all 0.3s ease;
}

.card-hover:hover {
    transform: translateY(-5px);
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}

/* ========================================
   Gradient Backgrounds
   ======================================== */

.gradient-blue {
    background: linear-gradient(135deg, #0052cc 0%, #003d99 100%);
}

.gradient-orange {
    background: linear-gradient(135deg, #ff9900 0%, #cc7a00 100%);
}

.gradient-hero {
    background: linear-gradient(135deg, rgba(0, 82, 204, 0.9) 0%, rgba(0, 61, 153, 0.95) 100%);
}

/* ========================================
   Glass Morphism Effect
   ======================================== */

.glass {
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
}

/* ========================================
   Counter Animation Styles
   ======================================== */

.counter-number {
    font-variant-numeric: tabular-nums;
}

/* ========================================
   Accordion Styles
   ======================================== */

.accordion-content {
    transition: max-height 0.5s ease-in-out;
    overflow: hidden;
}

/* ========================================
   Button Styles
   ======================================== */

.btn-primary {
    background-color: #0052cc;
    color: white;
    padding: 12px 24px;
    border-radius: 8px;
    font-weight: 700;
    transition: all 0.3s ease;
}

.btn-primary:hover {
    background-color: #003d99;
    transform: scale(1.02);
}

.btn-orange {
    background-color: #ff9900;
    color: white;
    padding: 12px 24px;
    border-radius: 8px;
    font-weight: 700;
    transition: all 0.3s ease;
}

.btn-orange:hover {
    background-color: #cc7a00;
    transform: scale(1.02);
}

/* ========================================
   Loading Spinner
   ======================================== */

.spinner {
    width: 40px;
    height: 40px;
    border: 4px solid #f3f3f3;
    border-top: 4px solid #0052cc;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

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

@media (max-width: 640px) {
    h1 {
        font-size: 1.75rem;
    }

    h2 {
        font-size: 1.5rem;
    }

    h3 {
        font-size: 1.25rem;
    }
}

/* ========================================
   Print Styles
   ======================================== */

@media print {

    header,
    footer,
    .no-print {
        display: none !important;
    }

    body {
        font-size: 12pt;
        color: black;
        background: white;
    }
}

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

.text-shadow {
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
}

.text-shadow-lg {
    text-shadow: 3px 3px 6px rgba(0, 0, 0, 0.5);
}

/* Hide scrollbar but keep functionality */
.hide-scrollbar::-webkit-scrollbar {
    display: none;
}

.hide-scrollbar {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

/* Aspect Ratio Boxes */
.aspect-video {
    aspect-ratio: 16 / 9;
}

.aspect-square {
    aspect-ratio: 1 / 1;
}

/* ========================================
   WordPress Specific Styles
   ======================================== */

.wp-block-image img {
    max-width: 100%;
    height: auto;
}

.aligncenter {
    display: block;
    margin-left: auto;
    margin-right: auto;
}

.alignleft {
    float: right;
    /* RTL */
    margin-left: 1rem;
    margin-bottom: 1rem;
}

.alignright {
    float: left;
    /* RTL */
    margin-right: 1rem;
    margin-bottom: 1rem;
}

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

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
}