/**
 * Rep Finder — styled to match the DC 2025 site.
 *
 * Tokens below are read from the live site, not invented: card surface,
 * border, radius and shadow come from `.dc-prod-card`; the blue and the
 * uppercase kicker from `.dc-pa-kicker`; the pill button from
 * `.dc-prod-card-btn`; easing and duration from the site's own transitions.
 * Fonts hook GeneratePress' `--gp-font--*` custom properties so a theme-level
 * font change carries through here with no edit.
 */

.dc-rep-finder {
  /* Type */
  --dc-rf-font-hed: var(--gp-font--hed, "hed", "Exo 2", "Arial Black", sans-serif);
  --dc-rf-font-bod: var(--gp-font--bod, "bod", "Roboto Condensed", Helvetica, Arial, sans-serif);

  /* Colour — site values */
  --dc-rf-ink: #0f172a;
  --dc-rf-text: var(--contrast, #222);
  --dc-rf-muted: #475569;
  --dc-rf-brand: #1f5fa8;
  --dc-rf-brand-dark: #17497f;
  --dc-rf-border: #dbe2ea;
  --dc-rf-border-strong: #cbd5e1;
  --dc-rf-surface: var(--base-3, #fff);
  --dc-rf-tint: #f8fafc;

  /* Shape and motion */
  --dc-rf-radius: 14px;
  --dc-rf-radius-control: 10px;
  --dc-rf-pill: 999px;
  --dc-rf-shadow: 0 8px 24px rgba(15, 23, 42, 0.06);
  --dc-rf-ease: cubic-bezier(0.2, 0.8, 0.2, 1);
  --dc-rf-gap: 1.25rem;

  font-family: var(--dc-rf-font-bod);
  color: var(--dc-rf-text);

  /* The finder is placed inside a GB Pro overlay whose column is ~420px even
     on a 1440px screen, so the results grid has to respond to its own box,
     not the viewport. Browsers without container queries keep one column. */
  container-type: inline-size;
  container-name: dc-rep-finder;
}
/* Hide contact form when rep is selected */
.gbp-section__inner.dc-rf-overlay-active  .gb-form:not(#_) {
  display: none;
}

/* ---------------------------------------------------------------- Form */

.dc-rep-finder__form {
  margin: 0 0 var(--dc-rf-gap);
}

.dc-rep-finder__label {
  display: block;
  margin-bottom: 0.6rem;
  font-family: var(--dc-rf-font-hed);
  font-size: 1.0625rem;
  font-weight: 800;
  line-height: 1.25;
  color: var(--dc-rf-ink);
}

.dc-rep-finder__controls {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  align-items: stretch;
}

.dc-rep-finder__select {
  flex: 1 1 260px;
  max-width: 26rem;
  min-height: 46px;
  /* Right padding clears the chevron below. */
  padding: 0.6rem 2.5rem 0.6rem 0.9rem;
  font-family: inherit;
  /* 16px keeps iOS Safari from zooming the viewport on focus. */
  font-size: 16px;
  line-height: 1.4;
  color: var(--dc-rf-text);
  background-color: var(--dc-rf-surface);
  border: 1px solid var(--dc-rf-border);
  border-radius: var(--dc-rf-radius-control);
  box-shadow: var(--dc-rf-shadow);
  cursor: pointer;

  /* Native arrows are OS-styled and clash with the site; supply our own. */
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9' fill='none'%3E%3Cpath d='M1 1.5 7 7.5 13 1.5' stroke='%231f5fa8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.95rem center;
  background-size: 14px 9px;
}

.dc-rep-finder__select:hover {
  border-color: var(--dc-rf-border-strong);
}

.dc-rep-finder__submit {
  flex: 0 0 auto;
  min-height: 46px;
  padding: 0.6rem 1.5rem;
  font-family: inherit;
  font-size: 0.9rem;
  font-weight: 700;
  line-height: 1.4;
  color: #fff;
  background-color: var(--dc-rf-brand);
  border: 1px solid var(--dc-rf-brand);
  border-radius: var(--dc-rf-pill);
  cursor: pointer;
}

.dc-rep-finder__submit:hover {
  background-color: var(--dc-rf-brand-dark);
  border-color: var(--dc-rf-brand-dark);
}

.dc-rep-finder__select:focus-visible,
.dc-rep-finder__submit:focus-visible,
.dc-rep-card__phone:focus-visible,
.dc-rep-card__email:focus-visible {
  outline: 2px solid var(--dc-rf-brand);
  outline-offset: 2px;
}

/* -------------------------------------------------- Count / empty state */

.dc-rep-finder__count {
  margin: 0 0 var(--dc-rf-gap);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--dc-rf-brand);
}

.dc-rep-finder__empty {
  margin: 0 0 var(--dc-rf-gap);
  padding: 1rem 1.25rem;
  font-size: 0.95rem;
  line-height: 1.55;
  color: var(--dc-rf-muted);
  background-color: var(--dc-rf-tint);
  border: 1px solid var(--dc-rf-border-strong);
  border-radius: var(--dc-rf-radius);
}

.dc-rep-finder__empty a {
  color: var(--dc-rf-brand);
  font-weight: 700;
}

/* -------------------------------------------------------------- Results */

.dc-rep-finder__results {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--dc-rf-gap);
}

