/* ==========================================================================
   Malkit's Sweets & Catering — Modern "Warm & Premium" theme
   Loaded LAST, after style.css, to refresh the 2019 template in place.
   Palette: deep maroon + saffron + gold on warm cream.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@500;600;700;800&family=Poppins:wght@300;400;500;600;700&display=swap');

:root {
  --maroon: #6b1414;
  --maroon-dark: #4d0e0e;
  --saffron: #e8871e;
  --saffron-light: #f4a83c;
  --gold: #c99a3b;
  --cream: #fdf7ef;
  --cream-2: #f7ecdd;
  --ink: #2b1d1a;
  --muted: #40352f;
  --white: #ffffff;
  --shadow-sm: 0 4px 14px rgba(43, 29, 26, 0.08);
  --shadow-md: 0 12px 30px rgba(43, 29, 26, 0.12);
  --shadow-lg: 0 22px 48px rgba(43, 29, 26, 0.18);
  --radius: 16px;
  --radius-lg: 22px;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --font-head: 'Playfair Display', Georgia, 'Times New Roman', serif;
  --font-body: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

/* ---------- Base typography ---------- */
body {
  font-family: var(--font-body);
  color: var(--ink);
  background-color: var(--cream);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6,
.section_title h3,
.contact-title,
.breadcam_text h1 {
  font-family: var(--font-head);
  color: var(--maroon);
  letter-spacing: 0.2px;
}

p { color: var(--muted); line-height: 1.85; }

/* Readability: force dark text on light content sections (the template
   uses #777/#999 at font-weight:300, too light on cream). Footer and
   dark-banner text are handled separately and NOT affected here. */
.section_title p,
.single_about_text p,
.single_about_text .about_text1,
.single_about_text .about_text2,
.contact-section p,
.contact-section .container p,
.service_area p,
.gallery_area p,
.order_area p,
.menu-section .menu-items p,
.list-group-item p,
.card-text,
.single_service p {
  color: var(--muted) !important;
  font-weight: 400 !important;
}

::selection { background: var(--saffron); color: #fff; }

a { transition: color .25s var(--ease); }

/* Inline text links within body copy — readable, with dark blue-purple hover */
.section_title p a,
.single_about_text a,
.gallery_area p a,
.order_area p a,
.menu-section p a {
  color: var(--maroon);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.section_title p a:hover,
.single_about_text a:hover,
.gallery_area p a:hover,
.order_area p a:hover,
.menu-section p a:hover {
  color: #261f4d; /* dark blue-purple */
}

/* Accent underline used under section titles */
.section_title h2,
.section_title h3 { position: relative; display: inline-block; padding-bottom: 18px; color: var(--maroon); }
.section_title h2::after,
.section_title h3::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  width: 70px;
  height: 4px;
  border-radius: 4px;
  background: linear-gradient(90deg, var(--saffron), var(--gold));
}
.section_title.white h2,
.section_title.white h3 { color: #fff; }
.section_title.white h2::after,
.section_title.white h3::after { background: linear-gradient(90deg, var(--saffron-light), var(--gold)); }
.section_title h2 { font-size: 34px; margin-bottom: 8px; }
.section_title p { font-size: 16px; }

/* ---------- Header / navigation ---------- */
.main-header-area {
  background: rgba(253, 247, 239, 0.9);
  backdrop-filter: saturate(140%) blur(8px);
  box-shadow: 0 2px 18px rgba(43, 29, 26, 0.06);
  transition: background .3s var(--ease), box-shadow .3s var(--ease);
}
#sticky-header.sticky {
  background: rgba(253, 247, 239, 0.97) !important;
  box-shadow: var(--shadow-sm) !important;
}
.mein_menu_list > li > a {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 15px;
  letter-spacing: .3px;
  text-transform: capitalize;
  color: var(--ink) !important;
  position: relative;
  padding: 12px 0 !important;
}
.mein_menu_list > li { margin: 0 20px; }

/* Keep the menu semibold + same font whether or not the header is sticky.
   The template's sticky rule (style.css:923) forces font-weight:350 /
   Josefin Sans at higher specificity, making it go thin on scroll. */
.main-header-area .main-menu ul li a,
.main-header-area.sticky .main-menu ul li a,
.mein_menu_list > li > a {
  font-family: var(--font-body) !important;
  font-weight: 600 !important;
  font-size: 15px !important;
}

/* Kill the old template's gray hover box (style.css:670 sets
   background #f0f0f0, border-radius, height:10px & text-shadow on hover) */
.mein_menu_list li a,
.mein_menu_list li:hover a,
.mein_menu_list > li > a,
.mein_menu_list > li > a:hover,
.mein_menu_list > li > a:focus,
.mein_menu_list > li.active > a {
  background: transparent !important;
  background-color: transparent !important;
  box-shadow: none !important;
  text-shadow: none !important;
  border-radius: 0 !important;
  height: auto !important;
}

/* Hide template's extra navy underline (::before) so only ours shows */
.mein_menu_list li a::before,
.header-area .main-header-area .main-menu ul li a::before {
  display: none !important;
}

.mein_menu_list > li > a::after {
  content: "";
  position: absolute;
  left: 0; bottom: 4px;
  width: 0; height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--saffron), var(--gold));
  transition: width .3s var(--ease);
}
.mein_menu_list > li > a:hover,
.mein_menu_list > li.active > a { color: var(--maroon) !important; }
.mein_menu_list > li > a:hover::after,
.mein_menu_list > li.active > a::after { width: 100%; }

