/*
 * ═══════════════════════════════════════════════════════════════
 *  HONEY BEE THEME — Mubarak Foods  USER INTERFACE
 *  Mirrors the admin honey-theme.css design language on the
 *  public-facing site.  Only colour / visual overrides — no
 *  layout or spacing resets.
 *
 *  Palette (same as admin):
 *    Honey Gold    : #D4880A / #D4A017
 *    Amber         : #E8A020
 *    Orange Amber  : #D96226
 *    Golden Yellow : #F5C842
 *    Light Cream   : #FFF8E7
 *    Warm Cream    : #FDF3D0
 *    Dark Comb     : #7A4F00
 *    Bee Black     : #1A1200
 *    Wax White     : #FFFDF5
 *    Deep Brown    : #2C1A00
 * ═══════════════════════════════════════════════════════════════
 */

/* ── Google Fonts (same as admin) ── */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@600;700&family=Cormorant+Garamond:wght@600;700&display=swap');

/* ══════════════════════════════════════════════════════
   CSS CUSTOM PROPERTIES
══════════════════════════════════════════════════════ */
:root {
  --hu-gold:   #D4880A;
  --hu-amber:  #E8A020;
  --hu-yellow: #F5C842;
  --hu-orange: #D96226;
  --hu-light:  #FFF8E7;
  --hu-cream:  #FDF3D0;
  --hu-dark:   #7A4F00;
  --hu-black:  #1A1200;
  --hu-wax:    #FFFDF5;
  --hu-comb:   #B8752A;
  --hu-tan:    #C8860A;
  --hu-bee:    #2C1A00;
  --hu-deep:   #2a1200;
  --hu-rich:   #d4a017;
}

/* ══════════════════════════════════════════════════════
   GLOBAL BODY — warm honeycomb parchment background
   (replaces the plain body_bg.png tint slightly)
══════════════════════════════════════════════════════ */
body.main-layout {
  background-color: #1a0d00;
}

/* ══════════════════════════════════════════════════════
   BRAND LOCKUP — new professional font + always-visible
   colours on every scroll state, every screen size.
   Uses max specificity to win over style.css rules.
══════════════════════════════════════════════════════ */

/* Base: always-on brand text style */
.header .mf-brand .mf-brand-en {
  font-family: 'Playfair Display', 'Cormorant Garamond', Georgia, serif !important;
  font-size: 17px !important;
  font-weight: 700 !important;
  letter-spacing: 0.8px !important;
  text-transform: none !important;          /* Playfair looks better in title-case */
  color: #ffffff !important;
}

.header .mf-brand .mf-brand-ur {
  font-family: 'Noto Nastaliq Urdu', serif !important;
  color: #F5C842 !important;                /* honey yellow — same as admin sidebar brand */
}

/* Scrolled state on DESKTOP — keep it readable but warm, never black */
.header.scrolled .mf-brand .mf-brand-en {
  color: #2C1A00 !important;                /* deep warm brown, not black */
  text-shadow: none !important;
}

.header.scrolled .mf-brand .mf-brand-ur {
  color: #D4880A !important;                /* honey gold */
}

/* Hover: desktop scrolled */
.header.scrolled .mf-brand:hover .mf-brand-en {
  color: #D4880A !important;
}

.header.scrolled .mf-brand:hover .mf-brand-ur {
  color: #2C1A00 !important;
}

/* ── MOBILE (≤767px): override ALL scroll states ── */
/* The header gets a dark blurred background on mobile,
   so the text must always stay white/gold — never dark */
