/*
Theme Name: Bayut Ajmal
Theme URI: https://bayutajmal.com/
Author: Bayut Ajmal Studio
Author URI: https://bayutajmal.com/
Description: A premium, editorial WordPress theme for Bayut Ajmal interior design — Arabic-first, RTL, performance-tuned, fully custom (no page-builder dependency). All content from the existing install renders unchanged.
Version: 1.3.19
Requires at least: 6.0
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: bayut-ajmal
Tags: interior-design, rtl-language-support, custom-menu, custom-logo, threaded-comments, translation-ready, full-width-template
*/

/* Final overrides loaded after /assets/css/. */

.top-strip {
  background-color: #0f0d09 !important;
  background-image: linear-gradient(90deg, rgba(193,139,98,.2), transparent 30%, transparent 70%, rgba(91,96,72,.16)) !important;
  background-size: 100% 100% !important;
  background-position: 0 0 !important;
}

.top-strip::before {
  content: "" !important;
  position: absolute !important;
  inset-inline: 0 !important;
  top: 0 !important;
  height: 44% !important;
  pointer-events: none !important;
  background:
    repeating-linear-gradient(90deg, rgba(250,246,238,.08) 0 1px, transparent 1px 84px),
    radial-gradient(circle at 2px 2px, rgba(229,199,168,.18) 1.2px, transparent 1.6px),
    linear-gradient(135deg, rgba(193,139,98,.18) 0 1px, transparent 1px 22px),
    linear-gradient(45deg, rgba(250,246,238,.08) 0 1px, transparent 1px 22px),
    linear-gradient(180deg, rgba(250,246,238,.14), rgba(250,246,238,.02) 55%, transparent) !important;
  background-size: auto, 18px 18px, 44px 44px, 44px 44px, 100% 100% !important;
  background-position: 0 0, 0 0, 0 0, 22px 22px, 0 0 !important;
  opacity: 1 !important;
}

.hero__stats .hero__stat strong {
  font-family: 'Cormorant Garamond', 'Marcellus', Georgia, serif !important;
  font-size: clamp(4.75rem, 7vw, 7.25rem) !important;
  line-height: .78 !important;
  font-weight: 500 !important;
}

.hero__stats .hero__stat strong sup {
  font-size: .42em !important;
  margin-inline-start: 8px !important;
  margin-block-end: .08em !important;
}

.hero__stats .hero__stat .stats__digit {
  height: 1em !important;
}

.hero__stats {
  display: none !important;
}

.hero-logo-art {
  position: absolute;
  z-index: 2;
  inset-block-start: 17%;
  right: clamp(24px, 6vw, 92px);
  left: auto;
  width: clamp(220px, 30vw, 480px);
  height: auto;
  opacity: 0;
  pointer-events: none;
  filter: drop-shadow(0 18px 42px rgba(0,0,0,.42));
  transform: translate3d(0, 0, 0);
}

.is-rtl .hero-logo-art,
html[lang^="ar"] .hero-logo-art,
html[dir="rtl"] .hero-logo-art {
  right: auto;
  left: clamp(24px, 6vw, 92px);
}
html[lang^="en"] .hero-logo-art,
html[dir="ltr"] .hero-logo-art {
  right: clamp(24px, 6vw, 92px);
  left: auto;
}

.hero-logo-art__mark {
  stroke-width: 14;
  filter: url(#heroLogoGlow);
}

.hero-logo-art__line {
  stroke-dasharray: 720;
  stroke-dashoffset: 720;
}

.hero-logo-art__sun {
  opacity: 0;
  transform-origin: 292px 52px;
}

.hero-logo-art__dots {
  opacity: 0;
}

.hero-logo-art.is-playing {
  animation: heroLogoOverlayFade 5.8s ease-out 1 forwards;
}

.hero-logo-art.is-playing .hero-logo-art__line {
  animation: heroLogoDraw 5.8s cubic-bezier(.2,.86,.22,1) 1 forwards;
}

.hero-logo-art.is-playing .hero-logo-art__sun {
  animation: heroLogoSun 5.8s cubic-bezier(.2,.86,.22,1) 1 forwards;
  animation-delay: 4.15s;
}

.hero-logo-art.is-playing .hero-logo-art__dots {
  animation: heroLogoDots 5.8s cubic-bezier(.2,.86,.22,1) 1 forwards;
  animation-delay: 4.8s;
}

.hero-logo-art.is-playing .hero-logo-art__line--base { animation-delay: .2s; }
.hero-logo-art.is-playing .hero-logo-art__line--curve { animation-delay: 1.15s; }
.hero-logo-art.is-playing .hero-logo-art__line--curl { animation-delay: 2.1s; }
.hero-logo-art.is-playing .hero-logo-art__line--roof { animation-delay: 3.05s; }
.hero-logo-art.is-playing .hero-logo-art__line--main { animation-delay: 0s; }

@media (max-width: 768px) {
  .hero-logo-art.is-playing .hero-logo-art__sun { animation-delay: 3.75s; }
  .hero-logo-art.is-playing .hero-logo-art__dots { animation-delay: 4.3s; }
}

@keyframes heroLogoDraw {
  0% { stroke-dashoffset: 720; opacity: 0; }
  20% { opacity: .52; }
  52% { stroke-dashoffset: 250; opacity: .84; }
  70% { stroke-dashoffset: 0; opacity: .92; }
  88% { opacity: .56; }
  100% { stroke-dashoffset: 0; opacity: 0; }
}

@keyframes heroLogoSun {
  0%, 32% { opacity: 0; transform: scale(.72) rotate(-14deg); }
  54% { opacity: .64; transform: scale(.9) rotate(-5deg); }
  74% { opacity: .88; transform: scale(1) rotate(0deg); }
  90% { opacity: .35; transform: scale(1.06) rotate(8deg); }
  100% { opacity: 0; transform: scale(1.1) rotate(14deg); }
}

@keyframes heroLogoDots {
  0%, 42% { opacity: 0; transform: translateY(9px); }
  66% { opacity: .62; transform: translateY(2px); }
  82% { opacity: .86; transform: translateY(0); }
  94% { opacity: .34; transform: translateY(-3px); }
  100% { opacity: 0; transform: translateY(-7px); }
}

@keyframes heroLogoOverlayFade {
  0% { opacity: .05; }
  24% { opacity: .15; }
  58% { opacity: .24; }
  84% { opacity: .14; }
  100% { opacity: 0; }
}

.hero__container {
  justify-content: center !important;
  padding-bottom: 24px !important;
}

.hero__copy {
  margin-block-start: 0 !important;
  transform: translateY(-172px);
}

@media (max-width: 768px) {
  .hero-logo-art {
    inset-block-start: 14%;
    width: clamp(170px, 45vw, 260px);
    opacity: .16;
  }

  .hero__container {
    justify-content: center !important;
    padding-bottom: 34px !important;
  }

  .hero__copy {
    transform: translateY(-104px);
  }
}

@media (max-width: 1024px) {
  .hero__stats .hero__stat strong {
    font-size: clamp(3.35rem, 6vw, 5rem) !important;
  }
}

@media (max-width: 768px) {
  .hero__stats .hero__stat strong {
    font-size: clamp(2.45rem, 11vw, 3.6rem) !important;
  }
}