@container dc-rep-finder (min-width: 620px) {
  .dc-rep-finder__results {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Three is the ceiling — no state has more than three reps. */
@container dc-rep-finder (min-width: 940px) {
  .dc-rep-finder__results {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* ----------------------------------------------------------------- Card */

.dc-rep-card {
  padding: 1.25rem 1.35rem 1.35rem;
  background-color: var(--dc-rf-surface);
  border: 1px solid var(--dc-rf-border);
  border-radius: var(--dc-rf-radius);
  box-shadow: var(--dc-rf-shadow);
}

.dc-rep-card__firm {
  margin: 0 0 0.4rem;
  font-family: var(--dc-rf-font-hed);
  font-size: 1rem;
  font-weight: 800;
  line-height: 1.25;
  color: var(--dc-rf-ink);
}

.dc-rep-card__states {
  margin: 0 0 0.35rem;
  font-size: 0.75rem;
  line-height: 1.5;
  letter-spacing: 0.02em;
  color: var(--dc-rf-muted);
}

.dc-rep-card__states-label {
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.dc-rep-card__note {
  margin: 0 0 1rem;
  font-size: 0.95rem;
  line-height: 1.55;
  color: var(--dc-rf-muted);
}

.dc-rep-card__contacts {
  margin: 0;
  padding: 0;
  list-style: none;
}

.dc-rep-card__contact {
  padding: 0.7rem 0;
  border-top: 1px solid var(--dc-rf-border);
}

.dc-rep-card__contact:first-child {
  border-top: none;
  padding-top: 0;
}

.dc-rep-card__contact:last-child {
  padding-bottom: 0;
}

.dc-rep-card__name {
  display: block;
  margin-bottom: 0.3rem;
  font-size: 0.95rem;
  font-weight: 700;
  line-height: 1.35;
  color: var(--dc-rf-text);
}

/* Icon + label rows, matching the corporate contact block in the Contact Us
   overlay: a 1em currentColor glyph, half-em gap, centred on the text. */
.dc-rep-card__phone,
.dc-rep-card__email {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  /* 44px tap target without visibly padding the text out of the card. */
  padding: 0.35rem 0;
  font-size: 0.9375rem;
  line-height: 1.4;
  color: var(--dc-rf-brand);
  text-decoration: underline;
  text-decoration-color: rgba(31, 95, 168, 0.35);
  text-underline-offset: 2px;
  overflow-wrap: anywhere;
}

.dc-rep-card__icon {
  display: block;
  flex: 0 0 auto;
  /* Optical: the glyphs read heavy against text at full weight. */
  color: var(--dc-rf-muted);
  /* The glyph is the label's decoration, not part of the link text. */
  text-decoration: none;
}

.dc-rep-card__icon svg {
  display: block;
}

.dc-rep-card__phone:hover,
.dc-rep-card__email:hover {
  color: var(--dc-rf-brand-dark);
  text-decoration-color: currentColor;
}

.dc-rep-card__phone:hover .dc-rep-card__icon,
.dc-rep-card__email:hover .dc-rep-card__icon {
  color: var(--dc-rf-brand-dark);
}

.dc-rep-card__phone {
  margin-right: 1rem;
  font-variant-numeric: tabular-nums;
}

/* ------------------------------------------------- Contact overlay reflow */

/**
 * With a state chosen, the Contact Us overlay drops to one column and
 * resequences: reps, then the contact form, then corporate contact info.
 *
 * The plugin reaches outside its own DOM to do this, so every selector is
 * anchored to something stable — `.gbp-section__inner` (GB Pro's own class)
 * and `.dc-rep-finder` itself. No GenerateBlocks auto-hash classes are named,
 * and the JS only adds the active class when it finds that structure, so the
 * block placed anywhere else is unaffected.
 */

/**
 * GB Pro's overlay is `position: fixed` with `overflow: visible` and no scroll
 * container, so anything past the viewport is simply unreachable — the page
 * behind it scrolls, the overlay does not. Selecting a state adds several
 * hundred pixels of cards, which is what puts the corporate contact block over
 * that line, so the plugin restores scrolling rather than leaving content
 * stranded. `:has()` scopes this to overlays the finder has actually reflowed.
 */
.gb-overlay__content:has(.dc-rf-overlay-active) {
  max-height: 100vh;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.gbp-section__inner.dc-rf-overlay-active {
  grid-template-columns: 1fr;
  gap: 2.5rem;
}

/* Dissolve both column wrappers so their children join a single grid and can
   be resequenced across what used to be a column boundary. */
.gbp-section__inner.dc-rf-overlay-active > * {
  display: contents;
}

.dc-rf-overlay-active .gbp-section__tagline {
  order: 1;
}

.dc-rf-overlay-active .gbp-section__headline {
  order: 2;
}

.dc-rf-overlay-active .dc-rep-finder {
  order: 3;
}

/* The form — sole child of the second column. */
.dc-rf-overlay-active > :last-child > * {
  order: 4;
}

/* Corporate contact info: whatever follows the finder in the first column,
   including the subhead the script inserts ahead of it. */
.dc-rf-overlay-active .dc-rep-finder ~ * {
  order: 5;
}

/**
 * Matches `.dc-rep-finder__label` so the two blocks read as siblings.
 *
 * The script inserts this as a *sibling* of `.dc-rep-finder`, not a descendant,
 * so the `--dc-rf-*` tokens are out of scope here. Resolve against the theme's
 * own custom properties instead of inheriting a token that will never resolve.
 */
.dc-rep-finder__corp-subhead {
  margin: 0 0 0.75rem;
  font-family: var(--gp-font--hed, "hed", "Exo 2", "Arial Black", sans-serif);
  font-size: 1.0625rem;
  font-weight: 800;
  line-height: 1.25;
  color: #0f172a;
}

/* --------------------------------------------------------------- Motion */

@media not (prefers-reduced-motion: reduce) {
  .dc-rep-finder__select,
  .dc-rep-finder__submit {
    transition:
      background-color 0.18s var(--dc-rf-ease),
      border-color 0.18s var(--dc-rf-ease),
      box-shadow 0.18s var(--dc-rf-ease);
  }

  .dc-rep-card__phone,
  .dc-rep-card__email {
    transition:
      color 0.18s var(--dc-rf-ease),
      text-decoration-color 0.18s var(--dc-rf-ease);
  }
}

/* ---------------------------------------------------------------- Print */

@media print {
  .dc-rep-finder__form,
  .dc-rep-finder__count {
    display: none;
  }

  /* The UA sheet's `[hidden] { display: none }` needs beating explicitly so a
     printed page carries every rep, not only the filtered selection. */
  .dc-rep-card[hidden] {
    display: block !important;
    break-inside: avoid;
  }

  .dc-rep-card {
    box-shadow: none;
  }
}