@media (max-width: 767px) {

  /* Not scrolled */
  .header .mf-brand .mf-brand-en {
    font-size: 15px !important;
    color: #ffffff !important;
  }

  .header .mf-brand .mf-brand-ur {
    color: #F5C842 !important;
  }

  /* Scrolled — background becomes rgba(30,10,0,0.96) dark brown,
     so white text is the only readable option */
  .header.scrolled .mf-brand .mf-brand-en {
    color: #ffffff !important;
    text-shadow: 0 1px 8px rgba(0,0,0,0.45) !important;
  }

  .header.scrolled .mf-brand .mf-brand-ur {
    color: #F5C842 !important;
  }

  /* Hover on mobile scrolled */
  .header.scrolled .mf-brand:hover .mf-brand-en {
    color: #F5C842 !important;
  }

  .header.scrolled .mf-brand:hover .mf-brand-ur {
    color: #ffffff !important;
  }

  /* Logo icon ring stays amber on mobile scroll */
  .header.scrolled .mf-brand .mf-brand-icon {
    background: rgba(245,200,66,0.12) !important;
    border-color: rgba(245,200,66,0.50) !important;
  }
}

/* ══════════════════════════════════════════════════════
   HEADER / NAVBAR  — honey chrome
══════════════════════════════════════════════════════ */

/* Transparent bar over hero: keep existing gradient/colour,
   add a subtle honey gold bottom line */
.header {
  border-bottom: 2px solid transparent;
  transition: border-color 0.35s ease, background 0.35s ease, box-shadow 0.35s ease;
}

/* Scrolled: white bar gets amber bottom border */
.header.scrolled {
  border-bottom-color: var(--hu-amber) !important;
  box-shadow: 0 2px 16px rgba(212,136,10,0.13) !important;
}

/* Active nav link pill */
.navbar-nav-list .nav-item.active .nav-link {
  background: rgba(212,136,10,0.15) !important;
  color: var(--hu-orange) !important;
  border-radius: 30px;
}

/* Nav link hover — consistent with admin link hover */
.navbar-nav-list .nav-item .nav-link:hover {
  color: var(--hu-orange) !important;
}

/* Mobile nav hover */
.mobile-nav ul li a:hover {
  color: var(--hu-yellow) !important;
}

/* ══════════════════════════════════════════════════════
   HERO SLIDER  — honey-tinted dark overlay & CTA
══════════════════════════════════════════════════════ */

/* The full_bg wrapper — add a soft honey gradient vignette */
.full_bg {
  position: relative;
}

.full_bg::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg,
    rgba(26,18,0,0.55) 0%,
    rgba(44,26,0,0.35) 50%,
    transparent 100%);
  pointer-events: none;
  z-index: 1;
}

/* Slider text is already above the vignette via z-index */
.slider_main .row,
.carousel-caption {
  position: relative;
  z-index: 2;
}

/* Hero heading — golden glow */
.relative h3 {
  color: #fff !important;
  text-shadow:
    0 0 30px rgba(212,160,23,0.55),
    0 2px 10px rgba(0,0,0,0.5) !important;
}

/* Hero paragraph */
.relative p {
  color: rgba(255,240,190,0.90) !important;
}

/* Read-more / CTA buttons — honey gradient */
.read_more,
.board .read_more {
  background: linear-gradient(135deg, var(--hu-orange) 0%, var(--hu-gold) 100%) !important;
  border: none !important;
  box-shadow: 0 4px 18px rgba(212,136,10,0.40) !important;
  transition: background-position 0.4s ease, transform 0.2s, box-shadow 0.2s !important;
  background-size: 200% 100% !important;
  background-position: left !important;
  font-weight: 600 !important;
  letter-spacing: 0.5px;
}

.read_more:hover,
.board .read_more:hover {
  background-position: right !important;
  color: #fff !important;
  transform: translateY(-2px);
  box-shadow: 0 6px 24px rgba(212,136,10,0.55) !important;
}

/* Carousel prev/next arrows — honey accent */
#carouselExampleIndicators .carousel-control-prev,
#carouselExampleIndicators .carousel-control-next {
  background: linear-gradient(135deg, var(--hu-gold), var(--hu-amber)) !important;
  color: #fff !important;
  border: none !important;
  box-shadow: 0 4px 14px rgba(212,136,10,0.40) !important;
  transition: transform 0.2s, box-shadow 0.2s;
}

