/*===================================================================
  NOOR E PANJAB — Royal Indian re-skin
  Single override layer loaded AFTER the Bistly template CSS.
  Re-skins every page (shared template classes) to a red/maroon/gold/
  cream palette with elegant serif display type. No JS, no new deps.
===================================================================*/

@import url("https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@500;600;700&display=swap");

/*--- Design tokens -------------------------------------------------*/
:root {
  --red: #c8202f;
  --maroon: #791c24;
  --burgundy: #4a1118;
  --gold: #d6a64f;
  --gold-soft: #e7c680;
  --ivory: #fff5e5;
  --cream: #f4e7d0;
  --charcoal: #211b19;

  /* Remap template vars so every existing rule inherits the palette */
  --primary-color: #d6a64f;        /* antique gold — accents, lines, borders */
  --primary-black-color: #791c24;  /* deep maroon — was blue */
  --heading-color: #4a1118;        /* burgundy headings on light sections */
  --text-color: #5b4a44;           /* warm charcoal body text */
  --gray-color: #fbf4e8;           /* warm card surface */
  --border-color: #e7d8bd;
  --rating-color: #d6a64f;

  --display-font: "Cormorant Garamond", "Marcellus", serif;
}

/*--- Base ----------------------------------------------------------*/
body.restaurant-website {
  background-color: var(--ivory);
  color: var(--text-color);
}

::-webkit-scrollbar-track { background: var(--cream); }
::-webkit-scrollbar-thumb { background-color: var(--maroon); }
::selection { background: var(--maroon); color: var(--ivory); }

/* Elegant serif for display headings; Marcellus stays for h3–h6 */
.hero-content h1,
.rs-about .big-text,
.section-title h2,
section.page-banner .page-content h1,
.bistly-about-sec .section-title h2 {
  font-family: var(--display-font);
  letter-spacing: 0.5px;
}

.preloader { background: var(--burgundy); }
.preloader .loader { border-top-color: var(--gold); }

/*--- Header --------------------------------------------------------*/
.transparent-header {
  background: linear-gradient(180deg, rgba(42, 9, 14, 0.92) 0%, rgba(42, 9, 14, 0.35) 100%);
  border-bottom: 1px solid rgba(214, 166, 79, 0.28);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
}
.header-area.sticky.header-one {
  background: var(--burgundy);
  border-bottom: 1px solid rgba(214, 166, 79, 0.4);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
}
.header-one .header-navigation .main-menu ul > li > a {
  color: var(--ivory);
  font-family: "Marcellus", serif;
  letter-spacing: 0.4px;
}
.header-one .header-navigation .main-menu ul > li:hover > a,
.header-one .header-navigation .main-menu ul > li > a:hover {
  color: var(--gold);
}
.header-navigation .navbar-toggler span { background-color: var(--gold); }

/*--- Buttons -------------------------------------------------------*/
.theme-btn {
  border-radius: 2px;
  letter-spacing: 0.14em;
}
.theme-btn.style-one {
  background: linear-gradient(135deg, var(--red) 0%, var(--maroon) 100%);
  color: var(--ivory);
  border: 1px solid var(--gold);
  box-shadow: 0 6px 18px rgba(74, 17, 24, 0.25);
}
.theme-btn.style-one:hover {
  background: var(--gold);
  color: var(--burgundy) !important; /* beat inline color= on hover */
  border-color: var(--gold);
  transform: translateY(-2px);
}
.theme-btn.style-two {
  border: 1px solid var(--gold);
  color: var(--gold);
  background: transparent;
}
.theme-btn.style-two:hover {
  background: var(--gold);
  border-color: var(--gold);
  color: var(--burgundy) !important; /* beat inline color= on hover */
  transform: translateY(-2px);
}

/*--- Sub-title + section title ornament ----------------------------*/
.sub-title {
  color: var(--maroon);
  font-family: "Marcellus", serif;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  font-size: 16px;
}
.sub-title:after, .sub-title:before { background-color: var(--gold); }
.text-white .sub-title,
.rs-enjoy-food .sub-title { color: var(--gold-soft) !important; }

/* gold diamond divider under centered section headings */
.section-title.text-center h2:after {
  content: "";
  display: block;
  width: 110px;
  height: 14px;
  margin: 20px auto 0;
  background:
    radial-gradient(circle, var(--gold) 0 4px, transparent 5px) center/14px 14px no-repeat,
    linear-gradient(90deg, transparent, var(--gold) 45%, var(--gold) 55%, transparent) center/100% 1px no-repeat;
}

