/* =========================================================
   QuickECommerce — custom header behaviour
   Load this file AFTER the theme CSS so these rules win.
   The .qc-scrolled class is toggled by a small script in
   index.html, so the scrolled-header styling works even if
   the theme's own sticky script does not add the .scroll class.
   ========================================================= */

/* --- Logo: sized (slightly bigger) + vertically centered --- */
@media (min-width: 992px) {
  #header .desktoplogo img {
    max-height: 54px !important;
    width: auto !important;
    padding: 0 !important;
    float: none !important;
    top: 50% !important;
    bottom: auto !important;
    transform: translateY(-50%) !important;
  }
  /* no duplicate mobile logo on desktop */
  #header .wsmobileheader { display: none !important; }
}

/* --- Default (top of page, over the hero): show the WHITE logo only --- */
#header .logo-black { display: none; }
#header .logo-white { display: block; }

/* =========================================================
   SCROLLED STATE
   Triggered by our own .qc-scrolled (added via JS in index.html)
   OR by the theme's native .wsmainfull.scroll, whichever fires.
   ========================================================= */

/* Solid, readable header background when scrolled */
#header.qc-scrolled .wsmainfull,
#header .wsmainfull.scroll {
  background-color: #ffffff !important;
  -webkit-backdrop-filter: saturate(180%) blur(12px);
  backdrop-filter: saturate(180%) blur(12px);
  box-shadow: 0 2px 14px rgba(20, 0, 45, .10) !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

/* Replace the WHITE logo with the FOOTER logo (images/logo.png) on scroll */
#header.qc-scrolled .logo-white,
#header .wsmainfull.scroll .logo-white { display: none !important; }
#header.qc-scrolled .logo-black,
#header .wsmainfull.scroll .logo-black { display: block !important; }

/* Menu text: white -> purple on scroll */
#header.qc-scrolled .wsmenu-list > li > a.h-link,
#header .wsmainfull.scroll .wsmenu-list > li > a.h-link { color: #6B00A0 !important; }
#header.qc-scrolled .wsmenu-list > li > a.h-link:hover,
#header .wsmainfull.scroll .wsmenu-list > li > a.h-link:hover { color: #AA05CE !important; }

/* Keep the About dropdown caret in step with the purple text */
#header.qc-scrolled .wsmenu-list > li > a.h-link .arrow:after,
#header .wsmainfull.scroll .wsmenu-list > li > a.h-link .arrow:after { border-color: #6B00A0 !important; }

/* =========================================================
   Call Us / WhatsApp Us buttons
   The theme's .btn--tra-white sets background:transparent!important,
   which was overriding the inline green/WhatsApp colours (they showed
   up as blank white pills, especially on the scrolled white header).
   Force the brand colours in every state.
   ========================================================= */
#header .wsmenu-list li a[href^="tel:"] {
  background-color: #1E9BF0 !important;
  color: #ffffff !important;
  border-color: #1E9BF0 !important;
}
#header .wsmenu-list li a[href*="wa.me"] {
  background-color: #25D366 !important;
  color: #ffffff !important;
  border-color: #25D366 !important;
}
#header .wsmenu-list li a[href^="tel:"]:hover {
  background-color: #1682CC !important;
  border-color: #1682CC !important;
  color: #ffffff !important;
}
#header .wsmenu-list li a[href*="wa.me"]:hover {
  background-color: #1EBE57 !important;
  border-color: #1EBE57 !important;
  color: #ffffff !important;
}