/*
Theme Name: AlwajeezTech
Text Domain: alwajeez-tech
Version: 1.0.0
Description: Ultra-lightweight, bilingual, SEO-optimized theme translated from the Alwajeez Tech React/Tailwind app. WooCommerce ready.
Author: Alwajeez Tech
Requires at least: 6.2
Tested up to: 6.6
Requires PHP: 7.4
License: GPL-2.0-or-later
Tags: custom-colors, custom-logo, custom-menu, rtl-language-support, woocommerce, one-column, responsive-layout
*/

/* Base theme tokens (ported from app's CSS variables) */
:root{
  --background: 0 0% 99%;
  --foreground: 240 10% 9%;
  --card: 0 0% 100%;
  --card-foreground: 240 10% 9%;
  --popover: 0 0% 100%;
  --popover-foreground: 240 10% 9%;
  --primary: 349 94% 45%;
  --primary-foreground: 0 0% 98%;
  --secondary: 240 5% 96%;
  --secondary-foreground: 240 6% 10%;
  --muted: 240 5% 96%;
  --muted-foreground: 240 4% 22%;
  --accent: 240 5% 96%;
  --accent-foreground: 240 6% 10%;
  --destructive: 0 84% 60%;
  --destructive-foreground: 0 0% 98%;
  --border: 240 6% 90%;
  --input: 240 6% 90%;
  --ring: 349 94% 45%;
  --radius: .75rem;
  --brand-500: 349 94% 45%;
  --brand-600: 349 94% 38%;
  --brand-700: 349 94% 32%;
  --surface: 0 0% 99%;
  --outline: 240 5% 65%;
  --outline-variant: 240 5% 80%;
}

html.dark{
  --background: 240 10% 6%;
  --foreground: 0 0% 98%;
  --card: 240 10% 8%;
  --card-foreground: 0 0% 98%;
  --popover: 240 10% 8%;
  --popover-foreground: 0 0% 98%;
  --primary: 349 94% 45%;
  --primary-foreground: 0 0% 98%;
  --secondary: 240 4% 16%;
  --secondary-foreground: 0 0% 98%;
  --muted: 240 4% 16%;
  --muted-foreground: 240 5% 65%;
  --accent: 240 4% 16%;
  --accent-foreground: 0 0% 98%;
  --destructive: 0 63% 31%;
  --destructive-foreground: 0 0% 98%;
  --border: 240 4% 16%;
  --input: 240 4% 16%;
  --ring: 349 94% 45%;
  --surface: 240 10% 6%;
  --outline: 240 5% 35%;
}

