/**
 * DS Mobile Menu — Layout: Center FAB
 *
 * Standard navigation bar with the middle item elevated as a large
 * Floating Action Button (FAB) that extends above the bar.
 * A smooth curved notch (cutout) at the top edge of the bar wraps
 * around the FAB, creating a seamless, premium look.
 *
 * The third nav item (index 2 of 5, or index 1 of 3) is promoted to FAB.
 * This is handled automatically via CSS :nth-child selectors.
 *
 * @package DSMobileMenu
 * @since   1.0.0
 */

/* ---------------------------------------------------------------------------
   Nav wrapper — transparent bg, notch-aware shadow
   --------------------------------------------------------------------------- */
#dsmm-nav.dsmm-layout-center-fab,
.dsmm-nav.dsmm-layout-center-fab {
  overflow:           visible;
  background:         transparent !important;
  background-color:   transparent !important;
  border-top:         none !important;
  box-shadow:         none !important;
  /* drop-shadow follows the masked ::before shape including the notch curve */
  filter:             drop-shadow(0 -2px 8px rgba(0, 0, 0, 0.10));
}

/* ---------------------------------------------------------------------------
   ::before — bar background with curved notch cutout at top-center
   --------------------------------------------------------------------------- */
/* Body offset needs to account for the protruding FAB (+ 28px extra) + 40px requested margin */
body.dsmm-active.dsmm-layout-center-fab {
  padding-bottom: calc(var(--dsmm-height) + var(--dsmm-safe-area-bottom) + 50px);
}

#dsmm-nav.dsmm-layout-center-fab::before,
.dsmm-nav.dsmm-layout-center-fab::before {
  content:          '';
  position:         absolute;
  inset:            0;
  z-index:          -1;
  background:       rgba(var(--dsmm-bg-rgb, 255, 255, 255), var(--dsmm-bg-opacity));
  background-color: var(--dsmm-bg);
  border-radius:    var(--dsmm-radius) var(--dsmm-radius) 0 0;

  /*
   * Notch: circle centered at top-center of the bar (y=0).
   * Radius 36px = FAB radius (28px) + 8px breathing gap.
   * The bottom-half of the circle cuts into the bar creating the curved notch.
   */
  -webkit-mask-image: radial-gradient(circle 36px at 50% 0, transparent 35px, black 36px);
  mask-image:         radial-gradient(circle 36px at 50% 0, transparent 35px, black 36px);
}

/* ---------------------------------------------------------------------------
   Nav list — DO NOT override align-items.
   Core CSS uses "stretch" which makes items fill the full bar height.
   --------------------------------------------------------------------------- */

/* Non-FAB links: use auto height so icon+label stay compact and centered */
.dsmm-layout-center-fab .dsmm-nav__list > .dsmm-nav__item:not(:nth-child(3)) .dsmm-nav__link {
  height:          auto;
  padding:         var(--dsmm-padding-y) var(--dsmm-padding-x);
  flex-direction:  column;
  align-items:     center;
  justify-content: center;
  gap:             3px;
}

/* ---------------------------------------------------------------------------
   FAB item slot — position: static so the FAB link positions to the NAV BAR
   (the nearest positioned ancestor), not to this <li>.
   This lets us use left: 50% to center relative to the full bar width.
   --------------------------------------------------------------------------- */
.dsmm-layout-center-fab .dsmm-nav__item:nth-child(3 of .dsmm-nav__item),
.dsmm-layout-center-fab .dsmm-nav__list > .dsmm-nav__item:nth-child(3) {
  position: static; /* NOT relative — FAB link anchors to the nav bar */
  flex:     0 0 80px;
}

/* ---------------------------------------------------------------------------
   FAB link — absolutely positioned to the nav bar (position: fixed parent)
   FAB center sits at the bar's top edge:
     bottom = nav height − half FAB height = --dsmm-height − 28px
   --------------------------------------------------------------------------- */
