/* ================================================
   JewelBee3D — Global Styles (rtl-safe)
   File: css/style.css
================================================ */

/* -------- Brand tokens -------- */
:root{
  --violet:        #9974cc;
  --violet-700:    #6a4899;
  --lavender:      #E0C7F3;
  --lavender-200:  #f2e9fb;
  --darklavender:  #6a4899;   /* brand purple */
  --ink:           #222;
  --muted:         #6b7280;
  --surface:       #ffffff;
  --bg:            #f8f5f2;

  --radius:        1rem;
  --shadow-sm:     0 2px 10px rgba(0,0,0,.07);
  --shadow-md:     0 6px 24px rgba(0,0,0,.10);

  --header-h:      72px;
  --container:     1152px;
}


/* Smooth anchor jumps that stop under the sticky header */
:root{ --anchor-offset: 120px; }                 /* fallback */
html{
  scroll-behavior: smooth;
  scroll-padding-top: var(--anchor-offset);      /* core fix */
}
/* small breathing room below the header */
section[id]{ scroll-margin-top: 10px; }


/* -------- Reset & base -------- */
*{ box-sizing: border-box; }
html,body{ height:100%; }
body{
  margin:0;
  font-family:'Nunito',system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  color:var(--ink);
  background:var(--bg);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
img{ max-inline-size:100%; block-size:auto; display:block; }
a{ color:inherit; text-decoration:none; }
a:focus-visible, button:focus-visible, select:focus-visible, input:focus-visible, textarea:focus-visible{
  outline:2px solid var(--violet-700);
  outline-offset:2px;
}
.container{
  max-inline-size:var(--container);
  margin-inline:auto;
  padding-inline:1rem;
}

/* =================================================
   HEADER / NAV (header colored)
===================================================*/
header{
  position:sticky;
  inset-block-start:0;
  z-index:1000;
  background:var(--darklavender);   /* colored header */
  color:#fff;
  box-shadow:0 2px 12px rgba(0,0,0,.15);
}
header .logo{
  display:flex;
  align-items:center;
  min-block-size:var(--header-h);
  padding-inline:1rem;
}
.logo h1{
  font:600 2rem/1 'Playfair Display', serif;
  margin:0;
  letter-spacing:.5px;
  color:#fff;
}
.logo-link{ display:inline-flex; align-items:center; gap:.4rem; color:#fff; }

.logo-link{
  direction:ltr;
  unicode-bidi:isolate;
}

.logo-link:hover{ opacity:.95; }
.bee-logo{
  inline-size:80px; block-size:80px;
  object-fit:contain;
  filter: drop-shadow(0 2px 6px rgba(0,0,0,.18));
}

/* Nav wrapper */
nav{ position:relative; }

/* Top bar: menu + language (slightly darker for separation) */
.top-bar{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding-block:.5rem;
  padding-inline:1rem;
  background:#5b3f93;                 /* darker purple than header */
  color:#fff;
  border-block-start:1px solid rgba(255,255,255,.10);
  border-block-end:1px solid rgba(0,0,0,.15);
}

/* Toggle (shown only on mobile) */
.menu-toggle{
  font-size:2rem;
  line-height:1;
  background:none;
  border:none;
  color:#fff;
  cursor:pointer;
}

/* Language selector */
.language-switcher select{
  appearance:none;
  background:#fff;
  color:#333;
  font-size:.95rem;
  padding:.4rem .75rem;
  border:1px solid #e5e7eb;
  border-radius:.5rem;
}

/* Links area */
.nav-links{
  display:flex;
  gap:1rem;
  align-items:center;
  min-block-size:56px;
  padding-inline:1rem;
  background:#fff;                     /* white bar under purple header */
  border-block-end:1px solid #e5e7eb;
}
.nav-links a{
  padding:.6rem .9rem;
  border-radius:.6rem;
  color:#374151;
  transition:background .2s ease, color .2s ease, transform .15s ease;
  will-change:transform;
}
.nav-links a:hover{ background:var(--lavender-200); }
.nav-links a.active{
  background:var(--lavender);
  color:#111;
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.05);
}

/* Mobile: collapsible drawer (your JS animates height/opacity) */
@media (max-width: 992px){
  .nav-links{
    position:absolute;
    inset-inline:0;
    inset-block-start:100%;
    background:var(--surface);
    box-shadow:var(--shadow-md);
    border-radius:0 0 var(--radius) var(--radius);
    overflow:hidden;
    height:0;      /* closed */
    opacity:0;
    display:block; /* stack */
    padding:0;
  }
  .nav-links a{
    display:block;
    padding:1rem 1.25rem;
    border-block-end:1px solid #f1f5f9;
  }
  .nav-links a:last-child{ border-block-end:none; }
}

/* Desktop: show links row, hide toggle */
@media (min-width: 993px){
  .menu-toggle{ display:none; }
}

/* Disabled social links */
.disabled-link{ pointer-events:none; opacity:.45; cursor:default; }

/* =================================================
   HERO SLIDER
===================================================*/
.hero-slider{
  position:relative;
  overflow:hidden;
  background:
    radial-gradient(1200px 500px at 50% 0%, rgba(154,119,204,.12), transparent 70%),
    linear-gradient(180deg, #fff 0%, #faf7ff 60%, #f7f5fb 100%);
  border-block-end:1px solid #f1f5f9;
}
.hero-slider-inner{
  display:flex;
  transform:translateX(0%); /* JS controls transform + transition */
}
.hero-slide{
  flex:0 0 100%;
  min-block-size:clamp(320px, 45vh, 560px);
  display:grid;
  place-content:center;
  text-align:center;
  padding:3rem 1rem;
  gap:1rem;
}
.hero-slide h1{
  font:600 clamp(1.6rem, 3.5vw, 2.4rem)/1.2 'Playfair Display', serif;
  margin:0;
  color:#042f66;
}
.hero-slide p{
  max-inline-size:56ch;
  margin:0 auto;
  color:var(--muted);
  font-size:clamp(1rem, 1.3vw, 1.1rem);
}
.cta-buttons{
  display:inline-flex;
  gap:.75rem;
  justify-content:center;
  margin-block-start:1rem;
}
.cta-buttons a{
  background:var(--violet);
  color:#fff;
  padding:.75rem 1.1rem;
  border-radius:.8rem;
  font-weight:600;
  box-shadow:var(--shadow-sm);
}
.cta-buttons a:hover{ background:var(--violet-700); transform:translateY(-1px); }

/* =================================================
   STORYBOARD (Marquee of images)
===================================================*/
.storyboard-slider{
  position:relative;
  overflow:hidden;
  padding-block:1rem;
  background:#fff;
  border-block:1px solid #f1f5f9;
  -webkit-mask-image:linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
          mask-image:linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.storyboard-track{
  display:inline-flex;
  gap:.75rem;
  align-items:center;
  will-change:transform; /* animation set via JS */
}
.story-image{
  inline-size:clamp(160px, 26vw, 280px);
  block-size:clamp(110px, 18vw, 190px);
  border-radius:.8rem;
  overflow:hidden;
  box-shadow:var(--shadow-sm);
  background:#f8fafc;
  flex:0 0 auto;
}
.story-image img{
  inline-size:100%; block-size:100%;
  object-fit:cover;
  user-select:none; -webkit-user-drag:none;
}
@keyframes scroll-left{
  0%{ transform:translateX(0); }
  100%{ transform:translateX(-50%); } /* because images are duplicated */
}

/* =================================================
   FEATURED COLLECTIONS
===================================================*/
.featured-collections{ padding-block:clamp(2rem, 4vw, 3rem); }
.featured-collections h2{
  text-align:center;
  font:600 clamp(1.3rem, 2.6vw, 1.8rem)/1 'Playfair Display', serif;
  margin:0 0 1.25rem 0;
  color:#042f66;
}
.collection-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(220px, 1fr));
  gap:1rem;
  max-inline-size:var(--container);
  margin-inline:auto;
  padding-inline:1rem;
}
.collection-item{
  position:relative;
  border-radius:1rem;
  overflow:hidden;
  box-shadow:var(--shadow-sm);
  background:#fff;
  cursor:pointer;
  transform:translateZ(0);
}
.collection-item img{
  inline-size:100%;
  block-size:clamp(180px, 22vw, 260px);
  object-fit:cover;
  transition:transform .5s ease;
  user-select:none; -webkit-user-drag:none;
}
.collection-item:hover img{ transform:scale(1.06); }
.collection-item .overlay{
  position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(0,0,0,0) 40%, rgba(0,0,0,.55) 100%);
  display:grid; align-content:end;
  padding:.9rem;
}
.collection-title{
  color:#fff; font-weight:700;
  text-shadow:0 1px 8px rgba(0,0,0,.35);
}

