/* Washmen theme overrides (brand + clean neutrals) */
:root {
  --washmen-primary: #ff4b6e;
  --washmen-secondary: #ff2d8d;
  --washmen-text: #0f172a;
  --washmen-muted: #475569;
  --washmen-bg: #ffffff;
  --washmen-surface: #f8fafc;
  --washmen-header-footer: #1e1b5c;

  /* Template variables override (kills leftover "red" accents) */
  --tg-theme-primary: var(--washmen-primary);
  --tg-theme-primary-two: var(--washmen-primary);
  --tg-theme-secondary: var(--washmen-primary);
}

/* Brand utilities (Tailwind arbitrary value classes used in markup) */
.bg-\[\#d00d11\],
.bg-\[\#d00d10\] {
  background-color: var(--washmen-primary) !important;
}
.text-\[\#d00d11\],
.text-\[\#d00d10\] {
  color: var(--washmen-primary) !important;
}
.border-\[\#d00d11\],
.border-\[\#d00d10\] {
  border-color: var(--washmen-primary) !important;
}

/* Old yellow accent → secondary (magenta) */
.bg-\[\#FFCC33\],
.bg-\[\#ffcc33\] {
  background-color: var(--washmen-secondary) !important;
}
.text-\[\#FFCC33\],
.text-\[\#ffcc33\] {
  color: var(--washmen-secondary) !important;
}
.border-\[\#FFCC33\],
.border-\[\#ffcc33\] {
  border-color: var(--washmen-secondary) !important;
}

/* Old navy text → clean dark text */
.text-\[\#08335D\],
.text-\[\#08335d\] {
  color: var(--washmen-text) !important;
}

/* Make common red hover utility match new palette */
.hover\:bg-red-700:hover {
  background-color: #e11d48 !important;
}
.hover\:text-red-700:hover {
  color: #e11d48 !important;
}

/* Header + common brand elements */
/* Header: navy background + light nav text */
.header,
.header.sticky-bar,
.header.stick {
  background-color: var(--washmen-header-footer) !important;
}

.header .main-menu > li > a,
.header .main-menu > li > a:link,
.header .main-menu > li > a:visited,
.header .nav-main-menu .main-menu > li > a {
  color: rgba(255, 255, 255, 0.95) !important;
}

.header .main-menu > li > a:hover,
.header .main-menu > li > a:focus,
.header.stick .main-menu > li > a:hover,
.header.stick .main-menu > li > a:focus {
  color: var(--washmen-primary) !important;
}

.header .sub-menu a,
.header .sub-menu a:link,
.header .sub-menu a:visited {
  color: #0e0e0e !important;
}

.header .sub-menu a:hover,
.header .sub-menu a:focus {
  color: var(--washmen-primary) !important;
}

/* Burger icon on white header */
.header .burger-icon span,
.header .burger-icon-top,
.header .burger-icon-mid,
.header .burger-icon-bottom {
  background-color: #0e0e0e !important;
}

/* Clean burger + close icons (SVG-based) */
.burger-icon {
  background: transparent;
  border: 0;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.burger-icon .wm-icon {
  width: 24px;
  height: 24px;
  stroke: #000;
  stroke-width: 2.5;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Burger in top bar: light icon on navy */
.header .burger-icon .wm-icon {
  stroke: #ffffff !important;
}

.burger-icon .wm-icon-close {
  display: none;
}

.burger-icon.burger-close .wm-icon-hamburger {
  display: none;
}

.burger-icon.burger-close .wm-icon-close {
  display: block;
}

/* Some pages use the template's white burger variant; force black 3 stripes */
.burger-icon.burger-icon-white:not(.burger-close) > span::before,
.burger-icon.burger-icon-white:not(.burger-close) > span::after {
  background-color: #000 !important;
}

.burger-icon.burger-icon-white:not(.burger-close) .burger-icon-mid {
  opacity: 1 !important;
  visibility: visible !important;
  display: block !important;
  transform: none !important;
}

/* Close (X) state: keep it black + comfortably tappable */
.burger-icon.burger-close > span::before,
.burger-icon.burger-close > span::after {
  background-color: #000 !important;
}

/* Prevent "double-stroke" clutter on the X */
.burger-icon.burger-close > span::after {
  opacity: 0 !important;
}

.mobile-header-active .burger-icon.burger-close {
  width: 24px !important;
  height: 24px !important;
  top: 16px !important;
  right: 16px !important;
}

/* Header CTA: high contrast on navy */
.header .btn.btn-brand-1,
.header a.btn.btn-brand-1 {
  background-color: #ffffff !important;
  border-color: #ffffff !important;
  color: var(--washmen-header-footer) !important;
}

.header .btn.btn-brand-1:hover,
.header .btn.btn-brand-1:focus,
.header a.btn.btn-brand-1:hover,
.header a.btn.btn-brand-1:focus {
  background-color: #f1f5f9 !important;
  border-color: #f1f5f9 !important;
  color: var(--washmen-header-footer) !important;
}

/* Dropdown top stripe (was red) → brand pink */
.header .main-menu li div.sub-menu,
.header .main-menu li ul {
  border-top-color: var(--washmen-primary) !important;
}

/* Dropdown item hover (was red) → brand pink */
.header .main-menu li ul li a:hover,
.header .main-menu li ul li a:hover * {
  color: var(--washmen-primary) !important;
}

/* Bootstrap primary overrides (if used) */
.btn-primary,
.bg-primary {
  background-color: var(--washmen-primary) !important;
  border-color: var(--washmen-primary) !important;
}
.btn-primary:hover,
.btn-primary:focus {
  background-color: #e11d48 !important;
  border-color: #e11d48 !important;
}
.text-primary {
  color: var(--washmen-primary) !important;
}
.border-primary {
  border-color: var(--washmen-primary) !important;
}

/* Subtle gradient accent helper (optional usage) */
.washmen-gradient {
  background-image: linear-gradient(90deg, var(--washmen-primary), var(--washmen-secondary));
}

/* Footer: same navy as header */
.footer .footer-1,
.footer .footer-2,
.footer .footer-3 {
  background: var(--washmen-header-footer) !important;
  color: #e2e8f0 !important;
}

.footer .footer-2 .footer-bottom {
  border-top: 1px solid rgba(226, 232, 240, 0.18) !important;
}

.footer .menu-footer a,
.footer .menu-footer a:link,
.footer .menu-footer a:visited,
.footer .footer-bottom span,
.footer p,
.footer li,
.footer a {
  color: #e2e8f0 !important;
}

.footer .menu-footer a:hover,
.footer .menu-footer a:focus,
.footer a:hover,
.footer a:focus {
  color: var(--washmen-primary) !important;
}

.footer h5,
.footer h6,
.footer .color-brand-1 {
  color: var(--washmen-primary) !important;
}

/* ===== Mobile off-canvas: pink panel, white content ===== */
.mobile-header-active.mobile-header-wrapper-style {
  background-color: var(--washmen-primary) !important;
  box-shadow: -8px 0 32px rgba(0, 0, 0, 0.2) !important;
}

.mobile-header-active .mobile-header-wrapper-inner,
.mobile-header-active .mobile-header-content-area,
.mobile-header-active .perfect-scroll,
.mobile-header-active .mobile-menu-wrap {
  background: transparent !important;
}

.mobile-header-active .mobile-header-border {
  border-color: rgba(255, 255, 255, 0.25) !important;
}

.mobile-header-active .mobile-menu-wrap > img {
  filter: brightness(0) invert(1);
  display: block;
  margin-left: auto;
  margin-right: auto;
}

.mobile-header-active .mobile-menu-wrap .mobile-menu > li > a,
.mobile-header-active .mobile-menu-wrap .sub-menu li > a {
  color: #ffffff !important;
}

.mobile-header-active .mobile-menu-wrap .mobile-menu > li > a:hover,
.mobile-header-active .mobile-menu-wrap .sub-menu li > a:hover,
.mobile-header-active .mobile-menu-wrap .mobile-menu li:hover > a {
  color: rgba(255, 255, 255, 0.9) !important;
}

.mobile-header-active .mobile-menu-wrap .mobile-menu li ul li.hr span {
  background-color: rgba(255, 255, 255, 0.28) !important;
}

.mobile-header-active .menu-expand svg {
  stroke: #ffffff !important;
  color: #ffffff !important;
}

.mobile-header-active .mobile-menu-wrap nav .mobile-menu li.has-children .menu-expand {
  color: #ffffff !important;
}

.mobile-header-active .burger-icon .wm-icon {
  stroke: #ffffff !important;
}

.mobile-header-active .mobile-menu-wrap .icon-socials.icon-facebook,
.mobile-header-active .mobile-menu-wrap .icon-socials.icon-instagram {
  filter: brightness(0) invert(1) !important;
  opacity: 0.95;
}

.mobile-header-active .mobile-menu-wrap a[href^="mailto:"] {
  color: #ffffff !important;
}