#carouselExampleIndicators .carousel-control-prev:hover,
#carouselExampleIndicators .carousel-control-next:hover {
  transform: scale(1.08);
  box-shadow: 0 6px 20px rgba(212,136,10,0.55) !important;
  color: #fff !important;
}

/* ══════════════════════════════════════════════════════
   SECTION TITLES — golden accent
══════════════════════════════════════════════════════ */
.titlepage h2 {
  position: relative;
  display: inline-block;
  color: #fff;
}

/* Honey underline accent beneath every section title */
.titlepage h2::after {
  content: '';
  display: block;
  width: 60%;
  height: 3px;
  background: linear-gradient(90deg, var(--hu-orange), var(--hu-gold), transparent);
  border-radius: 2px;
  margin: 10px auto 0;
}

.titlepage.text_align_left h2::after {
  margin-left: 0;
}

/* ══════════════════════════════════════════════════════
   ABOUT PAGE  — warm cream background card
══════════════════════════════════════════════════════ */
.about {
  background: linear-gradient(160deg, var(--hu-wax) 0%, var(--hu-light) 60%, var(--hu-cream) 100%) !important;
  position: relative;
  overflow: hidden;
}

/* Decorative honeycomb radial blobs */
.about::after {
  content: '';
  position: absolute;
  top: -60px;
  right: -80px;
  width: 340px;
  height: 340px;
  background: radial-gradient(circle, rgba(212,160,23,0.10) 0%, transparent 70%);
  border-radius: 50%;
  pointer-events: none;
}

.about .titlepage h2 {
  color: var(--hu-bee) !important;
}

.about .titlepage p {
  color: #3d2c00 !important;
}

/* ══════════════════════════════════════════════════════
   QUALITY PAGE  — honeycomb circle cards
══════════════════════════════════════════════════════ */
.quality-box {
  background: linear-gradient(135deg, var(--hu-wax) 0%, var(--hu-light) 100%) !important;
  border: 2px solid rgba(212,136,10,0.18) !important;
  box-shadow: 0 6px 24px rgba(212,136,10,0.12), 0 2px 6px rgba(0,0,0,0.06) !important;
  transition: transform 0.28s ease, box-shadow 0.28s ease, border-color 0.28s ease !important;
  position: relative;
  overflow: hidden;
}

.quality-box::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: radial-gradient(circle at 40% 35%, rgba(245,200,66,0.12) 0%, transparent 65%);
  pointer-events: none;
}

.quality-box:hover {
  transform: translateY(-6px) scale(1.03) !important;
  box-shadow: 0 14px 38px rgba(212,136,10,0.28), 0 4px 14px rgba(0,0,0,0.10) !important;
  border-color: var(--hu-amber) !important;
}

/* Quality section title on dark bg */
.quality .titlepage h2 {
  color: #fff !important;
}

.quality .titlepage p {
  color: rgba(255,240,190,0.82) !important;
}

/* ══════════════════════════════════════════════════════
   SHOP PAGE  — honey_bg section
══════════════════════════════════════════════════════ */
.honey_bg {
  position: relative;
}

.honey_bg::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 4px;
  background: linear-gradient(90deg, transparent, var(--hu-orange), var(--hu-gold), var(--hu-orange), transparent);
  border-radius: 2px;
}

.honey_bg .titlepage h2 {
  color: #fff !important;
}

/* ══════════════════════════════════════════════════════
   CONTACT PAGE  — form inputs & button
══════════════════════════════════════════════════════ */

/* Section heading */
.contact .titlepage h2 {
  color: #fff !important;
}

/* Input fields */
.main_form .contactus,
.main_form .textarea {
  background: rgba(255,248,231,0.06) !important;
  border: 1.5px solid rgba(212,136,10,0.35) !important;
  border-radius: 10px !important;
  color: #fff !important;
  transition: border-color 0.25s, background 0.25s !important;
}

