/*
  styles.css
  Extracted CSS from index.html. Contains base variables, layout, components and responsive tweaks.
  Arabic RTL friendly styles. 
*/
:root{
  --maroon: #8B0000; /* Primary */
  --gold: #FFD700;   /* Secondary */
  --beige: #FFF8F0;  /* Background */
  --dark: #3b2b2b;   /* Text */
  --white: #ffffff;
  --rounded: 1.2rem;
  --border-radius-lg: 1.5rem;
  --shadow-heavy: 0 20px 60px rgba(0,0,0,0.3);
  --transition-slow: 0.6s ease;
}
html,body{
  height:100%;
  background:var(--beige);
  color:var(--dark);
  font-family: 'Tajawal', 'Cairo', sans-serif;
  scroll-behavior: smooth; /* native smooth scroll fallback */
  margin: 0;
  padding: 0;
}

/* ---------- Loading Screen ---------- */
.loading-screen {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: var(--beige);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 9999;
  transition: opacity 0.5s ease, visibility 0.5s ease;
}

.loading-screen.hidden {
  opacity: 0;
  visibility: hidden;
}

.loading-content {
  text-align: center;
}

.loading-logo img {
  width: 150px;
  height: auto;
  margin-bottom: 2rem;
  animation: pulse 2s ease-in-out infinite;
}

.loading-spinner {
  width: 50px;
  height: 50px;
  border: 4px solid rgba(139, 0, 0, 0.1);
  border-top-color: var(--maroon);
  border-radius: 50%;
  margin: 0 auto 1rem;
  animation: spin 1s linear infinite;
}

.loading-screen p {
  color: var(--dark);
  font-size: 1.1rem;
  font-weight: 600;
}

@keyframes pulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.05); opacity: 0.8; }
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

/* ---------- Navbar ---------- */
.navbar{
  transition: background-color .35s, box-shadow .35s;
  z-index: 1050;
  /* make navbar visible (not transparent) by default */
  background: rgba(255,248,240,0.95);
}
.navbar.scrolled{
  /* slightly stronger shadow after scroll */
  background: rgba(255,248,240,1);
  box-shadow: 0 8px 26px rgba(0,0,0,.12);
}
.nav-link{ color:var(--dark) !important; font-weight:600; }

/* space between navigation links (RTL-friendly) */
.navbar-nav .nav-item{ margin-inline: 0.6rem; }

/* make nav links slightly larger and more prominent */
.navbar-nav .nav-link{ font-size:1rem; padding: .35rem .6rem; }

/* Navbar link hover (gold underline + lift) */
.navbar-nav .nav-link{ position:relative; display:inline-block; }
.navbar-nav .nav-link::after{
  content: '';
  position: absolute;
  bottom: -6px; left: 0;
  height: 3px; width: 0%;
  background: var(--gold);
  transition: width .28s ease;
  border-radius: 3px;
}
.navbar-nav .nav-link:hover::after{ width: 100%; }
.navbar-nav .nav-link:hover{ transform: translateY(-3px); color: var(--maroon) !important; }

/* ---------- Hero Section ---------- */
main {
  min-height: 100vh;
  display: flex;
  align-items: center;
  position: relative;
  color: #fff;
  background-image: url('assets/imgs/مقلوبة كميخ ـ الشعار copy (1).jpg');
  background-size: cover;
  background-position: center center;
  background-attachment: fixed; /* subtle parallax on desktop */
  padding-top: 80px;
}
/* overlay to darken image and tint with maroon/gold */
main::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(139,0,0,0.45) 0%, rgba(0,0,0,0.35) 100%);
  mix-blend-mode: multiply;
  z-index: 1;
}

main .container {
  position: relative;
  z-index: 2;
}

/* Hero Content */
.hero-content {
  display: grid;
  grid-template-columns: 65% 35%;
  gap: 3rem;
  align-items: center;
  width: 100%;
}

.hero-text {
  color: var(--white);
  z-index: 2;
  padding-inline-end: 2rem;
  text-align: right;
}

.hero-text h1 {
  font-size: 3.5rem;
  font-weight: 700;
  margin-bottom: 1.5rem;
  line-height: 1.2;
  animation: fadeInDown 0.8s ease-out;
}

.hero-text p {
  font-size: 1.25rem;
  margin-bottom: 2rem;
  opacity: 0;
  animation: fadeInUp 0.8s ease-out 0.2s forwards;
}

.hero-image {
  display: flex;
  justify-content: center;
  align-items: center;
}

.hero-image img {
  width: 100%;
  max-width: 460px;
  border-radius: var(--border-radius-lg);
  box-shadow: var(--shadow-heavy);
  transition: transform var(--transition-slow);
  animation: float 6s ease-in-out infinite;
  margin: 0 auto;
  display: block;
}

.hero-image img:hover {
  transform: scale(1.05);
}

.btn-primary {
  background: var(--gold);
  color: var(--dark);
  padding: 0.85rem 2rem;
  border-radius: 50px;
  text-decoration: none;
  font-weight: 700;
  display: inline-block;
  transition: all 0.3s ease;
  border: none;
  cursor: pointer;
}

.btn-primary:hover {
  background: #ffed4e;
  transform: translateY(-3px);
  box-shadow: 0 10px 25px rgba(0,0,0,0.2);
}

@keyframes float {
  0%, 100% { transform: translateY(0px); }
  50% { transform: translateY(-20px); }
}