/*--- Hero ----------------------------------------------------------*/
.rs-hero {
  background:
    radial-gradient(120% 120% at 50% 0%, rgba(120, 28, 36, 0.55), transparent 60%),
    linear-gradient(180deg, var(--burgundy) 0%, #360c12 100%);
}
.rs-hero:before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(60% 50% at 50% 100%, rgba(214, 166, 79, 0.12), transparent 70%);
  pointer-events: none;
}
.rs-hero .hero-image img {
  border: 3px solid rgba(214, 166, 79, 0.55);
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.45);
}
.hero-content h1 { color: var(--ivory); text-shadow: 0 2px 20px rgba(0,0,0,0.3); }
.hero-content p { color: rgba(255, 245, 229, 0.88); }
.bistly-counter-item .content h2 { color: var(--gold); }
.bistly-counter-item .content h2 i { color: var(--gold-soft); }
.bistly-counter-item .content p { color: rgba(255, 245, 229, 0.75); }

/*--- About section (cream) ----------------------------------------*/
.rs-about { background-color: var(--ivory); }
h3.abt-sub-title { color: var(--maroon); font-family: "Marcellus", serif; letter-spacing: 0.1em; }
.rs-about .big-text {
  background: linear-gradient(90deg, var(--maroon), var(--gold) 60%, var(--maroon));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: var(--maroon);
}
.rs-about .bistly-content-box h3 { color: var(--burgundy); }
.rs-about .bistly-image img { border: 3px solid rgba(214, 166, 79, 0.5); }
.author-sign h5 { color: var(--maroon); font-style: italic; }

/*--- Signature / Enjoy-food section (royal red) --------------------*/
.rs-enjoy-food {
  background:
    radial-gradient(90% 90% at 50% 0%, rgba(200, 32, 47, 0.35), transparent 55%),
    linear-gradient(180deg, var(--maroon) 0%, var(--burgundy) 100%);
  border-top: 2px solid var(--gold);
  border-bottom: 2px solid var(--gold);
}
.rs-enjoy-food .bistly-content-box h2 { color: var(--ivory); }
.rs-enjoy-food .bistly-content-box p { color: rgba(255, 245, 229, 0.85); }
.rs-enjoy-food .bistly-image img { border: 2px solid rgba(214, 166, 79, 0.45); }

/*--- Gallery -------------------------------------------------------*/
.rs-gallery { background-color: var(--ivory); }
.rs-gallery .section-title h2 { color: var(--burgundy); }
#lightgallery img, .gallery-slider .thumbnail img {
  border: 2px solid rgba(214, 166, 79, 0.4);
  transition: transform 0.4s ease, box-shadow 0.4s ease, border-color 0.4s ease;
}
#lightgallery a:hover img {
  transform: scale(1.03);
  border-color: var(--gold);
  box-shadow: 0 14px 30px rgba(74, 17, 24, 0.3);
}

/*--- Booking (maroon overlay) -------------------------------------*/
.rs-booking:after { background-color: rgba(74, 17, 24, 0.78); }
.rs-booking .section-title h2,
.rs-booking .bistly-content-box p { color: var(--ivory); }
.rs-booking .sub-title { color: var(--gold-soft) !important; }

/*--- Opening-time section (burgundy) ------------------------------*/
.rs-time-sec {
  background:
    linear-gradient(180deg, var(--burgundy) 0%, #350b11 100%);
}
.rs-time-sec .section-title h2 { color: var(--ivory); }
.rs-time-sec .opening-time-box {
  border: 1px solid rgba(214, 166, 79, 0.35);
  background: rgba(214, 166, 79, 0.06);
  border-radius: 4px;
}
.rs-time-sec .opening-time-box h3 { color: var(--gold); }
.rs-time-sec .opening-time-box ul li:not(:last-child) {
  border-bottom-color: rgba(214, 166, 79, 0.25);
}
.rs-time-sec .opening-time-box ul li span { color: var(--gold-soft); }

/*--- Inner page banner --------------------------------------------*/
section.page-banner.bg_cover:before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg, rgba(42, 9, 14, 0.82), rgba(74, 17, 24, 0.7));
}
section.page-banner .page-content h1 {
  color: var(--ivory);
  position: relative;
  display: inline-block;
}
section.page-banner .page-content h1:after {
  content: "";
  display: block;
  width: 120px;
  height: 2px;
  margin: 18px auto 0;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
}

/*--- About page ----------------------------------------------------*/
.bistly-about-sec { background-color: var(--ivory); }
.bistly-about-sec .section-title h2 { color: var(--burgundy); }
.bistly-about-sec .bistly-image img,
.bistly-about-sec .gallery-item .thumbnail img {
  border: 3px solid rgba(214, 166, 79, 0.45);
}
.bistly-about-sec .text-box { border-left: 3px solid var(--gold); padding-left: 20px; }

