/* =============================================================================
   Beautino Bouncy Dropdowns — inspired by CodePen ZYOQVNK
   ("Link Sharing Control Panel — Bouncy Dropdown + Accent Hue Tuner")
   Rounded control, custom chevron, accent focus ring, layered soft shadows
   and a springy (bouncy) interaction feel. RTL-first (chevron on the left).
   Uses theme tokens only: --cp-* --c-* --r-* --ease-*
   ============================================================================= */

select{
  appearance:none;
  -webkit-appearance:none;
  -moz-appearance:none;

  font-family:inherit;
  font-size:inherit;
  line-height:1.4;
  color:var(--c-text);

  background-color:var(--c-surface);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%230F766E' fill-rule='evenodd' d='M7 9a1 1 0 0 0-.707 1.707l5 5a1 1 0 0 0 1.414 0l5-5A1 1 0 0 0 17 9z' clip-rule='evenodd'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-size:1.5em;
  background-position:left center;

  border:1px solid var(--c-border);
  border-radius:var(--r-sm);
  padding:10px 16px;
  padding-left:calc(1.8em);

  box-shadow:0 1px 2px rgba(15,118,110,.04),0 2px 4px rgba(15,118,110,.05),0 4px 8px rgba(15,118,110,.04);

  cursor:pointer;
  transition:color .35s var(--ease-spring),background-color .35s var(--ease-spring),
             border-color .35s var(--ease-spring),box-shadow .35s var(--ease-spring),
             transform .35s var(--ease-spring);
}

select:hover{
  background-color:var(--cp-50);
  border-color:var(--cp-400);
  transform:translateY(-1px);
  box-shadow:0 4px 12px rgba(15,118,110,.10);
}

select:focus{
  outline:2px solid rgba(15,118,110,.35);
  outline-offset:2px;
  border-color:var(--cp-500);
  box-shadow:0 0 0 4px rgba(15,118,110,.10);
}

select:active{
  transform:scale(.97);
}

select:disabled{
  opacity:.55;
  cursor:not-allowed;
  background-color:var(--c-bg);
  box-shadow:none;
}

select:disabled:hover{
  transform:none;
  border-color:var(--c-border);
}

/* Native option list (best-effort; popup styling is browser-dependent) */
select option{
  background-color:var(--c-surface);
  color:var(--c-text);
  font-family:inherit;
}
select option:checked{
  background-color:var(--cp-50);
  color:var(--cp-600);
  font-weight:600;
}
@supports (-moz-appearance:none){
  select option{
    border-radius:var(--r-sm);
    padding:6px 10px;
  }
}

/* --------------------------------------------------------------------------
   Context refinements (compound selectors win over any existing class rule
   regardless of stylesheet order)
   -------------------------------------------------------------------------- */

/* Hero search cascading selects — borderless, blend into the pill-shaped
   .search__field cell (dividers + focus-within ring live on the cell). */
select.search__field-select{
  width:100%;
  min-width:0;
  font-size:14px;
  font-weight:500;
  color:var(--c-text);
  background-color:transparent;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%230F766E' fill-rule='evenodd' d='M7 9a1 1 0 0 0-.707 1.707l5 5a1 1 0 0 0 1.414 0l5-5A1 1 0 0 0 17 9z' clip-rule='evenodd'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-size:1.4em;
  background-position:left center;
  border:none;
  border-radius:0;
  padding:2px 0;
  padding-left:calc(1.4em + 6px);
  box-shadow:none;
}
select.search__field-select:hover{
  background-color:transparent;
  border:none;
  transform:none;
  box-shadow:none;
}
select.search__field-select:focus{
  outline:none;
  border:none;
  box-shadow:none;
}
select.search__field-select:disabled{
  color:var(--c-muted);
  -webkit-text-fill-color:var(--c-muted);
  background-color:transparent;
}
select.search__field-select option{
  background-color:var(--c-surface);
  color:var(--c-text);
}

