/*
 Theme Name: SuperDots Child Theme
 Theme URI: https://woostify.com/
 Description: Child theme for superdots
 Author: Superdots
 Author URI: https://superdots.io
 Template: woostify
 Version: 1.0.0
*/

/* ---- Header / Top Navigation styles ---- */
:root {
  --nav-height: 68px;
  --nav-bg: #ffffff;
  --nav-text: #0f1b2d; /* deep navy */
  --nav-muted: #6b7280; /* gray-500 */
  --primary: #0f1b2d;
  --primary-hover: #13233a;
  --soft-button-bg: #ffffff;
  --soft-button-border: #d1d5db; /* gray-300 */
  --ring: rgba(15, 27, 45, 0.08);
  --shadow: 0 10px 15px rgba(17, 24, 39, 0.12), 0 4px 6px rgba(17, 24, 39, 0.06);
}

/* Header container */
header.site-header,
.header,
.woostify-header,
.site-header {
  background: var(--nav-bg);
  box-shadow: 0 8px 24px rgba(16, 24, 40, 0.06);
  border-bottom: 1px solid rgba(16, 24, 40, 0.06);
}

/* Inner layout: logo left, nav center, actions right */
.site-header .container,
.site-header .header-inner,
.woostify-header .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  min-height: var(--nav-height);
}

/* Primary navigation centered */
#site-navigation,
nav.primary-navigation,
.woostify-navigation,
nav.main-navigation {
  flex: 1 1 auto;
  display: flex;
  justify-content: center;
}

/* Menu list */
#site-navigation .menu,
nav.primary-navigation .menu,
.woostify-navigation .menu,
nav.main-navigation .menu,
ul.menu, ul.primary-menu {
  display: flex;
  align-items: center;
  gap: 28px;
}

/* Menu links */
ul.menu > li > a,
ul.primary-menu > li > a,
nav.main-navigation .menu > li > a {
  color: var(--nav-text);
  font-weight: 500;
  font-size: 14px;
  line-height: 1;
  padding: 10px 2px;
}

/* Dropdown caret for items with children */
ul.menu > li.menu-item-has-children > a::after,
ul.primary-menu > li.menu-item-has-children > a::after {
  content: "\25BE"; /* small down triangle */
  font-size: 10px;
  margin-left: 6px;
  color: var(--nav-muted);
}

/* Right-side action area (if present) */
.header-actions,
.site-header .header-right {
  display: flex;
  align-items: center;
  gap: 14px;
}

/* Phone link */
.menu-item.phone-link > a,
a[href^="tel:"] {
  color: var(--nav-text);
  font-weight: 700;
  letter-spacing: 0.01em;
}

/* Login link */
.menu-item.login-link > a {
  color: var(--nav-text);
  opacity: 0.9;
}

/* Soft button (Contact) */
.menu-item.cta-soft > a {
  background: var(--soft-button-bg);
  color: var(--nav-text);
  border: 1px solid var(--soft-button-border);
  border-radius: 10px;
  padding: 9px 14px;
  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.06);
}
.menu-item.cta-soft > a:hover {
  background: #f9fafb;
}

/* Primary button (BUY) */
.menu-item.cta-primary > a {
  background: var(--primary);
  color: #ffffff;
  border-radius: 10px;
  padding: 10px 16px;
  box-shadow: var(--shadow);
}
.menu-item.cta-primary > a:hover {
  background: var(--primary-hover);
}

/* Tighter spacing for the first group, more space around actions */
ul.menu > li { margin: 0; }

/* Responsive: keep default mobile menu; limit desktop-only tweaks */
@media (max-width: 1024px) {
  #site-navigation,
  .woostify-navigation,
  nav.main-navigation { justify-content: flex-start; }
  ul.menu, ul.primary-menu { gap: 18px; }
}

/* ---- Woostify-specific header overrides for precise alignment ---- */
.site-header .woostify-container,
.site-header .container,
header.site-header .container {
  /* ---- Match current markup from provided HTML ---- */
  /* ---- Fix: top-level overrides for current header markup ---- */
  .site-header-inner .woostify-container,
  header.site-header .container,
  .site-header .container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: var(--nav-height);
  }
  
  .site-navigation { flex: 1 1 auto; }
  .site-navigation nav.main-navigation {
    display: flex;
    justify-content: center;
    font-size: 14px !important;
  }
  .site-navigation ul.primary-navigation {
    display: flex;
    align-items: center;
    gap: 28px;
    list-style: none;
    margin: 0;
    padding: 0;
  }
  .site-navigation ul.primary-navigation > li > a {
    color: var(--nav-text);
    font-weight: 500;
    line-height: 1;
    padding: 10px 2px;
  }
  .site-navigation ul.primary-navigation > li.menu-item-has-children > a::after {
    content: "\25BE";
    font-size: 10px;
    margin-left: 6px;
    color: var(--nav-muted);
  }
  
  /* Right-side tools (wishlist/cart) */
  .site-tools {
    display: flex;
    align-items: center;
    gap: 12px;
  }
  .site-tools .tools-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 8px;
    border-radius: 10px;
  }
  /* Keep header icons grouped on the right */
  .header-actions,
  .header-action,
  .site-header .header-right {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 14px;
  }

  /* Subtle underline removal for active state if theme adds one */
  #site-navigation .menu > li.current-menu-item > a,
  #site-navigation .menu > li.current_page_item > a {
    box-shadow: none !important;
  }
}