/* ---------- Buttons ---------- */
.boxed_btn,
.boxed_btn_white,
.btn-primary,
.button,
.boxed-btn {
  font-family: var(--font-body) !important;
  font-weight: 600 !important;
  letter-spacing: .3px;
  border-radius: 50px !important;
  border: none !important;
  padding: 14px 34px !important;
  transition: transform .25s var(--ease), box-shadow .25s var(--ease), background .25s var(--ease) !important;
  box-shadow: 0 8px 20px rgba(107, 20, 20, 0.22);
}
.boxed_btn,
.btn-primary,
.button,
.boxed-btn,
.menu-section .btn-primary,
.btn.btn-primary {
  background: linear-gradient(135deg, var(--maroon), var(--maroon-dark)) !important;
  color: #fff !important;
}
.boxed_btn_white {
  background: linear-gradient(135deg, var(--saffron), var(--saffron-light)) !important;
  color: #fff !important;
}
.boxed_btn:hover,
.boxed_btn_white:hover,
.btn-primary:hover,
.button:hover,
.boxed-btn:hover,
.menu-section .btn-primary:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
  color: #fff !important;
}

/* ---------- Breadcrumb banners ---------- */
.breadcam_area { position: relative; }
.breadcam_area::before {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(77,14,14,.55), rgba(43,29,26,.65));
}
.breadcam_text { position: relative; z-index: 2; }
.breadcam_text h1 {
  color: #fff;
  font-weight: 700;
  font-size: 54px;
  text-shadow: 0 4px 24px rgba(0,0,0,.35);
}

/* ---------- Zigzag torn-edge separators ---------- */
/* Zigzag teeth are tinted the CREAM color of the content sections, so at
   each boundary the teeth read as the next (cream) section interlocking
   into the previous one (torn-paper merge) rather than a colored divider.
   Invisible where both sides are cream; visible over the dark banners/footer. */
.zigzag_bg_1::before,
.zigzag_bg_2::after {
  display: block !important;
  background-image: none !important;
  background: var(--cream) !important;
  -webkit-mask-image: url(../img/zigzag.svg);
  mask-image: url(../img/zigzag.svg);
  -webkit-mask-size: cover;
  mask-size: cover;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
}

