/* ============================================================
   شركة الزاد العائلي — Al-Zad Al-Aaili
   Custom stylesheet (complements Tailwind CSS via CDN)
   ============================================================ */

:root{
  --olive-900:#0F2216;
  --olive-800:#16301E;
  --olive-600:#2A5133;
  --gold-500:#C8A24A;
  --gold-400:#D4B267;
  --cream:#F7F6F2;
}

html{ -webkit-text-size-adjust:100%; }
body{ overflow-x:hidden; }

/* Latin typography when the interface switches to English */
html[dir="ltr"] body{ font-family:'Inter','Tajawal',system-ui,sans-serif; }
html[dir="ltr"] .section-title,
html[dir="ltr"] .product-title{ font-family:'Playfair Display','Tajawal',serif; }

/* ---------- Scrollbar ---------- */
::-webkit-scrollbar{ width:10px; }
::-webkit-scrollbar-track{ background:#EDEDE7; }
::-webkit-scrollbar-thumb{ background:#3C6A45; border-radius:8px; }
::-webkit-scrollbar-thumb:hover{ background:#2A5133; }

/* ---------- Navigation ---------- */
.nav-link{
  position:relative;
  padding:.6rem .85rem;
  border-radius:.6rem;
  color:#2A5133;
  transition:color .25s ease, background-color .25s ease;
}
.nav-link::after{
  content:"";
  position:absolute;
  inset-inline: .85rem;
  bottom:.28rem;
  height:2px;
  border-radius:2px;
  background:linear-gradient(90deg,var(--gold-500),var(--gold-400));
  transform:scaleX(0);
  transform-origin:center;
  transition:transform .3s ease;
}
.nav-link:hover{ color:var(--olive-900); background:rgba(220,231,220,.5); }
.nav-link:hover::after,
.nav-link.active::after{ transform:scaleX(1); }
.nav-link.active{ color:var(--olive-900); }

.mobile-link{
  padding:.85rem .25rem;
  border-bottom:1px solid #EAF0EA;
  color:#2A5133;
  font-weight:600;
  transition:color .2s ease, padding-inline-start .2s ease;
}
.mobile-link:hover{ color:var(--gold-500); padding-inline-start:.6rem; }

#navbar.scrolled{ box-shadow:0 10px 30px -18px rgba(15,34,22,.4); background:rgba(247,246,242,.97); }
#navbar.scrolled #navInner{ height:4.25rem; }
#navbar.scrolled #navLogo{ height:2.6rem; }

/* ---------- Buttons ---------- */
.btn-gold{
  display:inline-flex; align-items:center; gap:.55rem;
  padding:.8rem 1.5rem; border-radius:.7rem;
  background:linear-gradient(135deg,#D4B267,#C8A24A 55%,#A9853A);
  color:#0F2216; font-weight:800; font-size:.95rem;
  box-shadow:0 12px 26px -14px rgba(169,133,58,.85);
  transition:transform .25s ease, box-shadow .25s ease, filter .25s ease;
}
.btn-gold:hover{ transform:translateY(-2px); box-shadow:0 18px 34px -14px rgba(169,133,58,.95); filter:brightness(1.05); }
.btn-gold:active{ transform:translateY(0); }

.btn-outline{
  display:inline-flex; align-items:center; gap:.55rem;
  padding:.8rem 1.5rem; border-radius:.7rem;
  border:2px solid var(--olive-600); color:var(--olive-800);
  font-weight:800; font-size:.95rem;
  transition:background-color .25s ease, color .25s ease, transform .25s ease;
}
.btn-outline:hover{ background:var(--olive-800); color:var(--cream); transform:translateY(-2px); }

.btn-ghost-light{
  display:inline-flex; align-items:center; gap:.55rem;
  padding:.8rem 1.5rem; border-radius:.7rem;
  border:1.5px solid rgba(255,255,255,.4); color:#fff;
  font-weight:700; font-size:.95rem;
  transition:background-color .25s ease, border-color .25s ease, transform .25s ease;
}
.btn-ghost-light:hover{ background:rgba(255,255,255,.12); border-color:var(--gold-400); transform:translateY(-2px); }

/* ---------- Section headings ---------- */
.section-eyebrow{
  display:inline-flex; align-items:center; gap:.6rem;
  font-size:.8rem; font-weight:800; letter-spacing:.14em;
  color:#A9853A; text-transform:uppercase;
}
.section-eyebrow::before{
  content:""; width:34px; height:2px; border-radius:2px;
  background:linear-gradient(90deg,transparent,var(--gold-500));
}
.section-eyebrow--light{ color:var(--gold-400); }
.section-eyebrow--light::before{ background:linear-gradient(90deg,transparent,var(--gold-400)); }

.section-title{
  margin-top:1rem;
  font-size:clamp(1.75rem,4vw,2.6rem);
  line-height:1.3; font-weight:800; color:var(--olive-800);
}

/* ---------- Hero ---------- */
#home h1,
#home p,
#home .hero-eyebrow{
  text-shadow:0 2px 16px rgba(6,18,11,.65), 0 1px 3px rgba(6,18,11,.5);
}

.hero-zoom{ animation:heroZoom 22s ease-in-out infinite alternate; }
@keyframes heroZoom{ from{ transform:scale(1.05) translateY(0); } to{ transform:scale(1.13) translateY(-1.2%); } }

/* ---------- Reveal on scroll ---------- */
.reveal{
  opacity:0; transform:translateY(26px);
  transition:opacity .8s cubic-bezier(.22,.61,.36,1), transform .8s cubic-bezier(.22,.61,.36,1);
  will-change:opacity,transform;
}
.reveal.is-visible{ opacity:1; transform:none; }
@media (prefers-reduced-motion:reduce){
  .reveal{ opacity:1; transform:none; transition:none; }
  .hero-zoom{ animation:none; }
}

/* ---------- Marquee ---------- */
.marquee{ position:relative; width:100%; overflow:hidden; }
.marquee::before,.marquee::after{
  content:""; position:absolute; top:0; bottom:0; width:90px; z-index:2; pointer-events:none;
}
.marquee::before{ left:0; background:linear-gradient(90deg,#16301E,transparent); }
.marquee::after{ right:0; background:linear-gradient(270deg,#16301E,transparent); }
.marquee-track{
  display:flex; align-items:center; gap:3.5rem; width:max-content;
  animation:marquee 38s linear infinite;
}
.marquee:hover .marquee-track{ animation-play-state:paused; }
@keyframes marquee{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }
.marquee-logo{
  height:44px; width:auto; object-fit:contain; opacity:.9;
  filter:grayscale(100%) brightness(1.9) contrast(.85);
  transition:filter .35s ease, transform .35s ease;
}
.marquee-logo--tall{ height:58px; }
.marquee-logo:hover{ filter:none; transform:scale(1.06); }

/* ---------- About ---------- */
.rounded-ts-lg{ border-top-left-radius:2.5rem; }
html[dir="ltr"] .rounded-ts-lg{ border-top-left-radius:0; border-top-right-radius:2.5rem; }

.feature-item{
  display:flex; align-items:flex-start; gap:.7rem;
  font-size:.95rem; font-weight:600; color:#1E3D26;
  line-height:1.6;
}
.feature-item svg{ margin-top:.15rem; flex-shrink:0; }

/* ---------- Product cards ---------- */
.product-card{
  display:flex; flex-direction:column;
  background:#fff; border:1px solid #E7EDE7; border-radius:1.25rem;
  overflow:hidden; box-shadow:0 18px 40px -30px rgba(15,34,22,.35);
  transition:transform .35s ease, box-shadow .35s ease, border-color .35s ease;
}
.product-card:hover{ transform:translateY(-7px); box-shadow:0 30px 60px -30px rgba(15,34,22,.5); border-color:#D4B267; }

.product-media{ position:relative; overflow:hidden; }
.product-media img{
  width:100%; height:230px; object-fit:cover; display:block;
  transition:transform .7s cubic-bezier(.22,.61,.36,1);
}
.product-card:hover .product-media img{ transform:scale(1.08); }

.product-tag{
  position:absolute; top:1rem; inset-inline-start:1rem;
  background:rgba(15,34,22,.85); color:#F7F6F2;
  font-size:.72rem; font-weight:800; letter-spacing:.08em;
  padding:.35rem .8rem; border-radius:999px; backdrop-filter:blur(4px);
}
.product-tag--gold{ background:linear-gradient(135deg,#D4B267,#A9853A); color:#0F2216; }

.product-body{ padding:1.5rem; display:flex; flex-direction:column; flex:1; }
.product-title{ font-size:1.2rem; font-weight:800; color:var(--olive-800); }
.product-desc{ margin-top:.6rem; font-size:.92rem; line-height:1.85; color:#5E8763; }

.spec-list{ margin-top:1.1rem; padding-top:1.1rem; border-top:1px dashed #DCE7DC; display:flex; flex-direction:column; gap:.6rem; }
.spec-list li{
  position:relative; padding-inline-start:1.5rem;
  font-size:.87rem; color:#2A5133; line-height:1.6;
}
.spec-list li::before{
  content:""; position:absolute; inset-inline-start:0; top:.42em;
  width:9px; height:9px; border-radius:2px; transform:rotate(45deg);
  background:linear-gradient(135deg,var(--gold-400),#A9853A);
}

.product-link{
  margin-top:auto; padding-top:1.3rem;
  display:inline-flex; align-items:center; gap:.45rem;
  font-size:.88rem; font-weight:800; color:#A9853A;
  transition:gap .25s ease, color .25s ease;
}
.product-link:hover{ gap:.8rem; color:#8A6B2C; }

/* ---------- Brand cards ---------- */
.brand-card{
  display:flex; flex-direction:column; align-items:center;
  background:#fff; border:1px solid #E7EDE7; border-radius:1.1rem;
  padding:1.5rem 1rem 1.25rem; text-align:center;
  box-shadow:0 14px 34px -28px rgba(15,34,22,.4);
  transition:transform .35s ease, box-shadow .35s ease, border-color .35s ease;
}
.brand-card:hover{ transform:translateY(-6px); border-color:#D4B267; box-shadow:0 26px 50px -28px rgba(15,34,22,.45); }

.brand-logo-wrap{
  width:100%; height:120px; display:flex; align-items:center; justify-content:center;
  background:#FBFAF7; border-radius:.8rem; overflow:hidden; padding:.75rem;
}
.brand-logo{
  max-height:88px; max-width:100%; width:auto; object-fit:contain;
  transition:transform .4s ease;
}
.brand-logo--tall{ max-height:100px; }
.brand-card:hover .brand-logo{ transform:scale(1.07); }

.brand-info{ margin-top:1rem; }
.brand-info h3{ font-size:.98rem; font-weight:800; color:var(--olive-800); }
.brand-info p{ margin-top:.4rem; font-size:.8rem; line-height:1.7; color:#5E8763; }

/* ---------- Halal cards ---------- */
.halal-card{
  background:rgba(255,255,255,.07);
  border:1px solid rgba(212,178,103,.28);
  border-radius:1rem; padding:1.25rem;
  transition:background-color .3s ease, border-color .3s ease, transform .3s ease;
}
.halal-card:hover{ background:rgba(255,255,255,.13); border-color:rgba(212,178,103,.6); transform:translateY(-4px); }

/* ---------- Steps & mini stats ---------- */
.step-num{
  flex-shrink:0;
  display:inline-flex; align-items:center; justify-content:center;
  width:44px; height:44px; border-radius:.75rem;
  background:linear-gradient(135deg,#F2F5F1,#DCE7DC);
  color:#A9853A; font-weight:800; font-size:.9rem;
  border:1px solid #DCE7DC;
}
.stat-mini{
  background:#F7F6F2; border:1px solid #E7EDE7; border-radius:1rem;
  padding:1rem .75rem; text-align:center;
}
.stat-mini p{ margin-top:.25rem; font-size:.78rem; color:#5E8763; font-weight:600; }

/* ---------- Contact ---------- */
.contact-card{
  display:flex; align-items:center; gap:1rem;
  background:#fff; border:1px solid #E7EDE7; border-radius:1rem;
  padding:1.1rem 1.25rem;
  box-shadow:0 12px 30px -26px rgba(15,34,22,.4);
  transition:transform .3s ease, border-color .3s ease, box-shadow .3s ease;
}
.contact-card:hover{ transform:translateY(-3px); border-color:#D4B267; box-shadow:0 20px 40px -26px rgba(15,34,22,.5); }

.contact-icon{
  flex-shrink:0;
  display:inline-flex; align-items:center; justify-content:center;
  width:44px; height:44px; border-radius:.75rem;
  background:#F2F5F1; color:var(--olive-600);
}
.contact-icon--wa{ background:rgba(37,211,102,.12); color:#1DA851; }

.form-input{
  width:100%;
  background:#FBFAF7; border:1px solid #DCE7DC; border-radius:.7rem;
  padding:.8rem 1rem; font-size:.92rem; color:#16301E;
  transition:border-color .25s ease, box-shadow .25s ease, background-color .25s ease;
}
.form-input::placeholder{ color:#9AB19E; }
.form-input:focus{
  outline:none; background:#fff; border-color:var(--gold-500);
  box-shadow:0 0 0 4px rgba(200,162,74,.16);
}
select.form-input{ appearance:none; background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%232A5133'%3E%3Cpath d='M7 10l5 5 5-5z'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:left 1rem center; background-size:18px; padding-inline-start:2.6rem; }
html[dir="ltr"] select.form-input{ background-position:right 1rem center; }

/* ---------- Footer ---------- */
.footer-title{ font-size:.95rem; font-weight:800; color:#fff; letter-spacing:.02em; }
.footer-link{ color:rgba(220,231,220,.8); transition:color .25s ease, padding-inline-start .25s ease; display:inline-block; }
.footer-link:hover{ color:var(--gold-400); padding-inline-start:.4rem; }

.social-btn{
  display:inline-flex; align-items:center; justify-content:center;
  width:40px; height:40px; border-radius:.65rem;
  background:rgba(255,255,255,.08); color:#DCE7DC;
  transition:background-color .3s ease, color .3s ease, transform .3s ease;
}
.social-btn:hover{ background:var(--gold-500); color:#0F2216; transform:translateY(-3px); }

#toTop{ display:none; }
#toTop.show{ display:inline-flex; }