/*
 * Kramon & Graham — small modern CSS layer on top of the compiled main.css.
 * Holds styles that replace dropped jQuery plugins (jCF custom selects, Swiper) with
 * native/modern equivalents, so the JS modernization doesn't regress the design.
 * The bulk of the design still comes from the compiled SCSS (main.min.css).
 */

/* Native <select> styling — replaces jCF (jQuery Custom Forms), which used to render a
   fully custom dropdown. The closed control matches the filter design (border, padding,
   caret); the open list is now the browser-native dropdown (more accessible + mobile-
   friendly). Scoped to the site's dropdown selects. */
.js-select-dropdown {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  width: 100%;
  padding: 0.75rem 2.25rem 0.75rem 1rem;
  font: inherit;
  color: inherit;
  line-height: 1.2;
  background-color: #fff;
  border: 1px solid currentColor;
  border-radius: 0;
  cursor: pointer;
  /* caret */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%23000' stroke-width='2'%3E%3Cpath d='M5 8l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.85rem center;
  background-size: 1rem;
}

.js-select-dropdown::-ms-expand { display: none; }

.js-select-dropdown:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 2px;
}

/* HTMX: avoid a flash of unstyled swap; keep the results region steady during requests. */
.htmx-swapping { opacity: 0.6; transition: opacity 120ms ease; }

/* Quotes slider — vanilla replacement for Swiper (site.js). Show one .c-quotes__item at a time;
   the dots reuse the compiled .swiper-pagination-bullet look (pure CSS, no Swiper runtime). */
.js-slider .c-quotes__item { display: none; }
.js-slider .c-quotes__item.is-active { display: block; }
.c-quotes__pagination .swiper-pagination-bullet { cursor: pointer; }

/* Attorney grid — the legacy site laid these cards out with Isotope (jQuery), which
   JS-positions the width:25% cols into a grid. Modernized off Isotope, so flow them with
   flexbox to reproduce the multi-column grid (the breakpoints on __col set 4/3/2/1 up). */
.o-attorneys__row { display: flex; flex-wrap: wrap; align-items: stretch; }
.o-attorneys__row .o-attorneys__col { box-sizing: border-box; }