/* ============================================================
   Lal Qila — "Royal Heritage" theme  (v2 — lighter + imagery)
   Loaded AFTER style.css on every page that carries body.royal.
   All imagery is inline SVG (Mughal arch, jali lattice, skyline,
   ornaments) — zero extra network requests, crisp at any size,
   no impact on SEO or load speed. Honours prefers-reduced-motion.
   ============================================================ */

.royal{
  --r-ivory:#FBF6EC;
  --r-cream:#F6ECD6;
  --r-white:#FFFFFF;
  --r-maroon:#7C1623;
  --r-maroon-deep:#5A0E18;
  --r-rust:#A8341F;
  --r-charcoal:#211710;
  --r-gold:#C8962E;
  --r-gold-light:#E6BD64;
  --r-gold-bright:#F4D793;
  --r-emerald:#1E6B57;
  --r-ink:#33261C;
  --r-ink-soft:#6E5A48;
  --r-line:rgba(200,150,46,.38);
  --r-shadow:0 16px 44px rgba(90,14,24,.16);

  /* Mughal cusped arch (hero watermark / section motif) */
  --r-arch:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='360' viewBox='0 0 300 360'%3E%3Cpath d='M20 360V150C20 70 80 20 150 20s130 50 130 130v210' fill='none' stroke='%23C8962E' stroke-width='6'/%3E%3Cpath d='M150 20c0-14 0-14 0-14m-95 60c20-30 55-46 95-46s75 16 95 46' fill='none' stroke='%23C8962E' stroke-width='5'/%3E%3Cpath d='M150 6l10 16h-20z' fill='%23C8962E'/%3E%3C/svg%3E");
  /* Jali lattice — 8-point star tile */
  --r-jali:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='44' height='44' viewBox='0 0 44 44'%3E%3Cg fill='none' stroke='%23C8962E' stroke-width='1.1'%3E%3Cpath d='M22 3l5.5 13.5L41 22l-13.5 5.5L22 41l-5.5-13.5L3 22l13.5-5.5z'/%3E%3Ccircle cx='22' cy='22' r='4'/%3E%3C/g%3E%3C/svg%3E");
}

.royal{background:var(--r-ivory);color:var(--r-ink)}
.royal h1,.royal h2,.royal h3,.royal h4{color:var(--r-maroon);letter-spacing:.2px}
/* NOTE: no blanket `.royal p` colour — it would override white text on the
   dark navbar/footer/stats/cta bands and hide it. Paragraphs inherit body
   colour on light sections; dark sections set their own light text below. */
.royal .section-subtitle{color:var(--r-ink-soft)}
.royal a{color:var(--r-maroon)}
.royal a:hover{color:var(--r-gold)}
.royal .gold-text{background:linear-gradient(95deg,var(--r-gold),var(--r-gold-bright) 50%,var(--r-gold));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:var(--r-gold)}

