/* GoodChat Header Responsive Overrides */
:root {
  --goodchat-blue: #359CF7; /* Refined GoodChat Blue */
}

/* TABLET HEADER (768px to 1024px) */
@media only screen and (min-width: 768px) and (max-width: 1024px) {
  header.elementor-element-container_50w9mtcfe {
    width: 100% !important;
    max-width: 100% !important;
    background-color: #000000 !important;
    background: #000000 !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    flex-wrap: nowrap !important;
    padding-left: 32px !important;
    padding-right: 24px !important; /* Header right padding requested: 24px */
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    height: 98px !important;
    min-height: 98px !important;
    box-sizing: border-box !important;
  }

  /* Logo adjustment */
  header.elementor-element-container_50w9mtcfe img.e-c2fcb9b-c5972fd {
    width: 195px !important;
    max-width: 195px !important;
    height: auto !important;
    display: block !important;
    margin: 0 !important;
  }

  /* Hide Chat with Paul desktop button on Tablet */
  header.elementor-element-container_50w9mtcfe .elementor-element-container_zd6yc8yv6,\n  header.elementor-element-container_50w9mtcfe a.e-widget_lvx2vnsi3-9dd3adf {
    display: none !important;
  }

  /* Hamburger toggle on tablet */
  .elementskit-menu-hamburger.elementskit-menu-toggler {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    align-self: flex-end !important;
    margin-left: auto !important;
    margin-right: 0 !important;
    background-color: var(--goodchat-blue) !important;
    background: var(--goodchat-blue) !important;
    padding: 10px !important;
    border: none !important;
    outline: none !important;
    border-radius: 8px !important;
    width: auto !important;
    min-width: 48px !important;
    height: 48px !important;
    box-shadow: none !important;
    overflow: visible !important;
    box-sizing: border-box !important;
  }

  .elementskit-menu-hamburger.elementskit-menu-toggler svg.ekit-menu-icon {
    width: 30px !important; /* 30px on tablet */
    height: 30px !important;
    fill: #ffffff !important;
    color: #ffffff !important;
  }

  .elementskit-menu-hamburger.elementskit-menu-toggler svg.ekit-menu-icon path {
    fill: #ffffff !important;
    stroke: #ffffff !important;
    stroke-width: 1.5px !important; /* Bold line weight */
  }
}

/* MOBILE HEADER (Under 768px) */
@media only screen and (max-width: 767px) {
  header.elementor-element-container_50w9mtcfe {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    background-color: #000000 !important;
    background: #000000 !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    flex-wrap: nowrap !important;
    padding-left: 20px !important;
    padding-right: 20px !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    height: 83px !important;
    min-height: 83px !important;
    overflow-x: hidden !important;
  }

  /* Logo adjustment */
  header.elementor-element-container_50w9mtcfe img.e-c2fcb9b-c5972fd {
    width: 160px !important;
    max-width: calc(100% - 80px) !important;
    height: auto !important;
    display: block !important;
    margin: 0 !important;
    flex-shrink: 1 !important;
  }

  /* Hide Chat with Paul desktop button on Mobile */
  header.elementor-element-container_50w9mtcfe .elementor-element-container_zd6yc8yv6,\n  header.elementor-element-container_50w9mtcfe a.e-widget_lvx2vnsi3-9dd3adf {
    display: none !important;
  }

  /* ElementsKit Widget Mobile Overrides */
  header.elementor-element-container_50w9mtcfe .elementor-widget-ekit-nav-menu {
    width: auto !important;
    max-width: 52px !important;
    min-width: 48px !important;
    flex-basis: auto !important;
    flex-grow: 0 !important;
    flex-shrink: 0 !important;
    margin-left: auto !important;
    margin-right: 0 !important;
    padding: 0 !important;
    position: static !important;
    left: auto !important;
    right: auto !important;
    transform: none !important;
    display: block !important;
  }

  /* Hamburger toggle on mobile with horizontal spacing fixes to prevent clipping */
  .elementskit-menu-hamburger.elementskit-menu-toggler {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 !important;
    position: relative !important;
    right: auto !important;
    transform: none !important;
    background-color: var(--goodchat-blue) !important;
    background: var(--goodchat-blue) !important;
    border: none !important;
    outline: none !important;
    border-radius: 8px !important;
    width: 48px !important;
    height: 48px !important;
    min-width: 48px !important;
    max-width: 48px !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
    box-shadow: none !important;
    flex-shrink: 0 !important;
  }

  .elementskit-menu-hamburger.elementskit-menu-toggler svg.ekit-menu-icon {
    width: 28px !important; /* 28px on mobile */
    height: 28px !important;
    fill: #ffffff !important;
    color: #ffffff !important;
  }

  .elementskit-menu-hamburger.elementskit-menu-toggler svg.ekit-menu-icon path {
    fill: #ffffff !important;
    stroke: #ffffff !important;
    stroke-width: 1.5px !important; /* Bold line weight */
  }
}

