/*
Theme Name: Alostaz
Theme URI: https://store.fastlightgames.com/
Author: 3laaelshekh
Author URI: https://store.fastlightgames.com/
Description: قالب ألعاب وتطبيقات عربي متجاوب مع جميع الأجهزة. يدعم الألعاب والتطبيقات مع نظام تصنيف متقدم، تصميم عصري وسريع، متوافق مع الجوال وسطح المكتب.
Version: 1.0.0
License: GPL v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: alostaz
Domain Path: /languages
Requires at least: 5.8
Tested up to: 6.4
Requires PHP: 7.4
Tags: games, mobile, arabic, rtl, responsive, gaming, entertainment, apps, two-columns, right-sidebar, custom-background, custom-colors, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready

Alostaz is a modern Arabic gaming theme designed for game and app websites. 
It features custom post types for games, advanced taxonomies, responsive design, 
and optimized performance for mobile devices.

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned with others.
*/

/* ==========================================================================
   TABLE OF CONTENTS:
   ==========================================================================
   
   1.0 CSS Reset and Normalize
   2.0 CSS Variables (Custom Properties)
   3.0 Base Styles
   4.0 Typography
   5.0 Layout
   6.0 Header & Navigation
   7.0 Content Area
   8.0 Sidebar
   9.0 Footer
   10.0 Game Specific Styles
   11.0 Responsive Design
   12.0 Utilities & Helper Classes
   
   ========================================================================== */

/* 1.0 CSS Reset and Normalize
   ========================================================================== */
/* 1.0 CSS Reset and Normalize
   ========================================================================== */
*,
*::before,
*::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }
body { margin: 0; }

img, svg { max-width: 100%; height: auto; display: block; }
a { color: inherit; }

/* 2.0 CSS Variables (Custom Properties)
   ========================================================================== */
:root{
  /* Modern palette */
  --primary-color: #2563eb;      /* Blue */
  --primary-dark:  #1d4ed8;
  --secondary-color:#f97316;     /* Orange */
  --dark-color:    #0f172a;      /* Slate */
  --gray-color:    #64748b;      /* Slate */
  --light-color:   #f1f5f9;      /* Light */
  --border-color:  rgba(15, 23, 42, .10);

  /* UI */
  --radius: 16px;
  --radius-sm: 12px;
  --shadow: 0 12px 30px rgba(0,0,0,.08);

  /* Typography */
  --font: "Cairo", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
}

/* 3.0 Base Styles
   ========================================================================== */
body{
  font-family: var(--font);
  color: var(--dark-color);
  background: #fff;
  line-height: 1.7;
}

.container{
  max-width: 1200px;
  margin: 0 auto;
  padding-left: 14px;
  padding-right: 14px;
}

/* Main spacing safety */
main{ display:block; }

/* Utilities */
.hidden{ display:none !important; }


/* =========================================================
   Alostaz Base Variables & Essentials
   Put this AFTER the Theme Header in style.css
========================================================= */

/* Reset بسيط */
*,
*::before,
*::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }
body { margin: 0; }

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

/* =========================================================
   CSS Variables (Modern, RTL-friendly)
========================================================= */
:root{
  /* Brand */
  --primary-color:   #2563eb;  /* Blue 600 */
  --primary-dark:    #1d4ed8;  /* Blue 700 */
  --secondary-color: #f97316;  /* Orange 500 */

  /* Text & surfaces */
  --dark-color:      #0f172a;  /* Slate 900 */
  --gray-color:      #64748b;  /* Slate 500 */
  --light-color:     #f1f5f9;  /* Slate 100 */
  --surface:         #ffffff;

  /* Borders & shadows */
  --border-color:    rgba(15, 23, 42, .10);
  --shadow-sm:       0 8px 18px rgba(0,0,0,.06);
  --shadow:          0 12px 30px rgba(0,0,0,.08);

  /* Radius */
  --radius-sm:       12px;
  --radius:          16px;
  --radius-lg:       20px;

  /* Typography */
  --font: "Cairo", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;

  /* Layout */
  --container: 1200px;
}

/* =========================================================
   Base styles
========================================================= */
body{
  font-family: var(--font);
  color: var(--dark-color);
  background: var(--surface);
  line-height: 1.7;
}

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

.container{
  max-width: var(--container);
  margin: 0 auto;
  padding-left: 14px;
  padding-right: 14px;
}

main{ display:block; }

/* Buttons default (اختياري مفيد لأن عندك cta-button وغيره) */
button, input, select, textarea{
  font-family: var(--font);
}




body {
  -webkit-animation: -amp-start 1s steps(1, end) 0s 1 normal both;
  -moz-animation: -amp-start 1s steps(1, end) 0s 1 normal both;
  -ms-animation: -amp-start 1s steps(1, end) 0s 1 normal both;
  animation: -amp-start 1s steps(1, end) 0s 1 normal both;
}

@-webkit-keyframes -amp-start {
  from { visibility: hidden; }
  to { visibility: visible; }
}

@-moz-keyframes -amp-start {
  from { visibility: hidden; }
  to { visibility: visible; }
}

@-ms-keyframes -amp-start {
  from { visibility: hidden; }
  to { visibility: visible; }
}

@-o-keyframes -amp-start {
  from { visibility: hidden; }
  to { visibility: visible; }
}

@keyframes -amp-start {
  from { visibility: hidden; }
  to { visibility: visible; }
}