.main_form .contactus:focus,
.main_form .textarea:focus {
  border-color: var(--hu-gold) !important;
  background: rgba(255,248,231,0.10) !important;
  outline: none;
  box-shadow: 0 0 0 3px rgba(212,136,10,0.18) !important;
}

/* Placeholder text */
.main_form .contactus::placeholder,
.main_form .textarea::placeholder {
  color: rgba(255,235,160,0.55) !important;
}

/* Send button */
.main_form .send_btn {
  background: linear-gradient(135deg, var(--hu-orange) 0%, var(--hu-gold) 100%) !important;
  border: none !important;
  box-shadow: 0 4px 18px rgba(212,136,10,0.42) !important;
  font-weight: 700 !important;
  letter-spacing: 0.8px;
  transition: background-position 0.35s ease, transform 0.2s, box-shadow 0.2s !important;
  background-size: 200% 100% !important;
  background-position: left !important;
}

.main_form .send_btn:hover {
  background-position: right !important;
  background: linear-gradient(135deg, var(--hu-gold) 0%, var(--hu-orange) 100%) !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 22px rgba(212,136,10,0.55) !important;
  color: #fff !important;
}

/* ══════════════════════════════════════════════════════
   INNER PAGE — page-top rule / accent stripe
══════════════════════════════════════════════════════ */
.inner_page .about {
  border-top: 4px solid var(--hu-amber);
}

.inner_page .honey_bg {
  border-top: 4px solid var(--hu-amber);
}

.inner_page .quality {
  border-top: 4px solid var(--hu-amber);
}

.inner_page .contact {
  border-top: 4px solid var(--hu-amber);
}

/* ══════════════════════════════════════════════════════
   HONEYCOMB SCROLLBAR  (main window)
══════════════════════════════════════════════════════ */
html::-webkit-scrollbar       { width: 7px; }
html::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, var(--hu-gold), var(--hu-orange));
  border-radius: 6px;
}
html::-webkit-scrollbar-track { background: var(--hu-black); }

/* ══════════════════════════════════════════════════════
   SELECTION COLOUR
══════════════════════════════════════════════════════ */
::selection {
  background: rgba(212,160,23,0.35);
  color: #fff;
}

/* ══════════════════════════════════════════════════════
   HERO BANNER IMAGE — subtle honey glow
══════════════════════════════════════════════════════ */
.banner_img figure img {
  filter: drop-shadow(0 0 28px rgba(212,160,23,0.35));
  transition: filter 0.4s ease;
}

.banner_img figure img:hover {
  filter: drop-shadow(0 0 42px rgba(212,160,23,0.60));
}

/* ══════════════════════════════════════════════════════
   ABOUT IMAGE — soft golden border glow
══════════════════════════════════════════════════════ */
.about_img figure img {
  border-radius: 16px;
  border: 3px solid rgba(212,136,10,0.25);
  box-shadow:
    0 12px 40px rgba(212,136,10,0.18),
    0 4px 12px rgba(0,0,0,0.12);
  transition: box-shadow 0.35s ease, border-color 0.35s ease;
}

.about_img figure img:hover {
  box-shadow:
    0 18px 54px rgba(212,136,10,0.35),
    0 6px 18px rgba(0,0,0,0.16);
  border-color: var(--hu-amber);
}

/* ══════════════════════════════════════════════════════
   HONEY_BG SHOP IMAGE — glow
══════════════════════════════════════════════════════ */
.honey_bg figure img {
  border-radius: 16px;
  filter: drop-shadow(0 8px 32px rgba(212,160,23,0.25));
  transition: filter 0.35s ease;
}

.honey_bg figure img:hover {
  filter: drop-shadow(0 12px 44px rgba(212,160,23,0.45));
}

/* ══════════════════════════════════════════════════════
   FLOATING BEE DECORATION  (hero section)
══════════════════════════════════════════════════════ */
.full_bg .slider_main::after {
  content: '🐝';
  position: absolute;
  right: 5%;
  top: 18%;
  font-size: 2.8rem;
  opacity: 0.14;
  pointer-events: none;
  animation: hu-bee-float 3.5s ease-in-out infinite;
  z-index: 0;
}