/* Prevent horizontal overflow scrolling */
html, body {
  max-width: 100% !important;
  overflow-x: hidden !important;
}

/* ElementsKit Mobile/Tablet Sidebar Panel Restyling */
@media only screen and (max-width: 1024px) {
  /* Panel wrapper width and style */
  .elementskit-menu-container.elementskit-menu-offcanvas-elements {
    background-color: #070707 !important;
    background: #070707 !important;
    height: 100vh !important;
    border: none !important;
    box-shadow: none !important;
    overflow-x: hidden !important;
    box-sizing: border-box !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
    align-items: flex-start !important;
  }

  /* Tablet Panel Sizing */
  @media only screen and (min-width: 768px) {
    .elementskit-menu-container.elementskit-menu-offcanvas-elements {
      width: 45vw !important;
      max-width: 420px !important;
      padding: 85px 26px 30px 26px !important;
    }
  }

  /* Mobile Panel Sizing */
  @media only screen and (max-width: 767px) {
    .elementskit-menu-container.elementskit-menu-offcanvas-elements {
      width: 85vw !important;
      max-width: 340px !important;
      padding: 85px 26px 30px 26px !important;
    }
  }

  /* No unnecessary empty top area - align the list directly below header */
  .elementskit-menu-container.elementskit-menu-offcanvas-elements ul.elementskit-navbar-nav {
    margin-top: 0 !important;
    padding-top: 0 !important;
    width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
  }

  /* Menu links */
  .elementskit-menu-container.elementskit-menu-offcanvas-elements ul.elementskit-navbar-nav li.menu-item {
    width: 100% !important;
    display: block !important;
    border: none !important;
    background: transparent !important;
    margin: 0 !important;
  }

  .elementskit-menu-container.elementskit-menu-offcanvas-elements ul.elementskit-navbar-nav li.menu-item a.ekit-menu-nav-link {
    color: #ffffff !important;
    font-weight: 500 !important;
    line-height: 1.2 !important;
    width: 100% !important;
    display: block !important;
    text-align: left !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    padding-top: 14px !important;
    padding-bottom: 14px !important;
    background: transparent !important;
    border: none !important;
    white-space: nowrap !important;
    transition: color 0.2s ease-in-out !important;
  }

  /* Font sizing for tablet/mobile links */
  @media only screen and (min-width: 768px) {
    .elementskit-menu-container.elementskit-menu-offcanvas-elements ul.elementskit-navbar-nav li.menu-item a.ekit-menu-nav-link {
      font-size: 20px !important;
    }
  }
  @media only screen and (max-width: 767px) {
    .elementskit-menu-container.elementskit-menu-offcanvas-elements ul.elementskit-navbar-nav li.menu-item a.ekit-menu-nav-link {
      font-size: 19px !important;
    }
  }

  /* Hover and active color */
  .elementskit-menu-container.elementskit-menu-offcanvas-elements ul.elementskit-navbar-nav li.menu-item a.ekit-menu-nav-link:hover,
  .elementskit-menu-container.elementskit-menu-offcanvas-elements ul.elementskit-navbar-nav li.menu-item a.ekit-menu-nav-link:focus,
  .elementskit-menu-container.elementskit-menu-offcanvas-elements ul.elementskit-navbar-nav li.menu-item.active a.ekit-menu-nav-link,
  .elementskit-menu-container.elementskit-menu-offcanvas-elements ul.elementskit-navbar-nav li.menu-item.current-menu-item a.ekit-menu-nav-link {
    color: var(--goodchat-blue) !important;
  }

  /* Close X Button Panel Positioning */
  .elementskit-nav-identity-panel {
    position: absolute !important;
    top: 18px !important;
    right: 18px !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    border: none !important;
    display: block !important;
  }

  /* Close Button styling */
  .elementskit-nav-identity-panel button.elementskit-menu-close.elementskit-menu-toggler {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: #ffffff !important;
    font-size: 26px !important;
    font-family: inherit !important;
    line-height: 1 !important;
    font-weight: bold !important;
    background-color: var(--goodchat-blue) !important;
    background: var(--goodchat-blue) !important;
    padding: 9px 12px !important;
    border-radius: 8px !important;
    border: none !important;
    cursor: pointer !important;
    outline: none !important;
    box-shadow: none !important;
    width: auto !important;
    height: auto !important;
  }
}