/* ---------- Home: service tiles ---------- */
.single_service {
  background: #fff;
  border-radius: var(--radius);
  padding: 18px 18px 26px;
  box-shadow: var(--shadow-sm);
  transition: transform .35s var(--ease), box-shadow .35s var(--ease);
  height: 100%;
  border: 1px solid rgba(201, 154, 59, 0.14);
}
.single_service:hover { transform: translateY(-8px); box-shadow: var(--shadow-lg); }
.single_service .img-container {
  overflow: hidden;
  border-radius: 12px;
  aspect-ratio: 1 / 1;            /* uniform square frame */
}
.single_service .img-container img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;   /* fill the square, crop overflow */
  object-position: center !important;
  border-radius: 12px;
  transition: transform .5s var(--ease);
}
.single_service:hover .img-container img { transform: scale(1.06); }
.single_service h3, .single_service h4 { margin-top: 20px; font-size: 22px; color: var(--maroon); }
.single_service p { font-size: 15px; }
/* Dark navy card on hover with readable white text (image zoom handled below) */
.service_area .single_service:hover {
  background: #261f4d;
  border: 1px solid transparent;
}
.service_area .single_service:hover h3,
.service_area .single_service:hover h4 { color: #fff; }
.service_area .single_service:hover p { color: rgba(255, 255, 255, 0.85) !important; }
.service_area a, .service_area a:hover { text-decoration: none; }

/* ---------- Home: chef cards ---------- */
.single_chef {
  background: rgba(255,255,255,0.96);
  border-radius: var(--radius-lg);
  padding: 30px;
  box-shadow: var(--shadow-md);
  height: 100%;
  transition: transform .35s var(--ease);
}
.single_chef:hover { transform: translateY(-6px); }
.chef_info span {
  display: inline-block;
  color: var(--saffron);
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
  font-size: 13px;
  margin-bottom: 10px;
}
.chef_info .video_thumb img { border-radius: 12px; box-shadow: var(--shadow-sm); }
/* Chef section has no dark banner (banner-3 bg is commented out in the
   template), so the "white" title would be invisible on cream — make it dark. */
.chef_intro_area .section_title.white h3 { color: var(--maroon) !important; }
.chef_intro_area .section_title.white p { color: var(--muted) !important; }

/* ---------- Video area ---------- */
.video_tile iframe { border-radius: 14px; box-shadow: var(--shadow-md); }
.video_area .info_inner h2,
.video_area .info_inner h4 { color: #fff; font-size: 30px; }

/* ---------- About page ---------- */
.single_about_thumb img { border-radius: var(--radius-lg); box-shadow: var(--shadow-md); }
.single_about_text h2, .single_about_text h3 { font-size: 34px; line-height: 1.25; margin-bottom: 18px; color: var(--maroon); }

/* ---------- Services page cards ---------- */
.card {
  border: none !important;
  border-radius: var(--radius) !important;
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}
.card:hover { box-shadow: var(--shadow-lg) !important; }
.card-img-top {
  width: 100% !important;
  height: auto !important;
  aspect-ratio: 1 / 1;            /* uniform square */
  object-fit: cover !important;   /* crop to fill, no stretching */
  object-position: center !important;
  display: block;
}
.card-title { font-family: var(--font-head); color: var(--maroon); }

/* ---------- Menu page ---------- */
.menu-section { box-shadow: var(--shadow-sm) !important; border: 1px solid rgba(201,154,59,.14); }
.menu-section h1, .menu-section h2, .menu-section h3 { color: var(--maroon); font-family: var(--font-head); }
.list-group-item {
  border: none !important;
  border-bottom: 1px solid rgba(201,154,59,.16) !important;
  border-radius: 12px !important;
  margin-bottom: 10px;
  transition: background .25s var(--ease), transform .25s var(--ease);
}
.list-group-item:hover { background: var(--cream-2); transform: translateX(4px); }
.list-group-item h5 { font-family: var(--font-head); color: var(--maroon); margin-bottom: 4px; }
.list-group-item img { border-radius: 12px !important; }

/* ---------- Gallery page ---------- */
.gallery_area .tabs button,
.tabs .tab-button {
  background: #fff !important;
  color: var(--ink) !important;
  font-weight: 600;
  border: 1px solid rgba(201,154,59,.3) !important;
  box-shadow: var(--shadow-sm);
  padding: 10px 24px !important;
  margin: 6px !important;
}
.tabs button.active,
.tabs .tab-button.active {
  background: linear-gradient(135deg, var(--maroon), var(--maroon-dark)) !important;
  color: #fff !important;
  border-color: transparent !important;
}
.single_gallery { border-radius: 14px; box-shadow: var(--shadow-sm); }

/* ---------- Contact page ---------- */
.contact-section .form-control {
  border: 1.5px solid rgba(201,154,59,.35);
  border-radius: 12px;
  padding: 14px 16px;
  background: #fff;
  transition: border-color .25s var(--ease), box-shadow .25s var(--ease);
}
.contact-section .form-control:focus {
  border-color: var(--saffron);
  box-shadow: 0 0 0 4px rgba(232, 135, 30, 0.15);
  outline: none;
}
.contact-info__icon i { color: var(--saffron); }
.contact-info h3, .contact-info h3 a { color: var(--maroon); }

/* ---------- Footer ---------- */
.footer_area { background-color: var(--maroon-dark) !important; }
.footer-top { position: relative; }
.footer_widget .heading {
  color: #fff;
  font-family: var(--font-head);
  position: relative;
  padding-bottom: 14px;
  margin-bottom: 22px;
}
.footer_widget .heading::after {
  content: ""; position: absolute; left: 0; bottom: 0;
  width: 46px; height: 3px; border-radius: 3px;
  background: linear-gradient(90deg, var(--saffron), var(--gold));
}
.footer_widget ul li a,
.footer-content, .footer-content a { color: rgba(255,255,255,.82) !important; }
.footer_widget ul li a:hover { color: var(--saffron-light) !important; padding-left: 4px; }
.footer-text { color: rgba(255,255,255,.72); }
.social_links ul li a {
  display: inline-flex; align-items: center; justify-content: center;
  width: 42px; height: 42px; border-radius: 50%;
  background: rgba(255,255,255,.1);
  color: #fff !important;
  transition: transform .25s var(--ease), background .25s var(--ease);
}
.social_links ul li a:hover {
  background: linear-gradient(135deg, var(--saffron), var(--gold));
  transform: translateY(-3px);
}
#map { border-radius: 14px; overflow: hidden; box-shadow: var(--shadow-sm); }

/* ---------- Scroll-to-top ---------- */
#scrollUp {
  background: linear-gradient(135deg, var(--maroon), var(--maroon-dark)) !important;
  color: #fff !important;
  border-radius: 12px !important;
  box-shadow: var(--shadow-md);
}

/* ---------- Mobile menu (slicknav) ---------- */
.slicknav_menu { background: transparent; padding: 6px 0; }
.slicknav_btn { background: var(--maroon) !important; border-radius: 10px; }
.slicknav_nav { background: #fff; border-radius: 12px; box-shadow: var(--shadow-md); padding: 8px; }
.slicknav_nav a { color: var(--ink) !important; border-radius: 8px; }
.slicknav_nav a:hover { background: var(--cream-2) !important; color: var(--maroon) !important; }

/* ---------- Small screens ---------- */
@media (max-width: 767px) {
  .breadcam_text h1 { font-size: 38px; }
  .single_about_text h3 { font-size: 28px; }
  .section_title p { font-size: 15px; }
}