/* ---- Mobile sidebar panel: dark theme, large white links ---- */
@media (max-width: 768px) {
  .sidebar-menu {
    background: #0f1b2d !important;
    color: #ffffff;
  }
  .sidebar-menu .site-navigation,
  .sidebar-menu nav.main-navigation { width: 100%; }

  .sidebar-menu ul.primary-navigation {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 28px;
    padding: 32px 24px;
    margin: 0;
    list-style: none;
    width: 100%;
  }
  .sidebar-menu ul.primary-navigation > li > a {
    color: #ffffff !important;
    font-size: 24px !important;
    font-weight: 700 !important;
    letter-spacing: 0.01em;
    text-decoration: none;
  }
  .sidebar-menu ul.primary-navigation > li.menu-item-has-children > a::after {
    content: "\25BE";
    color: #ffffff;
    margin-left: 8px;
    font-size: 12px;
  }
  /* Close/toggle icon: white lines only when sidebar is open */
  html.sidebar-menu-open .wrap-toggle-sidebar-menu .woostify-icon-bar span,
  html.sidebar-menu-open .wrap-toggle-sidebar-menu .woostify-icon-bar::before,
  html.sidebar-menu-open .wrap-toggle-sidebar-menu .woostify-icon-bar::after {
    background: #ffffff !important;
  }
}

/* --- Stop hamburger fade-out; enforce visibility and position --- */
@media (max-width: 768px) {
  /* Default: keep sidebar hidden until open */
  .sidebar-menu {
    display: none !important;
  }
  /* When open: force visibility and remove transforms */
  html.sidebar-menu-open .sidebar-menu {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    transform: none !important;
    pointer-events: auto !important;
  }

  /* Keep hamburger visible at all times */
  .wrap-toggle-sidebar-menu,
  .wrap-toggle-sidebar-menu .woostify-icon-bar,
  .wrap-toggle-sidebar-menu .woostify-icon-bar span,
  .wrap-toggle-sidebar-menu .woostify-icon-bar::before,
  .wrap-toggle-sidebar-menu .woostify-icon-bar::after {
    opacity: 1 !important;
    visibility: visible !important;
    animation: none !important;
  }

  /* Disable theme fade/transform animations on the lines */
  .wrap-toggle-sidebar-menu .woostify-icon-bar span,
  .wrap-toggle-sidebar-menu .woostify-icon-bar::before,
  .wrap-toggle-sidebar-menu .woostify-icon-bar::after {
    transition: none !important;
  }

  /* If Woostify adds an active/open class on the toggle, keep it visible */
  .toggle-sidebar-menu-btn.is-active .woostify-icon-bar,
  .toggle-sidebar-menu-btn.is-active .woostify-icon-bar span,
  .toggle-sidebar-menu-btn.is-active .woostify-icon-bar::before,
  .toggle-sidebar-menu-btn.is-active .woostify-icon-bar::after,
  html.sidebar-menu-open .wrap-toggle-sidebar-menu .woostify-icon-bar,
  html.sidebar-menu-open .wrap-toggle-sidebar-menu .woostify-icon-bar span,
  html.sidebar-menu-open .wrap-toggle-sidebar-menu .woostify-icon-bar::before,
  html.sidebar-menu-open .wrap-toggle-sidebar-menu .woostify-icon-bar::after {
    opacity: 1 !important;
    visibility: visible !important;
  }

  /* Place toggle comfortably inside the overlay when open */
  html.sidebar-menu-open .wrap-toggle-sidebar-menu {
    position: fixed;
    left: 16px;
    top: 16px;
    z-index: 10001;
  }

  /* On header (closed state), ensure dark lines for visibility */
  .wrap-toggle-sidebar-menu .woostify-icon-bar span,
  .wrap-toggle-sidebar-menu .woostify-icon-bar::before,
  .wrap-toggle-sidebar-menu .woostify-icon-bar::after {
    background-color: #0f1b2d;
  }

  /* When open, switch to white lines for contrast on dark sidebar */
  html.sidebar-menu-open .wrap-toggle-sidebar-menu .woostify-icon-bar span,
  html.sidebar-menu-open .wrap-toggle-sidebar-menu .woostify-icon-bar::before,
  html.sidebar-menu-open .wrap-toggle-sidebar-menu .woostify-icon-bar::after {
    background-color: #ffffff !important;
  }
}