@keyframes fadeInDown {
  from {
    opacity: 0;
    transform: translateY(-30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ---------- Section pattern background ---------- */
.pattern-bg{
  background-image: radial-gradient(circle at 10% 10%, rgba(139,0,0,0.03), transparent 10%), repeating-linear-gradient(-45deg, rgba(0,0,0,0.02) 0 2px, rgba(0,0,0,0) 2px 18px);
}

/* Sections need top padding to account for fixed header */
section {
  scroll-margin-top: 80px;
}

/* ---------- Cards & Menu ---------- */
.menu-card{
  border-radius: 1rem; overflow:hidden; transition: transform .28s ease, box-shadow .28s ease;
  cursor:pointer; position:relative;
  /* subtle base shadow so cards are clearly separated from background */
  box-shadow: 0 6px 14px rgba(0,0,0,0.06);
}
.menu-card img{ width:100%; height:200px; object-fit:cover; display:block; }
.menu-card:hover{ transform: translateY(-6px) scale(1.02); box-shadow: 0 20px 40px rgba(0,0,0,.14); }
.menu-name{ font-weight:700; color:var(--maroon); padding: .6rem 1rem; font-size:1.05rem; text-align:center; }

/* ---------- Branch & Delivery cards ---------- */
.branch-card, .delivery-card{ border-radius: .8rem; border: 1px solid rgba(0,0,0,.04); background:#fff; padding:1rem }

/* ---------- Footer ---------- */
footer{ padding:1.6rem 0; color:#5a403a; border-top:1px dashed rgba(0,0,0,.04); background:transparent }

/* ---------- Branch card shine effect ---------- */
.branch-card{ position:relative; overflow:hidden; }
.branch-card::before{
  content: '';
  position: absolute;
  top: 0; left: -50%;
  width: 60%; height: 100%;
  background: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.7) 50%, rgba(255,255,255,0) 100%);
  transform: skewX(-20deg) translateX(-120%);
  transition: none;
  pointer-events: none;
}
@keyframes shine-move {
  0% { transform: skewX(-20deg) translateX(-120%); }
  100% { transform: skewX(-20deg) translateX(220%); }
}
.branch-card:hover::before{
  animation: shine-move 0.9s ease-in-out forwards;
}


/* Responsive tweaks - apply to small screens and small tablets */
@media (max-width:768px){
  .hero-content {
    grid-template-columns: 1fr;
    gap: 2rem;
    text-align: center;
  }

  .hero-text {
    padding-inline-end: 0;
    text-align: center;
  }

  .hero-text h1 {
    font-size: 2.5rem;
  }

  .hero-text p {
    font-size: 1.1rem;
  }

  .hero-image img {
    max-width: 100%;
  }

  .menu-card img{ height:220px }
  /* Force removal of hero background image and apply warm gradient */
  main{
    background-image: none !important;
    background: linear-gradient(135deg, #f8dec1 0%, #fad488 50%, #f8c699 100%) !important;
    background-attachment: scroll !important;
    color: var(--dark) !important; /* switch hero text to dark on light gradient for readability */
  }
  /* hide overlay when there's no hero image */
  main::before{ display:none !important; }
  /* ensure hero content inherits dark color on mobile/tablet */
  .hero-content{ color: var(--dark) !important; }
}

/* Modal image styling */
.modal-img{ width:100%; height:320px; object-fit:cover; border-radius:.6rem }

/* small utility */
.muted-small{ color: rgba(0,0,0,.55); font-size:.95rem }

/*
  Override: prevent the hero's `.btn-outline-light` from getting a white background
  on hover (Bootstrap's default `.btn-outline-light:hover` sets background: #fff).
  Place this after other rules so it wins; uses !important to override the CDN Bootstrap styles.
*/
.hero-content .btn-outline-light,
.hero-content .btn-outline-light:focus,
.hero-content .btn-outline-light:hover{
  background-color: transparent !important;
  color: var(--maroon) !important;
  border-color: rgba(255,255,255,0.6) !important;
  box-shadow: none !important;
}

/* ---------------- Visual polish additions ---------------- */
/* GLightbox image sizing & rounded corners */
.glightbox img{ width:100%; height:220px; object-fit:cover; border-radius:.8rem; display:block }

/* Hero subtle entrance */
@keyframes hero-fade { from{ opacity:0; transform: translateY(8px);} to{ opacity:1; transform: translateY(0);} }
.hero-content{ animation: hero-fade .9s ease both; }

/* CTA icon spacing (logical for RTL) */
.btn-cta .bi{ vertical-align:middle; margin-inline-start:.5rem; font-size:1.05rem }

/* Card hover: gentle gold accent */
.menu-card{ border:1px solid transparent; transition: transform .28s ease, box-shadow .28s ease, border-color .28s ease }
.menu-card:hover{ border-color: rgba(255,215,0,0.14); }
.menu-card:focus{ outline: 3px solid rgba(255,215,0,0.10); outline-offset:4px }

/* Slightly smaller image on mobile to keep layout compact */
@media (max-width:768px){ .glightbox img, .menu-card img{ height:200px } }

/* Hero CTA subtle depth */
.hero-content .btn-cta{ box-shadow: 0 6px 20px rgba(0,0,0,0.08); transition: transform .18s ease, box-shadow .18s ease }
.hero-content .btn-cta:hover{ transform: translateY(-6px); box-shadow: 0 18px 36px rgba(0,0,0,0.12) }

/* Reduced motion: respect user preference */
@media (prefers-reduced-motion: reduce){
  .hero-content, .menu-card, .branch-card, .btn-rounded{ animation:none !important; transition:none !important }
}

/* End visual polish additions */