/*
 * 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 from an off-screen <select>. The closed control reproduces jCF's
   own design (scss/plugins/_plugins.jcf.scss, dropped from main.scss with the plugin):
   white field, 1px #767676 border, 14px/20px padding, 18px text at 125% line-height, and
   the red chevron-down (#aa182c — the `jcf.chevron` token, drawn here as an inline SVG since
   a <select> cannot carry a pseudo-element). This is the no-JS fallback: site.js replaces each
   .js-select-dropdown with jCF's own markup (styled by scss/plugins/_plugins.jcf.scss, which
   hides the native control with .jcf-hidden), so the OPEN list matches live's styled panel. */
.js-select-dropdown {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  width: 100%;
  padding: 14px 44px 14px 20px;
  font-family: inherit;
  font-size: 18px;
  line-height: 125%;
  color: #767676;
  background-color: #ffffff;
  border: 1px solid #767676;
  border-radius: 0;
  cursor: pointer;
  /* chevron-down, in the jcf chevron red */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23aa182c' stroke-width='1.5' stroke-linecap='square'%3E%3Cpath d='M1 5l7 7 7-7'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 20px center;
  background-size: 14px;
}

.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; }