/* --- Desktop-only: hide mobile toggle and sidebar menu --- */
@media (min-width: 992px) {
  .wrap-toggle-sidebar-menu,
  .toggle-sidebar-menu-btn,
  .header-layout-1 .wrap-toggle-sidebar-menu { /* Woostify layout hook */
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
  }
  /* Ensure mobile sidebar never shows on desktop */
  .sidebar-menu {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
  }
}

/* --- Mobile sidebar: full-screen overlay, remove arrow, keep X visible --- */
@media (max-width: 768px) {
  /* Mobile overlay for site-navigation when theme lacks .sidebar-menu */
    html.mobile-overlay-open, body.mobile-overlay-open {
      overflow: hidden !important;
      touch-action: none;
    }
  
    html.mobile-overlay-open .site-navigation,
    html.mobile-overlay-open nav.main-navigation {
      position: fixed !important;
      top: 0; left: 0; right: 0; bottom: 0;
      width: 100vw; height: 100vh;
      background: #0f1b2d !important;
      z-index: 10000;
      padding: 24px 24px 48px;
      display: block !important;
    }
  
    html.mobile-overlay-open .site-navigation ul,
    html.mobile-overlay-open nav.main-navigation ul {
      list-style: none;
      margin: 0; padding: 0;
    }
    html.mobile-overlay-open .site-navigation ul.primary-navigation > li,
    html.mobile-overlay-open nav.main-navigation ul.primary-navigation > li {
      display: block;
      margin: 0;
      border-bottom: 1px solid rgba(255,255,255,0.1);
    }
    html.mobile-overlay-open .site-navigation ul.primary-navigation a,
    html.mobile-overlay-open nav.main-navigation ul.primary-navigation a {
      display: block;
      color: #fff !important;
      padding: 16px 8px;
      text-decoration: none;
    }
  
    /* Keep the toggle button above overlay and clickable */
    html.mobile-overlay-open .wrap-toggle-sidebar-menu .toggle-sidebar-menu-btn {
      position: fixed;
      top: 16px; left: 16px;
      z-index: 10001;
      width: 36px; height: 36px;
      display: inline-block;
      cursor: pointer;
    }
    html.mobile-overlay-open .wrap-toggle-sidebar-menu .toggle-sidebar-menu-btn > span { display: none !important; }
    html.mobile-overlay-open .wrap-toggle-sidebar-menu .toggle-sidebar-menu-btn::before,
     html.mobile-overlay-open .wrap-toggle-sidebar-menu .toggle-sidebar-menu-btn::after {
       content: "";
       position: absolute;
       top: 50%; left: 50%;
       width: 24px; height: 2px;
       background: #fff;
       transform-origin: center;
     }
    html.mobile-overlay-open .wrap-toggle-sidebar-menu .toggle-sidebar-menu-btn::before {
      transform: translate(-50%, -50%) rotate(45deg);
    }
    html.mobile-overlay-open .wrap-toggle-sidebar-menu .toggle-sidebar-menu-btn::after {
      transform: translate(-50%, -50%) rotate(-45deg);
    }
  
    /* Avoid pointer interception by any arrow-like elements when overlay open */
    html.mobile-overlay-open .wrap-toggle-sidebar-menu .woostify-icon-bar,
    html.mobile-overlay-open .wrap-toggle-sidebar-menu .woostify-icon-bar * {
      pointer-events: none;
    }
  
  /* Full-screen dark overlay without right gap */
  .sidebar-menu {
    position: fixed !important;
    top: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    left: 0 !important;
    width: 100vw !important;
    max-width: 100vw !important;
    margin: 0 !important;
    border: 0 !important;
    box-shadow: none !important;
    z-index: 10000 !important;
    background: #0f1b2d !important;
  }
  /* Ensure inner containers don’t introduce padding/margins causing gaps */
  .sidebar-menu .woostify-container,
  .sidebar-menu .container,
  .sidebar-menu .site-navigation,
  .sidebar-menu nav.main-navigation {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  /* Remove submenu arrow indicators in the overlay */
  .sidebar-menu .arrow-icon,
  .sidebar-menu .menu-item-has-children > a .arrow-icon,
  .sidebar-menu .menu-item-has-children > a::after {
    display: none !important;
    content: none !important;
  }

  /* Ensure the actual toggle button is clickable over the overlay */
  html.sidebar-menu-open .toggle-sidebar-menu-btn {
    position: fixed !important;
    left: 16px !important;
    top: 16px !important;
    z-index: 10002 !important;
    width: 40px !important;
    height: 40px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: transparent !important;
    border: 0 !important;
    cursor: pointer !important;
    pointer-events: auto !important;
  }
  /* Normalize default button styles in all states */
  .toggle-sidebar-menu-btn { border: 0; background: transparent; }

  /* Make the visual X on the toggle element itself */
  html.sidebar-menu-open .wrap-toggle-sidebar-menu .toggle-sidebar-menu-btn {
    width: 40px !important;
    height: 40px !important;
    position: fixed !important;
    left: 16px !important;
    top: 16px !important;
    background: transparent !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border: 0 !important;
    cursor: pointer !important;
    z-index: 10002 !important;
  }
  /* Hide the inner bar line when open */
  html.sidebar-menu-open .wrap-toggle-sidebar-menu .toggle-sidebar-menu-btn > span {
    opacity: 0 !important;
  }
  /* Draw two crossing lines (X) on the toggle element */
  html.sidebar-menu-open .wrap-toggle-sidebar-menu .toggle-sidebar-menu-btn::before,
  html.sidebar-menu-open .wrap-toggle-sidebar-menu .toggle-sidebar-menu-btn::after {
    content: "";
    position: absolute;
    left: 8px;
    right: 8px;
    top: 50%;
    width: 24px;
    height: 2px;
    background-color: #ffffff !important;
    transform-origin: 50% 50%;
  }
  html.sidebar-menu-open .wrap-toggle-sidebar-menu .toggle-sidebar-menu-btn::before {
    transform: translateY(-50%) rotate(45deg);
  }
  html.sidebar-menu-open .wrap-toggle-sidebar-menu .toggle-sidebar-menu-btn::after {
    transform: translateY(-50%) rotate(-45deg);
  }

  /* Prevent any arrow-like elements from intercepting taps */
  .sidebar-menu [class*="arrow"] { pointer-events: none !important; }

  html.sidebar-menu-open .wrap-toggle-sidebar-menu .woostify-icon-bar span,
  html.sidebar-menu-open .wrap-toggle-sidebar-menu .woostify-icon-bar::before,
  html.sidebar-menu-open .wrap-toggle-sidebar-menu .woostify-icon-bar::after {
    background-color: #ffffff !important;
  }

  /* Prevent background page from scrolling when overlay is open */
  html.sidebar-menu-open, body.sidebar-menu-open { overflow: hidden !important; }
}

/* Closed state: place hamburger inside header, left of logo */
@media (max-width: 768px) {
  html:not(.mobile-overlay-open) header.site-header .container,
  html:not(.mobile-overlay-open) header.site-header .woostify-container,
  html:not(.mobile-overlay-open) .site-header .woostify-container,
  html:not(.mobile-overlay-open) .site-header-inner .woostify-container,
  html:not(.mobile-overlay-open) .woostify-header .container,
  html:not(.mobile-overlay-open) .site-header .header-inner {
    position: relative;
    padding-left: 64px; /* room for toggle; prevents overlap with logo */
  }
  html:not(.mobile-overlay-open) .wrap-toggle-sidebar-menu {
    position: absolute !important;
    left: 16px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    z-index: 10001 !important;
    pointer-events: auto !important;
  }
  html:not(.mobile-overlay-open) .wrap-toggle-sidebar-menu .toggle-sidebar-menu-btn {
    position: relative !important;
    width: 32px; height: 32px;
    display: inline-flex; align-items: center; justify-content: center;
  }
}

/* --- Overrides: Woostify close icon position and z-index; remove extra X --- */
@media (max-width: 768px) {
  /* Keep the provided close icon above the sidebar overlay */
  #woostify-overlay > span {
    position: fixed !important;
    top: 16px !important;
    right: 16px !important;
    z-index: 10003 !important; /* higher than .sidebar-menu (10000) */
    width: 36px !important;
    height: 36px !important;
    pointer-events: auto !important;
  }

  /* Do not draw an extra pseudo-element X on the hamburger toggle */
  html.sidebar-menu-open .wrap-toggle-sidebar-menu .toggle-sidebar-menu-btn::before,
  html.sidebar-menu-open .wrap-toggle-sidebar-menu .toggle-sidebar-menu-btn::after {
    content: none !important;
    display: none !important;
  }
}