/* ============================================================================
   ExamBeacon · Schools directory page — STYLES
   ----------------------------------------------------------------------------
   HOW THIS WORKS
     Lives in Studio's /public folder and is served statically by Vercel at
       https://epp.studio/exambeacon/schools-page.css
     The Webflow page references that URL in its custom code, so editing this
     file + pushing to main updates the live page on the next Vercel deploy —
     no Webflow re-publish needed.

   SERVES:        Schools directory  →  exambeacon.com/schools
   REFERENCED IN: Webflow page → Inside <head> tag:
                  <link rel="stylesheet" href="https://epp.studio/exambeacon/schools-page.css">
   PAIRED WITH:   schools-page.js
   ============================================================================ */

/* Filter dropdown arrow — keep the selects full width, but move the arrow next
   to the label instead of the far-right edge. A native <select> pins its arrow
   right, so we hide it (appearance:none) and draw a custom chevron positioned
   after the placeholder text. (The full option text still shows when opened.) */
.eb-filter-select{
  -webkit-appearance:none;
  -moz-appearance:none;
  appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M4 6l4 4 4-4' stroke='%2357534E' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 16px center;
}

/* Mobile: the three filter selects sit three-across in a cramped row, so the
   custom chevron overlaps the placeholder text. Below 768px, drop the chevron
   and reclaim its right padding. (schools-page.js shortens the placeholder
   labels — "All types" -> "Type" — at the same breakpoint so they fit.) */
@media (max-width:767px){
  .eb-filter-select{
    background-image:none;
    padding-left:12px;
    padding-right:12px;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
  }
  /* Collapse the "Clear" link to a single × so the three selects get the width
     back (otherwise the labels don't fit three-across). Webflow sizes the link
     to its text, so a fixed width is needed — flex/font-size alone won't shrink
     it. Frees ~38px, widening each select from ~81px to ~94px. */
  .eb-filter-clear{
    flex:0 0 34px;
    width:34px;
    min-width:34px;
    max-width:34px;
    padding-left:0;
    padding-right:0;
    font-size:0;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    overflow:hidden;
  }
  .eb-filter-clear::after{
    content:"\00D7"; /* × */
    font-size:22px;
    line-height:1;
  }
}