/**
 * DS Mobile Menu — Core Frontend Stylesheet
 *
 * Contains the base structural styles shared by all six layout presets.
 * All visual customisation is expressed via CSS custom properties which
 * are set by the dynamically generated dsmm-dynamic.css.
 *
 * @package DSMobileMenu
 * @since   1.0.0
 */

/* ---------------------------------------------------------------------------
   Custom Property Defaults (overridden by dsmm-dynamic.css)
   --------------------------------------------------------------------------- */
:root {
  --dsmm-primary:          #4F46E5;
  --dsmm-primary-hover:    #4338CA;
  --dsmm-secondary:        #7C3AED;
  --dsmm-bg:               #FFFFFF;
  --dsmm-bg-opacity:       1;
  --dsmm-text:             #374151;
  --dsmm-text-muted:       #9CA3AF;
  --dsmm-active:           #4F46E5;
  --dsmm-inactive:         #9CA3AF;
  --dsmm-border:           #E5E7EB;
  --dsmm-badge-bg:         #EF4444;
  --dsmm-badge-color:      #FFFFFF;
  --dsmm-height:           64px;
  --dsmm-icon-size:        24px;
  --dsmm-font-size:        11px;
  --dsmm-font-family:      inherit;
  --dsmm-font-weight:      500;
  --dsmm-padding-x:        8px;
  --dsmm-padding-y:        8px;
  --dsmm-radius:           0px;
  --dsmm-border-width:     1px;
  --dsmm-blur:             12px;
  --dsmm-shadow:           0 -2px 20px rgba(0, 0, 0, 0.08);
  --dsmm-transition:       0.2s ease;
  --dsmm-z-index:          999999999;
  --dsmm-safe-area-bottom: env(safe-area-inset-bottom, 0px);
  /* Active background pill — percentage of nav height (default 76%) */
  --dsmm-active-pill-size: 76%;
}

/* ---------------------------------------------------------------------------
   Nav Wrapper
   --------------------------------------------------------------------------- */
#dsmm-nav,
.dsmm-nav {
  position:        fixed;
  bottom:          0;
  left:            0;
  right:           0;
  z-index:         var(--dsmm-z-index);
  height:          calc(var(--dsmm-height) + var(--dsmm-safe-area-bottom));
  padding-bottom:  var(--dsmm-safe-area-bottom);
  background:      rgba(var(--dsmm-bg-rgb, 255, 255, 255), var(--dsmm-bg-opacity));
  background-color: var(--dsmm-bg);
  border-top:      var(--dsmm-border-width) solid var(--dsmm-border);
  box-shadow:      var(--dsmm-shadow);
  font-family:     var(--dsmm-font-family);
  border-radius:   var(--dsmm-radius) var(--dsmm-radius) 0 0;
  transition:      transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.4s ease, background-color 0.2s ease, box-shadow 0.2s ease;
}

/* ---------------------------------------------------------------------------
   Keyboard Open State (Hide nav on typing)
   --------------------------------------------------------------------------- */
body.dsmm-keyboard-open #dsmm-nav,
body.dsmm-keyboard-open .dsmm-nav {
  display: none !important;
}


/* Modifier: Hide on scroll down */
#dsmm-nav.dsmm-nav--hidden,
.dsmm-nav.dsmm-nav--hidden {
  transform: translateY(calc(100% + 40px));
  opacity: 0;
  pointer-events: none;
}

/* Utility: push page body up so content is not hidden behind the nav */
body.dsmm-active {
  padding-bottom: calc(var(--dsmm-height) + var(--dsmm-safe-area-bottom) + 30px);
}

/* ---------------------------------------------------------------------------
   Nav List
   --------------------------------------------------------------------------- */
.dsmm-nav__list {
  display:         flex;
  align-items:     stretch;
  height:          var(--dsmm-height);
  margin:          0;
  padding:         0 var(--dsmm-padding-x);
  list-style:      none;
}

/* Item: centered so the link pill has equal top/bottom breathing room */
.dsmm-nav__item {
  flex:            1;
  display:         flex;
  align-items:     center;   /* ← was stretch: links no longer fill full height */
  justify-content: center;
  min-width:       0;
}

/* ---------------------------------------------------------------------------
   Nav Link
   --------------------------------------------------------------------------- */
.dsmm-nav__link {
  display:         flex;
  flex-direction:  column;
  align-items:     center;
  justify-content: center;
  /* Use a percentage of the nav height so top/bottom margins are always equal */
  height:          var(--dsmm-active-pill-size);
  width:           100%;
  gap:             3px;
  padding:         var(--dsmm-padding-y) var(--dsmm-padding-x);
  text-decoration: none;
  color:           var(--dsmm-inactive);
  font-size:       var(--dsmm-font-size);
  font-weight:     var(--dsmm-font-weight);
  line-height:     1.2;
  border-radius:   var(--dsmm-radius);
  transition:      color var(--dsmm-transition),
                   background var(--dsmm-transition),
                   transform var(--dsmm-transition);
  cursor:          pointer;
  -webkit-tap-highlight-color: transparent;
  outline-offset:  2px;
}

.dsmm-nav__link:hover {
  color:           var(--dsmm-active);
  text-decoration: none;
}

.dsmm-nav__link.dsmm-is-active {
  color:           var(--dsmm-active);
}