/*--- Contact page --------------------------------------------------*/
.bistly-contact-sec { background-color: var(--ivory); }
.bistly-contact-sec .section-title h2 { color: var(--burgundy); }
.contact-info-sec { background-color: var(--ivory); }
.contact-info-box {
  background-color: var(--gray-color);
  border: 1px solid var(--border-color) !important;
  border-radius: 6px;
  transition: transform 0.3s ease, box-shadow 0.3s ease, background-color 0.3s ease;
}
.contact-info-box:hover {
  transform: translateY(-6px);
  box-shadow: 0 18px 36px rgba(74, 17, 24, 0.18);
}
.contact-info-box .icon {
  background: linear-gradient(135deg, var(--red), var(--maroon));
  border: 2px solid var(--gold);
  color: var(--gold-soft);
}
.contact-info-box .content h3 { color: var(--burgundy); }
.contact-info-box .content a { color: var(--maroon); }
.contact-info-box .content a:hover { color: var(--gold); }
.bistly-open-box .content h4 { color: var(--maroon); }
.map-sec .map-box iframe,
.rs-time-sec .map-box iframe {
  border: 3px solid var(--gold) !important;
  border-radius: 4px;
}

/*--- Menu page (speisekarte) --------------------------------------*/
.noor-menu-intro { background-color: var(--ivory); }
.noor-menu-intro .section-title h2 { color: var(--burgundy); }
.noor-menu-grid { background-color: var(--ivory); }
.noor-cat-card {
  position: relative;
  display: block;
  height: 100%;
  background: var(--gray-color);
  border: 1px solid var(--border-color);
  border-radius: 6px;
  overflow: hidden;
  transition: transform 0.35s ease, box-shadow 0.35s ease;
}
.noor-cat-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 20px 40px rgba(74, 17, 24, 0.2);
}
.noor-cat-card .cat-thumb { overflow: hidden; aspect-ratio: 4 / 3; }
.noor-cat-card .cat-thumb img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}
.noor-cat-card:hover .cat-thumb img { transform: scale(1.06); }
.noor-cat-card .cat-body { padding: 24px 24px 28px; text-align: center; }
.noor-cat-card .cat-body h3 {
  color: var(--burgundy);
  font-family: var(--display-font);
  font-size: 30px;
  margin-bottom: 10px;
}
.noor-cat-card .cat-body p { color: var(--text-color); margin-bottom: 16px; }
.noor-cat-card .cat-link {
  color: var(--maroon);
  font-family: "Marcellus", serif;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-size: 14px;
}
.noor-cat-card .cat-link i { margin-left: 8px; transition: margin 0.3s ease; }
.noor-cat-card:hover .cat-link { color: var(--gold); }
.noor-cat-card:hover .cat-link i { margin-left: 14px; }

.noor-menu-cta {
  background:
    linear-gradient(rgba(74, 17, 24, 0.86), rgba(42, 9, 14, 0.9)),
    url(../img/booking-bg.jpg) center/cover no-repeat;
  border-top: 2px solid var(--gold);
  border-bottom: 2px solid var(--gold);
}
.noor-menu-cta h2 { color: var(--ivory); font-family: var(--display-font); }
.noor-menu-cta p { color: rgba(255, 245, 229, 0.85); }

/*--- Footer --------------------------------------------------------*/
.rs-footer {
  background:
    linear-gradient(180deg, var(--burgundy) 0%, var(--charcoal) 100%);
}
.footer-widget h4.widget-title {
  color: var(--gold);
  font-family: "Marcellus", serif;
  position: relative;
  padding-bottom: 12px;
}
.footer-widget h4.widget-title:after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 46px; height: 2px;
  background: var(--gold);
}
.footer-about-widget p,
.footer-widget .widget-content p { color: rgba(255, 245, 229, 0.72); }
.footer-nav-widget .widget-content ul li a:hover,
.footer-widget .widget-content a:hover { color: var(--gold); }
.copyright-area { border-top-color: rgba(214, 166, 79, 0.2); }
.copyright-area .copyright-link a:hover { color: var(--gold); }
.fixed-button-area {
  background: var(--burgundy);
  border-top: 4px solid var(--gold);
}

/*--- Motion / accessibility ---------------------------------------*/
@media (prefers-reduced-motion: reduce) {
  .theme-btn,
  .contact-info-box,
  .noor-cat-card,
  #lightgallery img,
  .noor-cat-card .cat-thumb img {
    transition: none !important;
  }
  .theme-btn:hover,
  .contact-info-box:hover,
  .noor-cat-card:hover { transform: none !important; }
}

/* keep inner-page banner text clear of the fixed header on small screens */
@media (max-width: 767.98px) {
  .section-title.text-center h2:after { width: 80px; }
}
