/**
* Theme Name: Scubo Child
* Description: This is a child theme of Scubo, generated by Merlin WP.
* Author: <a href="https://themeforest.net/user/template_path">template_path</a>
* Template: scubo
* Version: 1.0
*/


/* MOBILE VIEW MENU STYLES */
/* Mobile menu styles */
@media (max-width: 767px) {
  .main-nav__main-navigation {
    display: block !important;
    position: fixed;
    top: 0;
    right: -100%;
    width: 300px;
    height: 100%;
    background: #ffffff;
    box-shadow: -2px 0 5px rgba(0, 0, 0, 0.2);
    z-index: 9999;
    transition: right 0.3s ease;
    overflow-y: auto;
    overflow-x: hidden;
    opacity: 1 !important;
    visibility: hidden;
  }

  .main-nav__main-navigation.active {
    right: 0;
    visibility: visible;
  }

  /* Backdrop to dim background */
  .main-nav__main-navigation.active + * {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: 9998;
    content: '';
    display: block;
  }

  .main-nav-one.margin .main-nav__main-navigation .main-nav__navigation-box > li:nth-child(4) {
    margin-left: 0 !important;
  }

  .main-nav-one .main-nav__main-navigation .main-nav__navigation-box {
    flex-direction: column !important;
    align-items: flex-start !important;
  }

  .main-nav-one .main-nav__main-navigation .main-nav__navigation-box > li + li {
    margin: 0 !important;
  }

  .main-nav__main-navigation .main-nav__navigation-box > li ul {
    width: 100% !important;
    left: 0 !important;
    top: 100% !important;
  }

  /* Close button */
  .main-nav__main-navigation .close-btn {
    background: none;
    border: 1px solid #cccccc;
    outline: 1px solid #cccccc;
    outline-offset: 2px;
    cursor: pointer;
    position: absolute;
    top: 15px; /* Moved slightly down to avoid overlap with top edge */
    right: 15px; /* Moved slightly left for better spacing */
    font-size: 24px;
    color: #333;
    z-index: 10001;
    width: 40px; /* Fixed size for better click area */
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px; /* Optional: slight rounding for aesthetics */
  }

  /* Style navigation list */
  .main-nav__navigation-box {
    display: flex;
    flex-direction: column !important;
    padding: 60px 20px 20px; /* Increased top padding to account for larger close button */
    width: 100%;
    max-height: 100%;
  }

  .main-nav-one .main-nav__main-navigation .main-nav__navigation-box > li {
    padding: 0 !important;
  }

  .main-nav__navigation-box li {
    width: 100%;
  }

  .main-nav__navigation-box a {
    display: block;
    padding: 10px;
    color: #333;
    text-decoration: none;
    font-size: 16px;
    line-height: 1.5;
    width: 100%;
    box-sizing: border-box;
  }

  /* Submenu styles */
  .main-nav__navigation-box .submenu {
    padding-left: 15px;
    width: 100%;
    box-sizing: border-box;
    display: none;
  }

  .main-nav__main-navigation .main-nav__navigation-box > li > ul > li > ul {
    top: 0;
    left: 100%;
    transform: translateX(0px) !important;
    visibility: visible !important;
    opacity: 1 !important;
  }

  .main-nav__navigation-box .submenu a {
    font-size: 14px;
    padding: 8px 10px;
  }

  /* Dropdown button styles */
  .dropdown-btn {
    background: none;
    border: none;
    cursor: pointer;
    padding: 10px;
    width: 100%;
    text-align: left;
    color: #333;
    font-size: 16px;
    line-height: 1.5;
    box-sizing: border-box;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .dropdown-btn i {
    line-height: 1.5;
  }

  /* Hamburger icon */
  .side-menu__toggler {
    display: block;
    cursor: pointer;
    z-index: 10002;
    font-size: 24px;
    padding: 10px;
    position: relative;
  }

  /* Hide empty side-menu__block */
  .side-menu__block {
    display: none !important;
  }
}

/* Tablet menu styles */
@media (min-width: 768px) and (max-width: 1023px) {
  .main-nav__main-navigation {
    display: block !important;
    position: fixed;
    top: 0;
    right: -400px;
    width: 400px;
    height: 100%;
    background: #ffffff;
    box-shadow: -2px 0 5px rgba(0, 0, 0, 0.2);
    z-index: 9999;
    transition: right 0.3s ease;
    overflow-y: auto;
    overflow-x: hidden;
    opacity: 1 !important;
    visibility: hidden;
  }

  .main-nav__main-navigation.active {
    right: 0;
    visibility: visible;
  }

  /* Backdrop to dim background */
  .main-nav__main-navigation.active + * {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: 9998;
    content: '';
    display: block;
  }

  .main-nav-one.margin .main-nav__main-navigation .main-nav__navigation-box > li:nth-child(4) {
    margin-left: 0 !important;
  }

  .main-nav-one .main-nav__main-navigation .main-nav__navigation-box {
    flex-direction: column !important;
    align-items: flex-start !important;
  }

  .main-nav-one .main-nav__main-navigation .main-nav__navigation-box > li + li {
    margin: 0 !important;
  }

  .main-nav__main-navigation .main-nav__navigation-box > li ul {
    width: 100% !important;
    left: 0 !important;
    top: 100% !important;
  }

  /* Close button */
  .main-nav__main-navigation .close-btn {
    background: none;
    border: 1px solid #cccccc;
    outline: 1px solid #cccccc;
    outline-offset: 2px;
    cursor: pointer;
    position: absolute;
    top: 20px; /* Adjusted for larger screen */
    right: 20px; /* Adjusted for larger screen */
    font-size: 24px;
    color: #333;
    z-index: 10001;
    width: 48px; /* Larger size for tablet */
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px; /* Optional: slight rounding for aesthetics */
  }

  /* Style navigation list */
  .main-nav__navigation-box {
    display: flex;
    flex-direction: column !important;
    padding: 70px 25px 25px; /* Increased top padding for larger close button */
    width: 100%;
    max-height: 100%;
  }

  .main-nav-one .main-nav__main-navigation .main-nav__navigation-box > li {
    padding: 0 !important;
  }

  .main-nav__navigation-box li {
    width: 100%;
  }

  .main-nav__navigation-box a {
    display: block;
    padding: 12px;
    color: #333;
    text-decoration: none;
    font-size: 18px;
    line-height: 1.6;
    width: 100%;
    box-sizing: border-box;
  }

  /* Submenu styles */
  .main-nav__navigation-box .submenu {
    padding-left: 20px;
    width: 100%;
    box-sizing: border-box;
    display: none;
  }

  .main-nav__main-navigation .main-nav__navigation-box > li > ul > li > ul {
    top: 0;
    left: 100%;
    transform: translateX(0px) !important;
    visibility: visible !important;
    opacity: 1 !important;
  }

  .main-nav__navigation-box .submenu a {
    font-size: 16px;
    padding: 10px 15px;
  }

  /* Dropdown button styles */
  .dropdown-btn {
    background: none;
    border: none;
    cursor: pointer;
    padding: 12px;
    width: 100%;
    text-align: left;
    color: #333;
    font-size: 18px;
    line-height: 1.6;
    box-sizing: border-box;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .dropdown-btn i {
    line-height: 1.6;
  }

  /* Hamburger icon */
  .side-menu__toggler {
    display: block;
    cursor: pointer;
    z-index: 10002;
    font-size: 28px;
    padding: 12px;
    position: relative;
  }

  /* Hide empty side-menu__block */
  .side-menu__block {
    display: none !important;
  }
}

/* Preserve default behavior for tablet and larger */
@media (min-width: 1024px) {
  .main-nav__main-navigation {
    position: static;
    right: auto;
    width: auto;
    height: auto;
    box-shadow: none;
    visibility: visible;
    transition: none;
    display: block !important;
  }

  .main-nav__main-navigation .close-btn {
    display: none;
  }

  .side-menu__toggler {
    display: none;
  }

  .side-menu__block {
    display: none !important;
  }
}