@keyframes hu-bee-float {
  0%, 100% { transform: translateY(0) rotate(-8deg); }
  50%       { transform: translateY(-18px) rotate(8deg); }
}

/* ══════════════════════════════════════════════════════
   HONEYCOMB PATTERN OVERLAY  (quality & shop sections)
══════════════════════════════════════════════════════ */
.quality,
.honey_bg {
  position: relative;
}

.quality::before,
.honey_bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    repeating-linear-gradient( 60deg, rgba(245,200,66,0.025) 0, rgba(245,200,66,0.025) 1px, transparent 1px, transparent 40px),
    repeating-linear-gradient(-60deg, rgba(245,200,66,0.025) 0, rgba(245,200,66,0.025) 1px, transparent 1px, transparent 40px);
  pointer-events: none;
  z-index: 0;
}

/* Keep children above the overlay */
.quality > *,
.honey_bg > * {
  position: relative;
  z-index: 1;
}

/* ══════════════════════════════════════════════════════
   FOOTER  — already dark honey; enhance gold accents
══════════════════════════════════════════════════════ */

/* Force body bg to not show gap */
.mf-footer-body {
  background: linear-gradient(180deg, #2a1200 0%, #1a0d00 100%) !important;
}

/* Newsletter button honey gradient */
.mf-nl-btn {
  background: linear-gradient(135deg, var(--hu-orange) 0%, var(--hu-gold) 100%) !important;
  background-size: 200% 100% !important;
  background-position: left !important;
  transition: background-position 0.4s ease, transform 0.2s, box-shadow 0.2s !important;
}

.mf-nl-btn:hover {
  background-position: right !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 22px rgba(212,136,10,0.5) !important;
}

/* ══════════════════════════════════════════════════════
   CEO / OWNER MESSAGE SECTION  — already styled, subtle
   enhancements only
══════════════════════════════════════════════════════ */

/* Language tab active state — match gold gradient */
.ceo-lang-btn.active,
.ceo-lang-btn:hover {
  background: linear-gradient(135deg, var(--hu-orange), var(--hu-gold)) !important;
  border-color: var(--hu-gold) !important;
  box-shadow: 0 3px 10px rgba(212,136,10,0.30) !important;
}

/* ══════════════════════════════════════════════════════
   VISITING CARD SECTION  — already styled,
   enhance flip button and contact items
══════════════════════════════════════════════════════ */
.vc-flip-btn {
  background: linear-gradient(135deg, var(--hu-orange), var(--hu-gold)) !important;
  border-color: transparent !important;
  color: #fff !important;
  border-radius: 22px !important;
  padding: 6px 18px !important;
  font-size: 0.82rem !important;
  font-weight: 600 !important;
  box-shadow: 0 3px 10px rgba(212,136,10,0.30) !important;
  transition: transform 0.2s, box-shadow 0.2s !important;
  cursor: pointer;
}

.vc-flip-btn:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 5px 16px rgba(212,136,10,0.48) !important;
}

/* ══════════════════════════════════════════════════════
   RESPONSIVE — mobile honey tweaks
══════════════════════════════════════════════════════ */
@media (max-width: 767px) {
  .read_more,
  .board .read_more {
    box-shadow: 0 3px 12px rgba(212,136,10,0.35) !important;
  }

  .full_bg .slider_main::after {
    font-size: 2rem;
    right: 2%;
    top: 8%;
  }
}

/* ══════════════════════════════════════════════════════
   UTILITY — honey badge (reusable, mirrors admin badge)
══════════════════════════════════════════════════════ */
.honey-badge {
  display: inline-block;
  background: rgba(212,136,10,0.12);
  color: var(--hu-tan);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  padding: 5px 18px;
  border-radius: 30px;
}