*{box-sizing:border-box}
body{margin:0;background-color:hsl(var(--background));color:hsl(var(--foreground));font-family:Inter,system-ui,Segoe UI,Roboto,Helvetica,Arial,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
img{max-width:100%;height:auto;display:block}
a{text-decoration:none;color:inherit}

.container{max-width:1280px;margin-inline:auto;padding-inline:1rem}
.header{position:sticky;top:0;z-index:50;background:color-mix(in oklab, hsl(var(--background)) 90%, transparent);backdrop-filter:blur(8px);border-bottom:1px solid hsl(var(--border))}
.header-inner{display:flex;align-items:center;justify-content:space-between;height:64px}
.brand img{max-height:40px}
.nav{display:none;gap:.25rem}
.nav a{display:inline-flex;align-items:center;gap:.5rem;padding:.5rem 1rem;border-radius:.5rem}
.nav a:hover{background:hsl(var(--accent))}
.nav a.is-active{background:hsl(var(--secondary));color:hsl(var(--primary));font-weight:700}
.header-actions{display:none;gap:.5rem}
.burger{display:inline-flex;align-items:center;justify-content:center;border:1px solid hsl(var(--outline-variant));border-radius:.75rem;padding:.5rem}

@media(min-width:1024px){.nav{display:flex}.header-actions{display:flex}.burger{display:none}}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;height:44px;padding:0 1rem;border-radius:.75rem;border:1px solid transparent;font-weight:600;transition:all .2s ease}
.btn-primary{background:linear-gradient(90deg,hsl(var(--brand-500)),hsl(var(--brand-600)));color:#fff;box-shadow:0 0 20px hsl(var(--brand-500) / .35)}
.btn-primary:hover{filter:brightness(1.05)}
.btn-outline{background:hsl(var(--background));border-color:hsl(var(--border))}
.btn-outline:hover{border-color:hsl(var(--brand-500));background:color-mix(in srgb, hsl(var(--brand-500)) 6%, hsl(var(--background)))}

.text-gradient{background:linear-gradient(90deg,hsl(var(--brand-500)),hsl(var(--brand-600)));-webkit-background-clip:text;background-clip:text;color:transparent}
.card{border:1px solid hsl(var(--outline-variant));background:color-mix(in srgb, hsl(var(--card)), transparent 10%);border-radius:1rem;box-shadow:0 10px 30px #00000015}
.glass{backdrop-filter:blur(8px)}
.section{padding-block:4rem}
.section-sm{padding-block:2rem}
.section-dark{background:color-mix(in srgb, hsl(var(--surface)) 50%, transparent)}
.section-accent{background:linear-gradient(180deg,hsl(var(--background)),hsl(var(--surface)))}
.title{font-size:clamp(2rem,4vw,3rem);line-height:1.1;font-weight:800}
.subtitle{color:hsl(var(--muted-foreground));font-size:clamp(1rem,2vw,1.125rem)}
.grid{display:grid;gap:2rem}
.grid-3{grid-template-columns:repeat(1,minmax(0,1fr))}
@media(min-width:1024px){.grid-3{grid-template-columns:repeat(3,minmax(0,1fr))}}

/* Header/hero critical styles (inlined via PHP too) */
.hero{position:relative;padding-block:6rem}
.hero-bg{position:absolute;inset:0;background:radial-gradient(1200px 600px at 80% 0%,hsl(var(--brand-600) / .08),transparent), radial-gradient(800px 400px at 10% 60%,hsl(var(--brand-500) / .08),transparent)}
.hero-inner{position:relative}
.kpis{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem;margin-top:1rem}
.kpi{display:flex;align-items:center;gap:.75rem;border:1px solid hsl(var(--outline-variant));padding:1rem;border-radius:.75rem;background:color-mix(in srgb,hsl(var(--card)), transparent 40%)}

/* Simple toast */
#alwajeez-toast{position:fixed;inset-inline:auto 1rem;bottom:1rem;z-index:9999;display:none}
#alwajeez-toast .toast{padding:.75rem 1rem;border:1px solid hsl(var(--border));border-radius:.75rem;background:hsl(var(--card));box-shadow:0 10px 20px #00000022}

/* WooCommerce minimal alignment */
.woocommerce .products{display:grid;grid-template-columns:repeat(1,minmax(0,1fr));gap:1.5rem}
@media(min-width:768px){.woocommerce .products{grid-template-columns:repeat(3,minmax(0,1fr))}}
.woocommerce div.product{display:grid;gap:1.5rem}
.woocommerce .button{composes: btn from none;composes: btn-primary from none}

/* Forms */
input[type="email"],input[type="text"],input[type="search"],textarea{height:40px;width:100%;padding:.5rem .75rem;border:1px solid hsl(var(--border));border-radius:.5rem;background:hsl(var(--secondary));color:hsl(var(--foreground))}
input:focus,textarea:focus{outline:2px solid hsl(var(--ring) / .4)}

/* Footer */
.site-footer{border-top:1px solid hsl(var(--border));padding-block:3rem}
.site-footer .cols{display:grid;gap:2rem}
@media(min-width:1024px){.site-footer .cols{grid-template-columns:2fr 1fr 1fr 1fr}}