/*
Theme Name: Motta Child Theme
Theme URI: http://motta.uix.store/
Author: UIX Themes
Author URI: http://uix.store
Description: A fully responsive Premium WordPress Theme with a pixel perfect design and extensive functionality
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: motta
Tags: one-column, two-columns, right-sidebar, custom-colors, custom-menu, featured-images, flexible-header, microformats, post-formats, rtl-language-support, sticky-post, threaded-comments, translation-ready
Template: motta
*/
/* Let the center area wrap to multiple rows (main + sticky) */
.site-header__desktop .header-main .header-center-items,
.site-header__desktop .header-sticky .header-center-items{
  display: flex !important;
  flex-wrap: wrap !important;
}

/* Put search on its own line, and our special menu on the next line */
.site-header__desktop .header-main .header-center-items .header-search,
.site-header__desktop .header-sticky .header-center-items .header-search,
.site-header__desktop .header-main .header-center-items .cs-special-under-search,
.site-header__desktop .header-sticky .header-center-items .cs-special-under-search{
  flex: 0 0 100% !important;
  width: 100% !important;
}

/* Style the special menu row (separator at the bottom) */
.cs-special-under-search{
  margin-top: 8px;
  padding: 6px 0 10px;
  border-bottom: 1px solid var(--motta-border-color, rgba(0,0,0,.12));
}

/* Center the links and space them nicely */
.cs-special-under-search .special-navigation > ul{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 24px;
  padding-right: 90px;
}

/* Optional: a trailing vertical bar after the last item */
/*
.cs-special-under-search .special-navigation > ul > li:last-child::after{
  content: "|";
  margin-left: 12px;
  opacity: .4;
}
*/


/* optional: hide in sticky header just in case */
.site-header__desktop .header-sticky .cs-special-under-search{
  display:none !important;
}

/* Keep left/right on the first row; let center go full-width below at 1000–1320px */
@media (min-width:1000px) and (max-width:1320px){

  /* Make the header rows wrap cleanly */
  .site-header__desktop .header-main,
  .site-header__desktop .header-sticky{
    display:flex;
    flex-wrap:wrap;
    align-items:center;
  }

  /* Keep left/right compact and on the top row */
  .site-header__desktop .header-main .header-left-items,
  .site-header__desktop .header-main .header-right-items,
  .site-header__desktop .header-sticky .header-left-items,
  .site-header__desktop .header-sticky .header-right-items{
    flex:0 0 auto;
  }

  /* Force the center column (search + special menu) to its own full row */
  .site-header__desktop .header-main .header-center-items,
  .site-header__desktop .header-sticky .header-center-items{
    flex:1 0 100% !important;
    min-width:100%;
    order:3; /* push center below left/right if needed */
  }

  /* shrink the special menu spacing so it doesn’t overflow */
  .cs-special-under-search{
    margin-top:6px;
    padding:4px 0 6px;
    border-bottom:1px solid var(--motta-border-color, rgba(0,0,0,.12));
  }

  /* THIS was likely the culprit: remove the hard 90px padding on smaller widths */
  .cs-special-under-search .special-navigation > ul{
    padding-right:0 !important;
    gap:12px !important;
    justify-content:center;
    flex-wrap:wrap;
    max-width:100%;
  }

  /* Optional: slightly smaller text in that band */
  .cs-special-under-search .special-navigation > ul > li > a{
    font-size:13px;
    line-height:1.2;
  }
}