/* =====================================================
   ROW 1 — Primary nav (Services removed, lives in row 2)
   ===================================================== */

.sdes-main-menu{flex:1 1 auto;min-width:0;display:flex;align-items:center;justify-content:center;height:100%;}
.sdes-menu-list{display:flex;align-items:center;justify-content:center;gap:2px;list-style:none;padding:0;margin:0;height:100%;}
.sdes-menu-list>li{position:relative;display:flex;align-items:center;min-height:44px;}

.sdes-menu-list>li>a{
  position:relative;
  display:inline-flex;align-items:center;justify-content:center;
  min-height:40px;padding:8px 12px;
  border-radius:10px 10px 0 0;
  color:#1e293b;font-size:13px;font-weight:800;white-space:nowrap;line-height:1;
  transition:color .16s ease,background .16s ease;
}
.sdes-menu-list>li>a::after{
  content:"";position:absolute;left:12px;right:12px;bottom:0;height:2px;
  background:#ff8a00;border-radius:2px;
  transform:scaleX(0);transform-origin:center;
  transition:transform .2s cubic-bezier(.4,0,.2,1);
}
.sdes-menu-list>li>a:hover{background:#fff7ed;color:#ff8a00;}
.sdes-menu-list>li>a.active{color:#ff8a00;}
.sdes-menu-list>li>a.active::after,
.sdes-menu-list>li>a:hover::after{transform:scaleX(1);}

/* Dark mode top nav */
html[data-theme="dark"] .sdes-menu-list>li>a,
body[data-theme="dark"] .sdes-menu-list>li>a{color:#dbeafe;}
html[data-theme="dark"] .sdes-menu-list>li>a:hover,
html[data-theme="dark"] .sdes-menu-list>li>a.active,
body[data-theme="dark"] .sdes-menu-list>li>a:hover,
body[data-theme="dark"] .sdes-menu-list>li>a.active{background:rgba(255,138,0,.14);color:#ff8a00;}

/* Hover bridge so dropdown doesn't close on the gap */
.sdes-about-parent::after,
.sdes-industries-parent::after{content:"";position:absolute;left:0;right:0;top:100%;height:14px;display:block;}

/* ── ABOUT US dropdown ── */
.sdes-about-dropdown{
  position:absolute;top:calc(100% + 8px);left:0;width:235px;padding:10px 12px;
  background:#fff;border:1px solid #dbe4f0;border-radius:16px;
  box-shadow:0 18px 45px rgba(15,23,42,.14);
  opacity:0;visibility:hidden;transform:translateY(8px);z-index:9999;
  transition:.16s ease;
}
.sdes-about-parent:hover>.sdes-about-dropdown,
.sdes-about-parent:focus-within>.sdes-about-dropdown,
.sdes-about-dropdown:hover{opacity:1;visibility:visible;transform:translateY(0);}
.sdes-about-dropdown a{
  display:block;min-height:40px;padding:10px 14px;background:#fff;
  border-left:3px solid transparent;border-radius:0 9px 9px 0;
  color:#1e293b;font-size:14px;font-weight:800;
  transition:background .14s,border-color .14s,color .14s;
}
.sdes-about-dropdown a:hover{background:#fff7ed;border-left-color:#ff8a00;color:#ff8a00;}

/* ── INDUSTRIES dropdown ── */
.sdes-industries-dropdown{
  position:absolute;top:calc(100% + 8px);left:0;width:min(980px,calc(100vw - 60px));
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px 16px;padding:14px;
  background:#fff;border:1px solid #dbe4f0;border-radius:16px;
  box-shadow:0 18px 45px rgba(15,23,42,.14);
  opacity:0;visibility:hidden;transform:translateY(8px);z-index:9999;
  transition:.16s ease;
}
.sdes-industries-parent:hover>.sdes-industries-dropdown,
.sdes-industries-parent:focus-within>.sdes-industries-dropdown,
.sdes-industries-dropdown:hover{opacity:1;visibility:visible;transform:translateY(0);}
.sdes-industries-dropdown a{
  display:block;min-height:40px;padding:8px 10px;background:#fff;
  border-left:3px solid transparent;border-radius:0 9px 9px 0;
  color:#1e293b;font-size:13px;font-weight:700;white-space:nowrap;
  transition:background .14s,border-color .14s,color .14s;
}
.sdes-industries-dropdown a:hover{background:#fff7ed;border-left-color:#ff8a00;color:#ff8a00;}

/* Dark mode dropdowns stay white (matches existing site convention) */
html[data-theme="dark"] .sdes-about-dropdown,
html[data-theme="dark"] .sdes-industries-dropdown,
body[data-theme="dark"] .sdes-about-dropdown,
body[data-theme="dark"] .sdes-industries-dropdown{background:#fff;border-color:#dbe4f0;color:#1e293b;}
html[data-theme="dark"] .sdes-about-dropdown a,
html[data-theme="dark"] .sdes-industries-dropdown a,
body[data-theme="dark"] .sdes-about-dropdown a,
body[data-theme="dark"] .sdes-industries-dropdown a{color:#1e293b;background:#fff;}
html[data-theme="dark"] .sdes-about-dropdown a:hover,
html[data-theme="dark"] .sdes-industries-dropdown a:hover,
body[data-theme="dark"] .sdes-about-dropdown a:hover,
body[data-theme="dark"] .sdes-industries-dropdown a:hover{background:#fff7ed;color:#ff8a00;}

/* ── Mobile-only controls (hidden on desktop) ── */
.sdes-caret{display:none;}
.sdes-mobile-toggle{display:none;}

/* ── MOBILE ── */
@media(max-width:1050px){
  /* The old hamburger is replaced by the inline "Browse Pages"
     toggle below, and the top trust-bar is dropped to save space
     on narrow screens. */
  #menuToggle{display:none !important;}
  .top-bar{display:none !important;}

  /* Let the header wrap onto two lines: [logo ... dark-toggle]
     on line 1, then this nav (forced to 100% width) flows onto
     its own full-width line 2 — directly above services-bar.php's
     "Browse Services" row, which is a separate block right after
     this header. */
  .header-inner{flex-wrap:wrap;}
  .logo{order:1;}
  .dark-toggle{order:2;}

  .sdes-main-menu{
    order:3;
    flex:1 1 100%;width:100%;
    display:block;
    position:static;
    background:transparent;border:0;box-shadow:none;
    padding:0;margin:0;
    max-height:none;overflow:visible;
    z-index:auto;
  }

  .sdes-mobile-toggle{
    display:flex;align-items:center;justify-content:space-between;
    width:100%;padding:11px 2px;
    background:transparent;border:0;border-top:1px solid rgba(15,23,42,.08);
    font-family:inherit;font-size:14px;font-weight:800;color:#1e293b;
    cursor:pointer;
  }
  .sdes-mobile-toggle::after{
    content:"";width:9px;height:9px;flex-shrink:0;
    border-right:2px solid currentColor;border-bottom:2px solid currentColor;
    transform:rotate(45deg);transition:transform .18s ease;
  }
  .sdes-main-menu.sdes-pages-open .sdes-mobile-toggle::after{transform:rotate(-135deg);}

  .sdes-menu-list{
    display:none;height:auto;gap:0;
    background:#fff;border:1px solid #e5e7eb;border-radius:12px;
    padding:6px;margin:2px 0 10px;
  }
  .sdes-main-menu.sdes-pages-open .sdes-menu-list{display:block;}
  .sdes-menu-list>li{display:block;min-height:0;}

  .sdes-menu-list>li>a{width:100%;justify-content:flex-start;border-radius:8px;padding:13px 12px;min-height:48px;}
  .sdes-menu-list>li>a::after{display:none;}

  /* Parent items: link takes the row, caret is a separate tap target */
  .sdes-has-menu{display:flex;flex-wrap:wrap;align-items:center;}
  .sdes-has-menu>a{flex:1 1 auto;}
  .sdes-caret{
    display:inline-flex;align-items:center;justify-content:center;
    width:44px;height:44px;flex-shrink:0;
    background:transparent;border:0;color:#475569;cursor:pointer;
  }
  .sdes-caret::before{
    content:"";width:9px;height:9px;
    border-right:2px solid currentColor;border-bottom:2px solid currentColor;
    transform:rotate(45deg);transition:transform .18s ease;
  }
  .sdes-has-menu.sdes-open>.sdes-caret::before{transform:rotate(-135deg);}

  .sdes-about-dropdown,.sdes-industries-dropdown{
    position:static;width:100%;opacity:1;visibility:visible;transform:none;
    box-shadow:none;border:0;background:#f8fafc;border-radius:10px;
    display:none;margin:2px 0 8px;padding:6px;
  }
  .sdes-has-menu.sdes-open>.sdes-about-dropdown,
  .sdes-has-menu.sdes-open>.sdes-industries-dropdown{display:block;}
  .sdes-industries-dropdown{grid-template-columns:1fr;max-height:50vh;overflow-y:auto;}

  /* Desktop-only hover bridge — irrelevant once accordion/tap drives
     the open state, and would otherwise sit on top of the next item. */
  .sdes-about-parent::after,
  .sdes-industries-parent::after{display:none;}

  /* The panel itself is always white (matches the dropdown
     convention above), so its link text must stay dark even in
     dark mode — the light "#dbeafe" used for the translucent dark
     header row is otherwise nearly invisible on a white panel. */
  html[data-theme="dark"] .sdes-menu-list>li>a,
  body[data-theme="dark"] .sdes-menu-list>li>a{color:#1e293b;}
  html[data-theme="dark"] .sdes-menu-list>li>a:hover,
  html[data-theme="dark"] .sdes-menu-list>li>a.active,
  body[data-theme="dark"] .sdes-menu-list>li>a:hover,
  body[data-theme="dark"] .sdes-menu-list>li>a.active{background:#fff7ed;color:#ff8a00;}

  html[data-theme="dark"] .sdes-mobile-toggle,
  body[data-theme="dark"] .sdes-mobile-toggle{color:#dbeafe;}
}