/* Archive / search results sort dropdown */
select.archive-main__sort-select{
  font-size:14px;
  font-weight:600;
  padding:9px 16px;
  padding-left:calc(1.8em);
  border-radius:var(--r-pill);
}
select.archive-main__sort-select:hover{
  background-color:var(--cp-50);
  border-color:var(--cp-400);
}

/* Contact form dropdown */
select.contact-form__select{
  font-size:0.9375rem;
  padding:11px 16px;
  padding-left:calc(1.8em);
}
select.contact-form__select.contact-form__input--error{
  border-color:#ef4444;
  box-shadow:0 0 0 3px rgba(239,68,68,0.1);
}

/* =============================================================================
   Bouncy dropdown widget (.bdd*) — CodePen ZYOQVNK opened-menu behavior.
   Progressive enhancement: dropdown.js wraps each select, hides the native
   control and renders a spring-animated menu. The native select stays in the
   DOM (hidden) so forms / AJAX sort / cascading heroes keep working.
   If JS is off, the native selects keep the styled look above.
   ============================================================================= */

:root{
  --bdd-spring:linear(0,0.008 1.1%,0.034 2.3%,0.134 4.9%,0.264 7.3%,0.683 14.3%,0.797 16.5%,0.89 18.6%,0.967 20.7%,1.027 22.8%,1.073 25%,1.104 27.3%,1.123 30.6%,1.119 34.3%,1.018 49.5%,0.988 58.6%,0.985 65.2%,1 84.5%,1);
  --bdd-sheet-ease:cubic-bezier(.25,1,.5,1);
  --bdd-sheet-dur:.65s;
}

.bdd{
  position:relative;
  display:inline-block;
  max-width:100%;
  font-family:inherit;
}
.bdd--hero{display:block;width:100%}
.bdd--contact{display:block;width:100%}

.bdd__trigger{
  display:block;
  width:100%;
  appearance:none;
  font-family:inherit;
  font-size:inherit;
  line-height:1.4;
  color:var(--c-text);
  text-align:start;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  background-color:var(--c-surface);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%230F766E' fill-rule='evenodd' d='M7 9a1 1 0 0 0-.707 1.707l5 5a1 1 0 0 0 1.414 0l5-5A1 1 0 0 0 17 9z' clip-rule='evenodd'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-size:1.5em;
  background-position:left center;
  border:1px solid var(--c-border);
  border-radius:var(--r-sm);
  padding:10px 16px;
  padding-left:calc(1.8em);
  box-shadow:0 1px 2px rgba(15,118,110,.04),0 2px 4px rgba(15,118,110,.05),0 4px 8px rgba(15,118,110,.04);
  cursor:pointer;
  transition:color .35s var(--ease-spring),background-color .35s var(--ease-spring),
             border-color .35s var(--ease-spring),box-shadow .35s var(--ease-spring),
             transform .35s var(--ease-spring);
}
.bdd__trigger:hover{
  background-color:var(--cp-50);
  border-color:var(--cp-400);
  transform:translateY(-1px);
  box-shadow:0 4px 12px rgba(15,118,110,.10);
}
.bdd__trigger:focus-visible{
  outline:2px solid rgba(15,118,110,.35);
  outline-offset:2px;
  border-color:var(--cp-500);
  box-shadow:0 0 0 4px rgba(15,118,110,.10);
}
.bdd__trigger:active{transform:scale(.97)}

.bdd--disabled .bdd__trigger{
  opacity:.55;
  cursor:not-allowed;
  background-color:var(--c-bg);
  box-shadow:none;
}
.bdd--disabled .bdd__trigger:hover{
  transform:none;
  border-color:var(--c-border);
}

/* Opened menu — spring bounce like the CodePen.
   Portaled to <body> and positioned via JS (position:fixed), so it escapes
   ancestor stacking contexts (backdrop-filter) and overflow clipping. */