.dsmm-nav__link:focus-visible {
  outline:         2px solid var(--dsmm-primary);
  outline-offset:  2px;
  border-radius:   4px;
}

/* ---------------------------------------------------------------------------
   Icon Wrapper
   --------------------------------------------------------------------------- */
.dsmm-nav__icon-wrap {
  position:       relative;
  display:        inline-flex;
  align-items:    center;
  justify-content: center;
  flex-shrink:    0;
}

/* Dashicons reset (they have display:inline-block with fixed size in WP) */
.dsmm-nav__icon-wrap .dashicons {
  font-size:   var(--dsmm-icon-size);
  width:       var(--dsmm-icon-size);
  height:      var(--dsmm-icon-size);
  line-height: var(--dsmm-icon-size);
  color:       inherit;
}

/* Font Awesome icons */
.dsmm-nav__icon-wrap [class*="fa-"] {
  font-size:   var(--dsmm-icon-size);
  color:       inherit;
}

/* SVG icons */
.dsmm-nav__icon-wrap svg {
  width:  var(--dsmm-icon-size);
  height: var(--dsmm-icon-size);
  fill:   currentColor;
}

/* ---------------------------------------------------------------------------
   Label
   --------------------------------------------------------------------------- */
.dsmm-nav__label {
  display:     block;
  font-size:   var(--dsmm-font-size);
  line-height: 1;
  white-space: nowrap;
  overflow:    hidden;
  text-overflow: ellipsis;
  max-width:   80px;
}

/* ---------------------------------------------------------------------------
   Badge
   --------------------------------------------------------------------------- */
.dsmm-badge {
  position:        absolute;
  top:             -5px;
  right:           -8px;
  min-width:       16px;
  height:          16px;
  padding:         0 4px;
  border-radius:   8px;
  background:      var(--dsmm-badge-bg);
  color:           var(--dsmm-badge-color);
  font-size:       10px;
  font-weight:     700;
  line-height:     16px;
  text-align:      center;
  white-space:     nowrap;
  pointer-events:  none;
  transition:      opacity 0.2s ease, transform 0.2s ease;
}

.dsmm-badge--hidden {
  opacity:   0;
  transform: scale(0.6);
}

/* ---------------------------------------------------------------------------
   Animations
   --------------------------------------------------------------------------- */
@keyframes dsmm-bounce {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-6px); }
}

@keyframes dsmm-pulse {
  0%, 100% { transform: scale(1); }
  50%       { transform: scale(1.2); }
}

@keyframes dsmm-shake {
  0%, 100%  { transform: rotate(0deg); }
  25%        { transform: rotate(-12deg); }
  75%        { transform: rotate(12deg); }
}

@keyframes dsmm-scale {
  0%, 100% { transform: scale(1); }
  50%       { transform: scale(1.3); }
}

.dsmm-nav__link.dsmm-is-active .dsmm-nav__icon-wrap .dsmm-anim--bounce {
  animation: dsmm-bounce 0.5s ease;
}

.dsmm-nav__link.dsmm-is-active .dsmm-nav__icon-wrap .dsmm-anim--pulse {
  animation: dsmm-pulse 0.5s ease;
}

.dsmm-nav__link.dsmm-is-active .dsmm-nav__icon-wrap .dsmm-anim--shake {
  animation: dsmm-shake 0.5s ease;
}

.dsmm-nav__link.dsmm-is-active .dsmm-nav__icon-wrap .dsmm-anim--scale {
  animation: dsmm-scale 0.3s ease;
}

/* Item-level animation applied to the whole link */
.dsmm-nav__link.dsmm-anim--bounce:active { animation: dsmm-bounce 0.4s ease; }
.dsmm-nav__link.dsmm-anim--pulse:active  { animation: dsmm-pulse  0.4s ease; }
.dsmm-nav__link.dsmm-anim--shake:active  { animation: dsmm-shake  0.4s ease; }
.dsmm-nav__link.dsmm-anim--scale:active  { animation: dsmm-scale  0.3s ease; }

/* ---------------------------------------------------------------------------
   Screen-reader only utility
   --------------------------------------------------------------------------- */
.dsmm-sr-only {
  position:   absolute;
  width:      1px;
  height:     1px;
  padding:    0;
  margin:     -1px;
  overflow:   hidden;
  clip:       rect(0, 0, 0, 0);
  white-space: nowrap;
  border:     0;
}

/* ---------------------------------------------------------------------------
   RTL support
   --------------------------------------------------------------------------- */
.dsmm-rtl .dsmm-nav__list {
  direction: rtl;
}

.dsmm-rtl .dsmm-badge {
  right: auto;
  left:  -8px;
}

/* ---------------------------------------------------------------------------
   Tooltip (shown on hover via CSS, for desktop use case)
   --------------------------------------------------------------------------- */
.dsmm-nav__link[data-tooltip]:hover::after {
  content:          attr(data-tooltip);
  position:         absolute;
  bottom:           calc(100% + 8px);
  left:             50%;
  transform:        translateX(-50%);
  background:       rgba(17, 24, 39, 0.9);
  color:            #fff;
  font-size:        11px;
  line-height:      1.4;
  padding:          4px 8px;
  border-radius:    4px;
  white-space:      nowrap;
  pointer-events:   none;
  z-index:          1;
}