/*
Theme Name: Urban Assala
Theme URI: https://urban-ksa.com
Author: Urban Assala Team
Author URI: https://urban-ksa.com
Description: قالب عربان الأصالة - شركة إدارة الفعاليات والضيافة الفاخرة في المملكة العربية السعودية. يجمع بين الأصالة العربية والتصميم الحديث.
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: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: urban-assala
Tags: rtl-language, arabic, events, hospitality, luxury, dark, one-page, responsive
*/

/* ─── Brand Design Tokens ─── */
:root {
  /* Official URBAN Identity Guide Colors */
  --green:        #114232;   /* Official Dark Green */
  --green-muted:  #0D3828;
  --green-light:  #1A5C3A;
  --copper:       #af6447;   /* Official Bronze/Copper */
  --copper-dark:  #8a4e38;
  --copper-light: #faad7a;   /* Official Light Bronze */
  --gold:         #c8893a;
  --gold-light:   #e8b896;
  --cream:        #F8F4EF;
  --off-white:    #F2EDE8;
  --charcoal:     #414042;   /* Official Dark Gray */
  --white:        #FFFFFF;
}

/* ─── Reset ─── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  font-family: 'Cairo', 'Lato', sans-serif;
  background: var(--cream);
  color: var(--charcoal);
  overflow-x: hidden;
  direction: rtl;
}

body.lang-en { direction: ltr; }

img { max-width: 100%; height: auto; display: block; }
a { text-decoration: none; color: inherit; }
button { cursor: pointer; font-family: inherit; }
ul { list-style: none; }

/* ─── Layout ─── */
.ua-container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 1.5rem;
}
@media (min-width: 640px)  { .ua-container { padding: 0 2rem; } }
@media (min-width: 1024px) { .ua-container { padding: 0 3rem; } }

.ua-section { padding: 5rem 0; }
@media (min-width: 768px) { .ua-section { padding: 7rem 0; } }

/* ─── Typography ─── */
.ua-section-label {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--copper);
  font-family: 'Lato', sans-serif;
}

.ua-section-title {
  font-size: clamp(28px, 3.5vw, 44px);
  font-weight: 700;
  line-height: 1.25;
  color: var(--green);
  font-family: 'Cairo', sans-serif;
  margin: 0.75rem 0 1rem;
}

.ua-section-title .accent { color: var(--copper); }

.ua-copper-text {
  background: linear-gradient(135deg, var(--copper) 0%, var(--gold-light) 50%, var(--copper) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ─── Buttons ─── */
.ua-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 28px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 700;
  font-family: 'Cairo', sans-serif;
  letter-spacing: 0.5px;
  cursor: pointer;
  border: none;
  text-decoration: none;
  transition: all 0.2s cubic-bezier(0.23, 1, 0.32, 1);
}

.ua-btn-primary {
  background: linear-gradient(135deg, var(--copper) 0%, var(--copper-dark) 100%);
  color: white;
  box-shadow: 0 4px 16px rgba(211,153,115,0.35);
}
.ua-btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(211,153,115,0.5);
  background: linear-gradient(135deg, var(--copper-light) 0%, var(--copper) 100%);
  color: white;
}
.ua-btn-primary:active { transform: scale(0.97); }

.ua-btn-outline {
  background: transparent;
  color: var(--copper);
  border: 2px solid var(--copper);
}
.ua-btn-outline:hover {
  background: rgba(211,153,115,0.1);
  transform: translateY(-2px);
  color: var(--copper);
}

/* ─── Animations ─── */
@keyframes ua-fadeInUp {
  from { opacity: 0; transform: translateY(30px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes ua-fadeInDown {
  from { opacity: 0; transform: translateY(-20px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes ua-float {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-8px); }
}
@keyframes ua-countUp {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

.ua-reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.6s cubic-bezier(0.23,1,0.32,1),
              transform 0.6s cubic-bezier(0.23,1,0.32,1);
}
.ua-reveal.visible { opacity: 1; transform: translateY(0); }

/* ─── Scrollbar ─── */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: var(--cream); }
::-webkit-scrollbar-thumb { background: var(--copper); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--copper-dark); }

/* ─── Selection ─── */
::selection { background: rgba(211,153,115,0.25); color: var(--green); }

/* ─── Grid helpers ─── */
.ua-grid-2 { display: grid; grid-template-columns: 1fr; gap: 2rem; }
.ua-grid-3 { display: grid; grid-template-columns: 1fr; gap: 1.5rem; }
.ua-grid-4 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.5rem; }

@media (min-width: 768px) {
  .ua-grid-2 { grid-template-columns: repeat(2, 1fr); }
  .ua-grid-3 { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 1024px) {
  .ua-grid-4 { grid-template-columns: repeat(4, 1fr); }
}

/* ─── Form inputs ─── */
.ua-input {
  width: 100%;
  padding: 11px 14px;
  border-radius: 8px;
  border: 1.5px solid #E2D9D0;
  background: #FAFAF9;
  font-size: 14px;
  font-family: 'Cairo', sans-serif;
  color: var(--charcoal);
  transition: border-color 0.2s, box-shadow 0.2s;
  outline: none;
  appearance: none;
}
.ua-input:focus {
  border-color: var(--green);
  box-shadow: 0 0 0 3px rgba(10,51,33,0.08);
  background: white;
}
.ua-input::placeholder { color: #B0A8A0; }

/* ─── Utility ─── */
.ua-text-center { text-align: center; }
.ua-mt-2  { margin-top: 0.5rem; }
.ua-mt-4  { margin-top: 1rem; }
.ua-mt-6  { margin-top: 1.5rem; }
.ua-mt-8  { margin-top: 2rem; }
.ua-mb-4  { margin-bottom: 1rem; }
.ua-mb-6  { margin-bottom: 1.5rem; }
.ua-mb-8  { margin-bottom: 2rem; }
.ua-flex  { display: flex; align-items: center; }
.ua-gap-2 { gap: 0.5rem; }
.ua-gap-3 { gap: 0.75rem; }
.ua-gap-4 { gap: 1rem; }
.ua-hidden { display: none; }