/* responsive.css
   Mobile-first responsive rules.
   - Mobile (<=720px) uses an in-flow menu and a click/toggle for Services (.dropdown.open).
   - Desktop (>=721px) uses the original hover-based absolute dropdown behavior.
*/

/* ---------- MOBILE / SMALL SCREENS ---------- */
@media (max-width: 720px) {

  /* Hide desktop nav, show via hamburger toggle */
  .navbar .nav-links {
    display: none; /* hidden until .navbar.active */
    flex-direction: column;
    background: linear-gradient(45deg, #ffcc00, #ff3300);
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    padding: 0;
    margin: 0;
    z-index: 999;
  }

  /* Show the mobile nav when hamburger toggles .active on .navbar */
  .navbar.active .nav-links {
    display: flex;
  }

  /* Each top-level item is full width with subtle border */
  .navbar .nav-links li {
    border-bottom: 1px solid rgb(0, 0, 0);
    width: 100%;
    box-sizing: border-box;
  }

  /* Links spacing for mobile */
  .navbar .nav-links a {
    padding: 12px 20px;
    display: block;
    color: #fff;
  }

  /* ===== Make the dropdown menu "in-flow" (pushes items down) =====
     Hidden by default; toggled to visible by adding .open on the parent .dropdown.
  */
  .navbar .dropdown-menu {
    display: none;          /* hidden by default */
    position: static;       /* in-flow so it pushes subsequent items */
    width: 100%;
    box-shadow: none;
    padding: 0;
    background: linear-gradient(45deg, #ffcc00, #ff3300);
  }

  /* When .dropdown has .open, show submenu (user clicked Services) */
  .navbar .dropdown.open > .dropdown-menu {
    display: block;
  }

  /* Submenu items styling for mobile (indented) */
  .navbar .dropdown-menu li {
    border: none;
    /* border-bottom: 1px solid rgb(0, 0, 0); */
    /* background: transparent; */
    background: #ff6600;
    

  }
  .navbar .dropdown-menu a {
    padding: 12px 36px; /* indent submenu items */
    display: block;
    color: #fff;
  }

  /* Rotate caret when open (mobile) */
  .navbar .dropdown.open .caret {
    transform: rotate(90deg);
    transition: transform 0.18s ease;
  }

  /* Hamburger icon visible on mobile */
  .menu-toggle {
    display: block;
    cursor: pointer;
    padding-right: 30px;
  }
  .menu-toggle span {
    display: block;
    width: 25px;
    height: 3px;
    margin: 5px;
    background: #fff;
  }
}


/* ---------- TABLET / SMALL DESKTOP (minor adjustments) ---------- */
@media (min-width: 721px) and (max-width: 1024px) {
  /* If you need tablet-specific tweaks, add them here */
  .container { padding: 0 16px; }
  .navbar .nav-links a { padding: 14px 18px; }
}


/* ---------- DESKTOP: hover-based dropdowns ---------- */
@media (min-width: 721px) {
  /* Show nav links in a row on desktop */
  .navbar .nav-links {
    display: flex !important;
    flex-direction: row;
    background: transparent;
    position: static;
  }

  /* Hide hamburger on desktop */
  .menu-toggle {
    display: none;
  }

  /* Desktop: absolute dropdown that appears on hover */
  .navbar .dropdown-menu {
    display: none;               /* hidden by default */
    position: absolute;
    top: 100%;
    left: 0;
    box-shadow: 0 4px 8px rgba(0,0,0,0.7);
    padding: 0;
    width: 280px;
    z-index: 999;
    background: #ff6600;
  }

  /* Show dropdown on hover (desktop only) */
  .navbar .dropdown:hover > .dropdown-menu {
    display: block;
  }

  /* Submenu item look on desktop */
  .navbar .dropdown-menu li {
    border: 1px solid #140f0f;
    display: block;
    background: #ff6600;
    color: #fff;
  }
  .navbar .dropdown-menu li:hover { background: #e65c00; }
  .navbar .dropdown-menu a { display: block; padding: 10px 20px; color: #fff; }

  /* Caret rotation on desktop when hover (optional) */
  .navbar .dropdown:hover .caret {
    transform: rotate(90deg);
    transition: transform 0.18s ease;
  }
}


/* ---------- SMALL EXTRA: keep sections spacing consistent ---------- */
@media (max-width: 768px) {
  .container {
    padding: 0 10px;
  }
  .section {
    padding: 60px 20px;
  }
}