.bdd__menu{
  position:fixed;
  top:0;
  left:0;
  width:auto;
  min-width:0;
  z-index:500;
  margin:0;
  padding:6px;
  list-style:none;
  background:var(--c-surface);
  border:1px solid var(--c-border);
  border-radius:calc(var(--r-sm) * 1.5);
  box-shadow:0 1px 2px rgba(15,118,110,.03),0 2px 4px rgba(15,118,110,.04),
             0 3px 6px rgba(15,118,110,.04),0 6px 12px rgba(15,118,110,.05),
             0 16px 32px rgba(15,118,110,.10);
  transform-origin:center top;
  opacity:0;
  visibility:hidden;
  scale:1 .25;
  translate:0 -12px;
  pointer-events:none;
  transition:opacity .55s var(--bdd-spring),scale .55s var(--bdd-spring),
             translate .55s var(--bdd-spring),visibility 0s linear .55s;
  will-change:transform,opacity;
}
/* Scroll only engages when the menu has more than 5 options (set by JS) */
.bdd__menu--scroll{
  max-height:210px;
  overflow-y:auto;
  overscroll-behavior:contain;
  scrollbar-width:thin;
  scrollbar-color:var(--cp-300) transparent;
}
.bdd__menu::-webkit-scrollbar{width:6px}
.bdd__menu::-webkit-scrollbar-thumb{background:var(--cp-300);border-radius:999px}
.bdd__menu::-webkit-scrollbar-track{background:transparent}
.bdd__menu--open{
  opacity:1;
  visibility:visible;
  scale:1 1;
  translate:0 0;
  pointer-events:auto;
  transition:opacity .55s var(--bdd-spring),scale .55s var(--bdd-spring),
             translate .55s var(--bdd-spring),visibility 0s;
}

/* Flip chevron on open */
.bdd--open .bdd__trigger{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%230F766E' fill-rule='evenodd' d='M17 15a1 1 0 0 0 .707-1.707l-5-5a1 1 0 0 0-1.414 0l-5 5A1 1 0 0 0 7 15z' clip-rule='evenodd'/%3E%3C/svg%3E");
}

