.results-title{background:#F8F8F8;font-weight:bold;font-size:14px;padding:15px 10px;border-bottom:1px solid #CCC;border-top:1px solid #CCC;}
.search-box-title{color:#666;margin-bottom:10px;font-size:20px;}

.search-box-container{padding:30px;background:#F8F8F8;border-bottom:1px solid #CCC;}


#header-basic .search-box-container{background:#0067CE;border-bottom:0;}

#search-results{min-height:400px;}



.master-venue-title{font-size:20px;}


li.micro-venue-result img{height:40px;margin-right:10px;float:left;}

li.micro-venue-result{line-height:20px;font-size:14px;padding:10px 20px;overflow:auto;}

li.micro-venue-result .greyText{font-size:12px;}




#search-results ul{padding-bottom:12px;}
#search-results li{padding:12px 40px;}
#search-results .title{
   font-weight:bold;
   font-size: 1.6rem;
}
#search-results .subtitle{
   color: var(--color-primary-dim);
   margin-top:4px;
} 






#search-results .category-title{
   padding:16px;
   font-size:16px;
}

#search-results li.active{background:#0067CE;color:white !important;}
#search-results li.active .title,#search-results li.active .subtitle{color:white;}







#search-results li.event{
   padding:20px 40px;
}
li.event:hover{
   background:#FAFAFA;
}
li.event a.link-button{position:absolute;right:15px;top:20px;line-height:34px;height:34px;font-size:13px;width:110px;}

#filterEventsByVenue {
   padding: 8px 16px;

   background: #F8F8F8;

   display: block;
   width: fit-content;
   margin-left: 36px;

   appearance: revert;
}   




header{
   border-bottom: 1px solid #EEEEEE;
}


:root {
    --primary: #1a1a1a;
    --bg: #ffffff;
    --shadow-color: rgba(0, 0, 0, 0.05);
    /* Lighter shadow */
    --shadow-heavy: rgba(0, 0, 0, 0.08);
    /* Lighter heavy shadow */
    --border-color: #e5e7eb;

   --search-height: clamp(56px, 12vw, 96px);

}


[data-show="feature-centered"] [data-layout="stage"] h1 {
   margin-block-start: clamp(36px, 10vw, 72px);
   margin-block-end: 24px;
   text-align: center;
}

.search-container {
    width: 100%;

}

.search-wrapper {
    position: relative;
    width: 100%;
    display: flex;
    align-items: center;
    transition: transform 0.2s ease;
}

i.search-icon-left{
    position: absolute;
    left: 2rem;
    --icon-size: clamp(16px, 4vw, 24px);
    width: clamp(16px, 4vw, 24px);    
    z-index: 10;
    pointer-events: none;

    /* size hack */
    padding: 
}

input[type='search'].search-input {
    width: 100%;
    padding: 2rem 8rem 2rem 5rem;
    /* Left padding for icon, Right for pill button */

    background: #ffffff;
    border: 1px solid var(--border-color);
    /* Visible border */
    border-radius: 9999px;
    outline: none;

    box-shadow:
        0 4px 6px -1px var(--shadow-color),
        0 10px 15px -3px var(--shadow-color),
        0 20px 25px -5px var(--shadow-heavy);

   


    height: var(--search-height);
    font-size: calc(var(--search-height) * 0.25);

    font-weight: 500 !important;
}
input[type='search'].search-input::placeholder {
    font-weight: 500 !important;
    font-size: calc(var(--search-height) * 0.25);
}

input[type='search'].search-input::placeholder,
.search-icon-left{
   color: var(--color-primary-faint);
}


/* Search icon/clear hack */
/* 
   The built-in clear/cancel button takes the place of the search icon, 
   and the icon is hidden when the placeholder is not shown (e.g.: user has input)
*/
input[type="search"]::-webkit-search-cancel-button {
   position: absolute;
   left: 2rem;
   font-size: 2rem;

 }
 input[type="search"]:not(:placeholder-shown) ~ i.search-icon-left {
   display: none;
 }



