/* =====================================================================
   AQAR — Luxury Real-Estate Brand Identity
   Overlays style.css with a fresh palette & personality.

   Palette:
     Deep Teal #0A2540  (primary / headings — replaces navy)
     Champagne Gold #C9A96E (accent — replaces flat #F5B301)
     Soft Cream #FAF7F2  (section alternates)
     Warm White #FFFFFF
     Muted Sage #7A8C7E  (secondary text contrast)

   Font: Tajawal (Google Fonts) — elegant Arabic, feels premium.
   Special touches:
     • Gradient uses teal→midnight, not navy→navy
     • Icon plates are champagne gold, not lemon yellow
     • Heading rule is a 3px stroke, angled gradient, wider (80px)
     • Cards have a 1px warm-tint border instead of gray
     • Hero overlay is deeper (35%→70%) for drama
     • Logo mark uses teal+gold split
   ===================================================================== */

/* ── Import Tajawal ─────────────────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Tajawal:wght@400;500;700;800&display=swap');

/* ── Override Design Tokens ─────────────────────────────────────────── */
:root {
  /* Brand palette */
  --gold-500: #C9A96E;
  --gold-600: #B08D52;
  --gold-400: #DFC08A;
  --gold-100: #F6EED9;
  --gold-50:  #FBF7EE;
  --gold-ink: #7A5B25;

  --navy-900: #060F1C;
  --navy-800: #0A2540;   /* primary headings */
  --navy-700: #0D3057;
  --navy-600: #144070;
  --navy-500: #1E5288;

  --gray-50:  #FAF7F2;   /* warm cream sections */
  --gray-100: #F2EDE5;
  --gray-200: #E8E0D5;
  --gray-300: #D8CDBE;

  /* Semantic overrides */
  --color-surface-alt: var(--gray-50);
  --color-border:      var(--gray-200);
  --color-border-strong: var(--gray-300);
  --color-text-muted:  #5E6E62;
  --color-text-subtle: #7A8C7E;

  /* Gradients */
  --gradient-brand: linear-gradient(155deg, #0D3057 0%, #0A2540 52%, #06101E 100%);
  --gradient-gold:  linear-gradient(145deg, #DFC08A 0%, #C9A96E 100%);
  --gradient-gold-bright: linear-gradient(145deg, #EDD49E 0%, #D4B27A 100%);
  --gradient-sand:  linear-gradient(180deg, #FFFFFF 0%, #FAF7F2 100%);
  --gradient-sand-soft: linear-gradient(180deg, #FAF7F2 0%, #FFFFFF 100%);
  --overlay-photo:  linear-gradient(180deg, rgba(6,15,28,.35) 0%, rgba(6,15,28,.56) 50%, rgba(6,15,28,.72) 100%);

  /* Shadows — teal-tinted instead of pure navy */
  --shadow-gold:    0 6px 18px -4px rgba(201,169,110,.40);
  --shadow-gold-lg: 0 12px 30px -6px rgba(201,169,110,.55);

  /* Typography — Tajawal */
  --font-family: 'Tajawal', 'IBM Plex Sans Arabic', system-ui, -apple-system, sans-serif;

  /* Radii — slightly softer for a luxury feel */
  --radius-btn: 8px;
  --radius-sm:  8px;
  --radius-md:  12px;
  --radius-lg:  16px;
  --radius-xl:  22px;
}

/* ── Base overrides ─────────────────────────────────────────────────── */
::selection { background: var(--gold-500); color: #0A2540; }

/* ── Typography ─────────────────────────────────────────────────────── */
h1, h2, h3, h4, h5, h6 { font-family: var(--font-family); }

/* Wider, gradient gold rule */
.heading-rule::after {
  width: 80px;
  height: 3px;
  background: linear-gradient(90deg, var(--gold-500) 0%, var(--gold-400) 100%);
  border-radius: 2px;
}

/* Eyebrow: warm gold color */
.eyebrow { color: var(--gold-600); letter-spacing: .06em; font-size: 0.8rem; }
.section-dark .eyebrow, .hero-section .eyebrow { color: var(--gold-400); }

/* Stat number — teal not navy */
.stat-number { color: var(--navy-800); }

/* ── Buttons ────────────────────────────────────────────────────────── */
.btn-primary-custom {
  background: linear-gradient(145deg, var(--gold-400) 0%, var(--gold-500) 100%);
  color: #0A2540;
  box-shadow: 0 4px 14px -3px rgba(201,169,110,.5);
  border: none;
}
.btn-primary-custom:hover,
.btn-primary-custom:focus-visible {
  background: linear-gradient(145deg, var(--gold-500) 0%, var(--gold-600) 100%);
  color: #0A2540;
  box-shadow: 0 8px 22px -4px rgba(201,169,110,.6);
  transform: translateY(-2px);
}
.btn-secondary-custom { border-color: var(--gray-300); }
.btn-secondary-custom:hover, .btn-secondary-custom:focus-visible {
  border-color: var(--gold-500);
  background-color: var(--gold-50);
  color: var(--navy-800);
}

/* ── Topbar ─────────────────────────────────────────────────────────── */
.topbar {
  background: var(--navy-800);
  border-bottom: 1px solid rgba(255,255,255,.08);
  color: rgba(255,255,255,.65);
}
.topbar a { color: rgba(255,255,255,.8); }
.topbar a:hover { color: var(--gold-400); }
.topbar-social { color: rgba(255,255,255,.7); }
.topbar-social:hover { background: var(--gold-500); color: #0A2540; }

/* ── Header — glassmorphism ─────────────────────────────────────────── */
/* Genuinely see-through so page content and the hero read through the glass;
   saturate + a heavier blur keep navy nav text legible over whatever passes
   beneath. On scroll it firms up slightly for reading comfort. */
.site-header {
  background: rgba(255,255,255,.62);
  border-bottom: 1px solid rgba(201,169,110,.22);
  backdrop-filter: blur(18px) saturate(180%);
  -webkit-backdrop-filter: blur(18px) saturate(180%);
}
.site-header.is-scrolled {
  background: rgba(255,255,255,.86);
  backdrop-filter: blur(22px) saturate(180%);
  -webkit-backdrop-filter: blur(22px) saturate(180%);
  box-shadow: 0 4px 24px rgba(10,37,64,.10);
  border-bottom-color: rgba(201,169,110,.30);
}
/* Browsers without backdrop-filter would show near-transparent white with
   navy text over the hero photo — fall back to an opaque bar. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .site-header, .site-header.is-scrolled { background: rgba(255,255,255,.97); }
}
.site-header .nav-link-custom { color: var(--navy-800); }
.site-header .nav-link-custom::after { background: var(--gold-500); height: 2.5px; }

/* Quote button sits inside the nav row, on the same baseline as the links */
.site-header .nav-cta {
  padding: 11px 22px;
  font-size: var(--fs-ui);
  line-height: 1.2;
  white-space: nowrap;
}

/* Brand mark — teal with gold icon */
.brand-mark {
  background: var(--navy-800);
  color: var(--gold-500);
  box-shadow: 0 4px 12px rgba(10,37,64,.30);
  border-radius: 10px;
}

/* ── Hero ────────────────────────────────────────────────────────────── */
.hero-section {
  padding-block: 150px 110px;
  background: var(--gradient-brand);
}
/* Animated subtle grain overlay for drama */
.hero-section::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)' opacity='.04'/%3E%3C/svg%3E");
  background-size: 200px 200px;
  pointer-events: none;
  opacity: .5;
}
.hero-section .heading-rule::after { background: linear-gradient(90deg, var(--gold-400), var(--gold-500)); }

/* Floating pillar cards lifted over hero */
.hero-cards .card-float {
  border: 1px solid rgba(201,169,110,.18);
  box-shadow: 0 20px 50px rgba(10,37,64,.14), 0 4px 10px rgba(10,37,64,.06);
}

/* ── Icon plates ─────────────────────────────────────────────────────── */
.icon-3d {
  background: var(--gradient-gold);
  color: #0A2540;
  box-shadow:
    0 8px 18px -5px rgba(201,169,110,.5),
    inset 0 1px 0 rgba(255,255,255,.5),
    inset 0 -2px 6px rgba(120,80,20,.15);
  border-radius: 16px;
}
.icon-3d-soft {
  background: var(--gold-100);
  color: var(--gold-ink);
  box-shadow: none;
}
.card-custom:hover .icon-3d-soft {
  background: var(--gold-500);
  color: #0A2540;
  box-shadow: 0 6px 14px -4px rgba(201,169,110,.5);
}
.icon-3d-navy {
  background: linear-gradient(145deg, var(--navy-600) 0%, var(--navy-900) 100%);
  color: var(--gold-400);
}

/* ── Cards ───────────────────────────────────────────────────────────── */
.card-custom {
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-lg);
  box-shadow: 0 2px 8px rgba(10,37,64,.04), 0 6px 20px rgba(10,37,64,.04);
}
.card-custom:hover {
  border-color: rgba(201,169,110,.35);
  box-shadow: 0 8px 24px rgba(10,37,64,.10), 0 20px 40px rgba(10,37,64,.07);
}
/* Glass card — deeper teal backdrop */
.glass-card {
  background: rgba(255,255,255,.07);
  border: 1px solid rgba(201,169,110,.20);
  box-shadow: 0 8px 32px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.15);
}
.glass-card:hover { border-color: rgba(201,169,110,.5); }

/* ── Stepper ─────────────────────────────────────────────────────────── */
.stepper-horizontal::before {
  background: linear-gradient(90deg, var(--gold-500) 0%, var(--navy-500) 60%, var(--gray-200) 100%);
}
[dir="rtl"] .stepper-horizontal::before {
  background: linear-gradient(270deg, var(--gold-500) 0%, var(--navy-500) 60%, var(--gray-200) 100%);
}
.step-circle {
  background: linear-gradient(145deg, var(--navy-500), var(--navy-700));
  box-shadow: 0 8px 16px -5px rgba(10,37,64,.4), inset 0 1px 0 rgba(255,255,255,.20);
}
.step-item.active .step-circle {
  background: var(--gradient-gold);
  color: #0A2540;
  box-shadow: var(--shadow-gold-lg);
}
.step-item.completed .step-circle { background: linear-gradient(145deg, var(--navy-600), var(--navy-900)); }

/* ── Media cards (portfolio) ─────────────────────────────────────────── */
.media-card::after { background: var(--gold-500); height: 4px; }
.media-card__meta { color: var(--gold-400); }

/* ── Tag (blog category) ─────────────────────────────────────────────── */
.tag-soft {
  background: var(--gold-50);
  color: var(--gold-ink);
  border-radius: 6px;
  border: 1px solid rgba(201,169,110,.25);
}

/* ── Logo cells (partners) ───────────────────────────────────────────── */
.logo-cell {
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-md);
  color: var(--navy-700);
  font-weight: 700;
  font-size: 0.9rem;
}
.logo-cell:hover { border-color: var(--gold-500); box-shadow: 0 4px 16px rgba(201,169,110,.25); }

/* ── Avatar circle ───────────────────────────────────────────────────── */
.avatar-circle {
  background: var(--gradient-gold);
  color: #0A2540;
  box-shadow: 0 4px 12px rgba(201,169,110,.4);
}

/* ── Section dark ────────────────────────────────────────────────────── */
.section-dark { background: var(--gradient-brand); }

/* ── CTA Banner ──────────────────────────────────────────────────────── */
.cta-banner { background: var(--gradient-brand); }
/* Decorative gold circle blur behind CTA */
.cta-banner::before {
  content: "";
  position: absolute;
  width: 400px; height: 400px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(201,169,110,.18) 0%, transparent 70%);
  inset-inline-end: -80px;
  top: -100px;
  z-index: 1;
  pointer-events: none;
}

/* ── Footer ──────────────────────────────────────────────────────────── */
.site-footer { background: linear-gradient(180deg, #0A2540 0%, #060F1C 100%); }
.site-footer a:hover { color: var(--gold-400); }
.social-dot:hover { background: var(--gold-500); color: #0A2540; border-color: transparent; }

/* ── Admin sidebar ───────────────────────────────────────────────────── */
.admin-sidebar { background: linear-gradient(180deg, var(--navy-800) 0%, var(--navy-900) 100%); }
.admin-sidebar a.active {
  background: rgba(201,169,110,.15);
  color: var(--gold-400);
  box-shadow: inset 2px 0 0 var(--gold-500);
}
[dir="rtl"] .admin-sidebar a.active { box-shadow: inset -2px 0 0 var(--gold-500); }

/* ── Image tiles — teal variants ─────────────────────────────────────── */
.tile-brand  { background: linear-gradient(155deg, #0D3057 0%, #0A2540 100%); }
.tile-accent { background: linear-gradient(155deg, #144070 0%, #0A2540 100%); }
.tile-deep   { background: linear-gradient(155deg, #0D3057 0%, #06101E 100%); }
.tile-alt    { background: linear-gradient(155deg, #1E5288 0%, #0A2540 100%); }

/* ── Wizard ──────────────────────────────────────────────────────────── */
.wizard-progress-step.done { background: var(--gold-500); }
.wizard-option:hover { border-color: var(--gold-500); box-shadow: 0 4px 16px rgba(201,169,110,.25); }
.wizard-option.selected { border-color: var(--gold-500); background: var(--gold-50); box-shadow: var(--shadow-gold); }

/* ── Focus ring ──────────────────────────────────────────────────────── */
:focus-visible { outline-color: var(--gold-500); }

/* ── Badge status ────────────────────────────────────────────────────── */
.badge-custom.status-new,
.badge-custom.status-pending,
.badge-custom.status-planning { background: var(--gold-100); color: var(--gold-ink); }

/* ── Dropdown overrides ──────────────────────────────────────────────── */
.dropdown-menu { border: 1px solid var(--gray-200); border-radius: var(--radius-md); box-shadow: 0 8px 28px rgba(10,37,64,.10); }
.dropdown-item:hover { background: var(--gold-50); color: var(--navy-800); }

/* ── Section sand (cream) ────────────────────────────────────────────── */
.section-sand { background: var(--gray-50); }

/* ── Partner logos ───────────────────────────────────────────────────────
   Centred as a group and uniformly sized. A flex row with wrapping centres
   a partial last row on its own axis, which a 12-column grid cannot do —
   an incomplete row in a grid stays flush to the start edge (this is the
   "logos hug one side" problem). Every cell is the same 120x80 box and any
   real logo is contained inside it, never stretched. */
.partner-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: stretch;
  gap: var(--sp-5);
}
.partner-row > * { flex: 0 0 auto; }

.logo-cell {
  position: relative;
  transition: all 260ms cubic-bezier(.16,1,.3,1);
  width: 160px;
  min-height: 96px;
  padding: var(--sp-4);
  display: grid;
  place-items: center;
  text-align: center;
}
.logo-cell img,
.logo-cell svg {
  max-width: 120px;
  max-height: 56px;
  width: auto;
  height: auto;
  object-fit: contain;
  display: block;
}
@media (max-width: 576px) {
  .logo-cell { width: 136px; min-height: 84px; }
}
.logo-cell::before {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  background: linear-gradient(145deg, var(--gold-400), transparent 60%);
  opacity: 0;
  transition: opacity 260ms ease;
}
.logo-cell:hover::before { opacity: 1; }

/* ── Article (blog post) ─────────────────────────────────────────────────
   A single reading measure drives the header, cover and body so they share
   one left/right edge, and the cover uses a fixed ratio so card and article
   media never depend on a hand-picked pixel height. */
.article-measure { max-width: 760px; }

.card-media,
.article-cover {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
}
.article-cover {
  border-radius: var(--radius-lg);
  box-shadow: 0 18px 40px rgba(10,37,64,.16);
  /* pull the cover up so it straddles the hero edge */
  margin-top: -64px;
  z-index: 3;
}
/* The tile fills the ratio box instead of imposing its own min-height */
.card-media .img-tile,
.article-cover .img-tile {
  position: absolute;
  inset: 0;
  min-height: 0;
  height: 100%;
  border-radius: inherit;
}
.card-media .img-tile { border-radius: 0; }

/* Body copy: longer measure, looser leading, real paragraph rhythm */
.article-body {
  font-size: 1.125rem;
  line-height: 1.9;
  color: var(--navy-700);
}
.article-body > br + br { content: ""; display: block; margin-top: .9em; }
.article-body h2,
.article-body h3 { margin-top: var(--sp-8); }
.article-body a { color: var(--color-accent-text); text-underline-offset: 3px; }

/* Inline CTA that closes the article */
.article-cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-5);
  padding: var(--sp-7);
  border-radius: var(--radius-lg);
  background: var(--gray-50);
  border: 1px solid var(--color-border);
}

@media (max-width: 768px) {
  .article-cover { margin-top: -32px; }
  .article-body { font-size: 1.0625rem; line-height: 1.8; }
  .article-cta { padding: var(--sp-5); }
}

/* ── Mobile ──────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  .hero-section { padding-block: 90px 70px; }
}

/* ═══════════════════════════════════════════════════════════════════════
   BRAND SIGNATURE TOUCHES — unique to AQAR
   ═══════════════════════════════════════════════════════════════════════ */

/* 1 · Animated partner-logo ticker ─────────────────────────────────── */
.logo-ticker-wrap {
  overflow: hidden;
  position: relative;
  padding-block: var(--sp-6);
  /* fade edges */
  mask-image: linear-gradient(to right, transparent 0%, #000 10%, #000 90%, transparent 100%);
  -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 10%, #000 90%, transparent 100%);
}
.logo-ticker {
  display: flex;
  gap: var(--sp-5);
  width: max-content;
  animation: ticker-scroll 28s linear infinite;
}
[dir="rtl"] .logo-ticker { animation-name: ticker-scroll-rtl; }
.logo-ticker:hover { animation-play-state: paused; }
.logo-ticker-item {
  flex-shrink: 0;
  min-width: 140px;
  height: 90px;
  display: grid;
  place-items: center;
  padding: var(--sp-4) var(--sp-6);
  border-radius: var(--radius-md);
  background: #FFFFFF;
  border: 1px solid var(--gray-200);
  color: var(--navy-700);
  font-weight: 700;
  font-size: 0.9rem;
  text-align: center;
  transition: border-color 260ms ease, box-shadow 260ms ease;
}
.logo-ticker-item:hover {
  border-color: var(--gold-500);
  box-shadow: 0 4px 16px rgba(201,169,110,.25);
}
@keyframes ticker-scroll {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}
@keyframes ticker-scroll-rtl {
  0%   { transform: translateX(0); }
  100% { transform: translateX(50%); }
}

/* 2 · Hero eyebrow pill ─────────────────────────────────────────────── */
.hero-pill {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  padding: 8px 18px;
  border-radius: var(--radius-full);
  border: 1px solid rgba(201,169,110,.35);
  background: rgba(201,169,110,.10);
  color: var(--gold-400);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: .06em;
  margin-bottom: var(--sp-4);
}
.hero-pill i { color: var(--gold-500); }

/* 3 · Section separator — gold gradient thin rule ───────────────────── */
.section-rule {
  height: 1px;
  background: linear-gradient(90deg, transparent 0%, var(--gold-400) 30%, var(--gold-300, #E8CCaO) 70%, transparent 100%);
  border: none;
  margin: 0;
  opacity: .45;
}

/* 4 · Floating accent ring behind stats icons ───────────────────────── */
.stat-col .icon-3d-soft {
  box-shadow: 0 0 0 8px var(--gold-50);
}

/* 5 · Project card — photo fallback with AI image ───────────────────── */
.project-photo-img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 600ms cubic-bezier(.16,1,.3,1);
}
.media-card:hover .project-photo-img { transform: scale(1.04); }

/* 6 · Testimonial avatar ring ───────────────────────────────────────── */
.avatar-circle {
  box-shadow: 0 0 0 3px var(--gold-100), 0 4px 12px rgba(201,169,110,.35);
}

/* 7 · Blog card hover — left gold stripe ────────────────────────────── */
.card-custom.blog-card {
  border-inline-start: 3px solid transparent;
  transition: border-color 260ms ease, transform 260ms ease, box-shadow 260ms ease;
}
.card-custom.blog-card:hover {
  border-inline-start-color: var(--gold-500);
}

/* 8 · Page hero inner (inner page title bar) ────────────────────────── */
.page-hero {
  background: var(--gradient-brand);
  padding-block: 80px 60px;
  color: #fff;
}

/* 9 · Form focus ring — champagne glow ──────────────────────────────── */
.form-control-custom:focus, .form-select-custom:focus {
  border-color: var(--gold-500);
  box-shadow: 0 0 0 4px rgba(201,169,110,.18);
}

/* 10 · Section accent bar at top of alternating sections ────────────── */
.section-sand::before,
.section-dark::before {
  content: "";
  display: block;
  height: 3px;
  background: linear-gradient(90deg, transparent 0%, var(--gold-500) 35%, var(--gold-400) 65%, transparent 100%);
  opacity: .4;
  margin-bottom: 0;
}

/* 11 · Smooth card border animation ─────────────────────────────────── */
.card-custom {
  transition: transform 280ms cubic-bezier(.16,1,.3,1),
              box-shadow 280ms cubic-bezier(.16,1,.3,1),
              border-color 280ms ease;
}