.bdd__opt{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:9px 12px;
  border-radius:12px;
  cursor:pointer;
  user-select:none;
  color:var(--c-text);
  font-size:inherit;
  line-height:1.5;
  white-space:nowrap;
  translate:0 20%;
  opacity:0;
  transition:translate .55s var(--bdd-spring),opacity .55s var(--bdd-spring),
             background-color .2s var(--ease-out),color .2s var(--ease-out);
  transition-delay:.05s;
}
.bdd__opt-label{
  flex:1 1 auto;
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.bdd__menu--open .bdd__opt{translate:0 0;opacity:1}
.bdd__menu--open .bdd__opt:nth-child(2){transition-delay:.1s}
.bdd__menu--open .bdd__opt:nth-child(3){transition-delay:.15s}
.bdd__menu--open .bdd__opt:nth-child(4){transition-delay:.2s}
.bdd__menu--open .bdd__opt:nth-child(5){transition-delay:.25s}
.bdd__menu--open .bdd__opt:nth-child(6){transition-delay:.3s}
.bdd__menu--open .bdd__opt:nth-child(7){transition-delay:.35s}
.bdd__menu--open .bdd__opt:nth-child(8){transition-delay:.4s}
.bdd__menu--open .bdd__opt:nth-child(9){transition-delay:.45s}
.bdd__menu--open .bdd__opt:nth-child(10){transition-delay:.5s}

.bdd__opt:hover,.bdd__opt:focus{
  color:var(--cp-600);
}
.bdd__opt:not(.bdd__opt--selected):hover,.bdd__opt:not(.bdd__opt--selected):focus{
  background:transparent;
}
.bdd__opt:focus-visible{
  outline:2px solid rgba(15,118,110,.35);
  outline-offset:-2px;
}
.bdd__opt--selected{
  background:rgba(15,118,110,.09);
  color:var(--cp-600);
  font-weight:600;
}
.bdd__opt--selected::after{
  content:"";
  width:16px;
  height:16px;
  flex-shrink:0;
  background:var(--cp-500);
  mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z'/%3E%3C/svg%3E");
  mask-repeat:no-repeat;
  mask-position:center;
  mask-size:contain;
}
.bdd__opt--disabled{opacity:.5;cursor:not-allowed}

/* Context variants (mirror the select.<class> refinements) */
.bdd--hero .bdd__trigger{
  font-size:14px;
  font-weight:500;
  padding:2px 0;
  padding-left:calc(1.4em + 6px);
  background-color:transparent;
  border:none;
  border-radius:0;
  box-shadow:none;
}
.bdd--hero .bdd__trigger:hover,
.bdd--hero .bdd__trigger:focus-visible,
.bdd--hero .bdd__trigger:active{
  background-color:transparent;
  border:none;
  transform:none;
  box-shadow:none;
}
.bdd--hero .bdd__trigger:focus-visible{
  outline:2px solid rgba(15,118,110,.35);
  outline-offset:2px;
}
.bdd--hero.bdd--disabled .bdd__trigger{
  color:var(--c-muted);
  opacity:.7;
  background-color:transparent;
}
.bdd--sort{width:130px}
.bdd--sort .bdd__trigger{font-size:14px;font-weight:600;padding:9px 16px;padding-left:calc(1.6em);border-radius:var(--r-pill)}
.bdd--contact .bdd__trigger{font-size:0.9375rem;padding:11px 16px;padding-left:calc(1.8em)}

/* ---- Mobile bottom sheet (≤640px) — the opened menu becomes a full-width
   slide-up panel with a grab handle, scrim backdrop and safe-area padding ---- */
.bdd__scrim{
  position:fixed;
  inset:0;
  z-index:499;
  background:rgba(15,23,42,.45);
  -webkit-backdrop-filter:blur(2px);
  backdrop-filter:blur(2px);
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transition:opacity .35s ease,visibility 0s linear .35s;
}
.bdd__scrim--visible{
  opacity:1;
  visibility:visible;
  pointer-events:auto;
  transition:opacity .35s ease;
}

@media (max-width:640px){
  .bdd__menu{
    width:100% !important;
    left:0 !important;
    right:0 !important;
    top:auto !important;
    bottom:64px !important;
    max-height:62vh;
    overflow-y:auto;
    overscroll-behavior:contain;
    scrollbar-width:thin;
    scrollbar-color:var(--cp-300) transparent;
    border-radius:18px 18px 0 0;
    border-bottom:none;
    border-left:1px solid var(--c-border);
    border-right:1px solid var(--c-border);
    transform-origin:center bottom;
    scale:1 1;
    translate:0 100%;
    transition:opacity var(--bdd-sheet-dur) var(--bdd-sheet-ease),scale var(--bdd-sheet-dur) var(--bdd-sheet-ease),
               translate var(--bdd-sheet-dur) var(--bdd-sheet-ease),visibility 0s linear var(--bdd-sheet-dur);
    padding-bottom:max(6px, env(safe-area-inset-bottom));
  }
  .bdd__menu--open{
    translate:0 0;
    transition:opacity var(--bdd-sheet-dur) var(--bdd-sheet-ease),scale var(--bdd-sheet-dur) var(--bdd-sheet-ease),
               translate var(--bdd-sheet-dur) var(--bdd-sheet-ease),visibility 0s;
  }
  .bdd__menu::before{
    content:"";
    display:block;
    width:38px;
    height:4px;
    margin:2px auto 8px;
    border-radius:999px;
    background:var(--c-border);
    opacity:.9;
    flex-shrink:0;
  }
  .bdd__menu--scroll{max-height:62vh}
  .bdd__opt{
    padding:14px 12px;
    font-size:15px;
    transition:translate var(--bdd-sheet-dur) var(--bdd-sheet-ease),opacity var(--bdd-sheet-dur) var(--bdd-sheet-ease),
               background-color .2s var(--ease-out),color .2s var(--ease-out);
  }
}