button[data-is='btn'].search-btn {
   line-height: revert;
   padding: revert;

    position: absolute;
    
    /* Spacing from right edge */
    top: 50%;
    transform: translateY(-50%);
    height: calc(var(--search-height) - 20px);
    max-height: 56px;
    /* Slightly smaller than input height */
    border-radius: 9999px;
   width: 20%;

    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);

    font-size: clamp(13px, 3vw, 20px);

    right: clamp(8px, 2vw, 16px);
}



.card-list {
   display: grid;
   gap: 1.6rem;
   padding: 0;
   margin: 0;
   list-style: none;

   /* At least 180px for each column */
   grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
 }
 
 .card-list li {
   border: 1px solid #e0e0e0;
   border-radius: 6px;
   overflow: hidden;
   font-size: 1.5rem;
 }
 
 /* Entire LI is clickable */
 .card-list li > a {
   display: flex;
   align-items: center;
   justify-content: space-between;
   padding: 1.6rem;
   text-decoration: none;
   color: inherit;
   position: relative;
 }
 
 /* Chevron via ::after */
 .card-list li > a::after {
   content: "›";
   font-size: 2rem;
   line-height: 1;
   opacity: 0.6;
   margin-left: 0.5rem;
 }
 

.card-list li:hover{
   transition: background-color 0.3s ease, transform 0.3s ease;
   background: var(--color-primary);
   color: white;
}



#search-results{
   margin: 36px 16px;
   margin-bottom: 64px;
   border-radius: 16px;   
}

#search-results:not(.active-search){
   background: #F8F8F8;
   position: relative;
}

#search-results:not(.active-search):after{
   position: absolute;
   font-size: 14px;
   content: "Begin your search above";
   color: color-mix(in srgb, var(--text-default) 25%, transparent);
   top: 80px;
   text-align: center;
   width: 100%;
}


 #search-results.active-search{
    border: 1px solid #E5E5E5;
    background: white;
    display: flex;
    gap: 24px;
    flex-direction: column;
 }

 #search-results.active-search > div:not(:last-child){
   border-bottom: 1px solid #F5F5F5;
 }




 @media (min-width: 600px) {
    [data-show='feature-centered'] #breadcrumbs{
       width: fit-content;
       margin: 0px auto;
    }
}


#search-results li.event {
   display: flex;
   flex-direction: row;
   align-items: center;
   position: relative;
   gap: clamp(16px, 6vw, 48px);   
}

#search-results li.event > *:first-child {
   flex: 1;
}

#search-results li.event > *:last-child {
   flex: none;
}

a.new-search{
   color: var(--color-primary-faint);
   text-align: center;
   width: 100%;
   display: block;
   margin-bottom: 16px;   
}



/* Narrow screens */
@media (max-width: 599px) {
   #search-results li.event .button-event {
      display: none;
   }

   #search-results li.event::after {
      content: '›';
      flex: none;
      font-size: 1.5em;
      line-height: 1;
      color: #999;
      padding-left: 0.5em;
   }

   #search-results li {
      position: relative;
   }

   #search-results li a {
      position: static;
   }

   #search-results li a::before {
      content: '';
      position: absolute;
      inset: 0;
   }

   #search-results.active-search{
      border: none;
      margin-inline: 0;
   }

   #search-results.active-search li.event{
      padding-right: 16px;
   }
   
   #search-results.active-search > div{
      border-bottom: 1px solid #F5F5F5;
   }

   #search-results.active-search > div:first-child {
      border-top: 1px solid #F5F5F5;
   }

}
#search-results ._footer{
   text-transform: uppercase;
   letter-spacing: 0.03em;
   text-decoration: none;
   font-weight: normal;   
}

#search-results ._footer a{
   display: inline-flex;
   align-items: center;
   gap: 4px;   
}