/* ==========================================================
   Hilal Grill - style.css (FULL UPDATED)
   - Modern, responsive, polished styling
   - Hero content centered, improved cards, reveals, hover
   ========================================================== */

/* --------- CSS VARIABLES --------- */
:root{
  --bg: #f8f8f8;
  --card: #ffffff;
  --accent: #b73318;
  --accent-2: #ff8a5b;
  --muted: #6b6b6b;
  --max: 1200px;
  --radius: 12px;
  --shadow-small: 0 8px 20px rgba(16,24,40,0.06);
  --shadow-large: 0 24px 60px rgba(16,24,40,0.10);
  --transition: 0.28s cubic-bezier(.22,.9,.34,1);
}

/* --------- Reset & base --------- */
* { box-sizing: border-box; }
html,body { height:100%; margin:0; padding:0; background:var(--bg); color:#111; font-family: Arial, Helvetica, sans-serif; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; line-height:1.6; }
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; height: auto; }

/* --------- Layout containers --------- */
.header-inner,
.container,
.hero-outer,
footer { max-width: var(--max); margin: 0 auto; padding: 18px 20px; }

/* --------- Header / Nav --------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 60;
  backdrop-filter: blur(6px);
  background: rgba(255,255,255,0.86);
  border-bottom: 1px solid rgba(0,0,0,0.06);
  transition: background 0.25s var(--transition), padding 0.25s var(--transition);
}

.site-header.scrolled {
  background: rgba(255,255,255,0.97);
  box-shadow: 0 6px 24px rgba(0,0,0,0.06);
}

.header-inner {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 18px;
  padding: 12px 20px;
}

.logo img { height:48px; width:auto; display:block; transition: transform .25s ease; }
.logo img:hover { transform: scale(1.03); }

.main-nav { display:flex; gap:22px; align-items:center; }
.main-nav a { color:#333; padding:8px 6px; border-radius:6px; position:relative; }
.main-nav a::after { content:''; position:absolute; left:0; bottom:-6px; height:2px; width:0; background:var(--accent); transition: width .28s ease; }
.main-nav a:hover::after { width:100%; }

.header-actions { display:flex; gap:12px; align-items:center; }

/* --------- Buttons --------- */
.cta, .cta.large, .floating-cta {
  background:var(--accent); color:#fff; padding:10px 14px; border-radius:10px; font-weight:700; display:inline-block; transition: transform .18s ease, box-shadow .18s ease;
}
.cta:hover, .cta.large:hover, .floating-cta:hover { transform:translateY(-4px); box-shadow:var(--shadow-small); background:#8c240f; }

/* outline button */
.btn-outline { border:1px solid rgba(0,0,0,0.08); padding:10px 14px; border-radius:10px; background:#fff; color:#222; transition: background .2s ease; }
.btn-outline:hover { background:#f3f3f3; }

/* --------- HERO (centered left column) --------- */
.hero-outer { margin: 40px auto; padding: 28px 20px; }
.hero-grid { display:grid; grid-template-columns: 1fr 420px; gap: 36px; align-items:center; }
.hero-left { display:flex; flex-direction:column; justify-content:center; align-items:center; text-align:center; gap:12px; }
.eyebrow { color:var(--muted); font-weight:600; letter-spacing: .4px; }
h1 { color:var(--accent); margin: 6px 0 10px; font-size:clamp(1.6rem, 2.2vw, 2.2rem); line-height:1.02; }
.lead { color:#333; font-size:1.05rem; max-width:720px; margin: 0 auto; }

/* hero CTAs */
.hero-ctas { display:flex; gap:12px; margin-top:12px; flex-wrap:wrap; justify-content:center; }

/* hero card (visual on right) */
.hero-right { display:flex; justify-content:center; align-items:center; }
.hero-card { width:420px; border-radius:var(--radius); overflow:hidden; background: linear-gradient(180deg, rgba(255,255,255,0.9), rgba(255,255,255,0.7)); box-shadow:var(--shadow-large); border:1px solid rgba(0,0,0,0.04); transition: transform .35s var(--transition), box-shadow .35s var(--transition); }
.hero-card:hover { transform: translateY(-6px); box-shadow: 0 40px 80px rgba(16,24,40,0.12); }
.hero-img { width:100%; height:320px; object-fit:cover; display:block; }
.hero-card-caption { padding:14px; text-align:left; background: #fff; }

/* --------- Feature boxes (2x2) --------- */
.grid-features { margin-top:22px; display:grid; grid-template-columns: repeat(2, 1fr); gap:16px; width:100%; max-width:760px; }
.feature { background:var(--card); padding:14px 16px; border-radius:12px; border-left:4px solid var(--accent); box-shadow:var(--shadow-small); font-weight:600; transition: transform var(--transition), box-shadow var(--transition); }
.feature:hover { transform:translateY(-6px); box-shadow:var(--shadow-large); }

/* --------- ABOUT / LONG-FORM SECTION (styled to fit environment) --------- */
.about-section { background:var(--card); padding:36px 28px; border-radius:16px; box-shadow:var(--shadow-small); margin-top:28px; }
.about-inner { max-width:880px; margin:0 auto; }
.about-section h2 { text-align:center; margin-bottom:18px; font-weight:800; color:var(--accent); background:linear-gradient(90deg,var(--accent),var(--accent-2)); -webkit-background-clip:text; color:transparent; }
.about-section h3 { text-align:center; font-weight:700; margin-top:20px; color:#333; }
.about-section p { color:#333; font-size:1.02rem; line-height:1.75; margin-bottom:14px; }
.styled-list { list-style:none; padding:0; margin:18px 0; display:block; }
.styled-list li { background:#fff7f5; padding:12px 14px; border-left:4px solid var(--accent); border-radius:10px; margin-bottom:10px; font-weight:600; color:#222; }

/* highlight box for dish list */
.highlight-box { background:#fff6f1; padding:18px; border-radius:12px; box-shadow:var(--shadow-small); margin:18px 0; }
.highlight-box p { margin:8px 0; font-weight:600; color:#333; }

/* --------- Grid of signature dishes (cards) --------- */
.grid { margin-top:22px; display:grid; grid-template-columns: repeat(2, 1fr); gap:30px; }
.card { background:var(--card); padding:18px; border-radius:16px; border:1px solid rgba(0,0,0,0.04); box-shadow:var(--shadow-small); transition: transform var(--transition), box-shadow var(--transition); position:relative; overflow:hidden; }
.card:hover { transform: translateY(-10px); box-shadow:var(--shadow-large); border-color: rgba(183,51,24,0.09); }
.image-wrap { height:320px; border-radius:12px; overflow:hidden; margin-bottom:12px; }
.image-wrap img { width:100%; height:100%; object-fit:cover; transition: transform .45s var(--transition); }
.card:hover .image-wrap img { transform: scale(1.06); }

.dish { font-size:1.15rem; font-weight:800; margin:8px 0; color: transparent; background: linear-gradient(90deg, var(--accent), var(--accent-2)); -webkit-background-clip:text; }
.small { color:var(--muted); font-size:0.98rem; margin-bottom:8px; }
.price { font-weight:800; color:var(--accent); margin-top:8px; }

/* decorative animated border on hover (subtle) */
.card::before { content:''; position:absolute; inset:0; border-radius:inherit; padding:2px; background: linear-gradient(120deg, rgba(183,51,24,0.06), rgba(255,168,135,0.06)); mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite:xor; mask-composite:exclude; opacity:0; transition: opacity .28s ease; }
.card:hover::before { opacity:1; }

/* --------- Specials grid --------- */
.specials-grid { display:grid; grid-template-columns: 1fr 1fr; gap:28px; margin-top:18px; }
.special-card { display:flex; gap:16px; align-items:center; background:var(--card); padding:14px; border-radius:14px; box-shadow:var(--shadow-small); transition:transform var(--transition); }
.special-card img { width:130px; height:86px; object-fit:cover; border-radius:10px; }
.special-card:hover { transform:translateY(-8px); box-shadow:var(--shadow-large); }

/* --------- CTA block --------- */
#cta-block { text-align:center; margin:36px 0; }
.cta.large { padding:14px 26px; font-size:1.05rem; }

/* --------- FAQ grid --------- */
.faq-grid { display:grid; grid-template-columns: repeat(3, 1fr); gap:18px; margin-top:18px; }
.faq-item { background:var(--card); padding:14px; border-radius:12px; box-shadow:var(--shadow-small); }

/* --------- Footer and floating CTA --------- */
footer { padding:28px 20px; text-align:center; color:var(--muted); }
.floating-cta { position:fixed; right:18px; bottom:18px; background:var(--accent); color:#fff; padding:12px 16px; border-radius:14px; box-shadow:var(--shadow-large); font-weight:700; z-index:70; transition: transform .18s ease; animation: pulse 3s infinite ease-in-out; }
.floating-cta:hover { animation:none; transform:translateY(-6px); }

/* subtle pulse */
@keyframes pulse { 0%{transform:scale(1)} 50%{transform:scale(1.06)} 100%{transform:scale(1)} }

/* --------- Reveal animation classes --------- */
.reveal { opacity:0; transform:translateY(12px); transition: opacity .7s ease, transform .7s cubic-bezier(.22,.9,.34,1); }
.reveal.visible { opacity:1; transform:none; }

/* --------- Responsive rules --------- */
@media (max-width: 980px) {
  .hero-grid { grid-template-columns: 1fr; gap:22px; }
  .hero-right { order:-1; display:flex; justify-content:center; }
  .hero-card { width:100%; }
  .grid { grid-template-columns: 1fr; }
  .specials-grid { grid-template-columns: 1fr; }
  .faq-grid { grid-template-columns: 1fr; }
  .grid-features { grid-template-columns: 1fr; max-width:100%; }
  .main-nav { display:none; } /* optionally hide nav on small screens - consider mobile menu */
  .header-inner { padding:10px 14px; }
}

/* smaller mobile adjustments */
@media (max-width: 520px) {
  .image-wrap { height: 220px; }
  .hero-img { height:220px; }
  .logo img { height:40px; }
  .hero-left { padding: 6px 8px; }
  .about-section { padding: 20px; }
}

/* --------- Utility --------- */
.container h1 { text-align:center; }