/* ---------------- Navbar (dark slim bar, gold) ---------------- */
.royal .navbar{background:rgba(33,23,16,.97);backdrop-filter:saturate(150%) blur(6px);border-bottom:2px solid var(--r-line);box-shadow:0 4px 20px rgba(0,0,0,.25)}
.royal .navbar.scrolled{background:rgba(26,18,12,.99)}
.royal .logo-text,.royal a.logo{color:var(--r-gold-light)}
.royal .logo-icon rect,.royal .logo-icon polygon{fill:var(--r-gold)}
.royal .logo-icon rect[fill="#FFF8F0"]{fill:var(--r-charcoal)}
.royal .nav-menu a,.royal .nav-link{color:#F3E7CF}
.royal .nav-menu a:hover,.royal .nav-link:hover,.royal .nav-link.active{color:var(--r-gold-light);border-bottom:2px solid var(--r-gold)}
.royal .cta-button,.royal .nav-cta{background:linear-gradient(135deg,var(--r-gold),var(--r-gold-light))!important;color:var(--r-maroon-deep)!important;font-weight:700;box-shadow:0 6px 18px rgba(200,150,46,.4)}
.royal .cta-button:hover{transform:translateY(-2px)}
.royal .hamburger span{background:var(--r-gold)}
@media(max-width:640px){.royal .nav-menu{background:var(--r-charcoal)}.royal .nav-menu li{border-bottom:1px solid rgba(200,150,46,.18)}}

/* ---------------- Ornament divider ---------------- */
.royal .ornament{display:flex;align-items:center;justify-content:center;gap:14px;margin:0 auto 1.6rem;max-width:300px;color:var(--r-gold)}
.royal .ornament::before,.royal .ornament::after{content:"";height:1px;flex:1;background:linear-gradient(90deg,transparent,var(--r-gold))}
.royal .ornament::after{background:linear-gradient(90deg,var(--r-gold),transparent)}

/* ============================================================
   HERO — bright warm sunset with gold arch + maroon skyline
   ============================================================ */
.royal .hero{
  margin-top:0;max-width:none;padding:0;position:relative;overflow:hidden;
  background:linear-gradient(160deg,#FCF7EC 0%,#FBEACB 48%,#F2D49A 100%)
}
.royal .hero::before{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:.12;
  background:var(--r-arch) no-repeat center 26%/clamp(360px,42vw,560px) auto
}
.royal .hero::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:96px;pointer-events:none;opacity:.92;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1200' height='96' viewBox='0 0 1200 96'%3E%3Cg fill='%235A0E18'%3E%3Crect x='0' y='56' width='1200' height='40'/%3E%3Cpath d='M90 56V30a20 20 0 0140 0v26zM150 56V36h10v20zM60 56V36h10v20z'/%3E%3Cpath d='M560 56V24c0-24 80-24 80 0v32zM600 2c9 0 9 16 0 16s-9-16 0-16zM520 56V34h10v22zM670 56V34h10v22z'/%3E%3Cpath d='M1040 56V30a18 18 0 0136 0v26zM1010 56V36h8v20zM1098 56V36h8v20z'/%3E%3Cpath d='M300 56V40c0-15 36-15 36 0v16zM860 56V40c0-15 36-15 36 0v16z'/%3E%3C/g%3E%3C/svg%3E") repeat-x bottom/auto 96px
}
.royal .hero-content{position:relative;z-index:2;max-width:1200px;margin:0 auto;padding:130px 2rem 140px;gap:3rem}
.royal .hero-tagline{color:var(--r-rust);letter-spacing:3px}
.royal .hero-title,.royal .hero h1{color:var(--r-maroon);text-shadow:0 1px 0 rgba(255,255,255,.4)}
.royal .hero-description{color:var(--r-ink)}
.royal .hero-buttons .btn-primary{background:linear-gradient(135deg,var(--r-maroon),var(--r-maroon-deep));color:#fff;border:none;box-shadow:0 10px 24px rgba(124,22,35,.32)}
.royal .hero-buttons .btn-primary:hover{transform:translateY(-3px)}
.royal .hero-buttons .btn-secondary{background:transparent;color:var(--r-maroon);border:2px solid var(--r-maroon)}
.royal .hero-buttons .btn-secondary:hover{background:var(--r-maroon);color:#fff}
.royal .hero-rule{height:3px;width:120px;margin:1.1rem 0 1.5rem;border-radius:2px;background:linear-gradient(90deg,var(--r-gold),var(--r-gold-bright),var(--r-gold));background-size:200% 100%;animation:rShimmer 3.5s linear infinite}
@keyframes rShimmer{0%{background-position:0 0}100%{background-position:200% 0}}

/* hero medallion */
.royal .orbit-ring{border:2px dashed rgba(124,22,35,.45)}
.royal .orbit-ring::after{content:"";position:absolute;inset:16px;border:1px solid rgba(200,150,46,.5);border-radius:50%}
.royal .center-text-large{color:var(--r-maroon)}
.royal .center-text-small{color:var(--r-ink-soft)}
.royal .sparkle{background:var(--r-gold);box-shadow:0 0 8px var(--r-gold-light)}

/* ============================================================
   PAGE HEADER (inner pages) — warm maroon band, jali overlay
   ============================================================ */
.royal .page-header{
  margin-top:0;padding:128px 2rem 54px;position:relative;border-bottom:3px solid var(--r-gold);
  background:linear-gradient(135deg,var(--r-maroon) 0%,var(--r-rust) 100%)
}
.royal .page-header::before{content:"";position:absolute;inset:0;opacity:.14;background:var(--r-jali) repeat;pointer-events:none}
.royal .page-header>*{position:relative;z-index:1}
.royal .page-header h1{color:#fff}
.royal .page-header p,.royal .page-header .subtitle,.royal .page-header .hero-tagline,.royal .page-header .article-meta{color:var(--r-gold-bright)}

/* ---------------- Section bands ---------------- */
.royal .stats-section{background:linear-gradient(135deg,var(--r-maroon),var(--r-maroon-deep));border-top:2px solid var(--r-line);border-bottom:2px solid var(--r-line);position:relative;overflow:hidden}
.royal .stats-section::before{content:"";position:absolute;inset:0;opacity:.10;background:var(--r-jali) repeat;pointer-events:none}
.royal .stats-section .stats-container{position:relative;z-index:1}
.royal .stat-value,.royal .stat-card h3{color:var(--r-gold-bright)}
.royal .why-choose-section{background:linear-gradient(180deg,#fff,var(--r-cream))}
.royal .menu-preview-section,.royal .faq-section,.royal .reviews-photos{background:var(--r-ivory)}
.royal .reviews-strip{background:var(--r-cream)}

/* Section heading flourish */
.royal .menu-preview-section h2,.royal .why-choose-section h2,.royal .faq-section h2,
.royal .values-section h2,.royal .reviews-strip h2,.royal .reviews-widget-section h2,
.royal .reviews-photos h2{position:relative}
.royal .menu-preview-section .container>h2::after,.royal .why-choose-section>.container>h2::after,
.royal .faq-section>.container>h2::after{content:"";display:block;width:74px;height:3px;margin:.7rem auto 0;background:linear-gradient(90deg,transparent,var(--r-gold),transparent)}

/* ---------------- Cards (shared across all pages) ---------------- */
.royal .menu-card,.royal .feature-card,.royal .value-card,.royal .contact-card,
.royal .blog-card,.royal .review-card,.royal .sidebar-widget{
  background:var(--r-white);border:1px solid var(--r-line);border-radius:14px;
  box-shadow:0 8px 22px rgba(124,22,35,.06);position:relative;overflow:hidden;
  transition:transform .35s cubic-bezier(.2,.7,.2,1),box-shadow .35s ease,border-color .35s ease
}
.royal .menu-card::before,.royal .feature-card::before,.royal .value-card::before,
.royal .contact-card::before,.royal .review-card::before{
  content:"";position:absolute;top:0;left:0;right:0;height:4px;
  background:linear-gradient(90deg,var(--r-gold),var(--r-gold-bright),var(--r-gold));
  transform:scaleX(0);transform-origin:left;transition:transform .4s ease
}
.royal .menu-card:hover,.royal .feature-card:hover,.royal .value-card:hover,
.royal .contact-card:hover,.royal .blog-card:hover,.royal .review-card:hover{
  transform:translateY(-8px);box-shadow:var(--r-shadow);border-color:var(--r-gold)
}
.royal .menu-card:hover::before,.royal .feature-card:hover::before,.royal .value-card:hover::before,
.royal .contact-card:hover::before,.royal .review-card:hover::before{transform:scaleX(1)}
.royal .menu-card h3,.royal .feature-card h3,.royal .value-card h3,.royal .contact-card h3{color:var(--r-maroon)}
.royal .menu-icon,.royal .feature-icon,.royal .value-icon{filter:drop-shadow(0 4px 8px rgba(200,150,46,.4))}
.royal .menu-link,.royal .read-more{color:var(--r-maroon);font-weight:600}
.royal .menu-link:hover,.royal .read-more:hover{color:var(--r-gold)}
.royal .blog-date,.royal .blog-tag,.royal .review-stars,.royal .rating-stars{color:var(--r-gold)}
.royal .review-card{border-top:4px solid var(--r-gold)}

/* ---------------- Buttons ---------------- */
.royal .btn-primary{background:var(--r-maroon);border-color:var(--r-maroon);color:#fff}
.royal .btn-primary:hover{background:var(--r-maroon-deep);border-color:var(--r-maroon-deep)}
.royal .btn-secondary{color:var(--r-maroon);border-color:var(--r-maroon)}
.royal .btn-secondary:hover{background:var(--r-maroon);color:#fff}
.royal .btn-gold,.royal .btn-cta{background:linear-gradient(135deg,var(--r-gold),var(--r-gold-light));color:var(--r-maroon-deep);border-color:var(--r-gold);font-weight:700}

/* ============================================================
   MENU PAGE
   ============================================================ */
.royal .menu-page{background:var(--r-ivory);padding-top:50px}
.royal .filter-tabs{display:flex;flex-wrap:wrap;gap:.55rem;justify-content:center;margin:0 auto 2.5rem;max-width:1000px}
.royal .filter-tab,.royal .menu-tab{
  background:#fff;border:1.5px solid var(--r-line);color:var(--r-maroon);
  padding:9px 18px;border-radius:999px;font-weight:600;font-size:.9rem;cursor:pointer;transition:all .25s ease;min-height:42px
}
.royal .filter-tab:hover,.royal .menu-tab:hover{border-color:var(--r-gold);background:#fff6e2;color:var(--r-maroon)}
.royal .filter-tab.active,.royal .menu-tab.active{background:linear-gradient(135deg,var(--r-maroon),var(--r-maroon-deep));color:var(--r-gold-bright);border-color:var(--r-maroon)}

.royal .menu-category{max-width:1140px;margin:0 auto 3rem}
.royal .menu-category>h2{text-align:center;font-size:2.1rem;margin-bottom:.3rem;color:var(--r-maroon);border:none;padding:0}
.royal .menu-category>h2::after{content:"";display:block;width:80px;height:3px;margin:.6rem auto 1.4rem;background:linear-gradient(90deg,transparent,var(--r-gold),transparent)}

.royal .menu-items{display:grid;grid-template-columns:repeat(auto-fill,minmax(310px,1fr));gap:1.25rem;align-items:stretch}

/* THE FIX: base style.css sets .menu-item{display:flex} which crammed
   name/description/price into columns. Force a clean vertical stack. */
.royal .menu-item{
  display:block;background:#fff;border:1px solid var(--r-line);border-left:4px solid var(--r-gold);
  border-radius:12px;padding:1.25rem 1.4rem;box-shadow:0 6px 18px rgba(124,22,35,.06);
  transition:transform .3s ease,box-shadow .3s ease,border-left-color .3s ease
}
.royal .menu-item:hover{transform:translateY(-4px);box-shadow:0 16px 32px rgba(124,22,35,.13);border-left-color:var(--r-maroon)}
.royal .menu-item h4{
  display:flex;justify-content:space-between;align-items:baseline;gap:.35rem 1rem;flex-wrap:wrap;
  color:var(--r-ink);font-size:1.14rem;line-height:1.3;margin:0 0 .45rem
}
.royal .menu-item h4 .menu-price{margin-left:auto;color:var(--r-maroon);font-weight:700;font-family:'Playfair Display',serif;font-size:1.05rem;white-space:nowrap}
.royal .menu-item p{color:var(--r-ink-soft);font-size:.92rem;line-height:1.6;margin:0}
.royal .menu-item .serves{display:inline-block;margin-top:.4rem;font-size:.7rem;letter-spacing:.6px;text-transform:uppercase;color:var(--r-emerald);font-weight:700}
.royal .menu-item .veg-badge{color:var(--r-emerald);font-weight:600;font-size:.82rem;white-space:nowrap}

/* dual-price karahi */
.royal .menu-item.dual-price .price-grid{display:flex;gap:.8rem;margin-top:1rem;flex-wrap:wrap}
.royal .price-grid .pg{flex:1;min-width:135px;display:flex;flex-direction:column;gap:.15rem;background:var(--r-cream);border:1px solid var(--r-line);border-radius:9px;padding:.55rem .8rem}
.royal .price-grid .pg .lbl{font-size:.68rem;text-transform:uppercase;letter-spacing:.5px;color:var(--r-ink-soft)}
.royal .price-grid .pg .amt{font-family:'Playfair Display',serif;font-weight:700;color:var(--r-maroon);font-size:1.18rem}

/* family feasts — premium dark gold-framed cards */
.royal #feasts .menu-items{grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
.royal .menu-item.feast-card{
  display:block;background:linear-gradient(165deg,#2C1B14,#5A0E18);color:#F7EAD2;
  border:1.5px solid var(--r-gold);border-left:1.5px solid var(--r-gold);padding:1.6rem;box-shadow:var(--r-shadow)
}
.royal .menu-item.feast-card:hover{transform:translateY(-6px);border-color:var(--r-gold-bright)}
.royal .feast-card h4{display:block;color:var(--r-gold-light);font-size:1.35rem;margin:0 0 .15rem}
.royal .feast-card .feast-serves{color:#EAD3A6;font-size:.78rem;text-transform:uppercase;letter-spacing:1px}
.royal .feast-card .feast-price{font-family:'Playfair Display',serif;font-size:2rem;color:#fff;margin:.45rem 0 .85rem}
.royal .feast-card ul{margin:0;padding:0;list-style:none}
.royal .feast-card li{color:#F1E4CC;font-size:.92rem;padding:.2rem 0 .2rem 1.35rem;position:relative}
.royal .feast-card li::before{content:"✦";position:absolute;left:0;color:var(--r-gold-light)}

/* ============================================================
   ABOUT / VALUES / CONTACT / BLOG specifics
   ============================================================ */
.royal .about-text h2,.royal .contact-intro h2,.royal .blog-post h2{color:var(--r-maroon)}
.royal .highlight-item{background:var(--r-cream);border-left:3px solid var(--r-gold)}
.royal .highlight-item strong{color:var(--r-maroon)}
.royal .rotating-ring{border-color:rgba(200,150,46,.5)}
.royal .ring-2{border-color:rgba(124,22,35,.28)}
.royal .center-content{box-shadow:0 10px 30px rgba(124,22,35,.15)}
.royal .center-number{color:var(--r-maroon)}
.royal .card-icon{color:var(--r-maroon)}
.royal .maps-container{border:2px solid var(--r-line);border-radius:14px}

.royal .blog-post{border:1px solid var(--r-line)}
.royal .blog-post .blog-lede{border-left:4px solid var(--r-gold);background:rgba(200,150,46,.07);color:var(--r-ink)}
.royal .blog-post .blog-list li::before{color:var(--r-gold)}
.royal .blog-post .blog-list li strong{color:var(--r-maroon)}
.royal .blog-faq{border-top:4px solid var(--r-gold)}
.royal .sidebar-widget h3,.royal .sidebar-widget h4{color:var(--r-maroon)}
.royal .cta-card{background:linear-gradient(160deg,#2C1B14,#5A0E18);border:1px solid var(--r-gold)}
.royal .cta-card h3{color:var(--r-gold-light)}
.royal .cta-phone{color:var(--r-gold-bright)!important}

/* ---------------- FAQ ---------------- */
.royal .faq-item{border:1px solid var(--r-line);box-shadow:0 6px 16px rgba(124,22,35,.05)}
.royal .faq-question{color:var(--r-maroon)}
.royal .faq-question:hover{background:var(--r-cream)}
.royal .faq-icon,.royal .faq-toggle{color:var(--r-gold)}
.royal .faq-answer{border-top:1px solid var(--r-line)}

/* ---------------- CTA banner ---------------- */
.royal .cta-banner{position:relative;overflow:hidden;color:#fff;border-top:2px solid var(--r-gold);border-bottom:2px solid var(--r-gold);background:linear-gradient(135deg,var(--r-maroon),var(--r-maroon-deep))}
.royal .cta-banner::before{content:"";position:absolute;inset:0;opacity:.12;background:var(--r-jali) repeat;pointer-events:none}
.royal .cta-banner>*{position:relative;z-index:1}
.royal .cta-banner h2{color:#fff}
.royal .cta-banner p{color:#F6EAD2}
.royal .cta-banner strong{color:var(--r-gold-bright)}
.royal .cta-banner .btn-white,.royal .cta-banner .btn-cta,.royal .cta-banner .btn-primary{background:linear-gradient(135deg,var(--r-gold),var(--r-gold-light));color:var(--r-maroon-deep);border-color:var(--r-gold);font-weight:700}

/* ---------------- Footer ---------------- */
.royal footer,.royal .footer{background:var(--r-charcoal);color:#E9DCC4;border-top:3px solid var(--r-gold);position:relative;overflow:hidden}
.royal footer::before,.royal .footer::before{content:"";position:absolute;inset:0;opacity:.06;background:var(--r-jali) repeat;pointer-events:none}
.royal .footer-container,.royal .footer-bottom{position:relative;z-index:1}
.royal footer h3,.royal .footer h3,.royal .footer-column h3,.royal .footer-section h3{color:var(--r-gold-light)}
.royal footer a,.royal .footer a{color:#E9DCC4}
.royal footer a:hover,.royal .footer a:hover{color:var(--r-gold-light)}
.royal .footer-bottom{border-top:1px solid rgba(200,150,46,.22)}

/* ============================================================
   SCROLL-REVEAL — reuses site's existing .animate-on-scroll hook
   ============================================================ */
.royal .animate-on-scroll{opacity:0;transform:translateY(26px);transition:opacity .7s ease,transform .7s cubic-bezier(.2,.7,.2,1)}
.royal .animate-on-scroll.animate-in{opacity:1;transform:none}
.royal .animate-on-scroll.d1{transition-delay:.08s}
.royal .animate-on-scroll.d2{transition-delay:.16s}
.royal .animate-on-scroll.d3{transition-delay:.24s}
.royal .animate-on-scroll.d4{transition-delay:.32s}
@media(prefers-reduced-motion:no-preference){
  .royal .animate-on-scroll{animation:rFailsafe 0s linear 2.5s forwards}
}
@keyframes rFailsafe{to{opacity:1;transform:none}}

@media(prefers-reduced-motion:reduce){
  .royal .animate-on-scroll{opacity:1!important;transform:none!important;transition:none!important}
  .royal .orbit-ring,.royal .food-emoji,.royal .sparkle,.royal .hero-rule,.royal .floating-item,.royal .rotating-ring{animation:none!important}
}

/* ---------------- Responsive ---------------- */
@media(max-width:1024px){.royal .hero-content{padding:115px 2rem 120px}}
@media(max-width:640px){
  .royal .hero-content{padding:92px 1.2rem 110px}
  .royal .page-header{padding:104px 1.2rem 42px}
  .royal .menu-items{grid-template-columns:1fr}
  .royal .menu-category>h2{font-size:1.7rem}
  .royal .filter-tabs{flex-direction:row}
  .royal .filter-tab,.royal .menu-tab{font-size:.82rem;padding:8px 14px}
}