/* =================================================
   CONTACT
===================================================*/
.contact-section{
  padding-block:clamp(2rem, 4vw, 3rem);
  background:#fff;
  border-block:1px solid #f1f5f9;
}
.contact-section h2{
  text-align:center;
  font:600 clamp(1.2rem, 2.2vw, 1.6rem)/1 'Playfair Display', serif;
  margin-block-end:1.25rem;
  color:#042f66;
}
.contact-form{
  max-inline-size:760px;
  margin-inline:auto;
  background:#fff;
  border:1px solid #eef2f7;
  border-radius:1rem;
  padding:1.25rem;
  box-shadow:var(--shadow-sm);
  display:grid; gap:.75rem;
}
.contact-form label{ font-size:.95rem; color:#374151; }
.contact-form input,
.contact-form textarea{
  width:100%;
  padding:.75rem .9rem;
  border:1px solid #e5e7eb;
  border-radius:.6rem;
  background:#fff;
  font:inherit;
}
.contact-form input:focus,
.contact-form textarea:focus{
  border-color:var(--violet);
  box-shadow:0 0 0 3px rgba(153,116,204,.15);
}
.contact-form button{
  justify-self:start;
  background:var(--violet);
  color:#fff;
  font-weight:700;
  border:none;
  padding:.8rem 1.2rem;
  border-radius:.8rem;
  cursor:pointer;
}
.contact-form button:hover{ background:var(--violet-700); }

/* =================================================
   FOOTER
===================================================*/
.site-footer{
  background:#0f172a;
  color:#cbd5e1;
  margin-block-start:2rem;
}
.footer-container{
  display:grid;
  grid-template-columns:1.2fr .9fr .9fr;
  gap:1.25rem;
  max-inline-size:var(--container);
  margin-inline:auto;
  padding:2rem 1rem 1rem;
}
.footer-logo{
  inline-size:56px; block-size:56px;
  object-fit:contain;
  margin-block-end:.6rem;
}
.footer-column h4{
  margin:0 0 .6rem 0;
  color:#fff; font-weight:700;
}
.footer-column p{ margin:0; }
.footer-column ul{ list-style:none; margin:0; padding:0; }
.footer-column li + li{ margin-block-start:.5rem; }
.footer-column a{ color:#cbd5e1; padding:.25rem 0; }
.footer-column a:hover{ color:#fff; }

.social-icons{
  display:inline-flex;
  gap:.8rem;
  flex-wrap:wrap;
}
.social-icons a{
  inline-size:42px; block-size:42px;
  display:grid; place-items:center;
  border-radius:50%;
  background:rgba(255,255,255,.08);
  transition:transform .15s ease, background .2s ease, color .2s ease;
}
.social-icons a:hover{
  transform:translateY(-1px);
  background:rgba(255,255,255,.16);
  color:#fff;
}
.site-footer hr{
  border:none;
  border-block-start:1px solid rgba(255,255,255,.08);
  margin:.5rem 0 0;
}
.footer-bottom{
  text-align:center;
  font-size:.9rem;
  color:#94a3b8;
  padding:.9rem 1rem 1.4rem;
}

/* Footer responsive */
@media (max-width:900px){
  .footer-container{ grid-template-columns:1fr; }
}

/* =================================================
   WHATSAPP FLOAT (rtl-safe)
===================================================*/
.whatsapp-float{
  position:fixed;
  inset-block-end:22px;   /* bottom */
  inset-inline-end:22px;  /* right in LTR, left in RTL */
  inline-size:56px; block-size:56px;
  display:grid; place-items:center;
  background:#25D366; color:#fff;
  border-radius:50%;
  box-shadow:var(--shadow-md);
  z-index:1100;
}
.whatsapp-float i{ font-size:1.4rem; }
.whatsapp-float:hover{ filter:brightness(.95); transform:translateY(-1px); }

/* =================================================
   UTILITIES
===================================================*/
[hidden]{ display:none !important; }

/* Reduce motion for users who prefer it */
@media (prefers-reduced-motion: reduce){
  *{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important; }
}

/* --- Neutralize RTL inside moving tracks only --- */
html[dir="rtl"] .hero-slider-inner,
html[dir="rtl"] .storyboard-track {
  direction: ltr;          /* layout left→right so translateX works */
  unicode-bidi: isolate;   /* don't affect surrounding bidi */
}

/* Keep slide text natural for Arabic/Persian */
html[dir="rtl"] .hero-slide {
  direction: rtl;          /* text direction back to RTL */
  text-align: center;      /* you already center text; keep it centered */
}

/* keep this to neutralize RTL only for the moving track */
html[dir="rtl"] .storyboard-track { direction:ltr; unicode-bidi:isolate; }

/* use flex and animate a named keyframe that uses a pixel distance */
.storyboard-track{
  display:flex;
  gap:.75rem;
  align-items:center;
  will-change: transform;
  animation: marquee var(--story-speed, 40s) linear infinite;
}

@keyframes marquee{
  from { transform: translateX(0); }
  to   { transform: translateX(calc(var(--half, 0px) * -1)); }
}