/* RCS live main nav (UberMenu config: main) — Tabs & Submenu visual refresh.
   Scoped entirely to .ubermenu-main so it cannot affect any other menu/config on the site.
   Colors/fonts for tabs+links are also set natively via the UberMenu Style Editor
   (ubermenu_main option: style_tabs_*, style_normal_font_color_hover, style_submenu_border_color,
   style_submenu_dropshadow_opacity) — this file only adds the layout/shape polish those controls don't cover. */

.ubermenu-main{--rcs-line:#e5e5e5;--rcs-soft:#f6f6f6;--rcs-mut:#767676}

/* Outer dropdown panel: rounded card, thin border, slight lift off the nav bar */
.ubermenu-main .ubermenu-submenu-drop{
  border-radius:14px;
  overflow:hidden;
  margin-top:10px;
  border:1px solid var(--rcs-line);
}

/* Breathing room inside every mega panel (flat-column menus get this directly;
   tabs menus get it too, on top of the sidebar/panel's own inner padding below) */
.ubermenu-main .ubermenu-submenu-type-mega{padding:16px}

/* ---- Tabs-style submenus (Surgical / Medical Services / Aesthetics) ---- */
.ubermenu-main .ubermenu-tabs-group{
  padding:14px 10px;
  border-right:1px solid var(--rcs-line);
}
.ubermenu-main .ubermenu-tabs-group:before{
  content:'Browse by area';
  display:block;
  padding:8px 12px 10px;
  font-size:11px;
  font-weight:700;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--rcs-mut);
}
.ubermenu-main .ubermenu-tabs-group > .ubermenu-tab > .ubermenu-target{
  border-radius:10px;
  padding:10px 30px 10px 12px;
  position:relative;
  cursor:pointer;
}
.ubermenu-main .ubermenu-tabs-group > .ubermenu-tab > .ubermenu-target:after{
  content:'';
  position:absolute;
  right:14px;
  top:50%;
  width:6px;
  height:6px;
  border-right:1.6px solid currentColor;
  border-top:1.6px solid currentColor;
  transform:translateY(-65%) rotate(45deg);
}
.ubermenu-main .ubermenu-tab-content-panel{padding:22px 24px}

/* ---- Leaf links everywhere inside a submenu: tabs panel, flat mega columns, and the simple flyout (Others) ---- */
.ubermenu-main .ubermenu-submenu .ubermenu-item-normal > .ubermenu-target{
  font-size:14.5px;
  padding:6px 14px;
  line-height:1.4;
  border-radius:7px;
}
.ubermenu-main .ubermenu-submenu .ubermenu-item-normal > .ubermenu-target:hover{
  text-decoration:underline;
  text-underline-offset:3px;
}

/* ---- Simple flyout (Others): a touch more side padding so it doesn't feel cramped ---- */
.ubermenu-main .ubermenu-submenu-type-flyout{padding:10px 6px}

/* ---- Panel heading row + featured card (added for the mockup-matching tabs design) ---- */
.ubermenu-main .ubermenu-tab.ubermenu-active > .ubermenu-tab-content-panel{
  display:grid!important;
  grid-template-columns:repeat(3,1fr) 224px;
  column-gap:24px;
  row-gap:0;
  align-items:start;
}
.ubermenu-main .ubermenu-tab-content-panel > .ubermenu-item-type-column{
  width:auto!important;
  grid-column:auto;
  grid-row:2;
}

.ubermenu-main .rcs2-ph{
  grid-column:1/-1;
  grid-row:1;
  width:100%!important;
  margin:0 0 18px;
  padding:0 0 14px;
  border-bottom:1px solid var(--rcs-line);
}
.ubermenu-main .rcs2-ph-row{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;flex-wrap:wrap}
.ubermenu-main .rcs2-ph-title{margin:0;font-size:22px;font-weight:700;line-height:1.25;color:#111}
.ubermenu-main .rcs2-ph-intro{margin:4px 0 0;font-size:13px;line-height:1.4;color:var(--rcs-mut)}
.ubermenu-main .rcs2-ph-all{flex:0 0 auto;font-size:13px;font-weight:600;color:#111!important;text-decoration:underline!important;text-underline-offset:3px;white-space:nowrap}

.ubermenu-main .rcs2-feat{
  grid-column:4;
  grid-row:2;
  width:224px!important;
  background:#000;
  border-radius:14px;
  padding:22px 21px 20px;
  color:#fff;
  align-self:start;
}
.ubermenu-main .rcs2-pill{display:inline-block;background:#AE8207;color:#fff;font-size:10.5px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;line-height:1;padding:5px 8px;border-radius:999px;margin-bottom:12px}
.ubermenu-main .rcs2-feat-title{display:block;margin:0;font-size:19px;font-weight:700;line-height:1.25;color:#fff!important}
.ubermenu-main .rcs2-feat-text{margin:9px 0 16px;font-size:13px;line-height:1.45;color:#dcdcdc}
.ubermenu-main .rcs2-btn{display:flex;align-items:center;justify-content:center;height:40px;border-radius:8px;background:#fff;color:#000!important;font-size:13.5px;font-weight:600;line-height:1;text-decoration:none!important}
.ubermenu-main .rcs2-btn:hover{background:#f0f0f0}
.ubermenu-main .rcs2-feat-link{display:block;margin-top:14px;text-align:center;font-size:13px;font-weight:600;color:#fff!important;text-decoration:underline!important;text-underline-offset:3px}

/* Tab subtitle (description) under each tab name in the left sidebar */
.ubermenu-main .ubermenu-tabs-group .ubermenu-target-divider{display:none!important}
.ubermenu-main .ubermenu-tabs-group .ubermenu-target-description{display:block;margin-top:2px;font-size:12px;font-weight:400;line-height:1.3;color:var(--rcs-mut)}
.ubermenu-main .ubermenu-tabs-group .ubermenu-target-title{display:block}

/* Mobile: keep the native accordion plain — hide the new heading/featured blocks and let link columns stack normally */
@media (max-width:959px){
  .ubermenu-main .ubermenu-tab.ubermenu-active > .ubermenu-tab-content-panel{
    display:block!important;
  }
  .ubermenu-main .rcs2-ph,
  .ubermenu-main .rcs2-feat{
    display:none!important;
  }
}