.dsmm-layout-center-fab .dsmm-nav__list > .dsmm-nav__item:nth-child(3) .dsmm-nav__link {
  position:       absolute;
  left:           50%;
  top:            -28px;
  transform:      translateX(-50%);
  width:          56px;
  height:         56px;
  border-radius:  50%;
  background:     linear-gradient(135deg, var(--dsmm-primary), var(--dsmm-secondary));
  color:          #fff !important;
  box-shadow:     0 4px 20px rgba(79, 70, 229, 0.40);
  flex-direction: column;
  padding:        4px;
  transition:     box-shadow var(--dsmm-transition);
  will-change:    transform;
}

/* Force white icons inside the FAB */
.dsmm-layout-center-fab .dsmm-nav__list > .dsmm-nav__item:nth-child(3) .dsmm-nav__link .dashicons,
.dsmm-layout-center-fab .dsmm-nav__list > .dsmm-nav__item:nth-child(3) .dsmm-nav__link svg {
  color: #fff;
  fill:  #fff;
}

/* Hide label on FAB — icon only */
.dsmm-layout-center-fab .dsmm-nav__list > .dsmm-nav__item:nth-child(3) .dsmm-nav__link .dsmm-nav__label {
  display: none !important;
}

/* Press effect */
.dsmm-layout-center-fab .dsmm-nav__list > .dsmm-nav__item:nth-child(3) .dsmm-nav__link:active {
  transform:  translateX(-50%) scale(0.92);
  box-shadow: 0 2px 10px rgba(79, 70, 229, 0.5);
}

/* ---------------------------------------------------------------------------
   Non-FAB items — uniform icon sizing (22px) for visual consistency
   --------------------------------------------------------------------------- */
.dsmm-layout-center-fab .dsmm-nav__list > .dsmm-nav__item:not(:nth-child(3)) .dsmm-nav__icon-wrap {
  width:           22px;
  height:          22px;
  display:         inline-flex;
  align-items:     center;
  justify-content: center;
  flex-shrink:     0;
}

.dsmm-layout-center-fab .dsmm-nav__list > .dsmm-nav__item:not(:nth-child(3)) .dsmm-nav__icon-wrap .dashicons {
  font-size:   22px !important;
  width:       22px !important;
  height:      22px !important;
  line-height: 22px !important;
}

.dsmm-layout-center-fab .dsmm-nav__list > .dsmm-nav__item:not(:nth-child(3)) .dsmm-nav__icon-wrap svg {
  width:  22px !important;
  height: 22px !important;
}

.dsmm-layout-center-fab .dsmm-nav__list > .dsmm-nav__item:not(:nth-child(3)) .dsmm-nav__icon-wrap [class*="fa-"] {
  font-size: 22px !important;
}

/* ---------------------------------------------------------------------------
   Active state & indicator line — non-FAB items only
   --------------------------------------------------------------------------- */
.dsmm-layout-center-fab .dsmm-nav__link {
  border-radius: 10px;
  position:      relative;
}

.dsmm-layout-center-fab .dsmm-nav__link.dsmm-is-active:not([style*="background"]) {
  color: var(--dsmm-active);
}

/* Active indicator line (top border) */
.dsmm-layout-center-fab .dsmm-nav__list > .dsmm-nav__item:not(:nth-child(3)) .dsmm-nav__link::before {
  content:       '';
  position:      absolute;
  top:           0;
  left:          50%;
  transform:     translateX(-50%) scaleX(0);
  width:         24px;
  height:        3px;
  background:    var(--dsmm-active);
  border-radius: 0 0 3px 3px;
  transition:    transform var(--dsmm-transition);
}

/* Show active indicator on active non-FAB items */
.dsmm-layout-center-fab .dsmm-nav__list > .dsmm-nav__item:not(:nth-child(3)) .dsmm-nav__link.dsmm-is-active::before {
  transform: translateX(-50%) scaleX(1);
}