/* ============================================================================
   At-Your-Service directory sites -- 1st-column dropdown polish.
   Loaded ONLY on *atyourservice.com (plumbers / movers / attorneys /
   notarypublics) via a gated <link> in inc/secondrow.asp
   (flag AtYourServiceDropdownIcons in inc/MultiSiteCommon.asp).
   storeboard.com and every other site never receive this file.

   Two locked-category pills are targeted:
     Pill 1  #hamburgerBtn  -> Directory / Feed / Images / Videos / Blogs
     Pill 2  #middleCat     -> All <Category> + business sub-categories
   1) an icon to the LEFT of every option in the open panel
   2) shorten the open panel to fit its option count (the custom-scrollbar
      plugin otherwise gives it a fixed, too-tall box)
   3) match storeboard's open-option font (.font24Normal = 24px, normal)

   Every selector is prefixed with .flex-containerNew so it out-specifies the
   lock-site "unify" rules in inc/secondrow.asp (#hamburgerBtn ul li a {...20px})
   on specificity alone -- no dependence on load order.
   ============================================================================ */

/* ---- 3) font: match storeboard's open option list (24px, normal) ---------- */
.flex-containerNew #hamburgerBtn ul li a,
.flex-containerNew #middleCat ul li span{
  font-size:24px !important;
  font-weight:normal !important;
  line-height:1.3 !important;
}
/* storeboard leaves the "All <Category>" header bold -- keep it that way */
.flex-containerNew #middleCat ul li:first-child span{ font-weight:bold !important; }

/* ---- 1) make room for the icon + shared icon paint ------------------------ */
.flex-containerNew #hamburgerBtn ul li a,
.flex-containerNew #middleCat ul li span{
  background-repeat:no-repeat !important;
  background-position:14px center !important;
  background-size:18px 18px !important;
  padding-left:42px !important;
}

/* Pill 1 -- a distinct icon per media option (fixed order in secondrow.asp) */
.flex-containerNew #hamburgerBtn ul li:nth-child(1) a{ background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232ebdef' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 19.5A2.5 2.5 0 0 1 6.5 17H20'/%3E%3Cpath d='M6.5 2H20v20H6.5A2.5 2.5 0 0 1 4 19.5v-15A2.5 2.5 0 0 1 6.5 2z'/%3E%3C/svg%3E") !important; } /* Directory -> folder */
.flex-containerNew #hamburgerBtn ul li:nth-child(2) a{ background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232ebdef' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='18' height='18' rx='2' ry='2'/%3E%3Cline x1='3' y1='9' x2='21' y2='9'/%3E%3Cline x1='9' y1='21' x2='9' y2='9'/%3E%3C/svg%3E") !important; } /* Feed -> layout */
.flex-containerNew #hamburgerBtn ul li:nth-child(3) a{ background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232ebdef' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='18' height='18' rx='2' ry='2'/%3E%3Ccircle cx='8.5' cy='8.5' r='1.5'/%3E%3Cpath d='M21 15l-5-5L5 21'/%3E%3C/svg%3E") !important; } /* Images -> image */
.flex-containerNew #hamburgerBtn ul li:nth-child(4) a{ background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232ebdef' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolygon points='5 3 19 12 5 21 5 3'/%3E%3C/svg%3E") !important; } /* Videos -> play */
.flex-containerNew #hamburgerBtn ul li:nth-child(5) a{ background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232ebdef' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z'/%3E%3Cpolyline points='14 2 14 8 20 8'/%3E%3Cline x1='16' y1='13' x2='8' y2='13'/%3E%3Cline x1='16' y1='17' x2='8' y2='17'/%3E%3Cpolyline points='10 9 9 9 8 9'/%3E%3C/svg%3E") !important; } /* Blogs -> file-text */

/* Pill 2 -- folder on "All <Category>" (first option), tag on each sub-category */
.flex-containerNew #middleCat ul li span{ background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232ebdef' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20.59 13.41l-7.17 7.17a2 2 0 0 1-2.83 0L2 12V2h10l8.59 8.59a2 2 0 0 1 0 2.82z'/%3E%3Ccircle cx='7' cy='7' r='1.3'/%3E%3C/svg%3E") !important; } /* tag */
.flex-containerNew #middleCat ul li:first-child span{ background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232ebdef' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 19.5A2.5 2.5 0 0 1 6.5 17H20'/%3E%3Cpath d='M6.5 2H20v20H6.5A2.5 2.5 0 0 1 4 19.5v-15A2.5 2.5 0 0 1 6.5 2z'/%3E%3C/svg%3E") !important; } /* folder */

/* ---- 2) shorten the open panels to fit their option count ----------------- */
.flex-containerNew #hamburgerBtn ul,
.flex-containerNew #middleCat ul{
  height:auto !important;
  max-height:70vh !important;
  overflow-y:auto !important;
}
/* neutralise the mCustomScrollbar plugin's fixed-height box (the real cause of
   the too-tall panel) so the panel collapses to its content -- same approach the
   View pill + media-type panel already use in inc/secondrow.asp */
.flex-containerNew #hamburgerBtn ul .mCustomScrollBox,
.flex-containerNew #middleCat ul .mCustomScrollBox,
.flex-containerNew #hamburgerBtn ul .mCSB_container,
.flex-containerNew #middleCat ul .mCSB_container{
  height:auto !important;
  max-height:none !important;
  min-height:0 !important;
  overflow:visible !important;
  position:static !important;
}
.flex-containerNew #hamburgerBtn ul .mCSB_scrollTools,
.flex-containerNew #middleCat ul .mCSB_scrollTools{ display:none !important; }

/* ---- mobile: pull the 3 pills up (too much space above) ------------------- */
/* On phones the wrapping <table class="ays-2ndrow"> (+25px) and the lock-site
   .flex-containerNew (+24px) stacked their top margins, dropping the pill row too
   far down. Collapse both so the pills sit just under the search bar. The doubled
   class out-specifies the inline-style rule `.flex-containerNew{margin-top:24px}`. */
@media (max-width:767px){
  .ays-2ndrow{ margin-top:10px !important; }
  .flex-containerNew.flex-containerNew{ margin-top:10px !important; padding-top:0 !important; }
}